どうも、こうすけ（@kosuke_upd）です。
この度、当ブログ「UPDATE」でデベロッパーツールの console (コンソール) を開いたときに、ブログ名の AA (アスキーアート) が表示されるようにしてみました。
普段は開発のために使用するデベロッパーツールですが、こんな風にちょっとした遊び心をも感じさせることもできてしまうんです。自分自身も楽しめるし、もしユーザーがコンソールを開いたときに楽しませることもできますね。
というわけで、今回はブログやサイトの console に AA (アスキーアート) を表示させる方法を解説していきます。
手順1. AA (アスキーアート) を生成する
まずは AA を生成しましょう。ここでは Asciify というモジュールを使用して文字の AA を生成していきます。Asciify を使用することで、簡単にたくさんの種類の文字の AA を生成してくれます。
：：： info
ネット上に落ちている AA を使用しても良いですし、専用ツールなどを使用して生成しても構いません。とりあえず console に表示させたい AA を用意できれば OK です。
Asciify を使用して AA を生成する場合は、まず下記コマンドを実行し、Asciify を PC にインストールします。
Asciify は npm を使用してインストールするので、もし npm をインストールしていない場合はこちらを参考にインストールしてから下記コマンドを実行しましょう。
【Mac】Node.js / npm のインストール方法
$ npm install asciify -gそして下記コマンドを実行すれば、様々な種類のテキストベースの AA が生成されます。UPDATE の部分はお好みのテキストに変換してください。
$ asciify "UPDATE" -aすると、下記のようにざーっと AA が表示されます。
この中から使用したい AA をコピーしておきましょう。
今回は、こちらの AA を使用していきます。
___ ___ _____ ___ ___
/__/\ / /\ / /::\ / /\ ___ / /\
\ \:\ / /::\ / /:/\:\ / /::\ / /\ / /:/_
\ \:\ / /:/\:\ / /:/ \:\ / /:/\:\ / /:/ / /:/ /\
___ \ \:\ / /:/~/:/ /__/:/ \__\:| / /:/~/::\ / /:/ / /:/ /:/_
/__/\ \__\:\ /__/:/ /:/ \ \:\ / /:/ /__/:/ /:/\:\ / /::\ /__/:/ /:/ /\
\ \:\ / /:/ \ \:\/:/ \ \:\ /:/ \ \:\/:/__\/ /__/:/\:\ \ \:\/:/ /:/
\ \:\ /:/ \ \::/ \ \:\/:/ \ \::/ \__\/ \:\ \ \::/ /:/
\ \:\/:/ \ \:\ \ \::/ \ \:\ \ \:\ \ \:\/:/
\ \::/ \ \:\ \__\/ \ \:\ \__\/ \ \::/
\__\/ \__\/ \__\/ \__\/手順2. AA (アスキーアート) を整形する
では次は、AA を整形しましょう。JavaScript console では、バックスラッシュなどのエスケープ文字はそのままでは表示させられないため、変換する必要があります。
例えばバックスラッシュ \ は、バックスラッシュ2つ \\ に置換しましょう。エディタなどを使用すると簡単に置換できます。
すると下記のようになります。
___ ___ _____ ___ ___
/__/\\ / /\\ / /::\\ / /\\ ___ / /\\
\\ \\:\\ / /::\\ / /:/\\:\\ / /::\\ / /\\ / /:/_
\\ \\:\\ / /:/\\:\\ / /:/ \\:\\ / /:/\\:\\ / /:/ / /:/ /\\
___ \\ \\:\\ / /:/~/:/ /__/:/ \\__\\:| / /:/~/::\\ / /:/ / /:/ /:/_
/__/\\ \\__\\:\\ /__/:/ /:/ \\ \\:\\ / /:/ /__/:/ /:/\\:\\ / /::\\ /__/:/ /:/ /\\
\\ \\:\\ / /:/ \\ \\:\\/:/ \\ \\:\\ /:/ \\ \\:\\/:/__\\/ /__/:/\\:\\ \\ \\:\\/:/ /:/
\\ \\:\\ /:/ \\ \\::/ \\ \\:\\/:/ \\ \\::/ \\__\\/ \\:\\ \\ \\::/ /:/
\\ \\:\\/:/ \\ \\:\\ \\ \\::/ \\ \\:\\ \\ \\:\\ \\ \\:\\/:/
\\ \\::/ \\ \\:\\ \\__\\/ \\ \\:\\ \\__\\/ \\ \\::/
\\__\\/ \\__\\/ \\__\\/ \\__\\/では次は、各行末に改行コード \n を追加しましょう。これを記述しないと改行されないためです。すると、下記のようになります。
___ ___ _____ ___ ___ \n
/__/\\ / /\\ / /::\\ / /\\ ___ / /\\ \n
\\ \\:\\ / /::\\ / /:/\\:\\ / /::\\ / /\\ / /:/_ \n
\\ \\:\\ / /:/\\:\\ / /:/ \\:\\ / /:/\\:\\ / /:/ / /:/ /\\ \n
___ \\ \\:\\ / /:/~/:/ /__/:/ \\__\\:| / /:/~/::\\ / /:/ / /:/ /:/_ \n
/__/\\ \\__\\:\\ /__/:/ /:/ \\ \\:\\ / /:/ /__/:/ /:/\\:\\ / /::\\ /__/:/ /:/ /\\ \n
\\ \\:\\ / /:/ \\ \\:\\/:/ \\ \\:\\ /:/ \\ \\:\\/:/__\\/ /__/:/\\:\\ \\ \\:\\/:/ /:/ \n
\\ \\:\\ /:/ \\ \\::/ \\ \\:\\/:/ \\ \\::/ \\__\\/ \\:\\ \\ \\::/ /:/ \n
\\ \\:\\/:/ \\ \\:\\ \\ \\::/ \\ \\:\\ \\ \\:\\ \\ \\:\\/:/ \n
\\ \\::/ \\ \\:\\ \\__\\/ \\ \\:\\ \\__\\/ \\ \\::/ \n
\\__\\/ \\__\\/ \\__\\/ \\__\\/ \nでは次は、各行をダブルクォーテーション " (またはシングルクォーテーション ') で囲みましょう。これは、JavaScript 上で文字列として記述するためです。
" ___ ___ _____ ___ ___ \n"
" /__/\\ / /\\ / /::\\ / /\\ ___ / /\\ \n"
" \\ \\:\\ / /::\\ / /:/\\:\\ / /::\\ / /\\ / /:/_ \n"
" \\ \\:\\ / /:/\\:\\ / /:/ \\:\\ / /:/\\:\\ / /:/ / /:/ /\\ \n"
" ___ \\ \\:\\ / /:/~/:/ /__/:/ \\__\\:| / /:/~/::\\ / /:/ / /:/ /:/_ \n"
" /__/\\ \\__\\:\\ /__/:/ /:/ \\ \\:\\ / /:/ /__/:/ /:/\\:\\ / /::\\ /__/:/ /:/ /\\ \n"
" \\ \\:\\ / /:/ \\ \\:\\/:/ \\ \\:\\ /:/ \\ \\:\\/:/__\\/ /__/:/\\:\\ \\ \\:\\/:/ /:/ \n"
" \\ \\:\\ /:/ \\ \\::/ \\ \\:\\/:/ \\ \\::/ \\__\\/ \\:\\ \\ \\::/ /:/ \n"
" \\ \\:\\/:/ \\ \\:\\ \\ \\::/ \\ \\:\\ \\ \\:\\ \\ \\:\\/:/ \n"
" \\ \\::/ \\ \\:\\ \\__\\/ \\ \\:\\ \\__\\/ \\ \\::/ \n"
" \\__\\/ \\__\\/ \\__\\/ \\__\\/ \n"各行がそれぞれ文字列として認識されるので、それぞれを連結するために最後の行以外の行末にプラス + を記述しましょう。すると、下記のようになります。
" ___ ___ _____ ___ ___ \n" +
" /__/\\ / /\\ / /::\\ / /\\ ___ / /\\ \n" +
" \\ \\:\\ / /::\\ / /:/\\:\\ / /::\\ / /\\ / /:/_ \n" +
" \\ \\:\\ / /:/\\:\\ / /:/ \\:\\ / /:/\\:\\ / /:/ / /:/ /\\ \n" +
" ___ \\ \\:\\ / /:/~/:/ /__/:/ \\__\\:| / /:/~/::\\ / /:/ / /:/ /:/_ \n" +
" /__/\\ \\__\\:\\ /__/:/ /:/ \\ \\:\\ / /:/ /__/:/ /:/\\:\\ / /::\\ /__/:/ /:/ /\\ \n" +
" \\ \\:\\ / /:/ \\ \\:\\/:/ \\ \\:\\ /:/ \\ \\:\\/:/__\\/ /__/:/\\:\\ \\ \\:\\/:/ /:/ \n" +
" \\ \\:\\ /:/ \\ \\::/ \\ \\:\\/:/ \\ \\::/ \\__\\/ \\:\\ \\ \\::/ /:/ \n" +
" \\ \\:\\/:/ \\ \\:\\ \\ \\::/ \\ \\:\\ \\ \\:\\ \\ \\:\\/:/ \n" +
" \\ \\::/ \\ \\:\\ \\__\\/ \\ \\:\\ \\__\\/ \\ \\::/ \n" +
" \\__\\/ \\__\\/ \\__\\/ \\__\\/ \n"では、AA の整形が完了したのでコピーしておきましょう。
手順3. AA (アスキーアート) を console (コンソール) に表示する
では、整形した AA を console.log() を用いて console 上に表示させましょう。
任意の JS ファイルを作成し、その中に console.log() を記述し、その中に先程コピーした整形後の AA を貼り付けます。
すると、下記のようになるかと思います。
console.log(
" ___ ___ _____ ___ ___ \n" +
" /__/\\ / /\\ / /::\\ / /\\ ___ / /\\ \n" +
" \\ \\:\\ / /::\\ / /:/\\:\\ / /::\\ / /\\ / /:/_ \n" +
" \\ \\:\\ / /:/\\:\\ / /:/ \\:\\ / /:/\\:\\ / /:/ / /:/ /\\ \n" +
" ___ \\ \\:\\ / /:/~/:/ /__/:/ \\__\\:| / /:/~/::\\ / /:/ / /:/ /:/_ \n" +
" /__/\\ \\__\\:\\ /__/:/ /:/ \\ \\:\\ / /:/ /__/:/ /:/\\:\\ / /::\\ /__/:/ /:/ /\\ \n" +
" \\ \\:\\ / /:/ \\ \\:\\/:/ \\ \\:\\ /:/ \\ \\:\\/:/__\\/ /__/:/\\:\\ \\ \\:\\/:/ /:/ \n" +
" \\ \\:\\ /:/ \\ \\::/ \\ \\:\\/:/ \\ \\::/ \\__\\/ \\:\\ \\ \\::/ /:/ \n" +
" \\ \\:\\/:/ \\ \\:\\ \\ \\::/ \\ \\:\\ \\ \\:\\ \\ \\:\\/:/ \n" +
" \\ \\::/ \\ \\:\\ \\__\\/ \\ \\:\\ \\__\\/ \\ \\::/ \n" +
" \\__\\/ \\__\\/ \\__\\/ \\__\\/ \n"
)あとは保存し、このファイルを読み込めば完了です。
手順4. ブログを開いて確認する
では、ブログを開き、デベロッパーツールの console を開いてみましょう。
すると、下画像のように console 上に AA が表示されているはずです。
プログラミングを思い切り楽しもう！
今回は、console 上に AA を表示させる方法を解説しました。
ただプログラミングをするだけでなく、こんな感じでちょっとした遊び心を加えることにより、プログラミングをすることが楽しくなりますし、自分のプロダクトを使ってくれるユーザーを楽しませることもできます。
毎日の作業をより楽しむためにも、ぜひ参考にしてみてください。
\ 記事が良かったらシェア！ /
