Slide 1
Slide 1 text
> Yuki Nakamura
> CX Div. / LINE Solution Architect
20200212 LINE Developer Community
New CX using LINE
Slide 2
Slide 2 text
2
こんにちは
中村 優輝 Yuki Nakamura
• Classmethod, Inc. CX Div.
• LINE Solution Architect
• Developers.IO Blogger
Slide 3
Slide 3 text
3
会社概要
オープンな発想と⾼い技術⼒により、すべての⼈々の創造活動に貢献し続ける。
会社名
代表者
設 ⽴
本 社
拠 点
資本⾦
従業員
クラスメソッド株式会社
横⽥ 聡
2004年7⽉7⽇
東京都千代⽥区神⽥佐久間町1丁⽬11番地
産報佐久間ビル８階
東京 / ⼤阪 / 札幌 / 上越 / 福岡 / 那覇 / ベルリン /
バンクーバー/ 韓国 / インド
100,000,000円
350名（グループ全体、2019年7⽉現在）
事業内容
関連会社
認定
育児⽀援
• クラウド（AWS）に関するコンサルティング、設計、構築、運⽤
• ビッグデータ分析基盤に関するコンサルティング、設計、構築、運⽤
• モバイルアプリケーションに関する企画、デザイン、開発、運営
• オムニチャネル基盤構築サービス「カスタマーストーリー」の企画、開発、運⽤
• ⾳声認識（Amazon Alexa）技術に関するコンサルティング、設計、開発、運⽤
アノテーション株式会社（https://an.classmethod.jp/）
アンダースコア株式会社（https://us.classmethod.jp/）
プリズマティクス株式会社（https://prismatix.jp/）
⼀般事業主⾏動計画 (https://ryouritsu.mhlw.go.jp/hiroba/index.php)
経営理念
クラスメソッドは、5年連続で「AWSプレミアコンサルティングパートナー」に認定されました。
プレミアコンサルティングパートナーは、10,000社を超えるAWSパートナーの中で最も優れた功績を残した企業
が選定されるもので、2017年11⽉時点で世界で67社、⽇本で8社認定されています。
Slide 4
Slide 4 text
4
事業紹介
AWS
Mobile Computing Bigdata / AI Omni-Channel
IoT
Developers.IO CAFE(R&D)
End User / Customer
Developers.IO (Media)
Slide 5
Slide 5 text
5
Classmethod x LINE
「LINE Biz-Solutions Partner
Program」の「LINE Account
Connect」部⾨にて「Technology
Partner」に認定されました。
LINEミニアプリの先⾏事例として、
「Developers.IO CAFE」を提供しました。
Slide 6
Slide 6 text
6
本⽇のテーマ
LINEDC Showcase:
LINEとAWSで作るDevelopers.IO CAFEのレシピ
Slide 7
Slide 7 text
7
Developers.IO CAFE
Slide 8
Slide 8 text
8
Developers.IO CAFE
• 新しい顧客体験を実現するための実験店舗
• ウォークスルー決済、モバイルオーダー を体験できる
• Breaking Changeに臆することなく、常に新しい技術を最⼤
限活⽤し新しい顧客体験を実験的に提供し続ける
Slide 9
Slide 9 text
9
全ての発端
• https://dev.classmethod.jp/etc/amazon-go-tours-2018/
Slide 10
Slide 10 text
10
Amazon Goに衝撃を受ける
Slide 11
Slide 11 text
11
ハードとソフトに興味津々
Slide 12
Slide 12 text
12
スマホでQRをかざして、いつでも履歴を確認
Slide 13
Slide 13 text
13
やってみなきゃわからん
Slide 14
Slide 14 text
14
Amazonの⽂化をハック
1. 机上で終わらせない / 評論しない
2. 成功を保証しない
3. 多数の実験と失敗から多くを学ぶ
4. 失敗のコストを最⼩化する
5. 利⽤者に使ってもらいフィードバックを反映
6. 学習済みモデルと優れたソフトが残る
7. 上記を⾼速に繰り返す
Slide 15
Slide 15 text
15
要件定義⾵のポンチ絵/動画で体験を定義
Slide 16
Slide 16 text
16
技術検証
• ⼈物追跡(Rekognition)、画像分類(Sagemaker)
• センサー(3D LiDAR ToF、重量)
• 突合データレーク / ロジック
• アプリケーション / API
Slide 17
Slide 17 text
17
Developers.IO CAFEオープンまで – Ph1
⼩売勉強会でプロトタイプをお披露⽬
参加者 / メディアに掲載
⼀⽅で課題も⾒えた。
• いたずら
• 複数⼈時の正確性
• 体験スムーズさ etc…
Slide 18
Slide 18 text
18
発⾒課題を解決するために技術検証
• 体験における様々なものの状態管理
• カメラによるオブジェクト検出
• 測距センサーによる⼿伸ばし検知など…
Slide 19
Slide 19 text
19
店内モニタリングアプリ開発
Slide 20
Slide 20 text
20
Developers.IO CAFEオープンまで – Ph2
⾃社イベントでお披露⽬
社内の様々な部⾨で総⼒戦
• 画像による推定
• 検出センサーの追加 etc…
Slide 21
Slide 21 text
21
社内のスーパークリエイターのアサイン
• 顧客向けアプリ開発（iOS、Android）
• スタッフ向けオーダー管理アプリ（iPad）
• デジタルサイネージ（iPod Touch）
• 継続的デリバリー環境（CI/CD、Dev/Stg/Prd）
• ロゴやグッズのデザイン（ブランドロゴ）
• 社内にテスト配信（Test Flight等）
Slide 22
Slide 22 text
22
全てを1ヶ⽉で展開
• 標準化や正規化よりも顧客体験を重視
• お伺いを⽴てるクライアントは居ない
• 実現したい体験から各⾃議論して仕様に落とす
• 各⾃勝⼿にオンラインMTG、翌⽇には動作確認
• 社内リリースして全員でテストを繰り返す
• 監視システムや動作チェックツールを⾃作
Slide 23
Slide 23 text
23
Developers.IO CAFEオープン
2019年2⽉12⽇オープン
Slide 24
Slide 24 text
24
Developers.IO CAFÉリリース当初
Slide 25
Slide 25 text
25
現在のDevelopers.IO CAFE
Slide 26
Slide 26 text
26
全員が店舗に集まって様々な意⾒を反映させる 6
$" !#
Slide 27
Slide 27 text
27
お客様フィードバック – ⼀例
年配者︓アプリのインストールがわからない
若者︓ブラウザ怖い︕シークレットモード使う
技術者︓iOSとAndroidの⼆重開発ツライ
運営者︓プッシュ通知したい
技術者︓LINEでできたらイイな︖
マーケ︓スーパアプリの波に乗りたい
Slide 28
Slide 28 text
28
フィードバックを元に顧客接点を再設計・開発
1. Native App
2. Web App + Chat Order
3. Mini App (LIFF App) + Native App + Web App
Slide 29
Slide 29 text
29
Chat Order
• Messaging API / LINE Pay
• 機能削減・4タップで購⼊を実現
• アプリDL必須による顧客離脱を防⽌
• MAU8300万⼈へのリーチ
• 様々なツールで1営業⽇で開発完了
Slide 30
Slide 30 text
30
LINE Bot Designer
• UI/UXを簡単に定義できる
• 体験動画を作成しすり合わせ
• 送信メッセージ⽤JSONが⽣成できる
• LINE Bot Designer
Slide 31
Slide 31 text
31
Flex Message Simulator
• CSS Flexible Boxをベースとした複雑なメッセージの送信が可能
• JSONが複雑化するのでデザインをSimulatorで作成
• JSONをプログラムに組み込み
Slide 32
Slide 32 text
32
Messaging API
• 公式SDKによる開発⼯数削減
• Java, PHP, Go, Perl, Ruby, Python, Node.js
• https://developers.line.biz/ja/docs/messaging-
api/line-bot-sdk/
Slide 33
Slide 33 text
33
LINE Pay
• API v3でIP制限が必要なくなった︕
• SDK公式サポートはまだ無い
• https://github.com/nkjm/line-pay/ (node.js)
• https://pypi.org/project/line-pay/(python)
Slide 34
Slide 34 text
34
LINE Payを使った注⽂フロー
https://pay.line.me/jp/developers/apis/onlineApis?locale=ja_JP
Slide 35
Slide 35 text
35
Infrastructure
• LINE公式アカウントにはHTTP POSTのWebhook(HTTPS)が必要
• 営業時間以外は動かない、スケール時に対応しやすい、管理
メンバーも少ないのでサーバーレス へ
• 注⽂・決済などは既存アプリ向けAPIをベースに利⽤
Slide 36
Slide 36 text
36
AWS Architecture
Slide 37
Slide 37 text
37
API Gateway
• バックエンドサービスの「フロントドア」
• 簡単にAPIの作成、公開、保守、モニタリング、保護
• 最⼤数⼗万の同時APIコールの受け⼊れと処理を取り扱う
Slide 38
Slide 38 text
38
Lambda
• サーバープロビジョニングや管理を考えずにプログラム実⾏
• AWS各サービスをトリガーに設定することも可能
• 今回はAPI GatewayとLambdaを使⽤してバックエンド構築
https://aws.amazon.com/jp/lambda/
Slide 39
Slide 39 text
39
Mini(LIFF) App
• LIFF / LINE Pay / Messaging API
• LINEサービスタブから利⽤可能
• 注⽂UXは損なわずに複雑化
Slide 40
Slide 40 text
40
LIFF / LINEログイン
• LINE上でWebアプリを提供できるプラットフォーム
• 外部ブラウザ⽤にLINEログイン対応
• 初期化⽅法の変更
• IDトークン取得（認証サービス︓Auth0との連携のため）
• 公式アカウントとの連携サポート
• ネイティブアプリとLIFFで前処理を分岐
Slide 41
Slide 41 text
41
AWS Architecture
Slide 42
Slide 42 text
42
Cloudfront + S3
• グローバルCDNとオブジェクトストレージでSPA配信
• Amazon Certificate ManagerでHTTPS化（LIFFはHTTPS必須）
• 低レイテンシー・トラフィック対応可能
Slide 43
Slide 43 text
43
LINEミニアプリ導⼊の反響
Ø アクセス数︓WEBアクセル○千倍、リリース後1週間は来店も2〜3倍に
Ø 直帰率︓Native app時代は4割程、Mini appになって1〜2割程に（1/2以下）
Ø 登録時間︓ Native app時代は3分程、Mini appになって30秒程に（約1/6）
Ø リピート率︓ Native app時代と⽐較して1.5〜2倍に
反響︓数字
Ø ユーザー
「初回登録＆注⽂、再注⽂も断然楽になった（常連さん）」
「ServiceとしてのMiniアプリが使いやすい為、LINEPayも利⽤したくなる」
Ø スタッフ
「ほとんどのユーザーが⽇常的にLINEを利⽤している為、とにかく案内が楽に
なった。アプリDL不要で登録も早い。」
「LINE内のServiceとして利⽤できます、と説明するとお互いに安⼼感がある」
反響︓声
Slide 44
Slide 44 text
44
まとめ
• 開発を容易にするツール・API・SDKが⽤意されている
• ユーザーはよりアクセスしやすく、店舗も誘導しやすい
• 決済機能により全てをLINEで完結（LINE Payの伸び次第）
• 低コストでローンチできる
• LINEサービスは無料で利⽤でき多機能
• サーバーレス アーキテクチャを採⽤しコストを最適化
• スーパーアプリ化の流⾏に乗れるチャンス
Slide 45
Slide 45 text
45
Appendix – ミニアプリに向けたサービス開発
• Developers. IO CAFEやモバイルアプリをベースに開発
• MOP・EC・会員証等提供予定
• https://classmethod.invisionapp.com/share/2BVUN99765K#/s
creens/403710848
Slide 46
Slide 46 text
46