18個から厳選したベストWYSIWYG HTMLエディタAmaya

Introduction

文書をどの形式で保存するかという重要な問題がある。既存の選択肢としては概ね以下のいずれかだろう。

• MS Word (docx), LibreOffice Writer (odt)
• HTML (html)
• Markdown (md)
• reStructuredText (rst)
• LaTeX (tex)

この中からどれを選択するかである。今後のことを考えるとHTMLで文書を保存しておくのがよいだろう。詳細は述べないが，W3Cの動向からしてHTMLが将来の組版・出版の標準になると思われる。

HTMLで文書を書くと決めたら問題がある。それは，マークアップを覚えないといけないということだ。WordやWriterのGUIエ ディタに慣れているとマークアップの手打ちはしんどい。

エディタにおいて大きく2種類の概念がある。

• WYSIWYG (What You See Is What You Get)
• WYSIWYM (What You See Is What You Mean)

WYSIWYGとは，直訳すると「見ているものが得るもの」となる。これは自分が書いているものが最終的に得られる(印刷・表示する)ものという概念だ。WordやWriterがこの概念に当てはまる。

一方で，WYSIWYMとは，直訳すると「見ているものは意味しているもの」となる。自分が書いているものと最終的に得られるものは一致せず，最終的に得られるものは意図を解釈したものとなるという概念だ。HTMLやTeX, XMLのようにコードで意味をマークアップすることで，出力はその意味を反映したものとなる。

WYSIWYMのほうが構造を当てはめて文章を書くため，合理的である。しかし，実際にやる場合には以下3点の問題がある。

• 本文の内容にマー クアップ(タグ)を付加するため，そのタグを覚える必要がある。
• 打鍵が多くなる。
• 書いた内容と結果の対応がわからなくなる。

普通の人が文章を書くにあたってWYSIWYMだけだとハードルが高すぎる。

WYSIWYMとWYSIWYGの両方の利点を活かすには，以下の方針を取るのがよいだろう。

• 文書の形式としてはWYSIWYM（HTML）を採用
• エディターとしてWYSIWYG（GUIエディター）を採用

WYSIWYMの実践はHTMLの構文の勉強となる。WYSIWYGの実践にはGUIエディターの選定が必要だ。

Result

こういった背景のもと，HTMLで文章を書くにあたってWYSIWYGで操作可能なエディタを探した。以下の項目を検討の前提とした。

• 自由なソフト
• マルチプラットホーム

調査結果を以下の表にまとめた。

大きく以下の3種類に大別される印象だった。

• ブラウザベース
• Mozilla ベース
• レイアウト思考

ブラウザベースとは，htmlファイルにJavaScriptのファイルを読み込んでブラウザで表示する ことで，WYSIWYGエディタの機能を実現するというものだ。

ブラウザベースのエディタは，HTMLファイルにJavaScriptのファイルを読み込み自分で少しタグを書かないといけない。 例えばブログサイトの執筆画面のように，サイト自体にエディタの機能を搭載するなら有用である。しかし，普段のワープロとして使うにはあまりにも煩雑である。 HTMLタグのわからない人にはこれは使えない。実際に試すことを断念したため，評価対象外とした。

Mozillaベースとは，Mozillaが使用しているGeckoというHTMLのレンダリングツールをベースに使用しているものだ。以下のソフトが該当する。

• BlueGriffon
• Kompozer
• SeaMonkey Composer

これらはベースは同じなので基本的なレイアウトなどは似ている。SeaMonkey ComposerはSeaMonkeyというMozillaの後継であるブラウザやメーラーなどの統合ソフトの中のWebエディタという位置づけである。そのため，他2ソフトに比べ機能が劣っていると感じた。

レイアウト思考とは，主に広告やボタンなどの配置をしやすいように思考されたソフトだ。以下が該当する。

• Google Web Designer
• MAQETTA
• OPENBEXI

レイアウト思考のエディタはその目的から，普段の文書作成には向いていないと感じた。Google Web DesignerはアニメーションをつけたりするのがGUIででき，ソフト自体の品質も高いように思った。利用者は少ないようだが面白いと思った。

Discussion

調査の結果以下の4ソフトに焦点を絞り込んだ。

• Amaya
• BlueGriffon
• Kompozer
• Quanta plus

大きな選定基準は以下だ。

1. 見出しのアウトライン表示
2. 数式の対応

見出しのアウトライン表示

文章を書くときは見出しをつけて文章に階層構造を持たせて書く。ただ，文書が大きくなると閲覧・加筆した い箇所に速やかに移動するのが困難となってくる。それを緩和するために，MS WordやWriterのようなワー プロソフトにはアウトラインをサイドバーに表示する機能がある。例えば，以下の図のように左側に見出しの階層構造を表示できる。

この機能がないとかなり不便だ。BlueGfiffonやKompozerなどはあくまでタグレベルでしかこの構造を表示できない。例として，Kompozerの画面を以下に表示する。

このようにタグの階層構造を示すことはできるが，その中身(この場合は 見出し1，見出し2という文字列)をサイドバーに表示できない。Amayaが唯一この見出しの表示に対応していた。

Conclusion

以上の議論より以下の条件を唯一満たすソフトがAmayaとなったため，WYSISYGなHTMLエディターはAmayaがベストだと結論づける。

• 見出しのアウトライン表示
• 数式対応

最後にAmayaについて簡単に紹介してこの記事を終わりたい。

HP: Amaya Home Page http://www.w3.org/Amaya/

Amayaのロゴは以下となっている。

もともとTamayaというロゴに表示されている木が名前の由来だったが，Tamayaとい う名称には商標があったらしくTをとってAmayaとなったとのことだ。

W3C純正のエディタということで強力な後ろ盾がついており，将来が約束されている。安定版の最終リリースは2012-01-18となっているが，開発版は2013-02-22となっている。2014年にHTML5の仕様の公式リリースが控えているが，おそらくリリース後にAmayaもHTML5の実装のデモとしてバージョンアップするだろう。

あまり利用者はいないようだが，自由に使えて高機能な唯一のWYSIWYG HTMLエディタなので私は使っていくつもりだ。LaTeXのGUIエディタとしてLyXを見つけたときと似ている。やっと見つけることができた。

AmayaをやめBlueGriffonに乗り換えた理由

この節は2016-08-26に追記した。

この記事を書いて最初の1-2周間ほどはAmayaを使っていたのだが，一つ自分には致命的な問題があった。それは，クリップボードから画像を直接取り込めないという問題だ。

HTMLでは，Data URIという機構によりバイナリーである画像ファイルをBASE64エンコードによりテキストに変換することで，直接img要素などに貼り付けることができる。この機能を使えば，以下の利点が得られる。

• 文書と画像を一体化して管理
• ブログやHPなどへのアップロードが簡単

例えば，ブログ記事に投稿するときなどだ。文書中に画像が埋め込まれているので，エディターで用意したHTML文書を単にコピーペーストするだけで投稿が完了する。しかし，文書中に直接埋め込んでいない場合，画像をどこかのアップローダーにアップロードしてそこへのリンクを参照しなければならない。そして，そのアップローダーがサービスを終了すればリンクが切れてしまう。文書の独立性を高めるには，HTML文書に直接画像を埋め込むのが最善だ。

ところが，Amayaはこの機能がサポートされていない。参照しなければ，画像を取り込むことができない。一方，BlueGriffonはこの画像の埋め込みに対応していた。画像ファイルのドラッグドロップやクリップボードからの貼り付けにも対応していた。そのため，自分の備忘録として残してブログ投稿時の元文書としているHTML文書はBlueGriffonで作成している。

また，Amayaは2013年から開発がストップしてしまい，今後更新される気配がなくなった。一方で，BlueGriffonはCSSワーキンググループの共同議長であるグルーグマンが開発者であり，2016年にバージョン2がリリースされるなど，継続的に開発がされている。

調査を始めた当時はAmayaがよいと思ったし，MathMLに標準で対応しており悪い選択肢ではなかった。しかし，開発状況や画像の対応などBlueGriffonのほうが将来性があるだろう。