Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
New CX using LINE
Search
cm-nakamura-yuki
February 12, 2020
Programming
0
3.2k
New CX using LINE
2012/2/12 LINE Developer Community
https://classmethod.jp/news/200212-linedev-devcafe/
cm-nakamura-yuki
February 12, 2020
Tweet
Share
More Decks by cm-nakamura-yuki
See All by cm-nakamura-yuki
AWS x LINE - LINE上でサービス提供するとき、AWSはどう使えばいい?
cmnakamura
0
2.5k
Share Target Pickerで実装したいアレコレ
cmnakamura
0
7.8k
Developers.IO 2019 Tokyo Sapporo - 「LINEサービスを活用した新しい顧客体験を創造する」」
cmnakamura
1
1.7k
LINE, LINE Pay, Clovaで実現する新しい顧客体験
cmnakamura
1
1.1k
Other Decks in Programming
See All in Programming
Tauriでネイティブアプリを作りたい
tsucchinoko
0
370
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.2k
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
220
Realtime API 入門
riofujimon
0
150
CSC509 Lecture 13
javiergs
PRO
0
110
CSC509 Lecture 12
javiergs
PRO
0
160
エンジニアとして関わる要件と仕様(公開用)
murabayashi
0
300
最新TCAキャッチアップ
0si43
0
190
色々なIaCツールを実際に触って比較してみる
iriikeita
0
330
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
1.4k
Quine, Polyglot, 良いコード
qnighy
4
650
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
110
Featured
See All Featured
Side Projects
sachag
452
42k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Teambox: Starting and Learning
jrom
133
8.8k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
What's new in Ruby 2.0
geeforr
343
31k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Transcript
> Yuki Nakamura > CX Div. / LINE Solution Architect
20200212 LINE Developer Community New CX using LINE
2 こんにちは 中村 優輝 Yuki Nakamura • Classmethod, Inc. CX
Div. • LINE Solution Architect • Developers.IO Blogger
3 会社概要 オープンな発想と⾼い技術⼒により、すべての⼈々の創造活動に貢献し続ける。 会社名 代表者 設 ⽴ 本 社 拠
点 資本⾦ 従業員 クラスメソッド株式会社 横⽥ 聡 2004年7⽉7⽇ 東京都千代⽥区神⽥佐久間町1丁⽬11番地 産報佐久間ビル8階 東京 / ⼤阪 / 札幌 / 上越 / 福岡 / 那覇 / ベルリン / バンクーバー/ 韓国 / インド 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社認定されています。
4 事業紹介 AWS Mobile Computing Bigdata / AI Omni-Channel IoT
Developers.IO CAFE(R&D) End User / Customer Developers.IO (Media)
5 Classmethod x LINE 「LINE Biz-Solutions Partner Program」の「LINE Account Connect」部⾨にて「Technology
Partner」に認定されました。 LINEミニアプリの先⾏事例として、 「Developers.IO CAFE」を提供しました。
6 本⽇のテーマ LINEDC Showcase: LINEとAWSで作るDevelopers.IO CAFEのレシピ
7 Developers.IO CAFE
8 Developers.IO CAFE • 新しい顧客体験を実現するための実験店舗 • ウォークスルー決済、モバイルオーダー を体験できる • Breaking
Changeに臆することなく、常に新しい技術を最⼤ 限活⽤し新しい顧客体験を実験的に提供し続ける
9 全ての発端 • https://dev.classmethod.jp/etc/amazon-go-tours-2018/
10 Amazon Goに衝撃を受ける
11 ハードとソフトに興味津々
12 スマホでQRをかざして、いつでも履歴を確認
13 やってみなきゃわからん
14 Amazonの⽂化をハック 1. 机上で終わらせない / 評論しない 2. 成功を保証しない 3. 多数の実験と失敗から多くを学ぶ
4. 失敗のコストを最⼩化する 5. 利⽤者に使ってもらいフィードバックを反映 6. 学習済みモデルと優れたソフトが残る 7. 上記を⾼速に繰り返す
15 要件定義⾵のポンチ絵/動画で体験を定義
16 技術検証 • ⼈物追跡(Rekognition)、画像分類(Sagemaker) • センサー(3D LiDAR ToF、重量) • 突合データレーク
/ ロジック • アプリケーション / API
17 Developers.IO CAFEオープンまで – Ph1 ⼩売勉強会でプロトタイプをお披露⽬ 参加者 / メディアに掲載 ⼀⽅で課題も⾒えた。
• いたずら • 複数⼈時の正確性 • 体験スムーズさ etc…
18 発⾒課題を解決するために技術検証 • 体験における様々なものの状態管理 • カメラによるオブジェクト検出 • 測距センサーによる⼿伸ばし検知など…
19 店内モニタリングアプリ開発
20 Developers.IO CAFEオープンまで – Ph2 ⾃社イベントでお披露⽬ 社内の様々な部⾨で総⼒戦 • 画像による推定 •
検出センサーの追加 etc…
21 社内のスーパークリエイターのアサイン • 顧客向けアプリ開発(iOS、Android) • スタッフ向けオーダー管理アプリ(iPad) • デジタルサイネージ(iPod Touch) •
継続的デリバリー環境(CI/CD、Dev/Stg/Prd) • ロゴやグッズのデザイン(ブランドロゴ) • 社内にテスト配信(Test Flight等)
22 全てを1ヶ⽉で展開 • 標準化や正規化よりも顧客体験を重視 • お伺いを⽴てるクライアントは居ない • 実現したい体験から各⾃議論して仕様に落とす • 各⾃勝⼿にオンラインMTG、翌⽇には動作確認
• 社内リリースして全員でテストを繰り返す • 監視システムや動作チェックツールを⾃作
23 Developers.IO CAFEオープン 2019年2⽉12⽇オープン
24 Developers.IO CAFÉリリース当初
25 現在のDevelopers.IO CAFE
26 全員が店舗に集まって様々な意⾒を反映させる 6 $"
!#
27 お客様フィードバック – ⼀例 年配者︓アプリのインストールがわからない 若者︓ブラウザ怖い︕シークレットモード使う 技術者︓iOSとAndroidの⼆重開発ツライ 運営者︓プッシュ通知したい 技術者︓LINEでできたらイイな︖ マーケ︓スーパアプリの波に乗りたい
28 フィードバックを元に顧客接点を再設計・開発 1. Native App 2. Web App + Chat
Order 3. Mini App (LIFF App) + Native App + Web App
29 Chat Order • Messaging API / LINE Pay •
機能削減・4タップで購⼊を実現 • アプリDL必須による顧客離脱を防⽌ • MAU8300万⼈へのリーチ • 様々なツールで1営業⽇で開発完了
30 LINE Bot Designer • UI/UXを簡単に定義できる • 体験動画を作成しすり合わせ • 送信メッセージ⽤JSONが⽣成できる
• LINE Bot Designer
31 Flex Message Simulator • CSS Flexible Boxをベースとした複雑なメッセージの送信が可能 • JSONが複雑化するのでデザインをSimulatorで作成
• JSONをプログラムに組み込み
32 Messaging API • 公式SDKによる開発⼯数削減 • Java, PHP, Go, Perl,
Ruby, Python, Node.js • https://developers.line.biz/ja/docs/messaging- api/line-bot-sdk/
33 LINE Pay • API v3でIP制限が必要なくなった︕ • SDK公式サポートはまだ無い • https://github.com/nkjm/line-pay/
(node.js) • https://pypi.org/project/line-pay/(python)
34 LINE Payを使った注⽂フロー https://pay.line.me/jp/developers/apis/onlineApis?locale=ja_JP
35 Infrastructure • LINE公式アカウントにはHTTP POSTのWebhook(HTTPS)が必要 • 営業時間以外は動かない、スケール時に対応しやすい、管理 メンバーも少ないのでサーバーレス へ •
注⽂・決済などは既存アプリ向けAPIをベースに利⽤
36 AWS Architecture
37 API Gateway • バックエンドサービスの「フロントドア」 • 簡単にAPIの作成、公開、保守、モニタリング、保護 • 最⼤数⼗万の同時APIコールの受け⼊れと処理を取り扱う
38 Lambda • サーバープロビジョニングや管理を考えずにプログラム実⾏ • AWS各サービスをトリガーに設定することも可能 • 今回はAPI GatewayとLambdaを使⽤してバックエンド構築 https://aws.amazon.com/jp/lambda/
39 Mini(LIFF) App • LIFF / LINE Pay / Messaging
API • LINEサービスタブから利⽤可能 • 注⽂UXは損なわずに複雑化
40 LIFF / LINEログイン • LINE上でWebアプリを提供できるプラットフォーム • 外部ブラウザ⽤にLINEログイン対応 • 初期化⽅法の変更
• IDトークン取得(認証サービス︓Auth0との連携のため) • 公式アカウントとの連携サポート • ネイティブアプリとLIFFで前処理を分岐
41 AWS Architecture
42 Cloudfront + S3 • グローバルCDNとオブジェクトストレージでSPA配信 • Amazon Certificate ManagerでHTTPS化(LIFFはHTTPS必須)
• 低レイテンシー・トラフィック対応可能
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として利⽤できます、と説明するとお互いに安⼼感がある」 反響︓声
44 まとめ • 開発を容易にするツール・API・SDKが⽤意されている • ユーザーはよりアクセスしやすく、店舗も誘導しやすい • 決済機能により全てをLINEで完結(LINE Payの伸び次第) •
低コストでローンチできる • LINEサービスは無料で利⽤でき多機能 • サーバーレス アーキテクチャを採⽤しコストを最適化 • スーパーアプリ化の流⾏に乗れるチャンス
45 Appendix – ミニアプリに向けたサービス開発 • Developers. IO CAFEやモバイルアプリをベースに開発 • MOP・EC・会員証等提供予定
• https://classmethod.invisionapp.com/share/2BVUN99765K#/s creens/403710848
46