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
380
PHPerライフをChrome拡張開発でちょっと便利に / PR TIMES x DMM.com
meihei
February 28, 2024
Tweet
Share
More Decks by meihei
See All by meihei
改めて学ぶ Trait の使い方 / phpcon odawara 2025
meihei3
1
900
List とは何か? / PHPerKaigi 2025
meihei3
0
1.1k
WebアプリケーションにおけるPDOの使い方入門 / phpcon odawara 2024
meihei3
3
2k
ファイルを選択してZIPダウンロードする機能ってどうやって作るの? / phpcondo 2023
meihei3
1
650
New Relic CodeStreamを 使って、エラーを 加速的迅速に改修しよう! #NRUG Vol.8
meihei3
0
360
PHP8.2から見る、2つの配列 / PHP Conference Japan 2023
meihei3
0
2.1k
良いコードを書く 〜10年後のPR TIMESを作る〜 / LT会 in #PRTIMES_HACKATHON 2023
meihei3
2
240
月に一度の大規模リファクタリングでレガシーコードと向き合う取り組み / PHP Conference Fukuoka 2023
meihei3
4
1.1k
PHPの配列とデータ構造 / PHPerKaigi 2023
meihei3
3
2k
Other Decks in Programming
See All in Programming
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
710
C++20 射影変換
faithandbrave
0
560
PicoRuby on Rails
makicamel
2
120
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
280
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
420
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
340
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
330
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
140
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
How GitHub (no longer) Works
holman
314
140k
Faster Mobile Websites
deanohume
307
31k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Visualization
eitanlees
146
16k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Statistics for Hackers
jakevdp
799
220k
Speed Design
sergeychernyshev
32
1k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
230
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
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