📚 はじめに
この記事はGeminiを使ってHTMLワイヤーからHTMLタグを書けるのだろうかという好奇心から実験した履歴です。
⚙ 使ったもの
Gemini PRO （2.5PRO）
🥼 実験
① タグと構成だけ書いたシンプルなもの
スプレッドシートで作ったワイヤーです。
この画像をHTMLにしてもらうようGeminiにお願いします。
See the Pen Gemini_1 by sakaguchii (@sakaguchii) on CodePen.
<nav>, <p>も判別して書き起こしてくれていますね
② さらに要素を足してみる
imgのsrcや、ページ内リンクも足してみます
See the Pen Gemini_2 by sakaguchii (@sakaguchii) on CodePen.
アンカーリンク（<a>タグ）が機能するように、リンク先の要素にid属性を追加しています。 と言ってくれているようにワイヤーになかったidをよしなに付与してくれました。
③ 段組みもしてもらう
See the Pen Gemini_3 by sakaguchii (@sakaguchii) on CodePen.
flexで組むために必要な要素を追加して段組みを実装してくれました。
その他
今回使ったバージョンは2.5PROでしたが、2.5Flashで実行した場合はPROと比べて
- 処理が早い
- Styleをよしなに追加する（背景色など）
のような違いが見られました。よしなに対応してくれると良い場面もありますが、悪く言えば指示を逸脱しているとも捉えられるのでそういった意味ではPROのほうがより忠実に再現してくれるという印象です。ただし、Flashの場合でも厳密に指示をすればより忠実な再現に近づいてくれそうでした。
☕ Geminiを使っての感想
Geminiでどこまで出来るか？という好奇心から始まった実験でしたが、HTML設計として作成したワイヤーを流し込んでコーディングのベースにするには申し分ない精度でした。
正直いまだに手探りな状態ですが、うまい付き合い方を探っていきたいです。