ShopDD

Now Loading

Now Loading

RSS Article

Now Loading

Article

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

template_ver2_5_001.png

ついに本日より、サイトのテンプレートがバージョンアップし、テンプレートVer2.5が公開となりました!今回は今までのテンプレートから中身と外見の両方を含め、大幅なバージョンアップを行っています。それに伴いVer2.4はなしでVer2.5という形にしました。これは4ヶ月前から地道にやっていたテンプレート改造で、今週になってやっと完成し本日正式公開に至ったものです。

見た目はほとんど変わっていませんが、内部コンテンツが大幅に書き直しており、読み込み量の大幅な削減とともに動的ローディングの導入によりロード時間の短縮に成功しました。もちろん見た目にもこだわっており、今までにないアニメーション効果による動きのあるサイトに仕上がりました。それでは詳細を説明していきたいと思います。

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


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

XHTML


template_ver25_013.png

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

Valid XHTML 1.0 Transitional

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

CSS Sprite


template_ver25_012.png

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

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

Dynamic loading


template_ver25_018.png

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

template_ver25_002.png

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

template_ver25_011.png

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


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


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

ナビゲーションバー


template_ver2_5_001.png

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

template_ver25_011.png

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

template_ver25_010.png

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

ポップアップ


template_ver25_020.png

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

ポップアップウィンドウ


template_ver25_008.png

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

template_ver25_009.png

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

LightBox


template_ver25_021.png

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

メニューバー


template_ver25_007.png

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

template_ver25_019.png

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

ブックマークボタン


template_ver25_005.png

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

いろいろ開閉


template_ver25_006.png

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

Special Links


template_ver25_004.png

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


Spacial Link9


template_ver25_003.png

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

サイトの読み込み


template_ver25_015.png

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

template_ver25_014.png

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

サイトの表示速度


template_ver25_016.png

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

template_ver25_017.png

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


今回の個人的感想


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

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

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

Related article

COMMENT TO THIS ENTRY

なんかスゲエwww
ふわってwww
スゲエwww

7202

画像のように外部リンクをクリックした際に、リンク先をLightBox風に同一ページに表示してくれます。

できれば別窓に表示みたいなボタンがあったらよかったかなー

7203

ホイールスクロールしてると、画像を読み込んだ分ずれるので
見ていた位置を見失ってしまうのですが、自分だけですかね。
ちなみに、Fire Fox 3.5.5です。
半画面先読みしてくれるとありがたいのですが。
そんな事が可能かどうかは知らずに言ってますorz

7204

外部リンクは今まで通り別窓(タブ)表示の方がいいと思います・・・。

7205

↑同感。
流し読みをしていると、画像が表示される前に次にいってしまったり、読んでいる途中で画像が表示されてずれてしまったりしますね。

7206

アニメーションがしつこすぎる。
まぁ管理人さんのこだわりも分からないではないが、
コンテンツを閲覧しにくくなったと思うのは俺だけだろうか・・・。

7207

すげーwww
細部までこだわっていますねw

「▲ページの先頭へ」のスクロールがいい感じ~

7208

進化しすぎで怖いです

7209

お疲れ様です

お体に気をつけて更新頑張ってください

7210

お疲れ様です。読み込みは速くなりましたがCPU負荷は上がりました。あと個人的には、できれば記事の画像はダイナミックローディングではなく普通に先読みしてほしいです。ブラウザのローディング時間は短縮されているのは分かりますが、体感速度は遅くなった気がします。コメントからの声もぜひサイト製作の参考として取り上げてほしいです。

7211

以前の状態でもすごいと思ってたのに今回のバージョンアップでしばらくサイト全体を見渡してました@@;
自分はオペラ10.01ですが特にどこもくずれたりはしてません

忙しそうですが、更新応援させてもらいますね

7212

ナビゲーションバー?でYのマークがlivedoorブックマークに、
その左側の四角いマークがYahoo!ブックマークになってます
後、ブックマークボタンのYアイコンの上にカーソルを置いたときに出るポップアップが、Yahoo!じゃなくてYhaoo!になってます

7213

すごいです!!!
動的ローディングってやつが、やばい!!!

7214

このコメントは管理人のみ閲覧できます

7215

ちょwwwNEWSがまじ見にくいんですが~~~。
やっぱ新しタブで開くようにした方が絶対いいですよ。
このページ内で開いても、画面は小さいし、使いづらいいっす。
お願いします!!

7216

IEで起動すると開かないどころかエラーで落ちるぞ
さすがにその仕様はどうかと思うんだが

7217

同感
IEで見れないw

それと、下のウザイのどうにかならないか
横長杉w
閉じても再読み込みするとまた出てくる。
Cookieで何とかして欲しい。

前のが恋しく感じるこの今日この頃w

7218

別に普通にIEで見れるし何言ってんだかw
見れないって奴は自分のヘボPCに問題あるんだろ

7219

自分はページ内で開いてもいいと思いますよ。

まあ解像度が低いPCの人はやめてほしいと思うだろうけどw

7220

LinkもNEWSもずっとNow Loadingのまま…

7222

神だw

師匠だよもうw

7223

画像の表示が一足遅くて少々不便になってしまいましたね。
ただ、全体的にかっこいいので許します。頑張ってくださいね。

7225

バージョンアップなのに、思いのほか批判だらけでショックな管理人です。
みなさん新しいテンプレートには結構不満があるようなので、コメントで書かれていた点についてはできるだけ修正したいと思います。

とりあえずテンプレートの読み込みがバージョンアップ以前より遅くなっていた問題に関しては改善いたしました。体感速度的にも実速度的にも昨日より速くなっていると思います。

同一ページ表示とナビゲーションバーについてはcookieを使ってどうにかするように修正する予定なので、しばらくは現状のままご辛抱ください。修正が完了次第、再度記事で報告いたします。

7229

このコメントは管理人のみ閲覧できます

7230

流石管理人、仕事が早い。
このサイトがすごい事は確かなんだが高機能過ぎるのも使いにくく感じるのかな、って思います。
文句が出ながらも、みんなこのサイトが好きだと思うので頑張ってください。

7231

糞速度はまだ改善してないんだよな
もうちょい待つか

え?もうしてるって?
冗談きついよwwww


7233

回線速度が遅いやつにとってはこのサイトは重いかもなw

光回線の俺には関係ないけどwww

7234

テクノラティのブックマークアイコンがまだあるんですが、もうサービス終了していますよ、管理人さん。

7235

IEが糞なの分かるが、それで観覧者(特に初心者)を省くのはどうかとは思う
まあ管理人がそれで満足なら良いだろうけども

7239

テクノラティのブックマークがサービス終了していたのは知りませんでした。近いうちに直しておきたいと思います。

IEの件には、なぜか誤解している人がいるようですが閲覧者を省いているつもりありません。
jQueryの動作で他のブラウザと比較してエラーが出やすいため非推奨としていますが、ちゃんとサイトを閲覧できますし、IE7、IE8での動作確認もしています。

IEの使用者数が一番多いのは分かっているので、当然対策もしています。IEにだけ発生する誤差をなくすためにCSSハックを用いており、その点についてサイトを作る人にとっては面倒以外の何ものでもないと表現しただけです。

サイト制作においてIE、firefox、Opera、Google Chromeで違いなく動くように作るのは当然のことですし、特に利用者が多いIEで動かないサイトを作るなんてことは絶対にありえません。その点については誤解しないでください。

7240

IE8で発生してるんですが
NEWSを表示させてスクロールすると文字は動かず左のアイコンだけが移動するのを直してほしいなぁ。
いちいちちょっとスクロールしてからカーソルはずしてまたみたいな作業しなきゃ見れないなら前の方がいいです。
一応ご報告しておきます。

7241

IE8の通常モードでは正常に動いていましたが、互換表示モードだと文字が動かないエラーが発生するようです。この問題は気がつきませんでした。ご報告ありがとうございます。

現状の改善策としましては、IE8の互換表示モードをやめればIE8本来のレンタリングになるので、通常モードの方をお使いください。通常モードでは正常に動作致します。

7242

>>IEの件には、なぜか誤解している人がいるようですが閲覧者を省いているつもりありません。
IE非推奨って書いたからそう思われるんだろうな
誤解と思われたくないならコメントを読まない方の為にも記事に補足として書くのが妥当でしょうけど。
でも今は確かに見づらい部分も多いけど、そこは改善して良くなる事に期待
それまではfirefoxをあまり使わんけど、firefoxを使う事にするか…

7243

ここにコメントを書き込む人でIE6を使っている人は少ないと思いますので一応報告しておきますが、閲覧上レイアウトにかなり無理があると思います。(もっとはっきり言うと、ゴッチャゴチャです。)

記事はギリギリ読めますが、メニューなどはまったく機能しませんし、右カラムのサイドバーも激しく落ちています。CSSハックだけでの対応は限界があると思いますから、ソースは少し汚くなりますが、条件付コメントを使って対応してみたらいいんじゃないでしょうかね。

7247

非推奨って書いてあるけど、もちろんIEでも動くとも書いてあるし、普通は閲覧者を省てるとは思わんだろ。そう考えるのは文章を読めない奴か理解力不足なだけ。

まあ今時IEなんて使っている時点で情弱だしなw

7248

俺もFirefoxを使ってはいるが情弱という言い方もどうだろう
使う使わないもその人の自由なんだから、それこそ理解するべきだろ
しかしFirefoxでの出来は良いな
似ているナビゲーションバーを前に見たことあるが作るのは難しいんだろうな
IEの不具合も有るようだが頑張って欲しい

7252

かっこよすぎて嫉妬した

7254

safariでは厳しいか...

7255

うーん 見た目が良くなったけどコンテンツが見づらくなった気がするなぁ

以前のようにリンク先は別タブで開くようにした方が良いと思う。

7262

かっこいいけど
リンク先は別タブでお願いします

7263

いつもより早く見れるなと思ったら
テンプレート、バージョンアップしてたのか

opera万歳!

7274

NEWSタブ内がスクロールしないのは修正するの?

7279

早く下の消せよ糞管理人が
うぜえアニメーションもいらねえから

7290

このコメントは管理人のみ閲覧できます

7360

Most Popular

Now loading...

MENU



Access Ranking

Now Loading...

当ブログにリンクしていているサイトの中でアクセス数の多いサイト上位50位が表示されます。今ならリンクするだけで簡単に上位に表示されます。

Amazon

Now Loading...