Processingアプレットをはてダに貼り付けよう！

ProcessingはJavaをベースにした、オープンソースのグラフィック専用言語です。マルチプラットフォームの統合開発環境(IDE)が用意されており、それをインストールするだけで誰でも簡単にグラフィカルなプログラミングを始めることができます。

IDEにはエクスポート機能があって、作ったプログラムをアプレット化して簡単にWebサーバにアップし公開できます。

でもWebサーバを用意するのは簡単ではありません。できれば手軽にはてダに貼り付けたい。

そんなわけで…

その手順を以下に書いておきます。なおここではDropbox¹とGoogleのアカウントが必要です。Dropboxのアカウントをお持ちでない方は、是非とも次のリンクから！

http://db.tt/KEbzDMO

上に貼り付けたclockアプレット(clock.pde)を例に手順を説明します。

clock.pdeをexportしてclock.jarを生成する
clock.jarを~/Dropbox/public/に移動しそのpublic linkを取得する
~/Dropbox/public/にiGoogle登録用のclock.xmlを作りそのpublic linkを取得する
iGoogleにアプレットを登録する
はてダにclock.xmlへのリンクを貼る

1. clock.pdeをexportしてclock.jarを生成する

ProcessingのIDEにおいてclock.pdeを作った後、その最右にあるメニューボタンを押すとappletフォルダ内にclock.jarその他のファイルが自動生成されます。

2. clock.jarを~/Dropbox/public/に移動しそのpublic linkを取得する

生成されたclock.jarをDropbox/publicフォルダに移動します。DropboxのWebサイトに行きそのファイルのpublic linkを取得します。linkはマウスカーソルをファイルに当てて、右側に現れる矢印から選択できます。

3. ~/Dropbox/public/にiGoogle登録用のclock.xmlを作りそのpublic linkを取得する

以下の内容でDropbox/publicフォルダにxmlファイルを作ります。

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
  <ModulePrefs title="Clock" height="200" /> 
  <Content type="html">
     <![CDATA[ 
     <applet archive= "http://dl.dropbox.com/u/58702/clock.jar"
             code="clock.class" width="200" height="200" ></applet>
     ]]>
  </Content>
</Module>

appletタグのarchiveに先のpublic linkを指定します。codeをファイル名.classとします。width heightをclock.pdeでのものと一致させます。DropboxのWebサイトに行き、このファイルのpublic linkを取得します。

4. iGoogleにアプレットを登録する

iGoogleのサイトに行き、先のclock.xmlをgadgetとして登録します。右上の「コンテンツを追加」で開いたページ左下の「フィードやガジェットを追加」を押します。先ほどのpublic linkを貼り付けて「追加」を押します。確認メッセージをOKしてから、iGoogleのホームに戻りgadgetが登録されたことを確認します。

5. はてダにclock.xmlへのリンクを貼る

はてなダイアリーで記事を投稿する際に、以下のxmlを本文のところに貼り付けます。

<div class="hatena-widget">
  <script src="http://gmodules.com/ig/ifr?url=http://dl.dropbox.com/u/58702/clock.xml&synd=open&w=200&h=200&title=&border=%23ffffff%7C0px%2C0px+solid+%23ffffff&output=js"></script>
</div>

urlには先ほどのclock.xmlのpublic linkを指定します。w hをclock.pdeのwidth heightに合わせます。

以上です!

なお自分の環境ではpdeを編集して再エクスポートした場合、変更がうまく反映できませんでした。内容を別ファイルにコピーして、別名で上記行程を繰り返し対応しました。

この記事は以下のサイトを大いに参考にしています。ありがとうございます！ http://mtl.recruit.co.jp/blog/2007/09/flash.html http://d.hatena.ne.jp/t_yano/20080706/1215370412

int W = 200; int C = W/2; void setup() { size(200, 200); stroke(255); background(rand_color()); frameRate(1); } void draw() { noStroke(); smooth(); if (second()==0) background(rand_color()); draw_frame(); // hour:0, minute:1, second:2 draw_hand(0, 0.6, 4, color(255)); draw_hand(1, 0.8, 4, color(255)); draw_hand(2, 0.8, 2, color(255,50,0)); draw_center_circle(5, color(255)); } color rand_color() { return color (random(256), random(256), random(256)); } void draw_frame() { fill(100); ellipse(C, C, W*0.95, W*0.95); fill(0); ellipse(C, C, W*0.9, W*0.9); } void draw_hand(int utype, float scale, int weight, color col) { float unit = 0; switch (utype){ case 0 : unit = mapped_time((hour()%12)*60+minute(), 720); break; case 1 : unit = mapped_time(minute(), 60); break; case 2 : unit = mapped_time(second(), 60); break; } stroke(col); strokeWeight(weight); float x = cos(unit)*C*scale+C; float y = sin(unit)*C*scale+C; line(C, C, x, y); } float mapped_time(float time, int unit) { return map(time, 0, unit, 0, TWO_PI) - HALF_PI; } void draw_center_circle(int d, color col) { stroke(col); ellipse(C, C, d, d); }

ファイルサーバとして使います ↩

blog comments powered by Disqus

100円〜で好評発売中！
M'ELBORNE BOOKS