個人でWebラボを作り始めたら技術スタックが迷子になった
個人でWebサイトを作り始めたとき、そんなに大げさなことをするつもりはありませんでした。
HTML、CSS、JavaScriptを使って、ちょっとした実験や思いつきを置いておく。
そのくらいのつもりでした。
ところが続けているうちに、
- ブラウザゲーム
- e-Gov法令API
- プロンプト生成
- 生成AI画像のプロンプト研究
- ピアノ
- ボイスチェンジャー
- 周波数・倍音解析
まで触ることになりました。
さらに気が付くと、404、canonical、OG、JSON-LD、sitemap、robots.txt、アクセス解析、共通ナビゲーションまで整備していました。
完全に技術スタックが迷子です。
そんな個人Webラボが Neko3SE LAB です。
この記事ではサイトそのものを紹介するというより、
「ブラウザでいろいろ試していたら、なぜこうなったのか」
を振り返ってみます。
最初からテーマを決めていたわけではない
Neko3SE LABには、一見するとあまり関連性のないコンテンツがあります。
あるページでは法律を検索しています。
別のページではマイクから音を拾っています。
別のページではピアノが鳴ります。
そして別の場所には「本番サーバー神社」があります。
統一感がありません。
ただ、作り続けるうちに、一つだけ共通点があることに気付きました。
ブラウザだけで、どこまでできるのか。
これです。
特定のジャンルを研究するというより、Webブラウザそのものを実験器具として使う。
そう考えると、少しだけ筋が通ります。
まず「無駄」なものを本気で作った
その考え方が一番分かりやすく出ているのが、
「AI駆動型非生産的Web技術研究所。」
というコンテンツです。
名前からして役に立つ気がありません。
中には、
- 絶対押すな
- 定時退社DEFENSE
- 稟議ハンコ
- 無限インシデント
- Excel方眼紙クラフト
- バグ供養寺
- 会議脱出
- 本番サーバー神社
といったミニゲームがあります。
内容だけを見ると完全にネタです。
ただ、作る側から見ると意外と実験項目があります。
ボタン操作、状態管理、アニメーション、音、画面サイズへの追従、スマートフォン操作など、Web UIの基本要素が一通り入っています。
「実用的なアプリを作る」と考えると少し構えてしまいますが、
くだらないものを本気で作る
というルールにすると、技術を試すハードルがかなり下がりました。
その次に、なぜか法律へ行った
次に作ったものの一つが、
e-Gov 法令検索 Viewer β
です。
ここで突然、雰囲気が変わります。
本番サーバー神社の次に日本国憲法を表示することになるとは思っていませんでした。
e-Govの法令APIを使い、法令を取得して表示します。
最初は、
「APIを呼んで表示すればできるだろう」
くらいに考えていました。
しかし、実際に作ってみると難しいのはAPI呼び出しそのものより、その後でした。
法令は長い。
とても長い。
さらに、
- 法令名検索
- 本文検索
- ハイライト
- エラー処理
- Retry
- スマートフォン表示
- 長大な法令のスクロール
- 印刷
などを考え始めると、普通のAPIサンプルとはかなり違うものになります。
ここで感じたのは、
APIを取得できることと、使えるUIを作れることは別問題
ということでした。
これは現在でもかなり重要な学びになっています。
そして音の世界へ迷い込む
次に増えていったのが音関連の実験です。
最初は比較的シンプルな
PIANO EMULATOR
でした。
ブラウザ上に鍵盤を表示し、クリックすると音が出る。
テキストから音階を再生する機能も追加しました。
このあたりまでは、
「Web Audio APIって面白い」
くらいでした。
ところが、その次に
VOICE CHANGER LAB β
を作りました。
マイクから声を録音し、ピッチなどを変えて再生します。
さらに、
- Pitch
- RMS
- Peak
- Spectral Centroid
- 音声区間
なども表示するようにしました。
ここまで来ると、Web Audio APIの扱いが少しずつ重くなってきます。
PCで動くからといってスマホで動くとは限らない
VOICE CHANGERを作っていて特に感じたのが、端末差です。
PCで動く。
Androidでも確認する。
iPhoneでも確認する。
すると、だいたいどこかで何かが起きます。
画面サイズだけの問題ならまだ簡単です。
マイク、音声再生、ユーザー操作を伴う処理になると、端末やブラウザによる挙動差がかなり目立ちます。
そのため、最終的には
PCでコードが動く
ではなく、
実機で操作として成立する
ところまで確認するようになりました。
個人開発でも、実機確認はかなり重要だと感じています。
チューナーを作ったら、さらに現実世界が入ってきた
その延長で作ったのが、
SOUND TUNER LAB β
です。
マイクから音を取り込み、周波数や倍音を可視化します。
ここではコード以外の問題も出てきました。
たとえば、
PCでは人の声は取れるのに、楽器音では期待した結果にならない。
あるいは、基準音を再生するとマイクとの関係で思ったように動作しない。
こうなると、
JavaScriptだけ見ていても解決できません。
マイク特性や端末側の音声処理も考える必要があります。
Webアプリなのに、実世界の音響特性まで入ってきました。
技術スタック迷子が加速します。
生成AIも「結果」ではなく「指示」を実験対象にした
生成AI系では、
PROMPT GENERATOR
や
PRO IMAGE PROMPT LAB
も作りました。
ここでは生成AIそのものより、
どう指示を書くと結果が変わるのか
を実験対象にしています。
画像生成でも、
「猫の画像を作る」
だけではなく、
構図、光、カメラ位置、質感、背景、雰囲気など、プロンプトを構成する要素を分解して考えます。
生成された画像より、
なぜその結果になったのか
を見る方が、LABという考え方には合っていました。
コンテンツが増えると、今度はサイト運用が研究対象になる
ここまで作ると、新しい問題が出てきました。
コンテンツそのものではありません。
サイトの管理です。
ページが増えると、
「新しいHTMLを置いてリンクする」
だけでは済まなくなってきます。
そこで、
- 共通ヘッダー
- 共通フッター
- 共通ナビゲーション
- favicon
- canonical
- Open Graph
- JSON-LD
- sitemap.xml
- robots.txt
- 404
- Analytics
- README
- Technical Documentation
なども整備するようになりました。
最初はHTMLを1枚追加したかっただけなのに、いつの間にかサイト運用をしていました。
手作業で更新すると、そのうち間違える
さらにコンテンツが増えると、
トップページへの追加、
ナビゲーションへの追加、
READMEへの追加、
sitemapへの追加、
という作業も増えます。
そして手作業が増えるほど、
リンク漏れや更新漏れが起きやすくなります。
最近は、
「コンテンツを作る」だけでなく、「どうすれば安全に増やせるか」
まで考えるようになりました。
個人サイトなのに、少しずつ小さなプロダクト運用のようになっています。
AIは「一発で作る道具」よりレビュー相手として使うことが多かった
Neko3SE LABでは生成AIもかなり使っています。
ただ、実際の開発では、
「全部作って」
と一度で完成させるより、
設計する
↓
レビューする
↓
実装する
↓
実機で確認する
↓
問題点を戻す
↓
修正する
という使い方の方が多くなりました。
AIがコードを書いてくれても、
PCで動くか、
Androidで動くか、
iPhoneで動くか、
実際の操作感がどうか、
までは最終的に確認する必要があります。
AIによって実装速度はかなり上がります。
一方で、
最後に判断する人間の仕事がなくなるわけではない
というのも、この開発を通して感じたことです。
結局、技術スタックは迷子なのか
現在扱っているものを並べると、
Web UI、
REST API、
Web Audio API、
音声処理、
周波数解析、
生成AI、
SEO、
構造化データ、
GitHub Pages、
アクセス解析。
かなり散らかっています。
テーマだけを見ると完全に迷子です。
ただ、振り返ってみると、ずっと同じことをやっていました。
Webブラウザを使って、気になったことを実際に試してみる。
法律でも、
音でも、
ゲームでも、
生成AIでも、
入口が違うだけでした。
個人Webラボを作って分かったこと
Neko3SE LABを作り続けて、いくつか考え方が変わりました。
まず、
テーマを絞らなくても、実験の軸があればサイトとして成立する
ということ。
次に、
完成品だけでなく、失敗や制約も残した方が次の実験に役立つ
ということ。
そして、
役に立つものだけを作る必要はない
ということです。
「これをブラウザでやったらどうなるんだろう」
くらいの理由で始めたものから、思った以上に多くの技術を学びました。
おわりに
法律検索、ボイスチェンジャー、ピアノ、チューナー、生成AI、そして本番サーバー神社。
並べると、やはりよく分かりません。
でも個人開発だからこそ、
目的から少し外れても、
面白そうなら試してみる、
という進め方ができます。
その結果としてできたのが、Neko3SE LABです。
技術スタックは迷子になりました。
ただ、迷子になったからこそ触れた技術もかなりありました。
今後もたぶん、まっすぐ進むことはなさそうです。