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
140
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
140
JAWS DAYS 2021 サポーターセッション登壇資料
fmyosaka
0
710
我社のGot Shifterまでの道のり 〜そして僕は情シスになった〜
fmyosaka
0
690
ShifterにZendeskに連携する問合せフォームを作ってみる
fmyosaka
0
1.7k
Other Decks in Technology
See All in Technology
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
840
アジリティを高めるテストマネジメント #QiitaQualityForward
makky_tyuyan
1
490
スクラムというコンフォートゾーンから抜け出そう!プロジェクト全体に目を向けるインセプションデッキ / Inception Deck for seeing the whole project
takaking22
3
210
20250307_エンジニアじゃないけどAzureはじめてみた
ponponmikankan
2
220
MIMEと文字コードの闇
hirachan
2
1.5k
Introduction to OpenSearch Project - Search Engineering Tech Talk 2025 Winter
tkykenmt
2
250
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
3
390
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
310
AIエージェント入門
minorun365
PRO
35
20k
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
150
x86-64 Assembly Essentials
latte72
4
630
MLflowはどのようにLLMOpsの課題を解決するのか
taka_aki
0
150
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
A Modern Web Designer's Workflow
chriscoyier
693
190k
How to Ace a Technical Interview
jacobian
276
23k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Designing for humans not robots
tammielis
250
25k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
580
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