Adobe Dreamweaverは長年、Webデザインの定番ツールとして活躍してきました。Dreamweaver CS5.5では、Adobeはこのアプリをモバイルアプリ向けにさらに強化しました。（2011年6月17日現在の価格は、標準版へのアップグレードが119ドル、Web Premium版へのアップグレードが399ドルです。）
このステップは論理的かつ不可欠です。エレベーターに乗れば、乗客の半分はスマートフォンを見つめています。あなたの上司もおそらくその一人でしょう。そして、優秀な企業が自社ウェブサイトのモバイル版、そしてiPhoneアプリやAndroidアプリを開発していることを上司は知っています。そして、それらを開発するのはあなたにかかっています（同時に、古いウェブサイトのドアが落ちないように気を付けながら）。ついでに、古いコードもすべてHTML 5にアップデートしましょう。他の皆もそうしているでしょうから。朗報です。新しいDreamweaver CS5.5 Webオーサリングアプリケーションには、これらすべてに加え、さらに多くの機能を備えた新機能がいくつか搭載されています。
HTML 5への移行を生き残る
HTML 標準の前のバージョン 4.01 は 1999 年に承認されました。2007 年に作業が開始された HTML 5 では、透明部分の表示、ボックス タイプのカスタマイズ、複数フォーマットでのビデオ配信など、多くの優れた機能強化が提供されており、あらゆるデバイスやあらゆるサイズの画面でこれらすべてとさらに多くの機能を実現できることになっています。ただし、HTML 5 の多くの部分と関連する Cascading Style Sheets 3 (CSS 3) はまださまざまな開発段階にあり、その結果、Google Chrome、Mozilla Firefox、Microsoft Internet Explorer、Opera、Apple Safari など、さまざまなブラウザーによる HTML 5 と CSS3 のサポート レベルは大きく異なります。Apple Safari と Google Chrome の最新バージョンは最も多くの新機能をサポートしていますが、Internet Explorer の最新バージョンですら、HTML 5 と CSS 3 のサポートに多くの欠陥があります。
AdobeはHTML 5のサポートに注力しており、コード要素が「完成」するまで、つまり開発プロセスのかなり後期になってからDreamweaverのコードライブラリに追加するとしています。Adobeはこれらのコードに加えて、-moz（Mozilla Firefox）、-o（Opera）、-Webkit（Webkitベースのブラウザ）といったベンダー固有のプレフィックスも追加しています。しかし、複数のベンダー固有のプレフィックスでコードを肥大化させることは、ブラウザメーカーが規格への適合を避けることを促すだけであり、自分自身を苛立たせるにはもってこいの策であるという意見もあります。
Dreamweaver CS5.5 は、他の面でも時代の先端を行くよう努めています。Adobe は、Android のブラウザー、Google Chrome、Apple Safari (Mac、iPhone、iPad 上)、さらには Amazon Kindle の内蔵ブラウザーで使用されているオープンソースのページ レンダリング エンジンである WebKit のサポートをアップデートしました。その結果、ブラウザーで表示される Web デザインを簡単に確認するための Dreamweaver のライブ ビュー モードでは、それらのブラウザーを実行しているデバイスに表示されるページのより正確な表現を確認できます。ただし、新しい CSS 3 スタイルの一部 (たとえば、境界線の半径) はライブ ビューでのみ確認できます。デザイン ビューまたはソース コード ビューで値を変更した場合、変更の効果を確認するにはライブ ビュー ボタンをクリックする必要があります。Adobe によると、Dreamweaver をこのように設定した理由は、オブジェクトの編集可能性を維持するためであり、ライブ ビューは動的またはインタラクティブな状態でのページの表示状態を判断するのに適しているためです。
そして残念なことに、Webユーザーの大多数が好むブラウザであるInternet ExplorerはWebKitを採用していません。IEはWebKitをサポートしておらず、他の多くのWeb標準もサポートしていないため、ページの校正をLive Viewだけに頼ることはできません。私は主に基本的な機能（例えば、画像のURLが正しく入力されているかなど）を確認するためにLive Viewを使用していますが、細かいブラウザ互換性チェックは、複数のブラウザで読み込み、レイアウトを目視確認する必要があります。
もちろん、多くの企業で依然として根強い主流であるInternet Explorer 6（IE 7とIE 8も標準的にはそれほど良くありません）などの古いブラウザバージョンに対応する必要がある場合、デザインのプレビューは困難、あるいは不可能です。もちろん、システムに複数のバージョンのInternet Explorerをインストールすることはできないため、次善策としてAdobeのBrowserLab（CS Liveオンラインサービスのコンポーネント）が挙げられます。Dreamweaverでは、ボタンをクリックするだけで現在のページをBrowserLabに送信できます。BrowserLabは、Chrome 9および10、Firefox 3～Firefox 4、IE 6～IE 10、Safari 4および5など、さまざまなブラウザバージョンでレンダリングされたページのスクリーンショットを確認できるWebサイトです。
BrowserLabは新しいツールではありませんが、ここで取り上げる理由は、Adobeが2012年4月までは無料で、その後は月額20～30ドル、または年額200～300ドル（最終的な価格はまだ決定していない）の有料化を予定しているからです。さらに、DreamweaverとBrowserLabの統合は、ページをウェブサイトに配信するボタンをクリックするだけです。Dreamweaverは様々な形でインターネットに接続されているため、私としてはAdobeがBrowserLabの機能をDreamweaverアプリケーションに組み込んでくれることを強く望みます。しかしAdobeによると、もしBrowserLabをDreamweaverに組み込むと、デザインを変更するたびに（ブラウザのバージョンをいくつ変更しても）、新しいスクリーンショットを生成する必要があり、そのようなサービスの維持コストが法外に高くなるとのことです。この質問に対する明確な答えは見つかりませんが、いつかもっと良い方法が見つかると信じています。今のところ、BrowserLabは、たとえ間に合わせではあっても、ニーズに十分応えています。
さらに、HTML ニュースレターの作成を任されている場合、更新された Live View も BrowserLab もまったく役に立ちません。Outlook (および過去のバージョン) などのデスクトップ アプリケーションでニュースレターがどのように表示されるかを気にする必要があるだけでなく、Yahoo! メール、GMail などのさまざまなオンライン メール サービスでどのように表示されるか、また、これらのサービスがさまざまなブラウザーやオペレーティング システムで HTML をどのように扱うかについても気にする必要があります。Apple Mail と Entourage 2008 など、いくつかのメール クライアントは WebKit に依存していますが、大多数のクライアントは独自の処理を行っており、Dreamweaver CS5.5 はそれらのクライアントを悪とは見なしません。Adobe の回答は、Dreamweaver の主な役割はデスクトップとモバイル デバイス用の Web サイトとアプリケーションの作成を支援することであり、ニュースレターではないというものです。
Dreamweaver CS5.5 のインターネット接続機能の 1 つに、ライブ W3C (Worldwide Web Consortium) コード検証サービスがあります。Dreamweaver には既に HTML コーディングエラーや特定のブラウザバージョンで動作しないコードを特定するコード検証機能が搭載されていましたが、今回アプリケーションに統合されました。W3C のウェブサイトにはコード検証サービスがありますが、コードをコピー＆ペーストしてレポートを取得し、コードに戻って正しい行番号を探す必要があります。Dreamweaver CS5.5 は現在のページコードを W3C に送信し、エラーがあればウィンドウにレポートを表示します。エラーレポートをクリックすると、問題のある行に直接移動できます。これは非常に便利な時間節約になります。
モバイルウェブサイト、モバイルアプリ
Dreamweaver の新しい jQuery Mobile テンプレートと関連する jQuery コンポーネントライブラリを使えば、モバイル専用サイトをゼロから構築できます。これらのページの主な処理は JavaScript によって行われます。jQuery は、複数のコマンドを 1 行ずつではなく、連続して記述できる JavaScript の一種です。Dreamweaver CS5.5 には jQuery コンポーネントとコマンドのライブラリが付属しているので、私のようなコーディングが苦手な人でも、このライブラリを参照してコードを挿入し、生成されたコードを修正するだけで済む場合がほとんどです。さらに、jQuery の生のコードを生成する必要がある場合、Dreamweaver のソースコードビューで jQuery コードヒントが利用できるようになりました。
しかし、そこまでのレベルのJavaScriptプログラミングの知識がなくても、Dreamweaver CS5.5の新機能であるマルチスクリーンプレビューを使えば、モバイルフレンドリーなサイト開発に大いに役立ちます。ダイアログボックスで画面サイズ（例えば、低解像度のスマートフォン用、iPad用、デスクトップ用など）を指定すると、DreamweaverがHTMLコードにサイズを指定したメタタグを挿入します。そして、マルチスクリーンプレビューを選択すると、ウィンドウ内にページが様々なサイズで表示されます。それぞれの画面サイズに適切なスタイルシートを指定できるので、コンテンツが画面サイズに適切に収まるように設定でき、マルチスクリーンプレビューでページを表示した際に、画面サイズが適切に収まっていることを確認できます。まさに天才的！
さらにすごいのは、新しい機能を使って、おそらくモバイル画面用にデザインしたバージョンをパッケージ化し、そこから iPhone アプリまたは Android アプリを作成できることだ。Dreamweaver では、ボタンをクリックするだけで最新の iOS または Android ソフトウェア開発キット (SDK) をダウンロードでき、あとは数ステップでアプリを作成できる。デバイスの GPS や加速度計機能を使用する電話固有の機能を組み込むこともできる。Dreamweaver のダイアログでは、アプリケーションのアイコンとして使用する .png ファイルを指定でき、そのイメージが各プラットフォームの要件に適合するように拡大縮小され、その他の処理が行われる。Dreamweaver では、アプリを電話や iTunes や Android アプリマーケットに転送する方法について明確な手順は提供されていないが、簡単な手順書を見つけた (Adobe によると、このトピックに関するビデオチュートリアルを近日中に Web サイトで提供する予定)。
Dreamweaver CS5.5のアプリ開発機能における唯一の問題は、Windows PCではiPhoneやiPadアプリを出力できないことです。これはAdobeの責任ではありません。AppleはiOS SDKのWindows版を提供していないからです。また、Angry Birdsのような非常に高機能なアプリを開発するには、Dreamweaverだけでは不十分な点も覚えておく必要があります。しかし、モバイルウェブサイトのアプリ版を作成するだけであれば、Dreamweaverでも十分です。
モバイル対応、モバイルフレンドリー
モバイルウェブサイトやモバイルアプリケーションの構築をご検討中なら、Dreamweaver CS5.5は救世主となるかもしれません。特に、開発の過程でサポートが必要な場合はなおさらです。AdobeのBrowserLabとの連携がぎこちないため、ブラウザサポートの問題への対応は期待ほどにはいきませんが、それでもDreamweaver CS5.5は強力で革新的なアプリケーションです。
