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
510
FlutterにLINEログインを仕込んで通知メッセージを送る
tokku5552
2
980
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がコード書きすぎ問題にはAIで立ち向かえ
jyoshise
14
10k
Создание мультиагентной системы на базе AI Studio
shwars
0
150
2重リクエスト完全攻略HANDBOOK / Double Request Handbook
shoheimitani
1
1k
【iOSDC Japan 2025】ノーコードアプリプラットフォームを支える Server-Driven UI 〜Block UIアーキテクチャの設計と実装〜
eiji127
1
150
あなたのWebサービスはAIに自動テストしてもらえる?アクセシビリティツリーで読み解く、AIの『視点』
yusukeiwaki
0
200
品質保証に注目したAIプロダクト開発
sansantech
PRO
1
150
CTFのためのKubernetes入門
kyohmizu
2
700
RailsのPostgreSQL 18対応
yahonda
0
170
Swift6.2時代のconcurrencyを考える会
yuukiw00w
0
260
Breaking the Paywall to Build In-App Purchases Securely
sohsatoh
0
440
App Clip 5年史: 萌動と停滞のクロニクル
judau
0
130
爆速でプロダクトをリリースしようと思ったらマイクロフロントエンドを選んでいた
kakehashi
PRO
4
1k
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
224
9.9k
The Cult of Friendly URLs
andyhume
79
6.6k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
RailsConf 2023
tenderlove
30
1.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Speed Design
sergeychernyshev
32
1.1k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
830
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
We Have a Design System, Now What?
morganepeng
53
7.8k
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 ご清聴ありがとうございました