「はじめての板芸 #9 ― コマンドで絵を描く」の続きです。前回はコマンドでSVGの図形を描きました。最終回の今回は、#8で覚えた色・大きさの指定と、#9で覚えたSVGを組み合わせて、コマンドだけで自己紹介ページを完成させます。
1. フォルダに移動する
コマンドプロンプト（ターミナル）を開き、「hangei-cli」フォルダに移動してください。
Windows の場合
- Windowsキー →
cmdと打つ → Enter - 次のコマンドを打って Enter を押す
cd Desktop\hangei-cli
Mac の場合
- Command + Space →
ターミナルと打つ → Enter - 次のコマンドを打って Enter を押す
cd ~/Desktop/hangei-cli
2. 完成イメージを確認する
#5と同じ完成形を目指します。名前の横にSVGアイコンを添え、その下に趣味を箇条書きで並べる構成です。
ページに載せる要素
- 名前（大きな見出し + SVGアイコン）
- 趣味や好きなもの（箇条書き）
- 背景色
これらすべてを、コマンドでファイルに書き込みます。
3. コマンドで組み立てる
完成版のコードを一気にファイルへ書き込みます。コマンドが長いですが、1行にまとめて打ってください。途中で Enter を押すと実行されてしまうので、最後まで書き切ってから Enter を押します。
Windows の場合
- 次のコマンドを1行で打って Enter を押す
echo ^<meta charset="UTF-8"^>^<body style="background: #fffdf7;"^>^<h1 style="color: #4a90d9; font-size: 36px;"^>^<svg width="40" height="40" style="vertical-align: middle;"^>^<circle cx="20" cy="20" r="18" fill="#ffe0b2" /^>^<circle cx="14" cy="16" r="3" fill="#333" /^>^<circle cx="26" cy="16" r="3" fill="#333" /^>^<rect x="13" y="27" width="14" height="3" rx="1" fill="#333" /^>^</svg^> なまえ^</h1^>^<h2 style="color: #333; font-size: 24px;"^>好きなもの^</h2^>^<ul style="font-size: 20px; line-height: 2;"^>^<li^>散歩^</li^>^<li^>読書^</li^>^<li^>コーヒー^</li^>^</ul^>^</body^> > index.html
Mac の場合
- 次のコマンドを1行で打って Enter を押す
echo '<meta charset="UTF-8"><body style="background: #fffdf7;"><h1 style="color: #4a90d9; font-size: 36px;"><svg width="40" height="40" style="vertical-align: middle;"><circle cx="20" cy="20" r="18" fill="#ffe0b2" /><circle cx="14" cy="16" r="3" fill="#333" /><circle cx="26" cy="16" r="3" fill="#333" /><rect x="13" y="27" width="14" height="3" rx="1" fill="#333" /></svg> なまえ</h1><h2 style="color: #333; font-size: 24px;">好きなもの</h2><ul style="font-size: 20px; line-height: 2;"><li>散歩</li><li>読書</li><li>コーヒー</li></ul></body>' > index.html
ブラウザで開くと（start index.html / open index.html）、クリーム色の背景に、顔アイコンつきの名前と趣味リストが表示されます。#5でテキストエディタを使って仕上げたものと同じ結果が、コマンド1行で出来上がりました。
確認してみる
ファイルの中身を確認したいときは、#7で使ったコマンドを打ちます。
- Windows:
type index.html - Mac:
cat index.html
4. 自分の言葉に変える
ここが一番大事な工程です。サンプルの「なまえ」「散歩」「読書」「コーヒー」を、自分自身の情報に入れ替えてコマンドを打ち直してください。
書き換えるポイント
- 「なまえ」→ 自分の名前やニックネームにする
- 「好きなもの」→「趣味」「最近ハマっていること」など好きな見出しにする
- 「散歩」「読書」「コーヒー」→ 自分の趣味に入れ替える。項目を増やしてもいい（
<li>〇〇</li>を追加する） - 色番号や文字サイズも好きな値に変える
- 顔アイコンの色や形も#9の要領で変える
コマンドを打ち直すたびにファイルが更新されます。納得のいく仕上がりになるまで何度でも試してください。
5. まとめ
- 名前（h1 + SVG）・趣味（h2 + ul）・背景色を1行のechoにまとめて書き込める
- テキストエディタを一度も開かずに、自己紹介ページを完成させられる
- コマンドが長くなっても、やっていることは「echo 〇〇 > ファイル名」の1パターン
- 自分の名前・趣味・色に書き換えて打ち直すことで、自分だけのページになる
シリーズ完走
#1から#10まで、お疲れさまでした。デスクトップの「hangei-cli」フォルダに、コマンドだけで作った自己紹介ページが残っているはずです。#1〜#5ではマウスで同じものを作り、#6〜#10ではキーボードだけで同じものを作りました。どちらも正解で、どちらも板芸です。
キーボードで文字を打ち込むだけでページが出来上がる。この感覚を覚えていていただけたら、このシリーズを書いた甲斐があります。気が向いたときに、色を変えたり項目を足したりして、いつでも手を入れてみてください。