SSSSLIDE

このページは https://speakerdeck.com/hideokamoto/iwayuru-hurontoendo-ganaishi-jie-nituitekao-eru の内容を掲載しています。

掲載を希望されないスライド著者の方は、削除申請よりご連絡下さい。

埋込み型プレイヤーを使用せず、常に元のサイトでご覧になりたい方は、自動遷移設定をご利用下さい。

Hidetaka Okamoto さんの他のスライド

もっと見る»

関連するスライド

このスライドの内容

  1. フロントエンドカンファレンス 2017
    いわゆる
    フロントエンド"がない世界
    について考える
  2. 「やりたいこと」にだけ
    集中できる世の中へ
  3. デモあり版が見たい方はWordPress.tvへ
    https://blog.wordpress.tv/2016/10/07/amazon-alexa-wp-rest-api-gui-less-wordpress-application/
  4. Digitalcube Developer
    Hidetaka Okamoto
    • W o r d B e n c h 京 都 モ デ レ ー タ
    • W o r d P r e s s 日 本 語 フ ォ ー ラ ム 世 話 役
    • W o r d C a m p Ky o t o 2 0 1 7 実 行 委 員 長
  5. What is
    フロントエンド ?
  6. フロントエンド（英: front-end）とバックエンド
    （英: back-end）は、プロセスの最初と最後の工
    程を指す一般的用語である。
    フロントエンドは各種入力をユーザーから収集し、
    バックエンドが使える仕様に合うようにそれを加工
    する。フロントエンドとバックエンドの結合部はイ
    ンタフェースと呼ばれる。 (出典：Wikipedia)
    http://bit.ly/2nh3i5F
  7. フロントエンド（英: front-end）とバックエンド
    （英: back-end）は、プロセスの最初と最後の工
    程を指す一般的用語である。
    フロントエンドは各種入力をユーザーから収集し、
    バックエンドが使える仕様に合うようにそれを加工
    する。フロントエンドとバックエンドの結合部は
    インタフェースと呼ばれる (出典：Wikipedia)
    http://bit.ly/2nh3i5F
  8. Graphic User Interface
    (GUI)
  9. Graphic User Interface
    (GUI)
  10. GUIだけが
    フロントエンドではない
  11. http://www.nointerface.com/book/
  12. 日本語版
    http://amzn.asia/cdAwh8U
  13. Voice User Interface
    (VUI)
  14. Google CLOUD SPEECH API
    https://cloud.google.com/speech/
  15. Amazon Alexa
    https://developer.amazon.com/alexa
  16. 音声 <=> コードの変換を行う
    https://developer.amazon.com/public/solutions/alexa/alexa-voice-service;
  19. コードで
    音声コミュニケーションを
    定義する
  20. Voice Interface
    使用事例
  21. Capital One
    アメリカの銀行
    https://www.capitalone.com/
  22. h t t p s : / / w w w. c a p i t a l o n e . c o m / a p p l i c a t i o n s / a l e x a /
  24. B A N K & V U I
    • カード残高の確認
    • 次回引き落とし日の確認
    • 先週使った金額は？
    • 住宅ローンの元本
    • etc…
  26. Expedia
    ホテル・飛行機予約サイト
    https://www.expedia.co.jp/
  27. h t t p s : / / w w w. e x p e d i a . c o m / a l e x a
  28. T R I P & V U I
    • 旅行プランの確認
    • フライトプランの確認
    • ホテルの予約
    • 到着予定時刻の確認
    • レンタカーの予約
    • etc..
    https://viewfinder.expedia.com/features/alexa-ask-
    expedia-get-trip-details/
  29. https://youtu.be/bpR7xzr7ipM
  30. DigitalCube Co. Ltd.
    VUIを使用したブース展示
    https://amimoto-ami.com/
    amimoto-ninja/
  33. B O O T H & V U I
    • サービスの紹介
    • サービスのデモ
    • 技術力アピール
    • 会話の切り口に
    https://viewfinder.expedia.com/features/alexa-ask-
    expedia-get-trip-details/
  35. Learn How to Create Automated Business
    Workflows with kintone & Amazons Alexa Voice
    Services at AWS re:Invent 2016
    https://blog.kintone.com/aws-reinvent-alexa-voice-services-kintone
  36. ブース展示にAlexaは
    想像以上に定番化している
  37. Voice User Interface
    アプリを作る
  38. Amazon Alexa Skills Kit
    https://developer.amazon.com/alexa
  39. Amazon Lambda
    https://aws.amazon.com/jp/lambda/
  40. Ta l k
    R e s p o n c e
    s o m t h i n g
    A u d i o
    A u d i o
    C a p t u r e
    P l a y b a c k
    S p e e c h t o
    Te x t t o
    Te x t
    S p e e c h
    R u n s o m e s c r i p t s
  41. Ta l k
    R e s p o n c e
    s o m t h i n g
    A u d i o
    A u d i o
    C a p t u r e
    P l a y b a c k
    A L E X A S K I L L S K I T
    S p e e c h t o
    Te x t t o
    Te x t
    S p e e c h
    R u n s o m e s c r i p t s
  42. Ta l k
    R e s p o n c e
    s o m t h i n g
    A u d i o
    A u d i o
    C a p t u r e
    P l a y b a c k
    A L E X A S K I L L S K I T
    S p e e c h t o
    Te x t t o
    Te x t
    S p e e c h
    R u n s o m e s c r i p t s
    AW S L A M B D A
  43. GitHubにアプリ作成チュートリアル
    https://github.com/alexa
  44. Alexaを使ったシティガイドチュートリアル
    https://github.com/alexa/skill-sample-nodejs-city-guide
  45. Ta l k
    R e s p o n c e
    s o m t h i n g
    A u d i o
    A u d i o
    C a p t u r e
    P l a y b a c k
    A L E X A S K I L L S K I T
    S p e e c h t o
    Te x t t o
    Te x t
    S p e e c h
    R u n s o m e s c r i p t s
  46. 「インテント名 Alexaへ言う内容」で定義
    getTopFiveIntent tell me top five things to do
    getTopFiveIntent what are the top five things to do
    getTopFiveIntent what I should see
    getAttractionIntent tell me what to do
    getAttractionIntent give me an attraction
    getMoreInfoIntent tell me more about {attraction}
    getMoreInfoIntent open attraction {attraction}
    getMoreInfoIntent open number {attraction}
    {変数名}という形で変数も定義できる
  47. インテントの定義はJSON形式
    {
    "intents": [
    { "intent": "getOverview", "slots": [] },
    { "intent": "getTopFiveIntent", "slots": [] },
    { "intent": "getAttractionIntent", "slots": [] },
    { "intent": "getMoreInfoIntent", "slots": [{ "name":
    "attraction", "type": "AMAZON.NUMBER" }] },
    { "intent": "getNewsIntent", "slots": [] },
    { "intent": "AMAZON.YesIntent", "slots": [] },
    //以下略
    https://github.com/alexa/skill-sample-nodejs-city-guide/blob/master/
    speechAssets/intentSchema.json
  48. Ta l k
    R e s p o n c e
    s o m t h i n g
    A u d i o
    A u d i o
    C a p t u r e
    P l a y b a c k
    S p e e c h t o
    Te x t t o
    Te x t
    S p e e c h
    R u n s o m e s c r i p t s
    AW S L A M B D A
  49. レスポンステキストはNode.jsで生成する
    var Alexa = require('alexa-sdk');
    var http = require('http');
    var location = "Seattle";
    var welcomeMessage = location + " Guide. You can ask me for
    an attraction, the local news, or say help. What will it be?";
    …
    https://github.com/alexa/skill-sample-nodejs-city-guide/blob/master/
    src/index.js
  50. npm install alexa-sdk
  51. A W S L a m b d a で 動 く 言 語 な ら
    P y t h o n や C # な ど で も O K
  52. GUI / VUI
    その先の話
  53. 会話するのも
    めんどくさい
  54. Touch User Interface
    (TUI)
  55. 「押すだけ」で商品が手に入るという体験
    https://www.amazon.co.jp/b?node=4752863051
  56. Amazon Dash Button
    • 欲しい商品のボタンを購入
    • amazonアカウントと連携
    • ボタンをクリック
    • 商品が届く
  57. vs 通販サイト
    • 欲しい商品のボタンを購入 • 商品がなくなる
    • amazonアカウントと連携 • PC / スマホを起動
    • ボタンをクリック
    • 通販サイトにアクセス
    • 商品が届く
    • 商品を検索する
    • 商品をカートに入れる
    • 注文する
    • 商品が届く
  58. レジの要らないスーパー
    https://www.amazon.com/b?node=16008589011
  59. Amazon GO
    • アプリを起動
    • アプリでバーコードを表示
    • ゲートでバーコードをかざす
    • 棚から欲しいものをとる
    • 要らないものは棚に戻す
    • ゲートから出る
    • 棚から取ったものだけ課金
  60. Amazonは
    GUI以外のアプローチを
    着々と増やしている
  61. AWS re:invent 2016
    https://reinvent.awsevents.com/
  64. $49.99 × 32,000人
  65. $49.99 × 32,000人
    →約1.8億円
  66. The Alexa Fund
    https://developer.amazon.com/alexa-fund
  67. Published Alexa Skills
    https://www.amazon.com/b?ie=UTF8&node=13727921011
  68. Published Alexa Skills
    https://www.amazon.com/b?ie=UTF8&node=13727921011
  69. JAWS Days 2017
    http://jawsdays2017.jaws-ug.jp/
  70. By: Atsushi Ando
  72. JAWS-UG KOBE Alexa meetup
    #06 with InstaVR
    https://jaws-ug-kobe.doorkeeper.jp/events/58661
  73. 考えるべきこと
  74. GUIはここがダメ！
    VUIはここが素晴らしい！
  75. GUIはここがダメ！
    VUIはここが素晴らしい！
  76. なぜ
    GUI以外で
    アプローチしたのか？
  77. ブラウザ / アプリを開く手間
    vs
    情報量 / 操作量
  78. G U I で つ ら い
    V U I で つ ら い
    • ステータスの確認
    • 正確な情報の入力
    • 決まりきった作業
    • 大量の情報のアウトプット
    • 「ながら作業」
    • 複雑な選択肢
  79. Alexa が「WordPress」と認識してくれない
    wordpress:
    - the valkyries
    - worth press
    - well press
    - was the price
    - why the press
    - what the press
    - what race
    https://github.com/amimoto-ami/amimoto-amazon-alexa/blob/
    master/data/aliases.yml
  80. ユーザーが
    「より簡単」と感じる
    インターフェイスを
    提供する
  81. GUIはなくならない
  82. ユーザーの体験を
    良くするために、
    「GUI」以外の
    選択肢を手に入れる
  83. 「やりたいこと」にだけ
    集中できる世の中へ
  84. 「付加価値を生まない
    重労働から開放する」
    仕事をしよう
    https://aws.amazon.com/jp/blogs/news/new-user-pools-for-amazon-cognito/
  85. Any Question ?

SSSSLIDE

© 2012-2018 milk1000cc

スライドの著作権は、各スライド作成者に所属します。