New CX using LINE

2012/2/12 LINE Developer Community
https://classmethod.jp/news/200212-linedev-devcafe/

Transcript

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