JavaScript
processing.js
FirefoxOS
fxos
Fx0

Processing.jsを使ってみる (3)

More than 3 years have passed since last update.


はじめに

前回はブラウザでProcessing.jsを試しました。今回は、Fx0でProcessing.jsを試してみたいと思います。Fx0はFirefox OSを搭載しているスマートフォンで、ブラウザで動作しているWebページをアプリとして動作させることができます。


アプリ化する

Webアプリとして動作させるにはHTML/CSS/JavaScript等の他に以下の2ファイルが必要になります。アイコンファイルはなくてもFirefox OSデフォルトのアプリアイコンが使われますが、あったほうが見栄えがいいですね。

マニフェストファイル

マニフェストファイルはアプリを格納するフォルダの直下に置く必要があります。


manifest.webapp

{

"name": "ProcessingJS",
"description": "Processing.js demo",
"type": "web",
"launch_path": "/index.html",
"locales": {
"en-US": {
"name": "ProcessingJS",
"description": "Web app Processing.js demo"
}
},
"icons": {
"128": "/icon128x128.png"
}
}

128×128pxのアイコン

アイコンはアプリを格納するフォルダ内の適当な場所に置いて、場所をマニフェストファイルで指定します。

アイコン(icon128x128.png)はInkscapeで作成しました。

icon128x128.png


Fx0でProcessing.jsを動かす

Processing.jsを使ったアプリを作成してFx0で動かします。Processing.jsは二つの方法で実装できるので両方とも試します。


  1. Processingのみを使う方法

  2. JavaScriptと共にProcessingを使う方法


1. Processingのみを使う方法


1.1 アプリの実装について

ファイル構成

ファイル名
内容

processing.js
processing.jsライブラリ

index.html
エントリポイントとなるhtmlファイル

processing.pde
processing言語で記述されているファイル

manifest.webapp
マニフェストファイル。上の「アプリ化する」にて作成したファイル。

icon128x128.png
128×128pxのアイコン。上の「アプリ化する」にて作成したファイル。

index.html

前回のWebページにて動作させたときからviewportの定義を追加しています。

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta charset="utf-8">
<title>Processing Demo</title>
<script src="./processing.js"></script>
</head>
<body>
<canvas data-processing-sources="processing.pde"></canvas>
</body>
</html>

processing.pde

void setup() {

size(200, 200);
background(125);
fill(255);
noLoop();
}

void draw() {
text("Hello World!", 20, 20);
}


1.2 アプリの実行について

作成したアプリをFirefoxに標準で搭載されているWebIDEを使ってFx0にインストールします。

WebIDEで

①[プロジェクト]→[パッケージ型アプリを開く]で作成したアプリを格納したフォルダを指定する

②上部の再生ボタンを押してアプリをインストールし実行します

webide.png

アプリを実行すると以下の画面が表示されます

アプリのインストールが成功するとホーム画面にアイコンが追加され、以後はアイコンタップによりアプリの起動ができます。

app_install.png


2. JavaScriptと共にProcessingを使う方法


2.1 アプリの実装について

ファイル構成

ファイル名
内容

processing.js
processing.jsライブラリ

index.html
エントリポイントとなるhtmlファイル。今回はprocessing.jsを使うJavascriptコードもこのファイルに記述します。

manifest.webapp
マニフェストファイル。上の「アプリ化する」にて作成したファイル。

icon128x128.png
128×128pxのアイコン。上の「アプリ化する」にて作成したファイル。

index.html

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta charset="utf-8">
<title>Processing Demo</title>
<script src="./processing.js"></script>
</head>
<body>
<canvas id="canvas" width="200" height="200"></canvas>

<script>
function sketchProc(processing) {
processing.setup = function() {
processing.size(200, 200);
processing.background(125);
processing.fill(255);
processing.noLoop();
}

processing.draw = function() {
processing.text("Hello World!", 20, 20);
}
}

var canvas = document.getElementById("canvas");
var p = new Processing(canvas, sketchProc);
</script>

</body>
</html>


2.2 アプリの実行について

アプリの実行方法は1.2と同様で、実行時の画面も1.2と同様でした。


おわりに

前回、ブラウザで動作させたProcessingのコードをアプリ化してFx0(Firefox OS)でも同様に動作することが確認できました。次回はもう少し凝ったサンプルを動かしたいと思います。

Processing.jsを使ってみる

Processing.jsを使ってみる (2)

Processing.jsを使ってみる (4)