非公開：パソコンとかネットとか

[PR]

ワンセグチューナー購入

　USB接続のワンセグチューナーを購入。I.O DATAのSEG CLIPってヤツ。
　これでGF録画できる（喜）。
　動画編集ができないのは大いに気に入らんけど。

移転先候補の話

　とりあえず移転先候補地のアドを。→http://web.hpt.jp/orzon/
　舌の根の乾かぬうちにスクリプトになった。まあ試験ですから。直感的に操作できるページ、を目指してみたけど、うーん、やっぱりややこし。
　問題点、タグ選択で検索条件を切り替えたとき（or→and）ログが０件になるときがある。検索条件選択機能は外したくないが、ツールバーみたいなのは付けたくない。
　あと文字コード。JavaScriptのページはUTF-8で書きたいのだけど、ここの広告バナーはShift-JISにしか対応してないみたい。まあこの書き換えは簡単。

　とかなんとか。

ImageDancer開発状況(2007/05/20)

　サンプル２つ。
　ひとつめ、前のがひどいバグだらけだったので修正。あと、少し派手に動かしてみました。位置と大きさの変化するdiv要素と、位置と色相が変化するdiv要素のサンプル。１０秒。
　ふたつめ、イベント処理追加。あとおまけで内部のオブジェクト化を一部手直し、動きをちょいと変更、透明度の変化も加えました。（透明度を設定すると少々重い）　これも１０秒。
　クロスブラウザ対応がメンド臭いのでイベントリスナーは使わず、エレメントのイベントプロパティに関数を代入する方法での実装になっとります。

　関数が増えたので簡単なリファレンスを作りました。ImageDancerのページからドゾ。
　基本的に「書き易さ」ではなく「読み易さ」を重視した引数設定になっているので、自分でもこんがらかってきました。読むだけならなんとなく何をやっているのか想像つくけど。

ImageDancer開発状況(2007/05/12)

　スクリプト書き直し、概ね完了。前のより関数指向寄りにシフト。prototype汚染を減らす方向で。基本的な機能に変更はなし。
　名前汚染の対策として、無名関数内でオブジェクトを定義。あわせてスクリプト上で簡単に生成オブジェクトの名前を変更できるようにしてみた。
　関数名とか関数内の変数名とかにもうちょっと改善余地が。イマイチ一貫性に欠ける。
　とりあえず動いたのでサンプルを上げておきます。移動しつつ大きさの変わるdiv要素。
　これからいろいろテストしつつ、デバグ。

ImageDancer開発状況

　ImageDancer、大幅なダイエットを敢行中。一部コピペでほぼ全面書き直し。オブジェクト化がうまくできていない。とりあえずnewを使ったコンストラクタを経由するオブジェクトの生成を可能な限り減らす方向で。
　何が気に食わないかというと、newからオブジェクトを生成するためにはいちいちその名前を冠した関数を定義しないとならない、要するに名前付けをしなければならないこと。今回場合だと、FunctionからMotion（時間軸に合わせたFunction）、Motions（Motionのシーケンス）、Act（Motionsを指定エレメントの指定プロパティに適応させる）、Acts（複数のAct）、Seen（再生倍率指定、等）と段階的にオブジェクトを進化させていき最終的にaction()という流れをとるのだけど、それぞれに名前を付けていたらキリがないし、それ以前にややこしくてしょうがない。そうでなくてもVector（座標やサイズに適用）やらColor（HSVカラー）やらを扱わなければならないのに。既存のライブラリと併用する可能性を考慮しないわけにもいかないだろうし。（私はしないが）
　あとnewからその生成関数のprototypeを模した（←ちょっと微妙な表現）オブジェクトを生成する、という流れはOOP的ではあるけどJavaScriptの言語仕様からはちょっとズレてるかも、と個人的に感じている、ということもある。この辺りは自分の中でもまだうまく整理できていないのだけど、要するにnewはJavaScriptらしくない、ような気がしている、かも、みたいな？
　ともかくちまちまと継続中、ではあります。

こんな感じ

　ImageDancer、基本的な装備が一通り動きました。前にも書いてけど、要するに「一つの時間軸に沿って変化する複数の値を要素（の属性）に与えていく」というもの。
　サンプル。
　このサンプルでは２つのdiv要素の位置と透明度を時間に沿って変化させています。

　ポイントは２点。
　一つ目は、一度に動かすことのできる要素数に制限が無い点。二つ目は、時間に対する動きなので、要素数を増やしたりスペックの異なるPCで動かしたりしても動きの速度が変化しない点。（ちなみに、無茶な要求をすると描画間隔がまばらになります）
　引数経過時間（単位、ミリ秒）から属性値を返す関数オブジェクト、という形で動きを指定しています。
　現在動かすことができるのは、div要素の位置、大きさ、透明度。
　これからあらゆる要素のあらゆる属性に対応させる予定。

とりあえず、動いた

　ImageDancerのテーマは、「動き」をオブジェクトとして表現することなんですが、それの実体化、即ち「動かす」ことが意外に難しい。これはブラウザに実装されるJavaScriptの仕様に起因するもので、ぶっちゃけてしまうと、時間軸に沿って要素を動かす処理にJavaScriptは向いていない、ということのようであります。
　とはいえできないわけではない。現在いくつかの方法を試行錯誤中。
　今回のは、とりあえず動いた、というだけもの。はっきり言って力技で、美しくない。まあ、やりたいことはなんとなくわかっていただけるのではないかと。

　この辺（その１、その２、その３、その４、その５）を参考に、もうちょっといじくってみますか。

なにもやってないわけじゃない

　ImageDancer、実際に自分でスクリプトを組んでみると思いのほか問題が多く、難航。気付いたことをいくつか書いておく。

　メソッド（インスタンス着きの関数）の受け渡しはメソッド内のthisを拘束しなければならない。これについて他のサイトを見るといろいろ書いてあるようだが（thisがwindowを参照する、みたいな）、要するに受け渡しされる情報は関数の定義部分のみ、ということか。
　メソッドの受け渡しを必要とされる処理はその処理のオブジェクト化に問題があると言える、かもしれない。メソッドの所属するオブジェクトごと伝達する仕組みに書き換えられないか検討してみる。場合によってはオブジェクトの基本設計から考え直すことも。
　ただ元からJavaScriptに組み込まれているメソッドに対しては関数を渡さざるを得ないわけで。その場合はライブラリに大抵あるbindメソッドよろしく関数をapplyしなければならないようだ。
　applyの機能を、コンストラクタ関数から継承関数を生成する、みたいな説明しているサイトがあるが、どうやら関数オブジェクト一般の定義部分を引っ張ってくるのがその基本的な仕様のようだ。
　硬派なJavaScript使いを標榜する私（謎）としてはクラス指向的な機能はできるだけ遠くに置いておきたいところではあるのだけど。newとかprototypeとかも、本当に必要かどうかよく検討するべきかと。値は生のオブジェクトで、メソッドは単純に関数オブジェクトへの参照で、としたほうがすっきりする場合も少なくないように思う。

　とか考えつつ。しかし支離滅裂。
　あんまし進んでいない開発状況は、こちら。

JavaScriptで三角形を描く

　スタイルシートのボーダー要素を利用して三角形を描く方法、というのを試してみた。ネタ元はReal-Time 3D in Javascript。
　なんせ元が英文なので詳しい仕組みはよくわからんのだが、要するに太さの異なるsolidなborder要素の境界にできる斜線を利用する、ということらしい。

　で、right_angledTriangleという関数を作ってみた。矩形のdiv要素を斜めに割って直角三角形に見せる、というもの。
　引数は一つのオブジェクトで指定。targetに直角三角形を表示するエレメントを、leftとtopに直角部分の位置をピクセル単位の数値で、baseとheightに底辺と高さをピクセル単位で（マイナス指定可）、colorに位置指定した側の直角三角形の色を、backgroundにその反対側の色を、それぞれ指定する。
　ただしIE6以下では色指定にtransparentを指定できない。ああ、これは致命的。またIEか。
　ネタ元にさせていただいたサイトでは何やら上手いことやっているみたいだが、そのカラクリがよくわからん。どうやら色の置き換えらしきことをやっているらしいのだけど、この件はとりあえず保留。

　ついでにワイプアウト処理の関数をやっつけででっちあげてみる。リアルタイム処理のテストと併せてサンプルを作ってみた。
　こんな感じ。
　まあワイプアウトとはいっても色指定にtransparentを指定できないのであまり利用価値はない。

　ソースは、うーん、何度見てもヒドいもんだ。汎用性などカケラもナシ。
　計画性もなくただ思いつくままに行き当たりばったりでコードを重ねていくとこういうことになる、という悪い見本市。文学的プログラミングの真骨頂。冗長とはまさにこのこと。
　とりあえずこのサンプルは、記念碑的意味合いを込めて、保存しておくことにする。

ImageDancer

　ノーガキばかりというは個人的に少々いただけないので、ちょっくらスクリプトを作ってみます。HTML要素を時間軸に沿って動かすJavaScript関数群、題して『ImageDancer』。画像に特化した処理ではないので「看板に偽りアリ」ですが、ゴロがいいので。　現在のJavaScriptの仕様での画像の変形はちと苦しいので、動きは平面上での移動のみに限定します。　とりあえず座標計算の基となる部分のみ半完成。サンプルを上げておきます。まだこの段階では何がやりたいのかよくわからないでしょうが、今後おいおい機能を追加していく予定であります。

　基本的な方向性は、劣化某FFD（(c)株式会社モノクローマ）。ただし上にも書いた通り、画像の傾けや変形（拡大、縮小含む）は今回はパス。 　肝となるのは、複数の要素のそれぞれ異なる動きを一つの時間軸に沿って表示する、という機能。字面ではニュアンスを伝えにくいのですが、近いうちにサンプルを上げます。

　テストはWin版IE6、Firefox2、Opera9。クロスブラウザに大掛かりな仕掛けが必要な機能は使わない方針。独自路線を爆走するブラウザがいるのでかなり手を狭められるのですが、これは致し方なし。 　重くなるのは勘弁なので、ライブラリは使いません。（機能を覚えるのがメンド臭い、というのも実は大きい）

　ま、例によってボチボチと。