Processing独学同志会

GitHubページでprocession.jsのスケッチを公開すればいい

(このエントリはProcessing AdventCalender 2014の14日目の記事になる予定のはずです,間に合えば.)

processingで書いた作品、見せびらかしたいときがあるかと思います。javascriptモード便利ですしポートフォリオサイトや自身のブログをもっているひとはそこで公開したりなんぞできますが、運用もデザインもできないし用意するのは面倒・・・クールに作ったものだけ置きたい・・・それも無料で・・・かといってopenprocessingは使いたくないし・・・という御仁もおられるかと思います。わたしです。

すこし前まではsite44という、dropboxのpubicフォルダをJSも使えるWebページにするサービスが無料(作成するWebページ数や容量に上限あり)で登録不要でつかえたのですが、なんか今年から月額登録制になってしまった様子。ほかにも類似のサービスはあるのですがなかなか無料かつ気軽に使えるものはありません。かなしい。

GitHub有能(しかもかっこいい)

ですが、Githubのgithub pagesを使えば自分のgithubレポジトリにあげたスケッチが動いてくれるんです。githubにあげる行為自体がなんかカッコよくてイカしてるしクールだし明日からクラスの人気者さ。

[参考:githubとgithub pagesでウェブアプリを作ってすぐ公開]

これを使えば、例えばこんな

image

(Hex clock / http://www.jacopocolo.com/hexclock/ )

のようなステキなやつをprocessingで実装したい衝動に駆られてからgithubアカウントを取得、スケッチを書き、htmlとcssを勉強し、面倒になってコピペだけで済ませ、processing.jsをdropboxのpublicフォルダに入れてそこから呼んでくるようにしてリポジトリに投稿、ここまで1時間くらいで

image

右がつくったやつ(ここにあります)。某小学4年生のサイトのカウンターぽく見えたらこころが汚れているので初詣はちゃんとした神社にいきましょう。

githubに投稿してあるためひどいコードもスッキリと読む事ができますしprocessing.jsの挙動で苦しい思いをしているところも丸見えです。

//processing.jsではbackgroundの再描写が効かない?のでフルスクリーンのrectでなんとかする
String r,g,b;
int  h, s, m;
int c;
void setup(){
  size(innerWidth, innerHeight);
  colorMode(RGB, 255);
  smooth();
}

とか

void draw(){
//サイズの変化に対応するためにsetupを呼ぶ
  setup();
  }

などと.jsの独特な挙動に力業で対応しています.

<!-- iOSのSafariで開いてホーム画面に追加するとネイティブアプリっぽくなります -->
    <meta charset="UTF-8">
    <title>hexclock</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon" href="home.png">


あとiOSのSafariで開いてホーム画面に追加するとタブが消えてみえる仕組みを使ってネイティブアプリっぽくなる感じにすれば作品が手元にきた感じがしていい感じになれるのでおすすめな感じです。

image

まとめると

簡単なプロダクトとか動作確認ならばgithubにあげたら楽だしそれ自体がポートフォリオになって目に留まりやすくなるかもだぜ!というご提案でした。それでは来年、「github pagesでpatatap的なの公開したよ!」でお会いしましょう。

おまけ processingのライブラリについてちょっとだけ調べた

ついでに、GitHubにはProcessingのリポジトリがありさすがオープンソースといったところであるが、本家processing.orgにこんな一文がありまして

Instructions for creating your own library are on the Processing GitHub site.

Processing/Reference/Library)

ライブラリ作れたらかっちょいいしデキる奴っぽくみえて最高じゃんと思ってほいほいついていくとEclipse用のテンプレートが用意されています。わたしも以前Javaの入門書かってきてこれでおれもウィザードだぜなどとぬかしつついざ導入でEclipseをインストールしましょうとか書いてあるのでいれてみたらば化け物みたいにわからなくて投げ捨てた過去がありできることなら二度とお目にかからない人生を選びたいのでげんなりしていました。ところが、深津貴之さんが9年くらい前に

メモ。

processigのlibrariesフォルダにある、howto.txtというファイルに、ライブラリの作り方が入ってるそうです。

(fladdict.net [procesingでのライブラリの作り方])

と言及しているのを発見。これ幸いとばかりにさがしてみました。結果から言うと徒労でした。GitHubには過去にリリースした旧バージョンもぜんぶあげられているのでprocessing-0080(2005年4月リリース)から0150(2008年10月)までいくつか落としてうおーーっと眺めてみたんですが、書いてあることの大半はここで読める通りな感じです。howto.txtだいたい500行くらいの英文なんですが徒労でした。

It is not possible to build libraries from within the Processing application. In fact, creating a library with the PDE will cause problems because the JAR file exported from the PDE will contain the current version of the processing.core classes, which will cause major conflicts when trying to use any other code. Libraries that contain classes from theprocessing package in this manner will have to be rejected or removed from the site.

[意訳]:p5を使ってp5内でライブラリ作るなんてことしたら罰が当たるよ。行儀の悪いライブラリはいらねぇから家に帰ってマンマの乳でも吸ってな。

ということである(どういうことだ)。

実際にEclipseでライブラリを自作した方の記事(日本語)だったりコマンドラインからライブラリを構築するツール作った方の動画(英語)だったりなアプローチはあるんですがうーんめんどくさいのでp5だけで完結したかったなぁ無念。ライブラリじゃないけどクラスを別タブで作ってその.pdeを移植すればええやんという方法(これとか)もありますが、

「ところで、あすこにイカしたライブラリがありますね。あれ俺のなんすよ(スーツの袖口から覗くtag heuerを煌めかせ上質なキリマンジャロをいただく)」

ってやりたかったなぁ、ちゃんちゃん。

  1. solo-p5 posted this