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
AI時代に非連続な成長を実現するエンジニアリング戦略
sansantech
PRO
3
1k
まだ間に合う! StrandsとBedrock AgentCoreでAIエージェント構築に入門しよう
minorun365
PRO
11
840
実運用で考える PGO
kworkdev
PRO
0
140
AI時代にPdMとPMMはどう連携すべきか / PdM–PMM-collaboration-in-AI-era
rakus_dev
0
270
Flutterでキャッチしないエラーはどこに行く
taiju59
0
210
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
310
「魔法少女まどか☆マギカ Magia Exedra」のグローバル展開を支える、開発チームと翻訳チームの「意識しない協創」を実現するローカライズシステム
gree_tech
PRO
0
500
生成AI時代のデータ基盤
shibuiwilliam
4
3k
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
220
Nstockの一人目エンジニアが 3年間かけて向き合ってきた セキュリティのこととこれから〜あれから半年〜
yo41sawada
0
200
Grafana Meetup Japan Vol. 6
kaedemalu
1
200
BPaaSにおける人と協働する前提のAIエージェント-AWS登壇資料
kentarofujii
0
110
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Facilitating Awesome Meetings
lara
55
6.5k
Balancing Empowerment & Direction
lara
3
610
Code Reviewing Like a Champion
maltzj
525
40k
Producing Creativity
orderedlist
PRO
347
40k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Building Applications with DynamoDB
mza
96
6.6k
Documentation Writing (for coders)
carmenintech
73
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 ご清聴ありがとうございました