サンプル１ サンプル２ Google Map Apiを使っての地図作成では、 geocodeで緯度経度取得→地図移動→XHR→地図上にマーカー表示 位置情報取得→地図移動→XHR→地図上にマーカー表示 上記の処理をよく行いますが、「geocode」「位置情報取得」「XHRでのデータの取得」などは基本”非同期”の処理のためコールバックが入れ子になって複雑になりがちです。 そんなときは、curryを使って非同期処理のコールバックをまとめるとシンプルに整理できたりします。 実際にsampleを作ってみました。 位置情報を取得して周辺500m内の車椅子可のお店を表示する地図です。（位置情報が使えない場合は住所で検索してください） sample ↓ curryを使うことで非同期処理をこんな感じに書けます。詳しい内容はリンク先のソースを参照してください。 //json取得時のコールバックを束縛 var

目次 jQuery 1.4以前の書き方jQuery 1.5以上の書き方jQuery 1.8以上の書き方【発展編1】Deferredを用いた書き方 deferredとは何か？【発展編2】$.when() を用いた書き方参考本エントリは軽めのjQuery Advent Calendar 2012の14日目の記事として書きます。軽めといいながら少し重めになってしまった感がありますが、初めてのAdvent Calendar参加ということでご勘弁を。 ※ Twitter API仕様変更によりTwitter APIを使ったコード例は現在動作しなくなっていることにご注意。 jQuery 1.4以前の書き方まずは、少し古めのコード、昔のjQueryの本とかでよく見る書き方。 $.ajax({ url: "ajax.html", success: function(data) { alert('succes

ChartkickはRailsやそれ以外のシステムで手軽に使えるグラフライブラリです。 Web上にグラフを描こうと思うと途端に面倒な気がしてしまいます。そこで使ってみて欲しいのがChartkickです。Railsとの親和性の高いグラフ描画ライブラリです。 線グラフ。 円グラフ。 棒グラフ。 複数シリーズ（円グラフは対応していません）。 ChartkickはGoogleチャートまたはHighchartsを使ってグラフを描きます。Railsでは1行で出力できていますが、実際にはJSONデータを出力しているだけなのでRailsでなくとも使えます。さらに直接JSON出力ではなく、scriptタグを使ってグラフデータの読み込みを別処理化することもできます。 ChartkickはRuby/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る グ

ドットインストール代表のライフハックブログ

タイトルのとおりjQueryを使ったクリックで開閉するメニューを作ってみました。先日マウスを乗せると開くメニューを紹介しましたが、用途によって使い分けるといいと思います。 facebookにも同じようなのがありますね。それではHTMLから解説していきます。 HTML まずはHTMLです。コンテンツの部分は省略しています。 <div id="fixed-menu"> <div id="fixed-menu-contents"> <a href="#" id="home"></a> <div class="panel-wrap"> <a href="#" class="panel-btn">カテゴリー</a> <div class="panel"> コンテンツ </div> </div> <div class="panel-wrap"> <a href="#" class="panel-btn

2013/06/07追記 Android Studio 0.1.3 - 0.1.8で もっと簡単にGoogle Play servicesを含んだGradleベースの新規プロジェクトを作る方法 New! ADT r22でGoogle Play servicesの組み込みがもっと簡単になりましたので、それにあわせた記事を書きました。 0.1.3&ADT r22からはこちらの新しい方法を使う方が良いと思います。 2013/05/31追記 Ver.0.1.2アップデートの記事に書いたように、0.1.2で再びProject Structureが表示されるようになりました。 2013/05/29追記 Ver.0.1.1アップデートの記事でも書きましたが、Android Studio 0.1.1はProjectStructureの設定画面が開きません。 この記事の内容を試すには、ProjectStru

Photoboxはレスポンシブ対応のギャラリーソフトウェアです。 数多くの写真を奇麗に見せたい時にスライドショー形式で見せるのは良いアイディアです。今回紹介するのはPhotobox、レスポンシブに対応したイメージギャラリーソフトウェアです。 写真一覧。 マウスオーバーで写真がちょっと大きく表示されます。 クリックで写真が大きく表示されます。サムネイルは下に並んで表示されます。 矢印キーで写真を切り替えられます。 スライドショー機能も備わっています。 iPhoneにも対応しています。 スワイプ操作対応です。 下から上にスワイプするとサムネイルが出ます。 写真をフローティングで見せるライブラリとしてはColorboxで知られていますが、スマートフォンに最適化されていません。Photoboxを使えばデスクトップからスマートフォンまで幅広いデバイス向けに見栄えのいいギャラリーを提供できるでしょう。

CodiadはPHP製のWeb IDEです。 Webブラウザベースで開発を行う時代が本格化しています。サーバのファイルを直接触るのではなく、ローカルの開発環境として考えてみると面白そうです。今回はCodiadを紹介します。 セットアップです。PHPファイルを配置するだけです。 先ほど決めたID/パスワードでログインします。 ログインしました。左上がファイルブラウザ、左下がプロジェクト一覧、そして右側がファイルのエディター部になります。 PHPのコードを編集しています。ハイライト処理も拡張子によって自動で適用されます。 HTMLは開くタグを書くと自動的に閉じタグが追加される便利機能もあります。 ファイルの拡張子によって自動的にアイコンが付加されます。 スプリットビュー。 設定は右側に隠れています。 設定項目。テーマ機能もあります。 対応拡張子一覧。結構多いです。 CodiadはPHPで作られ

video／audioにハマりまくったメモ。作ってたのは、Flashでやってたような、複数の動画ファイルを、途中の選択肢によって色々変えながら見せるというようなインタラクティブムービーみたいなの。なので、ハードにvideoを使いまくるという意味で、普通に一本動画を見せるという用途よりももっと色々する必要があったわけだけれども、そうでない場合でも、videoが色々厄介であるということは知っておく必要があると思う。 とりあえず、videoやaudioを使いたい人は、以下の2ページを熟読せよ。 プラグインは要らない！音声／動画対応したHTML5 - audio／video要素 | Think IT Video - Dive Into HTML5 videoのイベントは HTML5 Video を眺めてるとなんとなく分かる。 audioライブラリ試してうまくいったやつはこれ。 SoundJS vi