Zendeskにチケット作るAPI Gatewayだけのフォームバックエンド

2020/12/23開催のJAWS-UG KANSAI 歳末スペシャル SHIWA-SU!のLT資料です！

Transcript

1. JAWS-UG KANSAI 歳末スペシャル SHIWA-SU! 2020.12.23 株式会社エクレクト 逢坂文哉 Zendeskにチケット作るAPI Gatewayだけのフォームバックエンド
2. 2 自己紹介 逢坂 ⽂哉（おおさか ふみや） 出⾝: ⼤阪市此花区 住まい: 兵庫県⻄宮市 勤務: なんばのWeWork（無限⽣ビールのためにごくたまに⾏く） 職歴: 出版・印刷業を相⼿にするSIerでSE: 4.3年 AWSとか物理サーバとかApacheの再起動とかを売る営業・プリセ: 5年 エクレクトでZendeskを売る営業・プリセ・ちょっと情シス: 1.25年 ※フロントエンドちゃんとやったことありません... コミュニティ: JAWS-UG Osaka JAWS-UG Sales Cloud Native Kansai 趣味: 映画: スピルバーグとタランティーノと成瀬⺒喜男を敬愛 ⾳楽: すべての踊れる⾳楽を愛しています あとお酒を飲むのが普通の⼈より少しよけいに好きです
3. 3 エクレクトがやってること エクレクトは、Zendeskのオフィシャルパートナーとして、以下のサービスを提供しています。 インプリメント デザイン構築 システム・データ移管 カスタムアプリケーション開発 ソリューション提案 Zendesk Guideを始めとした、 貴社の希望に沿ったデザイン／テン プレート制作依頼 お客様の業務に必要なアプリケーシ ョンの開発、Zendeskと既存 システム連携など 現在利用中のシステムからのデータ移 行／運用移行の支援。CRM/メール配 信システム/基幹システム etc. お客様のビジネス要件に合わせた Zendeskの導入コンサルティング／ サービスの実装依頼 お客様の課題に合わせたZendesk活 用のご提案、日本円でのライセンス 販売代理 Zendeskをプラットフォームとして 活用した、様々なパートナーサービ スのご提供 Zendeskアプリケーション
4. 4 Zendeskって？ 複数チャネルからのお問合せや コンタクトを集約しチケット化する コミュニケーション統合プラットフォーム 外部システム連携 アプリケーション ブログのようにメンテナンスしやすい FAQサイト構築ソフトウェア デザインのカスタマイズも自由です Webサイトなどに簡単に設置できる リアルタイムチャットソフトウェア AIサービスとの連携も可能です コールセンターに必要な様々な機能を 備えた、簡単に構築ができるクラウド 型のコールセンターソフトウェア Zendesk各種製品に蓄積されたデータ を集約し、分析するBIソフトウェア CX全体の測定と改善を可能にします マーケットプレイスからのインストール/ オリジナルアプリケーションの開発によって より使いやすい環境の構築が可能 基幹システム/コミュニケーションシステム 受注管理システム/CRMやSFA 様々なシステムとの連携が可能 各関係部署 カスタマー 無制限のデータ蓄積 Zendeskの製品群は、顧客とオムニチャネルでシームレスにコミュニケーションをするために必要な、あらゆるサービスを提供します。 オペレーター
5. 5 Zendeskにチケット作るAPI Gatewayだけのフォームバックエンド
6. 6 前にこういうLTやりましてん
7. 7 Shifterで作った静的サイトの問合せフォームからZendeskにチケットを作るには？ ⽅法①︓代わりの何かsにZendesk宛にメールを送ってもらう ⽅法②︓ ZapierにFormKeepをZendeskに連携してもらう ⽅法③︓API Gateway + LambdaにZendeskのAPIを叩いてもらう ⽅法④︓Zendeskで作った問合せフォームへのリンクを書いちゃう すぐ試せてお⾦がかからないのは①と④だけどLTとしての⾯⽩みに⽋ける... ⽅法⑤︓FormspreeにZendesk Pluginってのがあるやん︕ 適度な⾯⽩みがありそうだ︕LTのネタはこれにしよう︕w
8. 8 Shifterで作った静的サイトの問合せフォームからZendeskにチケットを作るには？ ⽅法①︓代わりの何かsにZendesk宛にメールを送ってもらう ⽅法②︓ ZapierにFormKeepをZendeskに連携してもらう ⽅法③︓API Gateway + LambdaにZendeskのAPIを叩いてもらう ⽅法④︓Zendeskで作った問合せフォームへのリンクを書いちゃう すぐ試せてお⾦がかからないのは①と④だけどLTとしての⾯⽩みに⽋ける... ⽅法⑤︓FormspreeにZendesk Pluginってのがあるやん︕ 適度な⾯⽩みがありそうだ︕LTのネタはこれにしよう︕w ← 試した結果あんまイケてなかった
9. 9 Shifterで作った静的サイトの問合せフォームからZendeskにチケットを作るには？ ⽅法①︓代わりの何かsにZendesk宛にメールを送ってもらう ⽅法②︓ ZapierにFormKeepをZendeskに連携してもらう ⽅法③︓API Gateway + LambdaにZendeskのAPIを叩いてもらう ⽅法④︓Zendeskで作った問合せフォームへのリンクを書いちゃう すぐ試せてお⾦がかからないのは①と④だけどLTとしての⾯⽩みに⽋ける... ⽅法⑤︓FormspreeにZendesk Pluginってのがあるやん︕ 適度な⾯⽩みがありそうだ︕LTのネタはこれにしよう︕w ← やっぱこっちかな︖
10. 10 こういうイメージ Amazon API Gateway Shifter上のフォーム AWS Lambda Request Method: Post Content-Type: application/x-www-form-urlencoded Request Method: Post Content-Type: application/json フォームから送られてくる変なデータを Zendesk⽤のJSONに整形
11. 11 結局こうすることになる Amazon API Gateway Shifter上のフォーム AWS Lambda Request Method: Post Content-Type: application/x-www-form-urlencoded Request Method: Post Content-Type: application/json API Gatewayから送られてくるJSONを Zendesk⽤のJSONに整形 フォームから送られてくる変なデータを JSONに整形
12. 12 よー考えたらAPI Gatewayのマッピングテンプレート使えばLambdaいらんのんちゃう？ Amazon API Gateway Shifter上のフォーム Request Method: Post Content-Type: application/x-www-form-urlencoded Request Method: Post Content-Type: application/json フォームから送られてくる変なデータを Zendesk⽤のJSONに整形
13. 13 使うZendeskのAPIはこれ ← 認証いらん
14. 14 小学生みたいなSLAの計算をしてみる x = 99.95 x 99.95 = 99.90 = 99.95
15. 15 やってみる Amazon API Gateway Shifter上のフォーム Request Method: Post Content-Type: application/x-www-form-urlencoded Request Method: Post Content-Type: application/json フォームから送られてくる変なデータを Zendesk⽤のJSONに整形
16. 16 API Gatewayを作る
17. 17 メソッド作る
18. 18 統合リクエスト設定でHTTPヘッダーとマッピングテンプレートを設定
19. 19 統合リクエスト設定でHTTPヘッダーとマッピングテンプレートを設定（ここで大変苦労する） フォーム Zendeskに投げるjson マッピングテンプレート
20. 20 できた〜！ Amazon API Gateway Shifter上のフォーム Request Method: Post Content-Type: application/x-www-form-urlencoded Request Method: Post Content-Type: application/json
21. 21 こうしたくなる Amazon API Gateway Shifter上のフォーム Request Method: Post Content-Type: application/x-www-form-urlencoded 完了ページを表⽰ Request Method: Post Content-Type: application/json
22. 22 こうして
23. 23 こうする
24. 24 できた！ Amazon API Gateway Shifter上のフォーム Request Method: Post Content-Type: application/x-www-form-urlencoded 完了ページを表⽰（308でそのままpostデータ戻すのもできるよ〜） Request Method: Post Content-Type: application/json
25. 25 まとめ VTLでマッピングテンプレート書くのが⾯倒になって、実案件ではLambdaを使うことになりました
26. 26 Thank you