javascriptを利用するだけで、簡単にInstagramの検索サービスが作れます。
１、html、cssの用意
cssはまた初心者なので、cssフレームワークを使うことにしました。
bluetripというcssフレームワークです。
それに従って、下記HTMLを書きました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <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"> <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> </head> <body> <div class="container"> <div class="span-24"> <h1>Instagram検索</h1> <form id="form" action="#"> <input type="text" size="40" name="q"> <input type="submit" value="検索"> </form> </div> <div id="main" class="span-24"></div> </div> </body> </html> |
２、javascriptをの用意
twitterに投稿したinstagramを検索するには、API仕様を検索して実装します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | $().ready(function(){ $('#form').submit(function(){ // 新たな検索するたび、#mainをemptyに $('#main').children('a').fadeOut(function(){ $('#main').html(''); }); // キーワードが入力されていなければ var query = $(this).children('input=["name"]').val(); if(!query) return false; // loading $('#main').text('読み込み中...'); // AJAX通信 $.ajax({ url : 'http://search.twitter.com/search.json',// twitter search api data : { q : query + ' instagr.am', lang : 'ja', rpp : '100', include_entities : 1 }, dataType : 'jsonp', success : function(json){ // #mainをemptyに $('#main').html(''); var entries = json.results; if(!entries) return; var existed_ids = new Array();// 重複防止対策→でも効いてない！ $.each(entries,function(){ if(this.entities && this.entities.urls[0]) { // http://instagr.am/p/{id} var url = this.entities.urls[0].expanded_url; // TODO:短縮URL対応 if(url.match(/instagr＼.am＼/p＼/([＼w＼-]+)/)){ var id = RegExp.$1; if (jQuery.inArray(id, existed_ids) == -1) {// existed_idsにないものだけ var a = $('<a/>').attr('href','http://instagr.am/p/' + id + '/'); a.attr('target','_blank'); // a.attr('id',id); // http://instagr.am/p/{id}/media/?size=t 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(); existed_ids.push(id);// ここでarray_push }); } } } }); } }); return false; }); }); |
３、サーバにアップする
URLは下記になります。
click
４、TODO
・短縮URL対応
・画像の重複を防止（何で効かないのか？？）
・一部画像が表示できない原因を究明
・無限スクロールの形にしたい（現状は1ページMAX100件）
