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になりました。ソースも不備があるかと思いますがその際はご指摘いただければと思います。

今までレンタルサーバに付属のサブドメインで運営してきましたが、この度独自ドメインを取得しました。
先週のリニューアルに引き続き、ドメインの変更でまたもアドレスが変わってしまい申し訳ないですが今後ともよろしくお願いいたします。

http://ae-style.net/

新しいチュートリアルできました。今回は海中の作り方です。
今回からサードパーティ製プラグインを解禁しました。標準エフェクトのみでも海中と差し込む光の一部は作れます。

After Effects Style 海中の作り方
http://ae-style.net/tutorials/e23.html

Vimeo（海中のほこりっぽいものがよく見えるのでHDをONにしてフル画面で御覧ください）
http://vimeo.com/23588323

約2年ぶりにAfter Effects Styleをリニューアルしました。
今回のリニューアルではデザインのリニューアルだけでなく、もう一度サイトを構成から見直し大幅な変更となりました。
それに伴い、URLも変更となりましたので記事などをブックマークされてた方は再度登録を行っていただけますようお願いします。

無料で手に入るAfterEffectsのプラグインを紹介します。
無料といえどもどれも結構使えるので個人的に気に入っています。

1. NewBlue Cartoonr

カートゥーンエフェクト。登録が必要。
http://www.newbluefx.com/cartoonr/

2. Video Copilot Reflection

鏡面反射エフェクト。
http://www.videocopilot.net/tutorials/reflection_plug-in/

3. Magic Bullet Quick Looks Limited

Magic Bullet Looksの簡易バージョン。
パラメーターは調整できないが用意されている20個のプリセットでも十分使えるレベル。
http://www.flashbackj.com/red_giant/mb_quick_looks_limited/index.html

4. Retina Filters

@ttsukune さんが公開されているPixelBenderフィルタ群。
http://irismg.com/.%5CRetinaFilters.aspx

iMacを買って3週間が過ぎたので、設定した項目や、今使っているフリーソフトを自分のメモ替わりにでも書いておこうと思います。
今までずっとWindows環境だったので、Macの知識ほぼ０という状態の中、まとめサイトなんかを見ながら良さそうなものを試したり入れたりしてみました。

設定した内容

●Dock
○「Dockを自動的に隠す／表示」にチェック

●Expose
○「画面のコーナーへの機能割り当て」で左上にすべてのウィンドウ。右上にデスクトップを割り当て。

●セキュリティ
○「安全な仮想メモリを使用」にチェック（よくわからないけどチェックしておくといいらしい）
○「位置情報サービスを無効にする」にチェック（多分使用することないので）
○「リモートコントロール赤外線レシーバーを無効にする」にチェック（使わないので）
○「ファイヤーウォール」を開始する

●言語とテキスト
○（Google IMEをインストールしてから）「入力ソース」でことえりの英字だけにチェックを入れ、Google日本語入力の英数以外にチェックを入れる。

●マウス
○「副ボタンのクリック」にチェック（右クリックが使える）

●日付と時刻
○「秒を表示」にチェック（地味に便利）
○「曜日を表示」にチェック（地味に便利）
○「日付を表示」にチェック（地味に便利）

入れたフリーソフト

リンク先は公式サイトだったり、紹介サイトだったりバラバラです。

Firefox … メインに使ってるブラウザ。Winと同じ環境にできるので。
使ってるアドオンは
Firebug（デバッグツール）
FireGestures（マウスジェスチャー。慣れるとかなり便利）
Hatena Bookmark（はてブ使ってるので）
SBMカウンタ（はてブやdeliciousなどのブックマーク数が見れる。あと画面推移なしでブクマコメントが見れる。）
Tab Mix Plus（タブブラウジングを便利にしてくれるやつ。これがないとFirefox使う気になれないくらい。）
夜フクロウ … Twitterクライアント。高機能で使いやすいのでお気に入り。
Skype … メインの連絡用。
Microsoft Messenger … 連絡用。（あまり立ち上げていない）
Google IME … 日本語入力。ことえりも使ってみたんだけど使いにくかったので導入。
Dropbox … オンラインストレージ用クライアント。

FileZilla … FTPクライアント。ツリー表示ができるので便利。
MacWinZipper … Zip圧縮ツール。Winに渡したときの文字化けを防ぎ、「.DS_store」ファイルの混入も防いでくれる凄いやつ。
Flip4Mac（Windows Media Components for QuickTime） … QuickTimeでwmvファイルが見れるコンポーネント。
MPlayer OS X Extended … メディアプレイヤー。wmv、flvなど多くのコーデックを網羅。GOMプレイヤーに似たやつを探してたらたどり着いた。
NeoOffice … オープンソースのOffice環境。
AppCleaner … 関連ファイルも綺麗に削除してくれるアンインストールソフト。
IP Messenger … ローカルのIM。Win環境とファイルの受け渡しとかに便利。
GrowlMail … メール受信したらGrowlでお知らせしてくれる。

Tipsに「ノイズトランジション」を追加しました。
http://ae-style.net/tutorials/e22.html

ハッキング風のノイズトランジションです。
今回のチュートリアルで一番苦労するのは質感を調整する部分だと思います。主に素材に合わせたレベルエフェクトとグローエフェクトの調整がメインになります。あとはトランジションする前の素材と、トランジション後の素材の彩度を揃えてやると違和感なく切り替わると思います。

Cubic Room
http://cubicroom.net/

サウンドデザイナーであるcubesatoさんのWebサイトを制作しました。
cubesatoさんは数多くの映像クリエイターとコラボレーションも行っており、生み出される楽曲は独特の世界観を持ち一度聴けばファンになる人も多いはず。

下部にあるLoop PlayerはONO FACTORYさんに制作していただきました。

データベースのデータをエクスポートしたはいいけど、phpMyAdminでインポートできない！と言う状況になったので自分なりの解決方法をメモしました。

結論から言うと、大容量のデータはphpMyAdminがエラー出してインポートできないので、SSH接続してコマンドで直接インポートした。ということになります。
詳しくは以下より

ことのはじめ

WordPressを2.9へとアップデートするために、MySQL 4.1をMySQL5.1に上げてました。
データベースのエクスポートも終わり、古いDBを削除し、新たにDBを作成し、さぁあとはインポート！とインポートを試みるもどうも上手くいかない。なぜかログイン画面に戻されてしまう。

まさかエクスポートを失敗してファイルが壊れてるんじゃ・・・とか思いながらも解決方法を調べていると、大容量のデータはphpMyAdminではエラーがでてインポートできないことが発覚。

ちなみに大容量といってもどのくらいからが大容量なのか分かりませんが、今回エクスポートしたファイル容量は64MBでしたが、phpMyAdminではインポートできませんでした。

解決方法その１（BigDumpを使う）

でかいMySQLデータはBigDumpというフリーソフトを使うと分割アップロードができるそうです。

MySQLインポートファイルがでかすぎる時にはBigDumpを使ってみよう！- WikiCookRecipe日記
http://wcrblog.seesaa.net/article/110178405.html

上記のサイトで解説されているんですが、これでいけると思って読んでいると、こんな記述が。

これを使ってインポートしてみたら、一発でＯＫじゃなかった、一回こけたんです。一つのクエリーの行数が多すぎるとかなんとか文句が出て・・・。
そこでさくらインターネットでのエクスポート時に「生成するクエリの最大長」が50000になっていたのを100にしてSQLファイルを作成してみたら、BigDumpが無事最後まで動いて、ローカル環境にウィキクックレシピ（WikiCookRecipe）－みんなのレシピ　みんなで料理－のデータベースがきちんとコピーされました。

え、ちょっとまって、旧DB削除して新しいDB作っちゃったからもう新たにエクスポートできないんだけど・・・。「生成するクエリの最大長」が50000のままでエクスポートしちゃってるよ！どうすんのこれ。とまた解決方法を探していたら、見つかったのが次の方法。

解決方法その２（SSH接続で直接インポートしてやる）

奇しくも見つかったページがさくらのQ&Aでした。最初からここを見ろってことですよね。

データベース（MySQL）のバージョンを変更するにはどうすればいいですか？ – さくらインターネット
http://faq.sakura.ad.jp/faq/1032/app/servlet/qadoc?001341

このページの下の方に、インポートできないときの解決方法が載ってます。

□ Proxy Errorについて

一度に多くのテーブル、データのエクスポートした場合Proxy Errorエラーが表示される場合があります。

対処方法として容量が大きいファイルの場合、分割して複数回に分けてインポートを行うか、以下方法にて phpMyAdmin を使用せずにインポートください。
[phpMyAdminを使用しないインポート方法]

1. FTPソフトにて、ご利用のサーバ（***.sakura.ne.jp）にインポートするデータ（data.sql）を転送します
2. ssh 接続にてご利用のサーバにログインします
3. 以下コマンドを実行します
   mysql -h mysql●●●.db.sakura.ne.jp -u アカウント -p アカウント < data.sql

SSH接続ってなんぞ？と思いながらも、次のSSH接続のやりかたのページを見ながらクライアントソフトを導入し、無事インポートできました。ちなみにFTPでエクスポートしたSQLファイルをサーバのどこにアップすればいいのか分かりませんでしたが、
/home/アカウント/
直下にアップしてコマンドを実行してみたところ上手くいったみたいです。

SSHについて – さくらインターネット
http://support.sakura.ad.jp/support/manual/rs/tech_ssh.shtml

クライアントは解説でも使われている「Poderosa」を使用しました。
下記はコマンドの覚書。

mysql -h mysql●●●.db.sakura.ne.jp -u アカウント -p アカウント < data.sql

• 「●●●」には新しく作成したデータベースのホストアドレス（数字）が入ります。
  さくらのコントロールパネルのデータベースの設定から見れます。
• 「アカウント」はそのままさくらのアカウント。
• 「data」はエクスポートしたファイル名。

このコマンドを打ちエンターを押すと、パスワードを求められます。入力するのですが、画面には文字が表示されません。そのままパスワードを入力しエンターでインポートが始まります。そんなことなんか知らなかったものだから「パスワードが打てない・・・っ！？」ってちょっとあせってました。

無事インポートが終わると、「%」記号がでてきます。これでインポートが終わったので「logout」もしくは「exit」と入力し終了させます。

無事インポートできたか確認

phpMyAdminでログインし、データベースを見てみるとちゃんとインポートされていました。

インポートが終わったので最後の仕上げ、WordPress の wp-config.php ファイル内のデータベース設定を新しいホストアドレスに変更して無事MySQL5.1になりました。

【参考】MySQL 4.1をMySQL 5.1 にするにあたって参考になったサイト
さくらインターネットのレンタルサーバで WordPress 2.9 へアップグレードできない方へ – Bamboo Studio ＊ バンブースタジオ | Blog™
http://bamboostudio.tank.jp/archives/1692

プリセット素材に「Text Layer Style」を追加しました。
http://ae-style.net/materials/p01.html

お手軽にゴールドとシルバーの質感にできるプリセットです。ゴールド2種類、シルバー4種類の計6種類のプリセットを用意しました。

フォントサイズ72pxを基準にパラメータの値を設定していますので、それより大きく拡大縮小する場合は、エフェクトの効果が著しく崩れると思いますので調整する必要が出てくると思います。