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
Messaging APIのメッセージオブジェクトを検証できるChrome拡張機能を作った話
Search
tokku5552
January 24, 2023
Technology
1
70
Messaging APIのメッセージオブジェクトを検証できるChrome拡張機能を作った話
Messaging APIのメッセージオブジェクトを検証できるChrome拡張機能を作った話
tokku5552
January 24, 2023
Tweet
Share
More Decks by tokku5552
See All by tokku5552
Google CloudとAWSのコンテナ実行環境比較
tokku5552
0
99
高スループット・低レイテンシを実現する技術
tokku5552
3
3.1k
AWS CDKのススメ
tokku5552
1
350
FlutterにLINEログインを仕込んで通知メッセージを送る
tokku5552
2
710
AWS CDK × Reactでliffをつくる
tokku5552
1
360
Flutterで単体テストを行う方法とGitHub Actionsを使った自動化
tokku5552
1
77
ネットワーク基礎 - WEBページが表示されるまで
tokku5552
1
180
インフラエンジニアのお仕事(オンプレ)
tokku5552
0
85
hooks riverpod + state notifier + freezed でのドメイン駆動設計
tokku5552
0
280
Other Decks in Technology
See All in Technology
Microsoft for Startups Founders Hub_20240429 update
daikikanemitsu
1
2.4k
地理空間データ可視化・解析・活用ソリューション Pacific Spatial Solutions (PSS)
pacificspatialsolutions
0
330
データベース02: データベースの概念
trycycle
0
180
JAWS-UG Bedrock Claude Night
yamahiro
3
690
Grafana x PagerDuty Better Together
jacopen
1
250
【基本】データベース設計
oracle4engineer
PRO
2
150
Cypress or Playwright?
rainerhahnekamp
0
170
MLOpsの「壁」を乗り越える、LINEヤフーの Data Quality as Code
lycorptech_jp
PRO
8
620
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
330
How to Lead? Testimonial of a Lead Android Engineer
oleur
1
110
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
270
.NET Profiler in 2024.
kkamegawa
2
930
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
91
13k
Teambox: Starting and Learning
jrom
128
8.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
In The Pink: A Labor of Love
frogandcode
138
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
38
2.5k
Debugging Ruby Performance
tmm1
70
11k
Stop Working from a Prison Cell
hatefulcrawdad
267
19k
A designer walks into a library…
pauljervisheath
201
23k
How GitHub (no longer) Works
holman
305
140k
The Cult of Friendly URLs
andyhume
74
5.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Transcript
Messaging APIのメッセージオブジェク トを検証できるChrome拡張機能を作っ た話 LINEDC 新年LT会 2023/1/24
自己紹介 とっく(@tokkuu) • ミロゴス株式会社のエンジニア • TypeScript(Node.js/Next.js/AWS CDK) • Flutter/Firebase •
元SIerのインフラエンジニア • 元バンドマン • 2歳の娘のパパ 2
はじめに • このスライドの元ネタ ◦ Reactでサクッとchromeの拡張機能を作る ◦ 【LINE API】Messaging APIのメッセージオブジェクトを検証する APIを試してみた
◦ Next.jsでLINE Messaging APIのバリデーターを作って Chrome拡張で使う • 対象リポジトリ ◦ https://github.com/milogos/validate-line-message-chrome-extension 3
LINE Messaging API LINE Message Validator - Chrome ウェブストア 4
Chrome拡張の作り方 • Google Chromeで使える拡張機能 は自分で開発できる • SPAで作れればなんでもOK (React/Vue/Angular/Flutter Web) •
今回はNext.jsで • ホスティングは不要だが、クライアン トコードは全て公開となる(ブラウザ の保存領域) • ストアへのアップロードはGoogle Developperへの登録が必要です。 ($5くらいかかります) 5
Chrome拡張の作り方 • →のようなポップアップを開くタイプ • next.jsでnext exportして生成した ファイルとmanifest.jsonという拡張 機能の定義ファイルをzipにしてスト アにアップロードする 6
API検証部分 • MessagingAPI検証用エンドポイント に送る関数 • Messaging APIリファレンス | LINE Developers
• 【LINE API】Messaging APIのメッ セージオブジェクトを検証するAPIを 試してみた - Qiita 7
chrome.storage • chrome.storageを使うとブラウザに 情報を保存しておける • 今回は、一度入力したチャネルアク セストークンを記憶させるために使用 • chrome.storage -
Chrome Developers 8
ストアへのアップロード • ストアへのアップロードは mainへマージした タイミングでGitHub Actionsから自動実行 • validate-line-message-chrome-extension /on_merge.yml •
EXTENSION_IDやCLIENT_IDは所定の手 順に沿って実行 • chrome-webstore-upload/How to generate Google API keys.md 9
まとめ • Chrome拡張機能はどなたでも簡単に開発できます。SPAが使えるものであれば ReactでもVueでもOK • LINE APIでOAMから配信したり、ちょっと何かを確かめたいときにサクッとAPI実行 できるようにしておくと良さげ • publicリポジトリにしているのでプルリクお待ちしています!!
◦ https://github.com/milogos/validate-line-message-chrome-extension ご清聴ありがとうございました