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
130
Messaging APIのメッセージオブジェクトを検証できるChrome拡張機能を作った話
Messaging APIのメッセージオブジェクトを検証できるChrome拡張機能を作った話
tokku5552
January 24, 2023
Tweet
Share
More Decks by tokku5552
See All by tokku5552
他責思考で考える、EMとICの本音
tokku5552
1
130
Google CloudとAWSのコンテナ実行環境比較
tokku5552
0
200
高スループット・低レイテンシを実現する技術
tokku5552
3
14k
AWS CDKのススメ
tokku5552
1
500
FlutterにLINEログインを仕込んで通知メッセージを送る
tokku5552
2
970
AWS CDK × Reactでliffをつくる
tokku5552
1
540
Flutterで単体テストを行う方法とGitHub Actionsを使った自動化
tokku5552
1
100
ネットワーク基礎 - WEBページが表示されるまで
tokku5552
1
270
インフラエンジニアのお仕事(オンプレ)
tokku5552
0
150
Other Decks in Technology
See All in Technology
DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす
hacusk
1
130
AI時代に非連続な成長を実現するエンジニアリング戦略
sansantech
PRO
2
760
絶対に失敗できないキャンペーンページの高速かつ安全な開発、WINTICKET × microCMS の開発事例
microcms
0
250
Grafana Meetup Japan Vol. 6
kaedemalu
1
170
AIエージェント就活入門 - MCPが履歴書になる未来
eltociear
0
670
「魔法少女まどか☆マギカ Magia Exedra」の必殺技演出を徹底解剖! -キャラクターの魅力を最大限にファンに届けるためのこだわり-
gree_tech
PRO
0
180
Grafana MCPサーバーによるAIエージェント経由でのGrafanaダッシュボード動的生成
hamadakoji
0
690
衝突して強くなる! BLUE GIANTと アジャイルチームの共通点とは ― いきいきと活気に満ちたグルーヴあるチームを作るコツ ― / BLUE GIANT and Agile Teams
naitosatoshi
0
260
まだ間に合う! StrandsとBedrock AgentCoreでAIエージェント構築に入門しよう
minorun365
PRO
9
360
見てわかるテスト駆動開発
recruitengineers
PRO
6
2.2k
実運用で考える PGO
kworkdev
PRO
0
120
プロダクトの成長に合わせたアーキテクチャの段階的進化と成長痛、そして、ユニットエコノミクスの最適化
kakehashi
PRO
1
110
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
284
13k
How GitHub (no longer) Works
holman
315
140k
KATA
mclloyd
32
14k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
RailsConf 2023
tenderlove
30
1.2k
Six Lessons from altMBA
skipperchong
28
4k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
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 ご清聴ありがとうございました