HTML5:そろそろ本気で勉強するためのリソース

 nobiさんが、HTML5を熱く語り始めた。

Web 2.0は、その時点で起きていた、インターネット関連のさまざまな新トレンドを、ゆるやかにひとくくりにして、名付けたものだが、

これに対してHTML 5は、
ITの世界を本気で変えようと、多くの企業や人々が集まって巻き起こしている革命だ。

[From nobilog2: 「HTML 5 > Web 2.0」の声かけ確認でITガラパゴス化を防ごう!]

 昔からnobiさんが熱くなって騒ぐことは、たいがい流行る。早すぎて周りが理解できないこともあるのだが、今回は過去を反省して、さっそく乗っかることにした。

 今はHTML5を公式にサポートしたSafari 4の製品版がMac版とWin版の両方で公開されたことで、HTML5がいきなり身近になったことは確かだ。Google Chrome 3.0、Firefox 3.5でもHTML5がサポートされるので、IE以外の環境が一気にHTML5レディになる(MSはどうするんだろう?IE8もHTML5対応なんですね)。

【HTML5の追加タグ】

 HTML5では、header、section、article、footer、asideなど、ページ内のコンテンツの意味をより明確に示すタグが多数追加されている。図版を示すfigureとlegend(キャプション)、対話を示すdialog、時間を示すtime、マルチメディア要素のvideoとaudioもある。これらの新要素については、IBMの下記のページにわかりやすくまとまっている。 

HTML 5 の新要素

 すでに先駆者たちが試しにHTML5で書いたみたというページも参考になる。

HTML5 で試しに Web ページを組んでみた – VERSIONFIVE

 上記のページのサンプルが下記のページ。

老舗茶屋 富士の園 with 福禄屋

 以下も同様なページ。

HTML5 Example|CSS HappyLife

 AppleもHTML5のページを提供している。Safari 4の製品ページがHTML5なのだ。HTML5に対応しないIEと互換性をとるテクニックの参考にもなる。

アップル – Safari – Safari 4の登場です。 – 目の前にひろがる新しいウェブの世界。

 Google Chrome 3.0でHTML5に対応するGoogleも、YouTubeにサンプルページを用意している。videoタグやprogressタグのサンプルとして貴重だ。

YouTube HTML5 Demo

 HTML5の規格という面からウォッチした下記の連載も参考にしたい。

一歩先のWeb標準 | クリエイティブ・タブロイド withD(ウィズ・ディー)

【ローカルストレージを使う】

 そしてHTML5のハイライトは、Webブラウザ側のJavaScriptでSQLデータベースを利用できる「ローカルストレージ」だ。これによって、ネットワーク環境がなくても単独で動作するオフラインWebアプリケーションの作成が可能になる。Webアプリをまた一歩デスクトップアプリに近づけるという点で、重要な技術だ。

 ローカルストレージなどの使い方を知りたいときは、以下の特集が参考になる。

開発者のFirefox 3:特集 – builder by ZDNet Japan

 僕も現在勉強を始めたばかりなので、もう少し試してわかってきたら、また報告する。

関連記事

投稿者:

ともゆき@zubapita

ともゆき@zubapita

作ったモノ 雑誌:月刊アスキー(デスク)、アスキー.PC(副編集長)、インターネットアスキー(編集長)、アスキーPCエクスプローラー(編集長) Webサイト:東京グルメ/ライブドアグルメ、映画を語ろう、本が好き 著書:「Twitter 使いこなし術」「facebook 使いこなし術」 最近は、株式会社ブックウォーカーにて、「BWインディーズ」をやってます。

“HTML5:そろそろ本気で勉強するためのリソース” への3件のフィードバック

  1. ありがとうございます。
    まだ、Macユーザーが「Mac OS X最低。Macプラットフォームの死」といっていた時代に「Mac OS Xの先に未来が見える」と語り。
    「ブログなんて、一部のオタクのカルチャー」といわれていた2002年頃に「ブログはメディアのしくみを変える」と奮闘し、
    「SNSなんて流行るわけがない」といわれた時代に、SNSは人間の関係性を変えると書いてOrkutとmixiを紹介し(mixiのIDは135番)。

    まだFlickrに伊藤穣一さんが投資する前に、fotologからflickrに移行し、
    そしてTwitterが、一部のアルファブロガーには紹介されつつも、まだぜんぜん知られていなかった時代に、Twitterを紹介。そのあと、2008年末にTwitterのハッシュタグを紹介してきた身としては「nobiさんが熱くなって騒ぐことは、たいがい流行る」の言葉はちょっとうれしいです。
    特に日本のTwitter代理店当たりには、ぜんぜん無視されて、これまで書いてきた記事も、それなりにいい記事を書いてきた自負はあるけれど、ぜんぜんTwitter公式ページでは紹介されていないので…

    ちなみに、私が書いた最初のTwitterの記事は、こちら:
    http://ascii.jp/elem/000/000/027/27335/

    アルファブロガーをダシにつかっているけれど、そもそも記事にしたのは、私自身がTwitterに注目していたから、という点が、実は日本のTwitterの代理店には伝わっていないのかも…
    (と、今日はかなりシャンパンを飲んだので、ちょっとだけ愚痴モード)

    なので、ともゆきさんの言葉には、ちょっとだけホロっと来ました。

    HTML5、GoogleとアップルとFirefoxが本気出しているし、
    来ないわけにはいかないと思います。

  2. nobiさん、どもです。

    自分がどんなに確信をもっていても、まわりに理解されないことって多いですよね。僕も何度もあります。そんな僕でもnobiさんやほかの先見の明のある人の言葉が理解できなくて、あとから「なるほど!」と思ったことがあるので、難しいです。

    Twitterは、「今なにしてる」とか「つぶやき」という表現では、魅力がまったくわからないですね。実は僕も2007年から登録していますが、面白さが分かりだしたのは去年で、最近また加速度的に面白さが増してきました。

    HTML5は、Web屋としては非常に楽しみにしていましたが、ローカルストレージって本当に実装されるんかいな? と思っていたらちゃんと来ましたね。素晴らしいです。

    サーバーサイドはPerlのCGIだけだったのが、MySQLやPostgreSQLでSQLが使えるようになって飛躍的に前進しました。クライアントサイドでSQLが使えるようになったことで、いろんなアプリケーションが出てくるでしょうね。

  3. fotterとかheaderはこれからクラス、idに記述するのは控えるなり、移行したほうがいいのかもしれませんなーと思ったこのごろ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>