読者です 読者をやめる 読者になる 読者になる

リクルート住まいカンパニー Tech Blog

ITのちからで暮らしをよくしたい、エンジニア・デザイナーが発信するTech情報メディア

console.log()でスーモくんをお絵かきしてみた

f:id:recruit-sumai:20170309110024p:plain

はじめまして、こんにちは。 2015年10月に入社し、AEプラットフォームチームに配属されました新人エンジニアのLeonです。

来日して3ヶ月も満たない外国人社員に、まさか書き物のお鉢が回ってくるとは思いませんでした。 不束者ですか、どうぞよろしくお願いいたします。

今回は、私が入社早々関わらせていただいたこのブログのちょっとした遊び心について書こうと思います。

実際に見ていただく方が早いと思いますので、Google Chromeをお使いの方はF12(Windows) または CommandOptionI(Mac)を押してみてください。

この様にSUUMOのマスコット、スーモ君が求人メッセージと共に表示されますね。 f:id:recruit-sumai:20170310111241p:plain

※ Edge及びIEの方は申し訳ありませんが、対応しておりません

コンソールログへの描写

このスーモ君、画像を出力しているわけではありません。ブラウザデベロッパーツールのconsole.log()を応用して描画しています。デバッグでよく使われるconsole.log()ですが、出力される内容は%cを使用してスタイルを当てることが可能です。

文字に色をつけたり
f:id:recruit-sumai:20170310111411p:plain

背景色をつけたり
f:id:recruit-sumai:20170310111421p:plain

色々いじってSUUMOのロゴに似せてみたりすることも出来ます。 f:id:recruit-sumai:20170310111435p:plain

画像は表示できないのか

少し前までは、スタイルにconsole.log()を入れることで画像の直接出力が可能でしたが、私がこれの実装に関わった時点(2015年11月)で当該機能は無効化されていました。調べてみると、画像のURLが参照されることで、どのユーザーがコンソールを開いたかがサイト側に伝わってしまうため、プライバシー保護の観点からchroniumの中の人達が対応したということらしいです。( * 実はこの対応を回避して画像を挿入できる裏ワザ的な物は存在するのですが、問題の性質上遅かれ早かれ対応されると思うのでここでは使用しておりません。

迷走の結果・・・

画像は使えないけど、文字だけでは面白みがない、、、 使えるスタイルだけでどうにか出来ないかと試行錯誤を重ねてみました。

スーモ君に見えなくも無い絵文字を使ってごまかしてみたり、、、 f:id:recruit-sumai:20170310111459p:plain

border-radiusをつかって丸みをつけようと思ったらコレジャナイ感溢れる物になったりも、、、 f:id:recruit-sumai:20170310111518p:plain

最終的には古き良きドット絵形式に落ち着きました。 このdot_suumopngが、こうなります!

f:id:recruit-sumai:20170310111528p:plain

コード解説

以下は最初期のコードの一部です。

console.log(
'%c %c %c %c %c %c %c %c %c %c %c %c %c %c %c \n'+
'%c %c %c %c %c %c %c %c %c %c %c %c %c %c %c \n'+
'%c %c %c %c %c %c %c %c %c %c %c %c %c %c %c \n'+
'%c %c %c %c %c %c %c %c %c %c %c %c %c %c %c \n'+
'%c %c %c %c %c %c %c %c %c %c %c %c %c %c %c \n'+
'%c %c %c %c %c %c %c %c %c %c %c %c %c %c %c \n'+
'%c %c %c %c %c %c %c %c %c %c %c %c %c %c %c \n'+
'%c %c %c %c %c %c %c %c %c %c %c %c %c %c %c %c   私達と一緒に働きませんか?\n'+
'%c %c %c %c %c %c %c %c %c %c %c %c %c %c %c %c   http://www.recruit-sumai.co.jp/careers/engineer/\n'+
'%c %c %c %c %c %c %c %c %c %c %c %c %c %c %c \n'+
'%c %c %c %c %c %c %c %c %c %c %c %c %c %c %c \n'+
'%c %c %c %c %c %c %c %c %c %c %c %c %c %c %c \n',

//~~~~~以下略~~~~~

まずはドット絵を描くキャンバスを全角スペースで構成、ここでは12×15マスを確保しています。 文言に関しては該当部分に%cを追加するだけなのでここで考慮する必要はありません。


//~~~~~前略~~~~~

//1段目
'background-color:white',
'background-color:white',
'background-color:white',
'background-color:#A0D174',
'background-color:#69B723',
'background-color:#69B723',
'background-color:#69B723',
'background-color:#69B723',
'background-color:#69B723',
'background-color:#69B723',
'background-color:#69B723',
'background-color:#A0D174',
'background-color:white',
'background-color:white',
'background-color:white',

//~~~~~中略~~~~~

//12段目
'background-color:white',
'background-color:white',
'background-color:#706E77',
'background-color:#706E77',
'background-color:#white',
'background-color:#white',
'background-color:#white',
'background-color:#white',
'background-color:#white',
'background-color:#white',
'background-color:#white',
'background-color:#706E77',
'background-color:#706E77',
'background-color:white',
'background-color:white'
);

%cがスタイルの区切りとなるので、それぞれにbackground-color:を当てて色を塗っていくイメージです。

コードの自動生成

手動でやるにはなかなか大変な作業だったので、先輩方にご助力いただき自動生成ツールを作成しました。 画像を読み込みサイズに合わせたキャンバスと、ピクセル毎にスタイルを吐き出す仕組みです。 f:id:recruit-sumai:20170310111557p:plain

手動で書いていたコードは可読性も考慮しなくてはならず、結果随分冗長な物になってしまいました。 ロード時間への影響も心配だったので、自動化する際にどうにか圧縮できないか試行錯誤し、下記の短縮方法を生成ツールに盛り込みました。

  • %c毎に次のスタイルが適応されるため、連続した同じ色の複数ピクセルは一度のスタイル指定で事足りる。
  • 右側の余白ピクセルは不要なので削る。
  • 省略できるカラーコードは短い方(3桁)に置換する。
  • background-color:background:に省略

最終的に208行6.86KBから60行3.34KBまで容量を削ることが出来ました。 下記最終版コードはコンソールへコピペで実行可能です。

console.log('%c   %c %c       %c \n' + '%c  %c %c %c        %c \n' +
'%c %c %c %c %c %c %c    %c %c %c %c \n' +
'%c %c %c %c %c %c %c   %c %c %c %c %c \n' +
'%c %c %c %c %c %c     %c %c %c %c %c   ' + 'リクルート住まいカンパニーでは、\n' +
'%c %c %c           %c %c   ' + 'エンジニアを募集しています。\n' +
'%c %c %c           %c %c %c  %c' + 'http://www.recruit-sumai.co.jp/careers/engineer/' + '%c\n' +
'%c %c %c           %c \n' + '%c  %c %c         %c \n' +
'%c   %c         \n' + '%c   %c %c       %c \n' +
'%c  %c  %c       %c  ', 'background:transparent',
'background:#a0d174', 'background:#69b723',
'background:#a0d174', 'background:transparent',
'background:#a0d174', 'background:#55ad06',
'background:#69b723', 'background:#a0d174',
'background:transparent', 'background:#b3db90',
'background:#5fb215', 'background:#69b723',
'background:#fefefe', 'background:#69b723',
'background:#6db92a', 'background:#fefefe',
'background:#69b723', 'background:#5fb214',
'background:#b3db90', 'background:transparent',
'background:#5db111', 'background:#69b723',
'background:#fefefe', 'background:#000', 'background:#fefefe',
'background:#69b723', 'background:#fefefe', 'background:#000',
'background:#fefefe', 'background:#68b621',
'background:#89c652', 'background:transparent',
'background:#60b412', 'background:#69b723',
'background:#6dbb28', 'background:#fefefe',
'background:#69b723', 'background:#fefefe',
'background:#69b624', 'background:#69b723',
'background:#60b412', 'background:t', 'background:transparent',
'background:#000', 'background:#69b723', 'background:#000',
'background: transparent', 'background:#000',
'background:#60b412', 'background:#69b723',
'background:#60b412', 'background:#000',
'background:transparent', 'color: blue', 'background: red',
'background:transparent', 'background:#70ba2d',
'background:#69b723', 'background:#70ba2d',
'background:transparent', 'background:#61a527',
'background:#69b723', 'background:#61a527',
'background:transparent', 'background:#69b723',
'background:transparent', 'background:#000',
'background:#61a527', 'background:#000',
'background:transparent', 'background:#000',
'background:transparent', 'background:#000');

最後に

仕事感がやや薄めな機能かもしれませんが、私たちのサイトに興味を持っていただき、ここどうなってるんだろう?とコンソールを開いていただいた好奇心旺盛な方々への、ささやかな感謝の気持ちとして実装させていただきました。

皆様もこれを参考に、ご自身のサイトのコンソールに何か仕込んでみては如何でしょうか? きっとサイトを訪れてくれる方々への良い御持て成しになると思います。