──あなたの心の琴線に触れるようなものは何もないです。かといって、他の何があるわけでもないですが。
ものっそい今更という気がしますが。＾＾；
mixi自体に付いてる機能で2列表示、3列表示の切り替えは出来ますしねえ……。
でもまあ、車輪の再発明はKAYのオハコなので、ネタ的には全然おっけー。（マジかよ）
ブックマークレットの練習という感じで作ってみたんですが、得るものは非常に少なかったですね。やってる事はフツーにスクリプト書くのと変わんないので、当たり前といえば当たり前ですが。＾＾；
大仰な名前まで付いてますが、どっちかっつーとこれ、小技、小ネタの範疇ですよねえ。スクリプトを直接ブックマークするという発想の面白さと、導入の容易さが受けたって感じでしょうか。まあいいや。
前回のエントリ書いてから微妙にバージョンアップしてます。
組み込みのトランジションに加速度付きの移動とバウンドを追加してみました。
せっかくだから個々のトランジションに解説でも付けてみようかなと。
components.jsでも紹介しようかなと。
なんつーか、結構前から使ってるんですが、解説とかすんのめんどくさくてずっと放置してました。
一応これは、prototype.jsのような、javascriptのライブラリ（と言っていいのか？）です。
prototype.jsはその名のとおり、組み込みのオブジェクトを汚しますが、components.jsは組み込みオブジェクトには一切手を付けないようにしてあります。なんか、頻繁に使いそうな関数とかはとりあえずグローバルに登録しとけ的な。
何分、勉強しながらの制作なので、ぶっちゃけ作りは粗いです。で、まだまだ開発途中です。なんかjavascriptで色々ちょこちょこやってる時に、関数やらオブジェクトやらが必要になりそうになったら更新していく、というスタンスです。めっちゃ自分用です。
そもそも、prototype.jsがいいらしいと聞きつつも、使い方を覚えるのがしんどいというのが出発点ですからっ。
でまあ、やっぱ1から解説すんのはめんどくさいので、とりあえずこいつのキモであるTransitionオブジェクトの触りの部分だけ。
そうなんだよなあ……そもそも、HTMLの動的書き換えの為に作ったのに、自分のサイトではほとんど活かされてない……。orz
まあいいや。
結局CSSは必要最小限で。そのうち気が向いたら代替CSSとか導入するかも。
あと、しぃペインターを導入して絵板を復活させました。
一応サーバ側の処理は自分でスクリプト書いたんだけど、なんかいろいろ挫折した。
いちびってajax使っていろいろやってみようと思ってたんだけど、object要素があまりにも使えず……。orz
ていうか、Firefox2.0でobject要素に対してtypeofしたら”function”を返すのはなぜなんだぜ？
ライブコネクトのコールバック関数とかもうまく動かないし、iframeの代替として使おうとしても全然思うような動作しないし……。
XHTML+PHP+MySQL+Ajaxなお絵描き掲示板として華麗にデビューさせたかったんだけどなあ……。
とりあえず、現時点で超超作りかけです。KAYが使えればいいやという感じで作ったので、返信機能すらありません。
IEにも対応してません。IE7ではどうだろう……。
KAY以外の方も使っていただいて全然構いませんが、まあ誰も使わないだろな。
各ブラウザで、documentオブジェクトへは、以下のような感じでアクセスできる。
※インラインフレームを「name=”child” id=”iframe_object”」で定義したとする。
■Opera9.02
document.getElementById(”iframe_object”).documentでアクセス可能。
■Firefox2.0
child.documentでアクセス可能。
■IE6
document.getElementById(”iframe_object”).document、child.documentのどちらでもアクセス可能。（===の比較で同定出来る）
ここで問題になるのがOperaの場合。IE、Firefoxはchildがグローバル（インラインフレームのwindowオブジェクト）という事になりますが、じゃあOperaの時のグローバルはどこよ？ という話で。
実はOperaでも、iframe要素によるインラインフレームの場合だと、要素のname属性で指定した名前で親のスクリプトからインラインフレームのwindowオブジェクトへアクセス可能なんですね。
しかも、object要素の場合でも親の方のwindowオブジェクトのメンバでちゃんと名前空間が確保されてる。
「window.(name属性で指定した値)」を参照するとundefindではなくnullを返します。
これはなんなんですかねー。あえてこういう仕様にしてるとも取れるなあ……。
まあ実際、object要素でHTML文書を指定した場合はあくまで文書を埋め込むんであって、ウィンドウを埋め込むわけじゃないですからねえ……。
とはいえ、親のスクリプトから見た時にフレーム内のグローバルが行方不明になるというのもどーかと……。
でまあ、苦肉の策で、インラインフレーム側のスクリプトにこんな感じの記述を入れておく事で親のスクリプトからインラインフレームのグローバルへアクセスする事は出来ます。
parent[window.name] = window;
実際は、場合や環境によってインラインフレーム側のスクリプトが先に読み込まれるかも知れないので、各フレーム間でもうちょい厳密な同期処理を入れといた方がいいのかも知れない。（いらないのかも知れない）
事実、簡単なテストをしたところ、Operaの場合は親のスクリプトが先に実行され、Firefoxの場合は子のスクリプトが先に実行されるという現象を確認しました。これが上記の記述に影響するかどうかは未検証ですが。（そんくらい検証しとけよという話も）
んでまあ、最終的に何が言いたいかというと、もっとスマートに子フレームのグローバルにアクセスできる方法があれば誰か教えて下さい。orz
winIEのhtml要素は、デフォルトでボーダーを持っています。
なので、
html {border:0;}
などとしてやると、閲覧領域の凹みが無くなり、フラットな表示になります。
……とここまでならなんて事の無い小技ですが、javascriptでイベントを扱ったりすると、これが思わぬ動作に繋がる事があります。
というのも、IEではdocument.documentElement.clientWidth(clientHeight)は内容領域（CSSのwidth、height）の値を返しますが、event.clientX(clientY)はボーダーまでを含めた座標を返します。ぶっちゃけ、html要素に何も指定しない場合だと2pxほどずれます。
clientWidthをoffsetWidthとかに変えても無駄です。スクロールバーは幅に含まれますが、相変わらずボーダーは含まれません。
しかもIEは、標準準拠モードと互換モードでdocumentElement周りの挙動が変わるらしく、加えて他のブラウザへの対応も考えると、もう何がなんだかわかりません。誰か助けて下さい。（←エントリの趣旨が変わってきている）
javascriptでは通常、クロスブラウザ用にオブジェクトやプロパティの有無を判別して処理を分岐させたりしますが、関数なんかを実行するたびに同じ判別処理を通過するのは非効率ですよね。
で、以下のような方法で2回目以降の判別処理を無くす事が出来ます。
IEで
obj.style.backgroundColor = “transparent”;
が効かね。
obj.style.backgroundColor = “”;
だと透明色になるみたい。
http://www.abrahamjoffe.com.au/ben/canvascape/
faLogさんより。
TP版のOpera9にて確認。しっかり3Dしてくれてました。すげーなおい。最初shockwaveかと思たよ……。
今回の実験テーマは「インラインのスクリプトを書かない」ですね。ほんとはDOMレベル0とかも無しでやろかなとか思ったんですが……めんどくさくて。＾＾；
う～ん、こうなってくるとカレンダー部分のインラインスクリプトもどうにかしたいなあ……。
でまあ、こんな感じですが。