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
110
Google CloudとAWSのコンテナ実行環境比較
tokku5552
0
180
高スループット・低レイテンシを実現する技術
tokku5552
3
12k
AWS CDKのススメ
tokku5552
1
480
FlutterにLINEログインを仕込んで通知メッセージを送る
tokku5552
2
940
AWS CDK × Reactでliffをつくる
tokku5552
1
540
Flutterで単体テストを行う方法とGitHub Actionsを使った自動化
tokku5552
1
92
ネットワーク基礎 - WEBページが表示されるまで
tokku5552
1
260
インフラエンジニアのお仕事(オンプレ)
tokku5552
0
140
Other Decks in Technology
See All in Technology
[zh-TW] DevOpsDays Taipei 2025 -- Creating Awesome Change in SmartNews!(machine translation)
martin_lover
1
650
Redmineの意外と知らない便利機能 (Redmine 6.0対応版)
vividtone
0
1.2k
Azure Developer CLI と Azure Deployment Environment / Azure Developer CLI and Azure Deployment Environment
nnstt1
1
130
CSSDay, Amsterdam
brucel
0
120
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
740
Contract One Dev Group 紹介資料
sansan33
PRO
0
6k
コードの考古学 〜労務システムから発掘した成長の糧〜
kenta_smarthr
1
1.2k
会社員しながら本を書いてきた知見の共有
sat
PRO
3
690
mnt_data_とは?ChatGPTコード実行環境を深堀りしてみた
icck
0
210
AIの電力問題を概観する
rmaruy
1
210
KMP導⼊において、マネジャーとして考えた事
sansantech
PRO
1
210
MCP Clientを活用するための設計と実装上の工夫
yudai00
1
810
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
7
460
How GitHub (no longer) Works
holman
314
140k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.6k
The Language of Interfaces
destraynor
158
25k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
GraphQLとの向き合い方2022年版
quramy
46
14k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
Code Reviewing Like a Champion
maltzj
523
40k
Designing for Performance
lara
608
69k
KATA
mclloyd
29
14k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
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 ご清聴ありがとうございました