SSSSLIDE

フロントエンドカンファレンス 2017
いわゆる
フロントエンド"がない世界
について考える

「やりたいこと」にだけ
集中できる世の中へ

デモあり版が見たい方はWordPress.tvへ
https://blog.wordpress.tv/2016/10/07/amazon-alexa-wp-rest-api-gui-less-wordpress-application/

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 実行委員長

What is
フロントエンド ?

フロントエンド（英: front-end）とバックエンド
（英: back-end）は、プロセスの最初と最後の工
程を指す一般的用語である。
フロントエンドは各種入力をユーザーから収集し、
バックエンドが使える仕様に合うようにそれを加工
する。フロントエンドとバックエンドの結合部はイ
ンタフェースと呼ばれる。 (出典：Wikipedia)
http://bit.ly/2nh3i5F

フロントエンド（英: front-end）とバックエンド
（英: back-end）は、プロセスの最初と最後の工
程を指す一般的用語である。
フロントエンドは各種入力をユーザーから収集し、
バックエンドが使える仕様に合うようにそれを加工
する。フロントエンドとバックエンドの結合部は
インタフェースと呼ばれる (出典：Wikipedia)
http://bit.ly/2nh3i5F

Graphic User Interface
(GUI)

GUIだけが
フロントエンドではない

http://www.nointerface.com/book/

日本語版
http://amzn.asia/cdAwh8U

Voice User Interface
(VUI)

Google CLOUD SPEECH API
https://cloud.google.com/speech/

Amazon Alexa
https://developer.amazon.com/alexa

音声 <=> コードの変換を行う
https://developer.amazon.com/public/solutions/alexa/alexa-voice-service;

コードで
音声コミュニケーションを
定義する

Voice Interface
使用事例

Capital One
アメリカの銀行
https://www.capitalone.com/

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 /

B A N K & V U I
• カード残高の確認
• 次回引き落とし日の確認
• 先週使った金額は？
• 住宅ローンの元本
• etc…

Expedia
ホテル・飛行機予約サイト
https://www.expedia.co.jp/

h t t p s : / / w w w. e x p e d i a . c o m / a l e x a

T R I P & V U I
• 旅行プランの確認
• フライトプランの確認
• ホテルの予約
• 到着予定時刻の確認
• レンタカーの予約
• etc..
https://viewfinder.expedia.com/features/alexa-ask-
expedia-get-trip-details/

https://youtu.be/bpR7xzr7ipM

DigitalCube Co. Ltd.
VUIを使用したブース展示
https://amimoto-ami.com/
amimoto-ninja/

B O O T H & V U I
• サービスの紹介
• サービスのデモ
• 技術力アピール
• 会話の切り口に
https://viewfinder.expedia.com/features/alexa-ask-
expedia-get-trip-details/

Learn How to Create Automated Business
Workﬂows with kintone & Amazons Alexa Voice
Services at AWS re:Invent 2016
https://blog.kintone.com/aws-reinvent-alexa-voice-services-kintone

ブース展示にAlexaは
想像以上に定番化している

Voice User Interface
アプリを作る

Amazon Alexa Skills Kit
https://developer.amazon.com/alexa

Amazon Lambda
https://aws.amazon.com/jp/lambda/

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

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

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
AW S L A M B D A

GitHubにアプリ作成チュートリアル
https://github.com/alexa

Alexaを使ったシティガイドチュートリアル
https://github.com/alexa/skill-sample-nodejs-city-guide

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

「インテント名 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}
{変数名}という形で変数も定義できる

インテントの定義は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

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
AW S L A M B D A

レスポンステキストは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

npm install alexa-sdk

A W S L a m b d a で動く言語なら
P y t h o n や C # などでも O K

GUI / VUI
その先の話

会話するのも
めんどくさい

Touch User Interface
(TUI)

「押すだけ」で商品が手に入るという体験
https://www.amazon.co.jp/b?node=4752863051

Amazon Dash Button
• 欲しい商品のボタンを購入
• amazonアカウントと連携
• ボタンをクリック
• 商品が届く

vs 通販サイト
• 欲しい商品のボタンを購入 • 商品がなくなる
• amazonアカウントと連携 • PC / スマホを起動
• ボタンをクリック
• 通販サイトにアクセス
• 商品が届く
• 商品を検索する
• 商品をカートに入れる
• 注文する
• 商品が届く

レジの要らないスーパー
https://www.amazon.com/b?node=16008589011

Amazon GO
• アプリを起動
• アプリでバーコードを表示
• ゲートでバーコードをかざす
• 棚から欲しいものをとる
• 要らないものは棚に戻す
• ゲートから出る
• 棚から取ったものだけ課金

Amazonは
GUI以外のアプローチを
着々と増やしている

AWS re:invent 2016
https://reinvent.awsevents.com/

$49.99 × 32,000人

$49.99 × 32,000人
→約1.8億円

The Alexa Fund
https://developer.amazon.com/alexa-fund

Published Alexa Skills
https://www.amazon.com/b?ie=UTF8&node=13727921011

JAWS Days 2017
http://jawsdays2017.jaws-ug.jp/

By: Atsushi Ando

JAWS-UG KOBE Alexa meetup
#06 with InstaVR
https://jaws-ug-kobe.doorkeeper.jp/events/58661

考えるべきこと

GUIはここがダメ！
VUIはここが素晴らしい！

なぜ
GUI以外で
アプローチしたのか？

ブラウザ / アプリを開く手間
vs
情報量 / 操作量

G U I でつらい
V U I でつらい
• ステータスの確認
• 正確な情報の入力
• 決まりきった作業
• 大量の情報のアウトプット
• 「ながら作業」
• 複雑な選択肢

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

ユーザーが
「より簡単」と感じる
インターフェイスを
提供する

GUIはなくならない

ユーザーの体験を
良くするために、
「GUI」以外の
選択肢を手に入れる

「やりたいこと」にだけ
集中できる世の中へ

「付加価値を生まない
重労働から開放する」
仕事をしよう
https://aws.amazon.com/jp/blogs/news/new-user-pools-for-amazon-cognito/

Any Question ?

SSSSLIDE

いわゆる"フロントエンド"がない世界について考える

Hidetaka Okamoto さんの他のスライド

関連するスライド

このスライドの内容

SSSSLIDE