HTML5/CSS3対応エディタ「BlueGriffon」を試してみる

BlueGriffonとは?

BlueGriffonはFirefoxに搭載されているGeckoエンジンを使用したHTMLエディタで、NvuやKompoZerといったGeckoベースのHTMLエディタの後継にあたる。ソースコードとWYSIWYG編集を切り替えながら編集を行うことができる。最大の特徴は、HTML5やCSS3に対応しているという点だ。

BlueGriffonはマルチプラットフォームで動作し、WebサイトのダウンロードページにはWindows、Mac、Ubuntu用のインストーラが用意されている。Webサイトは英語のみだがインタフェースは最初から日本語に対応している。

BlueGriffonを使ってみよう

実際にBlueGriffonの機能を見てみよう。まずはHTMLの作成時に「ファイル」メニューの「新規作成ウィザード」で使用するHTMLのバージョンなどを指定してHTMLを作成できる。

BlueGriffonはいわゆるタブ型のエディタで、複数のHTMLをタブを切り替えながら編集することができる。また、ウィンドウの下側に配置されているトグルボタンでHTMLのソース編集とWYSIWYG編集を切り替えることができる。

WYSIWYG編集時は画面上部のツールバーからリンクや画像、表などの挿入やスタイルの選択を行うことができる。ツールバーにはHTML5のvideo、audio要素を挿入するためのボタンも用意されている。また、「表示」メニューの「All Tagsモード」を選択することで画面上にタグの位置を表示することができる。

ソース編集時はHTMLの強調表示が可能なほか、閉じタグの欠落といったフォーマットのチェックを自動的に行ってくれる。また、「ツール」メニューの「HTMLマークアップの整理」で冗長なHTMLのクリーンアップも行うことができる。

ただし、一般的なIDEのような入力補完機能は備えておらず、エラーチェックに関してもフォーマットチェックのみでHTMLの要素名や属性名の誤りといった部分まで指摘してくれるというわけでもない。必要最小限の編集機能のみが提供されているという印象だ。

CSSの編集

CSSは直接ソースを編集するほか、「パネル」メニューの「スタイル プロパティ」で表示されるフローティングウィンドウからGUIで指定することもできる。角丸、グラデーション、ドロップシャドウなどCSS3に対応したプロパティも設定可能でWYSIWYG画面で実際の表示を確認しながらパラメータを調節できる。

ただし、筆者の試した環境(Windows7 64bit版)ではフローティングウィンドウがBlueGriffon本体のウィンドウの後ろにいってしまうことがあり、操作性に難ありと感じた。

SVGエディタ

BlueGriffonの特徴として、標準でSVGエディタを搭載しているという点が挙げられる。ただし、これはBlueGriffonの独自機能というわけではなく、Webブラウザ上で動作するsvg-editというSVGエディタを組み込んだものだ。

作成したSVGはファイルとして保存することもできるし、ソースを表示することもできるのでコピーしてBlueGriffonで編集しているHTMLに貼り付けてもいいだろう。

アドオンで機能を追加する

ここまで見てきたように、BlueGriffonはかなりシンプルなエディタだ。一般的なWebオーサリングツールでは当たり前の機能とも言えるスニペット機能(任意のコード断片を登録しておき再利用するための機能)やWebサイトの管理やサーバへのアップロードを行うための機能なども存在しない。

BlueGriffonではこういった機能は有償のアドオンとして追加できるようになっている。アドオンはこちらのサイトで販売されており、プロジェクトを管理するためのものや、強力なCSSエディタなどが提供されている。

まとめ

BlueGriffonはHTML5 / CSS3への対応を謳っているものの、HTML5やCSS3に特化した機能がさほど充実しているというわけではない。また、アドオン販売が行われているためか、本体の機能がかなり限定されている点も気になるところだ。

とはいえ、前身であるNvu / KompoZerで感じたユーザインタフェースの野暮ったさもなく、HTML5 / CSS3に対応したプレビュー可能なテキストエディタと割り切れば逆にシンプルで使いやすい。リアルタイムにプレビューを行いながらCSSを編集することができるのでCSS3の機能を試すにもいいだろう。