Help us understand the problem. What is going on with this article?

Javascriptでconsoleにサイト名をAAで出す!

More than 3 years have passed since last update.

サイト名をconsoleにAAで出したい!

Firefoxのサイトにアクセスし、consoleを確認すると下の画像のように、火を吹く恐竜とmozillaの文字がAAで表示されるのをご存知でしょうか。
https://www.mozilla.org/ja/firefox/new/

スクリーンショット 2016-01-22 12.31.16.png

今回はJavascriptでAAを簡単にconsoleに出す方法をご紹介します。

asciify

asciifyというモジュールを利用することで、文字を簡単にAAに変換してくれます。
https://github.com/olizilla/asciify

node.jsがお使いのPCに入っていれば、インストールはとても簡単です。

$ npm install asciify -g

使用方法は、下記です。

コマンドプロンプトで

$ asciify "Hello World" -a

と入力すると、下記のように一覧がずらっと出力されます。"Hello World"が引数なので自由に変更できます。
AAの上のところに名前もついていますね。

スクリーンショット 2016-01-22 12.44.07.png

筆者はlarry3dが気に入ったので、下記のようにコマンド入力してお好みのAAを表示させます。

$ asciify "Hello World" -f larry3d

スクリーンショット 2016-01-22 12.47.33.png

コピーしてテキストとして貼り付けます。

スクリーンショット 2016-01-22 12.50.06.png

JavaScriptのconsole上では、バックスラッシュなどはエスケープ文字になってしまうため、
バックスラッシュは、バックスラッシュ2つに置換します。
※Windowsでは¥マークです。

スクリーンショット 2016-01-22 12.51.46.png

あとは、jsに組み込んで終了です。

サンプル

test.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script>

console.log("\n" +
" __  __              ___       ___                          __      __                    ___        __ \n" +
"/\\ \\/\\ \\            /\\_ \\     /\\_ \\                        /\\ \\  __/\\ \\                  /\\_ \\      /\\ \\ \n" +
"\\ \\ \\_\\ \\      __   \\//\\ \\    \\//\\ \\      ___              \\ \\ \\/\\ \\ \\ \\    ___    _ __  \\//\\ \\     \\_\\ \\ \n" +
" \\ \\  _  \\   /'__`\\   \\ \\ \\     \\ \\ \\    / __`\\             \\ \\ \\ \\ \\ \\ \\  / __`\\ /\\`'__\\  \\ \\ \\    /'_` \\ \n" +
"  \\ \\ \\ \\ \\ /\\  __/    \\_\\ \\_    \\_\\ \\_ /\\ \\L\\ \\             \\ \\ \\_/ \\_\\ \\/\\ \\L\\ \\\\ \\ \\/    \\_\\ \\_ /\\ \\L\\ \\ \n" +
"   \\ \\_\\ \\_\\\\ \\____\\   /\\____\\   /\\____\\\\ \\____/              \\ `\\___x___/\\ \\____/ \\ \\_\\    /\\____\\\\ \\___,_\\ \n" +
"    \\/_/\\/_/ \\/____/   \\/____/   \\/____/ \\/___/                '\\/__//__/  \\/___/   \\/_/    \\/____/ \\/__,_ / \n")

</script>
</head>
<body>
  <h1>テスト</h1>
</body>
</html>

結果

結果はこうなります。

スクリーンショット 2016-01-22 12.54.08.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away