ステップ03. ソフトの画面解説
-
これが最初にKompoZerを起動したときに表示されるメインインターフェイス画面。
どう？初めて見てみた印象は。
-
なんだか、いろんな名称がついたボタンが並んでいますね！
公開、画像、テーブル・・・・
手前にあるウインドウは何ですか？
-
これはKompoZerの起動時に毎回表示されるヒント集だね。KompoZerの各種操作に関する説明が毎回違った形で見ることができるよ。
-
それは毎回必ず読まなければいけないんですか？
-
いちいち表示されるのがジャマだって思ったら、「一言を起動時に表示する」のチェックボックスをはずせば次から表示されなくなるよ。とりあえず、今はこのヒントに用はないから、xボタンを押して閉じてしまおう。
-
じゃ、KompoZerのユーザーインターフェイスの説明を大雑把にしようか。KompoZerの画面は、以下の図のように、それぞれの異なる作業領域やボタンのセットで構成されているんだ。
-
他の多くのソフトウェアと同様に、すべての機能は、一番上のメニューからアクセスできるようになっているんだけど、特に、その中でも頻繁に使用される機能類は、それぞれツールバーにまとまっていて、使用したいときに簡単にアクセスできるように配置されてるんだな。
基本的に、このツールバーの機能を覚えれば、ホームページを作成がすぐできるようになるはずだよ。
-
それぞれのツールバーの中にもボタンがたくさんあって、覚えるのがとても大変そうに思えます・・・
-
まあ、ボタン類の詳細は今後実際に作成しながら覚えればいいよ。今回は、それぞれのツールバーの役割と各作業画面の説明だけ簡単にしておくから、適当に記憶にとどめておいてね！
KompoZerの作業画面
-
さあ、最初に作業画面についての解説をしようかな。
このウインドウ中でひときわ大きな場所をとっているエリア、一瞥しただけで何に使うのか、大体予想できると思うけど、どう？
-
はい。テキストなどを入力する場所ですよね？
-
その通り。テキストや画像などを配置して、ホームページを作成するときのメインの作業スペースになるのがこのエリアなんだ。文章を入力するだけなら、Windowsに付属のメモ帳なんかと同じように打つことができるよ。なんかためしに入力してみれば？
-
はい！ではこの不肖フォックすけが、文章を入力させていただきます！
-
たかがテキスト打つのに大げさだね～
・・・・
-
・・・・そういえばさ、
私、ちょっと心配なんだけど、
-
はい？どうかしましたか？
-
あんたそんなゴムマリみたいな手で、
どうやってタイピングするのよ。
-
ひ・・・酷いです！タイピングぐらいちゃんとできますよ！ほら。（カタカタカタカタ）
-
おお～ すごいじゃん！
ドラ○もんの手みたいで便利だね。
さすがタヌキどうしのことだけはあるよ！
-
どっちも、タヌキじゃ・・・・
-
いや～ さすがにキーボード打てなかったら、そこで話が終了しちゃうから、おねーさんどうしようかと思ったよ。
ま～世の中、人差し指だけで、とんでもない速度でタイピングするオジさんとかいるもんね。
-
た・・・ためしに文章を打ってみました。
読んでみてください。
-
ちゃんと打ててるね。普通にEnterキーで改行もできて、メモ帳と変わらないでしょ。
じゃあもっと複雑なことは、後で実際に作りながら覚えることにして、次にいってみよう！
-
な・・・内容も読んで・・・
KompoZerの各ツールバー
編集ツールバー
-
次に説明したいのが、この編集ツールバー。KompoZerのウインドウの一番上の方に位置してるやつだけど、ここにはKompoZerの操作の中でも、特に頻繁に使う機能がボタンとしてまとめられてあるんだ。
-
大きくて分かりやすいアイコンが並んでいるんですね。ボタンの下に名前が書いてあります。新規作成、開く、保存・・・・
-
うん。それぞれのボタンの名前は下に表示されているし、マウスカーソルをボタンの上にしばらく放置しておくとそれぞれのボタンの簡単な説明がポップアップで表示されるようになってるよ。
-
ファイル操作や画像の挿入、リンク、表の作成とかを行うときに一押しで実行できる手軽なボタン群だということをここでは覚えておいてね。
-
はい！
-
次に説明したいのは、書式ツールバー。
これは、作業画面に入力した文章の書式を変更するための機能がまとまっているツールバーだよ。
書式ツールバー
-
書式というと、文章の見栄えのことですよね。
文字の大きさ、色・書体や、文章の方向とか・・・
-
そうだね。このツールバー中のどのボタンやドロップダウンメニューも、全部文や文字の見栄えを設定するためのもので、
たとえば、入力した文字を拡大したいと思ったら文字サイズ拡大ボタンを押す、字体をイタリック体にしたいと思ったらイタリック体のボタンを押すという風に簡単に書式設定ができるようになっているんだ。
-
そういうのって、普通のワープロソフトなんかにもある機能ですよね。
ボクもそういったソフトで文章を作成したときに書式設定を使ったことがあります。
-
そうだね。このツールバーを使えば、文章をワープロ感覚で簡単に見栄えよくすることができるわけ。
このツールバーも、上にマウスカーソルをしばらく置けば、簡単な説明を表すポップアップが表示されるよ。
-
次はタブブラウザツールバーの説明をしよう。
このツールバーの解説の前提としてひとつ断っておくと、KompoZerでは複数の文章ファイルは別々のウインドウでは編集せずに、ひとつのウインドウで一括して編集する仕様になっているんだ。このことは知っておいてほしい。
-
え、それってどういうことですか？
-
つまり、ひとつの文章ファイルの作成中にまた新しいファイルを新規作成すると、新しいKompoZerのウインドウが開かれるのではなくて、同じウインドウ中で編集できるようになるってこと。
-
でもそれって、ウインドウの中身が様々なファイルでごちゃごちゃになってしまうのではないでしょうか。
-
ううん。大丈夫。KompoZerではその複数の文章をタブによって管理していて、ひとつの編集中の文章から別の文章に、簡単に切り替えることができるようになっているんだよ。
Firefoxのようなタブブラウザでも、複数のページをタブによって管理するでしょ。
-
はい。そうです。そうすることで、デスクトップ上が閲覧中のページのウインドウであふれかえることがなくて、操作感も向上するんです！
Firefoxのタブ
-
ちょうどそれと似たような扱いをするんだね。
その切り替え用のタブがまとまっているのが、作業画面の直上にあるこのタブブラウザツールバーになるんだ。
タブブラウザツールバー
-
なるほど！
このタブをマウスのクリックで切り替えて、編集したいファイルの選択を行うんですね。
-
うん。閉じたい文章ファイルがあったら、タブを選択して、左側にある×ボタンをクリックすれば閉じることができるよ。
-
タブのタイトルの左側に表示されている赤いフロッピーディスクのアイコンは何を表しているんですか？
-
それはファイルを編集した後、未保存の状態だったら表示されるアイコン。そのアイコンが表示されているファイルを閉じようとすると、ファイルを保存するかどうかの確認ダイヤログが表示されるようになっているから、データを保存し忘れる心配がなくなるわけ。
-
最後に編集モードツールバーと、ステータスツールバーの説明をしよう。
編集モードツールバー
ステータスツールバー
-
この2つのツールバーは、主にHTMLのソース編集をするときに使用するものだから、HTMLの知識がない場合はほとんど使う機会がないと思う。だから機能の概略だけを説明しておくにとどめておくね。
-
前にホームページのページファイルは、HTMLという言語で制作されていて、そのソースを編集してサイトを制作しているって話をしたけど、覚えてるよね。
-
はい。ウェブブラウザでそのソースファイルを直接閲覧する方法もあるんでしたよね。
HTMLコード
-
繰り返しになるけど、KompoZerやその他の市販のホームページ制作ソフトでは、ページを制作するためにそのHTMLを直接ユーザーが編集する必要なしに、作業画面からワープロのように直感的にインターフェイスを操作して制作することができるんだったね。
-
でも、これらの制作ソフトでも、普通のテキストエディタを用いたときのように、直接ソースファイルを編集することもできる機能を備えているんだ。
その編集モードを切り替えたいと思ったときに使うのが、この編集モードツールバーってわけ。
-
このツールバー上の「通常」のタブが、今まで前提としてきたワープロ感覚で編集できるモードなんですね？
-
その通り。その他の「HTMLタグ」と「ソース」の2つのモードが、HTMLを編集するためのモードなんだ。 この2つのモードの違いは、「HTMLタグ」モードのほうはすべてのソースが表示されるわけではなくて、タグが視覚的に表示されるようになっている簡略版になるという点だよ。
-
いずれのモードも、HTMLを知らない初心者の人には使う機会がないものだけど、
次の「プレビュー」モードは頻繁に使う可能性の高いモードだから、これだけは使い方を覚えておく必要があると思う。
-
そのプレビューモードとは・・・？
-
プレビューモードは、作成したページがFirefoxやIEなんかのウェブブラウザで実際に見たときにどのように表示されるかを確認したいときに使うモードだよ。
-
つまり、このモードにすれば、外部のブラウザを起動して、作ったページを閲覧してみるのと同じことができるんですね？
-
そう。ちょっと表示を確認してみたいってときなんかに、別のソフトをわざわざ立ち上げる手間を省くことができるという利点があるんだ。
-
ちなみに、KompoZerの「通常」モードで編集中のページは、ブラウザで実際に表示されることになるページと普通は大きな見た目上の違いは起こらないんだけれども、一応確認のために作成したページをプレビューモードやブラウザでチェックしておく習慣はつけておいたほうがいいよ。サーバーにアップして他人に公開する前なんかは特にね。
-
「普通は」というと、KompoZerの編集画面と実際に作成されたページの表示が異なることがあるのですか？
-
うん、実はそうなんだ。これはKompoZerに限らずに、WYSIWYG型のオーサリングソフトの宿命みたいなものでもあるんだけど、編集画面とブラウザでの表示が異なることは稀に起こることだよ。
-
なにせ、本来は構造化や表示だけの目的で書かれるHTMLやCSSをユーザーがグラフィカルインターフェイスを使って編集しようってのがこの手のソフトの目的なもんだから、きちんとスタイルシートを用いた場合なんかは、ソフトによってはまともに表示すらされないことすらある。
-
そんな・・・ちゃんと表示してくれなきゃ困るじゃないですか！
ソフトを使う意味がなくなってしまいます。
-
そうだね。逆に言えば、きちんと編集画面で表示されるかどうかが、オーサリングソフトの完成度のひとつの指標になるってことだろうけど、果たしてKompoZerの場合はどうだろうね？
ためしに編集モードとプレビューモードの表示の違いを見てみようか。下が各モードの表示の違いだよ。ついでに前出のタグモードとソースモードも載せてあるから参考にしてね。
通常モード
プレビューモード
HTMLタグモード
ソースモード
-
通常モードとプレビューモードとで、表示にほとんど違いはないです！
-
そうだね。つまり、KompoZerで制作したページは、ほとんどが問題なくそのままブラウザでも表示させることができるってことだね。
-
でも・・・ひょっとして、そういったことって、制作ソフトでは当たり前ではないんですか？
特に市販のソフトウェアなら、全部ちゃんと表示されないなんてことありえないと思います。
-
実はこれが全然当たり前のことじゃないんだな～
実例見てみる？
-
以下は、あんたがさっきからしきりに欲しがってた某社のホームページビ○ダーの2008年現在の最新バージョンのスクリーンショットだよ。体験版のだけどね。
クリックで拡大
-
あわ・・・あわわ・・・
表示がおかしい・・・
-
ね？最新バージョン以外ならもっと酷くて、とても見たままの編集なんかできなくなっちゃうんだけど、市販のソフトですらこんな有様なんだから、KompoZerの解釈能力の高さが分かるでしょ。Dreamweaverでも、ちょっとバージョンが古いものだとまともに表示されないよ。
-
ほ・・・ほんとだ。フリーソフトなのに、KompoZerってすごいんですね。
でも、1万円もするソフトって、一体何が優れているのでしょうか・・・分からなくなってきちゃいます。
-
まあ市販品は市販品で、色々と高機能にはできているんだけどね～
でもそれは逆に言えば、余計な機能ばかりたくさんつけて、付加価値をあげてるだけともいえる。
早い話が、それらの多くは無くても全く問題ないんだ。また使用者が使いこなせないことにも繋がってしまう。
-
しかも、ウェブの黎明期のころとは違って、今では必要ならそれらの機能ですらウェブサービスや高機能なオープンソースのソフトウェアを使って簡単に実現できたりするからね。
特にお金かけることないのがわかるでしょ。
-
すごい時代になったものです。
でも、元々インターネットもオープンな技術の集大成。その流れから言えば、サイトの制作もフリーでできて当然なのかもしれません。
-
今までの説明で、KompoZerがどんなソフトかってことが、なんとなく把握できたかな。
じゃ、いよいよこのソフトを使って、ウェブページを実際に作ってみようか。
-
はい。やりましょう！
