 | FrontPage 2003 からExpression Web への移行 |
１．目次 | ||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||
２．目的 | ||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||
３．参考書 | ||||||||||||||||||||||||||||||||||||||||||||
（１） なし | ||||||||||||||||||||||||||||||||||||||||||||
４．FrontPage 2003 から Expression Web への移行 | ||||||||||||||||||||||||||||||||||||||||||||
|
| ||||||||||||||||||||||||||||||||||||||||||||
４．１ Expression Web のインストール | ||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||
４．２ FrontPage データのインポート | ||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||
４．３ リモート Web サイトの設定 | ||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||
４．４ HTMLからXHTML への変換 | ||||||||||||||||||||||||||||||||||||||||||||
|
従来のFrontPageでは、XHTMLのサポートがありませんでした。このため、FrontPageで普通に作成したファイルは、HTML形式です。これをExpression Web にインポートしても、自動的に XHTML には変換してくれません。また、アクセシビリティの問題も自動的に修正してくれません。 XHTMLやアクセシビリティの点で問題があるかどうかは、[メインメニュー]→[ツール]→[互換性のレポート]により、次のようなレポートが生成されます。FrontPage2003から単純にExpressionWebへ移行しただけだと、XHTMLへの自動変換は行ってくれません。このため、次のように山のような互換性の問題のレポートが生成されます。
せっかくですから、HTMLからXHTMLに変換し、アクセシビリティも準拠するように変換していくことにします。幸い、C# プログラミングのページは、すべてダイナミック Web ページが適用されています。このため、トップバナーや、左のメニューボタンは、ダイナミック Web ページに記述されているので、まずダイナミック Web ページをXHTML準拠に変更します。 ここで問題になったのが、インタラクティブボタンです。
FrontPage の imgタグで属性では、border, fp-title, fp-style を使用していますが、XHTMLでは使用することができません。しかし、FrontPageからExpressionWebへHTMLファイルをインポートする際に、自動変換してくれません。このため、すべてのインタラクティブボタンを作り直しました。 また、これ以外にも、「td タグ属性で 'bgcolor' を使用することはできません。」とか、「h１タグで属性 align を使用することはできません。」などの、エラーが発生しますので、地道にhtmlのコードを修正する必要がありました。 これで、各ページのダイナミックWebテンプレートの大部分を XHTML準拠に書き換えました。しかし、Infoseek アクセス解析や Shinobi カウンターやGoogle 広告など、外部ベンダーの埋め込みHTMLはもともとXHTML準拠でないものがあり、これらを使う限り完全なXHTML化は不可能です。 次に各ページのボディも XHTML, アクセスビリティのガイドに沿って修正する必要がありますが、古いページだけで２００ページ以上もあるので、修正が必要な時に随時対応することにしました。 | ||||||||||||||||||||||||||||||||||||||||||||
４．５ RSS を XSLT で html に変換 | ||||||||||||||||||||||||||||||||||||||||||||
|
次に、What's new で RSS フィードを配信していますが、従来は RSS を手書きし、それをさらにテーブルに手書きで追加するというとても原始的な作成を行っていました。Expression Web では、次のように xml やSQLなどのデータソースを簡単に扱えるようになっています。そこで、What's new の新着情報テーブルを RSS から自動作成するようにしたいと思います。
rss.xml をページにドラッグアンドドロップすると、次のようにRSSの表を自動的に作ってくれます。しかし、このままだと単にXMLのエレメントがテーブルになるだけで、タイトルと該当の記事へURLが別々の列に表示されてしまいます。
そこで、タイトルに該当の記事へURLへのリンクを張り、タイトルをクリックしたら該当の記事へジャンプするようにします。次に、タイトルの本体(上の表でいえばWZero3DeAmedas (V2.0.2.0) Beta3 を公開") を選択し、マウス右ボタンを押してコンテキストメニューの[ハイパーリンク]を選択します。すると次のようにハイパーリンクの挿入ダイアログが表示されます。
ここで、fxボタンを押します。
すると、このようなダイアログが表示されますので、link を選択します。これにより、 <a href="{link}" ><xsl:value-of select="title" /></a> というリンクが生成されます。この設定は、自動的にすべての項目に適用され、次のようにURL を埋め込むことができます。最後に不要になった URL列は表示しないようにします。
| ||||||||||||||||||||||||||||||||||||||||||||
５． FrontPage 2003 から Expression Web への変更点 | ||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||
５．１ トップ画面 | ||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||
５．２ メインメニュー | ||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||
６． まとめ | ||||||||||||||||||||||||||||||||||||||||||||
|
最初、Expression Web って、何？と思いましたが、基本的に FrontPage のメジャーバージョンアップですね。uchukamen.com は、これまで FrontPage 2003 で作成していましたが、そのデータを Expression Web への引越しも、インストール込みで1時間程度で完了し、問題は何も発生しませんでした。操作性も FrontPage を使い慣れた人であれば、問題ないと思います。 それから、CSSのサポートはいいですね。しかし、スタイルの適用、スタイルの管理ペインの操作性が直感的に分かりにくく、ヘルプやビデオトレーニングでどのように操作すればよいのか勉強する必要がありました。このあたりは新規実装なのでしょうがないと思いますが、もう少し操作性の改善を期待したいです。 あとは、XHTML、アクセシビリティのサポートが強化され、準拠しているかどうかがレポート機能で簡単に知ることができ、強力ですね。また、XML、ASP.NET などデータソースのサポートも強化されており、簡単にデータソースと連携したページが作れるようになっています。 一方でその分、表示や操作性が FrontPage に比べてかなりもっさりしており、速度の面での改善を期待したいです。 |
