概要
タイムラインのトップページに表示されていたナビゲーションメニューを、シンプルで視認性の高いデザインに刷新した。 あわせて、写真が添付されたつぶやきだけを表示するフィルタ機能を新たに追加した。
変更前の状態
変更前は「タイムライン」と「ブログ」の2つのリンクが横並びになったシンプルなタブデザインだった。 見た目がやや古く、メニュー項目の拡張性も低かった。
新しいデザインの仕様
メニュー構成
以下の5つの項目を横並びで表示する。
- timeline — トップページへ戻るリンク
- blog — ブログRSSタイムラインページへのリンク
- movie — YouTube動画付きつぶやきの絞り込みフィルタ
- game — ゲーム情報付きつぶやきの絞り込みフィルタ
- photo — 写真付きつぶやきの絞り込みフィルタ（今回新規追加）
デザインのポイント
- 各タブの上部にSVGアイコンを表示する（あとで正しいアイコンに置き換え可能）
- タブが多くなっても横スクロールで対応できるよう、左右に
<と>の矢印ボタンを設置した - アクティブなタブは下線を太く・濃くして選択状態を表現する（非アクティブは薄い下線）
- スマートフォンでも見やすいよう、タブの横幅を小さい画面向けにも調整した
写真フィルタの実装
写真フィルタは、ゲームフィルタ・動画フィルタと同じパターンで実装した。
- サーバー側（ページのフロントマター部分）で、写真付きつぶやきの総件数を事前にカウントする
- そのカウント数を隠し要素としてHTMLに埋め込む
- クライアント側のJavaScriptが埋め込まれた数値を読み取り、全件表示済みになったら無限スクロールを停止する
写真付きかどうかの判定は、つぶやきに画像のURLが設定されているかどうかで行う。
ナビメニューとフィルタの連携
movie / game / photo のタブはリンクではなくボタンとして実装した。
ボタンがクリックされると、timeline:filter というカスタムイベントが発行される。
タイムラインのページがそのイベントを受け取り、対応するフィルタ関数を呼び出す仕組みになっている。
フィルタがオンになると、対応するタブの下線が太く・濃くなる。フィルタをオフにすると、timeline タブに戻る。
スクロール矢印の実装
ナビゲーションメニューのスクロールは、左右の矢印ボタンにクリックイベントを設定し、scrollBy() で一定量スクロールする方式を採用した。
これはブログのカテゴリメニューと同じ実装パターンを流用している。
注意点
- movie / game / photo フィルタはタイムラインのトップページ専用の機能である。ブログRSSタイムラインのページで同じメニューを表示しても、フィルタは動作しない（エラーにはならない）
- SVGアイコンは現在仮のものを使用しており、あとで正しいものに差し替える予定