初めてのEven G2-Hello world出してみる

>100 Views

March 18, 26

#xrmtg #xr #eveng2 #ai #aiglass

スライド概要

【大阪-オンライン開催】XRミーティング 2026/03/18【AR/CR/MR/SR/VR】(https://osaka-driven-dev.connpass.com/event/385095/)登壇資料。
Even G2を手に入れたので簡単な紹介。β版で正式ではないんですが自分でプラグインを開発することができるので実際に環境構築とHello worldをやってみた話を紹介。
実装についてのZenn記事も作成しています。
https://zenn.dev/miyaura/articles/eveng2-part1-getstarted-0ed90d3aa144e8

Miyaura

@m-taka596

スライド一覧

ICT業界でソフトウェアエンジニア/アプリケーションアーキテクトを担当。社内ではXR関連技術に関する啓もう活動や技術支援に従事。業務の傍ら、XR（特にMixed Reality領域）についての開発技術の調査、開発などを行っています。また、「大阪駆動開発」コミュニティ所属しており、日々の調査で得た知見はコミュニティを通して情報発信を行っています。

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

関連スライド

OpenVRやOpenXRの基本的なことを調べてみた

xrmtg openxr openvr hololens

Miyaura 25.9K

冬休みの宿題 - Lenovo Think Reality A3で検証(MRTK3含)

xrmtg mrtk3 mixed reality snapdragon spaces thinki reality a3

Miyaura 13.1K

Mixed Reality Toolkit 3で始めるクロスプラットフォーム開発

xr mrtk3 metaquest3 snapdragonspaces xrkaigi

Miyaura 11.4K

今更ですがちょっとMetaQuest3でMRTK3触ってみました

mixed reality xrmtg mrtk3 unity

Miyaura 11.3K

MRTK3をLenovoのThink Reality A3上で動かす - Snapdragon Spaces SDKの紹介

hololens ホロマジ snapdragonspaces mrtk3 xr unity

Miyaura 11K

Snapdragon Spaces v0.12.0 for Unityの調査(あれも試してみてる)

xrmtg mrtk3 mixed reality snapdragon spaces think reality a3

Miyaura 8.9K

各ページのテキスト

初めてのEven G2 Hello world出してみる 2026/03 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 ※よかったらこれを機にお知り合いになってください

Even G2 とは？とてもシンプルなAI グラス 2026/03/18 ディスプレイデュアル micro-LED 色表現 4bit グレースケール緑16階調接続 BLE 5.x スマホ経由入力 R1リングテンプルタッチできることできないこと ○ ○ ○ ○ ○ カメラ / スピーカー非搭載 ○ テキスト装飾（太字等）不可 ○ 中央揃え / 背景色指定不可テキスト表示（最大2000文字）リスト / 画像表示マイク入力（PCM 16kHz） REST API / WebSocket通信 © 2026 Takahiro Miyaura 5

Even RealitiesアプリスマホにいれてEven G2 とEven R1 と連携する表示できるもの ▸ 時計 ▸ スマホの通知 ▸ プリセットのニュース記事 ▸ ナビゲーション ▸ ライブ翻訳 ▸ 会話サポート ▸ Even AI ▸ クイックリスト Even R1持っていればライフログ取れます ▸ 歩数 ▸ カロリー ▸ 睡眠の質 ▸ 心拍数 2026/03/18 © 2026 Takahiro Miyaura ▸ 体温 ▸ 心拍変動 ▸ 血中酸素濃度 6

カメラやスピーカーはないですだが、それがいい。カメラも使えるデバイスで例えば。。。 ○ Rokid AI スマートグラス ○ Ray-ban Meta Display AIグラスを付けて色々日常で考えながらやるのであれば、カメラがないデバイスがよさそう？撮影できるカメラ付きは世間での抵抗感がつよい印象 • 盗撮の可能性を疑われる • 時々悪用されるニュースもある • 会話支援機能も便利だけども。。。 2026/03/18 © 2026 Takahiro Miyaura 7

開発モデルの全体像 PC Vite 開発サーバー localhost:5173 HTTP/ HTTPS スマホ Even Hub アプリ WebView実行 BLE 5.x Even G2 グラス BLE接続開発の流れ ▸ PC上でVite開発サーバーを起動 ▸ スマホのEven HubアプリからHTTPでアクセス ▸ WebView内でアプリ実行 → SDK経由でBLEでグラスに描画 ▸ HMRが効くのでコード保存→即反映 2026/03/18 © 2026 Takahiro Miyaura 8

開発環境構築セットアップ手順前提条件 ▸ Node.js v18+、npm、Git、Bash 3ステップで起動 ▸ ① even-devをクローン ▸ ② npm install ▸ ③ ./start-even.sh で起動 2026/03/18 # clone & setup $ git clone https://github.com/BxNxM/even-dev.git $ cd even-dev $ npm install $ ./start-even.sh 主要パッケージ ▸ even_hub_sdk — 公式SDK ▸ even-better-sdk — 推奨ラッパー ▸ evenhub-simulator — ローカルSim © 2026 Takahiro Miyaura 9

https://github.com/BxNxM/even-dev.git

10.

11.

12.

Hello World — ファイル構成 apps/my-first-app/ ├── index.html ├── package.json ├── app.json ├── vite.config.ts └── src/ └── main.ts ← 本体 index.html コンパニオン画面のエントリポイントグラスに直接表示されるわけではない package.json even_hub_sdk + even-better-sdk の依存定義 app.json アプリメタデータ package_id, name, version main.ts アプリのメインロジック SDK経由でグラスに描画 2026/03/18 © 2026 Takahiro Miyaura 12

13.

[beta]

各ファイルの中身
index.html

package.json

<body>
<h1>My First App</h1>
<button id="connect-btn">
Connect glasses
</button>
<script src="/src/main.ts" />
</body>
コンパニオン画面 — グラスに直接表示されない

{

app.json

vite.config.ts

{

import { createStandaloneViteConfig }
from '../_shared/standalone-vite'

"package_id": "com.example..."
"name": "My First App"
"entrypoint": "index.html"

}
アプリメタデータ — Even Hub Portalへの公開時に使用

"dependencies": {
"even_hub_sdk": "latest"
"even-better-sdk": "^0.0.8"
}
}
公式SDK + コミュニティSDKの両方を依存に追加

export default
createStandaloneViteConfig(
import.meta.url, 5176)
共有ヘルパーでポート番号を指定するだけ

14.

コード解説 ① 接続 & ページ作成 // 1. import import { EvenBetterSdk } from '@jappyjan/even-better-sdk’ // 2. Bridge接続 await withTimeout( EvenBetterSdk.getRawBridge(), 4000) // 3. SDK初期化 & ページ作成 const sdk = new EvenBetterSdk() const page = sdk.createPage('my-page') 2026/03/18 © 2026 Takahiro Miyaura ○ Step 1 import コミュニティ製SDKを使用公式SDKのラッパーAPIが直感的 ○ Step 2 ブリッジ接続グラスとの通信チャネル確立 4秒タイムアウト付き ○ Step 3 ページ作成描画単位 = ページページにUI要素を追加 14

15.

[beta]

コード解説 ② 描画 & イベント
// 4. テキスト要素を追加
const title = page.addTextElement('Hello, Even G2!')
title.setPosition(p => p.setX(100).setY(80))
.setSize(s => s.setWidth(400))

座標(x,y) + サイズ(w,h)でページ上
にテキスト配置
※576×288pxの座標系

○ Step 5 render()で描画

// 5. グラスに描画
await page.render()

ここで初めてグラスに表示
BLE経由でデータ送信

// 6. リングイベントをリスン
sdk.addEventListener((event) => {
appendEventLog(...)
})

2026/03/18

○ Step 4 テキスト追加

○ Step 6 イベント監視
R1リングのタップ・スクロール操作を受信
markAsEventCaptureElement()
が必要

© 2026 Takahiro Miyaura

15

16.

シミュレータ & 実機デバッグシミュレータで確認実機デバッグ $ ./start-even.sh my-first-app ブラウザに576×288pxの緑色ディスプレイが表示クリック = タップスクロール = R1操作 $ npx evenhub-cli qr ① --web-only でViteサーバー起動 ② QRコード生成 ③ Even Hubアプリでスキャン ④ グラスに表示される！シミュレータ操作対応タップ → クリックダブルタップ → ダブルクリックスクロール上下 → マウスホイール HMRでリアルタイム更新コードを保存するだけでグラスの表示が即座に更新リロード不要！ 2026/03/18 © 2026 Takahiro Miyaura 16

17.

18.

Even G2に通知を飛ばすプラグイン Azure SignalR 等使ってEven G2 に通知を送る＆返信する状態確認通知する何か通知送信表示実行する？ y/n Even G2 2026/03/18 同報送信選択内容送信 © 2026 Takahiro Miyaura Storage アカウント Table Storage 状態更新 Azure SignalR 「通知する何か」は簡単なWebリクエスト投げれば何でもOK 18

19.

まとめ Even G2 いろいろ試してます ○カメラ、スピーカーないシンプルなデバイス ○カメラがないので屋外でも気にせず使える ○開発について ○ Web技術（TypeScript + Vite）で開発可能 ○ even-devクローンですぐ開発開始 ○ サンプルのプラグインも入ってます ○ even-better-sdkで直感的にグラス描画 ○ シミュレータ + QRコードで実機デバッグ 2026/03/18 © 2026 Takahiro Miyaura 19

20.

https://zenn.dev/miyaura/articles/eveng2

21.