どんな話？
第3話を組む途中の画面を選んで Copy HTML を押し、3,648字の中身を読んだ回です。このパソコンでは押した瞬間に「Copied HTML + Tailwind」と出て、AIのペンは現れませんでした。中身は w-[390px] h-[844px] の決め打ちで、Tailwind は「開発用」の読みこみ方。色の名札も #7c3aed の値のまま出ました。React の部品にするのはAIの仕事で、画用紙とコードは自動ではそろいません。
この記事でわかること
- 写し方は2つ。Code の欄のボタンで「書き出す」のと、AIのペンに「生成してもらう」の。AIを通すかどうかが、いちばんの違い
- コピーの中身は 3,648字。画用紙の数字が Tailwind のクラスにそのまま入り、data-pencil-name という旧名の印も残っていた
- そのまま本番に使わない理由は4つ。ピクセルの決め打ち・開発用の Tailwind・ネットの向こうから読むものが2つ・色の名前がただの値になる
- HTML + CSS でファイルに書き出すと 3,927 バイト。script のタグは無く、見た目は要素ごとの style に直接書かれていた
- AIに React を頼む前に、コードをしまい、.pen をプロジェクトの作業場所に保存する。下書きのまま頼まない
やることチェックリスト
0/5記事を読みながら、できたものにチェックを付けていけます。チェックはこの端末に残ります。
ぜんぶできた！おつかれさまでした。
くわしい手順と画面の図は、Xの記事にあります。
こんな人に
- Pen で描いた画面を、自分のウェブページやアプリへ持っていきたい人
- 「HTML で書き出せる」と聞いてコピーしてみたけれど、中身が読めずに止まっている人
- ボタンで書き出すのと、AIにコードを書かせるのとで、何が違うのか。AIの契約がかかわるのはどちらなのかを知りたい人
この話のTIPS
- 注意Pen の Copy HTML でコピーした HTML は、大きさがピクセルの決め打ちで、Tailwind も「開発用」の読みこみ方です。そのまま本番に出さず、見本やたたき台として中身を読んでから使いましょう。
- コツPen でAIに React の部品を頼む前に、いまのコードをしまい、.pen をプロジェクトの作業場所に保存しておきましょう。画用紙とコードは自動ではそろわないので、頼むたびに両方のファイルを見直します。