【要約】現在地付近の東京の電車・バスをスマートグラスに「スカウター」として映す — Even G2 plugin を作った話 [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
開発者がスマートグラス向けに交通情報を表示する際、厳しいハードウェア制約とセキュリティ課題に直面した。具体的には以下の問題がある。
- ・解像度と色数の制限（576×288 px、16階調モノクロ）。
- ・表示領域の制約（画像コンテナ最大200×100 px、固定フォント）。
- ・APIキーの露出リスクと、プラグインのネットワーク許可リストの制約。
- ・BLE帯域の制限による描画遅延。
// Approach
開発者は、ソフトウェアの工夫とAWSの活用により、制約の克服とセキュアな構成を両立させた。主な手法は以下の通りである。
- ・CloudFront Functionsによるエッジプロキシ構成：APIキーの注入とパス書き換えをエッジで行い、キー露出を防ぎつつドメインを集約。
- ・Canvas2Dによる描画最適化：固定フォントの代わりにOffscreenCanvasで文字を画像化し、画像コンテナを縦に積む手法を採用。
- ・描画負荷の軽減：データ更新時のみ描画する「data-change-driven」方式や、PNGの差分送信を実装。
- ・Terraformによるインフラ管理：CloudFront、S3、Secrets Managerをコードで管理。
// Result
制約の多いスマートグラス上で、実用的な交通情報の表示を実現した。得られた成果は以下の通りである。
- ・低解像度・低色数環境での視認性の確保。
- ・エッジでの認証処理によるセキュアな通信。
- ・シミュレータとQR sideloadによる、実機に近い開発フローの確立。
- ・今後の展望として、多言語化やAR的な方角表示の追加を予定。
Senior Engineer Insight
> 本件は、リソース制約の厳しいエッジデバイスにおける、Web技術の適用限界を攻めた事例だ。特にCloudFront Functionsをエッジプロキシとして使い、セキュリティと通信制約を同時に解決する設計は、実戦的で非常に合理的である。描画負荷を抑えるための「data-change-driven」な設計や、Canvasを用いたフォントの代替手法は、低スペックデバイス開発の定石と言える。ただし、インフラ構成が複雑化するため、運用フェーズではTerraformによる厳格な管理が不可欠となるだろう。