Main Content

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

旧世代のコーダーが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の他にも便利そう/おもしろそうなJavascriptライブラリがあるみたいですね^^

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

DreamWeaverでHTML5を組む際の注意点

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

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

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

<meta charset="UTF-8">

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

要は、今まで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にはアニメーションするプロパティが追加されたんでしたね。

ところが、これはIE6~8(9はどうでしたっけ?)では動きません。

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

Comments

  1. Commented on
    Comment by mozk

    html5ってjavascriptの規格でしょ

  2. Commented on
    Comment by @

    Firefox4とIE9からborder-radiusのプリフィックスは必要なくなりましたが、-moz-, -webkit-, -o-, -ms-はまだまだ増えていきそうです :(
    いずれにしろバージョンでかなり挙動が違いますね

  3. Commented on
    Comment by シナチク

    >> mozkさん

    返信ありがとうございます。
    「javascriptの一部としてhtml5がある」ということでしょうか?
    それともその逆??
    なんだかよくわからないのですが、要はセットで考えろってことですね!なんだかわかってきました!

  4. Commented on
    Comment by シナチク

    >> @さん
    返信ありがとうございます。
    プリフィックスはそんなに種類あったんですねw
    古いブラウザを根絶しない限り、もうまとまらない気がしてきましたw
    jQueryに差異を吸収してもらうしかないんですかね^^

  5. Commented on

    […] 旧世代のコーダーがHTML5に触れ始めて戸惑ったこと – SAKOTSU INSPIRE (tags: jquery html5) […]

  6. Commented on
    Comment by 名無し

    HTML5にはコアの部分だけでなく、暗黙の了解でJavaScriptやCSS3やその他もろもろのAPIも含まれてると考えた方がいいと思います
    HTML5自体は新機能を追加します!というより、機能(API)を整理し標準化して、WebをJavaScript等が活躍できる環境にします!といった感じですから

  7. Commented on
    Comment by シナチク

    >> 名無しさん

    コメントありがとうございます!
    そうなんですね、僕はHTML5の表面的なところばかり見ていたようです。webサイトが作り易くなるよう標準化が進んで、開発者もユーザーもみんな幸せになりたいですね^^ どうもです!

  8. Commented on
    Comment by akira_maru

    DW CS5.5になって、charsetの記述がのかたちに対応しているようです。HTML5で新規ドキュメントを作成でそうなってますので。

    コードヒントやmediaqueryなどもろもろ対応してますので、乗り換えたほうが作業しやすかもですね。

    個人的にはスマホ対応とか考えるとHTML5で組んでノウハウ貯めるほうがいいとおもいますよ。

  9. Commented on
    Comment by sakotsu

    >> akira_maruさん

    Dw CS5.5 情報ありがとうございます!
    akira_maruさんのサイトも拝見させて頂きました。
    HTML5ページを組むのに便利に使えそうですね^^
    僕はまだDw CS4しかもって無いので欲しくなりましたw
    HTML5はスマフォ専用として勉強していきたいと思います。
    どうもです!

  10. Commented on
    Comment by bubun69

    勉強になりましたー!
    Flashはたしかに楽しい。
    けどどうもAdobeさんのやり方がイマイチ好きになれないのです。。。
    俺はHTML5+CSS3に期待してます。
    とりまスマフォ攻めてみるわー。

  11. Commented on
    Comment by sakotsu

    >> bubun69さん

    コメントありがとうございます!
    バグ放置したままバージョンだけ重ねて発売するAdobeさん商法は僕も好きではありませんがw、この会社についていくしかないので僕も頑張っていきます!スマフォ、いいと思います!
    (この分野の1社独占なんとかしてもらいたいですね^^)

Compose Comment