はじめての板芸 #9 ― コマンドで絵を描く

「はじめての板芸 #8 ― コマンドで色をつける」の続きです。前回はコマンドで文字の色や大きさ、背景色を変えました。今回はSVGの図形をコマンドで書き込んで、ブラウザに絵を表示させます。#4でテキストエディタを使って描いた丸や四角を、今度はコマンドだけで描く体験です。

1. フォルダに移動する

コマンドプロンプト（ターミナル）を開き、「hangei-cli」フォルダに移動してください。

Windows の場合

1. Windowsキー → cmd と打つ → Enter
2. 次のコマンドを打って Enter を押す

   cd Desktop\hangei-cli

Mac の場合

1. Command + Space → ターミナル と打つ → Enter
2. 次のコマンドを打って Enter を押す

   cd ~/Desktop/hangei-cli

2. 丸を描く

#4では、テキストエディタで<svg>と<circle>を書いて丸を描きました。今回は同じ内容をコマンドで書き込みます。

Windows の場合

1. 次のコマンドを打って Enter を押す

   echo ^<meta charset="UTF-8"^>^<svg width="100" height="100"^>^<circle cx="50" cy="50" r="40" fill="#4a90d9" /^>^</svg^> > index.html

Mac の場合

1. 次のコマンドを打って Enter を押す

   echo '<meta charset="UTF-8"><svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="#4a90d9" /></svg>' > index.html

ブラウザで開くと（start index.html / open index.html、または再読み込み）、青い丸が表示されます。

3. 四角を描く

丸の代わりに四角も描けます。

Windows の場合

1. 次のコマンドを打って Enter を押す

   echo ^<meta charset="UTF-8"^>^<svg width="100" height="100"^>^<rect x="10" y="10" width="80" height="80" fill="#2d8659" /^>^</svg^> > index.html

Mac の場合

1. 次のコマンドを打って Enter を押す

   echo '<meta charset="UTF-8"><svg width="100" height="100"><rect x="10" y="10" width="80" height="80" fill="#2d8659" /></svg>' > index.html

ブラウザで再読み込みすると、緑の四角が表示されます。

4. 顔を描く

#4と同じように、丸と四角を組み合わせて顔を描きます。コマンドが長くなりますが、1行にすべて収めて打ってください。

Windows の場合

1. 次のコマンドを打って Enter を押す（1行で入力する）

   echo ^<meta charset="UTF-8"^>^<svg width="100" height="100"^>^<circle cx="50" cy="50" r="40" fill="#ffe0b2" /^>^<circle cx="35" cy="40" r="5" fill="#333" /^>^<circle cx="65" cy="40" r="5" fill="#333" /^>^<rect x="35" y="62" width="30" height="4" rx="2" fill="#333" /^>^</svg^> > index.html

Mac の場合

1. 次のコマンドを打って Enter を押す（1行で入力する）

   echo '<meta charset="UTF-8"><svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="#ffe0b2" /><circle cx="35" cy="40" r="5" fill="#333" /><circle cx="65" cy="40" r="5" fill="#333" /><rect x="35" y="62" width="30" height="4" rx="2" fill="#333" /></svg>' > index.html

ブラウザで再読み込みすると、丸い顔に目と口がついた絵が表示されます。#4でテキストエディタに書いたのと同じ結果が、コマンド1行で出来上がりました。

5. 自分だけの顔にする

目の位置や色を変えて、自分だけの顔に仕上げてみてください。変えたい部分の数字や色番号を書き換えて、もう一度コマンドを打てばファイルが上書きされます。

コマンドを打ち直すたびに結果が変わります。気に入る顔ができるまで試してみてください。

6. まとめ

• SVGの<circle>や<rect>もコマンドで書き込める
• 図形を複数並べて1行のechoで打てば、組み合わさった絵になる
• テキストエディタを開かなくても、コマンドだけで図形の色・位置・大きさを試行錯誤できる
• コマンドが長くなっても、やっていることは「echoで文字を書いてファイルに入れる」だけ