HTML5でサイトリニューアルしました。＋ 簡単な解説

2年半ぶりくらいに自分のポートフォリオサイト、ORANGE AGEをリニューアルしました。
リニューアルする時どきに自分のやってみたいことを思いっきり反映してきて、前回はフルFLASHサイト、そして今回のリニューアルではHTML5＋jQueryで制作してみました。（CSS3もちょこっとだけ使ったよ）

目次：
1. 今回やりたかったこと
2. HTML5でサイトを作る準備
3. 使用したその他のjQueryプラグイン
4. videoタグで再生する動画の準備
5. 制作実績の各背景、サイズは3000×1600px。ファイルサイズ圧縮が鍵。
6. まとめ＆今後やりたいこと

1. 今回やりたかったこと

・HTML5
・videoタグで動画再生
・シングルページの構成
・視差効果（パララックス） なぜか上手く動かなかったので断念。再チャレンジ予定。

2. HTML5でサイトを作る準備

HTML5関連のサイトを回って自分なりに勉強になったり必要だなと感じたものが、以下になります。

■HTML5の構造を勉強する上で参考になったサイト

・はじめてHTML5でコーディングする時に注意したいアウトラインとかいろいろ
・HTML5 でやりがちな間違い

■html5.js

HTML5に対応していないIE9未満（IE6〜8）でもHTML5表示対応してくれるスクリプト。すごい。

■html5media.js

HTML5のvideo要素やaudio要素をサポートしていないブラウザでも表示対応してくれるスクリプト。これもすごい。

■video.js

スキンがCSSで作成可能なHTML5動画プレイヤー。IE6からスマートフォンまで再生対応可能。videoタグが対応していないブラウザはFlashプレイヤーに切り替えて表示してくれるすごいスクリプト。すごい。
Firefoxでなぜか動かなくて困ってたらどうやらサーバ側に「.htaccess」を置いてやらなければならないらしい。

参考：「video.js」を使った動画ページ[html5]

【注】Firefoxで動かすには、サーバ側に「.htaccess」を作って下記を書く必要があります。
AddType video/ogg .ogg .ogv
AddType audio/ogg .ogg
AddType application/ogg .ogg .ogv
※最後の行にも改行を入れておく。
文字コードは Shift_JIS で、改行コードは LF 。
.htaccess ファイルを設置したディレクトリ以下に適用されます。
パーミッションは604
サーバーによって違いがあるかもしれません。
【注】safariはQuickTimeがインストールされていないと動かなかったです。

とりあえずこのくらい。

3. 使用したその他のjQueryプラグイン

サイトを作る上で欲しかった機能を満たしてくれたjQueryプラグインを紹介

■Nivo Slider [スライドショー]

豊富なトランジション効果とオプションがあって仕事でも使える超オススメなスライドショー。IE6は未対応。

■Page Scroller [ページスクロール]

コリスさん作成のページ内をスムーズにスクロールしてくれるスクリプト。最近商用でも利用可能になったのでオススメ。

■notifyBar [通知バー]

Twitterの通知のような上部からにゅるって出てくれるスクリプト。今回はIE9以下のブラウザを使用している際に警告文を出したかったので使用。

4. videoタグで再生する動画の準備

今回videoタグで動画を再生しようと思ったのはいいものの、動画形式はどうしたらいいんだろうと調べてみると、ブラウザによって再生できる形式がバラバラなんですね。
参考：HTML5 & CSS3 Checklist ここのHTML5 Video Codecsのところ

とりあえず各ブラウザで再生させるためには以下の3種類の動画形式を用意する必要があるみたいです。
・ogg/theora
・H.264
・WebM

H.264は変換したことあるしツールも豊富だからいいけど、ogg/theora形式とWebM形式ってどうやって変換すればいいの？ってことで、とりあえずApp Storeを探してみたら、Miro VideoConverterという上記の3種類の形式に変換してくれるツールを発見。形式を選んで変換したいファイルをドラッグ＆ドロップするだけっていうお手軽さ。しかも変換後も目立った劣化がない。すごい。
これで3種類のファイル形式を用意し準備はOKです。

5. 制作実績の各背景、サイズは3000×1600px。ファイルサイズ圧縮が鍵。

今回のサイトの特徴のひとつである制作実績に敷かれた巨大な背景イメージ。これはそれぞれ3000×1600pxのJPEGで作成しています。最近のiMac27inchなんかでは解像度が2560×1440pxあったりするので、目一杯ブラウザを広げても背景が途切れないようにするために、このサイズになりました。

この記事を書いている時点で制作実績が7作品あり、3000×1600pxが7枚もとなると、なんとしてでもサイズを抑えたいなと思ってたときに、タイミングよくあるサイトがオープンしたのでした。

それが「JPEGmini」です。このサイトはJPEGファイルを劣化させず軽量化してくれるという神がかったサイトです。自分が試した限りでは平均約5分の1くらいに軽量化してくれました。おかげで3000×1600pxでも43KBという画像ができるという現象が。なにこれすごすぎる。なかでも1.5MBが283KBになったときはビビりました。すごすぎです。（余談：283KBになったJPEGをもう一度圧縮かけたらどうなるんだろうと、やってみたところ211KBまで軽量化されました）

とにかく7枚中4枚が100KB以下（残りの画像も100KB台と200KB台）になるという素晴らしい結果になりました。

6. まとめ＆今後やりたいこと

HTML5はなんだか難しそうだなと想像していたのですが、基本的にはHMLTL4の拡張版みたいな感じで新しいタグの特性を覚えればなんとかなりました。やりたかったことも大体できたし満足。IE9以下は今回見捨てるつもりだったけど、一応やれるところまで救済措置をとった感じです。

一応PC上では見れる形になったので公開したけれど、まだまだやりたいことがあって、
・視差効果（パララックス）の導入
・スマートフォン、タブレット端末のページ対応＆最適化
この２つを導入していきたいなと。

とりあえずまぁそんな感じでHTML5になりました。ソースも不備があるかと思いますがその際はご指摘いただければと思います。