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
0
250
PHPerライフをChrome拡張開発でちょっと便利に / PR TIMES x DMM.com
meihei
February 28, 2024
Tweet
Share
More Decks by meihei
See All by meihei
WebアプリケーションにおけるPDOの使い方入門 / phpcon odawara 2024
meihei3
2
600
ファイルを選択してZIPダウンロードする機能ってどうやって作るの? / phpcondo 2023
meihei3
1
310
New Relic CodeStreamを 使って、エラーを 加速的迅速に改修しよう! #NRUG Vol.8
meihei3
0
130
PHP8.2から見る、2つの配列 / PHP Conference Japan 2023
meihei3
0
1.4k
良いコードを書く 〜10年後のPR TIMESを作る〜 / LT会 in #PRTIMES_HACKATHON 2023
meihei3
1
140
月に一度の大規模リファクタリングでレガシーコードと向き合う取り組み / PHP Conference Fukuoka 2023
meihei3
3
900
PHPの配列とデータ構造 / PHPerKaigi 2023
meihei3
2
1.4k
ローンチから16年目のWebサービスに、どうやってフィーチャートグルを導入したか、運用しているか / phpcon2022
meihei3
2
2.8k
PHPerKaigi 2022 スタッフとして参加した
meihei3
0
430
Other Decks in Programming
See All in Programming
It’s about time to pack Ruby and Ruby scripts in one binary
ahogappa0613
0
150
The Final Frontier of Web Development: React Server Components vs Jakarta EE
ivargrimstad
0
280
Amazon Aurora Serverless v2が意外と高かった話と、AWS Database Migration Serviceの話
satoshi256kbyte
1
120
WinActorの勉強を継続する方法
tamai_63
0
130
Documentation testsの恩恵 / Documentation testing benefits
ssssota
1
580
Adding Security to Microcontroller Ruby
sylph01
1
1.7k
Improved REXML XML parsing performance using StringScanner
naitoh
0
120
FoodGram
iseruuuuu
0
230
【2024年度 サイバーエージェント 新卒研修】システム運用の基本と戦略
shuntakahashi
10
5.6k
ts-morphを使ってコードリプレイスとASTへのハードルを下げる!
nyawach
5
340
TSKaigi 2024 - 新サービス Progate Path の演習で TypeScript を採用して見えた教材観点からの利点と課題
makotoshimazu
1
230
JS RPCを理解する
yusukebe
5
320
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
331
56k
Visualization
eitanlees
137
14k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
1
140
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
The Invisible Customer
myddelton
114
12k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Thoughts on Productivity
jonyablonski
60
3.9k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
It's Worth the Effort
3n
180
27k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
22
1.6k
Producing Creativity
orderedlist
PRO
338
39k
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