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
120
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
180
高スループット・低レイテンシを実現する技術
tokku5552
3
11k
AWS CDKのススメ
tokku5552
1
470
FlutterにLINEログインを仕込んで通知メッセージを送る
tokku5552
2
930
AWS CDK × Reactでliffをつくる
tokku5552
1
530
Flutterで単体テストを行う方法とGitHub Actionsを使った自動化
tokku5552
1
87
ネットワーク基礎 - WEBページが表示されるまで
tokku5552
1
240
インフラエンジニアのお仕事(オンプレ)
tokku5552
0
140
hooks riverpod + state notifier + freezed でのドメイン駆動設計
tokku5552
0
360
Other Decks in Technology
See All in Technology
Amazon CloudWatch を使って NW 監視を行うには
o11yfes2023
0
170
新卒エンジニアがCICDをモダナイズしてみた話
akashi_sn
2
250
Ops-JAWS_Organizations小ネタ3選.pdf
chunkof
2
170
アセスメントで紐解く、10Xのデータマネジメントの軌跡
10xinc
1
440
クォータ監視、AWS Organizations環境でも楽勝です✌️
iwamot
PRO
1
320
2025-04-24 "Manga AI Understanding & Localization" Furukawa Arata (CyberAgent, Inc)
ornew
1
200
ビジネスとデザインとエンジニアリングを繋ぐために 一人のエンジニアは何ができるか / What can a single engineer do to connect business, design, and engineering?
kaminashi
0
100
3月のAWSアップデートを5分間でざっくりと!
kubomasataka
0
120
意思決定を支える検索体験を目指してやってきたこと
hinatades
PRO
0
180
ElixirがHW化され、最新CPU/GPU/NWを過去のものとする数万倍、高速+超省電力化されたWeb/動画配信/AIが動く日
piacerex
0
150
アジャイル脅威モデリング#1(脅威モデリングナイト#8)
masakane55
3
230
Рекомендации с нуля: как мы в Lamoda превратили главную страницу в ключевую точку входа для персонализированного шоппинга. Данил Комаров, Data Scientist, Lamoda Tech
lamodatech
0
750
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Building Applications with DynamoDB
mza
94
6.3k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Writing Fast Ruby
sferik
628
61k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Adopting Sorbet at Scale
ufuk
76
9.3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Done Done
chrislema
183
16k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.2k
Embracing the Ebb and Flow
colly
85
4.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
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 ご清聴ありがとうございました