キラー拡張現実アプリを作る:7ステップ

キラー拡張現実アプリを作る:7ステップ

目次:

Anonim

このチュートリアルでは、UnityでAPIを使用する方法を説明します。これにより、拡張現実アプリをよりスマートにすることができます。すべてが初心者向けです。 Unity 3Dビデオゲームエンジンを使用する予定です。これにより、IOSまたはAndroidで動作するクロスプラットフォームアプリケーションを作成できるようになります。 Vuforiaプラグインは私達がカメラストリームにアクセスすることを可能にし、UnityのWWWクラスは私達がhttpプロトコルを介してAPIと通信することを可能にします。これは、ブラウザでWebサイトにアクセスするときに使用されるのと同じメカニズムです。

拡張現実の本当のキラーアプリケーションはゲームではなく、むしろ現実のあなたの現在の現実の認識を実際に高めるためのツールとしてARを使うことであると思います。これを行う方法は、インターネットの力を活用するコネクテッドアプリを作ることです。

ソフトウェアに関しては、Unity 3Dが必要になります。http://unity3d.com/

とVuforia SDK:http://developer.vuforia.com/downloads/sdk

用品:

ステップ1:UnityのWWWクラス

それで、UnityのWWWクラスはあなたがhttpを通してサーバに要求をすることを可能にするのでこのことをすることの最初のステップです。あなたがこれをしているウェブサイトを訪問するとき、あなたはあなたのブラウザにURLをタイプして、そしてそのアドレスでサーバにhttpリクエストをしています。Webサーバーは、Webページを表示するためにブラウザが使用するHTMLコードを返します。

ステップ2:HTTPリクエストを作成する

これを説明するために、www.unity.comにリクエストを送信しましょう。

新しい統一プロジェクトを開始し、testというC#スクリプトを作成してメインカメラにドラッグします。

まずrequestというEnumeratorを作成します。コルーチン内でwwwオブジェクトを操作したいので、処理中にプログラム全体を停止しないでください。次に、start関数でコルーチンを起動して、このコードが実行されるようにします。

コルーチンの中では、文字列を作成し、それをUnityのWebアドレスとして定義します。

新しいwwwオブジェクトを作成してURLを渡します。

利回りはwwwを返す(その操作が完了するまで続けないように)。

htmlという文字列を作成し、それをwww.textとして定義します。これは、要求から返されたテキストの文字列です。

これを印刷すると、これがunity.comのhtmlであることがわかります。

ステップ3:Webスクレイピングの紹介

今はまだapiに触れることなく、このデータを解析して、Webサイトから有用な情報を取り出してアプリで使用することができます。これはWebスクレイピングと呼ばれます。たとえば、Webページのタイトルを抽出したいとします。

標準のHTMLから、タイトルは2つのタイトルタグの間にあることがわかります。

開始タイトルと終了タイトルのタグ: これはWebページのタイトルです

これを実行するためのより良い、よりクリーンな方法があることを知っていますが、時間のために私たちが欲しいものを引き出すために単に文字列を操作することができます。

今、個々の文字で区切られた文字列を得ました。そのため、html 2を印刷すると、3番目の文字が得られます(インデックスは0から始まるため)。代わりに文字列のリストを作成し、それを改行文字で区切ることができます。これで、htmlList 2を印刷すると、3行目のテキストが表示されます。

“ title”を含む行を見つけるために、forループを使ってテキストの各行をループすることができます。

現在の行にtitleという単語が含まれているかどうかを調べることで、目的の行を見つけることができます。その行が見つかったら、最初のtitleタグを空の文字列で置き換え、次に2番目のtitleタグを空の文字列で置き換えることができます。結果を印刷してみましょう。それ以上先に進む必要はないので、ここで中断することができます。結果にはWebページのタイトルが含まれます。これを実現するためのより良い、しかしもう少し複雑な方法が必要な場合は、正規表現またはREGEXを調べてください。

ステップ4:API

それでは実際のAPIリクエストを作ることを検討しましょう。 Googleカスタム検索APIを使用します。まず私たちはユニークなキーが必要です。だからグーグルカスタム検索APIキーを検索し、最初のリンクに行きます。まだアカウントを持っていない場合はアカウントを作成してアプリを作成します。このアプリのカスタム検索APIを有効にして、キーをクリップボードにコピーします。

このAPIを使えば、1日100回の検索が無料でできます。

ステップ5:こんにちは、私はJSONです、はじめまして。

Unityに戻り、HTML文字列を設定するまですべてを削除することから始めましょう。 JSONオブジェクトが返されるので、この「json」という名前に変更しましょう。今のところどこにでも私たちのAPIキーをコピーすることができます。

googleに戻って、「Restの使用」をクリックしてください。ここを見回すと、APIには3つのパラメータ、APIキー、カスタム検索エンジンID、および検索クエリが必要であることがわかります。サンプルリクエストをコピーしてUnityのURL文字列に貼り付けます。

ライセンスキーをURLの適切な場所に移動します。カスタム検索エンジンは作成しないので、cxパラメータをcrefに変更して空の文字列にします。

queryという名前のプライベート文字列変数を作成し、検索したいものに等しく設定します。 URLに戻り、 "q ="の後のすべてを削除し、文字列を先ほど定義したクエリ変数と連結します。これでレスポンスをプリントアウトすると、Googleのすべての結果がきれいなJSONオブジェクトにまとめられます。

ステップ6:今何?

すごい、今、私たちはもっとちんぷんかんぷんをしている。

さて、あなたはLitJSONと呼ばれるライブラリを使って欲しいものを抽出することができます。

github.com/lbv/litjson

それは私達がこれらすべての情報をきちんと扱うことを可能にするでしょう。

手っ取り早い解決のためには、最後の例のhtmlを使ったのと同じようにそれをパースすることができます。

これをゲームビューに表示するには、Unity階層を右クリックして新しいUIテキストを作成します。

このusingディレクティブをスクリプトに追加します: "UnityEngine.UI;"

パブリックGameObject yourTextObjectを定義してUIテキストへの参照を作成しましょう。

インスペクタで作成したばかりの空のスロットにテキストをドラッグします。

今、あなたはちょうどこのようにそれを設定することができます:

yourTextObject.GetComponent().text = "あなたが望むものなら何でも"

ステップ7:さらに一歩進めましょう

このチュートリアルを作成したのは、無料の逆画像検索APIがないことに対する回避策を見つけようとしたためです。 Googleでは、ブラウザで逆画像検索を実行できますが、他のすべてのサービスのようにhttpでは実行できません。

私はこれを機能させることを決心したので、ここに私がしたことがあります:

グーグルのリバースイメージ検索へのリクエストの結果が複数回リダイレクトされ、最後にjavascriptを介してhtmlとしてレンダリングされます。そのため、Unityだけでは必要なデータを取得することはできません。私がそれを得ることを考えることができた唯一の方法はphpで私自身の種類のAPIを作成することでした。 Unityから検索したい画像のURLをサーバでホストしているphpスクリプトに渡すことができます。 phpスクリプトは、cURLを使用してGoogleからのリダイレクトを追跡し、Node.jsを使用してHTMLにレンダリングされたJavaScriptを表示できます。これは、サーバーサイドのJavaScript環境です。

あなたがこれについてもっと学ぶことに興味があるならイントロのビデオをチェックしてください。

見てくれてありがとう、そして質問があれば教えてください!