JAWS DAYS 2019 Amazon Sumerian によるユーザーインターフェイスへのアプローチ

© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
アマゾンウェブサービスジャパン株式会社
ソリューションアーキテクト大井友三
Amazon Sumerian による
ユーザーインターフェイスへのアプローチ
JAWS Days 2019

© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
自己紹介
• 大井友三（おおいゆうぞう）
• ソリューションアーキテクト
• 製薬・ヘルスケア業界担当
• SIer (Java)  HW (Virtualization)
 AWS Support  SA
Music (Playing BASS!)
Amazon Sumerian
Amazon WorkSpaces

今日お話しすることと、お話しないこと
1. お話すること
1. Amazon Sumerian の概要
2. UIを構成するための具体的な実装方法
3. デモ
2. お話しないこと
1. UI/UXってこうあるべき的な話や学術的な話

アジェンダ
• Amazon Sumerian を簡単にご紹介 (10分)
• ユーザーインターフェイスとしての利用について(15分)
• デモ
• Sumerian で Raspberry PI のセンサキットとやり取りしてみよう (10分)
• Sumerian でバーチャルコンシェルジュを体験してみよう (10分)

The fastest and easiest way
to create VR, AR, and 3D
experiences

Amazon Sumerian の概要

VR / AR / MR の定義
最近では、これらをまとめて “Extended Reality (XR)” と呼ぶこともある
Augmented Reality (AR)
現実世界に仮想的なものを重ね合わせること
Mixed Reality (MR)
AR を発展させ、物理と仮想が相互作用するもの
Virtual Reality (VR)
完全に仮想現実の世界に没入すること

Amazon Sumerian とは？
Web ブラウザベースで XR コンテンツを作成し、配信するためのサービス
Web ブラウザベースの
開発環境
マルチプラットフォーム
の利用者環境
Sumerian Host 他の AWS の
サービスとの連携

利用可能なリージョン
サンパウロ
バージニア北部
オハイオ北カリフォルニア
オハイオ
シドニー
フランクフルト
ロンドン
アイルランド
※2019 / 2 / 1 時点
カナダ中部
パリ
ムンバイ
シンガポール
東京ソウル
ストックホルムリージョン、大阪ローカルリージョンを除くすべてのリージョンで利用可能

Amazon Sumerian でかわるもの
? ニーズの不明瞭さ
ハードウェアの拡充
XR に関する専門的な知識や技術
利用者の健康面への影響

課題：ニーズの不明瞭さ
利用者に実際に使ってもらいながらニーズを探っていく “Try & Error” しや
すい環境を整えることができる
開発者利用者
変更した後は “Publish”(公開)するだけコンテンツにアクセスしなおすだけ
（アプリケーションのアップデートするという
負担を利用者側に強いない）
継続的なコンテンツの更新
Publish

課題：XR に関する専門的な知識や技術
学習するための豊富なコンテンツや、作成したコンテンツを配信するための
インフラは予め用意されている
Publish
基本的な操作から他サービスとの連携まで
豊富なチュートリアルをご用意
配信するためのキャパシティプランニ
ング含むインフラ準備は不要
コンテンツの作成後は“Publish”
ボタンをクリックするだけで公開

Amazon Sumerian の特徴
Web ブラウザベースの
開発環境
マルチプラットフォーム
の利用者環境
Sumerian Host 他の AWS の
サービスとの連携

Web ブラウザベースの開発環境
専用のソフトウェアのインストールや高性能なハードウェアは不要
開発システム要件
• Windows PC または Mac など
• Chrome または Firefox など WebGL 対応ブラウザ
※ただし、AR の場合は利用者側の端末に専用アプリケー
ションのインストールが必要なため、下記の開発環境が必
要
• iOS 用
• 言語 : Swift 4 以降
• IDE : Xcode 9 以降
• Android 用
• 言語 : Java
• IDE : Android Studio など
※モバイル端末 (iPhone/iPad/Androidなど) での編集は未サポート
WebGL を利用し、JavaScript で 3D 描画が行われる

マルチプラットフォームの利用者環境
WebVR を用いるため、VR ゴーグルなどの専用ハードウェアだけでなく、iOS /
Android や Windows / Mac などでもコンテンツを利用可能
• Mobile browsers
• iOS: Safari (iOS 11 or later)
• Android: Chrome 69 or later
• Desktop browsers
• Firefox 61 or later
• Chrome 69 or later
• VR headsets
• HTC Vive
• Vive Pro
• Oculus Rift
• Oculus Go
• Samsung Gear VR
• Lenovo Mirage Solo
• Google Daydream
• AR platforms
• ARKit (対応デバイス : https://www.apple.com/jp/ios/augmented-reality/)
• ARCore (対応デバイス : https://developers.google.com/ar/discover/supported-devices)

Sumerian Host
Amazon Polly に連動して口を動かしたりジェスチャを行うキャラクター
• 7 人のキャラクター (2019 / 2 / 23 時点)
• 衣装のカスタマイズが可能（Adobe
Photoshop が必要）
• SSML 形式でセリフを記述することで、セリ
フに合わせた口の動きやジェスチャを行う
• 音声は Amazon Polly で利用できるものは
利用可

他の AWS サービスとの連携
予め組み込まれている AWS SDK を使って、 GUI や Java Script により連携
デバイスシャドウ
1.IoTデバイスから測定値などを AWS に送信
(デバイスシャドウの継続的なUpdate) 2. デバイスシャドウのステータスを取得
1. 実行可能な権限確認
Federated Identity を設定
3. 取得したステータスを HTML で作成した仮想の
ディスプレイに AR で表示
例) AWS IoT との連携
産業機器など
IoT デバイス
※表示だけでなく、デバイスシャドウのステータスを Sumerian からアップデー
トすることで、デバイス操作も可

Amazon Sumerian のアーキテクチャ
AWS Cloud
AWS の他のサービス
認証
クライアント
https://region-id.sumerian.aws/xxxxxxxxxxxxx.scene
各シーンごとに払い出される上記の形式のURLにアクセスすると、
CloudFront を経由して配信される
CloudFront
Edge Location
Publish すると、シーンが静的コンテンツ
として各EdgeLocation に対して配布
される
連携
※現時点では、Sumerian で利用する CloudFront
はサービスに同梱されているため、個別に構築したディスト
リビューションをつなぎこむことはできません

Amazon Sumerian の学び方

60 を超えるチュートリアル
• 基本的な画面操作から他サービスとの連
携まで
• 入門から応用を 4 段階でレベル分け
• ステップバイステップで操作方法を掲載
• 学習時間を確保しやすいように必要な目
安時間も掲載
[Learn Amazon Sumerian]
https://docs.sumerian.amazonaws.com/

Slack チャネルによるサービス開発チームや他の開発者との
コミュニケーション
• Sumerian 開発チームが直接運営
• 躓いたところを質問したり、自分の作品を
披露したり、サービス改善リクエストも受
付
• チャネル加入のために別途契約は不要・
無償利用可
• コミュニケーションはすべて英語[Slack チャネル]
https://amazonsumerian.slack.com/

ここから本題に入ります

ユーザーインターフェイスとしての利用

ユーザーインターフェイスに期待すること
見たものをユーザーの直感で操作したい
アバターに話しかけたら答えてくれる
オブジェクトを指でなぞったら回る
・・・など

「話しかけたら答えてくれる」
録音受け取った音声を基に処理
話者
Sumerian Lex
チャットボット (Amazon Lex) へ音声を渡すためのI/Fとして利用

チャットボットとの連携実装例
Sumerian で録音してチャットボットへ渡している

「指でなぞったら、それに応じて反応する」
方法1: スクリプトでの実装 (DOM)
• mousedown : ポインタで押したとき
• mouseup : ポインタを放したとき
• mouseout : ポインタが離れたとき
• mousemove : ポインタでなぞったとき
• touchstart : 画面に触れたとき
• touchend : 画面から指を放したとき
• touchmove : 画面を指でなぞったとき
・・・など
詳細は下記
https://developer.mozilla.org/en-US/docs/Web/Events
方法2: ステートマシンの利用
• Click or tap on entity
• Hover enter
• Hover exit
• Mouse move
• Mouse down or touch start
• Mouse up or touch end
• Moues pressed
• Pick
• Pick and exit
詳細は下記
https://docs.aws.amazon.com/sumerian/latest/userguide/state
machines-controls.html
一般的な Web API だけでなく、ステートマシンを使ってコーディングレスでも実装できる

「指でなぞったら、それに応じて反応する」
・・・など
詳細は下記
• Hover enter
• Hover exit
• Mouse move
• Moues pressed
• Pick
• Pick and exit
詳細は下記
ディスプレイ全面に対して反応特定のエンティティに対して反応

Amazon Sumerian での実現方法について
・・・など
詳細は下記
• Hover enter
• Hover exit
• Mouse move
• Moues pressed
• Pick
• Pick and exit
詳細は下記

スクリプトでの実装方法例
var setup = function(args, ctx) {
ctx.evtListeners = {
mousedown: function(evt) {
console.log('mousedown!', evt);
},
mouseup: function(evt) {
console.log('mouseup!', evt);
}
};
for (var handle in ctx.evtListeners) {
// The canvas element can be reached through ctx.domElement
ctx.domElement.addEventListener(handle, ctx.evtListeners[handle]);
}
};
var cleanup = function(args, ctx) {
ctx.domElement.removeEventListener(handle, ctx.evtListeners[handle]);
}
};
マウスで押すと、 “mousedown!” とレスポンスが返る
マウスから指を放すと、 “mouseup!” とレスポンスが返る

スクリプトでの実装方法例
var setup = function(args, ctx) {
ctx.evtListeners = {
mousedown: function(evt) {
console.log('mousedown!', evt);
},
mouseup: function(evt) {
console.log('mouseup!', evt);
}
};
// The canvas element can be reached through ctx.domElement
ctx.domElement.addEventListener(handle, ctx.evtListeners[handle]);
}
};
var cleanup = function(args, ctx) {
ctx.domElement.removeEventListener(handle, ctx.evtListeners[handle]);
}
};
エンティティに対して割り当てる

ステートマシンでの実装例
クリックしたら次のフレームに移動する

デモ（応用編）

2 つのデモをご覧いただきます
1.センサー&LED ディスプレイ付き Raspberry Pi を
使って双方向でやりとり
2.Sumerian ホストを使ったバーチャルコンシェルジュ
でホテル予約

デモ1: デモ内容について
1. Raspberry Pi の LED ディスプレイ付きセンサ
キット (Sense Hat) を利用
気温、湿度、気圧
2. ARで表示された仮想コンソールにセンサ情報を
表示
3. コンソールから操作して、Sense Hat のLED
ディスプレイに情報を表示
晴れ、曇り、雨をアイコン表示

デモのポイント
解像度の高い
ディスプレイが無い
入力装置が無い
ARによる機能拡張
機器の情報を
様々な形で可視化
AR上のオブジェクトを
経由して機器を操作

デモ

アーキテクチャ
センサデータ用デバイスシャドウ
Raspberry Pi 3
+ Sense Hat
Sumerian
センサデータ
(気温、湿度、気圧)
天気アイコン用フラグ
Cognito
サービス認可
LED ディスプレイ用デバイスシャドウ

センサーデータの取り扱い (1)
Raspberry Pi 3
+ Sense Hat
{
state : {
reorted : {
temperature : xxxx,
pressure : xxxx,
humidity : xxxx
}
}
}
トピック名: “$aws/things/thing名/shadows/update”
シャドウの情報を更新

AWS SDK と認証情報の初期化

1秒ごとに “GetDeviceStatus” のスクリプトを呼び出す

{
state : {
reorted : {
temperature : xxxx,
pressure : xxxx,
humidity : xxxx
}
}
}
シャドウの情報を取得してくる
GetDeviceStatus

JSON形式のデータからセンサ情報を抜き出して、HTML上に表示

LED ディスプレイへのデータ送信 (1)
Raspberry Pi 3
+ Sense Hat
Sumerian

エンティティをタップするとスクリプトが呼び出される

Sumerian
{
state : {
reorted : {
weather : xxxx
}
}
}
トピック名: “$aws/things/thing名/shadows/update”
thing をアップデートする

Raspberry Pi 3
+ Sense Hat
毎秒サブスクライブしたデータからお天気アイコ
ンに紐づく文字列を抽出し、LEDを表示させる

デモ2 : デモ内容について
1. Amazon Lex のチャットボットを利用し
たバーチャルコンシェルジュ（ホテル予
約）
2. 後続で DynamoDBに予約情報を保管
したり、SESで予約確認メールを送付
する

デモのポイント
入力装置が無い
音声コマンド
＆可視化
同じことが
音声だけでできる
他のサービスと連携

音声入力
メール
Sumerian Lex Lambda
DynamoDB
SES
予約情報の保存
予約内容の通知

音声入力
メール
Sumerian Lex Lambda
DynamoDB
SES
1. Sumerianと Lexの
やり取りの部分

チャットボットの仕組み

チャットボットの仕組み(1)
SDKの読み込みや認証情報の取得

ウェルカムメッセージ

ユーザーがスペースキーを押すまで待つ

キーを押している間だけ録音

録音が終わったデータをLexに渡す

レスポンスに応じてLexが回答し、 Sumerian Hostが話す

Lex が返したレスポンスをユーザーの入力情報として
HTMLを通じて都度画面表示する

一連の処理が終わると Lex のレスポンスの “dialogState” が “Fulfilled” になる

スクリプトがレスポンス中の “Fulfilled” を確認したら “CONFIRMED!” を画面表示する

音声入力
メール
Sumerian Lex Lambda
DynamoDB
SES
2. Lex が後続サービスを
呼び出す部分

一連の処理が終わると Lex が Lambda を呼び出す

SESでメール送信 DynamoDB へ書き込み

最終処理後のレスポンスを Lambda が生成して Lex に渡して終了

本セッションのまとめ
• Sumerian を利用することで、キーボード入力とは違い、ユーザーが直感的に操
作可能な環境を作ることができます
• 他のサービスとも連携することで、単なる VR / AR コンテンツを作成するサービ
スとしてだけではなく、Sumerian を起点にした新たなユーザー体験を生むサー
ビスを構築することができます

Thank you!

JAWS DAYS 2019 Amazon Sumerian によるユーザーインターフェイスへのアプローチ

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to JAWS DAYS 2019 Amazon Sumerian によるユーザーインターフェイスへのアプローチ

Similar to JAWS DAYS 2019 Amazon Sumerian によるユーザーインターフェイスへのアプローチ (20)

Recently uploaded

Recently uploaded (8)

JAWS DAYS 2019 Amazon Sumerian によるユーザーインターフェイスへのアプローチ