Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Zendeskにチケット作るAPI Gatewayだけのフォームバックエンド
Fumiya Osaka
December 23, 2020
Technology
0
72
Zendeskにチケット作るAPI Gatewayだけのフォームバックエンド
2020/12/23開催の
JAWS-UG KANSAI 歳末スペシャル SHIWA-SU!
のLT資料です!
Fumiya Osaka
December 23, 2020
Tweet
Share
More Decks by Fumiya Osaka
See All by Fumiya Osaka
SaaSインテグレータのプリセから見たAWS
fmyosaka
1
75
JAWS DAYS 2021 サポーターセッション登壇資料
fmyosaka
0
300
我社のGot Shifterまでの道のり 〜そして僕は情シスになった〜
fmyosaka
0
410
ShifterにZendeskに連携する問合せフォームを作ってみる
fmyosaka
0
1k
Other Decks in Technology
See All in Technology
リファインメントは楽しいかね?
kitamu_mu
1
530
SlackBotで あらゆる業務を自動化。問い合わせ〜DevOpsまで #CODT2022
kogatakanori
0
930
LINEのB2Bプラットフォームにおけるトラブルシューティング2選
line_developers
PRO
4
300
モブに早く慣れたい人のためのガイド / A Guide to Getting Started Quickly with Mob Programming
cybozuinsideout
PRO
2
1.9k
誰が正解を知っているのか / Who knows the right answer
takaking22
1
250
データエンジニアと作るデータ文化
yuki_saito
4
1.7k
DeepL の用語集が(いつのまにか)日本語に対応してたので試してみた
irokawah0
0
170
Custom AppをIP制限ありのままで審査に通す方法
yusuga
0
690
Strategyパターン
hankehly
0
150
UWBを使ってみた
norioikedo
0
430
組織の崩壊と再生、その中で何を考え、感じたのか。 そして本当に必要だったもの
kosako
10
4.4k
Modern Android dependency injection
hugovisser
1
130
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
Infographics Made Easy
chrislema
233
17k
Building Better People: How to give real-time feedback that sticks.
wjessup
344
17k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
920
WebSockets: Embracing the real-time Web
robhawkes
57
5.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
Happy Clients
brianwarren
89
5.6k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
127
8.5k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
Art, The Web, and Tiny UX
lynnandtonic
280
17k
Why Our Code Smells
bkeepers
PRO
324
55k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
269
11k
Transcript
JAWS-UG KANSAI 歳末スペシャル SHIWA-SU! 2020.12.23 株式会社エクレクト 逢坂文哉 Zendeskにチケット作るAPI Gatewayだけのフォームバックエンド
2 自己紹介 逢坂 ⽂哉(おおさか ふみや) 出⾝: ⼤阪市此花区 住まい: 兵庫県⻄宮市 勤務:
なんばのWeWork(無限⽣ビールのためにごくたまに⾏く) 職歴: 出版・印刷業を相⼿にするSIerでSE: 4.3年 AWSとか物理サーバとかApacheの再起動とかを売る営業・プリセ: 5年 エクレクトでZendeskを売る営業・プリセ・ちょっと情シス: 1.25年 ※フロントエンドちゃんとやったことありません... コミュニティ: JAWS-UG Osaka JAWS-UG Sales Cloud Native Kansai 趣味: 映画: スピルバーグとタランティーノと成瀬⺒喜男を敬愛 ⾳楽: すべての踊れる⾳楽を愛しています あとお酒を飲むのが普通の⼈より少しよけいに好きです
3 エクレクトがやってること エクレクトは、Zendeskのオフィシャルパートナーとして、以下のサービスを提供しています。 インプリメント デザイン構築 システム・データ移管 カスタムアプリケーション開発 ソリューション提案 Zendesk Guideを始めとした、
貴社の希望に沿ったデザイン/テン プレート制作依頼 お客様の業務に必要なアプリケーシ ョンの開発、Zendeskと既存 システム連携など 現在利用中のシステムからのデータ移 行/運用移行の支援。CRM/メール配 信システム/基幹システム etc. お客様のビジネス要件に合わせた Zendeskの導入コンサルティング/ サービスの実装依頼 お客様の課題に合わせたZendesk活 用のご提案、日本円でのライセンス 販売代理 Zendeskをプラットフォームとして 活用した、様々なパートナーサービ スのご提供 Zendeskアプリケーション
4 Zendeskって? 複数チャネルからのお問合せや コンタクトを集約しチケット化する コミュニケーション統合プラットフォーム 外部システム連携 アプリケーション ブログのようにメンテナンスしやすい FAQサイト構築ソフトウェア デザインのカスタマイズも自由です
Webサイトなどに簡単に設置できる リアルタイムチャットソフトウェア AIサービスとの連携も可能です コールセンターに必要な様々な機能を 備えた、簡単に構築ができるクラウド 型のコールセンターソフトウェア Zendesk各種製品に蓄積されたデータ を集約し、分析するBIソフトウェア CX全体の測定と改善を可能にします マーケットプレイスからのインストール/ オリジナルアプリケーションの開発によって より使いやすい環境の構築が可能 基幹システム/コミュニケーションシステム 受注管理システム/CRMやSFA 様々なシステムとの連携が可能 各関係部署 カスタマー 無制限のデータ蓄積 Zendeskの製品群は、顧客とオムニチャネルでシームレスにコミュニケーションをするために必要な、あらゆるサービスを提供します。 オペレーター
5 Zendeskにチケット作るAPI Gatewayだけのフォームバックエンド
6 前にこういうLTやりましてん
7 Shifterで作った静的サイトの問合せフォームからZendeskにチケットを作るには? ⽅法①︓代わりの何かsにZendesk宛にメールを送ってもらう ⽅法②︓ ZapierにFormKeepをZendeskに連携してもらう ⽅法③︓API Gateway + LambdaにZendeskのAPIを叩いてもらう ⽅法④︓Zendeskで作った問合せフォームへのリンクを書いちゃう
すぐ試せてお⾦がかからないのは①と④だけどLTとしての⾯⽩みに⽋ける... ⽅法⑤︓FormspreeにZendesk Pluginってのがあるやん︕ 適度な⾯⽩みがありそうだ︕LTのネタはこれにしよう︕w
8 Shifterで作った静的サイトの問合せフォームからZendeskにチケットを作るには? ⽅法①︓代わりの何かsにZendesk宛にメールを送ってもらう ⽅法②︓ ZapierにFormKeepをZendeskに連携してもらう ⽅法③︓API Gateway + LambdaにZendeskのAPIを叩いてもらう ⽅法④︓Zendeskで作った問合せフォームへのリンクを書いちゃう
すぐ試せてお⾦がかからないのは①と④だけどLTとしての⾯⽩みに⽋ける... ⽅法⑤︓FormspreeにZendesk Pluginってのがあるやん︕ 適度な⾯⽩みがありそうだ︕LTのネタはこれにしよう︕w ← 試した結果あんまイケてなかった
9 Shifterで作った静的サイトの問合せフォームからZendeskにチケットを作るには? ⽅法①︓代わりの何かsにZendesk宛にメールを送ってもらう ⽅法②︓ ZapierにFormKeepをZendeskに連携してもらう ⽅法③︓API Gateway + LambdaにZendeskのAPIを叩いてもらう ⽅法④︓Zendeskで作った問合せフォームへのリンクを書いちゃう
すぐ試せてお⾦がかからないのは①と④だけどLTとしての⾯⽩みに⽋ける... ⽅法⑤︓FormspreeにZendesk Pluginってのがあるやん︕ 適度な⾯⽩みがありそうだ︕LTのネタはこれにしよう︕w ← やっぱこっちかな︖
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 結局こうすることになる 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 よー考えたら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 使うZendeskのAPIはこれ ← 認証いらん
14 小学生みたいなSLAの計算をしてみる x = 99.95 x 99.95 = 99.90 =
99.95
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 API Gatewayを作る
17 メソッド作る
18 統合リクエスト設定でHTTPヘッダーとマッピングテンプレートを設定
19 統合リクエスト設定でHTTPヘッダーとマッピングテンプレートを設定(ここで大変苦労する) フォーム Zendeskに投げるjson マッピングテンプレート
20 できた〜! Amazon API Gateway Shifter上のフォーム Request Method: Post Content-Type:
application/x-www-form-urlencoded Request Method: Post Content-Type: application/json
21 こうしたくなる Amazon API Gateway Shifter上のフォーム Request Method: Post Content-Type:
application/x-www-form-urlencoded 完了ページを表⽰ Request Method: Post Content-Type: application/json
22 こうして
23 こうする
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 まとめ VTLでマッピングテンプレート書くのが⾯倒になって、実案件ではLambdaを使うことになりました
26 Thank you