ヴァイブコーディングの記録
このスライドを表示する index.html 奴はほぼ？ 100% Vibe Coding で書いた。
コード的にはこの辺になる。
少しだけ振り返ると
まず、こういう感じで雑然と指示を投げたのだが、 > 同じディレクトリにある index.pdf をスライド共有サイトふうに表示するようなアプリを、html 1ファイルで完結するように作成してください。外部ライブラリはCDNを利用してください。 これで割と最低限の機能はできてしまっていた。 PDFから抽出するOGP画像とかも欲しかったが、これは指示したら `convert` コマンドの例を出してきた。まあ十分なので採用。 その後の修正はいくつか詰まって、まず、PDF.jsはPDFを画像として抜き出すのでリンクがdeadになってしまう。なので、 > PDF.jsはPDFLinkService というものを用いてリンクをクリック可能にできるので、それを用いてリンクを有効にしてください。 Google 検索した上でこういうプロンプトを渡したが（ちなみに後で調べたら PDFLinkService なるものはなんか存在してないっぽいので、結局その部分のコードを消してもうまく動いた。Geminiに騙されたのかこれ）、結果リンクを解釈してアクティブにしてくれるようになった。しかしどうもめちゃくちゃズレる。 なので「リンクがずれないようにできないか」みたいな指示を与えたが、より激しくズレるようになっただけだった...。 > PDFのリンクの位置がどうしてもズレるので、元のPDFのサイズをもとに適切な位置に調整できないか試してください。 ここで、ちょっとコードを眺めた。PDFあたりを見る感じ、まず、PDFのアノテーション情報は取得できるらしくて、そこにリンクの情報もある。 リンクのmetadata中の `viewport.transform` 配列のような属性を使っていたが、なんか回転行列みたいな使いづらい情報が入ってそう？なので、単純に、リンクの座標情報（四隅のpixel単位のx, yがある）とPDFの縦横の長さから、割合に変換してそれをCSSに指定させるみたいなことをさせた。 > transformを使わずに、PDF全体の大きさから%を指定するように変えてみてください。 そのdiffがこれかな。これで、めちゃくちゃ綺麗にズレなくなった（マウスオーバーでAタグ範囲の色を変えさせるようにしたので、わかりやすく確認できた）。
他には、スマートフォンで見るとページ送りが難しすぎるので、スライド自体をタップしたら次のスライドへ進むようにしたかった。そういう指示をした。 > スライド表示部分の左端をクリックしたら前のページに、右端をクリックしたら次のページに移動するようにできますか？ ただ、これで出てきたコードは、 canvas 要素にonclilck属性を付与していたので動かなかった。先ほどのリンク対応で、上に丸ごとリンクを表示するためのdivが重なっているので。ただまあ、今までのデバッグのおかげでそういう構造が頭にあったこともあり、指示はすんなり思いついた。 > 一番上のレイヤーがリンクコンテナなのでclickイベントが発火しません。リンクコンテナにclickイベントを追加してください これで綺麗に思った通り動くようになった。 最後にスマホ表示をもうちょっと調整してもらって一旦終わり。
感想
まともなVibe Codingをしたのがほぼ初めてかも？ という感じで学びはあった。 道具としてのAI Agentの使い方に慣れないといけない気がした。結局、いい感じの指示をするには、いい感じの粒度で仕事をしてもらって、ちゃんと中身を把握しやすくしないとダメだなって気持ち...。「いい感じの粒度」を言語化する力が試される。