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
110
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
8.1k
AWS CDKのススメ
tokku5552
1
450
FlutterにLINEログインを仕込んで通知メッセージを送る
tokku5552
2
860
AWS CDK × Reactでliffをつくる
tokku5552
1
480
Flutterで単体テストを行う方法とGitHub Actionsを使った自動化
tokku5552
1
83
ネットワーク基礎 - WEBページが表示されるまで
tokku5552
1
230
インフラエンジニアのお仕事(オンプレ)
tokku5552
0
110
hooks riverpod + state notifier + freezed でのドメイン駆動設計
tokku5552
0
340
Other Decks in Technology
See All in Technology
オープンソースAIとは何か? --「オープンソースAIの定義 v1.0」詳細解説
shujisado
10
1.1k
『Firebase Dynamic Links終了に備える』 FlutterアプリでのAdjust導入とDeeplink最適化
techiro
0
130
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
2
1.7k
OCI Vault 概要
oracle4engineer
PRO
0
9.7k
DynamoDB でスロットリングが発生したとき/when_throttling_occurs_in_dynamodb_short
emiki
0
260
Shopifyアプリ開発における Shopifyの機能活用
sonatard
4
250
BLADE: An Attempt to Automate Penetration Testing Using Autonomous AI Agents
bbrbbq
0
320
CDCL による厳密解法を採用した MILP ソルバー
imai448
3
140
プロダクト活用度で見えた真実 ホリゾンタルSaaSでの顧客解像度の高め方
tadaken3
0
180
アジャイルでの品質の進化 Agile in Motion vol.1/20241118 Hiroyuki Sato
shift_evolve
0
170
初心者向けAWS Securityの勉強会mini Security-JAWSを9ヶ月ぐらい実施してきての近況
cmusudakeisuke
0
130
CysharpのOSS群から見るModern C#の現在地
neuecc
2
3.5k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
What's in a price? How to price your products and services
michaelherold
243
12k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
Adopting Sorbet at Scale
ufuk
73
9.1k
Rails Girls Zürich Keynote
gr2m
94
13k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
100
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370
The World Runs on Bad Software
bkeepers
PRO
65
11k
Designing for Performance
lara
604
68k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
What's new in Ruby 2.0
geeforr
343
31k
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 ご清聴ありがとうございました