(続)初めてのEven G2-インタラクションとデプロイ

(続) 初めてのEven G2 インタラクションとデプロイ 2026/04 XR ミーティング @takabrz1 Takahiro Miyaura

宮浦 恭弘 (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 ※よかったらこれを機にお知り合いになってください

• https://qiita.com/miyaura
• https://zenn.dev/miyaura

今日の内容 2026/03/18 1 インタラクション制御 2 デモ 3 ビルドとデプロイ 4 まとめ リング操作・イベント正規化・UI 更新パターン インタラクションデモの動作確認 パッケージング・公開ステータス（Private/Beta/Public ） 記事リンク・Tips © 2026 Takahiro Miyaura 3

インタラクション制御 2026/03/18 © 2026 Takahiro Miyaura 4

UIコンテナの種類と制約 3種類のコンテナ — 1ページに最大4コンテナ配置可（混在可） テキスト リスト 画像 TextContainerProperty ListContainerProperty updateImageRawData() 文字表示 最大2000文字 スクロール可能な 選択式リスト ピクセルデータ 直接指定 ページ構成ルール ▸ 絶対座標配置のみ（CSS flexbox 等は使えない） ▸ isEventCapture: 1 が1つ以上必須（入力受信用） ▸ containerTotalNum は実際のコンテナ数と一致必須 2026/03/18 © 2026 Takahiro Miyaura 5

イベント一覧と正規化 イベント 値 入力元 タップ 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

デモ：インタラクションデモ リング操作 グラスの変化 実装のポイント タップ 「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

最小コード — イベント検出と画面更新
// 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

ページ更新パターン createStartUpPageContainer() rebuildPageContainer() textContainerUpgrade() 初期描画 全体再構築 部分更新 ★推奨 起動時に1回だけ呼ぶ コンテナ構成変更時 ちらつきなし・安定 API シミュレータ 実機 createStartUpPageContainer() 何度でも呼べる 初回のみ有効 rebuildPageContainer() 動作する 動作しない場合あり textContainerUpgrade() 動作する 動作する 実機では textContainerUpgrade を優先。初回で最大構成を確立 → 以降テキストのみ更新が安定 2026/03/18 © 2026 Takahiro Miyaura 9

ビルドとデプロイ 2026/03/18 © 2026 Takahiro Miyaura 10

ビルドからデプロイまでの流れ 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

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

• https://hub.evenrealities.com

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

公開ステータス（Private / Beta / Public） Private Beta ★ Public 開発・デバッグ用 テスト配布・個人利用 公式プラグイン Developer Hub に表示 開発者本人のみ スマホから操作が必要 テストユーザーに配布 指定アカウントのみ 招待メールで配布 全ユーザーに公開 審査通過が必要 公式一覧に掲載 メニュー追加 ✕ メニュー追加 ✓ メニュー追加 ✓ Beta版の個人利用ハック ▸ 公開する予定がなくても Beta に設定 ▸ 自分のアカウント（メールアドレス）をテストユーザーに追加 ▸ → グラスのメニューに常駐させて日常使いが可能！ 2026/03/18 © 2026 Takahiro Miyaura 14

まとめ ○リング・テンプルの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

• https://zenn.dev/miyaura/articles/eveng2-part1-getstarted-0ed90d3aa144e8
• https://zenn.dev/miyaura/articles/eveng2-part2-intructions-44c14f04b8fa08
• https://zenn.dev/miyaura/articles/eveng2-part3-buildandpublish-73cbfca6c2851b

大阪駆動開発 関西を中心に、IT系のおもしろそうなことを 楽しんでやるコミュニティ