Jeffrey Cross
Jeffrey Cross

コードボックス:Googleオートコンプリートで楽しもう

オートコンプリートは、Googleの多くの興味深い機能の1つです。たとえば、検索ボックスに「作成方法」と入力すると、Googleは検索対象と思われるもののトップ10のリストを表示します。何百万もの類似した検索を分析することによって生成されて、この集合的な「群衆の知恵」は陽気であるか、悲劇的であるか、または人間の状態を深く示すことができます。多くの場合、これらすべてが同時に行われます。

このスケッチでは、あなたが選択したフレーズのGoogleの精神主義者を探索することができます。それはこのように動作します。 「How do I make」のようなフレーズを入力すると、スケッチは最後にアルファベットの各文字を追加して26のバリエーションを作成します。「How do i a a」、「how do i b」、「how do i make」 c」などです。その後、各バリエーションについてGoogleに問い合わせ、10件の結果を実行中のリストに追加します。何百万という希望、夢、そして願望を見ることの本質的なドラマにふさわしく、260の結果が象徴的な「スターウォーズ」スクロールとして提示されます:

オートコンプリートAPI

オートコンプリートは、このように見える比較的単純なURLによって強化されています。

http://google.com/complete/search?output=toolbar&q=エンコードされた検索語

かなりのHTMLを提示しているあなたが訪問するほとんどのページとは異なり、これは機械が読むことを意図したXMLデータを返します。 Application Programming Interface(API)として知られているこの非常に強力な技術は、プログラムがネットワークを介して簡単に通信できるようにします。 APIがなければ、Googleにアクセスして26回フレーズを入力してから、すべての結果を手作業で収集する必要があります。 APIではこれを自動的に行うことができます。

「How do i make」提案の基礎となるXMLデータを入手するには、次のURLにアクセスするだけです。

http://google.com/complete/search?output=toolbar&q=how+do+i+make

Webブラウザで[ソースの表示]をクリックすると、次のようなXMLが表示されます(ただし、この例は読みやすくするためにフォーマットしました)。

...

Processingのものを使用します XMLElement() このXMLデータを読み込んでスクロールテキストを作成するためのライブラリ。

スケッチを設定する

しかし最初に、スケッチを実行しましょう。クエリフレーズを取得するためにcontrolP5ライブラリを使用しているので、そのライブラリをインストールして設定する必要があります。 (設定しない場合は、コードボックスのcontrolP5のセクション:フラクタルメニューの作成を参照してください。)スケッチのソースコードは、下のボックスまたはzetigeist.pdeファイルから入手できます。

ソースコードをProcessingに取り込んだら、スケッチを始めてフレーズを入力します。数秒後、スターウォーズの画面上で結果がスクロールし始めます。 (テキストを入力しないと、スケッチはすべての一般的なクエリに対して最も人気のある結果を単に表示します。)

討論

では、これはどのように機能するのでしょうか。いくつかの重要な要素があります。

  1. オートコンプリートAPIからデータのバッチを取得します。
  2. XMLを構文解析します。 XMLElement() そして結果を保存する
  3. 結果をスクロールリストとして表示します

それでは、APIからデータを取得する方法について説明しましょう。処理 loadStrings() 関数を使用すると、任意のURLのテキストを取得できます。そのため、オートコンプリートAPIに適切な形式のクエリを追加するだけで済みます。これを行うには、Javaを使用します。 URLEncoder ライブラリ(覚えておいて、あなたがJavaで使うことができるすべてはProcessingのための公正なゲームです)を書くために エンコード() に入力されたテキストをエンコードする関数 userQuery ボックス。

getSuggestions() 機能は私達を使用します エンコード() ページを取得してXML結果を解析する関数。この関数は XMLElement() 結果を処理するオブジェクトです。ほとんどのXMLライブラリと同様に、これも「家系図」のような構文を使用して、さまざまなデータ要素にアクセスできるようにします。次の図に示すように、提案データは最初の子要素です()ルート要素の子の下に).

実際のテキストは属性の助けになるので、私たちは getStringAttribute() 欲しいデータを取り出す機能。

[注意:この文法は公式文書とは異なるが、Processingのコミュニティフォーラムのこの記事、XMLElementの問題:function getInt / getString 'does not exist'が詳細を提供している。]私たちが提案のテキストをつかんだら、に追加します suggestionList 配列リスト。

最後に、我々が実際にどのように呼ぶのかについて少し説明する価値があります getSuggestions() 関数。お分かりのように、実際には ドロー() 少し変わった方法です。当初、私はオートコンプリートに対して一連の素早いヒットをすることによって、一度に26のクエリバリアントすべてを一気に上げることを試みました。私はすぐにAPIの レート制限これは、毎秒最大使用可能回数です。さらに、スケッチの開始時に、私が嫌いだった長い休止がありました。

だから、代わりに、私はと呼ばれるタイマーを追加しました timeBetweenFetches そのため、APIは5秒ごとにしか呼び出されませんでした。テキストが少しゆっくりスクロールするので、これは結果が時間の経過とともにバッファリングすることを可能にし、グーグルの要求に違反することなくより滑らかな全体的な外観をもたらした。 APIをヒットするたびに、ベースクエリに追加するアルファベットのどの文字を通知するカウンタを進めます。結果が出たら、タイマーをリセットします。また、ユーザーが新しいクエリ用語を入力して次のキーワードを押したかどうかをテストするためのロジックも少しあります。 findButton.

の他の部分 ドロー() methodはスクロールテキストを処理します。これを行うには、という変数を使用します。 最初の文字列のy座標を保持する suggestionList。次に、リストの各要素をループして、変数を参照して画面にテキストを書き込みます。 通過するたびに減少します。 ドロー()。これは私たちに素晴らしい、スクロール効果を与えます。 (テキストもx軸を中心にしています。これは簡単な式で行われます。)

最後に、スターウォーズ効果はProcessingの内蔵3Dグラフィックライブラリを使用してX軸の平面を数度回転させることで簡単に実現できます。これは私がopenprocesing.orgでLuis Gonzalezの「スターウォーズ」スケッチで見たきちんとしたハックでした。私はインスピレーションとアイデアの源としてこのサイトを強くお勧めします。

詳細:ここでAndrewのCodeboxのコラムをすべてチェックしてください。

メーカーの小屋で:


Processing入門Processing、コードを使用して図面、アニメーション、インタラクティブグラフィックを作成するための簡単な言語であるProcessingを使用して、コンピュータプログラミングを簡単に学ぶことができます。プログラミングコースは通常理論から始まりますが、この本では創造的で楽しいプロジェクトに飛び込むことができます。基本的なプログラミングを学びたい人には理想的で、プログラミングのスキルがある人のためのグラフィックスの簡単な紹介としても役立ちます。

シェア

コメントを残します