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
400
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
68
改めて学ぶ Trait の使い方 / phpcon odawara 2025
meihei3
1
990
List とは何か? / PHPerKaigi 2025
meihei3
0
1.2k
WebアプリケーションにおけるPDOの使い方入門 / phpcon odawara 2024
meihei3
3
2.1k
ファイルを選択してZIPダウンロードする機能ってどうやって作るの? / phpcondo 2023
meihei3
1
700
New Relic CodeStreamを 使って、エラーを 加速的迅速に改修しよう! #NRUG Vol.8
meihei3
0
390
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
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
610
チームのテスト力を鍛える
goyoki
3
800
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
460
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
Reading Rails 1.0 Source Code
okuramasafumi
0
250
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
2.4k
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
Rancher と Terraform
fufuhu
2
550
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
3.3k
Testing Trophyは叫ばない
toms74209200
0
890
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
RailsConf 2023
tenderlove
30
1.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Become a Pro
speakerdeck
PRO
29
5.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
KATA
mclloyd
32
14k
For a Future-Friendly Web
brad_frost
180
9.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Gamification - CAS2011
davidbonilla
81
5.4k
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