Drip 'n' Snip

ドリップン・スニップ

あなたの生活役立つWEB情報イッパイお届け
p5js

p5.jsでwebページにアニメーションを作ろう - 02 webサイトで公開しよう

2016/08/04


さて、前回にご紹介したp5.jsですが(おや、まだご覧になっていない?では1つ前の記事に戻ってくだされ…)、とりあえず画面が青く塗りつぶされていく何かを作るところまでやりました。

中で何が起こっているかはさておき、今回は作ったものをwebサイトで公開する、というのをやってみたいと思います。

自分のwebサイトで公開しよう!

1,まずwebサイトを用意します。(ご自分で頑張ってください!lolipopなどお安いですよ)

2,p5.jsのエディタの画面でCommand + k を押します。(windowsの方はcontrol + k )

すると、中に

index.html

libraries

sketch.js

Untitled

の3つのファイルが入っているフォルダが開いたと思います。

このindex.htmlをブラウザで開くと、なんとさっきのスケッチ(p5.jsでは作ったファイルの事をスケッチと呼びます)と同じものがブラウザで動いているではないですか!

Untitled

内容を見てみると、こんな感じになっています。


<!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を設置する位置を指定する方法などもありますので、いつか紹介したいと思います。
今日はここまで、お疲れ様でした!

NEXT
p5.jsでwebページにアニメーションを作ろう - 03 自由に作れるようになろう

  関連記事

p5js
p5.jsでwebページにアニメーションを作ろう - 01

P5.jsでインタラクティブなページを作ろう こんにちは、僕です。 普段はメディ ...

artboard
【スクリプトあり】p5.jsで簡単に要素にパーティクルを追加する

こんにちは! 時々、webサイトのヘッダや背景に、こういうパーティクルが動いてい ...

p5js
p5.jsでwebページにアニメーションを作ろう - 04 図形を描いて動かそう

さて、前回は最初にご紹介したコードのを解説しました。 しかし、あれだけでは、どう ...

p5js
p5.jsでwebページにアニメーションを作ろう - 03 自由に作れるようになろう

さてさて、前回と前々回で、とりあえず何かを作ってweb上に公開する、というところ ...

artboard
文字と色を指定するだけ!ファビコンジェネレーター

はい、こんにちは!僕です。 最近faviconを作る機会が多かったのですが、大抵 ...

-p5.js
-