PHPerライフをChrome拡張開発でちょっと便利に / PR TIMES x DMM.com

Transcript

1. PHPerライフを Chrome拡張開発で ちょっと便利に 株式会社PR TIMES x 合同会社DMM.com 合同勉強会
2. 株式会社PR TIMES Backend Engineer (PHP/Python/Go) X: @app1e_s GitHub: @meihei3 Bluesky: @meihei.bsky.social 直近の登壇 meihei / 江間 洋平 自己紹介 2
3. はい、　　　　　　　　
4. はい、私はPHPerです。
5. PHPerとは • PHPを書いているエンジニア
6. PHPerとは • PHPを書いているエンジニア • そうです！私はフロントエンドエンジニアでは ありません！
7. PHPerとは • PHPを書いているエンジニア • そうです！私はフロントエンドエンジニアでは ありません！ • なので、お手柔らかにお聞きください！
8. 作ったもの
9. Run on PHP Playground • php.net 上のサンプルコードを php-play.dev で実行 できるボタンが追加される Chrome 拡張機能です 9
10. デモ https://www.php.net/manual/en/function.var-dump
11. 作ったモチベーション
12. なんで作ったの？ • PHPを書いていると php.net を沢山参照する ◦ 実行できると便利だなと感じた ◦ mdnみたいに
17. 仕組み
18. Run on PHP Playground の仕組み 18 php.net php-play.dev ソースコード の抽出 URLの生成
19. PHP Playground • @glassmonekey さんの個人制作 • PHP で簡単なスニペットの実行と共有ができる ◦ ソースコードは URL のパラメータに含めている • Go Playground の PHP 版 • WebAssembly で PHP を動かしているので、 とても早い。 19
20. 使った技術
21. 技術詳細 • lz-string: 文字列圧縮ライブラリ、URLの作成に使用 • types/chrome: TSでChrome拡張をつくるための型 • emotion/css: ボタンをつくる時に使用 • vite: バンドラツール • XO: Linter • dependabot: 自動でバージョンアップ 21
22. 技術選定 • lz-string: php-play.devの仕様に合わせるため • types/chrome: Chrome拡張をつくるため • emotion/css: かっこいいから • vite: かっこいいから • XO: かっこいいから • dependabot: 楽だから 22
23. 実装の詳細
24. Run on PHP Playground の仕組み 24 php.net php-play.dev ソースコード の抽出 URLの生成
25. ソースコードの抽出 • わかりやすいクラス名になっていたので取り出し ◦ document.querySelectorAll('div.phpcode code') • 更にその要素の中からコードを正規表現で抽出 ◦ /<\?php[\s\S]+?\?>/g 25
26. URLの生成 • https://php-play.dev/?c=DwfgDgFmBQD0sAICmAPA hgWzAGyQgxgPYAmS0kYAlgHYBmhAFAJQDcQA&v=8 .3 • c= のパラメータに圧縮されたソースコードが貼られ る ◦ ここを作れば良い 26
27. 情報のキャッチアップと実装について
28. 情報のキャッチアップ • 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
29. 実装の進め方について • チュートリアルにちょい足しという形で作成 ◦ 小規模であれば、create-hogehoge-app系のコマンド を使うよりも余計なファイルが増えなくて良い。 ◦ https://developer.chrome.com/docs/extensions/get-started/tutor ial/hello-world • コードはほぼAI任せ ◦ 0 -> 1 の状態では ChatGPT に書かせる ◦ 完成を目指す状態では Copilot と共に書く 29
30. まとめ
31. まとめ • PHPer でも Chrome 拡張を作れました • Chrome 拡張開発は、「ちょっと便利に」を叶える ことができる • 情報はインターネットで沢山入手できる • コードはAI任せで書ける（ただし、個人開発なら） 31
32. 付録
33. ストアに表示する画像もAI作 33
34. GitHubで公開中です 34
35. Issue残っています 35