ブログ

BLOG

2017年以前の旧ブログ

制作のこと

踊る開発者ツール!?

OB・OG Other Blog

暑い夏の夜の事でした…

楽しみに待っていた告知サイトがオープンしたとの事で
ウキウキしながらサイトにアクセスしたんです。

サイトにアクセスしてすぐに、職業病のせいか無意識にF12を押し開発者ツールを開いていました。

そこでとんでもない物を見てしまったのです。

開発者ツールの中で…何かが踊っている…！？

ページの中で要素をアニメーションさせるのはよくある事ですが…
ソースコードの中、divだのpタグだのが並んでいる中で何かが踊っていたのです…。

あれは一体なんだったのでしょうか。
数ヶ月たった今でも忘れられません…。

 

まなべぇです。
上の話は実際に私が体験した話です。
今回は開発者ツールの中で踊っていた何かの正体に迫ってみました。

その正体とは・・・

色々ななワードで調べて見ましたが、なかなかしっくりくるものがありませんでした。
調べて数日、やっとそれらしきサイトを見つけることができました。

DOM-ANIMATOR.JS
http://tholman.com/dom-animator/

上のURLでF12を押してみると…
開発者ツールの中でおサルが動いているではありませんか！！
夏に見たものとほぼ同じものっぽいです。長い間気になっていたのでスッキリしました。
自分でも設置できそうなので早速試してみることにしました。

 

早速試してみた

1. jsをダウンロード

 http://tholman.com/dom-animator/
Source & Instructionsからダウンロードします。

2. htmlに読み込む

<head></head>の中で読み込ませます。

<script src='js/dom-animator.js'></script>

 

3. 動かしたいものを用意する

イラストやロゴやテキストなど動かしたいものを用意します。
今回は弊社制作のLINEスタンプ「うごくマッチョボーイズ」からクルクル回っているスタンプをセレクトしました。

4.イラストをAAに変換

ソースコード内で表示できるようにアスキーアート（AA）に変換します。
変換にはこちらのサイトを利用しました。
透過背景だとイラストが書いてある範囲しか変換されず、横幅にブレが出てきてしまったので
背景を黒色で塗りつぶして変換しています。

 

5.jsの中に投入

<script>
var domAnimator = new DomAnimator();
var frame1 = [// 1フレーム目
'',//コンマで繋いで改行
'',
'(˘ω˘)'
];
var frame2 = [// 2フレーム目
'',
'(･ω･)',
'(˘ω˘)'
];
var frame3 = [// 3フレーム目
'(´ω`)',
'(･ω･)',
'(˘ω˘)'
];
domAnimator.addFrame(frame1);
domAnimator.addFrame(frame2);
domAnimator.addFrame(frame3);
domAnimator.animate(600);//秒数
</script>

10コマほどマッチョAAを切り貼りして設定し…

 

完成！

ぜひとも下のURLから、開発者ツールの中でクルクル回るマッチョボーイズの姿を目に焼き付けて下さい。

【DEMO】

ChromeとFirefoxで動作確認済です。IEとEdgeでは動きませんでした…

 

試してみた感想

ソースコードまで見る人は少ないとは思うのですが…
ちょっとしたお遊び要素にいかがでしょうか？

BACK BLOG