RC2 リリースしました
色々ありましたが、RC2 リリースしました。
僕は主にマイリスト編集周りと、カテゴリトップ周りを担当してました。
以下、開発中の色々な話。苦労話多め。
マイリスト編集周り
「マイリストの一覧編集」と「マイリストの中身編集」の２種類の画面があって、本当は１つにまとめたかったところだけど、デザイナーさんと話し合って２つに分けることにしました。
アニメーション
上司を説得して script.aculo.us を（このページだけ）導入。実はニコニコ動画に prototype.js を標準装備にさせたのも僕の提案だったのでした。導入当初は、うひょーｗｗｗ夢ｗがｗひｗろｗがｗりｗんｗぐｗｗｗ状態。なんか、ちょこっとアニメーションを入れて自己満足。どう見ても厨です。
はまったのは、tr 要素にアニメーション掛けようとしたらできなかった件。マニュアルにも table 関係は動かないと書いてある。でも、「ふわっ」て感じで追加したり削除したりしたい＞＜ ので、無理やり別のテーブル作って、そこに対象の tr を挿入して、テーブル自体にアニメーションをかける、という力技で対応。こんな書き方でも推奨ブラウザ（IE, Firefox, Opera, Safari）で動く不思議。
並べ替えのUI
マイリスト一覧の並べ替えを作る時は「Web上での並べ替えのUI」について色々考えたんですが、「ドラッグ＆ドロップだけで並べ替え」というのは、多くのユーザーは Web 上でのドラッグ＆ドロップは普通しない操作だろうし、キーボードで操作できないので却下。ただ、ドラッグ＆ドロップでの並べ替えは慣れれば絶対に便利なものだという確信はあったんです。
で、僕なりの答えとして「全部入りUI」。つまり、キーボードでも操作できるし、マウスでも操作できる。移動の対象がハイライトされていて、それに対してキーボードやボタンで操作できる。ドラッグ＆ドロップで移動もできる。
キーボードは「j, k, i, m」のような押しやすいキーも使えるし、「Shift + ↑」のような同時押しも使える。この辺りは livedoor Reader にとても影響を受けています。僕が LDR を使った時は、最初は Enter とか Shift + ↑↓ とかの覚えやすいショートカットから入り、次第に j, k, a, s という押しやすいキーへと変遷していきました。こういう「ユーザーの慣れに合わせられるUI」が素晴らしいと思うし、開発者の ma.la さんはとても尊敬しています。最速++
マウスで操作するユーザーがまずやる事は、「ボタンっぽいものを押す」事だと思っています。つまり、押せそうなボタンがあればとりあえず押しちゃう。で、その結果をみて「こうしたらこうなるだろう」と予想できればいい。なので、OS 的な「選択したアイテムをボタンで移動」ができるとわかれば、まずその時点でミッションはクリア。もっと便利に使えるドラッグ＆ドロップは、あくまでサブ操作としてしまう。
UI考えるのは楽しいなぁ。
JavaScript 圧縮
JavaScript 圧縮には YUI Compressor を使いました。ただ、prototype.js の 1.5.1.1 を標準オプションで圧縮したところ、Safari の 1.3 で動かなかったので、
java -jar yuicompressor.jar --preserve-semi *.js
な感じで、--preserve-semi オプションを付けたら動くようになりました。（僕が使っている限りで問題はないですが、一部機能が使えない可能性はあります）
環境にやさしく
こんな JavaScript 厨ですが、JavaScript が無効な環境でも CSS が使えれば最低限動くようにしたんです。結構自然な動きになっているはず。ただ、よくよく考えると JavaScript が無効じゃそもそも動画を再生できないんだよなぁ orz ←実装してから気づく
カテゴリトップ周り
こちらはありがちな Ajax によるタブの実装。
静的キャッシュなんです
実は、トップページは静的なHTMLとしてキャッシュしているので、動的な部分は JavaScript に全て任せている。といっても、今のところ動的な部分は広告しかないけど orz
Ajax で innerHTML をまるごと書き換えた時に、script 要素で書かれたスクリプトが実行されない場合があったので、script 要素を切り出して別途 eval している。我ながら面倒な事しているなぁと思いつつ。
カテゴリ別
トップページの右側の「注目のタグ」にはカテゴリに関連したタグが、「動画ランキング」にはカテゴリのランキングのトップ3が、「市場ランキング」にはカテゴリに関連した商品のランキングが、「新着投稿動画」にはカテゴリの新着動画が。カテゴリ別ランキングを作るように。
ご想像の通り、裏側の SQL クエリは結構カオスな事になっております。チューニングしまくって速度は大分マシになったとはいえ、ランキングのパターンが多すぎる orz
その甲斐あってか、カテゴリ別ランキングはなかなか好評みたいで、本当にありがたいことです。開発者冥利につきます。
