普段からお世話になってる原さん(@iis_hara_dev)のサイトで機能追加の実装をさして頂きました。
今回実装したのはこんな感じ:
- 製作実績(Web)の画面をリニューアル
- 一覧のデザインを変更
- 実績ごとの画面を作成
- 各画面ごとに個別のURLを割り当て
ちなみに横にスクロールするのは元々です。（モックではjQueryを使って同じものを実装しましたが。）
タグ検索
実績の各項目には内容を示すタグが付いていたのですが、それを元にフィルタリングできるようにしました。
検索の処理は結構愚直にやってます。代わりにHTMLの記述はシンプルです。
CSSで一覧のスライドショー化
一覧で項目をクリックすると、その実績用の画面が表示されます。
実績紹介の下にまた一覧があるのですが、これは今まで表示されていた一覧のスタイルを変更しただけ、同じHTMLを使っています。
加えてトップでも実績の一部が紹介されているのですが、これらも全て同じ構造のHTMLです。
適切に表示する仕組みはCSSで提供しています。あ、もちろんスライドしたりするのはJavaScriptです。
個別のURL
元のサイトは画面を移動してもURLは同じでしたが、今回はHTML5のHistory APIを利用して個別のURLを持たせるようにしました。個別の実績紹介に直接アクセスできるようになっています。
History APIが使えないブラウザー(IE)ではいわゆるハッシュ#!を用いて同じ仕組みを提供しています。
またHistory APIを利用するにあたって、サーバー側の対応をお願いしました。mod_rewriteを使い、各画面に直接アクセスした際に404にならないようになっています。
デザイン
ちなみに元々あったデザインはmagic-designの方です。
(‘_`) oO( いつまでComming soonなんですか？ )