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
Zendeskにチケット作るAPI Gatewayだけのフォームバックエンド
Search
Fumiya Osaka
December 23, 2020
Technology
0
120
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
110
JAWS DAYS 2021 サポーターセッション登壇資料
fmyosaka
0
560
我社のGot Shifterまでの道のり 〜そして僕は情シスになった〜
fmyosaka
0
630
ShifterにZendeskに連携する問合せフォームを作ってみる
fmyosaka
0
1.5k
Other Decks in Technology
See All in Technology
元インフラエンジニアに成る / Human Resources to Human Relations
bobtani
4
920
web-application-security
matsuihidetoshi
0
170
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
350
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
障害対応をちょっとずつよくしていくための 演習の作りかた
heleeen
0
220
開発パフォーマンスを最大化するための開発体制
ham0215
2
410
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
170
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
120
エンジニアのキャリアをちょっと楽しくする3本の軸/Three Pillars to Make an Engineer's Career More Enjoyable
kwappa
0
2.7k
Tellus の衛星データを見てみよう #mf_fukuoka
kongmingstrap
0
190
チームでロジカルシンキングに改めて向き合っている話 〜学習環境と実践⽅法〜
sansantech
PRO
3
2.5k
MySQL の SQL クエリチューニングの要所を掴む勉強会
andpad
3
6.4k
Featured
See All Featured
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
121
39k
For a Future-Friendly Web
brad_frost
172
9k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Code Reviewing Like a Champion
maltzj
514
39k
Automating Front-end Workflow
addyosmani
1356
200k
Agile that works and the tools we love
rasmusluckow
325
20k
Faster Mobile Websites
deanohume
299
30k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
How STYLIGHT went responsive
nonsquared
92
4.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Music & Morning Musume
bryan
41
5.6k
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