ホーム＞ Webオーサリングソフト編＞新・「斬・Webオーサリングソフト」

新・「斬・Webオーサリングソフト」

Webサイトを作成する際に、お世話になる方も多いであろうWYSIWYG型Webオーサリングソフトソフト。私もお世話になっています。
　従来、これらのソフトが吐き出すHTMLソースは、とんでもないモノが多いということで、使用すること自体がまずいとか言われてきたものです。
　しかし、性能も向上したことですし、インストール後のデフォルト状態でどれだけまともなソースを吐き出すかを検証してみましょう。

正しいHTML文書の作成が出来れば、アクセシブルなサイト作成の大きな助けとなるはずです。

古いソフトについては、新・「斬・Webオーサリングソフト」（古いソフト）」を参照してください。

検証対象となったソフト
今回の課題
各ソフトごとの結果
総評

検証対象となったソフト

今回、この企画の餌食、もとい対象となったソフトは以下の通りです。

市販ソフトの部

Dreamweaver8　
Macromedia(http://www.macromedia.co.jp/)
ホームページ・ビルダー10
日本IBM(http://www-6.ibm.com/jp/software/internet/hpb/)
GoliveCS2　
Adobe(http://www.adobe.co.jp/main.html)
FrontPage 2003
Microsoft(http://www.microsoft.com/japan/office/default.mspx)
Homepage Creator6
namo(http://www.namo.com/jp/)

シェアウェア・フリーソフトの部

alphaEDIT,alphaEDIT+
KraftWorks(http://www.pololon.com/koby/)
EasyHome2
有限会社ヒューマンバランス（http://www.humanbalance.net/corp.html）
Nvu1.0
Nvu(http://www.nvu.com/)

検証環境

マルチプラットフォームで提供されているソフトについては、特に断りがない限りWindows版で検証しています。

検証環境
環境	OS	CPU	メモリ
Windows	WindowsXP Professional sp1もしくはsp2	Celeron 2.0GHz	1GB

今回の課題

各ソフトをデフォルト状態で使用し、文書要素として、見出し、段落、強調（今回はSTRONG要素で検証）、リスト、アドレス、表（表題つき）、画像を含んだ文書を入力します。
　及び、HTML4.01StrictDTDに準じたテスト文書を読み込んだときに、勝手にソースを書き換えないかを検証します。

チェックポイント

文書型宣言の有無、正確さ、扱える文書型の種類
無駄なタグ（例：<p>　</p>）を出してこないか
見出し、段落、強調、リスト、アドレスを正しくマークアップできるか
TITLE要素の取り扱い
表と画像の取り扱い
エンコードについて
勝手にソースを書き換えないか

解説

１．の文書型宣言は、HTML文書であることを明示し、その文書がどのルールに基づいて記述されているかを明示するためのモノです。ここでは、XHTML文書が作成できるかもチェックします。

２．の無駄タグは、HTMLの文法上よろしくありません。また、ページ容量が重くなる原因ともなります。

３．は、見出し、段落、強調、リスト、アドレスといった要素はHTML文書を記述する上で基本となるモノです。基本的な文書構造をきちんと記すことができるかのチェックです。

４．は、HTML文書では必要不可欠であるTITLE要素をマークアップしているかと言う点と、TITLE要素の内容について触れています。TITLE要素の内容が適切でないHTML文書は、訪問者にとっては迷惑です。

５．は、アクセシブルなHTML文書を作成する際に、最も配慮の必要な表と画像の取り扱いについてチェックします。チェックポイント5-1は表についてで、TH要素、CAPTION要素、TABLE要素のsummary属性のマークアップが可能かをチェックします。チェックポイント5-2は画像についてで、img要素のalt属性（特にalt=""とできるかどうか）、width属性、height属性、border属性についてチェックします。

６．は、ページの文字化けに関する問題が発生する可能性があるかをチェックします。ここでは、各ソフトで扱える日本語文字コード（特にUTF-8対応かどうか）、meta要素での文字コード指定について扱います。

７．ホームページ作成ソフトが吐き出すソースは、間違っていたり、足りない部分があったりするモノです。
きちんとしたHTML文書を作成するために手修正を加えるケースが多いと思います。しかし、更新作業などで使い慣れているソフトを使うと、せっかく修正したHTML文書が勝手に書き換えられてしまい、また手修正を施し直す羽目にもなりかねません。そのような事態が発生しないかを見ます。

Dreamweaver8

Dreamweaver8で作成したXHTML文書

Dreamweaver8で読み込ませて保存したHTML文書

チェックポイント1: XHTML1.0Transitional。冒頭のXML宣言はなし。
チェックポイント2: 無駄タグ吐き出しはなし。
チェックポイント3: 以前のバージョンからの問題点であるが、なぜかADDRESS要素が各種メニューからマークアップできない。
チェックポイント4: タイトル設定用のボックスに入力すればよいので、入力方法はわかりやすい。
チェックポイント5-1: TH,CAPTION要素、TABLE要素のsummary属性ともともマークアップOK。TH要素には、scope属性が設定されている。
必要な項目が作成時に設定できるのは非常にありがたい。他のソフトでは、プロパティを参照しなければならない見出しセルの設定も簡単だ。
ただし、デフォルトではテーブル幅が200pxで設定されている（作成時は表の幅を指定するようになっているが、作成後に幅指定をクリアすることも可能）。
チェックポイント5-2: 画像を挿入した時点では、width属性、height属性が設定、alt属性、border属性が非設定。alt属性については、画像のプロパティから、空を指定すればalt=""とすることができる。
チェックポイント6: デフォルトはShift_JIS。meta要素内ではすべて小文字になっている。EUC、JIS、UTF-8対応。
チェックポイント7: 書き換えはなし。

GoliveCS2に引き続き、XHTML1.0 Transitionalをデフォルトの文書型宣言に採用している。

文字コードがShift_JISでXML宣言が冒頭にないのは、サーバ側での文字コード指定でクリアできる問題なので大きなマイナス要素にはならない。

少し気になるのは、何も指定しないと、文字データをBODY要素の直下にマークアップすること。前バージョンまではP要素の下にマークアップされていたので、戻して欲しい。

GoliveCS2

GoliveCS2で作成したXHTML文書

GoliveCS2で読み込ませて保存したHTML文書

チェックポイント1: XHTML1.0 Transitional。冒頭のXML宣言はなし。
チェックポイント2: generatorの吐き出しあり。
チェックポイント3: 全てOK
チェックポイント4: 保存時に指定可能。
チェックポイント5-1: TH,CAPTION要素のマークアップはOK。TABLE要素summary属性はマークアップNG。TABLE要素にcellspacing="2" cellpadding="0"の設定がされているのは文法上の問題はないとはいえ、ちょっとおせっかい。
ただし、作成時には、テーブル幅が180pxで設定されているし、行数や列数の指定が出来ない（３行３列で固定）。もちろん、これらの設定は後で変更できるとはいっても、他のソフトに比べると見劣る感じがする。
チェックポイント5-2: alt,width,height,borderの各属性が設定される。alt属性の内容は空。border属性が設定されるのだけが悔やまれる。
チェックポイント6: デフォルトはUTF-8（PC向け）。Shift_JIS、EUC、JISなどにも対応。
チェックポイント7: 書き換えはなし。

Webオーサリングツールでは初めてXHTMLをデフォルトに採用。その他、PC向けサイトでは文字コードにUTF-8をデフォルトとするなど、前バージョンからの思い切った変更が見られる。

前バージョンでついていた、ページ編集とソース編集画面を同時に表示できる機能はなくなっている様子。ユニークな機能としては、PDFプレビューというものがある。

動作速度も体感的には前バージョンよりも早くなっていると感じる。動作も安定している。

要注意点としては、インストール時に関連づけが変更される点と、QuickTimeがインストールされていないとダイアログ表示が出る点。最近は、WindowsでもiTunesをインストールしているユーザも多いので、以前ほどは気にならないが……

ホームページ・ビルダー10（標準モード）

ホームページ・ビルダー10　標準モードで作成したHTML文書

ホームページ・ビルダー10　標準モードで読み込ませて保存したHTML文書

チェックポイント1: 標準ではHTML4.01 Transitional（システム識別子なし）。; このバージョンから、XHTML1.0も使えるようになった。XML宣言あり。修正パッチを適用していない状態では、<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">になる。修正パッチを適用すれば、<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">となる。
XHTML1.0の場合、文書型宣言の吐き出しを全く変更できないのはネック。ホームページ・ビルダー10で作成したXHTML文書
チェックポイント2: generatorの吐き出しあり。
チェックポイント3: 基本的なマークアップに関しての文法的問題はないが、LI要素の終了タグがない（XML形式で保存した場合は補われる）。
また、デフォルトでは、要素が大文字、属性が小文字となっているのもネック。
チェックポイント4: 何もしないと、TITLE要素の内容はない。ページのプロパティでタイトルを設定するというのはわかりづらい。ちなみに見出し要素が設定されている状態で、ページのプロパティを開けば、最初の見出し要素の内容が設定される。
チェックポイント5-1: TH,CAPTION要素ともにマークアップOK。TABLE要素summary属性はマークアップNG。TBODY要素がマークアップされている。
チェックポイント5-2: width属性、height属性、border属性が設定。alt属性は設定なし。border属性については、TransitionalDTDなら問題ないが、StrictDTDの場合には手動で消すしかない。alt属性は画像のプロパティから設定可能だが、内容が空の指定はできない。
チェックポイント6: デフォルトはShift_JIS。EUC、JIS、UTF-8。
チェックポイント7: 文書型宣言がHTML4.01Transitional（システム識別子なし）に戻されるのはつらい。回避方法は、チェックポイント1で述べたとおり。GENERATOR挿入、一部のMETA要素が大文字になる。

コーディング面に関していえば、バージョン7からの進化はあまり見受けられない。今回あげられている問題点に関しては、設定の変更で対応できる範囲。

3度に1度の自動保存や、バックアップファイル作成がデフォルトになっているので要注意。

使いこなすためには設定変更は必須といっても良い。

インターフェイス面では、V7～V9までのごちゃごちゃ感は若干薄まっている。それと、動作がやや軽くなっているような感じがする。

ホームページ・ビルダー10（どこでも配置モード）

ホームページ・ビルダー10　どこでも配置モードで作成したHTML文書

ホームページ・ビルダー10　どこでも配置モードで読み込ませて保存したHTML文書

ホームページ・ビルダー10　どこでも配置モード変換後のHTML文書

チェックポイント1: 標準モードを参照のこと。
チェックポイント2: どこでも配置モードの場合、すべて絶対座標で配置される。それゆえにDIV要素満載となってしまう。
チェックポイント3: P要素を配置したい場合に注意が必要である。段落の挿入で標準を指定しなおさないといけない。これを忘れると、DIV要素の直下にテキストが置かれる。
チェックポイント4～6: 標準モード参照のこと。
チェックポイント7: 標準モードでの変更内容に加え、チェックポイント2でも記しているが、すべて絶対座標で配置される関係で、DIV要素がいたるところに挿入される。

バージョン6の時から口すっぱく言っているが、どこでも配置モードは使用するべきではない。なぜならば、文書構造が崩れる可能性が非常に大きいからだ。挿入ごとにソースを下に下に絶対配置で追加する。見た目には真下にあったとしても、ソース上ではものすごくかけ離れた位置にある可能性が高い。このように文書構造が崩れるとCSSが使えない環境では正しく情報が伝わらない。

どこでも配置モード変換後（ブラウザ共通のレイアウトに変換して保存する）については、絶対指定のレイアウトがテーブルレイアウトに置き換わる関係上、空セル、透明画像がたくさん挿入される。文書構造も減ったくれもなくなる。

FrontPage2003

FrontPage2003で作成したHTML文書

FrontPage2003で読み込ませて保存したHTML文書

チェックポイント1: 前バージョンである2002同様、文書型宣言なし。XML文書形式にするのはHTMLソース画面から指定するが、XML文書形式にしても文書型宣言は補われない。
チェックポイント2: 無駄タグ吐き出しなし。この点は前バージョンに比べると大いに進歩している。
チェックポイント3: 前バージョンではいまいちわかりづらかったメールアドレスへのリンクもわかりやすくなっている。特に問題はなし。
チェックポイント4: なぜか、「新」だけになっているのだけども、これは中点で区切られてしまった可能性もある。ページのプロパティからや保存時に変更可能。
チェックポイント5-1: TH,CAPTION要素のマークアップOK。summary属性はNG。前バージョンでのお節介な指定はなくなった。デフォルト状態では表の幅に100%が指定されている。
操作性に関しては前バージョンと変わらず辛いところだ。
チェックポイント5-2: 画像を挿入した時点で、width,height,border属性が設定される。alt属性については、画像のプロパティの全般タブで、代替表示のテキストにチェックを入れると、alt=""を入れることが出来る。
画像周りの取り扱いについては、前バージョンよりもかなり良くなっている。
チェックポイント6: デフォルトはShift_JIS。meta要素内では、すべて小文字になっている。EUC、JIS、UTF-8対応。
チェックポイント7: 書き換えはなし。

今バージョンより、ページ編集とソース編集画面を同時に表示できる機能が搭載された。GoliveCSも採用したので、これで、市販されている主要なWebオーサリングソフトでは、すべてこの機能が搭載されたことになる。

コーディング面についてはかなり改善されており、仕事で使う場合に修正をかなり入れなければならないと言う状況からは解放されるだろう。以前のバージョンを使っている場合は、アップグレードをおすすめする。

ただ、個人的に非常に気にくわないことが一つ。新規文書作成をすると、右側に「レイアウト　テーブルとセル」なんてメニューが出てくる。このメニューはもろにテーブルレイアウト用。最初からテーブルレイアウトを推奨するようなメニューは出さないで欲しい。

Homepage Creator6

Homepage Creator6で作成したHTML文書については、体験版のソフトウェア使用許諾同意書の中に、

2. 使用範囲
本ソフトウェアを使って作成したファイルを Web サーバーに発行することはできません。また、機能テストの目的でファイルを発行した場合には、機能を確認後に直ちにWeb サーバーから発行したファイルを削除してください。

と言う文書がありますので、ソースを掲載します。

<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<title>新・「斬・Webオーサリングソフト」</title>
<meta name="generator" content="Namo WebEditor v6.0(Trial)">
</head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<h1>新・「斬・Webオーサリングソフト」</h1>
<p>Webサイトを作成する際に、お世話になる方も多いであろうWebオーサリングソフト。私もお世話になっています。<br>従来、これらのソフトが吐き出すHTMLソースは、とんでもないモノが多いということで、私用すること自体がまずいとか言われてきたものです。<br>しかし、性能も向上したことですし、<b>インストール後のデフォルト状態でどれだけまともなソースを吐き出すか</b>を検証してみましょう。</p>
<h2>検証対象となったソフト</h2>
<p>今回、この企画の餌食、もとい対象となったソフトは以下のとおりです。Windows環境で動作&amp;有料のソフトです。</p>
<ol>
    <li>ホームページ・ビルダー7</li>
    <li>DreamweaverMX</li>
    <li>Golive6</li>
    <li>FrontPage2002</li>
</ol>
<table border="1">
    <caption>各ソフトの情報</caption>
    <tr>
        <th width="187">ソフト名</th>
        <th width="187">メーカー</th>
        <th width="187">通常版価格</th>
    </tr>
    <tr>
        <td width="187">ホームページ・ビルダー7</td>
        <td width="187">日本IBM</td>
        <td width="187">14,800円</td>
    </tr>
    <tr>
        <td width="187">DreamweaverMX</td>
        <td width="187">Macromedia</td>
        <td width="187">48,000円</td>
    </tr>
    <tr>
        <td width="187">Golive6</td>
        <td width="187">Adobe</td>
        <td width="187">24,800円</td>
    </tr>
    <tr>
        <td width="187">FrontPage2002</td>
        <td width="187">Microsoft</td>
        <td width="187">オープンプライス（実売19,800円）</td>
    </tr>
</table>
<p><img src="list-yellow.gif" width="16" height="16" border="0"><a href="../neo_wysiwyg.htm">新・「斬・Webオーサリングソフト」へ戻る</a></p>
<hr><address>
文責：FUMING(<a href="mailto:fuming@neko.chan.ne.jp">fuming@neko.chan.ne.jp</a>)</address>
</body>

</html>

チェックポイント1: 文書型宣言なし。XHTML非対応。
チェックポイント2: GENERATORの吐き出しあり。また、BODY要素のbgcolor,text,link,vlink,alink属性の吐き出しがある。
チェックポイント3: STORNG要素はNG。
チェックポイント4: 保存時に指定できる。また、ページのプロパティからも指定可能。
チェックポイント5-1: TH,CAPTION要素のマークアップOK。ただし、CAPTION要素のマークアップは、メニューの表からしか行えないのがやや辛い。summary属性はNG.
表の幅は固定されていないが、セルの幅をpxで固定している。もちろん変更は可能。
チェックポイント5-2: width,height,border属性の指定あり。border属性については、数値を入れないことで吐き出しさせないことが可能。alt属性については、画像のプロパティから設定可能だが、内容が空の指定はできない。
チェックポイント6: デフォルトはShift-JIS。EUC,JIS,UTF-8などに対応。
チェックポイント7: 書き換えはなし。

このソフトも、ページ編集とソース編集編集画面を同時に表示できる。インターフェイスはDreamweaverMX シリーズに似ている。メーカーのサイトでもDreamweaverMXを比較対照として取り上げている。

コーディングに関しては、文書型宣言を吐き出さないこと、書式設定が弱いのが気になる。

初期設定では、バックアップファイル作成がデフォルトになっているので要注意。

EasyHome2

EasyHomeで作成したHTML文書

チェックポイント1: HTML3.2。完全に時代遅れ、かつ日本語が通らないDTDを平気で使っている。
チェックポイント2: BASEFONT要素などを平然と吐き出してくる。また、BODY要素のbgcolor,text,link,vlink,alink属性の吐き出しがある。
チェックポイント3: かろうじて見出しのマークアップはできている。リストはtype属性を勝手に吐き出してくる。段落についてはマークアップできているが、他のブロック系要素もP要素で囲っている。STRONG要素、ADDRESS要素はNG。
チェックポイント4: HTML3.2でも必須なはずのTITLE要素がマークアップされていない。最低。
チェックポイント5-1: TH,CAPTIONいずれもNG。
チェックポイント5-2: alt属性がファイル名になっている。これではalt属性の意味をなさない。width、heightの指定あり。
チェックポイント6: Shift_JISのみ。要素、属性ともに大文字。
チェックポイント7: このソフトはHTMLを直接読み込ませることはできない。１度サイトをつくって、独自形式のファイルで保存してそれを吐き出すことになる。ただ、そのサイトにHTML文書を追加するのは可能なので、今回は特別にこの方法で、読み込ませて保存させた。結果は、予想通り悲惨。勝手に、BASEFONT要素追加、属性のダブルコーテーション取り、©の文字化けなどが発生。

前バージョン同様、まずヘルプを見ないと何をしていいのか全くわからない。先ほども書いたが、最初にサイトを作成してその中にHTML文書や画像を追加する形式になっている。

いざサイトを作ろうとしたところ、ディレクトリ指定をするようにとダイアログが出たので、いつも使っているディレクトリを指定したら、、「指定したディレクトリにはファイルが存在します。削除される可能性がありますがよろしいですか？」とメッセージが。このメッセージだけは初心者にとっては怖いだろう。私ですら怖かったので、別ディレクトリに隔離する羽目に。

HTML吐き出しの質は、今回テスト対象になっているソフトでは最低レベル。こんなのに1,995円も払う価値はどこにもない。いくら、お絵かき機能やFTP機能がついていたとしても、絶対に使ってはいけない。

Nvu1.0

Nvu1.0で作成したHTML文書

Nvu1.0で読み込ませて保存したHTML文書

チェックポイント1: デフォルトでは、HTML4.01 Transitional（URLなし）。設定で、HTML4.01/XHTML1.0 と Transitional/Strictの組み合わせで変更可能。
チェックポイント2: テーブル、水平線、画像にstyle属性の設定が行われる。
チェックポイント3: すべてOKであるが、文字を入力した段階では、BODY要素の直下になっているので、他のソフトとは異なり、意図的に段落のマークアップを施す必要がある。
チェックポイント4: 保存時にタイトルを入力するように要求されるので、入力すればOK。
チェックポイント5-1: TH,CAPTIONいずれもOK。ただし、CAPTIONは挿入方法が少しわかりづらい。さすがにsummary属性まではサポートしていない。
チェックポイント5-2: 空のalt属性がマークアップされる。高さと幅はstyle属性で指定されるため、width,height属性はなし。また、border属性もなし。
チェックポイント6: デフォルトでは、ISO-8859-1。保存時にエンコードを指定することで、Shift-JIS,EUC,JIS,UTF-8などに対応。
要素、属性ともに小文字。
チェックポイント7: 書き換えはなし。

Nvuについては、基本的には英語版であり、日本語メニューを使うには日本語化拡張をインストールする必要がある。また日本語HTML文書保存時にはきちんと日本語のエンコードで保存する必要がある。

もう一つ気になるのは、リンクや画像でローカルにあるファイルを指定した場合、保存してもファイルへのパスがそのままになっている点。

コーディングに関する癖はMozilla Composerと同じであるため、Mozilla Composerを使ったことがあるのならほぼ同等の感覚で利用することが可能だろう。機能的には、Nvuのほうが上である。

Mozilla Composer同様、インラインスタイルシートの濫用が気になるが、フリーソフトとしてはかなり上質なソフト。

総評

個人的主観を交えてランク付けをする。

S：GoliveCS2、Dreamweaver8: Dreamweaver8は、完璧までとはいかないが、プロユースとして使用しても問題ない。細かい部分での配慮も効いている。難点は、価格が高いこと、起動にやや時間がかかること。XHTMLをデフォルトとして採用されている。
GoliveCS2は、XHTMLをデフォルトとして初採用したことと、GoliveCSからの速度面・安定度の改善が見られるのでSランクとする。こちらもプロユースとしては問題なく、特にAdobe社製の他ソフトを使っている場合はなじみやすいだろう。
A：FrontPage2003: FrontPage2003は、文書型宣言がないのが残念だが、他のコーディングに関しては、一番良いレベルだ。ただし、表周りの操作性はやや難。いきなりテーブルレイアウト推奨しているので、Aとさせてもらう。
B：ホームページ・ビルダー10 標準モード、Homepage Creator6: ホームページ・ビルダー10は、初期設定を変更すれば、それなりのコーディングは可能。XHTML文書の作成が可能となったが、XHTMLの場合、DOCTYPEの変更が一切できないのは難点。サーバサイドスクリプトとの連携ができないという点が厳しい。また、初期設定のまずさが非常に目につく。
Homepage Creator6は、初期設定のままでもそこそこまともなコードを吐き出すことは可能だが、コーディング機能に弱い部分がちらほら見受けられる。全体的に良くまとまっているソフトではあるが、細やかな気遣いが足りないという印象を受ける。このソフトもXHTML文書の作成にはあまり向かない。プロユースとして使うには厳しいが、ホームユースで使う分には十分な機能を持ち合わせており、価格面を考えればホームページ・ビルダーよりお買い得だろう。
C：Nvu1.0: 読み込み保存による書き換えはないがコーディングの過剰さと英語版であるという点が辛いところ。
D：alphaEDIT,alphaEDIT+: いずれも、テーブル周りのコーディングの弱さ、読み込み保存による書き換えで、属性値のダブルコーテーションが削除されるのが辛い。
論外：ホームページ・ビルダー10　どこでも配置モード、EasyHome2: 使うべからず。ホームページ・ビルダーのユーザはこのモードの存在を忘れた方がよい。もちろん、変換してうんたらかんたらというのもするべきではない。
EasyHome2は今時HTML3.2という時点で終わっているが、吐き出されるHTMLも悲惨過ぎる。

ホーム