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

Ridery

Webのデザインやエンジニアリング、カメラや写真のことをメインに日常生活もたまに書いています。

座右の銘は遊び心。console.log で遊べ。

エンジニアリング デザイン

はじめまして、ライダーです。

この記事は、OthloTech Advent Calendar 2016 3日目の記事です。

座右の銘は遊び心。console.log で遊べ。

座右の銘は遊び心」なんていう遊び心もクソもないありきたりな言葉で始まりますが、今日はconsole.logで遊びましょう。

みなさんご存知、DevTool。GoogleChromeであればCommand + Option + iで表示できますよ。

DevToolにアスキーアート

こういうの見たことありませんか?

例えば、tumblrだとこう。

f:id:mtmtkzm:20161202185351p:plain

また、手前味噌ですが、僕(を含むメンバー)が過去に制作したWebサイトではこんなものを実装しました。

f:id:mtmtkzm:20161202190951p:plain

ご覧の通り「GEIKO SAI 2015 Shif+」というアスキーアート(?)と、Consoleパネルの「GEIKOSAI 2015」というカラフルな文字がみえますね!

僕はこういったなんでもない遊び心が、痺れるほど好きなのです。

そんなわけでこの度、OthloTechのロゴを出力するconsole.log()をつくってみました。

この記事を読むにあたり、OthloTechを知らずとも一切支障ありませんが、せっかくなので「OthloTech?」な方は、本Advent Calendar 1日目の記事をじっくりお読みください。

console.logで出力する文字は、スタイルをあてることができる

上で紹介したConsoleパネルのカラフルな文字は、画像ではなくスタイルのあたったテキストです。

console.logで出力される文字列に対しスタイルをあてるための構文(?)は、
console.logの第一引数に出力したい文字列、第二引数にstyleをぶっ込みます!

こんな感じ。

console.log('出力したい%c文字列', 'color: red;');

%c以降の文字列に対し、第二引数のスタイルが適用される仕組みです。

Command + Option + iで、Consoleパネルを表示させ、これをコピー&ペーストしましょう。

出力したい文字列 になってますね!

f:id:mtmtkzm:20161202194303g:plain

OthloTechのロゴを再現する!

本日の目標

f:id:mtmtkzm:20161202194751p:plain

スタイルを分離する

まずは文字を白っぽくしましょう。

文字を白っぽくすると背景に埋もれてしまいそうなので、ついでに背景色をつけて、さらに余白も設定しましょう。
白は#eeeeee、黒は#333333

色選びが雑ですね。ごめんなさい🙇

さっきと同じように、第二引数にスタイルを追加して......と、がんがんいきたいところですが、今後、背景色や余白のスタイルを適用させることは明らかですので、これらを別で定義し見通しをよくしましょう。

こんな感じ。ひとつひとつのスタイルをつなぎ合わせていきます。見やすいですね。

var base =
  'font-size: 40px;' +
  'color: #eeeeee;' +
  'background-color: #333333;' +
  'padding: 30px;' +
  'line-height: 120px;';

console.log('%cOthloTech', base);

これをConsoleパネルにコピー&ペーストしてみてください!一気にそれらしいものが表示されたのではないでしょうかーー??ちなみに、「なんだこのline-height: 120pxって?」と思った方は外してみると良いです。ちょっと気持ち悪い表示になります。

f:id:mtmtkzm:20161202234030g:plain

フォントの設定

GoogleFontsで提供されているTitillium Webという書体です。......なのですが、ローカルで持っているものしか指定できませんでした。悔しい。。
ひとまずWin/Mac共通のVerdanaという書体を指定しておきます。

さて、気を取り直して、ウェイトの設定をしましょう。

OthloTechの間にもうひとつ%cを追加しました。
これで2個目の%c以降は第三引数のスタイルが適用されるようになりました🎉

なので、baseスタイルに追加する形で、boldlightを定義します。

var base =
  'font-family: "Verdana";' +
  'font-size: 40px;' +
  'color: #eeeeee;' + 
  'background-color: #333333;' +
  'padding: 30px;' +
  'line-height: 120px;';

var bold =
  'font-weight: Bold;' +
  'padding-right: 0;';

var light = 
  'font-weight: Regular;' +
  'padding-left: 0;';

console.log('%cOthlo%cTech', base+bold, base+light)

これを実行すると?

f:id:mtmtkzm:20161202233918g:plain

これにて、完成です🎉🎉🎉🎉🎉!!

おわりに

console.log内でどうにか上手い具合にWebフォントを読み込みたかったのですがどうも上手くいかず。
目標達成度は80%としておきます!

実用的かというとそうでもないものでしたが、何かいい使い道があればおしえてください🙆

おまけ

背景画像を設定すれば画像を挿入することもできます。

var image = 
  'font-size: 0px;' +
  'line-height: 60px;' +
  'padding: 20px 109px;' +
  'background: url("http://www.othlo.tech/images/logo.png") no-repeat center center;';

console.log('%c+', image);

あっという間ですね😂

f:id:mtmtkzm:20161202235751g:plain

それでは、良いconsoleライフをお過ごし下さい。