BlueGriffonを使ってみる

1. はじめに

BlueGriffon（青鷲・鷲獅子）は、HTML5対応のWYSIWYGなHTML・CSSエディタだ。ただ少々癖があるので取っ付きは悪い印象だ。しかし最近は一連の操作のコツが分かってきたというか、慣れてきたというか、結構使えるのではないかと思えてきた。とは言っても私はHTML5は知らないので、もっぱらHTML4の、それも緩い方の文法でコーディングしているので、偉そうなことを言ったら鷲獅子様に爪を立てて怒られてしまいそうだが...

いくらWYSIWYGと言ってもHTMLを全く知らないでBlueGriffonを使うのは少しキツイと思うが、とりあえず新規ファイルを作成して、ちょこちょこと中央寄せとか太字にしてみたのが下の画面だ。

できあがるソースの見た目に関することは、当然、インラインスタイルと言うのかタグのstyle属性を使ってCSSで記述されている。

<p style="text-align: center;">あいう</p>
<p style="text-align: left;"><span style="font-weight: bold;">かきく</span></p>

下のようにタグの属性で見栄えを定義するのは流石に時代遅れだろう。

<p align=center>あいう</p>
<p><b>かきく</b></p>

ひどいWISIWYGソフトだと段落でなくダブル改行にしてくれるものもあるみたいだ。ダブル改行だとさすがにセンタリングもできないだろうにと思うけど、何の何の、こういうWISIWYGソフトでHTML入門してしまうと、スペースを詰め込んでなんちゃってセンタリングにするという禁じ手を身に着けてしまう人もいるようだ。

上のようなソースは基本のインラインスタイルで一応行儀のよいコーディングではあるが、CSSの書き方としては使い回しできない方法なので更新時などには苦労することになる。

見栄えについてはid属性やclass属性をCSSセレクタとして利用し、いろんな場面で使い回せるようにした方が良いに決まっている。BlueGriffonは、そういった書き方もできるのでHTMLとCSSの利点を理解している人にとっても十分効率的なソースを生成してくれる。

ここでは最終的にはそういったソースが書けるようになることを目標に、BlueGriffonの使い方を書いて行こうと思う。HTML初心者はまずはなんとか「6. 属性とインラインスタイルの編集」まではやり遂げてほしいと思う。

2. 始めにやっておくこと

３つのパレットを常に表示しておく

「パレット」メニューから、「スタイルプロパティ」「DOM Explorer」「スタイルシート」を開く。フローティング表示された３つのパレットには赤いピン・アイコンがあるので、それをクリックしてメインウィンドウの右端に埋め込んでおくのが良いと思う。パレットの収まる場所をDeckというのかな？こうして３つのパレットを常に表示しておくと何かと操作がスムーズの行える。

初期設定

初期設定で、「長い行を折り返す」のチェックは外しておいた方が吉と思う。エディタがソースを折り返し表示するのはどうということはないのだが、ソース自体を折り返すと文章中に不要に半角スペースが紛れ込んでしまう。HTMLの改行コードが半角スペースとして表示されるからだ。英語などでは単語間で折り返すので何の問題もないのだが、日本語ではそうはいかない。

私は「HTMLのコメントを表示する」も外している。プレビュー画面にコメントが表示されてもあまり役には立たないのではないかなと思うので...

プレビュー画面でアンカーのアイコンが表示されて、そのため文字がずれてしまって、ブラウザでの見え方と違ってしまうのが気に入らないのだが、初期設定やメニューで表示・非表示の切り替えはできないようだ ... 残念。

3. 癖対策

BlueGriffonはちょっと癖があるというかGUI的にも少し難があると思う。この項をじっくり読むと使うのがイヤになることが想像されるので本当は書きたくはなかったのだが、まあここはすっ飛ばして、実際使っていく途中で、「え、どうやるんろう！上手くいかないな〜」といったことが出てきたとき参考程度に読んでもらえばよいかと思う。

DOCTYPEとcharset

BlueGriffonで新規ファイルを作成するとき困るのが、DOCTYPE宣言がHTML5形式になってしまうことだ。それにcharsetがShift_JISになっている。

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=Shift_JIS" http-equiv="content-type">
    <title></title>

初期設定でなんとかできればよいのだが、これは仕様のようで、そうしたい場合は「ファイル」→「新規ウィザード」から作ればよいということらしい。ところがこのウィザードはかなりおせっかいやきで、無駄な設定や使い慣れていないid名などが自動で作られてしまうので使い勝手が悪いのだ。

どうやら今のところ自分用の白紙ファイルのテンプレートを作っておいて、それを開くかたちで始めるしかないように思われる。

ブロック要素を追加できないことがある

BlueGriffonのプレビューモードでは、新規ブロック要素を追加できないことがあるようだ。例えばテーブルが最後の要素（</body>の直前）のとき、その下に何かの要素を簡単に追加できない。なぜかというとテーブルの後ろ（右または下の行）をマウスクリックでポイントできないのだ。引用ブロックが連続しているとき、間に段落ブロックを挿入できないといったことも起こる。

これは困る。何かよい方法はないものか？よい方法を知っている方は教えて下さい。

とりあえず空段落などを作っておいてから、テーブルなり引用ブロックを作るという手順にするという「お膳立て作戦」もあると思うが、そういつも手順通りにはいかないし、そのせいかどうかははっきりしないが、表示に影響されないゴミタグや<br>が挿入され残ってしまうようだ。こういうのが残っていてもプレビュー画面では見えないので、掃除もできない。

<p><br>
</p>


<p>あいう<br>
</p>

で実際問題としてどうしているかというと、仕方なく「お膳立て作戦」、この時ばかりは「ソース画面で手打ち作戦」でなんとかやり繰りしている。あ、ソース画面で<p></p>という空タグを入れておいてもプレビュー画面に戻ると自動的に消されるのでご注意を。空タグは容赦なく削除するって、青鷲様は妙に厳格なのネ。

ちなみにBlueGriffonで白紙ファイルを作ると、<body>部は下のようになっている。妙になるほどと思ったりして ; ¬ ¬)

<body>
  <p><br>
  </p>
</body>

でも、<p><br></p>というソースってどうもな〜っと思ってしまう。というか、後で書くが delete キーで削除する時問題を生じるもとになる。

選択対象が分かりにくい

BlueGriffonは任意の要素を選択して、移動、タグ名変更、属性の追加・編集、スタイルの追加・編集などが簡単にできるのだが、その対象となる要素をプレビュー画面の該当部位をポイントしたりセレクトしただけでは正確でないことがある。

基本的には、ステータスバーの上に表示されるタグリストバーで目的の要素のタブをクリックして選択するのが確実なようだ。

私はテーブル全体をドラッグアンドドロップで移動する方法が始めのうち分からなかった。テーブル内の文字列はセレクトできても、テーブル自体を移動するためにはどのようにセレクトまたはポイントするかが分からなかった。最近やっと、このタグリストバー中の<table>タブをクリックすることで、テーブル要素を選択したことになり、ドラッグアンドドロップで移動できるようになった。

任意のタグで括れない

BlueGriffonは「挿入」メニューからHTML5のあらゆるタグを挿入することができるのだが、それはあくまで挿入であって、行や文字列をポイントまたはセレクトした状態でそのメニューを使えば、例えば<q>タグでサクっと括ってくれるというわけではない。ツールバーにいくつかのインライン要素で括れるボタンがあるし、「書式」メニューでそういうこともできるのだが、タグが限られている。困ったことだ。私は仕方なく何でもよいからとりあえずタグで括っておいて、後からタグ名を変更するようにしている。

例えば、BlueGriffonの書式メーニューをみると引用が<cite>タグになっている。確か<cite>は出典であって、引用自体は<q>のはずだったと思うのだが...　とりあえず書式メーニューからなら<cite>タグで括ることはできる（何だってかまわないのだが）。後で下のように<q>タグに変更したりしている。

気を付けなければならないのは、リターンキーを押さないと変更が完了しないことだ。私は最近までタグ名が変更できないのはバグではないかと思っていた。

delete と backspace

削除キーの挙動がイマイチ分からない。今、下のように片仮名という見出し<h3>の上に空行がある状態で、片仮名という見出し行の先頭にカーソルがある場合、空行を削除しようと思ってbackspace (Macではdelete) を押すと右のようになってうまく修正できない。

見出し行の先頭にカーソルがある場合ソースでカーソルの位置を見ると下のようになっている。たしかにこの位置でbackspaceすれば、<h3>のタグを削除することになるわな！消したいのは茶色で示したタグなんだし....カーソルの位置も変だし、<br></p> というコーディング自体も変でしょ！

　→　

下のように空白行にカーソルがあると、backspaceで期待通りに修正される。ソースのカーソルの位置を見ればなんとなく納得。

　→　

delete（Macではforward delete）でも同様に期待はずれで修正できないことがある。どういう挙動なのか今だによく掴めていない orz　癖対策と題したが全然対策になっていない (^^;

本文って？

BlueGriffon には左上にブロック要素を指定するプルダウンメニューがあるが、ここが「本文」となっていたり「mixed」となっていることがある。これがいまいちどういう意味か分からない。body 直下で「本文」や「mixed」となっていたら、とりあえず「段落」にしておいた方が良いように思われる。

とまあ、いろいろ癖というかインターフェースの悪さもあるのだが、ここは付き合っていくしかないように思われる。慣れてくればそれほど苦でもなくなってくる....と言っておこう。

4. 要素の追加と選択

要素って何？という方は、"タグ要素" あたりでググってから読んで下さい。でないと鷲獅子様に爪を立てられそうです。Σ(´д` *;)

要素の追加

要素の追加、タグの入力と言ってもいいが、にはいろいろな方法があって、慣れていくより仕方ないと思う。

「挿入」→「HTML 5 Element」

すべてのHTMLタグを挿入することができるが、プルダウンで表示されるタグは数が非常に多いし単にアルファベット順にならんでいるので、選ぶのが面倒だったりする。私はあまり使うことはない。

ツールアイコン

画像(img)、テーブル(table)、リンク(a)、span要素、強調(em)、番号なしリスト(ul)、番号付きリスト(ol)、定義項目(dt)、定義説明(dd)、引用(blockquote) などはツールアイコンで追加したり、セレクトした範囲をその要素に変換して作成することができる。

ブロック要素選択プルダウンメニュー

行をポイントしたり、複数行をセレクトして、段落(p)、見出し(h1〜h6)、整形済み書式要素(pre)、div要素などに変換することができる。

「書式」メニュー

インライン要素は「書式」メニューからいろいろと指定できる。

「挿入」→「HTML」

汎用のHTML入力ダイアログでソース表示モードにしなくてもHTMLを追加・挿入できる。HTML5で廃止されたタグは、ソースモードを使わないならこれで入れるしか仕方ない。

要素選択ツールからHTMLをコピーできるので、ここに貼り付けることもできる。（要素の選択を参照）

要素の選択

要素を選択するには、プレビュー画面の該当部位をポイントしたりセレクトしたりもできるが、下の３つの方法で行うのが確実。正確に要素を選択した上で移動させたり、コンテクストメニュー（右クリック）から削除、変更、要素のHTMLのコピーなどができる。

タグリストバー

ステータスバーに表示されるタグリストバーのタブをクリックすることで要素を選択できる。

タグ・ツリー

DOM Explorerパレットの上にあるタグ・ツリーでも選択できる。

「表示」→「All Tags モード」

タグボタン（黄色いボタン）で選択できるのだが、ダブルクリックしないと選択したことにならないので注意が必要。

5. タグの変更と削除

上に書いた方法で要素を選択したときのコンテクストメニュー（右クリック）から「タグを変更」「タグの削除」「要素の削除」ができる。

タグの変更

ステータスバーに表示されるタグリストバーのタブをつかって変更できる。このときタグ名を入力したらリターンを押さないと変更が完了しない。

DOM Explorer パレットのタグツリーからも行える。

タグの削除と要素の削除

同様に上記と同じコンテクストメニューから「タグを削除」と「要素を削除」ができる。「タグを削除」は選択したタグだけ削除する。「要素を削除」は選択したタグが内包する要素も含めて削除する。

<div>
  <p>...</p>
  <p>...</p>
</div>

<div>を選択した状態で、「タグを削除」するとｐ要素は残るが、「要素を削除」するとp要素も同時に削除されてしまうということ。

6. 属性とインラインスタイルの編集

タグの属性の追加・編集には専用のダイアログもあるし、汎用ツールパネルもある。CSSについては後で書こうと思っているのだが、インラインスタイルということは、<tag style="">という一種のタグ属性でもあるので、ここでも少しだけ触れておこうと思う。

専用のダイアログ

イメージやリンクは新規に追加するときと同じツールアイコンで開かれるダイアログで修正できる。

テーブルはセルなどをポイントしたときのコンテクストメニュー（右クリック）にある「表のプロパティ」から専用のダイアログが開く。

属性パネル

DOM Explorerパレットにある「属性パネル」を使うと、イメージやテーブルも含めて、どんな要素の属性も追加・編集できる。ただし要素に応じて属性名を選択できるほど便利ではなく手入力する必要がある（汗）

インラインスタイルも属性の１つなので、これを使っても編集できる。

意外に自分の意図しない要素の属性を編集してしまったりしやすいので、現在どの要素が選択されているかには注意を払った方がよい。（要素の選択を参照）

スタイルに関しては「属性パネル」の隣にある「インラインスタイル」パネルを使った方が編集しやすいようだ。styeアトリビュートをまとめて入力しようとすると、どうしても長い文字列になるので、CSSのプロパティごとに追加・編集できるこちらのパネルの方が便利だ。

7. id属性やclass属性を利用したCSSの定義

ここからは、id属性やclass属性をセレクタとして利用したCSSを定義する方法を書く。複雑なセレクタ表現には対応していないが、<style>タグや外部CSSファイルを編集できる手書きCSSエディタもあるので、扱おうと思えば可能である。

ただし使い慣れたCSSエディタ持っている人は、なんでもかんでもBlueBriffonでやろうとしなくても、あっさりそれを使った方がよいように思う。BlueBriffonは外部CSSファイルの書き換えが行われるとアラートとともにそれを取り込んでくれるようにできている。

BlueBriffonには有料のCSSスタイルエディターがアドオンとして組み込めるらしいが、使ったことがないのでどれほど使いやすいものか分からない。上に書いたように別のアプリでCSSを編集しても何の不都合もないのであえて導入しなくてもよいと思っている。

CSS定義を埋込みにするかファイルにリンクにするか

CSSを書いたことのある人ならすぐに理解できるが、埋め込みとは下のように<head>部に<style>タグを作ってそこに定義コードを書いていく方法。

<head>
...
...
<style type="text/css">
</style>
<head>

ファイルにリンクするとは<link>タグを書いて外部のファイルを読み込む方法。

<head>
...
...
 <link href="css/style.css" rel="stylesheet" type="text/css">
<head>

これを操作するツールが「スタイルシート」パネルだ。

左のスタイルシートパネルは<style>タグによる埋め込みとリンクするCSSファイルがすでに指定してあり、現在<style>タグによる埋め込みモードであることを示している。 '+' ボタンをクリックすることで、リンクする外部ファイルを追加したりすることのできるダイアログが開く。

要素にid属性やclass属性の追加すると選択

ツールバーの3段目に、id属性やclass属性を追加したり選択したりできる入力フィールド兼プルダウンメニューを使うことでできる。追加する場合はid名やclass名を入力した後リターンキーを押す必要がある。CSSにすでに#id名や.class名で定義されているセレクタがあると選択することができる。

DOM Explorerパレットにある「属性パネル」を使ってもid属性やclass属性を設定することができる。

id、class、tagをセレクタにする

CSSを定義する場合、idを目標にするか、classを目標にするか、tagを目標にするかを指定する必要がある。

まず、要素を選択して、「スタイルプロパティ」パネルの上にある「スタイルの選択先：」というプルダウンメニューから、セレクタとして３つのうちいずれか、もしくはインラインスタイルを選ぶ。セレクタをclass名にすると、class名を手打ちで入力できる（右）

続いて、右の折りたたみ式CSS定義用のツールでプロパティを指定していく。ただこのツールで生成される書式はかなり冗長なので、慣れたら、前々項の「スタイルシート」パネルから直接エディタを開いて手打ちした方が速かったりする。

終わりに

HTMLの初心者はとりあえず「6. 属性とインラインスタイルの編集」までの機能を使って、それなりに行儀のよいHTMLを生成するまでになってもらえたら良いかなと思う。幸か不幸か、BlueGrifffonの癖のせいで、正確に要素を選択するときにどうしてもタグ名を意識しないといけないとか、DOM Explorer の属性指定パネルを使うと、いつのまにかCSSプロパティに関する知識を身につける必要性が出てきたりするので、なんというか良く言えば向上心を煽ってくれるツールと言えそうだ。

7.「id属性やclass属性を利用したCSSの定義」で説明した機能を使えば、CSSの使い回しまでできるようになる。ただし、CSS定義ツールで生成されるパロパティ書式は冗長だし、GUIもそれほど使い易いとも言えないようだ。本格的には別途CSS作成ツールを併用して開発環境を作った方が効率がよくなるようになると思われる。