Help us understand the problem. What is going on with this article?

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

More than 5 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)

Souj
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした