テンプレートがバージョンアップ！ついにVer2.5を公開！

テンプレートの内部構成の変更点

まずは内部構成の大幅な変更について説明したいと思います。今回テンプレートの改造に当たって、大きく3つの変更を行っています。それはXHTML、CSS Sprite、Dynamic loadingです。

XHTML

今までHTML4.01 TransitionalだったものをXHTML1.0 Transitionalに変更しました。これはやろうやろうと思いつつも面倒だったので放置していたものなんですが、今回の大改造に伴い中身を書き換えて現在主流のXHTMLにしました。もちろんW3CのValidationもパスする正式な書き方です。



証拠にvalidアイコンも取得しました。画像をクリックするとW3Cで確認できます。

CSS Sprite

CSS Spriteとは画像を一つにまとめてHTTPリクエストの数を減らすことで、サイトの表示速度を上げようという考え方のことです。この手法はGoogleやYouTubeなどの有名サイトでも活用されています。CSS Spriteを使っているサイト管理者はなかなかサイト製作について詳しい人だと思います。

CSS Spriteはすばらしい技術なんですが、実は非常に面倒なんですよね。今はCSS SpriteしてくれるWebアプリケーションがあったりするんですが、今回は勉強のため全部自分で画像を製作しました。すごい大変でしたけど。。。

Dynamic loading

前回はCSSによるかっこいいサイトデザインがテーマでしたが、今回はjavascriptによる動きのあるサイトを目指して作りました。javascriptなんて使ったら重くなるだろ？と思う人もいると思いますが、今回はjavascriptの特にAjaxによる動的ローディングを取り入れることで、コンテンツ部分にページがスクロールされたときにロードを開始するように設計されているため、余分な読み込みを最小限にとどめることができています。



この動的ローディングが適用されるのは記事内の画像、メニューバーのコンテンツ、アクセスランキングと記事ランキング、Amazonランキング、Special Linksです。メニューバーだけはクリックまたはカーソルが乗った時ときにコンテンツがロードされ、そのほかのコンテンツはスクロールされてコンテンツに近づくことによってロードが開始されます。



サイトを最も読み込みを早くする方法としては、右上のカウンターのローディング画像が終わるまたは、右下にあるナビゲーションバーの「Download Status」がCompletionになるまで待つのが一番いいです。下手にスクロールをしてしまうと次のローディングが開始されてしまうので、結果的にロード時間が遅くなってしまいます。

テンプレートの外部構成の変更点

外部構成の方について説明したいと思います。今回はjavascriptがテーマになっており、外部構成の方は一見変更点がないように見えますが、実はかなりいろいろな仕掛けがしてあります。今回のバージョンアップの目玉がナビゲーションバーが追加されたことです。それ以外にも新しいブックマーク、それにフッターなどにいろいろなコンテンツを追加しています。もちろん変化がなさそうなところにも、マウスを乗っけたりクリックすることでさまざまな動きをしたりします。

ナビゲーションバー

今回テンプレートで一番目立つのがナビゲーションバーが追加されたことです。実はまだハリボテもいいところで、内部構造はまだ完成に至っていないです。今回テンプレート公開が伸び続けたのもこれが原因で、今後のバージョンアップにご期待くださいといったところ。



機能としてはは「▲ページの先頭へ 」「▼ページの末尾へ」によるスクロール移動が可能になったのと、ブックマークが容易に行えるようになりました。あとは「Download Status」が表示されています。これがCompletionになれば基本部分のロードは完了です。



それ以外にも右側の拡大化ボタンを押すとウインドウが表示されます。ここがまだ完成に至っていないため、現在ではカテゴリーを表示されています。ここは今後いろいろできるように改良していきたいです。邪魔なときは縮小化か閉じるボタンを押すことで消すことができます。

ポップアップ

テキストにポップアップが出るようになりました。これは出る場所が限られるのですが、HEADLINE NEWSやブックマークの辺りはポップアップが出ることで説明が表示されます。特にブックマークのところはアイコンだけだと分かりにくいので、今回のポップアップがつくことによって、より分かりやすくなりました。

ポップアップウィンドウ

今回は外部リンクは同一ページで表示できるようになりました。画像のように外部リンクをクリックします。



画像のように外部リンクをクリックした際に、リンク先をLightBox風に同一ページに表示してくれます。閉じたいときは、背景の黒い部分をクリックすることで元に戻ります。これにより、ページを行ったり来たりするといった面倒な作業をせずにいろいろなサイトを見て回れるようになりました。

LightBox

画像をクリックした際にLightBoxで同一上に画像を表示するようにしました！これにより煩わしいページ間移動がなくとも、拡大画像を確認することができます。閉じたいときは、閉じるボタンか背景の黒いところをクリックすることで元のページを閲覧できます。

メニューバー

メニューバーの弱点としては表示が固定できなかったことです。今回はjavascriptを導入したことによってボタンをクリックすることでそのメニューを固定することができ、カーソルを別の場所に移動してもメニューを保持できるようになりました。もちろん見た目も今まで以上にかっこよくしているが、コンテンツは動的ローディングにより、読み込み量は大幅に減少しています。あとは背景をダブルクリックすることで保持したメニューを消すことができます。



もちろんこちらのコンテンツもリンクをクリックした際に、リンク先をLightBox風に同一ページ上に表示を行いますので、今まで面倒だったページを開いてからまた戻ってくるという手間が省けるようになっています。

ブックマークボタン

今回ブックマークボタンが新しくなりました。ブックマークボタンにマウスカーソルが載るとふわっと浮くアニメーションつきです。IE以外のブラウザでは正常に動くと思います。IEの人はこれを機にブラウザを変えましょう。

いろいろ開閉

今回はお遊びとしていろいろな場所が開閉できるようになっています。サイドメニューのところや記事の部分も開閉可能です。あとサイドメニューの内容はカーソルが乗るとメニューがずれるようになっています。まあ意味は特にありませんが、面白いので遊んでみてください。

Special Links

今回新設したSpecial Linksは相互リンクサイトの一覧がみれるコンテンツです。下にある▽ボタンをクリックすることで、コンテンツがスクロールします。この方法だとサイトの説明もしっかりでき、いろいろなサイトを見ることが可能なので個人的には気に入っています。ぜひ活用ください。

Spacial Link9

こちらは適当にお遊びで作ったリンクです。お勧めサイトを定期的に変えて載せて行こうかと考えています。ちなみにマウスカーソルが乗ったときにサイトのスクリーンショットが表示されます。

サイトの読み込み

改良前のテンプレートではHTTPリクエスト数が144で読み込み量は500kbもありました。



改良後のテンプレートではHTTPリクエスト数が34で読み込み量は277kbになりました。HTTPリクエスト数は110も減らすことができ、読み込み量も約45％削減し223kbも減らすことができました。これにより読み込みは大幅に高速化されています。

サイトの表示速度

改良前のテンプレートでは平均3.14秒でした。



改良後のテンプレートでは平均0.99秒と改良前と比較して2秒弱も高速化しており、今まで以上に大幅な高速化がなされました。この検証は私の環境下で行ったものであり、他の回線やブラウザ、時間帯によってはここまでの速度が出ないことがあります。

今回の個人的感想

今回は今までなく記事の時間を費やしてテンプレート製作を行っていたので、個人的には大満足なできに仕上がりました。できればナビゲーションバーをもっと作りこんでから公開したかったのですが、それをやってしまうと公開が来年になってしまいそうだったので、今回はここで妥協して公開いたしました。これから当分は記事の方をがんばっていきたいです。

ちなみに推奨ブラウザはfirefox、Opera、Google Chromeです。
IE？なにそれ?おいしいの?

IEは私の中で糞ブラウザ認定がされているので非推奨です。IEはサイトを作る人にとっては面倒以外の何ものでもないんですよ。他のブラウザと違ってレンタリングが糞過ぎるので、いつも滅んで欲しいと思っているくらいです。もちろんIEでも動きますが、不具合が発生する可能性があります。IEを使っている人はこれを気にOperaまたはGoogle Chrome、Firefoxに乗り換えましょう！