🕶️
スマートグラス『Even G2』向けに青空文庫リーダーを作った
概要
Even G2スマートグラス向けに、青空文庫リーダーを作成しました。
作ったアプリ
WebView側で作品を検索し、選択した本文をグラス側HUDに表示するリーダーです。
実装スタック:
- WebViewアプリ: Vite + React + TypeScript
- UI: shadcn/ui
- Even連携: @evenrealities/even_hub_sdk
- ローカル開発: evenhub-cli
スクリーンショット
グラス側（HUD）
アプリ側（WebView）
| トップ | 作品詳細/本文 | 検索 |
|---|---|---|
 |
 |
 |
- トップ画面にはlocalstorage上に読書進捗がある書籍が表示
- アプリ上部の検索バーから青空文庫内の作品を検索
- 書籍を押下するとスマートグラス上で作品が表示され、リングでスクロール+クリックでページ送り
- 書籍押下時、アプリ側では本文画面が開き、スマートグラスで表示されている箇所と同期した状態になります
Even G2アプリの仕組み（本記事の実装前提）
Even G2との連携に必要なEven Realitiesアプリ内で動くWebページ（WebView）がアプリ本体となります。
アーキテクチャ図（Mermaid）
このWebページ内のJavaScriptから、SDK経由で次の操作を行います。
- グラス側への表示内容の送信（HUDのテキスト・レイアウト更新）
- リング入力イベントの受信（クリック、スクロールなど）
- 入力に応じたページ遷移や再描画
このため、実装の中心は「通常のフロントエンド開発（Reactなど）」と「SDKイベント処理」の組み合わせになります。
webエンジニアとしては非常に開発しやすい仕組みだと思います。
今回は pnpm create vite で作成したreact+TSアプリをベースとしました。
現時点での情報収集方法
現在は公式SDK公開直後ということもあり、情報共有はまだ未成熟です。この記事を読む時点では状況が変わっている可能性があるため、最新情報は都度確認する前提で進めるのが安全です。
現時点で情報量が多いのは、公式Discordの #dev-chat です。
とくにチャンネルにピン留めされている情報が、現状の開発フローを知る上で大きな助けになると思います。
追加で見ておくべき資料
-
https://www.npmjs.com/package/@evenrealities/even_hub_sdk
- even_hub_sdkのREADMEです。現状、SDKでできることはそこまで多くないため、この資料を読めばできることはほぼ網羅できます。
-
https://github.com/nickustinov/even-g2-notes/blob/main/G2.md
- 非公式の公開SDKに関する調査・リバースエンジニアリング結果がまとまっています。
-
https://github.com/BxNxM/even-dev
- 公式エミュレータ公開前に使われていた開発ツールです。サンプルアプリの実装が参考になります。
実装時の補足
- UIデザインは公式ガイドライン（Figma）を参照し、WebView実装はshadcn/uiで構成しています。
- 非公式ですが、デザインガイドラインに合わせたReactコンポーネントパッケージがあるため、とくにこだわりがなければこちらを使うのがよいかもしれません（筆者は試していません）。
- https://www.npmjs.com/package/@jappyjan/even-realities-ui
- 執筆時点では実機が未着のため、エミュレータ中心で検証しています。
- EvenHubSDKはまだ公開されて1か月ほどであり、大幅な変更が入る可能性もあります。実際に開発するときは、公式Discordチャンネルを確認してから進めるのがよいと思います。
Discussion