アーロンチェア、自宅の作業用に長らく使用していて、一度ガス昇降が壊れて現在は二代目になる。評判通りのすばらしい椅子で、これに慣れてしまうと、たまに出先で作業する際やカフェなどで作業していると椅子の座り心地が落ち着かなくなってしまうくらい。
ただ、ひとつ難点を挙げるとすると、集中して作業しているときには前傾しているのでいいのだけど、たまに作業の合間にちょっと休憩したいと思っても頭を支える機能はないので、あまりリラックスできない。そういう時には普通に椅子から降りて横になればいいのかもしれないが、そうすると本格的に寝てしまう危険が…
そこで、先日Amazonでみつけた、アーロンチェア用のヘッドレスト(非純正品)を買ってみた。これが、想像していたよりも快適。頭にあたる角度や高さを、とても細かく調整できるので、自分にぴったりの設定が決まったときには「おおーっ」と声が出そうになるくらいの気持良さ。
また、思わぬ副作用としては、このヘッドレストに頭を載せるには、きちんと座面に深く座って背筋を伸ばした正しい姿勢で座る必要があり、座り方を矯正された結果、肩や背中の疲れも軽減されたような気がする。
ヘッドレスト単体で19,800円と、まあ正直、値段は高い。なので最初は購入を躊躇したのだけれど、ここ最近では満足のいく買い物だったと思う。
問題は気持ち良すぎて椅子の上で寝そうになってしまうところ…
このテキストは、ofxAddonsのサイトで紹介されている「make your own! (あなた自身のアドオンを作ろう!)」という文書を非公式に翻訳したものです。翻訳の誤りや不明な点があれば、指摘してください。
openFrameworksのアドオン(addons)って何?
アドオンとは、oepnFrameworksの機能を何らかの方法で拡張するコードです。アドオンを作る理由は2つあります。
- 外部ライブラリやフレームワークを、openFrameworksに適用して簡単に統合させることができる。例: KinectコントローラーをopenFrameworksで使用するためのofxKinectや、MIDIコマンドを送受信するためのofxMidiなど。
- 自分自身または他のopenFrameworksのプログラマーにとって、複雑な作業を単純化できる。例: julapyによるofxQuadWarpや、ofTheoによるofxControlPanelなど。
どうすれば、このサイトのアドオンをインストールできますか?
git コマンドをつかって、コードの複製をチェックアウト(共用のファイルからデータを取り出すこと)することができます。もしくは、ページにある「Download Zip」ボタンをつかってダウンロードするか、URLをコピーする方法もあります。ターミナルを使用して、あなたの手元のopenFrameworksのアドオンのディレクトリーに移動して複製するには、以下のように行います。
[code]
$cd of_preRelease/addons/
$git clone https://github.com/obviousjim/ofxSomeAddon
[/code]
これらの方法でコードを取得したら、アドオンの「example」フォルダ内にあるプロジェクトファイルを開いてみてください(exampleがないアドオンも存在します)。ビルドして動作するか確認してみましょう。
アドオンは、Project Generatorを使用して、新規のopenFrameworksのプロジェクトに組込むことが可能です。もしくは、アドオンのexampleフォルダを「apps/」フォルダ以下にコピーしてそこから編集していくという方法もあります。
もし、アドオンがうまくビルドできないようであれば、他のアドオンやライブラリーに依存していることがあります。それらの情報は、アドオン作成者によってREADMEファイル内で説明されています。もし、プロジェクトファイルが存在していなかったり、アドオンのプロジェクトを開いたときに何かが欠落した状態だったら、アドオンの開発者にemailして指摘してあげてください。そうすることで、開発者はアドオンの構造を修正することができ、全ての人にとって使いやすいものとなります。
このサイトへのアドオン掲載は、たとえそれが有用なものであったとしても、無報酬で行われています。我々だけは、全てのアドオンをテストすることは不可能です。アドオンが動かない場合、開発者とあなたとで解決するようにしてください。
ofxAddonsに含まれているアドオンの情報には何が説明されていますか?
それぞれのアドオンのタイトルから、github.comのリポジトリにリンクしています。それぞれの説明の下には、作者名に続いて、そのアドオンがいつ更新されたか、更新された際の最新のopenFrameworksのバージョン(必ずしもそのバージョンで動作することを保証しているわけではありません)、そしてgithubで獲得した星の数が表示されています。もしアドオンにexampleやmakefileが含まれている場合には、その情報が表示されています。さらに、オリジナルのバージョンよりも新しかったり、より多くの星を獲得したリポジトリへのフォークも表示されます。また、それぞれの開発者ごとに、開発した全てのアドオンの一覧を見ることのできるページが用意されています。ページのデータは、毎日更新されています。
自分で作成したopenFrameworksのコードをアドオンにすべきですか?
何かを実現するための最適なアドオンは、簡単であるべきです。それらは複雑な処理をとても少ないコードで使用可能にします。もし、あなたが巨大なライブラリやアルゴリズムを獲得したり、新たな処理方法を開発したのであれば、アドオン作成を考慮すべきです。それでもまだ迷いがあるのなら、以下の設問が参考になるでしょう。
- あなたのアドオンは、他の人も使いたいようなものですか?
- ofxaddons.com に既に同じようなアドオンが無いか確認しましょう。
- もし類似のアドオンが存在していても、あなた作成した方が優れていると考える場合、既存のアドオンをフォーク(fork)して自身のgithubアカウント内で改良することも考慮してください。
openFrameworksのアドオンをどうやったら作成できますか?
アドオンのためのフォルダ構造は以下のようになっています:
[code]
of_preRelease/
addons/
ofxMyAddon/
src/
ofxMyAddon.h
ofxMyAddon.cpp
…
libs/
libwhatever/
src/
lib_implementation.h
lib_implementation.cpp
…
includes/
libwhatever.h
…
lib/
osx/
static_libwhatever.a
linux/
static_libwhatever.a
… // 他のプラットフォーム
example-anExample/
src/
main.cpp
testApp.h
testApp.cpp
… // 他のソースコード
MyAddonExample.xcodeproj
… // 他のプラットフォーム用のプロジェクトファイル
bin/
data/
necessaryAsset.txt
[/code]
全てが「of_preRelease/addons/」以下の含まれなくてはなりません。リポジトリの名前は「ofxMyAddon」のようにしてください。誰かがあなたのgitリポジトリを複製して「addons/」フォルダ以下に置いたときに、ファイルの操作をすることなくexampleが動くようにすることも肝要です。
もうすこし解説してください
「_preRelease/addons」の下に配置されるフォルダは、アドオンの名前と同一にしてください。gitのリポジトリ名も同じ名前にします。
[code]
of_preRelease/addons/ofxMyAddon/
[/code]
その下には少なくとも2つのサブフォルダ「src」「example」が入ります。
[code]
ofxMyAddon/src
ofxMyAddon/example
[/code]
アドオンに複数のサンプルがある場合は、「example-xxx」という形式にします。
[code]
ofxMyAddon/example-simpleExample
ofxMyAddon/example-moreComplicatedExample
[/code]
もしアドオンがソースファイルや静的ライブラリを含んだ外部ライブラリのインターフェイスとなっている場合、「libs」フォルダにそれらを配置します。
[code]
ofxMyAddons/libs
[/code]
「src」フォルダには、アドオンのソースが入ります。
[code]
ofxMyAddon/src/ofxMyAddon.h
ofxMyAddon/src/ofxMyAddon.cpp
…
[/code]
「example」フォルダには、サンプルのソースとプロジェクトファイルが含まれます(apps/example/sameExampleといった一般のプロジェクトと同じ形式です)。
[code]
ofxMyAddon/example/MyAddonExample.xcodeproj
… // 他のプラットフォーム用のプロジェクトファイル
ofxMyAddon/example/src/main.cpp
ofxMyAddon/example/src/testApp.h
ofxMyAddon/example/src/testApp.cpp
…
ofxMyAddon/example/bin/data
[/code]
これでアドオンの作成は完了ですか?
- プロジェクトについての説明をREADMEに記述しましたか?
- サポートしているOSについてリストアップしましたか?
- プロジェクトのサンプルはありますか?
- サンプルは、openFrameworksのwebサイトからダウンロード可能な最新のバージョンでコンパイルできますか?
- オリジナルなコードやアドオンのクレジットとリンクを入れていますか?
- どのようなライセンスで配布するか明示していますか? もし商業的利用を望んでいないのであれば、単刀直入に示しましょう。また、依存しているライブラリのライセンスについても明確にしましょう。
どうやったら、自分のアドオンをこのページに追加できますか?
その必要はありません! githubにアップロードするだけで十分です。リポジトリ名の先頭に「ofx」をつけると自動的に発見されます。もし、アドオンについてやどのカテゴリに属したいかなどを伝えたいのであれば、連絡してください。
どうすればこのページ用のサムネイルを追加できますか?
リポジトリのルートディレクトリに、270×70の大きさで「ofxaddons_thumbnail.png」というファイル名をつけたイメージファイルを入れてください。
どうやったら全てのアドオンを検索できますか?
わたしたちは、github.comのアドオンを探索するスクリプトを書きました。このスクリプトは「openFrameworks」や「ofx」といったファイル名や説明を検索しています。検索結果の中でopenFrameworksに関係のないもの、空のもの、明らかに未完成のものは、手動で削除しています。少し調査した後に、カテゴリーをタグ付けしています。
8月24日に行われた、「LLまつり」というLightweight Language (PerlとかPythonとかRubyといった軽量言語) のお祭りイベントで、発表してきました。「とびだせ! LL 〜リアル世界をプログラミングする〜」というセッションで、openFrameworksとCityCompilerについて喋ってます。oFはC++だし、CityCompilerはJAVAなので、LLではないのですが…
一緒に登壇していただいた、チームラボ+ニコニコ学会の高須正和さん、ユカイ工学の松村礼央さん、ありがとうございました! また、司会でいろいろフォローしていただいた、佐藤智昭さん、郷田まり子さん、ありがとうございました!
たぶんLLまつりのオフィシャルページからも後程公開されると思いますが、当日のスライド載せておきます。
Processing.jsで、JSONファイルをパラメータにしてデータを読み込んで表示しようとしたら、思いの他苦労したのでメモ。
Java版のProcessingであれば、ver.2からはJSONをパースするJSONObjectが用意されているので、これを素直に利用すれば良い。しかし、Javascirpt版のProcessing.jsには、まだJSONObjectは組込まれていないので、自分で頑張らなくてはならない。
まず、基本的なやり方を、Processing.jsのチュートリアルのページを参照してみた。基本的な考え方としては、JSONファイルの読み込みとパースは、Processingを表示するCanvasを持つHTML側で行わなくてはならないようだ。
しかし、この通りにやってみても、うまくいかない… うーむ。どうやら、Processingの書類が読み込まれるタイミングとJSONのデータの読み込まれるタイミングの順番が狂ってしまうことがあるみたいだ。
もう少し賢くJSONの読込みとパースをするため、jQueryを使ってみた。また、Processingの書類の読込みが遅れたときの対策として、定期的にProcessingのあるCanvasを取得しに行くように変更。
まず、以下のようなJSON形式のデータを用意してみた。
[code lang=”javascript”]
{"nodes": [
{"x":200,"y":200,"diameter":400,"name":"First"},
{"x":220,"y":240,"diameter":300,"name":"Second"},
{"x":150,"y":180,"diameter":200,"name":"Third"},
{"x":220,"y":200,"diameter":100,"name":"Fourth"},
{"x":300,"y":250,"diameter":50,"name":"Fifth"}
]
}
[/code]
HTMLとJSON処理のJavaScriptは、こんな感じ。
[code lang=”javascript”]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Processing Page</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="processing.js"></script>
<script type="text/javascript">
// 取得したJSONオブジェクトを格納する配列
var obj_array = new Array();
// JSONを読込み
$.ajax({
url:"./test.json",
type:’GET’,
success: function(data){
jQuery.each( data.nodes, function(i) {
// JSONから取得したオブジェクトを配列に格納
obj_array[i] = data.nodes[i];
});
}
});
var tId, pjs, cnt=0;
// 文書全体が読み終わったら
$(function(){
// Processingが取得できるまで
if (!pjs){
// 100msごとにくりかえし
tId=setInterval(function(){
// Processingの貼ってあるCanvasを取得
pjs = Processing.getInstanceById("pjsid");
// 取得できたら
if (pjs && obj_array){
// 取得を中止
clearInterval(tId);
// Processingの関数を実行して、配列を送信
pjs.addObjects(obj_array);
}
},100);
}
});
</script>
</head>
<body>
<canvas id="pjsid" data-processing-sources="p5jsjson.pde"></canvas>
<p>Source: <a href="p5jsjson.pde">p5jsjson.pde</a></p>
</body>
</html>
[/code]
そして、確認用のProcessing.jsのテストコード。
[code lang=”cpp”]
ArrayList circles;
void setup(){
size(400, 400);
frameRate(30);
circles = new ArrayList();
}
void draw(){
background(63);
for (int i = 0; i < circles.size(); i++) {
circles.get(i).draw();
}
}
void addObjects(nodes){
for(int i = 0; i < nodes.length; i++){
PVector pos = new PVector(nodes[i].x, nodes[i].y);
float diameter = nodes[i].diameter;
string name = nodes[i].name;
console.log("x: " + pos.x + ", y: " + pos.y + ", diameter: " + diameter + ", name: " + name);
circles.add(new MyCircle(pos, diameter, name));
}
}
class MyCircle{
PVector pos;
float diameter;
string name;
MyCircle(PVector _pos, float _diameter, string _name){
pos = _pos;
diameter = _diameter;
name = _name;
}
void draw(){
fill(0, 127, 255, 15)
stroke(31, 127, 255);
ellipse(pos.x, pos.y, diameter, diameter);
fill(255);
noStroke()
ellipse(pos.x, pos.y, 5, 5);
text(name, pos.x+4, pos.y-2);
}
}
[/code]
どうやら、これでうまくいっているみたい。
でも、若干煩雑な感じ。もっとシンプルに読みこめる方法をご存知の方いましたら、教えてください…
[追記] CBCNETに記事掲載していただきました。ありがとうございます!! (2013.8.21)
8月7日から15日まで、1週間と1日YCAMで行われた「openFrameworks 開発者会議」に行ってきた。openFrameworks漬けの1週間、充実していて楽しかった。コアの開発には、まだまだ全然貢献できなかったけど…
今回は、レポーターとしてのミッションも依頼されていたので、写真を撮りまくる日々。毎日100枚以上の写真をコンスタントに撮っていたら、Nikon D7000の使い方をだいぶ憶えた。
また、期間中は毎日レポートを書いた。これだけまめに文章を書いたのも久し振りかも。1週間の記録。
InterLab伊藤さん始め、YCAMスタッフのみなさん、ありがとうございましたー。
8月3日に開催された「BNN CAMP vol.3: インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門」無事 (?) 終了したので、スライド資料やサンプルプログラム一式など公開。
会場となった、恵比寿のamuは、吹き抜けの高い天井が開放的なきれいな場所で、とても気持の良いスペースだった。今回はちょっとペース配分を誤り、後半時間が足りず急に進度を加速してしまい、まだまだ未熟な部分を反省。集中していると、4時間って、あっという間に過ぎてしまうものですね…
サンプルプログラム
スライド
