ジャバケモノを愛でる
前回の紙吹雪のコードを見つけた後「他にもおもしろいものないかなぁ～」と探していたらこちらのかわいらしいものを見つけました。
マウスを動かすとそちらの方へと視線を移し、ドラッグすると一緒についてきてくれます。また離れたところでクリックすれば両手を伸ばして飛びよってきてくれる愛らしいやつ。
なのにBakemonoなんて名付けられちゃって…。
クリックしたりドラッグして愛でてあげてください。
ただそのときはリンクを踏まないようにご注意ください。
※申しわけございませんが、「記事内にJavaを仕込む手順」はここよりすこし隔たった本記事中盤からはじまります。
追記（2016年9月29日）
Bakemonoを常時フラスコの外に出しておきますと諸々支障がありましたので、下の「Bakemonoスイッチ」on／offで消えたり現れたりするようにしました。
ルドンさんのBakemonoの画像をジャバケモノの下に描画させるようにした結果、ジャバケモノの手とマウスカーソルの位置がズレるようになってしまったり、テキストがサイドバーにまでめり込んだりとまだまださまざま問題点がございますが、まあこれはご愛嬌ということで。
結局どうしたかといいますと…
<p class="show-button">Bakemonoスイッチ</p>
<div class="hide-area">
<div id="visible">
【ここにジャバケモノの下に描画したい画像やテキストを入れてください。】
</div>
<canvas id="world">bakemono</canvas></div>
というコードと、
<style type="text/css"><!--
.show-button{
display: inline-block;
border: 2px solid #FFC0CB;
color:#FFC0CB;
border-radius: 5px;
padding: 1px 8px;
cursor: pointer;
}
.show-button:hover{
background: #FFC0CB;
color: #fff;
font-weight: bold;
}
.hide-area{display:none;padding-bottom:800px;}
#visible{position:absolute;}
--></style>
といったようなコードを記述します。
下のコードの「.hide-area{display:none;padding-bottom:800px;}」の「800px」のところはPC表示とスマホ表示で確認しながらほどよい数字に調整してあげてください。
そして忘れちゃならない「Bakemono」のサイトからコピペした「Java Script 704 lines」の105、106行目にある
canvas.style.left = (window.innerWidth - canvas.width) * .5 + 'px';
canvas.style.top = (window.innerHeight - canvas.height) * .5 + 'px';
を消します。
するとなんということでしょう。下の「Bakemonoスイッチ」を押したときのようになります。
ちなみにこのBakemono『鋼の錬金術師』のフラスコの中の小人をモデルとしているようです。
記事内にJavaを仕込む手順
参考にしたサイトは紹介されているけれど、それで結局「わたしが自ブログでそれを再現するにはどうしたらいいの？なんでそれ書いといてくれないかなぁ」と嘆かれておられる方があるのではないかと思いまして、以下にブログ全体ではなくその記事限定でこのようなアニメーションを動かす方法をご紹介いたします。
方法は至極簡単で、たとえば上にあげましたjsdo.itで説明いたしますと、「Java script ○○ lines」というタブをクリックし、下に表示されたコードをすべてコピーして、はてなブログの場合でしたら「編集見たまま」ではなく「HTML編集」に貼り付けます。
貼り付けましたらそこに<script></script>と打ちこんでください。
打ちこみましたらまた先ほどのページへと戻り、「Java script ○○ lines」の隣の「HTML ○○ lines」タブをクリックし、下に表示されたコードをコピーして「HTML編集」の先ほど打ちこみました<script>と</script>の間に貼り付けます。
次に<style type="text/css"></style>と打ちこみまして、またまた先ほどのページへと戻りまして、今度は「HTML ○○ lines」の隣の「css ○○ lines」タブをクリックして下に表示されたコードをコピー。
そのコピーしたものを「HTML編集」の<style type="text/css">と</style>の間に貼り付けます。
これでたいていは動くはずですので「HTML編集」の隣の「プレビュー」タブをクリックして確認してみましょう。
そのときPC表示だけでなく「スマートフォン」タブをクリックしてスマホ表示の方もちゃんと確認しておきましょうね！
というのもPC表示ではサイトデザインが崩れていなくても、スマホ表示でデザインが崩れてしまっていることがありますから。
ジャバらずハマってしまった方へ
「あんたの言う通りにコピペしただけなのに動かんやんかいさーウソつきー」となった方には３つ試していただきたいことがあります。
まず１つ目は「HTML ○○ lines」のコードに<canvas></canvas>のような記述があった場合には、その<canvas>と</canvas>の間になんでもいいです、文字数もテキトウでいいのでなにか文字を打ちこんでください。
一旦これでプレビュー確認してみてください。
これでダメなら次！２つ目。
最後にコピペしたcssコードのところを見てください。打ちこんで頂いた<style type="text/css">の直後の文字、つまりコピーしたコードの先頭の文字に当たりますが、これが赤くなっていませんか？その場合は先頭に半角で「#」か「.」が必要であると考えられます。ですからどちらか一方を加えてプレビューでご確認頂けますでしょうか？変化がなければもう一方でも試してみてください。
どちらでも体勢変わらずダメダメでしたら３つ目。
せっかく打ちこんで頂いて恐縮ですが、コピペしたcssコードを<style type="text/css"></style>ごと消してみて頂けますでしょうか？
これでどうでしょう？
Bakemonoの場合
たとえばこちらで先刻よりウゴウゴうごめいておりますジャバケモノのコードの場合がそうなのですが、cssコードの先頭の文字「body」が赤くなっていて効いていないので「#body」か「.body」としなければならないのです。「#」か「.」を加えることで「body」の文字が青くなりましたでしょう？
でもこれでおわりではありませんよ。プレビューで見てみてください。「#」があってもなくてもどちらでもうまく動いているように見えるでしょう？ですがさにあらず、スマホ表示ではむしろ「#」があると背景色が変わっていたり文字が大きくなっていたりしてデザイン大崩れします。
「それなら「#」ない方がいいじゃ～ん」←はいっ。その通りでございます。
ですからcssコードを<style type="text/css"></style>ごと削ってしまうのです。するとちゃんと落ち着くはずです。
これはBakemonoのcssがbodyの背景とフォントサイズを指定しているからです。
他のものの場合はcssを指定してあげないとうまく動かないものがありますので、その辺のところは試しながらやってみてください。
（※body要素を指定しているということは１ページで表示することを想定しているからなのでしょうね。）
上記３つのことを試してみてもうまくいかなかった場合はごめんなさい。あとなにを試してみたらいいのかわかりません。
javaビギナーがjavaスクリプトをジャバジャバ組み合わせますとわたしのようにトライ＆エラーエラーエラーエラ～いこっちゃになりますしジャバジャバ重苦しくなってしまうので素直にそのまま使われた方がよいとおもいます。（どれほど重いのか初代iPad君で前回の紙吹雪を見てみようとしましたが、それはそれは見事に落ちまして、花見見物できませんでした。）
たいへんありがたいことにひねりを加えなければ基本コピペでいけるようにクリエイターさんたちが仕立てて公開してくださっていますから。
まとめ
「HTML編集」に
- 「HTML」はそのまま
- 「css」は<style type="text/css"></style>で囲み
- 「java（script）」は<script></script>で囲み
書き込む。
サイト全体のブログカスタマイズ方法として紹介されているコードもこのように記述することでその記事内限定で実装させることができます。
今回はただジャバケモノを動かしてみたかったのと、なんの意味もありませんがジャバジャバ言いたくなったというだけのものです。
以上、初心者が初心者に指南するJava scriptを実行させる方法モドキでした。おわり。
