Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark© 2018, Amazon ...
© 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
今日お話しすることと、お話し...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
アジェンダ
• Amazon...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
The fastest an...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
Amazon Sumeria...
© 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
VR / AR / MR の...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
Amazon Sumeria...
© 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 Sumeria...
© 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
課題:XR に関する専門的な...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
Amazon Sumeria...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
Web ブラウザベースの開発...
© 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
Sumerian Host
...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
他の AWS サービスとの連...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
Amazon Sumeria...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
Amazon Sumeria...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
60 を超えるチュートリアル...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
Slack チャネルによるサ...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark© 2018, Amazon ...
© 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
ユーザーインターフェイスに期...
© 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
チャットボットとの連携実装例...
© 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
「指でなぞったら、それに応じ...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
Amazon Sumeria...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
スクリプトでの実装方法例
v...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
スクリプトでの実装方法例
v...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
Amazon Sumeria...
© 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
デモ(応用編)
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
2 つのデモをご覧いただきま...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
デモ1: デモ内容について
...
© 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
デモ
© 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
センサーデータの取り扱い (...
© 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
センサーデータの取り扱い (...
© 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
センサーデータの取り扱い (...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
LED ディスプレイへのデー...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
LED ディスプレイへのデー...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
LED ディスプレイへのデー...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
LED ディスプレイへのデー...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
デモ2 : デモ内容について...
© 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
アーキテクチャ
音声入力
メ...
© 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
チャットボットの仕組み
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
チャットボットの仕組み(1)...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
チャットボットの仕組み(2)...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
チャットボットの仕組み(3)...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
チャットボットの仕組み(4)...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
チャットボットの仕組み(5)...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
チャットボットの仕組み(6)...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
チャットボットの仕組み(7)...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
チャットボットの仕組み(8)...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
チャットボットの仕組み(9)...
© 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
チャットボットの仕組み(10...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
チャットボットの仕組み(11...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
チャットボットの仕組み(11...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
本セッションのまとめ
• S...
© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark© 2018, Amazon ...
Upcoming SlideShare
Loading in …5
×

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

715 views

Published on

JAWS DAYS 2019 で発表させていただいた資料です

Published in: Technology
  • Be the first to comment

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

  1. 1. © 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
  2. 2. © 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
  3. 3. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark 今日お話しすることと、お話しないこと 1. お話すること 1. Amazon Sumerian の概要 2. UIを構成するための具体的な実装方法 3. デモ 2. お話しないこと 1. UI/UXってこうあるべき的な話や学術的な話
  4. 4. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark アジェンダ • Amazon Sumerian を簡単にご紹介 (10分) • ユーザーインターフェイスとしての利用について(15分) • デモ • Sumerian で Raspberry PI のセンサキットとやり取りしてみよう (10分) • Sumerian でバーチャルコンシェルジュを体験してみよう (10分)
  5. 5. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark The fastest and easiest way to create VR, AR, and 3D experiences
  6. 6. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark Amazon Sumerian の概要
  7. 7. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark
  8. 8. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark VR / AR / MR の定義 最近では、これらをまとめて “Extended Reality (XR)” と呼ぶこともある Augmented Reality (AR) 現実世界に仮想的なものを重ね合わせること Mixed Reality (MR) AR を発展させ、物理と仮想が相互作用するもの Virtual Reality (VR) 完全に仮想現実の世界に没入すること
  9. 9. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark Amazon Sumerian とは? Web ブラウザベースで XR コンテンツを作成し、配信するためのサービス Web ブラウザ ベースの 開発環境 マルチプラットフォーム の利用者環境 Sumerian Host 他の AWS の サービスとの連携
  10. 10. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark 利用可能なリージョン サンパウロ バージニア北部 オハイオ北カリフォルニア オハイオ シドニー フランクフルト ロンドン アイルランド ※2019 / 2 / 1 時点 カナダ中部 パリ ムンバイ シンガポール 東京ソウル ストックホルムリージョン、大阪ローカルリージョンを除くすべてのリージョンで利用可能
  11. 11. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark Amazon Sumerian でかわるもの ? ニーズの不明瞭さ ハードウェアの拡充 XR に関する専門的な知識や技術 利用者の健康面への影響
  12. 12. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark 課題:ニーズの不明瞭さ 利用者に実際に使ってもらいながらニーズを探っていく “Try & Error” しや すい環境を整えることができる 開発者 利用者 変更した後は “Publish”(公開)するだけ コンテンツにアクセスしなおすだけ (アプリケーションのアップデートするという 負担を利用者側に強いない) 継続的なコンテンツの更新 Publish
  13. 13. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark 課題:XR に関する専門的な知識や技術 学習するための豊富なコンテンツや、作成したコンテンツを配信するための インフラは予め用意されている Publish 基本的な操作から他サービスとの連携まで 豊富なチュートリアルをご用意 配信するためのキャパシティプランニ ング含むインフラ準備は不要 コンテンツの作成後は“Publish” ボタンをクリックするだけで公開
  14. 14. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark Amazon Sumerian の特徴 Web ブラウザ ベースの 開発環境 マルチプラットフォーム の利用者環境 Sumerian Host 他の AWS の サービスとの連携
  15. 15. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark 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 描画が行われる
  16. 16. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark マルチプラットフォームの利用者環境 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)
  17. 17. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark Sumerian Host Amazon Polly に連動して口を動かしたりジェスチャを行うキャラクター • 7 人のキャラクター (2019 / 2 / 23 時点) • 衣装のカスタマイズが可能(Adobe Photoshop が必要) • SSML 形式でセリフを記述することで、セリ フに合わせた口の動きやジェスチャを行う • 音声は Amazon Polly で利用できるものは 利用可
  18. 18. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark 他の AWS サービスとの連携 予め組み込まれている AWS SDK を使って、 GUI や Java Script により連携 デバイスシャドウ 1.IoTデバイスから測定値などを AWS に送信 (デバイスシャドウの継続的なUpdate) 2. デバイスシャドウ のステータスを取得 1. 実行可能な権限確認 Federated Identity を設定 3. 取得したステータスを HTML で作成した仮想の ディスプレイに AR で表示 例) AWS IoT との連携 産業機器など IoT デバイス ※表示だけでなく、 デバイスシャドウのステータスを Sumerian からアップデー トすることで、デバイス操作も可
  19. 19. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark Amazon Sumerian のアーキテクチャ AWS Cloud AWS の他のサービス 認証 クライアント https://region-id.sumerian.aws/xxxxxxxxxxxxx.scene 各シーンごとに払い出される上記の形式のURLにアクセスすると、 CloudFront を経由して配信される CloudFront Edge Location Publish すると、シーンが静的コンテンツ として各EdgeLocation に対して配布 される 連携 ※現時点では、Sumerian で利用する CloudFront はサービスに同梱されているため、個別に構築したディスト リビューションをつなぎこむことはできません
  20. 20. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark Amazon Sumerian の学び方
  21. 21. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark 60 を超えるチュートリアル • 基本的な画面操作から他サービスとの連 携まで • 入門から応用を 4 段階でレベル分け • ステップバイステップで操作方法を掲載 • 学習時間を確保しやすいように必要な目 安時間も掲載 [Learn Amazon Sumerian] https://docs.sumerian.amazonaws.com/
  22. 22. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark Slack チャネルによるサービス開発チームや他の開発者との コミュニケーション • Sumerian 開発チームが直接運営 • 躓いたところを質問したり、自分の作品を 披露したり、サービス改善リクエストも受 付 • チャネル加入のために別途契約は不要・ 無償利用可 • コミュニケーションはすべて英語[Slack チャネル] https://amazonsumerian.slack.com/
  23. 23. © 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 ここから本題に入ります
  24. 24. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark ユーザーインターフェイスとしての利用
  25. 25. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark ユーザーインターフェイスに期待すること 見たものをユーザーの直感で操作したい アバターに話しかけたら答えてくれる オブジェクトを指でなぞったら回る ・・・など
  26. 26. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark 「話しかけたら答えてくれる」 録音 受け取った音声を基に処理 話者 Sumerian Lex チャットボット (Amazon Lex) へ音声を渡すためのI/Fとして利用
  27. 27. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark チャットボットとの連携実装例 Sumerian で録音してチャットボットへ渡している
  28. 28. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark 「指でなぞったら、それに応じて反応する」 方法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 だけでなく、ステートマシンを使ってコーディングレスでも実装できる
  29. 29. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark 「指でなぞったら、それに応じて反応する」 方法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 だけでなく、ステートマシンを使ってコーディングレスでも実装できる ディスプレイ全面に対して反応 特定のエンティティに対して反応
  30. 30. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark Amazon 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 だけでなく、ステートマシンを使ってコーディングレスでも実装できる
  31. 31. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark スクリプトでの実装方法例 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) { for (var handle in ctx.evtListeners) { ctx.domElement.removeEventListener(handle, ctx.evtListeners[handle]); } }; マウスで押すと、 “mousedown!” とレスポンスが返る マウスから指を放すと、 “mouseup!” とレスポンスが返る
  32. 32. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark スクリプトでの実装方法例 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) { for (var handle in ctx.evtListeners) { ctx.domElement.removeEventListener(handle, ctx.evtListeners[handle]); } }; エンティティに対して割り当てる
  33. 33. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark Amazon 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 だけでなく、ステートマシンを使ってコーディングレスでも実装できる
  34. 34. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark ステートマシンでの実装例 クリックしたら次のフレームに移動する
  35. 35. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark デモ(応用編)
  36. 36. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark 2 つのデモをご覧いただきます 1.センサー&LED ディスプレイ付き Raspberry Pi を 使って双方向でやりとり 2.Sumerian ホストを使ったバーチャル コンシェルジュ でホテル予約
  37. 37. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark デモ1: デモ内容について 1. Raspberry Pi の LED ディスプレイ付きセンサ キット (Sense Hat) を利用 気温、湿度、気圧 2. ARで表示された仮想コンソールにセンサ情報を 表示 3. コンソールから操作して、Sense Hat のLED ディスプレイに情報を表示 晴れ、曇り、雨をアイコン表示
  38. 38. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark デモのポイント 解像度の高い ディスプレイが無い 入力装置が無い ARによる機能拡張 機器の情報を 様々な形で可視化 AR上のオブジェクトを 経由して機器を操作
  39. 39. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark デモ
  40. 40. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark アーキテクチャ センサデータ用デバイスシャドウ Raspberry Pi 3 + Sense Hat Sumerian センサデータ (気温、湿度、気圧) 天気アイコン用フラグ Cognito サービス認可 LED ディスプレイ用デバイスシャドウ
  41. 41. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark センサーデータの取り扱い (1) センサデータ用デバイスシャドウ Raspberry Pi 3 + Sense Hat { state : { reorted : { temperature : xxxx, pressure : xxxx, humidity : xxxx } } } トピック名: “$aws/things/thing名/shadows/update” シャドウの情報を更新
  42. 42. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark センサーデータの取り扱い (2) AWS SDK と認証情報の初期化
  43. 43. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark センサーデータの取り扱い (3) 1秒ごとに “GetDeviceStatus” のスクリプトを呼び出す
  44. 44. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark センサーデータの取り扱い (4) センサデータ用デバイスシャドウ { state : { reorted : { temperature : xxxx, pressure : xxxx, humidity : xxxx } } } シャドウの情報を取得してくる GetDeviceStatus
  45. 45. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark センサーデータの取り扱い (5) JSON形式のデータからセンサ情報を抜き出して、HTML上に表示
  46. 46. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark LED ディスプレイへのデータ送信 (1) Raspberry Pi 3 + Sense Hat Sumerian 天気アイコン用フラグ LED ディスプレイ用デバイスシャドウ
  47. 47. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark LED ディスプレイへのデータ送信 (2) エンティティをタップするとスクリプトが呼び出される
  48. 48. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark LED ディスプレイへのデータ送信 (3) Sumerian 天気アイコン用フラグ LED ディスプレイ用デバイスシャドウ { state : { reorted : { weather : xxxx } } } トピック名: “$aws/things/thing名/shadows/update” thing をアップデートする
  49. 49. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark LED ディスプレイへのデータ送信 (4) Raspberry Pi 3 + Sense Hat LED ディスプレイ用デバイスシャドウ 毎秒サブスクライブしたデータからお天気アイコ ンに紐づく文字列を抽出し、LEDを表示させる
  50. 50. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark デモ2 : デモ内容について 1. Amazon Lex のチャットボットを利用し たバーチャル コンシェルジュ(ホテル予 約) 2. 後続で DynamoDBに予約情報を保管 したり、SESで予約確認メールを送付 する
  51. 51. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark デモのポイント 入力装置が無い 音声コマンド &可視化 同じことが 音声だけでできる 他のサービスと連携
  52. 52. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark アーキテクチャ 音声入力 メール Sumerian Lex Lambda DynamoDB SES 予約情報の保存 予約内容の通知
  53. 53. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark アーキテクチャ 音声入力 メール Sumerian Lex Lambda DynamoDB SES 予約情報の保存 予約内容の通知 1. Sumerianと Lexの やり取りの部分
  54. 54. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark チャットボットの仕組み
  55. 55. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark チャットボットの仕組み(1) SDKの読み込みや認証情報の取得
  56. 56. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark チャットボットの仕組み(2) ウェルカムメッセージ
  57. 57. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark チャットボットの仕組み(3) ユーザーがスペースキーを押すまで待つ
  58. 58. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark チャットボットの仕組み(4) キーを押している間だけ録音
  59. 59. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark チャットボットの仕組み(5) 録音が終わったデータをLexに渡す
  60. 60. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark チャットボットの仕組み(6) レスポンスに応じてLexが回答し、 Sumerian Hostが話す
  61. 61. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark チャットボットの仕組み(7) Lex が返したレスポンスをユーザーの入力情報として HTMLを通じて都度画面表示する
  62. 62. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark チャットボットの仕組み(8) 一連の処理が終わると Lex のレスポンスの “dialogState” が “Fulfilled” になる
  63. 63. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark チャットボットの仕組み(9) スクリプトがレスポンス中の “Fulfilled” を確認したら “CONFIRMED!” を画面表示する
  64. 64. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark アーキテクチャ 音声入力 メール Sumerian Lex Lambda DynamoDB SES 予約情報の保存 予約内容の通知 2. Lex が後続サービスを 呼び出す部分
  65. 65. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark チャットボットの仕組み(10) 一連の処理が終わると Lex が Lambda を呼び出す
  66. 66. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark チャットボットの仕組み(11) SESでメール送信 DynamoDB へ書き込み
  67. 67. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark チャットボットの仕組み(11) 最終処理後のレスポンスを Lambda が生成して Lex に渡して終了
  68. 68. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential and Trademark 本セッションのまとめ • Sumerian を利用することで、キーボード入力とは違い、ユーザーが直感的に操 作可能な環境を作ることができます • 他のサービスとも連携することで、単なる VR / AR コンテンツを作成するサービ スとしてだけではなく、Sumerian を起点にした新たなユーザー体験を生むサー ビスを構築することができます
  69. 69. © 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 Thank you!

×