WYSIWYG形式のWEBオーサリングソフト KompoZer〜KompoZerの使い方

Freesoft Title


Freesoft Zone

kompozer KompoZer

KompoZer 公式ページ

KompoZer ダウンロードページ

KompoZer(コンポーザー)はWYSIWYG(ウィジウィグ)でウェブページが作成できるウェブオーサリングソフト。コンピュータ言語であるマークアップ言語を理解していなくても、ワープロやグラフィックソフトの操作に近い形で視覚的に作業することができる。
一般的にはホームページビルダー、商用ではDreamweaverが有名で、これら有料ソフトと比較するとさすがに機能的には見劣りする部分もあるものの、ウェブページの作成という基本的な部分については遜色がない。

KompoZerはすでに開発が中止となっているMozilla ComposerをベースにしたNvuというウェブオーサリングソフトの後継にあたる。
Mozilla Composerは2006年に開発終了となったインターネット統合ソフトMozilla Suitに含まれており、現在はMozill Suitのである後継インターネット統合ソフトSeaMonkeyの中にComposerが含まれている。ただし、SeaMonkeyのComposerは2006年以降に更新が行われていない。

Nvuからの派生ソフトには正式版をリリースしたBlue Griffonもあり、このアプリケーションは本体のみ無料で、CSSなどの機能を追加するプラグインを有料で提供している。
KompoZerは未だ正式版に至っていないものの、外部CSSなどBlue Griffonで有償の機能も無料で使用できる。


square インストール

インストールに際しての制限に関する記述はなく、WindowsXPでもWindows7(64bit)でも動作する。

kompozer2
ダウンロード

ダウンロードページはStable(安定)版とベータ版が用意されている。

ステーブル版の最新更新日は2007年8月、ベータ版は2010年2月になっている。
ステーブル版はデフォルトで日本語に対応していないため、左図赤線部分から別途日本語ランゲージファイルをダウンロードし、インストールしたKompoZerの所定のフォルダ内に移動しなければならない。

ベータ版は各国語別にインストーラーが用意されているため日本語化の必要がない。

以下はベータ版のインストール手順。

kompozer1

日本語のベータ版はインストーラーとZIPファイルが選択でき、左図赤線部分の「Download」をクリックしてダウンロードする。

以下はインストーラー版。

kompozer3
セットアップ

ダウンロードしたインストーラーを起動すると、左図のように日本語のセットアップウィザードが開始する。

kompozer4

使用許諾書に「同意」して次へ。

kompozer5

インストール先の指定。CドライブのProgram Filesフォルダ以外の場所にインストールする場合は、変更先を指定する。

kompozer6

プログラムグループはデフォルトのまま次へ。

kompozer7

デスクトップのショートカットとクイックランチのショートカット作成を選択。不要ならチェックを外す。

kompozer8

インストール先などを確認して「インストール」をクリックするとKompoZerがインストールされる。


square 使用方法

ベー タ版での大きな不具合はないが、「デザイン」から「ソース」に切り替え、ソースを直接編集した後、デザインに戻った場合にh属性やdiv属性などの切り替 えができなくなるので、ソースの編集はKompoZerではなく、otbeditなどのテキストエディタを使用したほうが良い。、
他にもいくつかのバグと思われる箇所が存在するが、そのような場合は、一旦保存して再度ページを開くか、KompoZerの再起動で解決する。

よ く体裁を整えるために改行<br>を連続で入力してしまいがちだが、<br>の用途としては誤った使い方で、文法チェックなどで は減点の対象になる。KompoZerにはこれらのチェックを行うことも可能で、メニューバーの「ツール」から「HTMLの清書」を選択すると、これらの 部分が修正される。当然、<br>を使用して体裁を整えた箇所は、その体裁が崩れてしまうため要注意。

KompoZerのデザイン編集だけでもある程度のページは作成できるが、メタタグの記述などがないためにどうしても片手落ちの感は否めず、少なからずタグの知識は必要になる。

HTMLタグを網羅しているページ http://www.tagindex.com/html_tag/

HTMLの構文をチェックできるページ http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

kompozer9
設定と基本操作

白紙のページでワープロソフトのように左上にIビームが点滅している状態が初期状態。

設定はほぼデフォルトのままでOKなのだが、ページ作成の前に一応各項目の確認を行う。

メニューバーの「ツール」→「設定」を選択。

kompozer30

全般・フォントなど設定を確認後、「詳細」で左図赤枠部分のアークアップ形式を確認。

言語はHTML4.0またはXHTML1.0に対応しており、いずれかを選択する。
XHTMLはXMLというマークアップ言語を従来のHTMLに取り込んだ新規格で、HTML4.0がベースになっている。

どちらが良いのかと言えば、拡張性の高いXHTMLなのだが、HTML4.0よりも文法が厳しいため、HTML4.0の方が使い勝手が良いように思われる。
一般的にHTML4.0は構文が汚く、XHTMLは美しいらしいが、そのあたりは全く分からないので割愛する。

また、DTDは「文書型定義」で、TransitionalとStrictがあり、Strictは文法に厳しく、Transitionalは若干甘めという設定。
これも底が見えないほど奥が深いため、取り敢えず厳しいよりは若干甘めのTransitionalを選択しておく。

kompozer10

WYSIWYGはWhat You See Is What You Getの略で、ブラウザで表示されるイメージでWEBページの作成が可能になっている。

初めはKompoZerの基本操作に慣れるため、適当な文章を入力してみる。

kompozer11

左図赤枠部分の「ソース」というタブをクリックすると、左図のように入力した文字がHTML(HyperTextMarkupLanguage)で表示される。

WYSIWYGは前述のとおり、「見える状態」で作業するが、その作業は全て左図のようなマークアップ言語に置き換えられている。

そのため極論を言えばHTMLを理解していなくても、最低限のページ作成は可能になる。
ただ、デザイン編集よりもソースを直接編集したほうが効率が良かったり、KompoZerでは編集できない処理も、タグを記述することで可能になるため、基本的なタグはある程度知っておいたほうが良い。

kompozer12

ファイルは左図赤枠の「保存」で文字通り保存する。

kompozer13

新規ファイルを保存する場合は、左図のようにページタイトルの入力ダイアログがでるので、任意のページタイトルを入力する。

このページタイトルはファイル名ではなく、kompozer14ブラウザに表示されたり、GoogleやYahooの検索結果に表示されるものになる。

ページタイトルを入力後にOKをクリックすると、タイトル名と同じファイル名で保存されるが、ファイル名を変更してもタイトルは変わらない。

タイトルには漢字やひらがななどの2バイト文字を使用できるが、ファイル名は必ず半角英数の1バイト文字を使用する。

kompozer15

作成したファイルは完成した時点でアップロードが必要になるため、予めファイル構成を固めておく。

KompoZerで作成したファイルや使用する画像などは、全て1つのフォルダ内に入れておく。
これは画像や各ページなどへ相対パスでリンクするためには必須。

基本的にはホストの初期フォルダ(ルートディレクトリ)の中に、ページの表示に必要な素材などを全てアップするため、フォルダ分けをしっかり行わないと、後からの処理が非常に煩雑になってしまう。

一般的には作成したページそのものを保存するフォルダと素材フォルダを分け、サイトの大きさにもよるがそれらのフォルダを格納したカテゴリー別のフォルダなどで整理する。

このフォルダ名も全て半角英数を使用する。

kompozer16
レイアウトの設定

ある程度の見栄えを考慮して、初めにページの大まかなレイアウトを設定する。

レイアウトは左図赤枠部分の「テーブル」アイコンをクリックするか、メニューの「テーブル」→「挿入」を選択する。

kompozer17

テーブルは左図のように設置するセルの数を指定する。
左図の場合だと縦に2列、横に2列のテーブルが設置される。

テーブルは後からでも追加でき、テーブル内にテーブルを作成することも可能。
また、Excelなどの表計算ソフトと同様、セルの結合もできる。

kompozer18

テーブルを挿入した状態。このセルはマウスカーソルで任意の大きさに拡大縮小が可能。

セルがブラウザでどのように表示されるか確認すkompozer19るには、ファイルを保存した後、「閲覧」アイコンをクリックすると、ブラウザが起動して表示される。

左図の状態では見たまま2重枠線のセルが表示される。

kompozer20

設置したテーブルをダブルクリックするか、メニューの「テーブル」→「テーブルのプロパティ」を選択。
テーブルの詳細設定画面が開くので、「テーブル」タブをクリックする。

左図赤枠部分で枠線の太さ、セルとセルの間隔、セル内の余白を設定する。

基本レイアウトのセルを非表示にする場合は、枠線を「0ピクセル」に設定。
その他の設定は任意の数値を入れ、表示結果を確認しながら指定する。

kompozer21

枠線:0px セル間隔:0px 余白5pxで設定したものが左図の状態。

枠線が実線から赤い点線に変わっている。この状態をブラウザで確認すると入力された文字だけが表示される。

kompozer23

セルの幅は左図青枠部分をスライドして調整するか、テーブルのプロパティで「セル」のタブを選択、「大きさ」の箇所を指定する。

kompozer24

数値を指定する場合は必ず指定する側にチェックを入れる。

kompozer25

セルの結合は表計算ソフトと同様、結合するセルを選択し、左図のように「テーブル」→「選択されたセルを結合」を選択するか、右クリックメニューで「選択されたセルを結合」を選択する。

kompozer26

テーブルの中にテーブルを挿入する場合は、該当のセルをクリックし、通常のテーブル作成と同じ手順で挿入する。

挿入したテーブルもプロパティで枠線や余白の設定が可能。

kompozer27
画像の追加

画像を掲載する場合は、追加したい任意の箇所をkompozer28クリックし、画像アイコンをクリックすると、左図のような画像のプロパティが開く。

予め設置する大きさに加工した画像ファイルをpictフォルダなどに保存し、左図赤枠部分にあるフォルダアイコンをクリックし、保存してある画像を選択する。

その際、「相対URLを使用する」にチェックが入っていることを確認する。
ここのチェックが入っていなければ絶対パスになり、サーバにアップした際にリンクが切れてしまう。

代替テキストは画像を表示できないブラウザなどで表示される画像の説明などを入力する。

kompozer29

使用する画像は予めGIMPなどを使用して大きさを調整した方がファイルサイズが小さくなるため、ページの読み込み速度が向上する。
ただ、配置する画像の大きさは、画像プロパティで任意のサイズに拡大縮小が可能になっている。

左図はサイズを調整した画像を使用するため「実際の大きさ」にチェックが入っているが、拡大縮小する場合は「ユーザー指定」にチェックを入れ、任意のサイズを入力する。

kompozer31

左図赤枠部分は画像に対するテキストの回りこみkompozer32を指定する。文章の配置を「左に回り込む」に設定すると、画像の左側に文章が回り込む。これを「下に揃える」にすると、画像が配置された箇所には文章が入らず、画像の下に文章がくる。

画像に余白や輪郭線を付ける場合は、左図の「余白」という項目に任意の数値を入力する。
ただし、左右余白(HSPACE)と上下余白(VSPACE)はHTML4.01の非推奨設定で、これらはスタイルシートの使用が推奨されている。

非推奨の定義を使用しても問題があるわけではなく、ブラウザでの表示も正しくできる。

kompozer33

画像にリンクを埋め込む場合は、左図赤枠部分にリンク先のURLを入力する。

外部リンクの場合は該当ページのURL、内部リンクの場合は画像挿入と同様、リンク先を相対パスで指定する。

kompozer34
リンクの設定

文章にリンクを設定する場合は、対象の文字列を選択し、リンkompozer35クアイコンをクリックするか、右クリックメニューから「リンクを作成」を選択する。

kompozer36

リンクの設定は、画像にリンクを追加した操作と全く同じで、リンクアイコンをクリックすると、左図のようなリンクのプロパティ画面が開くので、左図赤枠部分にリンク先のURLを指定するだけ。

内部リンク(他のページ)は赤枠部分のフォルダアイコンをクリックして、該当のページを指定すると自動的に相対URLでリンクが作成される。

当サイトでも多用しているが、「リンク先を新しいウィンドウで開く」場合は、「リンクターゲット」の項目にある「リンク先を」にチェックを入れ、「新しいウインドウで開く」を選択して「OK」をクリックする。
ただ、新しいウインドウを開く挙動はユーザーが意図しないため非推奨設定になっており、同一ウインドウ内でリンク先へ移動するのが基本。

kompozer39

同一ページ内でのリンクは「アンカー」を使用する。
リンクをクリックすると、アンカーをつけた文字、または画像などがブラウザのトップにくる。

下記のTOPへというリンクをクリックすると、このページTOPに戻り、トップにあるKompoZerのアイコンをクリックすると、この位置まで戻ってくる。

TOPへ

kompozer41

文字列の場合はアンカーを設置したい文字列を選択、画像の場合は対象の画像をクリックした状態で、ツールバーのイカリアイコンをクリックすると、上図のような「名前付きアンカーのプロパティ」が開くので、アンカーの名称を半角英数で入力する。
当然、アンカーを複数設置する場合は、アンカー名は重複してはならない。

また、アンカーを設置すると、設置した箇所に左図赤枠部分のようにイカリのマークが表示される。

kompozer42

アンカーを設置した場所へのリンクは、通常のリンクと同様、リンクのアイコンをクリックし、文字列なら「リンクのプロパティ」、画像なら「画像のプロパティ」を開き、左図赤枠部分の▼をクリックすると、ページ内に設置したアンカーが表示される。

同一ページ内であれば、リンクは「#アンカー名」になる。
また、他のページから設置したアンカーへのリンクは通常のページへのリンクの後に「#アンカー名」を追加することで可能になる。

kompozer37
文字や背景の装飾

テーブル内のセルの背景色や文字の配置は左図のようにテーブルのプロパティから行う。
左図赤枠部分が背景色、青枠部分が文字列や画像の配置設定である。

kompozer38

また、ツールバーの上図赤枠部分でも文字色と背景色の設定が可能。2色のうち上が文字色、下が背景色で、ぞれぞれクリックするとカラーパレットが開く。
ただし、文字や画像の配置は水平方向のみ、上手青枠部分で「右揃え」「センタリング」「左揃え」の設定ができる。

「A▲▼」は文字の大きさを変更、「B」は太文字、「I」はイタリック体(斜体)、「U」はアンダーラインで、この辺りの記号はビジネスアプリでもお馴染みである。

kompozer46

kompozer43

「!」はタグで言うと「em」、「!!」は同じく「strong」で、強調したいときに使用する。
その左横にある数字の付いたアイコンは「順序付きリスト」で、●の付いたアイコンは「順序なしリスト」になる。

▲が左右に向いているアイコンはインデント設定。

セルの背景色ではなく、ページの背景そのものを編集したい場合は、メニューの「書式」→「ページの配色と背景」を選択すると、左図の画面が開くので、背景画像や配色の指定をする。

kompozer47
スタイルシート

文字の属性を変更するには、左図のようにプルダウンメニューから選択する。

body直下・段落・見出し1〜6などで文書の属性kompozer48が異なり、デフォルトでは見出し1が最もフォントサイズが大きくなっているが、これらはスタイルシート(CSS)で自由に変更できる。

また、見出しは単に文字のスタイルを決めるものではなく、ページ内のタイトル・サブタイトルなど、それぞれの重要性を表しているため、スタイル重視で見出し3の後に見出し2が来るような構文は正しくない。

kompozer49

ス タイルシートとは、フォントの大きさや色、斜体、太文字、背景色や背景画像など、文字通り「スタイル」を定義するもので、例えば段落意味をする< p>タグをスタイルシートで定義すると、<p>タグの使用する箇所は全て同じスタイルになり、ページの構成に統一感がでる。

最も簡単なスタイルシートの設定方法は上図の「CSS」アイコンをクリックし、左図のCSSエディタを立ち上げる。

スタイル規則を新規作成で「指定された種類の全要素に適用されるスタイル」にチェックを入れ、左図下の赤枠部分のリストボックスから定義するタグを選択したら「スタイル規則の作成」をクリックする。

kompozer51

スタイルは左図赤枠部分のメニュータブを切り替えて行う。

テキストタブはフォントの種類とサイズ、装飾、行間隔、文字色などの設定。背景タブは文字通りフォントの背景色や画像を設定。枠線タブはフォントに指定した枠線を表示するなど、ワープロソフトや表計算ソフトなどでも使用している文字の体裁設定が行える。

スタイルを設定したら「OK」をクリックするとCSSエディタが終了する。

kompozer52

再度CSSエディタを立ち上げ、別の要素にスタイル規則を作成する場合は、左図赤枠部分をクリックすると、スタイル規則の新規作成画面に切り替わる。

また、このスタイルシートは「内部スタイルシート」のため、作成したスタイルの規則は全てページ内に記述され るため、複数ページを作成する場合は、その都度スタイルの設定が必要になるが、設定したスタイルを外部に出力し、その設定をページに読み込ますことで、全 てのページで同じ体裁が簡単に実現できる。

kompozer53

内部スタイルシートで設定した規則を外部出力するには、CSSエディタを起動し、左図赤枠部分の「スタイルシートを外部に出力し・・・」をクリックする。

保存先を指定してファイルに半角英数で名前をつけて保存する。当然、ページや画像などと同一のフォルダに保存する。

kompozer54

新規のページに出力した外部スタイルシートを読み込ませるには、左図のように「新しいlink要素」を選択する。

kompozer55

左図赤枠内の「選択」をクリックし、出力したスタイルシートを指定すると、URLの欄にスタイルシートのパスが表示されるので、後は「スタイルシートの作成」をクリックするだけ。

外部スタイルシートを正しく読みこめば、未定義の「内部スタイルシート」の下に、外部スタイルシートのファイル名が表示され、ページにスタイルが適用される。




line