ミラーAPIチュートリアル：Web開発者向けGoogle Glass

公開: 2022-03-11

Androidデバイスは確かに世界を引き継いでいます。何千ものスマートフォン、タブレット、スマートテレビ、およびその他の多くのデバイスは、Googleのオープンソースプラットフォームを利用しています。その上、Googleのウェアラブルコンピューティングインセンティブは、世界をまったく新しい高みへと押し上げています。 Google Glassは、テクノロジーとのやり取りの方法を変えることに非常に近いデバイスです。非常に長い間、私たちは頭を下げて歩き、小さな電話の画面を見つめてきました。 Google Glassは、ウェアラブルテクノロジーとやり取りしながら、頭を上げて誇らしげに歩くのに役立ちます。

当初、Androidの開発は、Javaの知識を持っている開発者にのみ限定されていました。開発者の大規模なコミュニティは、他のプラットフォームを使用して優れたWebアプリケーションを構築しており、Android開発を採用するのに大きな困難を抱えていました。後で進化し、ある種のクロスプラットフォーム開発を提供するいくつかのアプローチがあり、経験豊富なWeb開発者は、JavaおよびAndroidSDKの知識がなくてもAndroid用のアプリの構築を開始できます。しかし、新しいプログラミング言語を習得せずに、さらにはWeb開発者に共通の知識を使用するだけでも、GoogleGlass向けに開発するのは素晴らしいことではないでしょうか。はい、可能です！

Googleは、Googleがホストおよび管理するWebサービスと対話するだけで、Web開発者がGlasswareを構築できるようにするクラウドベースのRESTfulサービスを提供しました。これらのサービスはMirrorAPIと呼ばれ、開発プラットフォームから独立しています。 GlassのMirrorAPIの使用を開始するために、Google Glassデバイスを所有している必要はありませんが、一部の高度な機能では、GoogleGlassデバイスを所有している必要があります。

知っておく必要があることは2つだけです。

OAuth 2.0リクエストを実行し、認証トークンを取得します
事前定義されたエンドポイントへのHTTPリクエストを実行します

このGoogleGlass開発チュートリアルでは、Glass用のアプリケーションを構築するために使用できる手法を紹介します。

まだGoogleGlassを使用していない場合は、これら2つのビデオをご覧ください。ユーザーインターフェイスの基本を理解するのに十分な情報が得られるはずです。

GoogleGlassの紹介
Google Glassハウツー：はじめに

ここには、セットアップとナビゲーションに役立つビデオがさらにあり、ユーザーインターフェイスの詳細についてはここにあります。

MirrorAPIとネイティブのGoogleGlass開発には多くの違いがあります。このチュートリアルの目的は、これらの違いについて議論することではなく、Web開発者にGoogle Glassの仕組みと、できるだけ早く参加する方法についての洞察を提供することです。

この開発チュートリアルで概説されているように、GoogleGlassWeb開発者はMirrorAPIから本当に恩恵を受けることができます。

ミラーAPIはどのように機能しますか？

最初で最も重要なことは、標準のWebアプリケーションを構築しているということです。アプリケーションはウェブサーバー上で実行され、GoogleGlassデバイスと直接やり取りすることはありません。代わりに、アプリケーションはMirrorAPIサービスと対話します。 Mirror APIベースのアプリケーションは、Glass自体にインストールする必要はなく、すべてのサービスはすでにGlassOSの一部です。

ミラーAPIのおかげで、GoogleGlass開発者とWebアプリケーション開発者は同義語になりました。

Google Glassデバイスは、独自の同期サービスを実行して、MirrorAPIを介してコンテンツをアプリケーションにプッシュまたはプルバックします。

GoogleGlassがMirrorAPIの更新をチェックする頻度に影響を与えることはできず、「仲介者」がいることにはコストがかかります。このアーキテクチャの直接の結果は、Glassユーザーとリアルタイムでやり取りできないことです。アクションのリクエストとGlassデバイスで実行される実際のイベントの間には常に遅延が発生することが予想されます。

セットアップと認証

ウェブ開発にMirrorAPIを使用するには、GoogleDevelopersConsoleでアプリケーションIDを定義する必要があります。 Google APIコンソールを開き、Googleアカウントでサインインします。

新しいプロジェクトを作成します。「ミラーAPIデモ」という名前を付けましょう

このチュートリアルでは、「ミラーAPIデモ」と呼ばれるミラーAPI開発プロジェクトに焦点を当てます。

次に行う必要があるのは、GlassWebアプリケーションでMirrorAPIを有効にすることです。これを行うには、プロジェクトの概要ページで[APIを有効にする]ボタンをクリックし、リストから[ミラーAPI]を見つけて、オンにします。

次に、GlassWebアプリケーションのクライアントIDを作成します。これを行うには、[資格情報]画面の[新しいクライアントIDの作成]ボタンをクリックするだけです。

注： 「同意画面」の詳細を入力するように求められる場合があります。 このフォームのデータは、アプリケーションへのアクセスを許可するときにユーザーに表示されます。

GoogleGlassPlaygroundを使用してMirrorAPIをテストします。 Playgroundを有効にするには、https：//mirror-api-playground.appspot.comをHTTPリクエストの有効な発信元として承認する必要があります。このデモではOAuthリダイレクトを使用しないため、[URIのリダイレクト]フィールドには何でも残すことができます。

Google Glassプレイグラウンドを使用して、MirrorAPIをテストします。

「クライアントIDの作成」をクリックすると、最初のミラーAPIリクエストを作成する準備が整います。

ミラーAPIアプリケーションの認証

重要： MirrorAPIDeveloperアカウントをGoogleGlassオーナーアカウントと間違えないでください。 この演習は、開発者とGlassの所有者である1つのアカウントだけで行うことができますが、これら2つのアカウントの分離に注意することが重要です。

GlassWebアプリケーションからMirrorAPIに送信されるすべてのHTTPリクエストは承認される必要があります。 Mirror APIは、標準の「ベアラー認証」を使用しています。つまり、リクエストごとにトークンを提供する必要があります。トークンは、標準のOAuth2.0プロトコルを使用してGoogleAPIによって発行されます。

ユーザー（Glass Owner）は、Webアプリケーションのページを開き、[ログイン]をクリックします。
アプリケーションはGoogleAPIにリクエストを発行し、ユーザーにはGoogle APIによって生成された同意画面が表示されます（通常は新しいポップアップ画面で）
アプリケーションにアクセス許可が付与されている場合、GoogleAPIはMirrorAPIの呼び出しに使用するトークンを発行します

ミラーAPIプレイグラウンド

Google Glass Playgroundを使用すると、Glassでコンテンツがどのように表示されるかを試すことができます。これを使用してコンテンツをGlassにプッシュできますが、デバイスがなくても、Glassディスプレイでどのように表示されるかを確認できます。

Mirror API Playgroundは、このURLにあります。

Google GlassのWeb開発を成功させるには、MirrorAPIPlaygroundを試してみる必要があります。

有効なHTTPリクエストの発信元としてMirrorAPIPlaygroundエンドポイントをすでに許可しています。 Playgroundを使用するには、クライアントIDを指定して「MirrorAPIPlaygroundをアプリケーションとして識別する」必要があります。アプリケーションのクライアントIDは、GoogleDevelopersConsoleで確認できます。

Google Developers Consoleは、GlassアプリのクライアントIDを提供します。

[承認]をクリックすると、次の図のようなOAuth2.0同意画面が表示されます。「GlassOwner」アカウントを使用してログインする必要があることに注意してください。これらは、アプリケーションがGlassと対話するために使用するクレデンシャルです。

この重要なステップは、MirrorAPIPlaygroundをGoogleGlassタイムラインに接続します。

[同意する]をクリックすると、MirrorAPIPlaygroundが独自のアプリケーションとして識別されます。ユーザーのGlassタイムラインにアクセスできるようになり、PlaygroundからGoogleGlassデバイスを操作できるようになります。

Glass Explorersこんにちは！

Mirror API Playgroundには、APIの試行に使用できる事前定義されたテンプレートが含まれています。リストをスクロールして、最も気に入っている例を見つけてください。このデモでは、「HelloExplorers」カードを選択しました。

Hello Explorersは、事前定義されたMirrorAPIPlaygroundテンプレートの1つです。

選択したアイテムは、レイアウトの作成に使用されたHTTPリクエスト本文のコンテンツとともにPlaygroundに表示されます。

 { "text": "Hello Explorers,\n\nWelcome to Glass!\n\n+Project Glass\n", "creator": { "displayName": "Project Glass", "imageUrls": [ "https://lh3.googleusercontent.com/-quy9Ox8dQJI/T3xUHhub6PI/AAAAAAAAHAQ/YvjqA3Pw1sM/glass_photos.jpg?sz=360" ] }, "menuItems": [ { "action": "REPLY" } ], "notification": { "level": "DEFAULT" } }

リクエストを自由に変更して、デザインに満足したら、「アイテムの挿入」ボタンをクリックしてください。リクエストが処理された後、「タイムライン」が更新されます。 Glassデバイスをお持ちの場合、アイテムはタイムラインにも挿入されます。

これは、Glassタイムラインに挿入されているHelloExplorersアイテムです。

独自のMirrorAPIWebアプリケーションの作成

おめでとう！コードを記述せずに、最初のMirror APIリクエストを実行し、GoogleGlassにメッセージを送信しました。

もう少し面白くしましょう。 Mirror API Playgroundを削除し、代わりに独自のアプリケーションを配置します。

まず、GoogleAPIがアプリケーションからのリクエストを受け入れることを保証する必要があります。 Google Developers Consoleに戻り、承認されたJavaScriptオリジンのリストにアプリケーションのURLを追加します。 http://localhost:3000を使用しますが、これを独自の設定に変更できます。

GlassアプリケーションのURLを、GoogleDevelopersConsoleの承認済みJavaScriptオリジンのリストに追加します。

承認トークンの取得

OAuth 2.0リクエストを実行し、Google APIから認証トークンを取得するには、GoogleAPIJavaScriptクライアントライブラリを使用します。

次のコンテンツを含む単純なHTMLページを作成します。必ず、CLIENTIDをアプリケーションIDに置き換えてください。

 <!DOCTYPE html> <html> <head> <title>{{ title }}</title> <link rel='stylesheet' href='/stylesheets/style.css' /> <script src="https://apis.google.com/js/client.js"></script> <script> function auth() { var config = { 'client_id': <YOUR APPLICATION CLIENT ID>', 'scope': [ 'https://www.googleapis.com/auth/userinfo.profile', 'https://www.googleapis.com/auth/glass.timeline', 'https://www.googleapis.com/auth/glass.location' ] }; gapi.auth.authorize(config, function () { console.log('login complete'); console.log(gapi.auth.getToken()); }); } </script> </head> <body> <h1>{{ title }}</h1> <button>Authorize</button> </body> </html>

Google Glassアプリケーションを起動し（Google Developers Consoleで承認されたJavaScriptオリジンとして指定したURLで実行されていることを確認してください）、[承認]をクリックすると、OAuth2.0フローが開始されます。 Googleアカウントでログインすると、トークンがブラウザコンソールに表示されます。

これで、トークンを使用して、MirrorAPIへの投稿を開始する準備が整いました。トークンは60分で期限切れになりますが、デモを終了するには十分な時間です。もう一度「承認」をクリックすると、いつでも別のトークンを取得できます。

RESTfulサービスとHTTPリクエストは、使用する開発プラットフォームやプログラミング言語に関係なく、すべてのWeb開発者に共通の用語です。このデモを試すには、ミラーAPIエンドポイントに対して標準のHTTPリクエストを実行する必要があります。私はこれに郵便配達員を使うことにしました。リクエストの詳細を自由に受け取り、お気に入りのプログラミング言語でデモを実装してください。 Postmanまたはその他のHTTPクライアントツールを使用します。

タイムラインアイテムの取得

https://www.googleapis.com/mirror/v1/timelineでHTTPGETを実行すると、Glassにプッシュしたアイテムのリストをいつでも取得できます。

MirrorAPIに対するすべてのリクエストを承認する必要があります。承認トークンは、承認HTTPヘッダーの値として送信され、接頭辞として「Bearer」という単語が付けられます。

Postmanでは、次のようになります。

Postmanでは、MirrorAPIに送信される認証トークンは次のようになります。

リクエストを実行すると、レスポンスは次のようになります。

 { "kind": "mirror#timeline", "nextPageToken": "CsEBCqQBwnSXw3uyIAD__wAA_wG4k56MjNGKjJqN18bHzszIy8rMz8nIy9bRlouaktedxp2dyJrHmtLInsue0suZzZvSncvOxtLIyJnGnJyex57Px8zW_wD-__730HDTmv_7_v5HbGFzcy51c2VyKDk4MTM3NDUzMDY3NCkuaXRlbShiOWJiN2U4ZS03YTRhLTRmMmQtYjQxOS03N2Y5Y2NhOGEwODMpAAEQASG5sX4SXdVLF1AAWgsJsgPYYufX654QASAA8ISVfAE=", "items": [ { "kind": "mirror#timelineItem", "id": "b9bb7e8e-7a4a-4f2d-b419-77f9cca8a083", "selfLink": "https://www.googleapis.com/mirror/v1/timeline/b9bb7e8e-7a4a-4f2d-b419-77f9cca8a083", "created": "2014-11-04T19:11:07.554Z", "updated": "2014-11-04T19:11:07.554Z", "etag": "1415128267554", "creator": { "kind": "mirror#contact", "source": "api:182413127917", "displayName": "Project Glass", "imageUrls": [ "https://lh3.googleusercontent.com/-quy9Ox8dQJI/T3xUHhub6PI/AAAAAAAAHAQ/YvjqA3Pw1sM/glass_photos.jpg?sz=360" ] }, "text": "Hello Explorers,\n\nWelcome to Glass!\n\n+Project Glass\n", "menuItems": [ { "action": "REPLY" } ], "notification": { "level": "DEFAULT" } } ] }

応答の内容を見ると、Playgroundから投稿したアイテムが含まれていることがわかります。

新しいアイテムの作成

新しいアイテムを作成するには、 https://www.googleapis.com/mirror/v1/timelineへのPOSTを実行する必要があります。また、前の例と同様に、 Content-Typeがapplication/jsonであることを指定し、 Authorizationヘッダーを提供する必要があります。

私たちがスポーツの大ファンであり、私たちのお気に入りのチームであるエイリアンがプレデターを演じていると仮定しましょう。 Mirror APIを使用して、すべてのファンに結果を送信したいと考えています。

リクエスト本文は次のようになります。

 { "html": "<article>\n <section>\n <div class=\"layout-two-column\">\n <div class=\"align-center\">\n <p>Aliens</p>\n <p class=\"text-x-large\">0</p>\n </div>\n <div class=\"align-center\">\n <p>Predators</p>\n <p class=\"text-x-large\">0</p>\n </div>\n </div>\n </section>\n <footer>\n <p>Final Score</p>\n </footer>\n</article>\n", "notification": { "level": "DEFAULT" } }

そして、Postmanの画面はこれに似ているはずです。

これは、GoogleGlassでスポーツの結果をファンに送信するリクエストの郵便配達画面です。

リクエストを実行すると、MirrorAPIはこれと同様のレスポンスを提供する必要があります。

 { kind: "mirror#timelineItem", id: "e15883ed-6ca4-4324-83bb-d79958258603", selfLink: https://www.googleapis.com/mirror/v1/timeline/e15883ed-6ca4-4324-83bb-d79958258603, created: "2014-11-04T19:29:54.152Z", updated: "2014-11-04T19:29:54.152Z", etag: "1415129394152", html: "<article>\ <section>\ <div class=\"layout-two-column\">\ <div class=\"align-center\">\ <p>Aliens</p>\ <p class=\"text-x-large\">0</p>\ </div>\ <div class=\"align-center\">\ <p>Predators</p>\ <p class=\"text-x-large\">0</p>\ </div>\ </div>\ </section>\ <footer>\ <p>Final Score</p>\ </footer>\ </article>\ ", notification: { level: "DEFAULT" } }

Google Glassをお持ちでない場合でも、Mirror API Playgroundに戻って、[タイムラインアイテムの再読み込み]ボタンをクリックできます。 Glassディスプレイに表示されるのとまったく同じように、2つのアイテムが表示されます。最初の例を実行してアイテムをGETすると、両方のアイテムが一覧表示されます。

これは、このチュートリアルで作成したアプリを介してスポーツスコアがプッシュされたときのGoogleGlassのタイムラインです。

前の例の応答の内容を見ると、次のような行が見つかります。

 id: "e15883ed-6ca4-4324-83bb-d79958258603"

Mirror APIは、アイテムが挿入されるときに、すべてのアイテムにグローバルに一意のIDを割り当てます。このIDは、POSTの実行後の応答に含まれ、GETを実行してタイムラインアイテムを一覧表示すると、アイテムの詳細に含まれます。

プレデターがリードして得点したとしましょう。スコアを更新するには、 https://www.googleapis.com/mirror/v1/timelineに続いてIDに対してPUTを実行する必要があります。に似ている

https://www.googleapis.com/mirror/v1/timeline/e15883ed-6ca4-4324-83bb-d79958258603

変更を反映するようにアイテムの内容を変更します。

 { "html": "<article>\n <section>\n <div class=\"layout-two-column\">\n <div class=\"align-center\">\n <p>Aliens</p>\n <p class=\"text-x-large\">0</p>\n </div>\n <div class=\"align-center\">\n <p>Predators</p>\n <p class=\"text-x-large\">1</p>\n </div>\n </div>\n </section>\n <footer>\n <p>Final Score</p>\n </footer>\n</article>\n", "notification": { "level": "DEFAULT" } }

Postmanの構成は次のようになります。

これは、スコアをGoogleGlassデバイスに送信するためのPostman構成です。

リクエストを実行し、タイムラインの内容を確認した後、プレデターが1：0でリードしていることに気付くはずです。

これは、更新されたスコアを表示するGoogleGlassのスクリーンショットです。

メニューとユーザーとのやり取り

これまでのところ、ユーザーからの操作やフィードバックなしで、コンテンツをGlassにプッシュするだけでした。残念ながら、ユーザーインタラクションをシミュレートすることはできません。この例を試すには、実際のGlassデバイスを使用する必要があります。

したがって、ゲームは続行され、エイリアンは1：1でスコアを付けます。ユーザーがタイムラインアイテムを見ながら簡単なアクションを実行できる、ある種の「ILike」機能を有効にしたいと考えています。

まず、スコアを表示するメニューをカードに追加する必要があります。前の例の手順に従って、タイムラインアイテムを次のコンテンツで更新します。

 { "html": "<article>\n <section>\n <div class=\"layout-two-column\">\n <div class=\"align-center\">\n <p>Aliens</p>\n <p class=\"text-x-large\">1</p>\n </div>\n <div class=\"align-center\">\n <p>Predators</p>\n <p class=\"text-x-large\">1</p>\n </div>\n </div>\n </section>\n <footer>\n <p>Final Score</p>\n </footer>\n</article>\n", "notification": { "level": "DEFAULT" }, "menuItems":[ { "action":"CUSTOM", "id":"i_like", "values":[ { "displayName":"I Like!" } ] } ] }

このリクエストを実行すると、スコアが1：1に更新されたことがユーザーに表示されます。ただし、ユーザーがGlassをタップすると、メニューが表示されます。

「いいね」をタップしても何も起こりません！

アプリケーションとGlassデバイスの間には常に「仲介者」がいることはすでに述べました。「ILike」を選択すると、Glassデバイスは情報をMirror APIに送信しますが、MirrorAPIがこの情報を転送する場所を指定していません。

これがサブスクリプションの出番です。ユーザーがアクションを実行したときにMirrorAPIから通知を受信するには、サブスクリプションが必要です。

サブスクリプションを作成するには、 https://www.googleapis.com/mirror/v1/subscriptionsへのPOSTを実行する必要があります。

リクエストの本文は次のようになります。

 { "collection":"timeline", "userToken":"toptal_test", "operation": ["INSERT","UPDATE","DELETE"], "callbackUrl": "https://mirrornotifications.appspot.com/forward?url=<YOUR URL>" }

callbackUrlにはリダイレクトURLが含まれています。

注：ミラーAPIでは、イベントデータが転送されるURLにSSL暗号化が必要です。 ただし、テストの目的で、Googleはhttps://mirrornotifications.appspot.com/forwardでプロキシを提供しています。

この関数を使用して、ユーザーがGoogleGlassアプリでアクションを実行したときにMirrorAPIから通知を受信するようにサブスクライブします。

Mirror APIは、サブスクリプションで指定したURLに対してPOSTを実行します。そのURLのハンドラーを作成するには、好みの開発環境を使用する必要があります。リクエストの内容を出力するだけの簡単なJavaScript（NodeJS / ExpressJS）サンプルを提供しました。

 router.get('/notify', function(req, res) { console.log(req); res.send("OK"); });

閉鎖

Google Glass Mirror APIは、多くの点でユニークです。 Web開発者が前提条件なしでGlass開発にアクセスできるように設計されており、Glass OSのコアに含まれており、サードパーティの開発ツールに依存していません。 Mirror APIはGoogleによって完全に管理および保守されており、Google APIプラットフォームの一部であるため、安定性とスケーラビリティに関する懸念から解放されます。

Google Glassを使用したことがないWeb開発者の場合、Glassデバイスが必要だと思ったため、またはGoogle Glass開発について学ぶのに多くの時間を費やす必要があると思ったため、MirrorAPIについて学ぶことを避けたでしょう。このMirrorAPIチュートリアルが、その障壁を打ち破り、このタイプの開発を数分間見ていくのに役立つことを願っています。

ウェアラブルテクノロジーはここにあり、Google Glassはその最前線にあり、すべての開発者がその一部になるチャンスがあるはずです。 MirrorAPIはまさにそれを提供します。

この記事では、Mirror APIアプリケーションの認証、Google Glassからのデータの読み取り、Google Glassへのデータの送信、ユーザーからのフィードバックの受信のためのツールと手順について説明します。 Mirror APIとその機能の詳細については、MirrorAPIガイドにアクセスしてください。