先日、めでたく弊社ブログを公開することが出来ました。
通常業務の合間に少しずつ進めて行きましたが、それでも1.5ヶ月かかった大作です。
日によっては丸一日費やすこともあったので、少なくとも100時間くらいはかかっているかと．．．。
なぜそこまで時間がかかったのか？
まあ、機能を入れ過ぎたのが一番の原因でしょうか。
実際に、当初から色々なことにチャレンジしてみる方針ではありましたが、振り返って仕様をまとめてみると、かなりやりたい放題の仕様だったなあと、今更ながら感じてしまいます。
とりあえず、ざっくりと仕様をまとめてみたので、ご覧ください。
ブログ一覧（トップ）ページの仕様
- コンテンツは全てアニメーションを使用して表示される。
タイトルもサブメニューも記事も、全てアニメーションです。しかも記事の部分はレイヤーになっていてより複雑なアニメーションになっています。
- サブメニューをクリックすると、リストが表示される
「CATEGORIES」をクリックすると、全部のカテゴリタイトルが表示されます。「TAGS」や「AUTHORS」も同じように動作します。ただし、開いたり閉じたり、他の項目との兼ね合いがあったり、「ALL」や「検索」は挙動が違ったりと色んなパターンがあるので、気を付けて実装しないといろんな不具合が起こります。
- サブメニューのリストをクリックすると、コンテンツが絞り込まれる。絞り込まれた結果はページ遷移を行わずにコンテンツのみ入れ替えられる。
要するに絞り込み機能ですが、絞り込みを行うと表示されている一覧が一度消去され、改めて絞り込みの結果が表示されます、その際サブメニューがページのトップに来るようにページがスクロールします。
この一連の動作は、スムーズに動作するようにページの遷移を行わず、中身だけを入れ替えるようにしています。
- 無限スクロールで、全ての記事が表示されるまでコンテンツが追加される。
これは最近よく見る機能でプラグインなんかもありますが、次の項で説明する機能を備えているものが無かったため、全て自作する必要がありました。
- 記事をクリックして記事ページに遷移したあと、ブラウザの「戻る」で戻ってきた際に、無限スクロールの状態が保持されている
よくあるパターンでは、スクロールして特定の記事を開き、読み終わって戻ってくるとページが一番上に戻っていて、また最初からスクロールしなければならない場合があります。ストレスを感じる人も多いはず。それを回避するために、記事を読んで戻ってきても、元の状態が保持されているようにしました。
ブログ記事ページの仕様
- ページの右側（スマホ版は記事の上）に記事のインデックスが自動で表示される。
本文中の見出しを取得して、リンク付きのインデックスを自動で作成する機能を実装。
しかもインデックスは記事のスクロール位置と連動しています。
- スクロールの状態に応じて右のカラムの位置が変わる。
ページがトップの位置にいる場合は右カラムは記事の上部と揃っている。
ページがスクロールしても右カラムは上に隠れない。
ただし記事が終わると、記事と下揃えになってスクロールしていく。
- 右のカラムがどんな状態でも画面からはみ出さないようにする。
右カラムの項目は、クリックで開くことが出来ますが、中身が多くても画面からははみ出さないように常に高さを調整しています。
- 次の記事（NEWER）や前の記事（OLDER)へのリンクをクリックすると、アニメーションでコンテンツが切り替わる
画面左から赤いページが出てきて、右に抜けていくと画面が切り替わっているという仕掛けです。
ページの読み込みはもちろん、画像も読み込み、右カラムのインデックスも作成するという作業を、短時間でシームレス（一瞬画面が白くなったりしない）に行っています。
仕様を考えたのは誰？
仕様は社長と弊社デザイナーと私の3人で考えました。
とりあえずWEB制作に関して訴求力のあるページを作りたい、見た人が驚くようなページにしたいと、いろいろ機能を盛り込んでいくうちにこんな事になってました。
着手前は「大変そうだなぁ」くらいに思っていましたが、実際に作業に入ると不具合の連続、調整に次ぐ調整。プラグインなんかもない状態で、「完成しないかも」とちょっと思ったりもしました。
そんなこんなでなんとか公開まで漕ぎ着けましたが、制作担当は私一人で誰とも苦労を分かち合えなかったので、誰かに言いたくてとりあえず記事にしてみました。
OLDER
