Dreamweaver CS5.5のHTML5サポート
Dreamweaverの現行バージョンであるCS5.5の一番の売りは、HTML5とCSS3にフォーカスを当てている点だとRewis氏は語る。例えば、新しいドキュメントダイアログでは、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の要素が動作するようにしてあります」
Dreamweaver CS5.5のCSS3対応デモンストレーション
続いて、デモ用カンプを用いながら、Dreamweaver CS5.5のCSS3対応について解説が行われた。
「HTML5は、Webデザイナーの視点からみると、CSS3が大きなポイントと言えるでしょう。CSS3のおかげで、今までで困難だったことの数多くを解決できるようになりました」
このカンプは、今までであれば実装が難しい、もしくは大変な手間がかかるデザインが多く含まれている。例えば、半透明で角丸なボックス、円形で傾いたオブジェクトなど。こうしたデザインも、Dreamweaver CS5.5でCSS3を駆使すると、簡単に実装できるという。Rewis氏は、Dreamweaver CS5.5を起動し、左側をソースビュー、右側をライブビューに切り替えてから解説を続けた。
「ライブビューは、実際にブラウザーで表示される画面に限りなく近いので、私は作業する時にライブビューを常にオンにしています」
まずは、半透明で角丸なボックスの実現から。スクリーン上で組まれたHTMLでは、ボックスが半透明の白ではなく不透明な白になっていたが、もちろんカンプ上では白ではない。また、色指定は「#FFFFFF」という以前のCSSの方式で指定されていた。新しい色指定についてRewis氏は次のように語る。
「#FFFFFFというヘキサ形式で定義していますが、これだと非常にわかりづらい。CSS3では、必ずしもヘキサ形式を使う必要はありません。RGBAやHSLAといったデザイナーに馴染みのある形式で定義することが可能です。そして、Dreamweaver CS5.5ではこの形式に対応しました。ちなみにRGBAやHSLAの最後についているAはアルファ値で、この値によって透明度を変化させることができます」
そして、実際に色指定をRGBで指定し直したあと、Aに相当する値を0.7くらいに変更することで半透明なビジュアルを実現した。
続いてRewis氏が取りかかったのは、角丸だ。角丸もCSS3ではborder-radiusプロパティを指定をすることで実現できる。Dreamweaver CS5.5のプロパティリストからborder-radiusを選択することで、簡単に入力を行うことができた。
Rewis氏によると、他のツールで角丸の細かな指定を行う場合、「何度も試行錯誤したい時は、その都度ファイルを保存してブラウザーで表示してリロードして」という手順が必要になるが、ライブビューを使えばリアルタイムに反映されるので、この煩雑な作業が解消されるという。
角丸の応用として次にRewis氏が紹介したのは、デザイナーのカンプでは円形だったボックス部分の修正だ。現状では四角いボックスになってしまっているこの部分もborder-radiusを応用することで実装が可能だという。Dreamweaverのソースビュー上で、デザイナーのカンプでは丸だった部分の指定に「border-radius」を途中まで入力すると、プロパティが補完される様子がスクリーンに表示された。
この円形のボックスは、カンプ上では少し傾いていた。Rewis氏は、オブジェクトの回転についてCSS3を使って実現可能な旨を説明しながら、transformというプロパティを使い、rotateを15度回転と指定し、ページをリフレッシュした。スクリーン上では変化が起きない。
「実は、CSS3の機能の全てをブラウザーがサポートしているわけではないのです。現在ブラウザーごとに先行実装という形で実現している機能は、『ベンダースペシフィックプレフィックス』と呼ばれるプレフィックスをプロパティの先頭につけることで暫定的に利用できるということになっています。ご安心ください、ベンダースペシフィックプレフィックスもDreamweaver CS5.5はサポートしています」
そしてソースビュー上で、transformプロパティにOpera／Safari／Chrome／Firefox／Internet Explorer向けのプレフィックスをつけることが可能であるとデモを行った。
Dreamweaver CS5.5上でのモバイルサイト構築方法
Dreamweaver CS5.5では、モバイルサイト開発に関連した機能も強化されている。Rewis氏は、デスクトップ上のWebページをそのままモバイルデバイス上でも表示することについて次のように語る。
「まずは、iPadで先ほど作ったページを表示してみましょう。そこそこ読めるのがわかります。続いてiPhoneではどうでしょうか？ さすがに文字が小さすぎて読めませんね。各ボックス上でダブルタップをすると拡大できますが、それでも読みやすいとは言えないでしょう。これでは最高のユーザー体験を提供しているとは言えません」
Rewis氏によれば、Dreamweaver CS5.5に搭載している「マルチスクリーン」機能を使って、様々なデバイス上の表示形式を確認できるという。
Dreamweaver内にあるマルチスクリーンボタンを押すことで、モバイル／タブレット／デスクトップでの見え方を一覧できる様子がスクリーンに表示された。また、マルチスクリーンでの表示の際に、CSS3のメディアクエリーを使って挙動が変えられるため、CSSでそれぞれのデバイス用のスタイルを組みつつ、その場で各解像度のバージョンを確認することが可能なのだ。
デモでは、表示横幅が901px以上の場合はデスクトップ用のCSS、900px以下の場合はタブレット用のCSS、480px以下の場合はモバイル用のCSSが適用されるようにメディアクエリーを組み立て、各デバイスごとのスタイルを定義した。メディアクエリーの定義の結果、ライブビューでもモバイルの解像度で確認が可能になり、実機でどう表示されるかをエミュレートしながらコーディングができるように設定された。
jQuery Mobileのサポート
最後にRewis氏は、ネイティブのモバイルアプリケーションとモバイル上でのWebサイトとのユーザー体験の違いについて語った。
「より、モバイルデバイス上のユーザー体験を高めるために『jQuery Mobile』という選択肢があります。jQuery Mobileを使うことで、ネイティブアプリケーションに近いルック＆フィールを実現することができます。何よりDreamweaver CS5.5では、jQuery Mobileに対応しているのです」
Dreamweaver CS5.5には、jQuery Mobileベースのテンプレートや、コードヒント機能が用意されている。加えて「PhoneGap」もDreamweaverに搭載したとのこと。PhoneGapを使うと、Dreamweaverでモバイルアプリケーションを開発できるようになる。
「Dreamweaverで作ったコンテンツをネイティブアプリケーションにすることで、ブラウザーの機能を超えることができます。例えば、コンテンツから直接電話をかけたり、カメラで撮影したり、位置情報を取得したりといったことが可能になるのです。DreamweaverはPhoneGapの機能をサポートしているため、ネイティブなAPIへのアクセスが簡単に行えます。つまり、これらの機能をDreamweaver上で編集し、パッケージングして配布することができるのです」
そして、Dreamweaver CS5.5で作ったPhoneGapのアプリケーションを、iPhoneのエミュレーターの中で実行してみせた。
デモアプリケーションは東京の「寿司ヘブン」という店のアプリケーションで、店に電話をかける、地図で位置を確認する、カメラで写真を撮るなどのデモが行なわれた。また、カメラで会場の様子をとり、オンラインに保存するデモンストレーションが行なわれた。このアプリケーションは、全てDreamweaver CS5.5の中で作られたという。
製品の試用版ダウンロード
「Dreamweaver CS5.5」には、製品版と同じ機能を30日間無償で試用できる体験版が用意されている。新しいDreamweaver CS5.5で、本稿で紹介されているHTML5とjQuery Mobileの新機能を試してみて欲しい。
