CodeZine(コードジン)

特集ページ一覧

ADC MEETUP ROUND02 レポート
SESSION2:Adobe Dreamweaver CS5.5 and HTML5 & jQuery Mobile

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2011/09/22 14:00

 Adobe Developer Connection(ADC)と連動する開発者向けイベント「ADC MEETUP ROUND2」のセッション2では、アドビ システムズ社のGreg Rewis氏により、Dreamweaver CS5.5におけるHTML5とjQuery Mobileのサポート周りの紹介が行われた。

目次


Dreamweaver CS5.5のHTML5サポート

 Dreamweaverの現行バージョンであるCS5.5の一番の売りは、HTML5とCSS3にフォーカスを当てている点だとRewis氏は語る。例えば、新しいドキュメントダイアログでは、HTML5を使ったスターターテンプレートが用意されている。これを使えば、HTML5をベースにしたページの土台を作ることができるという。

HTML5のテンプレートもあるドキュメントダイアログ
HTML5のテンプレートもあるドキュメントダイアログ

 Rewis氏は、HTML4とHTML5の違いについて次のように語る。

 「既存のHTML4のページをHTML5にするには、Doctype宣言を1行入れるだけです。もちろん、HTML5では新しいタグが用意されています。そういった新しいセマンティックな要素を使いたいユーザーのために新しいレイアウトを2つ追加しました」

新しく用意されたレイアウト
新しく用意されたレイアウト

 デモでは、新しく用意されたHTML5版のレイアウトが、HTML4版のものと見た目にほぼ同じであることが確認できた。ただしHTML5版の方は、header/nav/aside/sectionなどといった要素でマークアップされており、Doctypeの変更だけではない機能拡張の模様がスクリーンに映し出された。

HTML5のコードヒントとInternet Explorerへの対応

 新しいDreamweaverでは、コードを書くときに使うコードヒントもHTML5に対応したという。そしてRewis氏は、HTML5を使う際の注意点を次のように語る。

 「HTML5の新しい要素を使う際は、ブラウザーのことを考える必要があります。Dreamweaver上のライブビューではWebKitエンジンを使って描画しているので、ChromeやSafariと同様に表示されます。きっとFirefoxやOperaでも同様にきちんと表示されるでしょう。ただし、Internet Explorerでは、問題が発生することがあります。Internet Explorer 9であればHTML5をきちんと表示できるはずですが、7や8、もしくは6ではどうなるでしょうか?」

 そこでDreamweaverのチームは、前述のテンプレートにマジックコードを入れ、HTML5をサポートしていない旧ブラウザーでも、モダンブラウザーと同様に表示されるようにしているそうだ。具体的には、Internet Explorerの条件分岐コメントを使用し、バージョン9未満では別の処理を実行するように定義してあるとのこと。

 「マジックコードでは、Remy Sharp氏が書いた『html5shiv』という10行程度のスクリプトを利用して、Internet Explorerのバージョン9未満でもHTML5の要素が動作するようにしてあります」

Internet Explorer対策用のマジックコード
Internet Explorer対策用のマジックコード

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Adobe Developer Connection

もっと読む

著者プロフィール

  • 原一浩(はらかずひろ)

    Greative(グレーティブ)代表/Design Wedge編集長/ワイヤーフレームコミュニケーション研究会主催。1998年にWebデザイナーとして独立。同年、ウェブデザイン専門のメールメディアDesignWedgeの発行を開始。Webデザインやシステム開発業務の傍ら、海外のWebデザインに関する...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5