旧世代のコーダーがHTML5に触れ始めて戸惑ったこと

こんにちは。元コーダーのsakotsuです。

前回に引き続き、スマートフォン向けのサイトについて学び始めたのでその雑感などを備忘録として書いていきたいと思います。

時間が無い人向けに結論を先に書いておくと、
「誰だよHTML5でWebの世界が激変するって言ってたやつは、、」です。

僕の勉強不足で生意気言っていたらすみません！
でも、「HTML5万歳！夢の技術万歳！」なエントリーが並ぶ中でこういう意見もあっていいんじゃないかと思って書かせて頂きます。

宜しくお願い致します。

HTML5って何ですか

僕が数年前にコーダーとして働いていた頃は、HTML4/XHTMLの時代でした。
それから今に至り「HTML5がWebの世界が激変させる！」という記事を見かけるようになりました。

会社を辞めてからコーディングに興味を無くしFlasherとしてやっていた僕は、今更になって「いったい何が始まるんです？＞＜」という不安な面持ちでいたんですけれど、いざフタを開けてみれば、個人的にはまだHTML5はあまり騒ぐような段階じゃありませんでした。

というか、複数のブラウザに縛られている現状ではHTML5に実体なんてものはありませんでした。

• PC向けサイトでは、まだCSS3が使えない（と考えていた方がいい）
• 実質はスマートフォン向け
• CSS3追加プロパティと疑似セレクタでコーディングが楽になることもあるけれど、各ブラウザに対応するための面倒な記述も減らない

HTMLが4から5に変われど、環境が整うまでコーダーの人はHTML5による恩恵はまだ受けられないんじゃないかと思うようになりました。

お～い磯野～、未整備なHTML5のことなんて放っておいてJavaScriptやろうぜ～

そんなHTML5をdisっていた僕ではありますけれど、jQueryで作られたUIや仕掛けなど、
Flashでは出来ない部分に手が届くようなweb体験は素敵な感触でした。

jQueryについては、こちらのスライドがわかりやすかったので紹介します。

• ノンプログラマーのためのjQuery入門

調べていくと、jQueryの他にも便利そう/おもしろそうなJavascriptライブラリがあるみたいですね＾＾

• 4Gamer.net ― ユビキタスエンターテインメント，無料で使用できるHTML5/JavaScriptベースのゲームエンジン「enchant.js」をリリース（ミドルウェア/開発ツール）
• kanariia.net BLOG – [easelJS]JSのCanvasをFlashライクに使うライブラリ！とりあえずHelloWorldしてみる。

そのうち触ってみようー。

DreamWeaverでHTML5を組む際の注意点

というわけで、HTML5+CSS3が通用するスマートフォン向けにコーディングをやってみました。

「HTML5になって、タグの記述も少なくなって楽になったよやったね！」なんて言いながらDreamWeaverCS4で作業をしていたら、
UTF-8ページが勝手にShift-JISに書き換えられてしまうという事例が発生しました。

ちなみに文字コードに関してはこの一行を書いていました。

<meta charset="UTF-8">

ググって見ると以下のページで解決できました。

• 【更新】Dreamweaver CS4 でテンプレートを適用すると文字化けする件。（CS5 でも発生する模様） – btmup Blog ［ボトムアップ ブログ］
• Dreamweaverで文字コードが勝手にSJISに変更される – memories

要は、今までHTML4記述で必要だった部分を省略したために、
DreamWeaverが余計なお世話で文字コードをShift-JISとして解釈し自動変換してしまってたということでした。

結局、HTML5では不要なはずの下記の1行を追加することにしました。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

うーん、Adobeさんなんとかしてほしいです。。

あと、CSS3の border-radiusもそうなんですけど、

-webkit-border-radius: 10px; /* for Safari,Chrome */
-moz-border-radius: 10px; /* for Firefox */

webkit系ブラウザ用とFirefox用とを併記しないといけないみたいです。仲良くしてよ。

やっぱり「HTML5になって記述が劇的に楽になったやったー」を実感するには、もうしばらく時間が掛かるのかもしれませんね。。

iPhone上でのアニメーション表現の選択肢

みなさんお馴染みの通り、iPhoneのSafari上ではFlashが再生されませんので、代替案を考えなければなりません。

そういえば、CSS3にはアニメーションするプロパティが追加されたんでしたね。

• webkit応用編01 | HTML5+CSS3でサイトを作ってみる。

ところが、これはIE6～8（9はどうでしたっけ？）では動きません。

しょうがないのでクロスブラウザなjQueryのanimate()で組むのが定石かと思ったのですが、
iPhoneでは「jQueryアニメーションは重い」というエントリーを見つけました。

• zudolog » iPhone, iPadでの-webkit-transitionと-webkit-transform

どうやら、CSSのtransition / transformを使うべきらしいです。

せっかくなので、これ以外の方法でアニメーションする方法も考えてみたいと思います。

まず思いついたのが、アニメーションgif。
これならPCでもガラケーでもスマートフォンでもアニメーションできるんじゃないだろうか。
そう思っていたのですが、Safari上での再生が他のブラウザと比べて劇的に遅いという残念仕様だということがわかりました。
試しに、こちらのページをSafariとそれ以外のブラウザで確認してみてください。

加えて、こういうエントリーも見つけました。

• iPhone／AndroidのブラウザでGIFアニメが再生できない件 | alt

もー、AppleさんはFlashを封じるならアニメーションgifぐらい他ブラウザと足並み揃えといてくださいよー。

で、そんなAppleさんに居た人が作ったという、iOS対応のアニメーションオーサリングソフト『Hype』も最近登場したみたいです。
トゥイーンとフェードだけ使うならこれでいい気もしますけど、評判はどうなんでしょうかね。

• もうFLASH不要かも? HTML5アニメ作成ソフトHype登場 iOSにも対応! 【増田(@maskin)真樹】 : TechWave

最後。
jpgの連番再生的な発想でアニメーションさせる方法も紹介されていました。

• blog.rettuce.com » アニメーションgifならぬアニメーションjpg/png

おー！
これは下準備がちょっと大変かもしれませんが、工夫すれば一番キレイで威力発揮しそうな気がします！

でもやっぱり、Appleは早くFlashを解禁してくださいｗ

他、参考になりそうなエントリーも教えてもらいました

• iPhone4 Retina Display対応のデザインのコツ！ | KAYAC DESIGNER’S BLOG – カヤックの意匠部によるデザインやマークアップの話
  iPhone4用解像度に合わせてデザインする時の注意点がよくまとまっています！
• iPhone,iPadをPC上でエミュレータ「iBBDemo2.0」使い方？快適にシュミレーション可能 ：PC,モバイル｜アマモ場
  AIR製のiPhoneとiPad用のシミュレーター
• flipsnap.jsというのを書いた – Webtech Walker
  「スライドするUIを汎用的に使えるようにしてみた」だそうです！

まとめ

正直、「HTML5＋CSS3」に関してはまだまだマーケティング用語の域をでないレベルの印象ですが、
「JavaScript」はこれからちゃんと勉強していかないといけないなーと感じました。

あと、HTML5+CSS3+JavaScriptのことをFlasherの人達と話してたんですけど、
「これらのことをクロスブラウザでサクっと作れちゃうFlashってやっぱすげーよな」って話になって僕らは中ジョッキで乾杯しました。

なので、Adobeさんは負荷の軽いFlashPlayerを作ってAppleさんも早くそれを認めてあげてください。