本日ぼかにゅーをリニューアルしました。
今回は内外ともに完全に一から作り直しました。
UIの主な変更点は以下です。
- 全面的なデザインの刷新
- スマートフォン対応
- 詳細検索UIの撤廃
- 動画紹介文の全文表示
全面的なデザインの刷新
デザインは最近のトレンドともいえるフラットなデザインとしました。
フラットデザインはシンプルだからといっても、全然簡単ではないので割と何回かゴッソリ調整し直したりもしました。
今回の刷新で1番のポイントは
この部分の文字のinvertです。多分ほとんどの人がどうでもいいところだと思いますはい。
ちなみに今回のデザインは画像を一切使っていません。Font-Awesome あるし、CSS3で表現力上がったし、最近は画像使ったら負けだと思うようになりました。
スマートフォン対応
当方iPhoneしか持っていないのでiPhoneでしか動作確認してません。
Bootstrap3 を使っているのですが、サイドバーを固定幅にするために半分ぐらいは独自でCSS書いてたりするので恩恵があるやらないやらよくわからないことになってます。
また、JavaScriptでメニューの開閉などを行なっていますが、知ってる人は当然のように知っている touchstart イベントで処理してるのでレスポンスは良いです。
詳細検索UIの撤廃
以前は複数のボーカロイドの曲を検索できるチェックボックスをつけていましたが、今回のデザインを考えた限りでは良いUIが思いつかなかったので取り払いました。
機能自体は残しているので以前と同様に http://vocanew.kuune.org/?miku&rin&luka というURLを叩くと複数のボーカロイドの曲が取れます。
良いUIが思い付けば再度UIを付けますが、予定は未定です。
動画紹介文の全文表示
これはオマケですね。以前は長い動画説明文を ... で省略していましたが、BootstrapのCollapseでそれなりなUIが作れそうなのでやりましたという感じです。
最後に
この記事を書いてて思い出しましたが、以前あったRSSフィードを実装するのを忘れてました。そのうちやります。
次回はサーバーサイドなどの内部的なことを書きます。