|
ジャンル：Webオーサリング・ソフト 作者：米Linspire社 ライセンス：MPL，LGPL，GPL URL：http://www.nvu.com/ |
日経Linux 2005年10月号，95ページより
Mozillaから生まれたWebオーサリング・ソフト Nvu（下）
日経Linux 2005年10月号，95ページより
 写真4 タグ要素の選択 タグ要素を変更する場合は，文字列を選んでから画面右上の「body直下」を変更する。「見出し1」にすると＜H1＞タグ要素になる。 [画像のクリックで拡大表示] |
 写真5 現在のタグの状態 カーソルのある位置のタグ要素の状態が画面下に表示されている。 [画像のクリックで拡大表示] |
 写真6 タグ要素の属性の変更 タグ要素の属性を変更したい場合は，タグ上で右クリックして「詳細プロパティ」を選択する。例えば，文字列の配置の変更などが行える。 [画像のクリックで拡大表示] |
 写真7 画像の張り付け Webページに画像を張り付けるには，ファイル・マネージャから画像をドラッグ・アンド・ドロップをするか，ツール・バー上の［画像］ボタンをクリックして画像を選択する。 [画像のクリックで拡大表示] |
 写真8 ハイパーリンクの設定 ツール・バー上の［リンク］ボタンで，Webページを移動する際に利用するハイパーリンクを作成できる。 [画像のクリックで拡大表示] |
 写真9 スタイル属性でCSSを編集する 画面下部のタグ上で右クリックし，［インラインスタイル指定］から設定したいスタイルを選択することでCSSを編集できる。 [画像のクリックで拡大表示] |
 写真10 ヘッダーや別ファイルでのCSS編集 メニューから［ツール］-［CSSエディタ］を選択することで，CSSを編集できる。CSSファイルを作成して＜h1＞タグに関するフォントを設定している例を示した。 [画像のクリックで拡大表示] |
 写真11 Webページの公開 「公開」ボタンをクリックすると，作成したWebページをFTPサーバーにアップデートできる。 [画像のクリックで拡大表示] |
 写真12 拡張機能の追加 Nvuでは拡張機能を追加することで新しい機能を利用できる。写真はJavaScriptの作成を支援する「Javascript Debugger」拡張機能。 [画像のクリックで拡大表示] |
Webページを編集する
Nvuを起動すると，画面右に編集用Webページがあらかじめ用意されている＊3。ここにWebページの内容を記述する。ワープロ・ソフトのように，文字を入力してから，そのサイズや色などを変更し，配置を決めていく。
WebページはHTMLで記述されており，タグと呼ばれる構造を表す記号で文字列などをくくりながら記述する。Nvuではタグを書き込まなくてもタグ要素を付け加えられるようになっている。
例えば，タイトル見出しを表す場合は＜h1＞タグを利用することが多いだろう。ある文字列を＜h1＞要素にしたい場合は，変更した文字列を選び，画面右上の「body直下」を「見出し1」に変更すればよい（写真4[表示]）。変更すると，文字列の大きさが変わり，画面下のステータス・バーに「＜body＞ ＜h1＞」のように＜h1＞タグ要素が追加される（写真5[表示]）。
同様に，本文は「段落（＜p＞タグ要素）」，囲みといったブロックは「汎用ブロック（＜div＞タグ要素）」を選ぶとよい。
各タグ要素に属性を付けたい場合は，画面右下に表示されたタグ上で右クリックして「詳細プロパティ」を選択する（写真6[表示]） 。
画像を張り付ける
Webページに写真などの画像を掲載したい場合は，画像をファイル・マネージャのNautilusなどから張り付けたい場所にドラッグ・アンド・ドロップする。ファイル・マネージャを利用して画像を張り付けられない場合は，ツール・バー上にある［画像］ボタンをクリックして，「画像のURI」に張り付けたい画像を指定する（写真7[表示]）。
張り付けた画像には画像の四隅にハンドル（白い四角）が付く。ハンドルを操作することで，画像サイズを変更できる。
リンクの作成方法
Webの使い勝手を決めるのがハイパーリンクだ。ハイパーリンクをクリックすることで異なるWebページに移動できる。HTMLでは＜a＞タグ要素で記述される。
Nvuでハイパーリンクを作成するには，リンク元にしたい文字列や画像などを選択してから，ツール・バー上にある［リンク］をクリックする（写真8[拡大表示]）。表示されたウインドウの「リンク対象」にシンボリック・リンクを張るWebページのURLを記述する。
設定ができたら［OK］ボタンをクリックしよう。設定した文字列などをクリックすると，他のWebページに移動できるようになっている。
CSSを編集する
HTML4.0規格ではHTMLで文書の形態を記述し，フォントや色といったデザインに関する設定はCSSに任せる仕様になっている。
NvuでCSSを扱う場合，3通りの方法がある。（1）各タグ要素内にスタイル属性を記述する方法，（2）HTMLのヘッダー部分に記述する方法，（3）CSS用に別ファイルを用意する方法である。
タグ要素にスタイル属性を記述するには，画面下部に表示されているタグ上で右クリックし，［インラインスタイル指定］から設定したいスタイルを選択する。例えば，＜h1＞タグのフォントの大きさを変更したい場合は，＜h1＞上で右クリックし，［インラインスタイル指定］-［文字列のプロパティ］を選択する。次に表示されたウインドウ内の「フォントサイズ」を変更すればよい（写真9[表示]）。
CSSをHTMLのヘッダー部分に記述する場合は，メニューから［ツール］-［CSSエディタ］を選択する。画面右下にある「新しいStyle要素」を選択するとCSSがヘッダー部分に記述される。その代わりに「新しいlink要素」を選択すると，CSS用のファイルが作成される。
その後，「新しい規則」ボタンをクリックしてから，それぞれの要素に対するスタイル・シートを記述する（写真10[表示]）＊4。
Webページを公開する
Webページの編集が終わったら，各ファイルをアップデートしよう。アップデートは，ツール・バー上にある［公開］ボタンをクリックするだけだ。公開情報を決めるウインドウ（写真11[表示]）が表示されたら，「ページタイトル」にWebページの任意のタイトル名，Webページの「ファイル名」を入力する。
画像ファイルなど，HTMLファイル以外のものがWebページに配置されている場合は，「画像などの関連ファイルも含める」にチェックしておくと，Nvuが必要なファイルを同時にアップロードしてくれる。
最後に「公開」ボタンをクリックすると，実際にFTPサイトの各ファイルがアップロードされる。Webブラウザを利用してWebサイトのURLにアクセスすれば，Nvuで作成したWebページが確認できる。
ファイルをアップデートすると，画面右にある「Nvuサイトマネージャ」にファイルが一覧表示される。ファイルを編集したい場合は，表示されたファイルをダブル・クリックすればよい。すると，自動的にFTPサイトからファイルをダウンロードし，編集できる。
拡張機能を使う
Nvuは，Firefoxなどで有名な拡張機能を備える。Webページに公開されている拡張機能（xpiパッケージ）を入手し，インストールすることでさまざまな機能を追加できる。
現在，Nvu向けに公開されている拡張機能は，NvuのWebサイトのダウンロード・ページにアップロードされているものがほとんどだ。パッケージを入手し，メニューの［ツール］-［拡張機能］でインストールすると拡張機能が利用できるようになる＊5。
例えば，JavaScript Debuggerを追加した場合は，メニューから［ツール］-［Web開発］-［JavaScript Debugger］を選択するだけで，JavaScriptの作成を支援するツールが利用できる（写真12[表示]）。
拡張機能のほかに，Nvuのデザインを変更できる「テーマ」も利用可能だ。これもFirefoxの機能と似ているので，簡単に操作できるだろう。
