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
PHPerライフをChrome拡張開発でちょっと便利に / PR TIMES x DMM.com
Search
meihei
February 28, 2024
Programming
1
410
PHPerライフをChrome拡張開発でちょっと便利に / PR TIMES x DMM.com
meihei
February 28, 2024
Tweet
Share
More Decks by meihei
See All by meihei
QRコードを学んで遊ぼう / php-study-177
meihei3
0
85
改めて学ぶ Trait の使い方 / phpcon odawara 2025
meihei3
1
1.1k
List とは何か? / PHPerKaigi 2025
meihei3
0
1.3k
WebアプリケーションにおけるPDOの使い方入門 / phpcon odawara 2024
meihei3
3
2.2k
ファイルを選択してZIPダウンロードする機能ってどうやって作るの? / phpcondo 2023
meihei3
1
730
New Relic CodeStreamを 使って、エラーを 加速的迅速に改修しよう! #NRUG Vol.8
meihei3
0
400
PHP8.2から見る、2つの配列 / PHP Conference Japan 2023
meihei3
0
2.2k
良いコードを書く 〜10年後のPR TIMESを作る〜 / LT会 in #PRTIMES_HACKATHON 2023
meihei3
2
250
月に一度の大規模リファクタリングでレガシーコードと向き合う取り組み / PHP Conference Fukuoka 2023
meihei3
4
1.1k
Other Decks in Programming
See All in Programming
CSC305 Lecture 08
javiergs
PRO
0
280
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
140
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
340
SODA - FACT BOOK(JP)
sodainc
1
8.9k
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
aoseyuu
2
730
Claude Agent SDK を使ってみよう
hyshu
0
1.4k
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
940
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.6k
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
210
技術的負債の正体を知って向き合う
irof
0
270
Blazing Fast UI Development with Compose Hot Reload (droidcon London 2025)
zsmb
0
200
開発組織の戦略的な役割と 設計スキル向上の効果
masuda220
PRO
10
1.7k
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
640
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Transcript
PHPerライフを Chrome拡張開発で ちょっと便利に 株式会社PR TIMES x 合同会社DMM.com 合同勉強会
株式会社PR TIMES Backend Engineer (PHP/Python/Go) X: @app1e_s GitHub: @meihei3 Bluesky:
@meihei.bsky.social 直近の登壇 meihei / 江間 洋平 自己紹介 2
はい、
はい、私はPHPerです。
PHPerとは • PHPを書いているエンジニア
PHPerとは • PHPを書いているエンジニア • そうです!私はフロントエンドエンジニアでは ありません!
PHPerとは • PHPを書いているエンジニア • そうです!私はフロントエンドエンジニアでは ありません! • なので、お手柔らかにお聞きください!
作ったもの
Run on PHP Playground • php.net 上のサンプルコードを php-play.dev で実行 できるボタンが追加される
Chrome 拡張機能です 9
デモ https://www.php.net/manual/en/function.var-dump
作ったモチベーション
なんで作ったの? • PHPを書いていると php.net を沢山参照する ◦ 実行できると便利だなと感じた ◦ mdnみたいに
None
None
None
None
仕組み
Run on PHP Playground の仕組み 18 php.net php-play.dev ソースコード の抽出
URLの生成
PHP Playground • @glassmonekey さんの個人制作 • PHP で簡単なスニペットの実行と共有ができる ◦ ソースコードは
URL のパラメータに含めている • Go Playground の PHP 版 • WebAssembly で PHP を動かしているので、 とても早い。 19
使った技術
技術詳細 • lz-string: 文字列圧縮ライブラリ、URLの作成に使用 • types/chrome: TSでChrome拡張をつくるための型 • emotion/css: ボタンをつくる時に使用
• vite: バンドラツール • XO: Linter • dependabot: 自動でバージョンアップ 21
技術選定 • lz-string: php-play.devの仕様に合わせるため • types/chrome: Chrome拡張をつくるため • emotion/css: かっこいいから
• vite: かっこいいから • XO: かっこいいから • dependabot: 楽だから 22
実装の詳細
Run on PHP Playground の仕組み 24 php.net php-play.dev ソースコード の抽出
URLの生成
ソースコードの抽出 • わかりやすいクラス名になっていたので取り出し ◦ document.querySelectorAll('div.phpcode code') • 更にその要素の中からコードを正規表現で抽出 ◦ /<\?php[\s\S]+?\?>/g
25
URLの生成 • https://php-play.dev/?c=DwfgDgFmBQD0sAICmAPA hgWzAGyQgxgPYAmS0kYAlgHYBmhAFAJQDcQA&v=8 .3 • c= のパラメータに圧縮されたソースコードが貼られ る ◦
ここを作れば良い 26
情報のキャッチアップと実装について
情報のキャッチアップ • PHP Playground の情報は作者が公開している ◦ https://zenn.dev/glassmonkey/articles/ae6cadef80c6c4 ◦ https://zenn.dev/glassmonkey/articles/74ad10c6501f27 •
開発環境周りは会社と同じものにした ◦ 弊社の開発者ブログを参考 ◦ https://developers.prtimes.jp/2023/12/28/prtimes-frontend-stac k-2023/ 28
実装の進め方について • チュートリアルにちょい足しという形で作成 ◦ 小規模であれば、create-hogehoge-app系のコマンド を使うよりも余計なファイルが増えなくて良い。 ◦ https://developer.chrome.com/docs/extensions/get-started/tutor ial/hello-world •
コードはほぼAI任せ ◦ 0 -> 1 の状態では ChatGPT に書かせる ◦ 完成を目指す状態では Copilot と共に書く 29
まとめ
まとめ • PHPer でも Chrome 拡張を作れました • Chrome 拡張開発は、「ちょっと便利に」を叶える ことができる
• 情報はインターネットで沢山入手できる • コードはAI任せで書ける(ただし、個人開発なら) 31
付録
ストアに表示する画像もAI作 33
GitHubで公開中です 34
Issue残っています 35