--- title: (続)初めてのEven G2-インタラクションとデプロイ tags: #xrmtg #xr #ai #llm #eveng2 author: [Miyaura](https://image.docswell.com/user/m-taka596) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/LE3WK335E5.jpg?width=480 description: XRミーティング 2026/04/15【AR/CR/MR/SR/VR】( https://osaka-driven-dev.connpass.com/event/388011/ )登壇資料。先月に引続きEven G2について。今月に入ってEven Hubが正式リリースされ、カスタムプラグインを導入することが可能に。自分で作ったオリジナルのプラグインも利用可能になった。今回はセンサーによる操作とプラグインの公開についての話。 関連する技術資料 - Even G2 スマートグラス開発入門（1）— 環境構築からHello Worldまで - https://zenn.dev/miyaura/articles/eveng2-part1-getstarted-0ed90d3aa144e8 - Even G2 スマートグラス開発入門（2）— インタラクション制御とUI構築 - https://zenn.dev/miyaura/articles/eveng2-part2-intructions-44c14f04b8fa08 - Even G2 スマートグラス開発入門（3）— ビルド・パッケージング・公開 - https://zenn.dev/miyaura/articles/eveng2-part3-buildandpublish-73cbfca6c2851b published: April 15, 26 canonical: https://image.docswell.com/s/m-taka596/ZJW41X-XRMTG-EvenG2-intructions-and-deploy-20260415 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/LE3WK335E5.jpg) (続) 初めてのEven G2 インタラクションとデプロイ 2026/04 XR ミーティング @takabrz1 Takahiro Miyaura # Page. 2 ![Page Image](https://bcdn.docswell.com/page/8EDK344Y7G.jpg) 宮浦 恭弘 (Miyaura Takahiro) Microsoft MVP for Mixed Reality 2018 Microsoft MVP for M365 2025 - 2026 XR は趣味です.AI 系も最近始めました。 - 202 5 大阪駆動開発コミュニティに生息 HoloLens 日本販売してからxR 系技術に取組む 新しい技術や、MRに使えそうな技術を調べる 技術Tips : https://qiita.com/miyaura https://zenn.dev/miyaura 最近興味があって取り組んでいるもの ○ AndroidXR ○ 新しいガジェット( MiRZA,Galaxy XR,etc …) ○ Microsoft Foundry, 生成AI @takabrz1 ※よかったらこれを機にお知り合いになってください # Page. 3 ![Page Image](https://bcdn.docswell.com/page/V7PK4MM2J8.jpg) 今日の内容 2026/03/18 1 インタラクション制御 2 デモ 3 ビルドとデプロイ 4 まとめ リング操作・イベント正規化・UI 更新パターン インタラクションデモの動作確認 パッケージング・公開ステータス（Private/Beta/Public ） 記事リンク・Tips © 2026 Takahiro Miyaura 3 # Page. 4 ![Page Image](https://bcdn.docswell.com/page/2JVVX99XJQ.jpg) インタラクション制御 2026/03/18 © 2026 Takahiro Miyaura 4 # Page. 5 ![Page Image](https://bcdn.docswell.com/page/5EGLVZZRJL.jpg) UIコンテナの種類と制約 3種類のコンテナ — 1ページに最大4コンテナ配置可（混在可） テキスト リスト 画像 TextContainerProperty ListContainerProperty updateImageRawData() 文字表示 最大2000文字 スクロール可能な 選択式リスト ピクセルデータ 直接指定 ページ構成ルール ▸ 絶対座標配置のみ（CSS flexbox 等は使えない） ▸ isEventCapture: 1 が1つ以上必須（入力受信用） ▸ containerTotalNum は実際のコンテナ数と一致必須 2026/03/18 © 2026 Takahiro Miyaura 5 # Page. 6 ![Page Image](https://bcdn.docswell.com/page/4JQY6LLY7P.jpg) イベント一覧と正規化 イベント 値 入力元 タップ CLICK_EVENT (0) Ring / R-Temple / L-Temple ダブルタップ DOUBLE_CLICK (3) Ring / R-Temple / L-Temple スクロール上 SCROLL_TOP (4) Ring スクロール下 SCROLL_BOTTOM (5) Ring FG Enter FOREGROUND_ENTER (6) System FG Exit FOREGROUND_EXIT (7) System 正規化が必要な理由 ▸ タップはsysEventで届く ▸ スクロールはtextEventで届く ▸ シミュレータと実機で挙動が異なる getRawEventType() ↓ normalizeEventType() 2026/03/18 © 2026 Takahiro Miyaura 6 # Page. 7 ![Page Image](https://bcdn.docswell.com/page/K74W4DDZE1.jpg) デモ：インタラクションデモ リング操作 グラスの変化 実装のポイント タップ 「TAP」と表示 ダブルタップ 「DOUBLE TAP」と表示 スクロール上 「SCROLL UP」と表示 スクロール下 「SCROLL DOWN」と表示 Bridge接続 2026/03/18 1. 初回のみcreateStartUpPageContainer 2. 以降はtextContainerUpgradeで更新 3. イベント正規化でSDK差異を吸収 4. eventSourceでRing/Temple判別 ページ作成 © 2026 Takahiro Miyaura イベント受信 テキスト更新 7 # Page. 8 ![Page Image](https://bcdn.docswell.com/page/LJ1Y4ZZDEG.jpg) 最小コード — イベント検出と画面更新 // 1. 初期ページ描画 await bridge.createStartUpPageContainer(new CreateStartUpPageContainer({ containerTotalNum: 1, textObject: [new TextContainerProperty({ containerID: 1, content: "Hello", isEventCapture: 1, ...})] })) // 2. イベント検出 bridge.onEvenHubEvent(async (event) => { const type = event.textEvent?.eventType // 3. テキスト更新 await bridge.textContainerUpgrade(new TextContainerUpgrade({ containerID: 1, content: `Tap: ${type}`, contentLength: 2000 })) ポイント ▸ createStartUpPageContainer は初回のみ、以降は textContainerUpgrade で更新 2026/03/18 © 2026 Takahiro Miyaura 8 # Page. 9 ![Page Image](https://bcdn.docswell.com/page/GJWGX99872.jpg) ページ更新パターン createStartUpPageContainer() rebuildPageContainer() textContainerUpgrade() 初期描画 全体再構築 部分更新 ★推奨 起動時に1回だけ呼ぶ コンテナ構成変更時 ちらつきなし・安定 API シミュレータ 実機 createStartUpPageContainer() 何度でも呼べる 初回のみ有効 rebuildPageContainer() 動作する 動作しない場合あり textContainerUpgrade() 動作する 動作する 実機では textContainerUpgrade を優先。初回で最大構成を確立 → 以降テキストのみ更新が安定 2026/03/18 © 2026 Takahiro Miyaura 9 # Page. 10 ![Page Image](https://bcdn.docswell.com/page/4EZL699973.jpg) ビルドとデプロイ 2026/03/18 © 2026 Takahiro Miyaura 10 # Page. 11 ![Page Image](https://bcdn.docswell.com/page/Y76W2KKD7V.jpg) ビルドからデプロイまでの流れ 1 2 3 4 ビルド app.json パッケージング Even Hub公開 npm run build → dist/ に出力 メタ情報定義 パーミッション設定 evenhub-cli pack → .ehpk 生成 Webからアップロード 公開ステータス設定 npm run build && cp dist/assets/* dist/ && npx @evenrealities/evenhub-cli pack app.json dist 注意: assets のフラット化 evenhub-cli pack は dist/assets/ サブディレクトリ内のファイルを正しく参照できない場合あり → パッケージング前に cp dist/assets/* dist/ でフラット化 2026/03/18 © 2026 Takahiro Miyaura 11 # Page. 12 ![Page Image](https://bcdn.docswell.com/page/G75M2PP874.jpg) Even Hub へのアップロード手順 アップロード手順 1.Even Hubにアクセスし Sign in https://hub.evenrealities.com 2.アカウント作成（スマホと同じアカウント可） 3.Settings → Edit profile を選択し、 Developer name を設定 4.My projects → Upload package を選択 5..ehpk ファイルをアップロード 注意点 ✓ 一度作ったプロジェクトは削除できない（2026/04 時点） ✓ パッケージの内容に不備があるとアップロード失敗する 2026/03/18 © 2026 Takahiro Miyaura 12 # Page. 13 ![Page Image](https://bcdn.docswell.com/page/9J29466VER.jpg) app.json 設定とパーミッション 主要フィールド { "package_id": "com.example.myapp", "edition": "202601", "name": "My App", "version": "0.1.0", "min_sdk_version": "0.0.7", "tagline": "Short description", "entrypoint": "index.html", "permissions": [ { "name": "network" } ], "supported_languages": ["en","ja"] } 2026/03/18 ▸ package_id — 逆ドメイン形式 ▸ edition — 202601 固定 ▸ entrypoint — 通常 index.html ▸ permissions — 必須（空配列可） name 用途 network 外部ネットワーク通信 g2-microphone グラスのマイク phone-microphone スマホのマイク location 位置情報 © 2026 Takahiro Miyaura 13 # Page. 14 ![Page Image](https://bcdn.docswell.com/page/DEY4M99QJM.jpg) 公開ステータス（Private / Beta / Public） Private Beta ★ Public 開発・デバッグ用 テスト配布・個人利用 公式プラグイン Developer Hub に表示 開発者本人のみ スマホから操作が必要 テストユーザーに配布 指定アカウントのみ 招待メールで配布 全ユーザーに公開 審査通過が必要 公式一覧に掲載 メニュー追加 ✕ メニュー追加 ✓ メニュー追加 ✓ Beta版の個人利用ハック ▸ 公開する予定がなくても Beta に設定 ▸ 自分のアカウント（メールアドレス）をテストユーザーに追加 ▸ → グラスのメニューに常駐させて日常使いが可能！ 2026/03/18 © 2026 Takahiro Miyaura 14 # Page. 15 ![Page Image](https://bcdn.docswell.com/page/VJNYWLL278.jpg) まとめ ○リング・テンプルの6種のイベントとイベント正規化 ○3種のUIコンテナ（Text / List / Image）とページ構成ルール ○実機ではtextContainerUpgradeが安定 ★推奨 ○ビルド → .ehpk パッケージ → Even Hub 公開の流れ ○Beta版ハック — 自分用プラグインをメニューに常駐 Zenn記事 ▸ Even G2 スマートグラス開発入門（1）— 環境構築からHello Worldまで https://zenn.dev/miyaura/articles/eveng2-part1-getstarted-0ed90d3aa144e8 ▸ Even G2 スマートグラス開発入門（2）— インタラクション制御とUI構築 https://zenn.dev/miyaura/articles/eveng2-part2-intructions-44c14f04b8fa08 ▸ Even G2 スマートグラス開発入門（3）— ビルド・パッケージング・公開 https://zenn.dev/miyaura/articles/eveng2-part3-buildandpublish-73cbfca6c2851b 2026/03/18 © 2026 Takahiro Miyaura Part.1 Part.2 Part.3 15 # Page. 16 ![Page Image](https://bcdn.docswell.com/page/YE9PX44DJ3.jpg) 大阪駆動開発 関西を中心に、IT系のおもしろそうなことを 楽しんでやるコミュニティ