Instagramは日本のユーザーも多く、日常を切り取った写真がほとんどで、 またお洒落なものも混じっているのでたまに眺めると気持ちがホッコリしたりします。 特定のキーワードでInstagramの最新の写真を検索したい時があります。 例えば、みんなが今どんな「ご飯」を食べているのか、今日の「日の出」はどのような具合なのか、 がInstagramの写真を通して分かるかもしれません。 Instagramの写真検索サービスを探してみると、 Instagram自身が検索機能を提供してないので他の第三者が作ったサービスがいくつか出てきます。 使ってみたところ、もう少し自分で見た目やら機能を変えてみたいなーなんて思いました。 そこで、「Instagramの今の写真を検索できるサービス」といういわばWebサービスを作りたい欲求にかられます。 今回はこのようなちょっとした欲求から考えた「Webサービスのモックアップ」をJavaScriptで素早く作ることについて、 解説してみます。
Webサービスを「誰かの欲求を満たすWebのサービス」という一面から捉えると、 もちろんJavaScriptだけで記述可能です。HTML/CSSの知識は多少必要ですが、 PHPやRuby、Perlなどのサーバサイドについて知らなくてもよいわけです。 また、JavaScriptでWebサービスのモックを作る作業はサーバサイドを実装する場合でも、 UIやアイデアを試行錯誤するための意味をなすこともあります。 JavaScriptのAjaxと呼ばれるような仕組みを利用すれば、今回扱うようなTwitterのWeb APIとの通信も可能ですし、 インタラクティブにブラウザ上で表示を変化させることができます。
「Instagramの今の写真を検索できるサービス」。実際にJavaScriptで作ってみました。 すると30分ほど集中すると、Webサービスを構成する必要最低限の行程を踏むことができたのです。 もちろん作り込みはだいぶ必要なので、それについては後述しますが、 実際に動くサービスを使うことが可能なのでユーザとして欲求はある程度満たせるものです。 30分、JavaScriptでWebサービスをサクッと作る行程は以下のようなものでした （時間は適当な目安です）。
- HTMLとCSSの雛形を用意する(3分)
- JSの雛形を作る(2分)
- APIのドキュメントを読む(5分)
- JSコード、CSSを記述する(15分)
- 公開する(5分)
それぞれについて解説します。
1.HTMLとCSSの雛形を用意する(3分)
WebサービスとなるとHTMLとCSSは必須です。 実はここを作り込むのが一番時間かかったりするのですが、 今回は雛形だけで満足することにしましょう。CSS Frameworkを利用します。 BlueTripはCSSが簡素に記述されていて使いやすいだけではなく、 zipやtarをダウンロードして解凍すれば今すぐ使えるようなファイル構成になっているのでこちらを使ってみます。
index.htmlをエディタで編集してタイトルだけの表示にします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Instagram検索</title>
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
<!--[if IE]>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection" />
</head>
<body>
<div class="container">
<div class="span-24">
<h1>Instgram検索</h1>
</div>
<div id="main" class="span-24">
</div>
</div>
<!-- end .container -->
</body>
</html>
ブラウザで表示を確認しつつ作業を進めます。
2. JSの雛形を作る(2分)
JavaScriptではjQueryを使います。そのための準備と確認をしましょう。 まず、GoogleでホスティングされているjQueryを読み込みます。 ローカルにjsファイルをダウンロードしてもよいですが、今回は特にその必要もないので楽な方法でやります。 また、自分で書くjsファイルは「js/instagram_search.js」とでも名前を付けるので、 その読み込みも記述します。index.htmlのheadの最後の方でこう書きます。
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/instagram_search.js"></script>
instagram_search.jsではjQueryが正しく動くか、その雛形を書くことで確認してみましょう。
$().ready(function(){
console.log('docoment is ready!');
});
3. APIのドキュメントを読む(5分)
今回のサービスの仕組みは「TwitterでつぶやかれたInstagramの写真のURLを検索して、それをサムネイル表示する」 というものです。そのためには以下の2点についてWebで仕様などを調べます。
- Twitterのつぶやきを検索する方法
- Instagramのサムネイル取得方法
すると、TwitterについてはTwitter Search APIを使えばよいことが 分かります。InstagramについてはAPIを特に利用する必要はなく、URLに含まれる写真のIDさえ分かれば、 画像自身へのリンクを取得できます。
http://instagr.am/p/{id}/media/?size=t
当たり前のことですが、こうした技術仕様を調査する行程もWebサービスを作るには必要です。
4. JSコード、CSSを記述する(15分)
ではいよいよJavaScriptのコードやCSSの調整をしていきましょう。 最初は「フォームから入力された値でTwitter検索をする」ことに焦点を当てるとよかったです。
index.htmlに以下のようなフォームの記述をします。
<form id="form" action="#">
<input type="text" size="40" name="q"/>
<input type="submit" value="検索" />
</form>
その上で、JS側では入力のイベントを受け取り、値を取得、それをもとにクエリーを生成して、Ajax通信を行います。
$().ready(function(){
$('#form').submit(function(){
var query = $(this).children('input=["name"]').val();
if(!query) return false;
$.ajax({
url : 'http://search.twitter.com/search.json',
data : {
q : query + ' instagr.am',
lang : 'ja',
rpp : '100',
include_entities : 1
},
dataType : 'jsonp',
success : function(json){
var entries = json.results;
if(!entries) return;
$.each(entries,function(){
console.log(this);
}
}
});
return false;
});
});
うまくいけば、ブラウザのJavaScript Consoleに「【フォームに入力した値＋instagr.am】を含むツイート」 オブジェクトのダンプがされると思います。
このツイートオブジェクトからInstagramの写真へのURL、IDを抽出し、サムネイルの画像リンクを生成、 ページに描画していくことをしていけば完成しそうです。 最低限の小細工を施すと出来たのは以下のJSコードです。
$().ready(function(){
$('#form').submit(function(){
$('#main').children('a').fadeOut(function(){
$('#main').html('');
});
var query = $(this).children('input=["name"]').val();
if(!query) return false;
$('#main').text('loading...');
$.ajax({
url : 'http://search.twitter.com/search.json',
data : {
q : query + ' instagr.am',
lang : 'ja',
rpp : '100',
include_entities : 1
},
dataType : 'jsonp',
success : function(json){
$('#main').html('');
var entries = json.results;
if(!entries) return;
$.each(entries,function(){
if(this.entities && this.entities.urls[0]) {
var url = this.entities.urls[0].expanded_url;
if(url.match(/instagr\.am\/p\/(\w+)/)){
var id = RegExp.$1;
var a = $('<a/>').attr('href','http://instagr.am/p/' + id + '/');
a.attr('target','_blank');
var img = $('<img/>').attr('src','http://instagr.am/p/' + id + '/media/?size=t');
img.bind('load',function(){
a.hide();
a.append(img);
$('#main').prepend(a);
a.fadeIn();
});
}
}
});
}
});
return false;
});
});
最後にCSSファイル「css/style.css」をちょろっと調整します。
main a
{
margin:0;
padding:0;
}
#main img
{
width:120px;
height:120px;
float: left;
}
再びindex.htmlをブラウザで開き、フォームに適当な検索語を入れ確認してみます。 キーワードにマッチする写真のサムネイルがパラパラと現れたら動作は正常です。
公開する(5分)
もちろん手元のファイルを使っていてもいいのですが、他の誰かに見てもらうには公開をしましょう。 一番手っ取り早い方法はDropboxのPublicディレクトリに入れることだったりしますが、 今回はgithubのgh-pagesという機能を使います。
まずgithubでPublicなレポジトリを作ります。その後だいたいこのようなコマンドでページ公開まで行えます。
$ git clone git@github.com:yusukebe/Instagram-Search.git $ cd Instagram-Search $ git symbolic-ref HEAD refs/heads/gh-pages $ git clean -fdx $ cp -a ~/work/* ./ $ git commit -a -m "initial commit" $ git push origin gh-pages
できたのがこちらのページです。
公開することで、僕も「お試しください」と言えるわけですね。
作り込むために
30分で出来たものでですから、お分かりの通り作り込みが全然たりません。 このような作業が必要だと思われます。
- RTなどの作用でできてしまう重複する画像を削除する
- 写真の表示の工夫
- 最新のつぶやき100件から写真を抽出しているが、101件目以降も見たい
- つぶやきのテキスト表示
- そもそもUIデザインを洗練させる
- などなど
こうした作り込みの作業が個性を発揮する場所だったりしますね。
まとめ
「こんなの30分で無理だよ」とか「俺だったら15分で出来るぜ」というツッコミがきそうですが、 時間はあくまで目安ってことでお願いします。 ようは短い時間でJavaScriptを使うと「Webサービスのアイデアの検証」ができるかもというお話でした。 作ったInstagram検索も参考までに使ってみてくださいね。
お知らせ
メルマガ「ゆーすけべーラジオ」ではこうしたWebサービスを作るにあたってのエッセイを連載中です。 よろしければお試し購読を。