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
Deep Dive into Kotlin Flow
jmatsu
1
340
AI時代のUIはどこへ行く?
yusukebe
18
8.9k
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
860
個人軟體時代
ethanhuang13
0
320
Cache Me If You Can
ryunen344
2
730
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
290
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
160
Navigating Dependency Injection with Metro
zacsweers
3
260
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.6k
1から理解するWeb Push
dora1998
7
1.9k
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
450
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
The Pragmatic Product Professional
lauravandoore
36
6.9k
The Language of Interfaces
destraynor
161
25k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Code Review Best Practice
trishagee
70
19k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Unsuck your backbone
ammeep
671
58k
Git: the NoSQL Database
bkeepers
PRO
431
66k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
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