体験を伝える―『ガジェット通信』の考え方

面白いものを探しにいこう 本物を体験し体感しよう 会いたい人に会いに行こう 見たことのないものを見に行こう そしてそれをやわらかくみんなに伝えよう [→ガジェ通についてもっと詳しく] [→ガジェット通信フロアについて]

HTML5/CSS3やマルチスクリーンへの対応進む『Dreamweaver』最新動向を聞く

HTML5/CSS3やマルチスクリーンへの対応進む『Dreamweaver』最新動向を聞く

米Adobe Systems社でウェブ用オーサリングツール『Dreamweaver』の製品担当であるCreative SuiteグループプロダクトマネージャーのDevin Fernandez氏とFireworksプロダクトマネージャーの森房卓史氏が来日。ガジェット通信の取材に答え、『Dreamwever』の最新動向について説明しました。

『Dreamweaver CS5』では次のエリアにフォーカスしています。

・CMS(Content Management System、コンテンツ管理システム)
・CSSインスペクション
・コードヒント
・HTML5パック

各項目について見ていきましょう。

・CMS環境で『ライブビュー』を活用
クライアント向けCMSを多くのユーザーが使っています。開発者にはこれの管理が難しい課題です。単純なテーマでも100以上のインクルードされたファイルが存在し、各ページはダイナミックに構成されているのでデザイン自体が複雑です。そこで『Dreamweaver CS5』ではCMSをサポートする機能を追加しています。

たとえばPHPファイルを読み込むと、インクルードされたファイルについて、リンクのリンクまでたどれるようになります。『ライブビュー』をクリックすると、サーバー上に公開されたときと同じようにページのレンダリングができる。『インスペクト』のボタンを押すと参照するコードを視覚的に確認でき、『ライブコード』のボタンを押すと、ページでマウスオーバーした部分のコードの中身を確認できます。

・CSSをビジュアルで確認
CSSでは、ビジュアルに『CSSインスペクト』の機能が利用できます。たとえばpaddingなどのON/OFFを切り替えてビジュアルで確認できるほか、『go to code』をクリックしてそのコードを表示したり、disableにしたコードをまとめて消すことができます。

これは『Firebug』で行う作業と似ていると思います。『Firebug』上で変更してもコードが変更されるわけではないですが、こちらはコードを直接変更して保存することができます。

・コードヒントの対応を拡充

コードヒント

コード画面でスクリプトを編集する際、クラスや関数の候補を提示したり、ヘルプを参照できるのが『コードヒント』機能です。『CS4』ではPHPカスタムクラスのコードヒントがありました。『CS5』ではこれをjQueryまで拡張。自身で定義したカスタムクラスにも利用できます。

コードヒントの機能でも、CMSをサポートします。『WordPress』『Drupal』『Joomla!』といったCMSのほか、カスタムクラスコードヒントとして、日本でよく使われる『XOOPS』についてもコードヒントが利用できる。これを使うのは簡単な設定で済みます。

・『HTML5パック』を新たに追加
『HTML5パック』は『Dreamweaver CS5』の追加モジュールで、『Adobe Labs』( http://labs.adobe.com/ )で配布しています。

コードヒントでCSS3をサポートします。CSS3ではブラウザ特定のタグが存在するので、複数のブラウザで表示できるようにするには、各ブラウザに対応するタグを書く必要があります。Mozilla、WebKitといった複数のブラウザの属性に合わせてコードヒントを利用できます。

HTML5を利用するのは先進ユーザーであろうということで、コードヒントから対応しています。

プレビュー機能では、『ライブビュー』をアップデートしました。CSS3やHTML5に対応するために、WebKitを更新しています。角丸、ドロップシャドーにも対応します。

1 2次のページ
shnskの記事一覧をみる

記者:

宮原俊介(編集長) 酒と音楽とプロレスを愛する、未来検索ブラジルのコンテンツプロデューサー。ゲームコミュニティ『モゲラ』も担当してます

ウェブサイト: http://mogera.jp/

TwitterID: shnskm

  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。