ドラッグ&ドロップでファイルのアップロードを可能にするJavaScriptライブラリ – creamuKunitaka Kawashimo アートディレクター・デザイナー・フォトグラファー。株式会社クリーム代表取締役。グラフィックデザイン／Webデザイン／撮影の仕事のご相談・ご質問は、お気軽に以下までご連絡ください。info@creamu.co.jp
Takazudolog - Grunt v0.4.0 での変更点
Grunt がめでたく version 0.4.0 になりました。version 0.3.xからの変更点をざっくり。自分で昔書いたタスクを書きなおす上で必要だったことのみですけど。 箇条書きで書くとこんなかんじでした。 ドキュメントがめっちゃ親切になった Grunt本体はグローバルにインストールされなくなった grunt-cliのみをグローバルにインストールすればOK ビルトインのタスクは全てnpm moduleになった Grunt本家がビルトインで存在していたタスクをnpm moduleとして用意した コンフィグのファイルはgrunt.jsではなく、Gruntfile.js及びGruntfile.coffeeになった コンフィグのファイル及びタスクはCoffeeScriptで書いても良くなった タスク内でイベントが使えるようになった テンプレート機能が改善 registerHelperが
Elmで始めるFunctional Reactive Programming
※注意 現在のElmは、これを書いた時とはかなり別物になっています。そのためElmを学ぶにはこの資料は適切ではありません。Functional Reactive Programmingの習得には参考になると思います。 ===== ElmはHaskellと同じく純粋関数型言語のひとつで、ブラウザ上で動くアプリケーションの作成に特化しています。目に見えるものがすぐに作れるなど、関数型プログラミングやFRP(Functional Reactive Programming)の入門によい面がいくつかあります。JavaScriptなど型のない手続き型言語に慣れた人向けに関数型プログラミングのイメージを掴んでもらうことを目的にしています。
HTML / DOM におけるキーボードイベント周りの話 - ひだまりソケットは壊れない
最近キーボードショートカットの実装をしようと思ってキー入力によるイベント周りについて調べてみたのだけれど、日本語でまとまった情報が見つからなかったので、キーボードショートカットの実装に必要そうな内容を簡単にまとめておこうと思う。 キーボードショートカットに限らず、キー入力によるイベント周りの何かをする場合には参考になると思う。 本記事では、DOM 3 Events spec の 2012-09-06 の版を参照しており、将来の版では変更されている可能性がある。 最新の版は下記リンクから確認のこと。 Document Object Model (DOM) Level 3 Events Specification (DOM 3 Events spec の最新安定板) keydown イベント、keypress イベント、keyup イベントについて keydown イベント は、キーが押された
jQuery.Deferred を使ってみる。 | バシャログ。
カーテンのない家には住めない事に気がついたminamiです。 jQueryにはjQuery.Deferred というオブジェクトがあります。jQuery 1.5 のころから実装されてだいぶ経っているのですが、今までなんとなくよくわからなくて苦手意識があったので改めて使ってみました。 jQuery.Deferred ってなに？ "deferred" の意味を調べると「延期された」「遅延された」などの意味があります。乱暴にまとめてしまうと、様々な処理が終わった後に呼ばれる（遅延された）処理を監視してくれるオブジェクトと言えます。 何を言っているのかわからん 文章で書くとまどろっこしいのでサンプルを作りました。1～4の処理が全て終わったら完了の表示を出します。 jQuery.Deferred を使った処理の管理 window.setTimeout() などのタイマー処理 jQuery.ajax
node.jsのいろいろなモジュール17 – asyncで非同期処理のフロー制御 | DevelopersIO
node.jsでの関数呼び出し 非同期処理 node.jsはnon-blocking処理を行うため、関数によってはプログラマの意図しない順番で処理が実行されることがあります。 次の例をみてください。プログラムの開始をconsole.logで出力後、ファイルを読み込んで内容を出力、 最後にプログラム終了をconsoke.logで出力しています。 //app.js var fs = require('fs'); console.log("start"); //ファイル読み込み fs.readFile("hello.txt","utf-8",function(err,data) { console.log(data); }); console.log("finish"); 上記プログラムを自分の環境で実行した結果は次のようになってます。 startとfinishが表示され、ファイル内容は最後に表
Capybara-Webkit＋Cucumber＋Sinon.JSでJavaScriptのテストはここまで変わる
Capybara-Webkit＋Cucumber＋Sinon.JSでJavaScriptのテストはここまで変わる：フレームワークで実践！ JavaScriptテスト入門（5）（1/3 ページ） しっかりとJavaScriptをテストするために、今注目のJavaScript用のテストフレームワークをいくつか紹介し、その概要から実践的な使い方まで解説する連載。今回は、RubyでWebKitをヘッドレス化するフレームワーク、受け入れテストの記述が日本語でできるツール、スタブやモック、スパイが使えるライブラリを組み合わせたテスト方法などを紹介。 Capybara-WebkitとCucumberとSinon.JSを利用したJavaScriptのテスト 本連載の最終回となる今回は、これまでの連載のようなJavaScriptのロジックを単体テストするのではなく、Webブラウザ上の操作と、それによって動作
JavaScriptと非同期のエラー処理
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。前回のコールバック地獄に関する記事では、複雑な入れ子になりやすい非同期処理でも、GeneratorやjQuery.Deferredを使うことで、同期的な見た目に変形できることを示しました。 ところで、非同期処理においてはもう一つ「 エラー処理に例外が使えない 」という問題があります。今回はエラー処理について考えてみたいと思います。 例外を使ったエラー処理 非同期処理の話の前に、一度「例外」についておさらいしておきましょう。JavaScriptに限らず、エラーと言えばよく例外を使って記述されます。 「Web APIから500が返ってきた」とか「入力された値が期待する型
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
knockout.js の最近の動向 - しばやん雑記
気が付いたら 2.2.1 までバージョンが上がっていました。2.2.1 に関してはリリースノートが上がっていないようなので、2.2.0 の情報を追いかけます。 大きなところでは foreach バインディングを使っている場合、ソートで順番を入れ替えた場合に DOM の再生成を行わないようになっているようです。他にも仮想要素に対して text バインディングを設定可能になったようです。 <!-- 今までは親タグが必要だった --> <span data-bind="text: fullName"></span> <!-- ko 2.2.0 から仮想要素にバインド可能になった --> <!-- ko text: fullName --><!-- /ko --> 個人的には仮想要素が好きなので、この実装は嬉しいですね。 最近は ASP.NET MVC でも Single Page Applica
JavaScriptのthisの覚え方 - Qiita
JavaScriptのthisは同じソースコードでも呼び出し元次第で意味が違ったりして複雑だと思われがちだけど、一回覚えてしまえば簡単だ。 JavaScriptにはthisが4種類ある これだけをしっかり覚えておけば、後は必要な時に 4種類って何があるんだっけ？ と考えれば容易に思い出せる。 ちなみに、下記のコードはブラウザ上で実行することを想定している。(なのでwindowを使う) トップレベルのthis グローバルオブジェクトを指す。 var hoge = "fuga"; window.foo = "bar"; // fuga+bar と表示される console.log(this.hoge + "+" + this.foo); (function(){ // 同じくfuga+bar と表示される console.log(this.hoge + "+" + this.foo); })(
WebWorkerでXMLHttpRequest - Qiita
XMLHttpRequestをWebWorkerで実行する Senchaが公開したHTML5のFacebookクライアント、Fastbookの高速化手法として、 XMLHttpRequestをWebWorkerで実行するのがあるそうです。 ということで、実際にやってみました。 WebWorkerの呼び出し jQueryを用いた環境で使いやすいように、jQueryの$.ajaxインターフェイスに似せています。 ただし、XMLHttpRequestをWebWorkerからは取得できないので、全く一緒ではありません。 ExecutorServiceの実装 WebWorkerを大量に作成すると負荷がかかるので、 少し手間ですが、同時実行数を制限し、リクエストをキューイングする ExecutorServiceを実装します。 var ExecutorServece = (function() { Ex
TypeScript 勉強会
下記勉強会の発表資料です。 --------------------------------------------------------- JSLOVE 〜JavaScriptを愛する人の話を聞いてみよう〜 http://devlove.doorkeeper.jp/events/5811 ---------------------------------------------------------
にひりずむ::しんぷる - JSONPath が便利でスクレイピングが捗る話
JSONPath というのがあって、いわゆる XPath の JSON 版です。 仕様は以下 JSONPath - XPath for JSON XPath すべての機能が使えるわけではありませんが、巨大な JSON から目的の key を探す場合にはなかなか便利です。 たとえば、Dailymotion の JSON なんかはダンプすると 900行ぐらいあったりして、しかも超絶階層が深い。更にいうと配列が多くて、順番が変わる可能性も高い (というか実際に昔作ったスクリプトがうごかなくなっていた)。 そういう場合にサクッと指定してモリっと取ってきてくれると便利ですね。 例えば Dailymotion の動画のタイトルが欲しい場合は、JSONPath を使わないと以下のようになります。 my $title = $json->{sequence}[0]{layerList}[0]{sequenc
unshift, shift, pop, pushが混乱するので、絵で整理した - maeharinの日記
配列の追加・取り出しに関する4つのメソッド（unshift, shift, pop, push）がいつも混乱するので絵で整理した。 絵にすれば覚えられそう！いちお練習のため、自分がよく使うRuby, PHP, JavaScriptでコードも書いた。 ・いずれの言語においても上記4つのメソッドは似たような名前で存在しており、用途も同じ。 ・いずれの言語のいずれのメソッドも破壊的メソッド。 ・言語、バージョンによってメソッドの返り値は異なる。 という具合だった。 Ruby ruby 1.9.2 # unshift a = [1, 2, 3] b = a.unshift 0 p a #[0, 1, 2, 3] p b #[0, 1, 2, 3] # shift a = [1, 2, 3] b = a.shift p a #[2, 3] p b #1 # pop a = [1, 2, 3] b =
JSONを設定ファイル代わりに使う場合は JSON.parse → だめなら → eval のように二段階で評価するといいんじゃないかな - latest log
JSON.parse があまりにも眼鏡委員長なので、JSON.parse でエラーが出たら黒ギャル eval("(" + … + ")") で試す的なコードいれたらストレス減った via https://twitter.com/uupaa/status/294711990000168960 あ、さっきのJSONスタイルで書く設定ファイルのバリデーションの事ね。ユーザが設定ファイルにありがちなコメント( /* */ や // )いれてたり、 ハッシュの末尾のカンマ消し忘れてるだけでエラーで弾くのは忍びないので、 eval で jsとして評価して正しければOKでしょと via https://twitter.com/uupaa/status/294713049221324800 JSON を設定ファィル代わりに使うプロダクト多いけど、JSON.parse は些細なことでもエラーで弾くので、ev
hiddenなプロパティを作る秘伝の方法 - 葉っぱ日記
IE限定。よくわからん。 <script language="VBScript"> [abcd]=1 </script> ... <script type="text/javascript"> alert( window.hasOwnProperty("abcd"); // true alert( window.abcd == 1 ); // true alert( Object.getOwnPropertyNames(window).indexOf("abcd") ); // -1 !!! </script>
Google JavaScript Style Guilde をリビジョン 2.64 にあわせて修正しました - フリーフォーム フリークアウト
移転しました http://please-sleep.cou929.nu/20121229.html
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CODEPREP
feb19
