console.log decoration

1. console.log 装飾
JS祭り 4/25 LT

2. 自己紹介
小林 慧一
・歩元株式会社 代表
・好きな言語 … C++
・最近のブーム … 簿記

3. console.log 装飾
←これ

4. やってみよう
console.log('%chello', 'background-color: #f00;');

5. やってみよう
console.log(
'ABC%cDEF%cGHI',

6. やってみよう
console.log('%chello', 'background-color: #f00; padding: 10px;');

7. やってみよう
console.log('%chello', 'background-color: #f00; padding: 10px; line-height: 100px;');

8. やってみよう
console.log('%chello', 'line-height: 100px; font-size: 50px; background-color: #f00; padding: 10px;');

9. やってみよう
console.log('%c ', 'line-height: 120px; font-size: 120px; background-image: url("https://www.
wpcloud.jp/wp-content/themes/wpcloud/images/footer_logo.png");');

10. やってみよう
console.log('%c ', 'line-height: 120px; font-size: 80px; background-size: 800px; background-repeat: no-
repeat; background-image: url("https://www.wpcloud.jp/wp-content/themes/wpcloud/images/footer_logo.png");');

11. アニメGIF (デモ)
console.log('%c ', 'line-height: 120px; font-size: 80px;
background-size: 32px; no-repeat; background-image: url("http:
//bbsimg.ngfiles.com/3/22805000/ngbbs4dd4532014dc7.gif");');

12. ウェーブ （デモ）
https://gist.github.com/kobake/6d8d3c71f940bbd49da2
function hex2(n){
var ret = Number(n).toString(16);
if(ret.length < 2)ret = '0' + ret;
return ret;
}
function rgb(r,g,b){
return '#' + hex2(r % 256) + hex2(g % 256) + hex2(b % 256);
}
var Ball = function(index){
this.x = 0;
this.index = index;
this.time = index * 10;
this.color = rgb(80 + index * 8, 50 + index * 5, 150 - index * 7);
this.frame = function(){
this.time += 3;
this.x = 100 + 100 * Math.sin(this.time / 180 * 3.1415);
}
this.render = function(){
console.log(
'%c■%c' + this.index,

13. 他ブラウザ
・Chrome … イケる
・IE … 装飾対応してない
・Spartan … 謎
・Firefox … console.clear() 対応してない
・Opera … イケる

14. 参考
・http://stackoverflow.com/questions/7505623/colors-in-javascript-console
・http://lab.aratana.jp/entry/2015/01/27/200107