このブログへの投稿/アップロードについて(コメントは誰でも、投稿は受講者+スタッフのみ)
コメント/投稿/ラベルについて(基本事項)投稿時間の設定(下書き/予定など)プログラム(ソースコード)を投稿する際の注意点Processingのプログラム(Applet)を表示する方法
ArduinoやProcessingについては「建築発明工作ゼミ2008」の方にまとめてあります。
秋葉原の電子工作マップ、Arduino販売店についてはこちら。 :

2009年6月14日日曜日

Processingのプログラムをブログ上で表示する方法

Processingでプログラムした内容をWeb上で表示する際の出力方法(applet)があります。
Processingのメニューバー「File>Export Applet」を選択するとそのプログラムのスケッチフォルダ内に「applet」というフォルダが出来上がり、その中に「.jar」、「.java」、「.pde」「index.html」、「loading.gif」という最低でも5つのファイルが出来上がります。通常のWebサイトに表示するには、これら全てをサーバへアップロードすればいいのですが、このブログ(blogger)では「.jar」ファイルがアップロードできないため、少し工夫が必要となります。

以下は、「freehand」(建築発明工作ゼミより)というファイル名のProcessingのプログラムをappletで出力し、できあがった「freehand.jar」ファイルだけを用いてこのブログに表示させる方法です。この場合、appletフォルダ内には「freehand.jar」、「freehand.java」、「freehand.pde」「index.html」、「loading.gif」の5つのファイルが含まれています。

・無料ホームページなどを利用してアップロード可能なサーバを用意。
 (今回の場合、FC2無料ホームページを利用:http://web.fc2.com
・そのサーバへ「freehand.jar」ファイルだけアップロードする。
 (アップロードファイルのパス:http://kousakudata.web.fc2.com/freehand/freehand.jar)
・アップロード先のパスをメモしておく。
・ブログの投稿欄に、以下のように
  width:画面幅(プログラム内の画面サイズ、今回の場合:400)
  height:画面高さ(プログラム内の画面サイズ、今回の場合:300)
  code:ファイル名
  archive:ファイルのパス
 を指定して記入する。
 codeは「.java」ファイル内のjavaのクラス名(Processingで保存した際のファイル名と同じ)。
 archiveは、「.jar」ファイルのアップロード先のパスです。
 以下がブログ投稿欄へ記入する内容です。

<applet width="400" height="300" code="freehand" archive="http://kousakudata.web.fc2.com/freehand/freehand.jar">
</applet>

あるいは、「.jar」を含むディレクトリをcodebaseとして追加し(↑より↓の方がいいみたいです:追記)、

<applet width="400" height="300" codebase="http://kousakudata.web.fc2.com/freehand" code="freehand" archive="freehand.jar">
</applet>

複数の「.jar」ファイルがある場合は「archive」の部分を「,」コンマで区切って、

archive="aaa.jar, bbb.jar, ccc.jar"

となります。


以下が表示例です。白い矩形内をマウスでドラッグすると手描きの線が描けるプログラムです。「e」キーを押すと白紙にもどります。






このプログラムのソース:

void setup(){
size(400,300); //画面サイズ幅400、高さ300
smooth(); //滑らかな描画(アンチエイリアス)
background(255); //背景色を255(白)に設定
}

void draw(){
//特になし
}

//マウスドラッグ中のプログラム
void mouseDragged(){
line(pmouseX,pmouseY,mouseX,mouseY); //線を描画
}

//キーが押された時のプログラム
void keyPressed(){
if(key=='e'){ //もしキーが「e」なら
background(255); //背景色を白で塗り直す
}
}

このプログラム自体の説明はこちら

尚、全てのコマンドやライブラリがapplet出力に対応しているとは限らないので、ProcessingのReference内の各コマンド(関数:例えばline()など)のページへ行って「Usage」欄をチェックして下さい。「Usage」に「Web & Application」と書かれてあれば、Web上でも独立したアプリケーションとしても出力可能ですが、「Application」だけであれば、Web用のappletとしては出力できません。

練習でつくってみたプログラムや、試しに書いてみたというようなプログラムでも構わないので、appletで出力してブログへアップしてみて下さい。

1 件のコメント:

  1. この記事に従ってjarファイルをFC2にアップしようと思ったのですが、FC2ってjarをアップできない仕様になっているように思います。
    (ファイル管理のページに、拡張子は jpg/gif/png/mid/swf/ico/mp3/html/txt/css/js/rdf/xml/xsl サイズは500KBまで)
    と書かれています。

    この記事の内容に記載ミスがあるのか、それとも他の裏技的なものがあるのかご教示いただけますと幸いです。

    返信削除

*