PHP Playgroundを約1年間運用してみて
こんにちは @glassmonekeyです。
この記事はPHPアドベントカレンダー3 日目の記事です。
今回のエントリーではPHP Playgroundを約 1 年間運用してみて得られた知見を振り返ります。最初は技術スタックでも書こうかなと思ったのですが、こちらのほうが意義のあるエントリになったので。
個人開発をこれから考えられる方やphp/php-srcに commit される方の手助けになれば幸いです。
PHP Playgroundについて
拙作の Wasm 製の PHP Playground です。
現状は先日めだたくリリースを迎えたPHP 8.3がデフォルトで使えるようになっています。
他のマイナーバージョンに関しても私の気が向いたときに適宜ローカルマシンで build してはリリースしています。
技術的詳細は以下の記事にも載せてるので良かったらみてください。
この 1 年間で私物の PC の CPU も x86 から Arm64 に変わりましたが、
難なく運用できているのは Wasm の恩恵を感じますね。
なぜ作ったのか?
元々、私自身 Wasm には「ブラウザで複雑なことをするためのもの」という先入観があったなか、Wasiというバックエンドで活かせる規格をしったことが最初でした。
そのなかで個人的に Wasm を勉強してなにか作ろうと思ってた際に、PHP と Wasm というテーマにで登壇した際に、ブラウザで動く PHP を知りました。
ただ PHP7.4 しか動くものになっておらず、これが色々なバージョンで動けば便利そうだなと感じたことが作ろうと思った一番のきっかけになります。
また、これがTypeScript PlaygroundやGo Playgroundみたいに URL ベースでコード共有ができたら業務でも使えそうだなと思った点もあります。
しかし、それを実現するためには PHP を独自にバージョンごとに build することが必要でしたが、色々build 環境を整えるだけでかなり難航しました。
そのようななか、Client-side WebAssembly WordPressという記事をみかけみてみると、PHP のバージョンと Word Press のバージョンを切り替えてブラウザ完結で動くプロダクトを見つけました。
ここに存在していた Build 用の Docker ファイルが、バージョンごとの依存も吸収してくれていたので、PHP5 系含めて難なく build できました。
おかげでリリースまで至れました。この場を借りてお礼申し上げます。
リリースしたあとの反響
最初の公開がカンファレンスだったこともあり、嬉しい反響は結構ありました。今でも度々アップデートのモチベーション保てるのはそういった FB のおかげです。
とはいえ、それだけだと継続性は保てないと思ったので SEO をある程度頑張りました。
おかげで「PHP Playground」のワードでは Google 検索で１位にあり、かなりユーザー数が増えました。
今では安定して月間 20 万 PV があるサービスになりました。
特にインドネシアからのアクセスが多く、多言語対応する価値は今後増えてくるなと実感を持って思いました。
ユーザ数ベースだと日本からの利用者は全体の 10%ぐらいなので、多言語対応するだけもユーザー数が 10 倍になったとも言えます。
リリース後に取り組んだ内容
収益改善
最初は広告で収益がかせげないか？ と考え、Google アドセンスに申し込んだりしましたが、ペラ 1 のサイトだとコンテンツ不足と機械的に判断されるのかうまくいきませんでした。
そこで審査不要の広告をいれてみたりはしましたが、広告の内容がアダルト気味だったり、そもそも稼げて月 1 円だったのでやめました。
それよりかは寄付を募ったほうが現実的かな？とおもったので寄付ボタンをつけました。おかげさまで、何人かの方に寄付をいただけましたので１年を通して改善できたポイントといえます。
お陰様で、ドメイン維持代と初期の英語の規約生成代は賄えそうなのでありがたい限りです。スポンサーされた方々に関しても改めてお礼を申し上げます。
php-play.devの方でも改めてお礼ページの用意をしたいと思っております。
SEO対策
元々メディアのエンジニアだったということもあり少し注力しました。
特に正規化や検索ワード対策はユーザーの用途から逆算して考えることになるので、ページを今後作る方に対しては参考になるのではないでしょうか?
ページの正規化
URL でシェアできるようにした関係上、PHP コード次第で無限にページが生成されてしまうことになります。その場合その場合重複コンテンツとして判断されてしまい、SEO 的にはネガティブです。
そこで、以下の canonical タグを用いて「https://php-play.dev」に正規化させました。
canonicalタグを設定することで、該当 URL にページの価値を集約させることができます。
<link rel="canonical" href="https://php-play.dev">
また、明示的にクロールをしてもらうためにサイトマップも設置しました。
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://php-play.dev/</loc>
</url>
</urlset>
検索ワード対策
深くは考えず、ツールのコンセプトである「PHP Playgroud」のワード１位をめざしました。
検索クエリのニーズは「Know」「Do」「Go」「Buy」の 4 種類で大きく分類できますが、「PHP Playgound」は「Know」クエリで来るユーザーが多いとも考え、「安心して使える PHP Playground なんだよ」という点をコンセプトに拡充させていきました。
そのコンセプトを該当ワードの上位ページを参考に以下のテキストを拡充させていきました。
- このページは何者なのか。
-> Wasm で作った PHP Playground だからリアルタイムだよ。 - ツールの使い方。
-> エディタで編集すれば良いだけだよ。URL で共有もできるからコードレビューに使ってね!! - ツールを使うことの心配点の解消。
-> Wasm でブラウザ上で動いてるだけだよ。iframe + sandbox 属性を使ってるので安心してつかってね!!
適度な宣伝
SEO では適切に被リンクを取っていくことも大事なので、多少宣伝もしていきました。
-
カンファレンスで宣伝
- 自分の登壇資料にも適宜リンクを乗せる。
- 会社ブログにもリンクを乗せる。
-
awesome-phpにPRを出す。
モバイル対応
あまり使いやすいとはいえないですが、一応モバイル対応もしています。
view port を適切に設定しておくことは重要です。おかげでモバイル対応のクローラーが来てもネガティブな評価にはなりませんでした。
運営者開示
いわゆるE-E-A-T についてと呼ばれるページの品質を表す指標がありますが、
その指標にそって誰が運営しているかを表記するようにしました。
- フッターにTwitter(X)のリンクを乗せる。
- 不具合はissueや DM で連絡してねの旨を乗せる。
機能改善
そんなに多くはないですが、少しずつ対応しています。
PHP 8.3対応
これは私自身、PHP にたまに触れる立場だったというところもあり気軽に PHP の新機能を試す環境が欲しかったという点があります。
この対応の際に PHP を build する際にライブラリのバージョンアップで build が通らなくなるというトラブルに遭遇しました。
原因としては依存しているmusl libcがバージョンアップにより 32bit 系のサポートを切ったことにより、一部マクロが廃止されたことが原因のようでした。
そこで以下のような patch を当てることで build が通るようになりました。
現状これらのパッチは 7.4 以上のすべての build に対して当てないとだめそうなので注意が必要そうです。
この点はWasmのBuildに限った話ではないので、これからphp-srcをbuildされる方はご注意ください。
ローディング対応
処理時間が長引く場合（sleep)やバージョンを切り替えた際に描画が固まらないようにローディング処理を入れました。
本来はサービスワーカー化して別プロセスに逃したほうが良いのですが、時間が足らずできてません…
テキストプレビューの追加
PHP はテンプレートエンジンなので、HTML レンダリングをベースに作ったのですが、コードシェアの利便性を考えた際にテキストプレビューも必要だと FB を受けたので作りました。
UI 上もシンプルに check box の ON/OFF で切り替えられるようにしています。
厳格化モード対応
いわゆる declare(strict_types=1) をコードの最初にいれて動くようにしています。
手抜き対応として作っており、本来は wasm 側で吸収したほうが良い内容を JS 側で対応しています。
そのため、元々は素のHTMLで動いてたものが動かなくなるなど挙動が変化しているので、改めて要望あればいただきたいです。
今後の取り組み
PR いただけると嬉しいところもあるので、考えてるネタを垂れ流しています。
buildの見直し。
1 年である程度は PHP の build と向き合いわかるようになってきたので、ゼロベースで作ってもいいかなとは考えています。
PHP8 系は多分問題なさそう（最悪パッチを当てればなんとかなりそう）だが、9 系に対応できるか?と考えると怪しいのでもし協力してくださる方いたら嬉しいです。
エディタとしての機能改善
先日PHP ユーザーズスラックでも FB をいただきましたが、ダークモード対応やエディタとしての質もあげていきたいなと思っています。
外部リクエスト関連
気軽に API リクエストを試せるように Guzzele は標準搭載したいなーと思ってたりします。
アクセストークンが必要なリクエストなどを URL ベースで管理できると便利だなと思い、個人的に使いたいと思いチャレンジ中です。
PHP curl を wasm に組み込んで build することに苦戦中だったりはします。
中断機能の実現
現状メインプロセス上で PHP を動かしていますが、サービスワーカー上で PHP を動かすようにして、処理の中断など非同期化はパフォーマンス観点でもやりたいなと思ってはいます。
最後に
カンファレンスのデモアプリが始まりでしたが、気がついたら色々方に利用していただき開発者として大変うれしいことになりました。
今後、プライベートの都合で PHP を書く機会は減りそうではありますが、PHP コミュニティの皆さんとの交流は大変好きなので何かしら還元していきたいなとは思っています。
それでは皆さんの@glassmonekeyフォロー、PR 待っています!!寄付も待ってます!!
Discussion