2009年12月7日月曜日

週末撮ったもみじの写真

近所の公園のもみじは、もうそろそろおしまいでした。落ち葉写真ばかり。

fallen maple leaf on the road: アスファルト上のもみじの落ち葉
fallen maple leaf on the road

yellow to red: 黄色から赤へ
yellow to red

maple pattern: もみじ柄
maple pattern

maples in water: 水の中のもみじ
maples in water


iPhoto '09にFlickrにアップできる機能が付いたことを知る。っていうかFFXporterでFlickrへアップできなくて気付いた。

2009年12月5日土曜日

JavaScriptテスト: 夕焼け空写真をTwitter(twitpic)から探して表示

Twitter検索APIアクセスしてみるテスト。
サーチクエリは「夕暮れ OR 夕焼け OR 夕日 twitpic」でResultMaxは100件。
で、twitpicの有効なURLが入ってたらサムネイル変換して表示。RTやQTは除外。imgタグのtitle属性につぶやき本文突っ込んでるので、確認したい場合はマウス乗っけて少々待ってください。




さてうまくいくかな(Localではできてるが、blog記事として投稿となると、実際に投稿公開するまでわからない(自信ない))

結果:Safari、Firefoxでおk。

2009年11月29日日曜日

最近LX1で撮った写真(2009/11/15 - 11/28)

順に、自宅クリスマスツリー(暗くした部屋で1秒間露光)、芽、もみじ、池に映るもみじ(180度回転)、もみじ落ち葉、枯れ枝フレームの空、池に映ったもみじ、紅葉、夕焼け、コシロノセンダングサ、ターンイエロー。
サムネイルは皆正方形ですが、元画像はそうとは限りません。画像クリックで新窓で元画像へ。



すべてTumblrからThumbnail拝借。元はFlickrにUpしてあるけど、Tumblrの自分のpostから指定画像をblogにペタっと貼る用コード生成する仕組みは以前作って手元にあるので、Tumblrから。同じようにhtmlコード吐くやつのFlickr版そのうち作りたい。

2009年11月24日火曜日

風が吹けば桶屋が…僕が仕事すれば子猫が…

通勤路に駐車場があります。住宅地の中にある、砂利と区分けのロープが張ってあるだけの、駐車場です。この駐車場の片隅に小さく、直径40cmくらいかな、砂利が盛られたところがあります。

ある雨の日、この駐車場の脇で、子猫が冷たくなっていました。朝の出社時でした。僕は何もせずに、かわいそうに、と思いながら通り過ぎるだけでした。
その日の夜だったか、次の日だったかは思い出せませんが、子猫の亡骸は道端からなくなり、駐車場の片隅に砂利が盛られた場所ができました。それまではなかったように思います。たぶん、近隣の方が、お墓として作ったんだと、勝手に思ってます。

それ以来、そこを通るときに思うことがあります。僕が普段の仕事で何をしていたら、あの子猫は死なずに済んだろうか、いや、僕の仕事ではどうにもならないんだろうな、ということ。「風が吹けば桶屋が儲かる」のアンサイクロペディアの説明のごとく、僕が仕事をすれば子猫が助かるというのは、隔たりがとてつもないな、と。


自分の仕事と身近な出来事の隔たりなんて、何を結びつけようとするか次第で、いくらでもある話です。

冒頭の話は極端な例ですが、こういった仕事との隔たりができるだけ小さい身近な出来事を、もっと見つめる、みつける、あるいは身近な出来事から隔たりが小さい仕事を見い出す、みつける、方が人は幸せをより感じられるのかなと、思います。仕事は仕事と割り切るという選択肢もありますが、そういうのは前時代的だと、根拠もなしになんとなく感じます。


身近な出来事と仕事との隔たりが小さいことを求める、というのは、自分の手が影響を与えられる範囲に無い物を、欲しているのかもしれません。手が届かない社会的秩序で作られた壁の向こうのものを、手の届くところに配置したがる、と言い換えるとあれです、エントロピー増大測っぽいじゃないですか。あくまで喩えですが。

ここで社会的秩序といいましたが、これはエントロピー増大測の前提である断熱系という秩序とは異なります。人が作りし秩序は、閉じた系ではなく、社会という常に変容する系の、その時点での現象を満たすかのように作られた、というよりむしろはみ出すものを強制するためとか、まあそんなルールです。

話が意図せぬ方向に行き始めたので、仕事と身近の隔たり、に戻します。戻しておいていきなり、「仕事」を「自分の手でできること」と言い換えましょう。会社の仕事という枠を一旦忘れます。そうすると、今の世の中、影響を及ぼす事のできることって、いろいろあるのではないでしょうか。とくにインターネットがそれを可能にしている例は多いと思います。何かを作り、公開する、それだけでできます。「何か」って文章でも絵でも、それぞれに敷居の高低、影響の大きさ、あるでしょうが、何かをPublishすればなんらかのFeedbackが得られやすい、のは間違いないでしょう。情報を出せ出せさすれば与えられん、ということを言いたいわけではありません。カツマーではありません。


ここで僕が最近作ったTwitterのbot、カーチャンbotを例にあげます。カーチャンbotとは、2ちゃんねるにて見る人の心を震えさせしんみりさせてしまう破壊力を持ったカーチャン、その台詞(とそれっぽい感じに僕が勝手に作った文言)を、あのAAとともに、1時間に1回Twitterでつぶやくbotです。

このbotをfollowして、そのつぶやきを見た人が、リアルな母を思い浮かべ「今年は帰省しようかな」なんて思ってくれたとしたら、これは僕の作ったものが誰かに影響を与えたかもしれない、ということかと思います。そこまででなくとも、カーチャンbotのつぶやきを見て、一瞬でも和んだ、笑った、しんみりした、なんて人がいれば、そしてそれはありがたいことにそういう旨のreplyをくださる方がいるので把握できるのですが、設計者としては幸せなことです。これは「自分の手でできること」が身近な(と錯覚できるネットを介した)誰かに影響を与えられた、ということです。とはいえ「カーチャン」の力を借りて実現はしているものですが。「カーチャン」こそが偉大です。

ということを想定して「botを作った」わけではなくて、JavaScriptとブラウザあればサーバなしにbot作れんじゃね?という原理確認のために作ったのが本当のところで、カーチャンの前はふかわりょうネタみたいなのをつぶやくbotにしようかなと思っていたりもしました。最終的にカーチャンになったのはたまたまです。
って、botのネタばらし話はどうでもいいや。


話を「自分の手でできること」、それが影響を与えられる「身近に感じられる対象」に戻します。

上にあげたbotは、いくつかのWeb関連技術と、技術を学べるインターネットという環境、などを僕が利用できたから作れました。CreateしてPublishしてFeedbackを得られる、そのための手段があったから、botで和んでくれる人がいることを知り作って良かったなというささやかな満足感を得られる、わけです。
Twitterや関連もろもろによって、僕は、「自分の手でできること」と、その成果が影響を与えられる「身近に感じられる対象」とを、得られたわけです。

こういった自分のできることとその影響を与えられる対象の隔たりを小さくし、達成感、満足感をより得やすくする手段を広く人々に提供できる存在は、今後も人々に必要とされていき、生き残り発展していくと思います。

この仕組みを会社内で回せるような企業は、高い価値のアウトプットを出せると思います。それがさらに社外の人々のための「手段」の発展に繋がるよう、そもそもの理念を設計しておくとよいのではないでしょうか。

風が吹けば桶屋が儲かるよりも、風が吹けば自宅の縁側の風鈴が鳴り、風流さを辺りに醸し出す、それくらいがいいです。

書いていて長くて飽きてきてgdgdしてきたので、このへんで。

- Posted using BlogPress from my iPhone

2009年11月9日月曜日

最近LX1で撮った写真(2009/10/12 - 11/7)

ひとつ前のエントリと同じく、1ヶ月でけっこう撮って(整理して軽く補正して、んでもってFlickrにもアップして)るんだなぁ、と我ながら思った。

古びた船。10/12 横浜港にて。
old ship

秋の空。10/12 横浜港から。
autumn sky

ヤクシソウ。10/25 散歩道にて。
Youngia denticulata(Yakushisou/ヤクシソウ)

カメムシ。これ成虫じゃないそうで。10/31 公園にて。
アカスジキンカメムシの終齢幼虫 - Last instar larva of Poecilocoris lewisi

階段 - 一歩。10/31 公園にて。
step(s)

どんぐり - 上から。10/31 公園にて。
どんぐり - acorns

どんぐり - 横から。10/31 公園にて。
どんぐり - acorns

階段。10/31 公園にて。
階段 - steps

落ち葉。10/31 公園入り口あたり。
落ち葉 - fallen leaves

サザンカの花びらの絨毯。11/1 公園にて。
carpet of petals - 花びらの絨毯

花びら集め。11/1 公園にて。
carpet of petals - 花びらの絨毯

水辺の草(名前わかんね)。11/1 公園にて。
herb near water - 水辺の草

ナンキンハゼの紅葉。11/7 公園にて。
Chinese tallow tree - ナンキンハゼ

フェンス。11/7 駅にて。
side of fence

最近のTwitter投稿写真(2009/10/12 - 11/8)

1ヶ月あると、けっこうTwitterに写真postしてるもんですね。
マウスオーバーで投稿時の日時やtweetが出るかと思います。クリックで大きい画像へ。



























合格祈願消しゴムの落とし物、がインパクトありますね。

2009年10月22日木曜日

audioタグとJavaScriptでピアノを作ろうとしたけど諦めた

タイトル通りの話をざっくり書いてみます。
(下の方に(挫折した)サンプルあります)

HTML5といえば、canvasタグたーのしぃーひゃっほーいで、videoタグとaudioタグでリッチなコンテンツもFlashなしで見せてやんよ、って感じでございますが、canvasタグは個人的にも多少はいじってみて可能性を感じましたが、videoタグとaudioタグはこれといった「おもしろ方向性」が思いつかなかったので今まで全然いじりませんでした。が、ちょっと思いつきまして、audioタグ利用してブラウザだけで動作するピアノを作ってみようと、こんなことをやってみました。


まずピアノ単音をG1~C5まで用意します。wavファイルで2.5sくらいの長さの。
GarageBandでソフト音源トラックを作り、音色ピアノ、BPM120、4分音符1つ、をwavで書き出しました。GarageBandが最短小節数8という縛りがあるようで、無駄に長いwavが生成されたので、QuickTimeProで2.5sまで短くして、さらにもっと低レートにして、変換します。ってのをG1~C5まで42音あるのでそれだけの回数やりました。アホみたいです。


音ネタが用意できたら、html内にaudioタグを43個作ります。idに id_C3
とかつけて、それぞれのsrcに作ったwavを指定してloadします。ちなみに、制御はJavaScriptからのみ行うので、controller
= falseで、ページ内にPlayerっぽいものを表示しません。用意したwavは42個なのに43個のタグとは如何に?それはあとで書きます。


これで、鍵盤の絵描いて(各鍵盤は独立したobjで)、たとえばC3の鍵盤クリックしたら、onClick =
document.getElementById("id_C3").play(); で該当する音鳴らす、とかやればピアノができるなーと。

ただそれだけだとおもしろくないので、シーケンサーみたいに「再生」してみようかと。でも処理が複雑且つ重くなりそうなので、まずは和音は無視の方向で、単音でメロディーを奏でるだけのを考えます(って思考が先走ったので、鍵盤は作成してないです)。メロディを記述して、それを読み込んで順次タイミング合わせて音鳴らしていく、って感じですが、BASICやってた方はわかるでしょうか、PLAYコマンドの中身みたいな感じで書いて、それを解釈して再生ってのを考えました。

たとえば。「チューリップ」の冒頭(♪さいたーさいたーちゅーりっぷーのはーなーがー)なら、こんな感じに書くことにします。

C3.4,D3.4,E3.4,R.4,C3.4,D3.4,E3.4,R.4,G3.4,E3.4,D3.4,C3.4,D3.4,E3.4,D3.4,R.4

C3.4は、3オクターブ目のC、長さは4分音符、を意味する、というフォーマットを考えました。Rは休符です。

さてここで、42音用意したのに43個audioタグを作った意味を書いておきます。43個目は、42個のどれでもいいので名前変えてコピーしてloadしてobj.volume
= 0.0 にして、休符代わりに使います。
はい。

C3.4,D3.4,E3.4,R.4,C3.4,D3.4,E3.4,R.4,G3.4,E3.4,D3.4,C3.4,D3.4,E3.4,D3.4,R.4

これをどう読み込んで、解釈して、audioタグの制御に使うか、ですが、全部JavaScriptでやります。

http://なんららかんたら?BPM=120&Melody=C3.4,D3.4,E3.4,R.4,C3.4,D3.4,E3.4,R.4

という感じにサーバサイドでなんかやるっぽい記述なんかしてみちゃったりして。別にたいしたことやるわけじゃないのですが、document.locationでURI拾ってきて、?で分割、&で分割、"指定ワード="で対象を変数に読み込む、とやります。で、Melody=で取得した文字列は、さらにカンマで分割して配列に。この配列を順次再生していけばいいのです。


まず配列先頭には「C3.4」があります。ピリオドで分割して、キーと長さにわけて、

document.getElementById("id_C3").play();

で音を鳴らします。が、長さが問題。まあ自然減衰するピアノ音ってことで深く考えず、長さは次の音をいつ鳴らすか、にします。とすると、BPM120で4分音符の長さ、というのを計算すると、500msなので、配列の次の要素「D3.4」を500ms後に鳴らせばいい、ということに。

具体的には、今何個目の音(配列のデータ)を鳴らしているかを管理する変数を用意しておき、それをインクリメントして、

setTimeout(playNextSound, 500);

とかこんな感じで、500ms後に処理が実行されるようにします。これを配列が空になるまで、順繰りやっていけばいいのです。やったね!


…とうまくできたーと思ったのですが、まともなメロディを作ろうとすると、なんかうまく再生タイミングが合わなかったりします。
Safari4(audioタグサポートしてるはずだけど)では最初の音源の読み込みが激重かったり、同じキーを連続で鳴らすと汚かったり。Firefoxでもテンポ設定次第で、指定タイミングで発音されない音が出たり(Script自体は指定タイミングで走っているが、発音がずれる)、と、現実的なモノはできませんでした。あとiPhoneのSafariから使えるブラウザベースのをピアノシーケンサーを夢見ていたのですが、iPhone版Safariはもっとダメでした。audioタグを思うように制御できん。


一応サンプル。
Macの最新Safari、最新Firefox、Windowsなら最新Firefox、以外ではアクセスしない方がいいです。あとplayボタンが緑になるまで待って、クリックしてください。読み込みはMac Safariで10秒くらい。音量注意。(リンク先、MelodyのEditできそうな感じになってますが、いやできるのですが、動作不安定です)

audio tag sample(聞いたことある曲がサンプルとして読み込まれます)

audio tag sample (URL引数をPlay)(上に書いたようにチューリップをURLで渡してます)


やっぱこういう、音(とか映像)をぐりぐり用いるような遊びは、Flashやサーバサイドの力借りてやるべし、ってなところでしょうかね、今のところは。うーん、PC性能にもよるのかもしれませんが、PC性能が問題なくても、ブラウザの力の限界的なところかもしれません。僕のプログラミング能力が低いせいかもしれません。PrototypeやjQuery等のJavaScriptのLibraryまともにさわったことすらないもんでして…。

2009年10月12日月曜日

連休中に撮った写真

Flickrから3枚。金木犀、夕暮れ前、野アザミ。一応iPhotoで露出、コントラスト、色調など補正してあります。トリミングは、今回はしてるのないかな。blogへの貼付けは、各写真のページでALL SIZES→指定サイズ→表示されてるhtmlコードをひとつずつコピペ。枚数多いと面倒。

金木犀/Orange osmanthuscoming twilightノアザミ/Cirsium japonicum


こっちはTwitterで投稿してた写真5枚。Twitterログhtmlソース化の自作JavaScriptを改変して、↓みたいに、画像の投稿だけ抜粋してhtmlコード吐くやつ作った。title属性につぶやき本文埋め込まれてます。


おまけ。チョウを運ぶアリ。

ant work from chordstriker on Vimeo.