ごくまれにプログラミング熱が湧いてくる阿部洋太郎です、こんにちわー。さて、自信ワーク体験プログラムを修正するためにJavaScriptを調べている内に「アニメーションも作ってみるか」という気持ちが湧いてきました。
<div></div>で囲むとWordPress記事中でJavascriptを動かせる
ということで、「JavaScript アニメーション」で検索。canvas要素を使う方法が割合簡単そうに思えました。ということでコードをコピーして貼り付けて・・・と思ったんですが、まず「どこに貼り付けたらいいん？」というところでつまづきました。
WordPressの記事は<body></body>に相当する。たぶん。知らんけど。
参考になるページ探して、コードコピーして、貼り付けてみて、動かしてみて、「あかんやん」ってなって、他のページ探して、・・・を繰り返していく内に、「htmlのタグは記事書く場所（テキスト）に直接貼る」「script部分はその後ろに<div></div>で囲んで貼る」でcanvasを書けるようになりました。
こんな感じ
<canvas id=”canvasの名前” width=”400″ height=”300″></canvas>
<div>
<script type=”text/javascript”>
ここに”中身”を貼り付ける
</script>
</div>
コードはyoppa orgさんから頂きました。
「じゃあ、次はアニメーションや」ということでコードコピーして貼り付けたんですが、
動かない。
「wordpress javascript 動かない」で検索すると、「この関数を付け加える」的なやり方がいろいろ出てきてやってみたのですが上手くいかず。そんな中で出てきたのが「不要な改行を消す」。WordPressでは改行時に自動で<p></p>タグが挿入されて、それが原因でプログラムが動かなくなることがある、という内容でした。で、やってみたらこれが当たりでした。
「コピペ⇒動く」まで完了
※ブラウザの種類によっては動かないことがあります。
・記事にhtmlのタグ（今回はcanvasタグとボタンタグ）を貼る。
・Scriptのコードをコピペして<div></div>で囲む。
・余分な改行を全部消す。
で、コードを貼り付けて動かすところまで出来ました。次は大学院でやってた自己複製プログラムにチャレンジしようと思います。
コメント