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
94
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
6.7k
AWS CDKのススメ
tokku5552
1
440
FlutterにLINEログインを仕込んで通知メッセージを送る
tokku5552
2
820
AWS CDK × Reactでliffをつくる
tokku5552
1
450
Flutterで単体テストを行う方法とGitHub Actionsを使った自動化
tokku5552
1
80
ネットワーク基礎 - WEBページが表示されるまで
tokku5552
1
230
インフラエンジニアのお仕事(オンプレ)
tokku5552
0
98
hooks riverpod + state notifier + freezed でのドメイン駆動設計
tokku5552
0
320
Other Decks in Technology
See All in Technology
株式会社EventHub・エンジニア採用資料
eventhub
0
2.9k
再考 アクターモデル/ reconsider actor model
ytake
0
360
Classmethod AI Talks(CATs) #1 司会進行スライド(2024.09.19) / classmethod-ai-talks-aka-cats_moderator-slides_vol1_2024-09-19
shinyaa31
0
110
サーバー管理しないサーバーサービスManaged DevOps Pool
kkamegawa
0
130
チームビルディングは"感性"で向き合おう / Team Building with Awareness
kohzas
0
260
Privacy Sandbox on Android / DroidKaigi 2024
7pairs
1
270
プロダクトエンジニアを支えるための開発生産性向上施策
tsukakei
0
140
App Router を実プロダクトで採用して見えてきた勘所をちょっとだけ紹介
marokanatani
1
930
ついに出た!OpenAIの最新モデル「o1」って何がすごいの?
minorun365
PRO
3
1.1k
Road to Single Activity
yurihondo
2
240
QAに対する超個人的な解釈 / Personal Take on QA
toma_sm
1
100
サーバレスでモバイルアプリ開発! NTTコム「ビジネスdアプリ」のアーキテクチャ / The architecture of business d app
nttcom
12
240
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
A Modern Web Designer's Workflow
chriscoyier
691
190k
Automating Front-end Workflow
addyosmani
1365
200k
Why Our Code Smells
bkeepers
PRO
334
56k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
Optimizing for Happiness
mojombo
375
69k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
YesSQL, Process and Tooling at Scale
rocio
167
14k
We Have a Design System, Now What?
morganepeng
48
7.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
24
610
What's in a price? How to price your products and services
michaelherold
242
11k
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 ご清聴ありがとうございました