14.2. イメージマップ...
| 14. ウェブフィルタ |

### 14.2. イメージマップ...

感応画像はウェブページ内の特定の領域にマウスポインタをかざしたとき何らかの反応を起こすしかけを作るときよく使われます。 なかでも感応画像の一部にリンクを張り、 クリックされると他のウェブページを開くようにする用途はすぐ思い付かれることでしょう。 このフィルタを使えば一枚の画像の特定の部分だけが感応するように画像を簡単に加工できます。 同様の機能はウェブデザイン専用ソフトにも標準的にありますが、 GIMPを使っても同じことができるわけです。

#### 14.2.1. 概観

イメージマップ... プラグインは画像を思いのままに区切る創造的な作業を視覚的に分かり易く親切にお手伝いします。 こうして設定した領域の情報を反映した、 HTMLコードにすぐ埋め込める適切なHTMLのタグを書き出してくれます。 さらにリンク部分をマウスオーバーなどに反応させるいろいろな動作設定も可能です。

このツールはこのてびきの1ページで説明し尽くすには複雑過ぎます。 なにしろこの用途では専用のウェブページ作成アプリケーションとほぼ同等な機能がついているからです。 ともかく最新の活用法のいくつかをここで紹介することにしましょう。 すべてを詳細に網羅した説明が必要なら、 Grokking the GIMP [GROKKING02] をご覧ください。

#### 14.2.2. フィルタの呼び出し方

画像ウィンドウのメニューより フィルタ → ウェブ → イメージマップ...

ウィンドウが小さければ大きくして使ってください。 とくに大事な部分はつぎのところです。

- 左端の辺で縦に並ぶアイコンはそれぞれ、 一番上の矢印がポインタ、 つぎの青い3つのボタンは形の異なる領域選択ツール、 5番目のボタンは領域の属性設定、 そして最後のゴミ箱アイコンボタンは選択された領域を撤去するはたらきがあります。 なおこれらの機能はすべてこのダイアログの マッピング メニューからも呼び出せます。

- アイコンの右隣は元画像が表示されており、 ここでいろいろな図形領域をツールを使って描きます。

- さらに右側にはアイコンが縦に並んでいます。 ダイアログの右側に表示されている領域の一覧表に関わる操作ができます。 それぞれのはたらきはアイコンを見れば想像できますが、 ポインタをかざすと現れるツールチップが機能の説明をします。

- そして最も右端の区画は作成された領域の属性情報を表示する一覧表です。 ここに並ぶ項目はクリックして選択すると左側の画像表示でそれに対応する領域が選択されます。

#### 14.2.3. オプション

図16.326 イメージマップフィルタのオプション

Image Map ウィンドウ

##### 14.2.3.1. メニューバー

このメニューバーは画像ウィンドウのメニューバーと似ていますが、 メニューの見出しや項目がところどころ異なっています。

ファイル
  保存...; 名前を付けて保存...

    他のフィルタは画像を生成するのにこのプラグインだけは画像を加工せずテキストファイルを生成します。 つまりこのダイアログで行なった操作の成果はテキストファイル形式で保存することになります。

    | ティップ
    ダイアログのメニューより 表示 → ソース... と進むとプレビューウィンドウが現れ、 現在の設定を反映したテキスト形式のタグ情報が表示されます。

  開く...

    このプラグインは保存されているテキストファイルを開いて使えます。 そのファイルで定義されている領域が読み込まれ元の画像と領域に重ねて表示されます。 ファイル作成時とは異なる画像が開かれていたり、 画像の寸法が変わっていた場合にはサイズを合わせるかどうかGIMPが質問します。

編集
  エリア情報を編集...

    図16.327 各領域を設定するダイアログ

    この「領域 #`n` 設定」ダイアログは選択されている領域の情報を編集するときに使います。 またこのダイアログは領域を新たに作成したときには自動的に開かれます。

表示

  このメニューの内容は独特なので詳しく説明します。

  エリアリスト

    Here you can hide or show the selection area.

  ソース...

    現れ出るウィンドウでファイルに保存もしくはファイルから読み込まれる生データが見られます。

  カラー, グレー

    ここで画像表示モードを切り替えるとプレビュー区画の表示が白黒グレースケールにも変えられます。

マッピング

  めったに使わないメニューかもしれません。 というのもツールを呼び出すなら作業区画の左隣のアイコンをクリックした方が手早く簡単だからです。

  矢印

    ここでの矢印とは移動ツールのことです。 このツールを呼び出したら領域を選択したりその領域を移動したりできます。

    多角形の領域ではその角を示す赤いコントロールポイントを矢印ツールで移動できます。 またポイント間の線分を 第2ボタン でクリックすると現れるメニューには、 線分上に新たなポイントを追加するコマンドなどがあります。 またポイントは 第2ボタン でクリックすると削除できます。

  矩形, 円, 多角形

    ここらのツールは皆いろいろな形の領域を作成するのに使います。 ツールを呼び出したらプレビュー画面でクリックし、 他の位置でさらにクリックという操作です。 多角形はクリックするたびにポイントが増えてゆきますが、 ダブルクリックすれば領域作成が終わり属性情報のダイアログが開きます。

  マップ情報編集...

    図16.328 「このマップファイルに対する設定」ダイアログ

    これは生成されるテキストファイルに書き込まれる僅かな項目を満たすための単純なダイアログです。 作者 と 説明 でコメントが付記できます。 HTMLタグの属性情報は 画像名 と タイトル と デフォルトURL にそれぞれ指定してください。 マップファイル形式はウェブページを置くウェブサーバの一部の機能に依存する NCSA や CERN よりも、 ほぼどんなウェブサーバでも利用可能な CSIM をお勧めします。

ツール

  ツール メニューを使えばガイドの表示ができ、 きっちり大きさや間隔を整えて矩形領域を描けます。

  グリッド; グリッド設定...

    図16.329 「グリッド設定」ダイアログ

    ここではグリッドを表示するかしないかを選びその姿の種類を選べるほか、 間隔やオフセットが設定できます。 [なおこれらの項目はどういうわけかグリッドにスナップさせる グリッドに付ける を有効にしなければ定義できません。]

  GIMP のガイドを使う...; ガイドの作成...

    ガイドは画像の辺境に作成されますがGIMPのガイドに少し似てそれぞれの線の赤い正方形ポイントをクリックしてドラッグすれば移動できます。 ガイドを使えば画像上に活性化した矩形を作成できます。

  ガイドの作成...

    図16.330 「ガイド作成」オプション

    ガイドのオプション

    活性領域を作成する方法として図形を作成する代わりに、 ガイドの作成... を呼び出すとできる升目状に並んだ矩形を任意にクリックして領域を作成する方法があります。 ダイアログが開かれますので、 升目の高さと幅や互いの間隔を定め、 縦や横の方向にそれぞれ並ぶ数と、 左上の升目の座標を設定できます。 寸法はいずれもピクセル単位です。 実行後も気に入らなければまた赤い正方形ポイントを移動すれば調節できます。

##### 14.2.3.2. ツールバー

ここに並ぶ機能はほとんどが既に上述したものばかりですが、 2つだけ残っています。

前面に移動; 背面に移動

  右の一覧表で領域の項目の順序を変えます。 「前面に移動」で一覧表の一番下に、 「背面に移動」で一覧表の一番上に移動します。 ややこしい。

##### 14.2.3.3. 作業区画

図16.331 作業区画

イメージマップウィンドウの主要部左側は作業区画です。 ここで適宜ツールを使ってあらゆる領域をいろんな形に作成します。

作業区画の左隣にはアイコンが縦に並んでおり、 一番上は指摘や変形を司る矢印、 そのつぎの3つは図形別の領域作成、 続いて領域の属性情報の編集、 最後には選択した領域を撤去するアイコンです。 いずれのツールも マッピング メニューからでも呼び出せます。

| 注意
領域が重なり合ってはいけません。

##### 14.2.3.4. 選択範囲の一覧表

作業区画の右側には作成された領域のそれぞれの属性情報を示す一覧表があります。 ここで項目をクリックして選択すると連動して作業区画上の領域が選択され、 加工ができます。

一覧表の左隣には縦にアイコンが並んでいます。 使い道は明らかですがアイコンにポインタをかざすとツールチップでその機能の説明が現れます。

上下のボタンは一覧表で項目を移動するためのものですが、 残念ながらどちらも機能しません。 しかし当然ながら領域は重なり合わないよう慎重に作図されたはずですので、 結局のところこの機能はいらないでしょう。

14. ウェブフィルタ |  | 14.3. 半統合