エンタープライズ:特集 2003/09/05 18:00:00 更新

Microsoft Office Systemアプリケーションレビュー
第8回 Webページ作成作業を効率的に行えるFrontPage 2003

Webページの作成から公開までをトータルにサポートするFrontPage 2003。新しいテンプレートやデザインツールを駆使することで、Web開発作業を短縮化できる。

 Webサイト開発を行うためのFrontPage 2003は、今回のOffice 2003の中で最も変化を遂げたアプリケーションの1つだ。機能・操作面でのブラッシュアップは当然として、Windows SharePoint Services(WSS)の標準HTMLエディタとしての機能が目立つ。WSS抜きの環境でも多機能ぶりを見せるが、その真価は、やはりWSSとの組み合わせで発揮されると見てよさそうだ。

グラフィックスデータのサポート強化とテンプレート作成機能

 FrontPage 2003では、Webサイト構築に関わる作業をより効率的に行うための機能が提供されている。デザイン、コード作成、公開といったプロセスのそれぞれについて、効率化を図るための機能が用意されている。

 利用するグラフィックスデータなど特定のファイルタイプに、編集用のアプリケーションを関連付けることができる。関連付けは[オプション]ダイアログの[エディタの設定]タブで行う。例えば、JPEGやGIF画像にPhotoshopを関連付けておけば、画像の右クリックでPhotoshopを起動し、画像を編集できる。

 Webページのテンプレート作成機能も用意された。テンプレート作成時には、特定のエリアをロックして編集禁止にすることもできる。固定したデザインや重要なスクリプトなど、変更されると困る要素があるとき便利だ。テンプレートファイルを編集すると、そのテンプレートから作成されたページも自動的に更新されるので、ページ作成を大幅に効率化できる。

Office_frontpage001.gif

画面1■[オプション]ダイアログの[エディタの設定]タブ。ファイルの拡張子ごとに編集用のアプリケーションを関連付けられる(複数の関連付けが可能)。


 Webページ制作では、レイアウトの枠組みとしてテーブルを使うことがよくある。FrontPage 2003では「レイアウトテーブルおよびセル」という作業ウィンドウに、こうしたレイアウト用のテーブルが用意されている。クリックして挿入したあと、表やセルのプロパティを設定することも可能だ。

 レイアウト優先でWebページを作る場合、PhotoShopなどのグラフィックスツールを用いてデザイナーにページを画像として描いてもらい、それに合わせてWebページをデザインしていく手法がある。「イメージトレース」は、こうした手法に対応した機能だ。デザインビュー背景に画像を表示することで、トレースを可能にする。透明度や位置も設定可能だ(FrontPage 2003では、ページをデザインしたりHTMLコードを表示・編集するエリアを「ビュー」と呼ぶ)。

Office_frontpage002.gif

画面2■「レイアウトテーブルおよびセル」作業ウィンドウ。ページデザイン用のテーブルが用意されている。


Office_frontpage003.gif

画面3■イメージトレースは、背景に画像を置く機能。デザイナーが描いた画像に合わせてページデザインするときに便利だ。


効率的なコード編集ができる分割ビューとクイックタグセレクタ

 「分割ビュー」は、画面を分割してデザイン表示エリア(デザインビュー)とHTMLコードエリア(コードビュー)を同時に表示する機能だ。2つのビューで行った変更は互いに反映される。例えばデザインビューで文字を削除すると、コードビューからも文字が削除される。コードビューで<font color="red">HELLO</font>の「red」を「blue」に変更すれば、デザインビューでも文字が赤から青に変わるのが確認できる。コードビューではスクリプトやスタイルシートも直接入力・編集できるので、HTMLを直接書くのも苦にならない。

 デザインビュー/コードビューの上端には、現在のカーソル位置に対応したタグが一列に並んで表示される。これが「クイックタグセレクタ」だ。例えば次のように並んでいるとする。

<body><div><table>

この場合、現在のカーソルは右端の<table>タグの位置にある。クリックすれば、この<table>〜</table>の範囲が選択状態となり、編集可能となる。メニューを開いて選択箇所だけ編集したり、選択範囲を囲むタグを挿入することも可能。そこで表示される編集用のウィンドウが「クイックタグエディタ」だ。多数のタグが入れ子になった複雑なコードを編集するとき便利だろう。

Office_frontpage004.gif

画面4■分割ビュー。ソースとデザインを同時に表示できる画面。画面上端に並ぶのが「クイックタグセレクタ」。


 マウスオーバーで形や色が変化するボタンは簡単に作成可能。[挿入]−[インタラクティブボタン]を選択し、一覧から選ぶだけだ。ベータ版では色違いなども含めると230種類のボタンが用意されていた。ボタン上の文字、フォント、マウスオーバー時の文字色なども設定できるので、作成できるボタンのバリエーションはかなり広い。

Office_frontpage005.gif

画面5■インタラクティブなボタンは一覧から選ぶだけで作成できる。フォントやイメージを編集して、オリジナルのボタンも作成できる。


 「HTMLの最適化」は、HTMLファイル中の不要な空白、コメント、空タグ、使われていないスタイルなどを自動的に削除する機能だ。[ツール]−[最適化]を選択すると、最適化の方法を設定するダイアログが開く。オーサリングツールが生成した不要なコードに悩まされているユーザーには便利だ。ただし、試用したところ、最適化したあとで再びもとの状態に戻すことはできなかったので、実行時にはHTMLファイルをバックアップしておいた方が安全だろう。

 検索・置換機能では、通常の検索・置換処理に加え、複雑な条件による検索・置換機能が用意されている。例えば、「alt属性を含まない<img>タグ」といった条件(ルール)を設定できる。条件を登録し、他のユーザーと共有することも可能だ。正規表現にも対応し、テキストエディタ顔負けの機能を持つ。テキストエディタを多用するユーザーも、コードビューをテキストエディタに見立てて利用すれば、かなり便利に利用できそうだ。

Office_frontpage006.gif

画面6■[検索と置換]ダイアログ。ルールベースの検索と置換ができる。正規表現にも対応。


 IntelliSenseは、スクリプトやスタイルシートを記述するとき、関連するコードをカーソル位置にドロップダウンリストとして提示し、入力をサポートする機能だ。例えば、<div>タグの属性部に「on」と入力すると、ドロップダウンリストが現れて、「onmouseover」「onchange」「onclick」……等のイベントハンドラを選択・挿入できる。IntelliSenseは、次のコードを入力するときに有効だ。

HTML、CSS、XSL、JScript、VBScript、JavaScript、ASP.NET

 Webサーバとローカル間のファイル転送には「リモートサイトビュー」を使う。対応しているWebサイトの種類は次のとおり。

  • [FrontPage ExtensionsまたはShare Point Services]……FrontPage ExtensionsまたはShare Point ServicesをサポートするWebサーバ
  • [DAV]……DAV(Distributed Authoring and Versioning)をサポートするWebサーバ
  • [FTP]……FTPサーバ
  • [ファイルシステム]……ローカルまたはネットワーク上のコンピュータにあるフォルダに保存

Office_frontpage007.gif

画面7■リモートのWebサイトを設定するダイアログ。


Windows SharePoint Servicesのデータ取り込みとページ編集

 Windows SharePoint Services(WSS)のWebサイトにあるページにデータビューを挿入すると、XMLファイル、データベース接続、 XML WebサービスなどのデータをWebページに取り込めるようになる。「データソースカタログ」作業ウィンドウは、そのデータを一覧表示するウィンドウだ。

 例えば、「XMLファイル」にある「カタログに追加」と書かれたリンクをクリックし、XMLファイルを指定すると、そのXMLファイルのデータがWebページ中に簡単に取り込まれる。

 取り込んだ直後は、XMLデータはデフォルトの表形式で表示される。「データビューの詳細」作業ウィンドウに切り替えると、XMLデータの表示方法を自由に変更できる。デフォルトの表形式の他に、帳票形式で表示したり、ドロップダウンメニュー形式で表示することも可能。設定した条件に合うレコードだけ表示するフィルター、レコードの並べ替えやグループ化など、XMLデータならではの柔軟な処理が可能だ。

Office_frontpage008.gif

画面8■取り込んだXMLファイルと「データビューの詳細」作業ウィンドウ。[ビューのスタイル]ダイアログでは、取り込んだXMLファイルの表示形式を変更できる。


 WSSの「お知らせ」「リンク」「ディスカッション」「アンケート」などの情報をFrontPage 2003にダイレクトに読み込んで活用することもできる。WSSではこれらの情報がXMLで記録されるため、先ほど解説したXMLデータの取り込みと同様の操作でWSS上の情報を扱えるのである。

 「データソースカタログ」には「SharePointリスト」および「SharePointライブラリ」として、「ToDo」「お知らせ」「イベント」などが並び、ここから選択してデータを取り込む手順となる。例えば、SharePoint Servicesに在庫情報、顧客情報などが登録されていれば、FrontPage 2003に取り込み、並べ替えや絞り込みを行い、デザインしてWebサーバに公開するといった一連の処理が簡単に実現するわけである。

 また、WSSで「管理者」および「Webデザイナ」として登録されているユーザーは、IEでWSSサイトのページを表示し、ツールバーの[Microsoft Office FrontPageで編集]ボタンをクリックすることで、FrontPage 2003を起動してページをダイレクトに編集できる。テーマを使ってデザインを一括変更したり、Webパーツの追加などの作業が簡単に行える。実際に試してみると、ローカルファイルの読込・編集・保存とまったく同じ感覚でデザイン変更できた。保存時にわずかなタイムラグは感じたが気にならない範囲(100Mbps LAN環境で試用)。操作はじつに簡単だった。

Office_frontpage009.gif

画面9■「データソースカタログ」作業ウィンドウ。「SharePointリスト」と「SharePointライブラリ」から、WSSのデータをFrontPage 2003に取り込んで編集できる。


Office_frontpage010.gif

画面10■WSSのトップページをFrontPage 2003で編集中。テーマを変更したり、Webパーツを配置してデザインを簡単に変更できる。


関連記事
▼Windows .NETチャンネル
▼Microsoft Office Systemアプリケーションレビュー トップページへ戻る

[井上健語, 池田利夫(ジャムハウス),ITmedia]