新時代の到来か！生成AI×ARグラス実践記② ～環境構築＆アプリ実装編～

ARグラスを使う側から、作る側へ

こんにちは。前回は「生成AI×ARグラス」をテーマに、Rokid AIスマートグラスのリアルタイム翻訳、会議メモ、テレプロンプター、物体検知などを体験しました。（前回記事はこちら）わずか49gのメガネに、AIが視界や音声を理解するための「目と耳」が備わっていることにも驚きました。そして、エンジニアとして次に気になるのは、これです。

「グラスに自分で作ったアプリを表示できるのか？」

今回は、Rokid Glasses向けの開発環境を整え、タップするとメッセージが変わるシンプルなアプリを作り、実機で動かすところまで挑戦してみます。

本稿の手順では、PC、ブラウザ、Rokidアカウント、スマートフォンのRokid AIアプリに加えて、テンプレートのプロジェクトを作成するためのNode.js／npmを使います。なお、今回はWindows上のWSL環境にNode.jsをインストールしました。

最初に整理！Rokid の開発方法は2つある

Rokid Glassesの開発方法は、大きく2つに分かれており、これを理解すると開発イメージがぐっとわかりやすくなります。まずは、それぞれの違いを整理しておきます。

今回は、音声起動やグラス向けUIに対応した、Rokid Glasses向けの開発基盤「AIUI」を使います。

ここが今回の重要ポイントです。AIUIで作る限り、PCとグラスをケーブルで接続する必要はありません。 PCからRokidクラウドへアプリをアップロードすると、同じアカウントでログインしたスマートフォンが受け取り、ペアリング済みのグラスへ反映する仕組みです。

開発環境を準備する

1. Rokidアカウントの作成

RokidアカウントセンターでRokidアカウントを作成（日本のメールアドレス可）し、PC側のAIUI Studio／Editor（旧称：Craft）と、スマートフォン側のRokid AIアプリへ同じアカウントでログインします。

2. グラス側の開発者設定を確認

続いて、スマートフォンのRokid AIアプリを開き、開発者用の設定を確認します。

ホーム → デバイス右上の歯車 → グラス設定 → 開発者 

ここに「グラスADBデバッグ」と「AIUI」の項目があります。今回使うのはAIUI側です。ADBデバッグはネイティブAndroidアプリ用なので、今回はオフのままにしておきます。

「AIUI」欄の「グラスのリソースを更新」は、パッケージ化したエージェントをスマートフォン経由でグラスへ反映するときに使います。今回は、後の手順でAIUI Editorからパッケージをアップロードしたあとに実行します。 

アプリ（エージェント）の作成

1.AIUI Studioのプロジェクト作成

AIUI Studioとは、Rokid Glasses向けのエージェント管理コンソールです。なお、Rokid Glassesではアプリではなく「エージェント」という単位で作成することになります。（何でもかんでも「エージェント」とするのは個人的には好みではないですが…）

エージェント用のプロジェクトは、AIUI Studioの左上部にある「New Agent」をクリックして、用途に合わせて以下の3つからプロジェクトを作成します。

今回は、事前に開発機上で npm create @yodaos-pkg/aiui-agent@latest <my-agent-name>  を実行してテンプレートのプロジェクトを作成し、上記の「ローカルからインポート」から、テンプレートのプロジェクトを AIUI Studio上にプロジェクトをインポートさせました。（ <my-agent-name>  の部分は、エージェント名兼プロジェクトルートのフォルダ名）

AIUI Studio インポート直後の画面は以下のような感じです。 左側のペインに取り込んだプロジェクトが表示され、画面上部の「コード」（赤枠部分）を選択すると、インポートしたフォルダ階層とファイルが表示されています。（ファイルを選択すると CRAFT WORKSPACE 部分にコードが表示され、編集が可能です）

AIUIでは、「Open Agent Format（OAF）」という構成でプロジェクト内のオブジェクトが管理され、今回作成したテンプレートのプロジェクトでは、以下のようなファイル構造となります。なお、AIUIのプロジェクトは、用途に応じて、ウィジェットやバックグラウンド処理、画像などのファイルも追加できます。

2. アプリ（エージェント）の実装

早速、アプリ（エージェント）の実装に入っていきます。今回は起動時に「ARグラスの世界へようこそ！」と表示し、テンプル（メガネの横の部分）をタップすると「タップを検知しました！」へ切り替わる画面を作成してみます。

コード自体は、OAF構成の ./pages/index/index.ink  にコードを記述していきます。今回追記したコードは以下の通りです。

コード上で注目したいのは onKeyUp(event)  です。AIUIではグラスからの操作をキーイベントとして受け取れます。このアプリでは Enter が届いたときだけタップ回数を増やし、 this.setData() で画面の文字を更新しています。

さらに、特徴的なのが event.preventDefault()  です。Enterには通常、ナビゲーションモードに入る、選択中の項目を有効にするといった標準の動作があります。今回はその動作を止め、Enterをアプリの「メッセージを切り替える」操作として使っています。 これはグラスとスマートフォンの間で処理を移す命令ではなく、同じ入力を標準操作とアプリ独自の操作のどちらに使うかを決める処理です。

画面の作り方も少し独特です。 <page> の中では、表示領域に view 、文字に text を使い、 {{ message }} のようにデータを表示します。続いて、グラス上でこの画面を見やすくするための制約を整理します。

3. 実機（グラス）特有のUI制約

続いて、グラス向けUIでは、次の4点を押さえます。

• 表示色は単色グリーンのみ
• アプリが使用するコンテンツ幅は448pxが目安
• 純黒の背景は、透過ディスプレイでは「何も表示せず現実が見える」状態
• 色分けの代わりに、文字サイズと透明度で情報の優先度を表す

また、制約というわけではないですが flex-direction: column も重要な要素になってきます。これを明示しないと実機で文字が横一列に並ぶ場合があるため、レイアウトは単純にした方が、グラス上のUIとしては見やすくなります。

4. アプリ（エージェント）の動作確認

次に、AIUI Studio ではブラウザ上でシミュレーションもできるので、上記のコードを AIUI Studio で動かしてみます。 画面上部中央の「実機シミュレーション」の「プレビュー」をクリックすると、ブラウザ内でグラスの表示と操作を試せます。実機へ転送する前に、画面の見え方やキーイベントの処理を確認できるのが便利です。

早速、プレビューを起動すると、まず「HELLO MY GLASSES」と「ARグラスの世界へようこそ！」が表示され、タップ回数は tap 0 になりました。

続いて「シングルクリック」でテンプルのタップ操作を試すと、メッセージが「タップを検知しました！」に切り替わり、回数も tap 1 に更新されます。もう一度操作すると tap 2 となり、タップするたびに回数が増えることも確認でき、ロジックと画面表示が想定通り動作していることが確認できました。

ただし、 .ink  に書いたロジックと画面表示が、シミュレーター上で動くところまで確認できましたが、これはAIUI Studioを使ったブラウザ上のシミュレーション結果です。次は作成したアプリを実際のグラスに反映し、表示やタップ操作を確認してみたいと思います。

アプリ（エージェント）を実機（グラス）で動かす

1. .aix にパッケージ化

実機で試すには、作成したアプリ（エージェント）を .aix  にパッケージ化し、Rokidアカウントのクラウドへ反映します。

今回の開発環境では、AIUI Studioからソースをローカルに反映したあと、AIUI Editorでパッケージ化してアップロードしました。（ローカルへの反映は、メニューから「ローカルを上書き」を選ぶことで、ローカルに反映できます）

次に、AIUI Editorを開き、更新したローカルプロジェクトをインポートします。インポート時には、 app.json  が直下にあるフォルダーを選択してください。

ちなみに、AIUI Editorでも上部メニューの「実行」から動作確認できます。パッケージ化の前に、表示やキー操作を確認しておくと便利です。

動作に問題がなければ、AIUI Editorの上部メニューから「パッケージ化」→「パッケージ開始」を選び、 .aix  を作成します。

パッケージ化が完了したら、対象のエージェントを選択してアップロードします。

⚠️個人利用であればAIUI Editorの上部メニュー「送信」の実施は不要！

AIUI Editorの「送信」はAgent Storeへの審査提出を指します。個人の実機で動作確認するだけであれば、審査提出は不要です。

2. Rokid AIアプリからグラスへ反映

最後にスマートフォンのRokid AIアプリで、次の操作を行います。

ホーム → デバイス右上の歯車 → グラス設定 → 開発者 → AIUI → グラスのリソースを更新 

先ほどパッケージ化した .aix  をグラスに取得するのに必要な手順はこれだけです。次は実際に実機でアプリ（エージェント）が動くところを見てみます。

3. 実機（グラス）で表示と動作を確認

グラスのリソース更新が終わったので、いよいよ実機で試しますが、ここで、起動方法について補足します。
Rokid Glassesでは、音声アシスタントに話しかけてエージェントを起動できます。今回のサンプルアプリには音声認識や音声による起動処理を実装しておらず、起動にはグラス側の音声アシスタントを利用しました。

では、さっそくグラスを装着し起動してみます。「Hi Rokid、ハローマイグラスを開いて」と呼びかけると、自作したアプリ（エージェント）が視界に表示されました。
最初に確認したのは画面表示です。「HELLO MY GLASSES」と「ARグラスの世界へようこそ！」が緑色で表示され、カウンターは tap 0.0  になっています。

続いてテンプルを1回タップすると、メッセージが「タップを検知しました！」に変わり、カウンターは tap 1.0  に更新されました。もう一度タップすると tap 2.0  となり、実機でも入力に応じて表示が更新されることを確認できました。

PCのシミュレーターで見た緑色の文字が、今度は現実の風景に重なって見えます。作ったコードが目の前で動くと、単純な文字表示でも「自分のアプリをグラスで動かせた」という実感があります。また、グラス側の音声アシスタントを使ってアプリを起動する体験もでき、ARグラスならではの操作の幅を感じられたことも印象的でした。

今回試した範囲では、画面の配置とタップによる更新はシミュレーターで確認したとおりに動作しました。一方、カウンターはシミュレーターの整数表記と異なり、実機では小数点以下に .0  が表示されました。また、実機では文字が現実の風景に重なるため、背景や周囲の明るさによって読みやすさが変わります。表示する情報を絞り、文字サイズや配置を実機で確認する必要があると感じました。

最後に、実機上で動作させた動画を載せておきます。アプリがどうやって起動し、表示が変わっていく様子が確認できます。

実際に作って分かったこと

スマートグラス開発と聞くと、専用SDKや複雑な3D描画を想像します。しかしAIUI Studio/Craft なら、JavaScriptとHTML／CSSに近い記法で、文字表示とタッチ操作まで到達できます。

一方で、お伝えしませんでしたが、開発のお作法や使い方がわからなかったり、情報の整理に苦労するといった面もありました。特に、アプリ（エージェント）の起動は音声で起動させるので、わかってしまえば何ともないですが、何も知らないとどうやっていいかもわからず深みにはまってしまいます。一言でいえば、「生みの苦しみ」なのですが、改めてドキュメントの大切さを痛感しました。

おわりに＆次回予告

今回は、Rokid Glasses向けのAIUI開発環境を整え、シンプルな自作アプリを実機で動かすところまで紹介しました。前回の「使う側」から、今回は表示内容と操作を決める「作る側」へ踏み込みました。緑一色、448px幅、タップやスワイプ中心という制約があるからこそ、「今、視界に何を出すべきか」を考える面白さがあります。

また、今回は画面表示や入力を試しやすいAIUI Studio／Editorを使いましたが、別の選択肢としてネイティブAndroidアプリの開発方法もあります。必要な機能や利用できるAPIに応じて、適した開発方法を選ぶとよいと思います。

なお、実機で文字表示や画面の表示制御を確認できたので、外部APIから受け取った情報も表示できそうです。次回は、さらに踏み込んで、生成AIやAIエージェントへリクエストを送り、目の前の状況に応じた回答を視界へ返すところまで挑戦したいと思います。

ARグラスが単なる表示デバイスから、自分専用のAIインターフェースへ変わる瞬間は、もうすぐそこ（のはず）です、ということで、また次回をお楽しみに！