アットマーク・アイティ @IT@IT情報マネジメント@IT自分戦略研究所QA@ITイベントカレンダー  
   
 @IT > 私はこう使う! - Java技術者が語るDreamweaverの魅力
 
@IT Special

 

PR

「Dreamweaver 8」連載企画 第3回

私はこう使う! - Java技術者が語るDreamweaverの魅力

「Dreamweaver® 8」連載企画の第3回は、開発の最前線で活躍するエンジニアにDreamweaver 8の活用法を語っていただく。ご登場いただく北林氏は、Webアプリケーション開発の第一線で活躍する現役エンジニアで、個人的に以前からユーザーだったとのこと。開発現場の経験に裏打ちされたDreamweaver 8の実践的活用法を聞いた。

Webアプリ開発の現役エンジニア:

日立ソフトウェアエンジニアリング
テレコムシステム事業部
テレコムシステム本部 第2システム部
ユニットリーダー・プロジェクトマネージャー
北林拓丈氏

――Java開発の現場で活用するという視点からDreamweaver® 8をどう評価されますか?

 画面設計の段階では開発者とデザイナが同じエディタを使ってコミュニケーションしやすくできる点がメリットでしょうね。具体的には、開発者がデザイナによって意図されたデザインを、コードのみならず実際のビュー画面で確認しながら作業できることで効率がアップします。

  「大量の画面の開発の場面におけるデザイナとのコミュニケーションに威力を発揮するのではないでしょうか」

 画面仕様を確定していくフェイズにおいて、まず私たちはデザイナに画面イメージを作成いただき、HTMLを成果物として納品していただきます。そのHTMLに対して、JavaScriptを埋め込んだり、JSPを書いていきますが、この作業のことを私たちは“動きを付ける”といういい方をしています。

 その作業では、例えば1画面を5枚といった複数のJSPページで構成するかたちにタグを書き直なおさなくてはならないという作業がよく発生します。過度な画面遷移を避けるための方策なのですが、この作業が意外に大変です。知識のないデザイナに1画面を5分割したかたちを意識してHTMLを書いていただくことは非常に難しいので、いったん納品されたHTMLに対して、自分たちの手で分割された画面ごとにタグの再定義の作業を行っていきます。

 この“HTML to HTML”ともいえる作業をテキストエディタ上で行っています。この作業は進捗上は目立つ作業ではないのですが、実際の画面をイメージしながら作成するのが大変で、非常に工数のかかる作業です。

北林拓丈氏プロフィール:
現在、日立ソフトウェアエンジニアリング株式会社 テレコムシステム事業部 テレコムシステム本部 第2システム部において、SOA検証プロジェクトのチームリーダーを務める。入社してから一貫してJavaに携わり、大手コンビニのECサイトの開発など、大規模なJava開発案件に従事してきた。また、若手IT技術者がディベートの技を競うオブジェクト指向の知的格闘技「Object-One」(株式会社ピコラボ主催)の第1回で優勝した経歴をもつ。共著に「J2EE パフォーマンスチューニング徹底解説」(技術評論社)などがある。Java暦6年になるJavaのプロフェッショナルである。

 Webアプリケーションの開発現場で、“HTML to HTML”の作業を、Dreamweaver 8を使って行えば、非常に効率の良い作業になるはずです。Dreamweaver 8はコードビューとデザインビューを両方表示しながら作業できますので、実際の画面をデザインビューで表示させて確認しながら、コードビュー側でタグを入れる作業を行えますから。私たちはテキストエディタでタグを書くことに慣れています。本当は実際の画面を確認できることで、効率はもっと向上するはずです。

図1 Webアプリケーション実装の前工程でDreamweaverが威力を発揮する。Eclipse等のIDEとは役割が明確にすみ分けされており、組み合わせて使うことで生産性が向上する

  「SOAの開発など、現場ではXMLを扱う機会が増える。XSLTを使って簡単に画面を確認できる機能は重宝すると思います」

――スニペットにあらかじめよく使うタグを登録しておき、活用する方法などはいかがですか?

 スニペットもありますが、Movable Typeの拡張機能を私たちの開発用に置き換えたものがあればいいと思っています。Movable Typeの拡張機能は、Movable Typeのタグを効率的に入力できる機能であったりタグのリファレンスを提供してくれるものですが、同様のものが、Javaのフレームワーク用に用意されたタグを効率的に入力するためにあればよいと思います。

スニペット機能:コードの再利用を簡単にする機能。あらかじめタグを登録しておき、該当カーソル位置に挿入できる。頻繁に使用するタグを登録しておけば、コーディング作業の効率化が図れる。
参照:「コード再利用の方法論」 〜 連載第1回 『Webアプリは“Dreamweaver 8”でコーディングが新しい』

 最近では、どの開発にも登場するコードは自動的に生成するスタイルが、開発現場では当たり前になってきています。弊社ではAssamAnyWarpというフレームワークの上でコードの自動生成を行っています。この自動化のために、HTMLのタグの間に独自のタグを埋め込んでいく作業を行うわけですが、これが非常に工数がかかる作業です。これを拡張機能を作成して容易に実行できる仕組みを作るのも工夫の1つだと思います。

 HTMLを探りながら自動生成のためのタグを入れていくのは骨の折れる作業ですが、デザインビューで見た目を確認しながらコードビュー側でコードを埋め込むことができる。それも、タグのスペルを毎回すべて記述するのではなく、効率的にかつ補完機能で修正指示を出してくれて、かつリファレンスまで表示してくれれば、若手の技術者の学習支援にもなると思います。

 拡張機能はJavaScriptで記述しますから、それ相応の時間をかければ私たちにも作れそうです。スニペットを利用する方法もありますが、拡張機能で提供した方がメリットは大きいはずです。

拡張機能(Dreamweaver Extensions):Dreamweaverが公開しているAPIを使って機能拡張ができる。JavaScriptで記述する。例えばコードの自動補完機能を提供するなど、開発環境をさらに快適にすることが可能だ。Movable Typeの拡張機能(Dreamweaver 8.0.1機能拡張 for Movable Type 3.2)は、Movable Type用タグの自動補完やタグリファレンスをサポートしている。
参照:「ここまでできる!Dreamweaver Extension 〜Movable Type連携」 〜 連載第2回 『 開発者のお仕事を楽にするための「Dreamweaverコーディング」のヒント』

――Dreamweaver 8で注目した新機能はありますか?

 Dreamweaver 8の新機能というところでは、XSLTオーサリングの機能が活用できそうです。最近はRSSフィードの生成をアプリケーションに組み込むケースが多くあります。また、SOAの構築でも、データ形式にXMLを用います。

 SOAの開発など、現場ではXMLを扱う機会が増える。XSLTを使って簡単に画面を確認できる機能は重宝すると思います。

 ユーザーがWeb画面上から要求を出して、その裏でWebサービスを使って取得したデータを画面表示しましょうというとき、取得したXMLをいちいちデータベースに保管するのではなく、リアルタイムに画面に表示できる仕組みがあると開発に便利です。Dreamweaver 8は、それを実現してくれます。

 Dreamweaver 8のXSLTオーサリング機能を使うと、XMLのエレメントをバインディングしていく作業で簡単にXSLTを作れるので、XMLデータを表示できるのが非常に魅力的です。しかも、面倒なXPathもDreamweaverが生成してくれるので、XPathの詳細な知識も不要です。

 さらに、Dreamweaver 8はXSLTプロセッサとしての機能も備えているので、XMLとXSLTからHTMLを動的に生成しプレビューすることが可能です。また、クライアント側でのXSL変換だけでなく、サーバ側でのXSL変換にも対応している点がうれしいですね。

XSLTオーサリング機能:XMLで記述されたデータをルールに従って別の形式へ変換するためのルールがXSLT。XSLTオーサリング機能は、このXSLTをグラフィカルなユーザーインターフェイスの上で作成できる
参照:「Dreamweaver 8でXSLオーサリング」 〜 連載第2回 『開発者のお仕事を楽にするための「Dreamweaverコーディング」のヒント』

 いま私がリーダーを務めているのは検証プロジェクトですので、アーキテクチャの検証が主ですが、実際の案件では相当数の画面を扱うことになります。SOAは、BtoBの企業システムで活用されるケースが多いので、企業間取引における在庫情報(商品情報)などを取り扱うケースが増えます。そのときのXML情報を簡単に画面に表示させたいような場合、XMLのフォーマットが固定であれば、XSLTを使って目で分かりやすい形式に変換できるので、Dreamweaver 8のXSLTオーサリング機能を使ってXSLTを用意できれば開発効率が向上するに違いありません。

 

「Java開発のIDEはEclipseが主流です。しかし画面開発の
前段階でDreamweaverの活用は非常に有効だと思います」

――そのほかの活用ポイントは? 

 Javaの開発では、HTMLデザインをいちどJSPにしてしまうと、Eclipseで開発した方が効率がよいのです。例えばCVSやSubversionといったEclipseにプラグインして使えるバージョン管理を使えたりしますので、Eclipseの中ですべての作業が完結するからです。なので、Dreamweaverは、デザイナから画面デザインを受け取り、HTML to HTMLの作業を行い、さらにはコード自動生成のタグを埋め込むところまでの作業で活用する。あるいは、ユーザー画面を作成する際の、XML変換のためのXSLT作成などに活用するのがよいと思います。すなわち、画面の設計・開発の段階で、デザイナとコラボレーションしたり、作業効率を上げたりするために用いることは非常に意義があります。

 いま検証中のSOAが実開発のフェイズに入る際には、ぜひプロジェクト内での導入を検討してみたいと考えています。

Dreamweaver 特設サイト
Dreamweaverでの開発用Tipsや、より詳細な情報を入手したい方は、下記のリンクよりご覧ください。

Dreamweaver for @IT Reader

Dreamweaver セミナー情報
DreamWeaverでWebアプリケーション開発

【東京会場】
日時:02月06日(火)14:00〜18:15
会場:六本木アカデミーヒルズ49タワーホール
定員:300名
費用:無料(要事前登録)

【大阪会場】
日時:02月16日(金)13:30〜16:45
会場:梅田センタービル16F H会議室
定員:150名
費用:無料(要事前登録)



提供:アドビシステムズ株式会社
企画:アイティメディア 営業局
制作:@IT 編集部
掲載内容有効期限:2007年01月31日
 
Dreamweaver 特設サイト
Dreamweaverでの開発用Tipsや、より詳細な情報を入手したい方は、下記のリンクよりご覧ください。

Dreamweaver for @IT Reader

Dreamweaver セミナー情報
DreamWeaverで
Webアプリケーション開発


【東京会場】
日時:02月06日(火)14:00〜18:15
会場:六本木アカデミーヒルズ49タワーホール
定員:300名
費用:無料(要事前登録)

【大阪会場】
日時:02月16日(金)13:30〜16:45
会場:梅田センタービル16F H会議室
定員:150名
費用:無料(要事前登録)



関連リンク

@IT News 記事リンク
アドビのミニアプリ「Apollo」の可能性は(2006/10/14)

米アドビ社長が新アプリ「Apollo」デモ、「本当のWebサービスを提供」(2006/10/13)

Adobe Acrobat新版登場、「もはやPDF作成ツールではない」(2006/9/20)

無償版含むFlex 2登場、「アドビに1円も払わず本格的Webアプリを開発」(2006/6/30)

マクロメディアのFlash Platform戦略はアドビ合併後も変更なし (2005/10/19)

ITmedia 記事リンク
Adobe、仏Actimagineからベクター画像技術を取得 (2006/10/12)

タブ型リーダーでPDFファイルを次々と閲覧する(2006/10/11)

米Logitech、AdobeのCS2専用ツールのWindows版をリリース (2006/10/10)

Adobe、ブログにも対応した「Contribute 4」リリース(2006/10/6)

アドビ、「Acrobat 8 日本語版」を発表(2006/9/19)

Adobe、LightroomをPhotoshopファミリーに組み込む(2006/9/25)

Adobe、Acrobat 8とAcrobat Connectを発表(2006/9/19)


Ajax相乗のAdobe Flex 2、開発環境を無償化(2006/6/30)


アドビ、MT対応のDreamweaverを発表(2006/2/27)

人とアイデアをつなぐプラットフォームを提供したい」とアドビ新社長 (2006/2/7)



 
@ITトップ@IT Special インデックス会議室利用規約プライバシーポリシーサイトマップ