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
100
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
140
高スループット・低レイテンシを実現する技術
tokku5552
3
7.8k
AWS CDKのススメ
tokku5552
1
450
FlutterにLINEログインを仕込んで通知メッセージを送る
tokku5552
2
850
AWS CDK × Reactでliffをつくる
tokku5552
1
470
Flutterで単体テストを行う方法とGitHub Actionsを使った自動化
tokku5552
1
82
ネットワーク基礎 - WEBページが表示されるまで
tokku5552
1
230
インフラエンジニアのお仕事(オンプレ)
tokku5552
0
110
hooks riverpod + state notifier + freezed でのドメイン駆動設計
tokku5552
0
330
Other Decks in Technology
See All in Technology
カメラを用いた店内計測におけるオプトインの仕組みの実現 / ai-optin-camera
cyberagentdevelopers
PRO
1
120
チームを主語にしてみる / Making "Team" the Subject
ar_tama
4
310
国土交通省 データコンペ参加者向け勉強会
takehikohashimoto
0
110
Gradle: The Build System That Loves To Hate You
aurimas
2
150
来年もre:Invent2024 に行きたいあなたへ - “集中”と“つながり”で楽しむ -
ny7760
0
470
Forget efficiency – Become more productive without the stress
ufried
0
150
omakaseしないための.rubocop.yml のつくりかた / How to Build Your .rubocop.yml to Avoid Omakase #kaigionrails
linkers_tech
3
740
Aurora_BlueGreenDeploymentsやってみた
tsukasa_ishimaru
1
130
30万人が利用するチャットをFirebase Realtime DatabaseからActionCableへ移行する方法
ryosk7
5
350
新卒1年目が向き合う生成AI事業の開発を加速させる技術選定 / ai-web-launcher
cyberagentdevelopers
PRO
7
1.5k
Figma Dev Modeで進化するデザインとエンジニアリングの協働 / figma-with-engineering
cyberagentdevelopers
PRO
1
430
【若手エンジニア応援LT会】AWS Security Hubの活用に苦労した話
kazushi_ohata
0
170
Featured
See All Featured
Thoughts on Productivity
jonyablonski
67
4.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Making Projects Easy
brettharned
115
5.9k
A designer walks into a library…
pauljervisheath
202
24k
How to Think Like a Performance Engineer
csswizardry
19
1.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Unsuck your backbone
ammeep
668
57k
How STYLIGHT went responsive
nonsquared
95
5.2k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Building Your Own Lightsaber
phodgson
102
6.1k
Bash Introduction
62gerente
608
210k
Writing Fast Ruby
sferik
626
61k
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 ご清聴ありがとうございました