console.log 装飾

JS祭り 4/25 LT

自己紹介

小林 慧一

・歩元株式会社 代表

・好きな言語 … C++・最近のブーム … 簿記

console.log 装飾

←これ

やってみよう

console.log('%chello', 'background-color: #f00;');

やってみよう

console.log( 'ABC%cDEF%cGHI', 'background-color: #f00; color: #fff', 'background-color: #0f0; color: #f00');

やってみよう

console.log('%chello', 'background-color: #f00; padding: 10px;');

やってみよう

console.log('%chello', 'background-color: #f00; padding: 10px; line-height: 100px;');

やってみよう

console.log('%chello', 'line-height: 100px; font-size: 50px; background-color: #f00; padding: 10px;');

やってみよう

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

やってみよう

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");');

アニメ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");');

ウェーブ　（デモ）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,'padding: ' + this.x + 'px; color: ' + this.color + ';','color: #fff'

);}

};var balls = [];for(var i = 0; i < 20; i++){

balls.push(new Ball(i));}setInterval(function(){

for(var i = 0; i < balls.length; i++){balls[i].frame();

}console.clear();for(var i = 0; i < balls.length; i++){

balls[i].render();}

}, 50);

他ブラウザ

・Chrome … イケる

・IE … 装飾対応してない

・Spartan … 謎・Firefox … console.clear() 対応してない

・Opera … イケる

参考

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