p5.jsでwebページにアニメーションを作ろう - 02 webサイトで公開しよう
2016/08/04
さて、前回にご紹介したp5.jsですが（おや、まだご覧になっていない？では1つ前の記事に戻ってくだされ…）、とりあえず画面が青く塗りつぶされていく何かを作るところまでやりました。
中で何が起こっているかはさておき、今回は作ったものをwebサイトで公開する、というのをやってみたいと思います。
自分のwebサイトで公開しよう！
１，まずwebサイトを用意します。（ご自分で頑張ってください！lolipopなどお安いですよ）
２，p5.jsのエディタの画面でCommand + k を押します。（windowsの方はcontrol + k ）
すると、中に
index.html
libraries
sketch.js
の３つのファイルが入っているフォルダが開いたと思います。
このindex.htmlをブラウザで開くと、なんとさっきのスケッチ（p5.jsでは作ったファイルの事をスケッチと呼びます）と同じものがブラウザで動いているではないですか！
内容を見てみると、こんな感じになっています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled</title>
<script src="libraries/p5.js" type="text/javascript"></script>
<script src="libraries/p5.dom.js" type="text/javascript"></script>
<script src="libraries/p5.sound.js" type="text/javascript"></script>
<script src="sketch.js" type="text/javascript"></script>
<style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
</head>
<body>
</body>
</html>
これ、JavaScriptを普段使われている方でしたらすぐにピンと来たと思います。
そうでない方も、上から順番に見ていけば簡単に理解することができます。
<script src="libraries/p5.js" type="text/javascript"></script> <script src="libraries/p5.dom.js" type="text/javascript"></script> <script src="libraries/p5.sound.js" type="text/javascript"></script>
この部分で、JavaScriptのライブラリをインポートしています。
そして、その次の
<script src="sketch.js" type="text/javascript"></script>
この部分が、前回書いたアニメーションの内容を読み込んでいる部分です。
最後に、
<style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
この部分で、どこにcanvasを設置するか、というのを決めています。
この場合cssで指定しているので、cssを書き換えれば場所を変更したりすることも出来ます。
つまり、最も簡単に作ったファイルを外部に公開するためには、このフォルダの中身をそのままftpか何かで自分のwebサイトのスペースにアップロードしてしまえば良いのです。
ただし、index.htmlという名前は多分既に使われているので、何か適当な名前にリネームしましょう。
また、jsのライブラリなどを入れておく場所などを決めている場合には、ファイルのパスを適宜変更してあげましょう。
まとめ
さて、これでとりあえず公開することが出来るようになりました。
次回からは内容に入っていきましょう。
また、このcanvasを設置する位置を指定する方法などもありますので、いつか紹介したいと思います。
今日はここまで、お疲れ様でした！
関連記事
-
文字と色を指定するだけ！ファビコンジェネレーター
はい、こんにちは！僕です。 最近faviconを作る機会が多かったのですが、大抵 ...
-
p5.jsでwebページにアニメーションを作ろう - 08 オブジェクト
こんにちは、人間の僕です。（"株式会社人間"様とは無関係です） 前回に引き続きp ...
-
p5.jsでwebページにアニメーションを作ろう - 05 何度も繰り返そう
かなり間が空いてしまいました、僕です。 前回までの記事を並べておきますので、ざっ ...
-
【スクリプトあり】p5.jsで簡単に要素にパーティクルを追加する
こんにちは！ 時々、webサイトのヘッダや背景に、こういうパーティクルが動いてい ...
-
p5.jsでwebページにアニメーションを作ろう - 03 自由に作れるようになろう
さてさて、前回と前々回で、とりあえず何かを作ってweb上に公開する、というところ ...