jQueryとPHPを使用して独自のInstagram検索エンジンを構築する方法

グーグルがインスタント検索機能を発表して以来ずっと、それはウェブデザインの人気のある傾向になりました。 Michael HartのGoogle Imagesアプリなど、オンラインで楽しい例がいくつかあります。これらのテクニックはすべてかなり簡単で、中程度のjQuery経験を持つWeb開発者でもプログラミングAPIとJSONデータを利用できます。.

このチュートリアルでは説明したい どのように私たちは同様のインスタント検索Webアプリケーションを構築することができます. グーグルから画像を引き出す代わりに、ほんの数年で驚異的に成長したInstagramを使うことができます。.

このソーシャルネットワークはiOS用のモバイルアプリとして始まりました。ユーザーは写真を撮って友人と共有したり、コメントを残したり、Flickrなどのサードパーティネットワークにアップロードしたりできます。チームは最近Facebookに買収され、Androidマーケット向けのまったく新しいアプリを公開しました。彼らのユーザーベースは飛躍的に成長しました、そして今開発者はちょうどこのinstasearchデモのように素晴らしいミニアプリを構築することができます.

デモを見る
ソースをダウンロード

APIクレデンシャルの取得

プロジェクトファイルを作成する前に、まずInstagramのAPIシステムの背後にあるアイデアを調べてください。初心者に役立つ説明を提供する開発者ポータルにアクセスするにはアカウントが必要です。 Instagramデータベースに問い合わせるために必要なのは、 “クライアントID”.

上部のツールバーで[クライアントの管理]リンクをクリックしてから、緑色のボタンをクリックします。 “新しいクライアントを登録する”. アプリケーションに名前、簡単な説明、およびWebサイトのURLを入力する必要があります。 URLとリダイレクトURIは、この例では同じ値にすることができます。これは、ユーザーを認証する必要がないからです。すべての値を入力して新しいアプリケーションの詳細を生成するだけです。.

あなたは名前の長い文字列を見るでしょう クライアントID. このキーは後でバックエンドスクリプトを作成するときに必要になるので、このセクションに戻ります。今のところ私たちのjQueryインスタント検索アプリケーションの構築を始めることができます.

デフォルトのWebページコンテンツ

実際のHTMLは、私たちが使っている機能の量に対して非常にスリムです。ほとんどの画像データは動的に追加されるので、ページ内にいくつかの小さな要素が必要です。このコードは index.html ファイル.

    Instagramの写真jQueryのインスタント検索アプリ         注：スペースや句読点は使用できません。検索は1つのキーワードに制限されています.

私は2つの外部の.cssと.jsリソースと共に最新のjQuery 1.7.2ライブラリを使用しています。入力検索フィールドに外部フォームラッパーはありません。フォームを送信してページをリロードさせたくないからです。ユーザーが入力しているときに制限が制限されるように、検索フィールド内のいくつかのキーストロークを無効にしました.

中央のセクションID内にすべての写真データを入力します #photos. それは私たちの基本的なHTMLをきれいにして読みやすく保ちます。他のすべての内部HTML要素はjQueryを介して追加され、それぞれの新しい検索の前に削除されます.

APIから引き出す

最初に動的PHPスクリプトを作成してからjQueryに移行したいと思います。私の新しいファイルの名前は instasearch.php これはAPIへのすべての重要なバックエンドフックを含みます.

最初の行は、戻りデータがプレーンテキストまたはHTMLではなくJSONとしてフォーマットされていることを示しています。これは、JavaScript関数がデータを正しく読み取るために必要です。その後、アプリケーションクライアントID、ユーザー検索値、そして最終的なAPI URLを含むいくつかの変数設定を得ました。必ず更新してください $ client あなた自身のアプリケーションにマッチする文字列値.

このURLデータにアクセスするには、ファイルの内容を解析するか、cURL関数を使用する必要があります。カスタム機能 get_curl（） 現在のPHP設定をチェックするほんの少しのコードです。.

cURLを有効にしていない場合は、機能を有効にして独自の関数ライブラリを介してデータを取得しようとします。そうでなければ、単にfile_get_contents（）を使うことができますが、これは遅くなる傾向がありますが、それでも同様に機能します。それから、このデータを実際に次のように変数に引き込むことができます。

$ response = get_curl（$ api）;

データの整理と返却

Instagramからこの元のJSONレスポンスをすべての情報をロードして返すことができます。しかし、余分なデータがたくさんあり、すべてをループ処理するのは非常に面倒です。私はAjaxレスポンスを整理して、必要なデータを正確に引き出すことを好みます。.

まず、すべての画像に対して空白の配列を設定します。それから foreach（） JSONデータオブジェクトを1つずつ取り出します。我々は3つの特定の値だけを必要とします。 $ src（フルサイズ画像のURL）, 親指（サムネイル画像のURL） $ url（ユニークな写真のパーマリンク）.

$ images = array（）; if（$ response）foreach（json_decode（$ response） - > $ itemとしてのデータ）$ src = $ item-> images-> standard_resolution-> url; $ thumb = $ item-> images-> thumbnail-> url; $ url = $ item-> link; $ images [] = array（ "src" => htmlspecialchars（$ src）、 "thumb" => htmlspecialchars（$ thumb）、 "url" => htmlspecialchars（$ url））;

PHPのループに慣れていない人は、その過程で迷子になるかもしれません。構文がわからない場合は、これらのコードスニペットにあまり注目しないでください。私たちの一連の画像には、最新の出版日から引き出された写真が最大16〜20個含まれています。次に、このコードをすべてjQuery Ajaxレスポンスとしてページに出力します。.

print_r（str_replace（ '\\ /'、 '/'、json_encode（$ images）））; die（）;

しかし、これでフロントエンドスクリプティングに飛び込むことができる舞台裏を見てきました。ファイルを作成しました ajax.js これには、検索フィールドに関連付けられた2つのイベントハンドラが含まれています。まだ今までフォローしているのであれば、ワクワクします!

jQueryの主なイベント

初めて文書を開くとき 準備完了（） イベント私はいくつかの変数を設定しています。最初の2つは、検索フィールドと写真コンテナの直接のターゲットセレクタとして機能します。私はまた、JavaScriptタイマーを使用して、ユーザーが入力を終了してから900ミリ秒まで検索クエリを一時停止します。.

$（document）.ready（function（）varフィールド= $（ "＃s"）; varコンテナ= $（ "＃photos"）; var timer;

私たちが取り組んでいる主な機能ブロックは2つだけです。検索フィールドにフォーカスが置かれると、プライマリハンドラーは.keydown（）イベントによってトリガーされます。まず、キーコードが禁止されているキーのいずれかと一致するかどうかを確認し、一致する場合はキーイベントを否定します。それ以外の場合は、デフォルトのタイマーをクリアしてから900ms待ってから呼び出します。 instaSearch（）.

/ ** *キーコード用語集* 32 =スペース* 188 =コンマ* 189 =ダッシュ* 190 =期間* 191 =バックスラッシュ* 13 = ENTER * 219 =左ブラケット* 220 =右スラッシュ* 221 =右ブラケット* / $（sfield .keydown（function（e）if（e.keyCode == '32' || e.keyCode == '188' || e.keyCode == '189' || e.keyCode == '13' |） | e.keyCode == '190' || e.keyCode == '219' || e.keyCode == '221' || e.keyCode == '191' || e.keyCode == '220'） e.preventDefault（）; else clearTimeout（timer）; timer = setTimeout（function（）instaSearch（）;、900）;）;

値を更新するたびに、自動的に新しい検索結果が取得されます。 Ajax関数の起動をブロックした可能性のあるキーコードは他にもたくさんありますが、このチュートリアルではリストに含めるには多すぎます。.

Ajax instaSearch（）関数

私の新しいカスタム関数の中に私たちは最初に追加しています “ローディング” 検索フィールドにクラス化します。このクラスは、新しい読み込みGIF画像のカメラアイコンを更新します。写真セクションに残っている可能性のあるデータもすべて空にします。クエリ変数は、検索フィールドに入力された現在の値から動的に取得されます。.

function instaSearch（）$（sfield）.addClass（ "loading"）; $（コンテナ）.empty（）; var q = $（sfield）.val（）; $。ajax（type： 'POST'、URL： 'instasearch.php'、データ： "q =" + q、成功：function（data）$（sfield）.removeClass（ "loading"）; $ .each （データ、関数（i、item）var ncode = ' 
'; $（コンテナ）.append（ncode）; ;））; function（xhr、type、exception）$（sfield）.removeClass（ "loading"）; $（コンテナ）.html（ "エラー：" +タイプ）; ;）;

あなたが.ajax（）関数に精通しているならば、これらすべてのパラメータは精通しているはずです。ユーザー検索パラメータを渡しています “q” POSTデータとして。成功した場合と失敗した場合は “ローディング” クラスに応答を追加します。 #photos ラッパー.

成功関数内で、個々のdiv要素を引き出すために最後のJSON応答をループしています。このループは$ .each（）関数を使用して実行し、応答データ配列をターゲットにすることができます。それ以外の場合、失敗メソッドはInstagram APIからの応答エラーメッセージを直接出力します。そしてそれは本当にそれだけです!

デモを見る
ソースをダウンロード

最終的な考え

Instagramのチームはそのような途方もないアプリケーションを拡張する素晴らしい仕事をしました。 APIは時々遅くなる可能性がありますが、応答データは常に適切にフォーマットされており、操作が非常に簡単です。このチュートリアルが、サードパーティ製のアプリケーションではうまく機能しないことを実証できることを願っています。.

残念ながら、現在のInstagramの検索クエリでは一度に複数のタグを使用することはできません。これはデモに限定されていますが、確かにその魅力を取り除くものではありません。上記の実際の例をチェックアウトして、私のソースコードのコピーをダウンロードして試してみてください。さらに下記の投稿ディスカッションエリアであなたの考えを教えてください.