JavaScript, p5.js のプログラミング

p5.jsの公式ページは http://p5js.org/

 

p5.jsのonline librariesは https://cdnjs.com/libraries/p5.js#  にあります。

p5.jsでお絵かきアプリ、ブラウザーで動きます。

プログラム(index.html, Symmetry.js)
Symmetry.pdf
PDFファイル 22.4 KB

index.htmlの
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.16/p5.min.js"></script>
を以下に変えるとlibrariesファイルをダウンロードする必要はありません。
 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>

Google Analyticsを活用する。

Google Analiticsでホームページが閲覧された統計を得るようにするには
http://jp-m.jimdo.com/jimdo-tips/google-analytics/
に説明があります。またその中のgoogleの設定ページを参照して、自分でhtmlなどで作成したホームページにも簡単に利用できます。

以下のサンプルプログラムの場合は3行目の様にgoogle analyticsに送信するように命令を挿入します。ただし、これはphpを用いている場合で、そうでない場合は指定されたコードをすべてコピーして同様に挿入(貼り付け)します。
2行目はスマホで見ると文字化けする場合があったので文字コードの指定を変更しています。

BluemixでテストしたSample code の index.phpはメインプログラムで以下の8行です。
<html>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<?php include_once("analyticstracking.php") ?>
<frameset cols="60%,40%">
<frame src="SampleJava2.html">
<frame src="sample1.html">
</frameset>
</html>

 

  

サーバーのサンプルホームページ(Bluemixにpushしています)を見る場合は
http://ichy3-html-java-test.mybluemix.net

スマホからも見ることができます。ただし、いずれもサーバー側で起動中である場合だけです。

上記index.phpのサブプログラム(SampleJava2.html):
上のリンク(url)のページに用いたサンプルコードです。写真をスライドさせるコードを追加しました。JavaScriptを簡単に使えるようにしたjQueryのbxSliderを用いて写真のスライダー機能を入れています。スマホから上記のリンクを開けば、画面タッチでスライドさせることができます。
html-javascriptサンプル.pdf
PDFファイル 39.8 KB

楽天アフィリエイトを設定する。

楽天アフィリエイトを設定してみました。
アフィリエイト affiliate とは自分のホームページに宣伝を掲載して、その商品がクリックされて沢山売れたらいくらかの報酬が得られるシステムです。
Amazonで始まったが、楽天など多くの通販サイトで行われています。
上記のリンク(url)を開きサブウインドウを開くボタンを押すと楽天の宣伝ページが開きます。
アフィリエイトを設定する方法の説明は  http://affiliate.rakuten.co.jp/guide/link/
にあります。
sample_html.pdf
PDFファイル 33.0 KB

因みに、このJimdoホームページでアフィリエイト広告を表示するにはJimdoにloginして[文章の追加]そして</>マークをクリックして、そこに、上記のpdfで説明した楽天アフィリエイト用のコードを貼り付けると、下のような宣伝写真が 表示され、写真をクリックすれば楽天のホームページの、この例ではPanasonic 4K TV の購入画面が表示されます。
これをクリックして購入されれば、私にリベートが支払われるはずです。
 

SlotMachine.html 三つ揃えば[おめでとう!]がでます。


SlotMachine.htmlのプログラム
SlotMachine_html.pdf
PDFファイル 30.0 KB

PaaS チャットアプリ IBM-Bluemix