JavaScriptでブラウザコンソールにつみきロゴを出力してみる

こんにちは、つみきのフロントエンドエンジニアの佐藤です。

前回、 CSS で弊社のロゴを再現してみましたが、 今回は、ブラウザのコンソールにロゴを出力してみたいと思います。

コンソール画像

参考

環境

  • Webkit 系ブラウザ

consoleオブジェクト

console オブジェクトは JavaScript のデバッグのための様々な機能を提供しています。 動作はブラウザによって若干差異がありますが、一般的なデバッグ機能は大抵サポートされているはずです。

Webkit 系ブラウザの console.log() では、出力する情報に CSS で装飾する機能が提供されています。

これを利用し、コンソールに弊社ロゴを出力させてみます。

JavaScript

var consoleTsumikiLogo = function(str) {
  var styles = 'background: url(http://blog.tsumikiinc.com/img/t.png) no-repeat center 0;' +
               'background-size: 100% auto;' +
               'font-family: "Source Code Pro", monospace;' +
               'font-size: 10px;' +
               'color: transparent;' +
               'line-height: 120px;' +
               'padding: 44px 64px 44px 0;';


  console.log('%c' + str, styles);
};

console.log() の第 1 引数に %c フォーマット指定子と共に文字列(空文字も可)を渡します。

第 2 引数に適用させたいスタイルを記述した文字列を渡します。

background プロパティで背景画像を指定し、ロゴを表示させています。

現時点で正式なリファレンス等が見当たらないので正確な検証が必要ですが、 適用可能な CSS プロパティに制限があり、 インライン要素に適用可能な CSS プロパティあたりしか適用できないようです。

当ブログでも出力してみました。

Chrome もしくは Safari で、 command + option + i (Windows の場合は、 F12 もしくは ctrl + shift + i) で確認できます。

まとめ

制作で役に立つ場面は少ないと思いますが、 console オブジェクト自体は JavaScript のデバッグには欠かせないので、把握しておいて損はないかと思います。

スマホアプリ制作、Web制作、UIコンサルなどのご依頼はこちら

お問い合わせ