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
150
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
150
JAWS DAYS 2021 サポーターセッション登壇資料
fmyosaka
0
750
我社のGot Shifterまでの道のり 〜そして僕は情シスになった〜
fmyosaka
0
720
ShifterにZendeskに連携する問合せフォームを作ってみる
fmyosaka
0
1.8k
Other Decks in Technology
See All in Technology
プライベートクラウドでの効率的な証明書配布戦略 / Efficient Certificate Distribution Strategy in Private Cloud
lycorptech_jp
PRO
0
110
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
2
15k
Tech-Verse 2025 Global CTO Session
lycorptech_jp
PRO
0
1.7k
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
810
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
1
15k
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
240
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
1
6.2k
ドメイン特化なCLIPモデルとデータセットの紹介
tattaka
2
580
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
140
OPENLOGI Company Profile
hr01
0
67k
Operating Operator
shhnjk
1
520
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
290
Featured
See All Featured
Producing Creativity
orderedlist
PRO
346
40k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Rails Girls Zürich Keynote
gr2m
94
14k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
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