お洒落なものも混じっているのでたまに眺めると気持ちがホッコリしたりします。特定のキーワードでInstagramの最新の写真を検索したい時があります。Instagramの写真を通して分かるかもしれません。Instagram自身が検索機能を提供してないので他の第三者が作ったサービスがいくつか出てきます。使ってみたところ、もう少し自分で見た目やら機能を変えてみたいなーなんて思いました。そこで、「Instagramの今の写真を検索できるサービス」といういわばWebサービスを作りたい欲求にかられます。JavaScriptだけで記述可能です。PHPやRuby、Perlなどのサーバサイドについて知らなくてもよいわけです。UIやアイデアを試行錯誤するための意味をなすこともあります。インタラクティブにブラウザ上で表示を変化させることができます。「Instagramの今の写真を検索できるサービス」。実際にJavaScriptで作ってみました。すると30分ほど集中すると、Webサービスを構成する必要最低限の行程を踏むことができたのです。実際に動くサービスを使うことが可能なのでユーザとして欲求はある程度満たせるものです。(時間は適当な目安です)。HTMLとCSSの雛形を用意する(3分)JSの雛形を作る(2分)APIのドキュメントを読む(5分)JSコード、CSSを記述する(15分)公開する(5分)それぞれについて解説します。1.HTMLとCSSの雛形を用意する(3分)WebサービスとなるとHTMLとCSSは必須です。今回は雛形だけで満足することにしましょう。Frameworkを利用します。zipやtarをダウンロードして解凍すれば今すぐ使えるようなファイル構成になっているのでこちらを使ってみます。index.htmlをエディタで編集してタイトルだけの表示にします。--></body></html>ブラウザで表示を確認しつつ作業を進めます。JSの雛形を作る(2分)JavaScriptではjQueryを使います。そのための準備と確認をしましょう。GoogleでホスティングされているjQueryを読み込みます。ローカルにjsファイルをダウンロードしてもよいですが、今回は特にその必要もないので楽な方法でやります。その読み込みも記述します。index.htmlのheadの最後の方でこう書きます。src="js/instagram_search.js"></script>instagram_search.jsではjQueryが正しく動くか、その雛形を書くことで確認してみましょう。そのためには以下の2点についてWebで仕様などを調べます。画像自身へのリンクを取得できます。http://instagr.am/p/{id}/media/?size=t当たり前のことですが、こうした技術仕様を調査する行程もWebサービスを作るには必要です。JSコード、CSSを記述する(15分)ではいよいよJavaScriptのコードやCSSの調整をしていきましょう。最初は「フォームから入力された値でTwitter検索をする」ことに焦点を当てるとよかったです。index.htmlに以下のようなフォームの記述をします。</form>その上で、JS側では入力のイベントを受け取り、値を取得、それをもとにクエリーを生成して、Ajax通信を行います。オブジェクトのダンプがされると思います。ページに描画していくことをしていけば完成しそうです。最低限の小細工を施すと出来たのは以下のJSコードです。});});最後にCSSファイル「css/style.css」をちょろっと調整します。left;}再びindex.htmlをブラウザで開き、フォームに適当な検索語を入れ確認してみます。キーワードにマッチする写真のサムネイルがパラパラと現れたら動作は正常です。公開する(5分)もちろん手元のファイルを使っていてもいいのですが、他の誰かに見てもらうには公開をしましょう。今回はgithubのgh-pagesという機能を使います。githubでPublicなレポジトリを作ります。その後だいたいこのようなコマンドでページ公開まで行えます。gh-pagesできたのがこちらのページです。公開することで、僕も「お試しください」と言えるわけですね。作り込むために30分で出来たものでですから、お分かりの通り作り込みが全然たりません。このような作業が必要だと思われます。最新のつぶやき100件から写真を抽出しているが、101件目以降も見たいつぶやきのテキスト表示そもそもUIデザインを洗練させるなどなどこうした作り込みの作業が個性を発揮する場所だったりしますね。時間はあくまで目安ってことでお願いします。ようは短い時間でJavaScriptを使うと「Webサービスのアイデアの検証」ができるかもというお話でした。作ったInstagram検索も参考までに使ってみてくださいね。お知らせメルマガ「ゆーすけべーラジオ」ではこうしたWebサービスを作るにあたってのエッセイを連載中です。よろしければお試し購読を。デザインという言葉を再考させられる「デザインの輪郭」Yomico。