ひたすらJavaScript

tableの列数が違う行を消したり追加したりしてたら、IEの場合は罫線がバグるよ・・。どうにかならんのかのぅ。

prototype.jsを使うことを前提にHTML書いてたら、今までの書き方と全然変わってきた。
タグにクラス名を複数つけれることを知ったのが最近orz
だからJavaScriptで処理をするためのクラス名とか結構たくさん書いてしまうんだけども・・いいんかいな、これで。
まだ$$()関数を使ってないから今後はこれを活用してみようかな。

ajaxめんどい・・

簡単な例だとnumber_format()とか。
PHPで数値とnumber_format()後の文字列を出力して、JavaScriptで計算が必要な場合はnumber_format()に相当する処理を加えて・・。

こういう両方に必要な機能をつけていくのは地味でめんどくさい。
flexyで

{if:flag}
    <div class="highlight">
{else:}
    <div class="normal">
{end:}

とかやっていてJavaScriptでクラスを操作するときなんかも。

あちこちにロジックが・・・表示のための処理なので仕方ないのかな。
特に上手いやり方も思い付かない。

フォームのユーザーインターフェース

ajaxに手を出してからやることがだいぶ増えた。
今までHTMLは丸投げしていたのでテンプレート変数の割り当てさえ考えれば良かったのだが、ajaxをやりだすとタグの構成というかHTMLをほとんど全部書かなきゃいけなくなってくる。
デザインが動的に変わるんだから仕方ない。GUIアプリを分業するノウハウが必要なのかな？

で、フォームの話。
ネットワークのコストを無視すれば入力チェックなどは全部サーバに依頼すればいいわけだけど、現実的には一文字入力するごとにサーバに問い合わせるわけにもいかない。
しかし、例えば新規ユーザ登録の場合、ユーザ名が4文字以下ならJavaScriptで「ユーザ名を5文字以上にしてください」と表示するとする。そして5文字以上ならサーバに問い合わせて既存ユーザと重複していないかチェックするとする。
一見スムーズに動きそうだが、5文字以上入力した瞬間にメッセージの応答速度が変わるので利用者が混乱するかもしれない。6文字目7文字目を入力途中にも「ユーザ名を5文字以上にしてください」のメッセージが表示されつづけるかもしれない。かと言って待ち時間に「ユーザ名の重複をチェックしています.....」と表示するのは冗長な気がする。

こういうことを考えるときりがないし、自分が考える範囲ではないように思う。
でもいちいち「このタイプとこのタイプどっちがいいでしょう？」って聞くのも聞かれるのも大変そうだし、実際に動くものを見ると判断が変わるかもしれない。
何パターンかに対応するようにも作れるし、頭の体操というか汎用的に作る練習にもなるが・・ちとめんどくさい。

実際の所、一般的にはどういう処理までクライアントサイドでどこからがサーバサイドにするのがベターなんだろう。
パスワードに関しても、ユーザの視点だとデスクトップアプリのシリアルナンバー入力欄のように正しい入力が行われた瞬間にチェックマークが付くのがいいんだろうが・・。
ユーザ名の長さや未入力チェックをクライアントサイドでやると、せっかく全ての入力チェックにパスしていざログインボタンを押したらパスワードエラーが表示されることも起こる。そういうのは何か矛盾してると感じるけど良い方法が思い付かないな。

Webアプリ - メーラー

GUIのプログラムってまともに書いたことないんだよね。2000行ぐらいしか。
Visual Studioでスケルトン使わずに書いたから純粋にコード全部自分で書いた。このときから他のフレームワーク使うのが苦手だったんだな。
そのおかげで（？）イベントハンドラも少しは理解できた。

で、今Ajaxですよ。
これは本当にGUIプログラム書いてるような感じだ。
イベントハンドラを登録してユーザの動作に合わせて表示を変更する・・ピクセル単位で位置を設定したり表示順序を入れ替えたりドラッグできるようにしたり。
テーブルの幅をドラッグで変更できるようにするだけでだいぶ時間がかかった。スタイルのtable-layoutをfixedにしてcolタグで幅を設定して。colタグって今まで使ったことなかったよ。
firefoxでは表示がすぐに反映されなくて再描写とかどうやるのかも分からず変なコードを書いてる予感。

一応ライブラリを使うのは根本的な動きを知ってからって思ってたのにめんどくさくなってprototype.jsに手を出してしまった。
AjaxよりもgetElementsByClassName()が有り難い。あとイテレータとか。rubyとhaskellは役に立つね。rubyはもう少し触っとけばよかった。

今Webメーラーを作ってる。
エラーメールとか自動送信のメールをローカルで受信するのが嫌なんだよね。何万通とか溜まってくし検索もしにくいし。
だからメールをdbmailでデータベース管理しつつ、POP等を使わずに直接データベースからメールを読もうかと。レプリケーションも楽だしメールサーバ2台用意すれば両方プライマリにできるし独自のカスタマイズも楽。
にわか管理者はこういうところで便利なのかな。サーバ管理者とプログラマが別れてたらなかなか難しそう。

こういうのを自分で作ってるとgmailの細かい工夫が分かってくる。そしてその細かい工夫が大変なんだな。

Ajaxイン・アクション

ここ数日ひたすらJavaScriptを書いている。
Ajaxイン・アクションがかなり役に立つ。
他の本はリファレンスとして見ることがある、という程度・・なんでAjax流行ってるのにまともな本がないんだろう。
大抵は昔ながらの「JavaScriptを使ってホームページを賑やかにしよう」的な印象を受ける。

MVCとかリファクタリングについての文章があるので他の言語解説書に近いように思う。
今まではonloadとかonclickとかタグの中に書いてたよ・・外に出すことで非常にすっきりした。反面、重くなった。テーブルのセルに対してonclickとか登録する場合、速度的にHTMLに書くのもありかもしれないと思ったんだがどうなんだろう。
for文で一行一行onclickを登録する以外のやり方があるのかな？うーむ。

イベントで呼ばれた関数のthisについても、他の本に書いてあるのかな。初めにAjaxイン・アクションを読んだおかげで（？）苦労しなかった。

コードや記述ミスが多いというのは
http://blog.hawklab.jp/item-69.html
http://blog.hawklab.jp/item-70.html
ここを読んで知ってはいたが・・内容まで覚えてなかったので丸括弧とかの記述を信じるところだった。
そういう明らかな間違い（JavaScriptをほとんど使ったことがないので気付かなかったわけだが・・）に注意すれば問題ない。Ajax（非同期通信）以外の素のJavaScriptの勉強にもなる。

本を買った

Ajaxハッカーズ・プログラミング―基礎からprototype.js、Yahoo!UIライブラリ、HTML_AJAXの活用までWebアプリケーション制作のプログラミング・テクニック

Ajaxイン・アクション

JavaScriptハッカーズ・プログラミング?Webエキスパートが知っておきたい基本から応用まで

入門Google Web Toolkit

Ajaxイン・アクションだけで良かったかもしれないが、初心者なので入門的な本も買った。
ぱらぱら読んでみて、役に立つ部分もあった。
あと興味本位にGoogleのGWT。いつか使ってみたい。

プロトタイプベースのオブジェクト指向というものをちゃんと理解せねば。

XMLを使うかどうか悩みどころ

今まではそんなにごりごりと書いてたわけじゃないから、ajaxじゃなくてajaでやってた。
目視確認がしやすいから。

しかしPHPの連想配列のようなデータをJavaScriptに受け渡したい場合に困った。
そろそろ何かのライブラリを使う時期かなぁ。
JavaScriptも真面目にやったことがないからすぐ行き詰まる。

ajax用のJavaScriptライブラリ、PHPからJavaScriptコードへの変換ライブラリ、DOMなどのXML操作系、Ajax込みのPHPフレームワーク、・・・
今まで本格的に使ったことがなかったJavaScriptとXML・・

XMLとXSLTでテーブルのソートぐらいは出来るんだけど、ずっと前にDOMが遅くて嫌になってからはXMLを操作するプログラムはやってない。
普通はXMLとXHTML？普通のHTMLを出力する方が多いのかどっちなんだろう。
Ajaxを真面目にやろうとするとやることが急に増えるな・・。

JavaScriptは何で調べたらいいんだろう？
さすがにオライリーは詳しく正確に書いてあったけど、なんかちょっと違うんだよなぁ。
かと言って適当な入門〜中級者の本ならWebの方が詳しそうだし。
画面をチカチカさせたり操作性を低下させる技じゃなくて、プログラミング的なことが書いてある薄いJavaScript本ってないのかな。