JavaScriptでSine Waveを鳴らす

連休中に色々と調べものしてて、dsp.jsというライブラリを見つけたので使ってみた。Chrome14でしか動作確認してない。Git覚えたくてgithubに上げたけど、これくらいならgistでよかったと思った。
SoundCheck

Audioletも面白そう。
最近node.jsも触ってみてるので、audiolib.jsも入れてみた。

node.jsはHomebrewからとかソースをビルドとか試してみたけど、nvm使って複数のバージョンを入れて動かすのが良さそう。

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のリンク先がかつてそうだったのかも知れない。にしても直して下さい)。

BEAM

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

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

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へのリンク。世界はもっとこういう風になるべきだと思う。

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

似ている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をある程度使えるようになったのが良かった。

Processing IDEからEcho Nest APIを使う

Echo NestのJavaクライアントが出ていたのでProcessingで動かしてみた。
Echo Nestが何なのかよくわかってないけど、とりあえずネットと音という大好きな要素が混ざっている。
曲やレビュー、記事のリコメンドからテンポ、ビート等の音響解析にも使えるらしい。

まずはdeveloper用のサイトでEcho NestのAPI Accountを取得してAPI Keyを発行してもらう。
サイトも綺麗だしブラウザから実行例を見られるので勉強しやすい。APIキーとか入れといてくれてる。

Echo NestのJava APIをダウンロードする。

Javaのライブラリなので、OSXの場合"ユーザ名/Library/Java/Extensions"以下にEchoNestAPI.jarを置いて.bash_profileにCLASSPATHを書くのでもいいけど、Documents/Processing/librariesの中にEchoNestAPIというフォルダを作り、さらにlibraryフォルダを作って、その中にEchoNestAPI.jarを入れても動く。ProcessingのIDEから簡単にimportできる。

JavaのサンプルそのままだとProcessingのIDEの場合for文のところでエラーになってしまうので書き換えた。

import com.echonest.api.v3.artist.Artist;
import com.echonest.api.v3.artist.ArtistAPI;
import com.echonest.api.v3.artist.Audio;
import com.echonest.api.v3.EchoNestException;
import com.echonest.api.v3.artist.Scored;
import java.util.List;

String API_KEY = "自分のAPI KEY";
String ARTISTNAME = "weezer";

ArtistAPI artistAPI;

try {
  artistAPI = new ArtistAPI(API_KEY); 
  List<Artist> artists = artistAPI.searchArtist(ARTISTNAME, false);
  if(artists.size()>0) {
    for(int i=0; i<artists.size(); i++) {
      Artist artist = artists.get(i);
      List<Scored<Artist>> similars = artistAPI.getSimilarArtists(artists, 0, 10);
      println(" === Similar artists for " + artist.getName() + " ===");
      for(int j=0;j<similars.size(); j++) {
        Scored<Artist> simArtist = similars.get(j);
        println(simArtist.getItem());
      }
    }
  }
} 
catch(EchoNestException e) {
  System.err.println("Trouble: " + e);
}

実行結果

=== Similar artists for Weezer ===
The Smashing Pumpkins
Ozma
Biffy Clyro
The Breeders
Rivers Cuomo
Nerf Herder
Jimmy Eat World
Foo Fighters
Veruca Salt
The Flaming Lips
=== Similar artists for Weezer Tribute ===
The Smashing Pumpkins
Ozma
Biffy Clyro
The Breeders
Rivers Cuomo
Nerf Herder
Jimmy Eat World
Foo Fighters
Veruca Salt
The Flaming Lips
=== Similar artists for Matt Sharp (of Weezer, The Rentals) ===
The Smashing Pumpkins
Ozma
Biffy Clyro
The Breeders
Rivers Cuomo
Nerf Herder
Jimmy Eat World
Foo Fighters
Veruca Salt
The Flaming Lips

開発者の人のデモがここにある。eclipseで開発してる。

*2009年11月11日追記
EchoNestAPIを使用する場合はJavaのバージョンを1.6にする必要があります。
Applications/Utilities/Java Preferencesを起動して、GeneralタブのJava ApplicationsのJava SE 6を一番上にする。

で、いつの間にかechonestp5というものができてた。

as3corelibのJSONクラスを使ってNew York TimesのAPIからデータを取得する2

JSONというのが何なのかというのが今回の話題。

詳しくは公式ドキュメントなりwikipediaなりを読むとして、とりあえずはXMLなどのようなデータフォーマットの一種であると。JavaScript Object Notationが正式名称だけど、JavaScriptのオブジェクトの表記をベースにしているというだけで、JavaScript以外でも使える。
"キー":値というシンプルな形。入れ子にもできる。
例:

{
  "name":"hayashi", 
  "age":26, 
  "occupation":[
    {"main":"designer"},
    {"sub":"programmer"}
  ]
}

前回のプログラムで、loaderから読み取ったデータをそのまま出力してみる(loader.dataをtraceする)と、このような形式の文字列が出力されているはず。

で、あとはXMLと同じようにドットとキーで欲しい値にアクセスする。
前回のソースの27行目を下のように一旦オブジェクト型の変数に格納する形にして、
var o:Object = JSON.decode(loader.data);

o.tokensで何てキーワードで検索したかとか、o.totalで何件ひっかかったとかが取得できる。

o.resultsはリクエストに合致した記事のデータがそれぞれ配列になっていて、o.results[0].titleで1件目の記事のタイトルを取得したり、o.results[2].bylineで3件目の記事の筆者を取得したりできる。o.results.lengthで結果の総数を得てfor文と一緒に使うケースが多いと思う。

この辺のキーの与え方に関しては返ってきたデータ(loader.dataでtraceした結果)を見ながらの作業になる。

視覚化の方法についてはまた次回。

as3corelibのJSONクラスを使ってNew York TimesのAPIからデータを取得する

ProcessingでNew York TimesのAPIからデータを取ってきて視覚化するサンプルを参考に、ActionScript 3.0で実現してみます。
Processing, JSON & The New York Times | blprnt.blg

環境はMac OS 10.5.6、Flex SDK 3、Xcode 3.1です。

まずNew York TimesのDevelopper Networkにアクセスしてアカウントを作成し、API KEYを取得する必要があります。
Times Developer Network - Welcome

色々ありますが今回はThe Article Search APIを使います。
レスポンス形式はJSON。

ActionScriptでJSONを扱うには、as3corelibを使うのが良いと思います。
as3corelib - Google Code
ファイルをダウンロードして解凍したら、libというフォルダにas3corelib.swcというファイルがあるので、それをFlex SDKのframeworksフォルダに入っているlibsの中に入れます。

新しいプロジェクトを作って、NYTimesTestと名付けます。
2005年1月1日から2009年3月3日まででObamaという言葉がいくつあるかというプログラム。

NYTimesTest.as

package {
 import com.adobe.serialization.json.JSON;
 
 import flash.display.Sprite;  
 import flash.events.Event;
 import flash.events.IOErrorEvent;
 import flash.net.URLLoader;
 import flash.net.URLRequest;

 public class NYTimesTest extends Sprite {
  private var baseURL:String = "http://api.nytimes.com/svc/search/v1/article";
  private var apiKey:String = "取得したAPIキー";
  private var word:String = "Obama";
  private var beginDate:String = "20050101";
  private var endDate:String = "20090303";
  
  public function NYTimesTest() {
   var loader:URLLoader = new URLLoader();
   
   loader.load(new URLRequest(baseURL+"?query="+word+"&begin_date="+beginDate+"&end_date="+endDate+"&api-key="+apiKey));
   loader.addEventListener(Event.COMPLETE, decodeJSON);
   loader.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
  }

  private function decodeJSON(e:Event):void {
   var loader:URLLoader = URLLoader(e.target);
   var totalArticles:uint = JSON.decode(loader.data).total;
   trace("there were " + totalArticles + " occurences of the term " + word + " between " + beginDate + " and " + endDate);
  }
  
  private function ioErrorHandler(e:IOErrorEvent):void {
   trace("ioErrorHandler: " + e);
  }
 }
}

Flash CSを持ってなくてFlex SDKで開発している場合、Flash Playerで普通に再生しても何も起こらないと思います。Flash Playerのdebugger versionsと、その他色々と設定が必要です。
Archived Flash Players available for testing purposes
flickr APIの時にやった色々設定(今気付いたけど01って何...続きないし)
hysysk:blog: using flickr api 01

フォルダはアカウントの権限とか環境によって変わるのかも。

今の僕の環境では

ユーザ名/ライブラリ/Preferences/Macromedia/FlashPlayer

の中に#Securityというフォルダがあり、その中にFlashPlayerTrustフォルダを置いて、mms.cfgを格納しています。ない場合は作って下さい。
最近は通信関係を開発しているフォルダはまとめてこのファイルで指定しています。

traceした結果はこのFlashPlayerフォルダの中のLogs/flashlog.txtに出力されています。これもない場合は作って下さい。

there were 9595 occurences of the term Obama between 20050101 and 20090303

と出れば成功。
次回(!)以降データの中身をもう少しみていくつもり。

あとこのblprintの人が書いてるActionScriptの本が面白そう。彼だけでなくJonathan HarrisとかAaron KoblinとかProcessingの強者達が書いてる。値段が変動してるな。
Amazon.co.jp： Best Practice: The Pros on Adobe Flash: Douglas Easterly: 洋書

using flickr api 01

flickrから画像を取得する方法。提供されてるAPIを使う。使用の際に必要となるAPIキーはここで取得。
http://www.flickr.com/services/api/keys/

よく使われてるのはこのライブラリらしい。
as3flickrlib - Google Code

ライブラリ使わなくてもある程度は自分でできる。
[Think IT] 第4回：外部API（Flickr）を試す！ (1/3)

MVCモデルを使ってとか、僕にはまだわかりません。
下にあるコードは手っ取り早く使う場合とか、前段階として。
慣れだと思うけど、一回散らかさないと片付け方がわからない。

とりあえず、ブラウザに直接URLを入力してみると、xmlが返ってくる。
例えば、「test」というキーワードで全文検索して10件取得した1ページ目だったらこんな感じ(見やすいように改行入れてますが本来は一行です)。

http://api.flickr.com/services/rest/
?method=flickr.photos.search&api_key=取得したAPIキー
&text=test&page=1&per_page=10

結果。


他のを試したければここに出てるargumentsから選んで&でつないで=で代入すればいい。
&tags=music
とか。
Flickr Services: Flickr API: flickr.photos.search

ここまでくれば、あとは普通にxmlの処理するのと一緒。
SSAW07 » 第5回：ActionScript 3.0応用 I - 外部イメージの読み込み

Make your own Flickr search engine with Flash and AS3 | The Tech Labs

thinkitにも書かれているように、crossdomain.xmlをロードするのを忘れずに。

さらに、flash CS3とかで動かしてるブルジョアは大丈夫かも知れませんが、普通にflash player落としてXcodeとかで開発してる場合、セキュリティのエラーが出ると思う。

FlashPlayerTrustというフォルダを作り、Macintosh HD/Library/Application Support/Macromedia/に保存。その中にcfgファイルを作る(名前は何でもいいそうです。とりあえずmm.cfgとかにしておく)。
cfgファイルに目的のswfやフォルダのパスを設定する。こういう話題はどこに書いてあるかというと、ここからダウンロードできるpdfです。そんなん知らんよね。
Adobe - Developer Center : White paper: Adobe Flash Player 9 security

これもどうやって辿り着けたのか思い出せないが、とにかくここのドキュメントはダウンロードしていつでも参照できるようにしておく。
Adobe Flex resources

testで全文検索した結果から10枚表示。マウスクリックで表示順変更。
YOUR API KEYの部分を取得したAPIキーと差し替えないと実行した時にエラーが出て表示されません。

package {
 import flash.display.MovieClip;
 import flash.display.Stage;
 import flash.display.StageScaleMode;
 import flash.display.StageAlign;
 import flash.display.Bitmap;
 import flash.events.Event;
 import flash.events.MouseEvent;
 import flash.text.TextField;
 import flash.net.URLRequest;
 import flash.net.URLLoader;
 import flash.display.Loader;
 import flash.system.LoaderContext;

  public class TestFlickr extends MovieClip {
  private var APIkey:String;
  private var text:String;
  private var searchURL:String;
  private var startPage:uint = 1;
  private var pageValue:uint = 10;
  
  public function TestFlickr() {
   stage.scaleMode = StageScaleMode.NO_SCALE;
   stage.align = StageAlign.TOP_LEFT;
   stage.addEventListener(MouseEvent.CLICK, onMouseClick);
   init();
  }
  
  private function init():void {
   //your API key
   APIkey= "YOUR API KEY";
   //search word
   text = "test";
   
   search();
  }
  
  private function search():void {
   while(this.numChildren > 0){
    this.removeChildAt(this.numChildren-1);
   }
   setSearchURLString();
  }
  
  private function setSearchURLString():void {
   var baseURL:String = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=" + APIkey;
   searchURL = baseURL + "&text="+ text + "&page=" +startPage + "&per_page=" + pageValue;
   trace(searchURL);
   startXMLLoad();
  }
  
  private function startXMLLoad():void {
   var req:URLRequest = new URLRequest(searchURL);
   var XMLLoader:URLLoader = new URLLoader();
   XMLLoader.addEventListener(Event.COMPLETE, onXMLLoadComplete);
   XMLLoader.load(req);
  }
  
  private function onXMLLoadComplete(e:Event):void {
   var imgLoader:URLLoader = URLLoader(e.target);
   var xmlData:XML = XML(imgLoader.data);
   
   var xmlList:XMLList = xmlData.photos.photo;
   for(var i:uint = 0; i < pageValue; i++) {
    var farm:String = xmlList[i].@farm;
    var server:String = xmlList[i].@server;
    var id:String = xmlList[i].@id;
    var secret:String = xmlList[i].@secret;
    var imgURL:String = "http://farm" + farm + ".static.flickr.com/" + server + "/" + id + "_" + secret +".jpg";
    trace("URL:" + imgURL);
    var imgReq:URLRequest = new URLRequest(imgURL);
    var loader:Loader = new Loader();
    
    loader.contentLoaderInfo.addEventListener(Event.INIT, loadImageInit);
    loader.load(imgReq, new LoaderContext(true));
   }
  }
  
  private function loadImageInit(e:Event):void {
   var bitmap:Bitmap = e.target.content;
   addChild(bitmap);
  }
  
  private function onMouseClick(e:MouseEvent):void {
   setChildIndex(getChildAt(0), numChildren - 1);
  }
 }
}

jquery loading test

jqueryでファイル読み込みする時に、load()メソッドそのまま使うとローディングしながら中身が表示されてしまうので何か方法ないかと思って見つけた。

早い話が、読み込ませるdivにCSSでdisplay:noneを指定しておけばいいってことだった。
非同期通信されるとajaxSendとajaxCompleteが呼び出される。

コールバック関数ってのがよくわかってなかったんだけど、イベントリスナみたいなものだと言われたらちょっとわかった。というか、こういう使い方してもいいんだろうなと。

$(this).fadeOut("fast", function() {
 $("#content").show();
});

fadeOutした後に読み込んだファイルの中身を表示してる。dtをクリックしたらddが表示される。これやる前は普通にチェーンでつないでたんだけど、フェードアウトが終わる前に読み込みが始まってださいことになってた。
動作サンプル
read fileをクリックするとファイル読み込み開始。

wodcast

wodcast.org
Adrian ShaughnessyとかPeter Savilleとか有名なデザイナーのインタビュー集。
このままではpodcastに登録できないので、yahoo pipes使ってmp3のとこだけ抜き出した。
http://pipes.yahoo.com/pipes/pipe.run?_id=HCgD5pbp3BGhaZYI8jxBKg&_render=rss
リンク先をクリックして購読に使用するフィードリーダーをitunesにするか、itunesから「詳細...」>「Podcastを登録...」にこのURLを入力すればいけるはず。pipes実行しただけだとuntitledにしかならないけど、itunesではちゃんとタイトルなど表示されるのでこれでいいや。

環境が変わることもあって、携帯音楽プレーヤーで常に英語を聴いてるようにしたい。けどいわゆる語学学習用のって話が面白くなかったりするので、できるだけ興味を持って聴けるやつがいい。

wnycのradio labは編集とかも凝ってて、内容だけでなく音声ならではの試みが面白い。
WNYC - Radiolab

20071228

卒展のwebがローンチしました。第一弾。今後トピックとか作品情報とか充実していきます。わざわざwordpressで作ったので利点を最大限活かしたいところ。
IAMAS 2008 » 情報科学芸術大学院大学第6期生修了研究発表会岐阜県立国際情報科学芸術アカデミー第11期生卒業制作展

情けないことにブラウザごとで変わる見た目に2日ほど泣かされてました。ブラウザのせいっていうか、自分のコードが間違ってたんだけど。毎回本番に一番勉強してしまうのは何とかしたい。春から社会人なのに...。firebugとか、自作のbookmarkletが意外と役立った。デバッグ重要。ガチのプロがガイド作ってくれてたのでスムーズにコーディングできた。

次は印刷物。これもひとひねり効かせてるので、大変だけど、いいものになると思う。

バイト先のwebのこともあって、jquery調べてたんだけど、面白い。というか、javascriptもっと使わなきゃと思う。locationオブジェクトとか駆使すれば、かなりクライアント側でも頑張れる。

で、ユーザビリティ(アクセシビリティ?)とかweb標準的にはどうかわかんないけど、自分のページで色々試してみた。
hysysk

linkのとこで、liタグの中にリンクがある場合、css側でcursor:pointer;になるようなclassを用意しておいて、クリックしたらaタグ内のリンク先を解析して飛ぶようにしてある。クリッカブルな領域が広くとれるので使いやすいのでは、と思う。かなり視覚的な作り。workでの画像の見せ方も、dtタグにタイトルと拡張子入れといて、クリックしたらcss書き換えて背景画像にしてる。まぁ、見にくいのはわかってるけど、楽しんでやってる。

Reading newsfeeds

GainerでおなじみアカデミーDSPの小林さんがnodeboxワークショップやってる。
DSP

天気情報のrssを取得して表示。webライブラリを使う。
NodeBox | Web

text()メソッドに渡す際にstr()メソッドを使うんだけど、utf-8にdecodeしないとエラーになる。デフォルトのエンコーディングがutf-8になってないから？
3. 形式ばらない Python の紹介

文字コードは常に悩みの種。いつも何となく解決してるので、ちゃんと理解せねばと思う。

web = ximport("web")
fontsize(10)
news = web.newsfeed.parse("http://weather.livedoor.com/forecast/rss/21/40.xml") 
y=0
xoff=10
yoff=10
for i in news.items:
    s = str(i.description).decode('utf-8')
    text(s, xoff, y*30+yoff)
    y+=1

同じことをprocessngでやるとこうかな。もっと泥臭い感じ。
関係ないけど文字表示する場合PFont.list()で一覧とって配列の一番最初のを指定してあげればいちいちメニューからCreate Font...しなくて済む。

import processing.xml.*;
XMLElement xml;
XMLElement[] siteData;
xml = new XMLElement(this, "http://weather.livedoor.com/forecast/rss/21/40.xml");
XMLElement site = xml.getChild(0);
siteData = site.getChildren();
PFont font;
String[] fontlist = PFont.list();
font = createFont(fontlist[0], 10);
textFont(font);
size(400, 400);
int y = 0;
for(int i=0;i<siteData.length;i++) {
  if(siteData[i].getName().equals("item")) {
    XMLElement[] items = siteData[i].getChildren();
    for(int j=0;j<items.length;j++) {
      if(items[j].getName().equals("description")) {
        text(items[j].getContent(), 10, y*30);
        println(items[j].getContent());
        y++;
      }
    }
  }
}

centering, fade in

webのintro用にロゴ画像をfade inさせる。
javascript + cssで画像をウィンドウ上下左右の中央にしてfade in。
flashでやれよ、て感じだけど。
intro

参考にしたのは、やっぱりbrazil社長。
戦争 - 上下左右中央の件、改善、補足

今回はたまたまcssで上下センタリングの方法探してたら見つかった。考える事が似てるのかな。元々brazilさんのblogを発見したのは、capsuleがだせーけど好きとかそう言うので検索してたんだと思う。田舎の人が考える都会的イメージとかクラブ行かない人のクラブ的イメージとか。テクノちゃんと聴いてない(どういうこと?)人のテクノ的イメージとか。

にしてもバッドノウハウかー。
僕はjavascript使ってクライアント側のウィンドウサイズ取得してるんだけど、それもよくないのかも。しかもcssを外部読み込みにしないとうまく上下センタリングされない。
javascriptでcssの表示位置を制御するのはこの本のサンプルから。
標準Webデザイン講座｜サンプルファイルダウンロード

fade inで参考にした(というか不要なとこ消してそのまま使ってる)のはここ。
Cross-browser BlendTrans Filter JavaScript, Fade in/out

翻弄されちゃうよどうも。

note20070707

Max/MSP
ubumenuでQuickTimeMovieファイルだけを表示したい場合はInspectorでFiltered TypesにMooVと書く。

css
共通スタイル、各ページ毎のスタイルでファイルを分ける。
共通のとこで全称セレクタ使ってmarginとpaddingを0にしておくと便利。

html
見出し要素は順番を守る。文字の大きさではなく、構造。
定義リストが便利。会社概要とかはこれで書く。

javascript
MDC
メインページ - MDC
brazilさんに教えてもらったbookmarkletのわかりやすい解説
Bookmarklets - Browser Power

misc
Arkitip™ | Intelligence
複数の色んな肩書きの人達が記事や写真をアップしてる。サイトが綺麗。
Magazineのissue0032でexpelimental jetset特集。高かったけど良かった。

プロサッカー選手はスルーパスを受ける時、観客の目線が自分の目線のように感じられて、動くべき場所とタイミングがわかるらしい。

ふんわり何とかが食べたい。

get images from blogger

Bloggerのページから画像を抜き出すbookmarkletを作りました。
getbloggerimgてやつ。最近こればっかだな。
letsbookmark

そもそもはjudge a bookという最高にかっこいい本の表紙がアップされてるサイトの画像を全部ダウンロードしたいなーと思ったからで、単純にlinkのurlを取得して、拡張子がjpgになってるやつをdocument.writeでimg要素に突っ込んで表示してみたら成功したってだけです。
そのままだといくつか取れないのがあって、全部調べた訳ではないのですが、リンク先がs1600-hてなってるのが問題みたい。ってことで、if文で分岐させて、ffffound!でやったみたいに-hを取ってやって、ついでにgifの場合も表示することにした。

bibliodysseyとかmutantsoundsででっかくてレアで怪しい感じの画像がどっさりとれて嬉しい。ちょっと改変すれば色んなとこで使えそうだし。なるほどね。今まで暮らしに役立つプログラミングってしてこなかったけど、こういうことか。たれの工夫で献立10倍か。

ffffound!画像ちっこくなったけど、新着の横に関連画像が表示されるようになって、再発見の機会が増えた。面白い。

bbbbig!

画像のブックマーク+おすすめサイトffffound!の画像表示がちっこくなってしまった。元画像は保存されてて、ファイル名の_mを取れば表示できるということで、bookmarkletの勉強がてらやってみた。
bbbbig!てやつです。
letsbookmark

最初はsubstring(0,ファイル名-6)で_m.jpgの部分(後ろから6文字)を取って+".jpg"でまた拡張子つけたやつを表示させてたんだけど、これだとあまりに頭が悪い。関係ないのも読まれるし他の拡張子表示できないし。
で、youpy（ぴよよぴぴよよぴ）さんのGreaseMonkeyスクリプトを参考にmatch('_m')で該当する画像だけを取得して、その後split('_m').join('')して_mを取り除いてる。なるほどー。

やっぱ画像でかいと印象が全然違う。音も然り。

linkimage

javascriptの勉強のために手始めにbookmarklet。いつも通り見よう見まねでとりあえず動くものを。で、今後色々調べくうちに何となく気づいたらちゃんとできるようになってる、てのが理想。
ページ内の画像のみを表示して、クリックでその画像のURLに飛ぶ。これでどっかのディレクトリに連番で置いてある画像のURL取得して、terminalからcurlして一気に落とせる。もっとスマートな方法あるはずだけど、ひとつひとつ表示してCtrl+クリックでSave link as...から比べれば進歩。こうやって次のアイデアがどんどんでてくるんだな。ラピッドプロトタイピング重要。

document.images[index].src

で画像のURLが取れるとか、思ったより簡単。

linkimage
リンク先のページの、linkimageってやつをbookmarkするか、bookmarktoolbarにドラッグ&ドロップしたら使える。はず。firefoxでしか試してないけど。

sketch20070518

generated by glitter

glitter

twitterのpublic_timelineのprofile_imageを取得してglich。