Visual Studio 2015で追加されたVisual Studio Tools for Apache Cordovaを使ったプロジェクトで、Processing.jsを使ってみたので、メモ。
そもそもProcessing.jsって
Processingというグラフィック作成向けの言語があります。
これをJavascriptから利用可能にしたのがProcessing.js。Javascriptから比較的簡単に、イラストやアニメーションを作成することができます。
Processing.jsをVisual Studioから使う
まず、Visual StudioでCordovaプロジェクトを作成します。
次にソリューションマネージャのプロジェクトの右クリックメニューから、NuGetパッケージマネージャを表示し、Processing.jsをインストールします。
読み込んだら、Processing.jsをwwwフォルダの下に移動して、使いたいHTMLファイルに、読み込み処理を追加します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<!-- 略 -->
<!-- Processing.js -->
<script src="scripts/processing/processing-1.3.6.min.js"></script>
<!-- Cordova のリファレンス。アプリのビルド時にアプリに追加されます。 -->
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
これで読み込みは完了
実際に使うには
いくつか方法があるようですが、とりあえず一番無難な方法としては、Prosessingスクリプトファイルをあらかじめ作成し、それをHTMLのタグのdata-processing-source属性で設定すること。
void setup(){
// 設定初期化を行うコードブロック。最初に１回だけ呼び出される(size()関数はここでしか呼べない？)
size(120, 120);
}
void draw(){
// 描画を行うコードブロック。毎フレームごとに呼び出されるので、アニメーションも可能
background(255);
smooth();
strokeWeight(10);
stroke(#7799dd);
ellipse(width / 2, height / 2, width / 2 - 10, height / 2 - 10);
}
そして、HTMLにcanvasタグを埋め込みます。
<!-- 略 -->
<canvas id="test" data-processing-sources="main.pjs" style="width:120px; height: 120px;"></canvas>
<!-- 略 -->
これで実行してみると、画面上に円が描かれます。
その他いろいろなテクニック
その他、Processing.jsを使うにあたり、覚えておくと便利なこといくつか
Processing.jsの関数をJavascriptから呼び出す。
Processing.jsを読み込むと、Processingというグローバルなオブジェクトが参照できるようになります。
このProcessingオブジェクトのgetInstanceById()メソッドでスクリプトへの参照が取得できるので、そこでメソッドを呼び出してあげれば良いです。
var iProcessing;
(function () {
"use strict";
document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );
function onDeviceReady() {
document.addEventListener('pause', onPause.bind(this), false);
document.addEventListener('resume', onResume.bind(this), false);
iProcessing = Processing.getInstanceById("timer");
iProcessing.something(); // <- Processing側で定義した関数
WinJS.UI.processAll();
};
function onPause() {
};
function onResume() {
};
} )();
引数つきの関数も呼出し可能です。
なお、未確認ですが、Javascript側でintの変数を渡した場合、どうもProcessing内部では文字列型になってしまう場合があるようです。その場合は、Processing側でint()関数などを使って整数型に直してあげてください。
逆に、Processing.jsから、Javascriptの関数を呼び出す
何らかの描画が完了したときのコールバックを行いたい場合など。
Javascript→Processing.jsと違い、Processing.js側からは常にJavascriptメソッドがグローバルで見えている状態なようですので、そのまま関数を呼び出してしまってOKです。
var iProcessing;
function javascriptMethod(){
// do something
}
(function () {
// 後略
// 前略
javascriptMethod();
// 後略
ここで注意したいのは、Visual Studio Tools for Apache Cordovaでは、初期状態で、コード全体を(function () { } )();で囲ってあります。
そのため、この中に関数を定義してしまうと、スコープの問題でProcessing.js側から関数が見えなくなってしまうので、注意が必要です。
その他リファレンスなど
その他関数についてわからないところがあれば、公式のサイトを見てしまうのが一番手っ取り早いです。
実際にコードを書いて確かめられるところもありますので、試してみると良いでしょう(ただし、アニメーション処理などProcessing.jsとは若干動作が異なることがありますので注意)
jsdo.itでもProcessing.jsをロードしてコードが書けます。こちらを使うのも良いでしょう。
なお、作例というわけではありませんが、Processing.jsを使ったプロジェクト(自作)は以下。Cordovaへの組込み例などわからないところがあれば以下を見ると良いでしょう。