Tweet
Tweet

Slide 1

Slide 1 text

PHPerライフを Chrome拡張開発で ちょっと便利に 株式会社PR TIMES x 合同会社DMM.com 合同勉強会

Slide 2

Slide 2 text

株式会社PR TIMES Backend Engineer (PHP/Python/Go) X: @app1e_s GitHub: @meihei3 Bluesky: @meihei.bsky.social 直近の登壇 meihei / 江間 洋平 自己紹介 2

Slide 3

Slide 3 text

はい、　　　　　　　　

Slide 4

Slide 4 text

はい、私はPHPerです。

Slide 5

Slide 5 text

PHPerとは ● PHPを書いているエンジニア

Slide 6

Slide 6 text

PHPerとは ● PHPを書いているエンジニア ● そうです！私はフロントエンドエンジニアでは ありません！

Slide 7

Slide 7 text

PHPerとは ● PHPを書いているエンジニア ● そうです！私はフロントエンドエンジニアでは ありません！ ● なので、お手柔らかにお聞きください！

Slide 8

Slide 8 text

作ったもの

Slide 9

Slide 9 text

Run on PHP Playground ● php.net 上のサンプルコードを php-play.dev で実行 できるボタンが追加される Chrome 拡張機能です 9

Slide 10

Slide 10 text

デモ https://www.php.net/manual/en/function.var-dump

Slide 11

Slide 11 text

作ったモチベーション

Slide 12

Slide 12 text

なんで作ったの？ ● PHPを書いていると php.net を沢山参照する ○ 実行できると便利だなと感じた ○ mdnみたいに

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

仕組み

Slide 18

Slide 18 text

Run on PHP Playground の仕組み 18 php.net php-play.dev ソースコード の抽出 URLの生成

Slide 19

Slide 19 text

PHP Playground ● @glassmonekey さんの個人制作 ● PHP で簡単なスニペットの実行と共有ができる ○ ソースコードは URL のパラメータに含めている ● Go Playground の PHP 版 ● WebAssembly で PHP を動かしているので、 とても早い。 19

Slide 20

Slide 20 text

使った技術

Slide 21

Slide 21 text

技術詳細 ● lz-string: 文字列圧縮ライブラリ、URLの作成に使用 ● types/chrome: TSでChrome拡張をつくるための型 ● emotion/css: ボタンをつくる時に使用 ● vite: バンドラツール ● XO: Linter ● dependabot: 自動でバージョンアップ 21

Slide 22

Slide 22 text

技術選定 ● lz-string: php-play.devの仕様に合わせるため ● types/chrome: Chrome拡張をつくるため ● emotion/css: かっこいいから ● vite: かっこいいから ● XO: かっこいいから ● dependabot: 楽だから 22

Slide 23

Slide 23 text

実装の詳細

Slide 24

Slide 24 text

Run on PHP Playground の仕組み 24 php.net php-play.dev ソースコード の抽出 URLの生成

Slide 25

Slide 25 text

ソースコードの抽出 ● わかりやすいクラス名になっていたので取り出し ○ document.querySelectorAll('div.phpcode code') ● 更にその要素の中からコードを正規表現で抽出 ○ /<\?php[\s\S]+?\?>/g 25

Slide 26

Slide 26 text

URLの生成 ● https://php-play.dev/?c=DwfgDgFmBQD0sAICmAPA hgWzAGyQgxgPYAmS0kYAlgHYBmhAFAJQDcQA&v=8 .3 ● c= のパラメータに圧縮されたソースコードが貼られ る ○ ここを作れば良い 26

Slide 27

Slide 27 text

情報のキャッチアップと実装について

Slide 28

Slide 28 text

情報のキャッチアップ ● 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

Slide 29

Slide 29 text

実装の進め方について ● チュートリアルにちょい足しという形で作成 ○ 小規模であれば、create-hogehoge-app系のコマンド を使うよりも余計なファイルが増えなくて良い。 ○ https://developer.chrome.com/docs/extensions/get-started/tutor ial/hello-world ● コードはほぼAI任せ ○ 0 -> 1 の状態では ChatGPT に書かせる ○ 完成を目指す状態では Copilot と共に書く 29

Slide 30

Slide 30 text

まとめ

Slide 31

Slide 31 text

まとめ ● PHPer でも Chrome 拡張を作れました ● Chrome 拡張開発は、「ちょっと便利に」を叶える ことができる ● 情報はインターネットで沢山入手できる ● コードはAI任せで書ける（ただし、個人開発なら） 31

Slide 32

Slide 32 text

付録

Slide 33

Slide 33 text

ストアに表示する画像もAI作 33

Slide 34

Slide 34 text

GitHubで公開中です 34

Slide 35

Slide 35 text

Issue残っています 35