火曜日, 11月 02, 2010

HerokuでSinatraを動かす

思うところあってSinatraを触ってみた。ついでにGitも動かしながら覚えている。

が、ここに書いてある通りにしても動かない。
ターミナルでheroku logsと打ち込んでエラーを読む。
==> dyno-2855633.log (crash) <==
/usr/ruby1.8.7/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `gem_original_require': no such file to load -- sinatra (LoadError)

Sinatraがない、とのこと。
同じ日にはまっている人がいらっしゃった
僕も何もしなくても最初から使えるようになっていると思ってました。

で、解決法はもうひとつあって、マニフェストファイルを作る。.gemsというファイルを同じ階層に作って
sinatra --version 1.1

と書いてpushするだけ。細かいことは公式ドキュメントに書いてある

最初のとこに書いておいて欲しい(check out the docsのリンク先がかつてそうだったのかも知れない。にしても直して下さい)。

土曜日, 10月 02, 2010

ArrayListについて認識を改めたところ

以前の投稿(build ribbons)で、
for文のところを単にかっこいい書き方としか認識してなかったんですけど、
配列の長さがループの途中で変わるので、ああいう風にしておかないとremoveで取り除かれた分の添字が詰まった結果、参照されないオブジェクトがでてきてしまってちらつきが起こってしまいます。

こういう場合。
試しにdraw()内のfor文の初期化式をint i=0、継続条件式をi<ripples.size()、再初期化式をi++にしてみると分かります。
リファレンスにも似たような例が書いてあって、Examples>Topics>Advanced Data>ArrayListClassでも確認できます。
[Ripple.pde]
class Ripple {
float x, y, w, speed;
float age;
int intensity;
color c;
float a;
boolean finished;

Ripple(float x, float y, int intensity, color c, float speed) {
this.x = x;
this.y = y;
this.intensity = intensity;
this.c = c;
this.speed = speed;
this.age = 0;
this.a = 255-255*(age-speed)/intensity;
this.finished = false;
}

void display() {
age += speed;
a = 255-255*(age-speed)/intensity;
if(a<=5) {
finished = true;
}
stroke(c, a);
ellipse(x, y, age, age);
}

boolean finished() {
return finished;
}
}

[drawRipple.pde]
Ripple r;
ArrayList ripples;
void setup() {
size(400, 400);
background(255);
noFill();
smooth();
ripples = new ArrayList();
for(int i=0; i < 100; i++) {
ripples.add(new Ripple(random(width), random(height), (int)random(20, 80), color(0), random(0.1, 0.4)));
}
}

void draw() {
background(255);
for (int i = ripples.size()-1; i >= 0; i--) {
Ripple ripple = (Ripple)ripples.get(i);
ripple.display();
if(ripple.finished()) {
ripples.remove(ripple);
}
}
}

火曜日, 9月 07, 2010

Photoshopで画像を統合して別名保存するJavaScript

FlattenAndSave.jsx
var d = activeDocument;
var fp = d.fullName.toString();
var f = new File(fp.split(".psd")[0]+"_fix.psd");
var out = d.duplicate();
out.flatten();
out.saveAs(f);

コーダーの人にPSDを渡す際にレイヤーを1つに統合しておくと効率が良いそうなので、書きました。
開いているPSDと同じ階層に"_fix"とついたPSDができます。
統合したあとうっかり保存して閉じてしまう心配もありません。
(編集中のデータには変更を加えず新しいドキュメントを複製し、そちらを統合するようにしました)
Windows, MacのCS3で動作確認済。
Adobe Photoshop CS3/プリセット/スクリプトフォルダ以下に入れておくとメニューから選べて便利。

ロールオーバー用のレイヤーを残したい場合はそれらを非表示にし、flatten()ではなくmergeVisibleLayers()を使うなど、用途に合わせて使い分けるといいと思います。レイヤーカンプで切り替えを作っておくと親切。もてます。

土曜日, 9月 04, 2010

2010年9月に思っていること

3年くらい前にbrazilさん、youpyさん、koyachiさん、ucnvさんとかが見せてくれた可能性に近づきたくてJavaScript勉強してる。ksskさんが最近Audible作ってたのとか、その辺の影響を同時期に受けてての2010年夏って感じで、何かシンクしたと思った。BEAMで今後やろうとしてることも例えばYHCとかStroboみたいなこと。大量のイメージを一気に見たり、暇な時に流しておいたり。各WebサービスのAPIが充実して、便利なライブラリも沢山出て、ブラウザの機能も良くなって、おそらくユーザの環境やリテラシーも変わってきている今、できること。

8tacksのChrome拡張がすごくいいなと思った。CTOが「デザインもっと良くするの手伝うから連絡して」って言ってすぐ反映されてるスピード感とかも面白い。
Last.fmからアーティストの画像を取って来てて、スライドショーになる。

最近一部のクラブに行くと、DJがかけてる曲に合わせてVJがYouTubeから動画を探して流す、みたいなスタイルになっている。自分達の周りでVJが流行ってた頃とはえらい変わりようだ。確かに解像度も十分だし、ブラウザでフルスクリーンも楽勝なので、理にかなっている。もちろん選ぶ時にセンスは問われるんだけど、これある程度自動化したりもっと面白くできるんじゃないかなーと思ってる。

一方でWebの時代は終わったよ、という話もあるので、注意もしてる。
Flashのことを笑っている場合じゃない « ku

優れているとか正しいではなく、全体の雰囲気として、「そうだよな、これはもう終わりだよな」となってしまったら終わるものだと思う。とは言えこの辺は先端的な人達の話なので、どうなっても僕はあんまり得も損もしない気がする。基礎的な部分を鍛えつつ、面白いと思う方で何かやればいい。

他iPadを想定したWebサイトと、iPhoneアプリを頑張っています。今年は働き者です。

金曜日, 9月 03, 2010

BEAM

BEAM
CGIとかJavaScriptの勉強しつつ触っている間に何かアイディアが出ないかなと思って自分用の画像スクラップを作った。FFFFound!やTumblrみたいにBookmarkletから画像のURLをPOSTで書き込み用のCGIに送って、テキストファイルに保存。表示用のCGIからURLを読み出してHTMLとJavaScriptを出力。
加えて不定期にローカルのPythonスクリプトからそのテキストファイルを読みに行って画像をダウンロードし、iPhoneの写真と同期させてる。

visual dropboxとあるように一時的に貼っておいて、適当に消す、気分で替える壁紙みたいなもの。BookmarkletなのでiPhoneからでも会社のコンピュータからでも自分のMacBookからでも投稿できる。涸れた感じの技術だけど個人的に楽しむ分には割と便利。広く使ってもらうためにはブラウザのプラグインとかにすればいいのかな。

土曜日, 8月 14, 2010

YouTuBJ

結構前にYouTubeでミックスできるの作りました。
YouTuBJ
わかりにくいけど黄色いエリアの上に入力フォームがあるのでそこから検索するかIDを入れると読み込みます。

最大左と右で4つずつビデオが出てきて、それぞれ鳴らせるのが特長というか、既存のインターフェースにとらわれていないいいところです。使わないと思うけど。
地味にフルスクリーンにもできるようにしました。小さい状態での画質の切り替えにはこつが必要で、動画エリアと画質を選ぶボタンエリアのちょうど境界線あたりを狙います。使わないですよね。

あくまで自分用という感じで作っているので、サービス精神がありませんが、ざっくり何かを探して、すぐ再生できて簡単につなげればいいなという感じです。思いっきり探したい場合はタブでも切り替えてYouTube行って探してくればいいという考えです。

他にもいくつか作っている人がいて、考え方の違いみたいなのがわかると面白いと思いました。いいアイディアがあれば取り入れたいし。

Turntubelist
至れり尽くせりの完成度。このページで完結。プレイリスト書き出しができるのがいい。操作を覚える必要が少しある。

YouTubeMixer
Processing界でも有名なv3ga先生いつのまに。SearchでYouTubeページをiframeで読み込む形になってるけど、ここからID取ってくるのは困難。埋め込みプレーヤーのバージョンも古いしYouTubeリニューアル前に作ってたのかな。シンプルで綺麗。

youtube console
DJ Delicious a.k.a. 萩原くんのやつ。さすがわかってる感じ。Changeで検索結果を掘っていける。操作画面みてても楽しいんじゃないかな。

TWOYOUTUBEVIDEOSANDAMOTHERFUCKINGCROSSFADER.COM
元々これに触発されて作った。partyで背景画像が切り替わる。RECはスクリーンキャプチャの方法が書いてるWikipediaへのリンク。世界はもっとこういう風になるべきだと思う。

長らくインターフェースとかオーディオビジュアルに興味を持っているのですが、音を解析して映像にするとかだけじゃなくて、操作(演奏)しているところ自体が、視覚的に楽しめる要素になってるといいなと思います。

ProcessingでGUIを簡単に使う

Algorithm for Visual Designより。
controlP5とかその他色々あるけどちょっと試したい時とかAWT使うのもいいと思う。
サンプルではaddActionListenerのところがこんな感じ
a.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
println("A");
}
}

だったけどActionScriptぽく書き直してみた。
ボタンが押されたときに呼び出されるメソッドは全てactionPerformedになるのでその中で分岐。
[guiTest.pde]
MyControl control;
void setup() {
control = new MyControl();
}

void draw() {
}

[MyControl.pde]
import java.awt.Button;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
class MyControl implements ActionListener {
Button a;
Button b;

MyControl() {
a = new Button("A");
a.addActionListener(this);
add(a);
b = new Button("B");
b.addActionListener(this);
add(b);
}

public void actionPerformed(ActionEvent e) {
if(e.getSource()==a) {
println("A");
} else if(e.getSource()==b) {
println("B");
}
}
}

木曜日, 8月 12, 2010

TEE PARTY


夏はもう終わってしまいましたが、縁あってTEE PARTYにレーベルオーナーとして参加することになりました。
ざっくり言うとネットでTシャツが買えるシステムです。

注文が入ってから印刷に入るモスバーガーみたいなシステムで在庫を持たなくていいので、僕らはただひたすらグラフィックを作りまくって送りまくれば良い訳です。毎日大量にアップされていくので普通に埋もれてしまいますが、ちょっと考え方を変えて、ディグるのではなく(ディグってもいいですが)開いたとこでぱっと見て気に入ったら即買うみたいな気持ちで臨めばネットショッピング感覚的に新しい何かが生まれると思います。
いずれプログラムで自動生成したもので毎日更新シリーズを作ろうと思っていますが、現状手作業でアップロードされているので様子を伺っています(地のTシャツの皺とかひとつひとつ違うの気づきましたか?僕は気づきませんでした!)。

最初にお誘いいただいてからどのように展開していくか色々悩んだ結果、答えは出ずに時間だけが過ぎていったのでそのまま持ってる能力や人脈を最大限活かしてやっていくことにしました。
なので会社でお世話になっているMARVELOUS DESIGNさん、恩師であるJames Gibsonさんに参加してもらっています。
他にも関わりがある人で、今のTEE PARTYにはちょっとないテイストの人に声をかけています。

お、思い出横丁情報科学芸術アカデミーのTeeもよろしくお願いいたします。

日曜日, 7月 04, 2010

引っ越しました(2ヵ月くらい前に)

僕は引っ越しが好きで、暇さえあれば誰かの引っ越しを手伝いたい。片付けをしながら思い出話をしたり、いらないものをもらったり、何より生活が変わる時の希望みたいなものに触れたい。4年前にも同じようなことを言ってる。今回は引っ越しの時に荷造りするのをストリーミングしたりした。次はまた2年後くらいに。

新住所は台東区で、新御徒町が最寄り駅なんだけど、15分くらい歩く気があれば、秋葉原(日比谷線、山手線、総武線、京浜東北線、つくばエクスプレス)、末広町(銀座線)、仲御徒町/上野御徒町/上野広小路/御徒町(日比谷線、大江戸線、銀座線、京浜東北線、山手線)、蔵前(大江戸線、浅草線)、浅草橋(総武線、浅草線)も使えるので色んなところへ乗り換えなしで行けてとても便利。

本当はやっぱり中目黒とか渋谷に住んで、折り畳み自転車で小さい犬の散歩をしながら友人のカフェでアイディアを練るみたいな生活が良かったと思う。先日うっかり中目黒駅で待ち合わせしたら、香水の匂いが次々と替わりながらずっといい匂いがしていた。

前に住んでいたのは東横線の多摩川駅で、住所は田園調布だった。田園調布、というと大抵の人からは「いいとこですね」「お金持ちですね」みたいな反応が返ってくる。が、僕が住んでたのは丸子橋のすぐ近く、中原街道沿いで割と車の音がうるさいところだった。お金持ちっぽい人達は坂を登ったところに住んでるらしい。お店とかもあまりなく、若い人が遊んだりするところもないので、刺激はなかったけど、それが僕にはちょうど良かったし、自転車があればもっと良かったと思う。温泉もあった。引っ越して家賃も上がってしまったけど、通勤時間が短くなったりリラックス効果が高まったので、その分働いたり勉強したりする余裕ができた。以前の環境にいくらか足せば同じような効果を得られるかというとそうではないので、お金と時間の配分についてはよく考える必要がある。

で、自転車なんだけど、仲御徒町に欲しかったピストを売ってるお店があったので予約してきた。届いたら自転車で通勤したい。そうすると終電を気にしなくてもよく、昼休みに洗濯物を取り入れに帰ったりすることもできる。働き方が変わる。明確な答えのない仕事において高いインセンティブとなるのは自由な時間だそうだ。会社の机に縛られて四六時中マウスをちょっと動かしたりしてる必要はない。裁量労働制だし、会社の人も別にうるさく言わないのだけど、何となくの空気みたいなものに押されて早く出社してるのに遅い人に合わせて遅く帰る日々が続いている。誰かが悪意を持ってそういう事態になってる訳でもないのだけど。

今年は色々と外向けの活動ができそう。学生時代に「こ、こいつ…(目立ちやがって!)」と思ってた人達もどっちかと言えば仲間側になってきたし、ポジティブに自分への刺激にできるようになった。続けるということはそういうことなのだろう。

水曜日, 6月 16, 2010

Dropophone


縁あってLullatoneと一緒にiPhoneアプリを作りました。
Raindrop Melody MakerのiPhone版という感じですね。音数を減らして選び直したり、マルチタッチができたり、色々と調整はしてあります。iTunesにリンクして音源が買えたり!

こういう感じでミュージシャンのアイディアを実現するシステムやソフトウェアを作る、ということをずっとやりたかったのですが、ようやく一つ目標を達成した感じです。今後の動向も楽しみにしていて下さい。

アプリのダウンロードはこちらから。
Dropophone for iPhone, iPod touch, and iPad on the iTunes App Store

LullatoneのDropophone紹介ページ。
Dropophone iPhone App « Lullatone

月曜日, 3月 15, 2010

似ているIPアドレスのページを探す

lip
検索対象に近いIPアドレスのドメインネーム(リモートホスト)を表示するサイトを作りました。
ドメインネームからIPアドレスに変換して、ネットワーク部と推測される部分の下一桁違いのアドレスに問い合わせて、あればドメインネームを取ってくる。

redundant webというWeb上の展覧会に出した作品。
kiviakというアーティストランスペースの谷口君が企画。
参加作家は全員以下のレギュレーションに従って制作した。

1:webを展示空間とするのではなく,素材として用いること.
2:単なるwebツール/webサービス(道具)を作らないこと.目的のない,且つ合目的な道具を作る.

メディアアートというジャンルを語る際に、余りにもテクノロジーや政治的なアクションにばかり傾き、「この赤がいいよね」というような質感に関する議論がほとんどなされていないのではないか、という疑問が谷口君にあったらしい。
花は繁殖のために綺麗に咲くというが、それにしては綺麗過ぎるという「目的なき合目的性」こそが「美術」であると捉え、「役に立たない機械」を作ることでそれを達成しようという試み。

Webにある素材としてまず着目したのがIPアドレス。普段あまり意識することはないけど、なくてはならないものだから。

無作為にWebページを見たり、新しいものを見つけるのは結構難しいという風に思っていた。RSSリーダで沢山のページは購読しているが、たまに全く関係ないものにアクセスしてみたくなる時がある。結局それを面白がれるかどうかは自分次第なので、そんなに振れ幅は大きくならないのだけど、それまで自分になかったものをどうやって取り入れていけるかは常に考えている(今はKPOPのアイドルが好きです)。
2番目の「目的のない,且つ合目的な道具を作る」という課題への回答としては上記のようなところで、当たる確率の低さや、下一桁違いという大雑把な探し方が冗長性かなと思っている。これでは理由として弱い気もするが。

似たような作品にIP Browserというものがある。こっちはラジオのチューナーを意識しているみたい。「Googleとは違う世界の見方」、みたいなことが書いてあるが、今回の僕の狙いも1つはそこで、「ポータルサイトがなくなったらどうなるのか」という疑問がネットを始めた頃にあった。すごくシンプルで愚直な答えが出せた。

技術的なところでは、初めてPerlでCGIを書いて、JavaScriptもXMLXttpRequestをある程度使えるようになったのが良かった。