Webオーサリングツールとグラフィック作成ツールとの連携

Size: px

Start display at page:

Download "Webオーサリングツールとグラフィック作成ツールとの連携"

しなつにかどり
5 years ago
Views:

1 Web オーサリングツールとグラフィック作成ツールとの連携玉置一雄早川正人工学研究科工学部技術部電子情報技術系はじめに今日インターネットの教育研究への利用頻度は, ますます増大しつつある. インターネット活用により, 大学院大学の活動内容や募集要項等を世界的に発信していく必要性が高まってきている. ハイレベルでアトラクティブな Web ページが作成できたなら, パンフレット, 雑誌広告やテレビ CM 等の他の広告媒体とは比較にならない効率の良さで目的を実現できるものと思われる. これを達成するために, 表現力豊かでインタラクティブな魅力あるコンテンツを作成しようとするものである. 本研鑽では, その第一弾としてインタラクティブなグラフィック作成ツールと,Webオーサリングツールの両者を連携させたWebサイトを構築するための知識を習得したので報告する. イメージファイルのバッチ処理すべてのイメージファイルに同じ調整が必要な場合, イメージファイルをバッチ処理することによって各々のファイルを変更する時間を短縮することができる. バッチ処理機能は, サムネイルの作成に便利であり, 最適化設定を複数のファイルに適用することもできる. またバッチ処理の設定を保存しておくと,Fireworks アイコンにドラッグ & ドロップするだけでスクリプトが実行できる. バッチ処理からイメージの最適化までの作成手順を表 1に示す. 表 1 バッチ処理からイメージの最適化までの作成 1.Fireworks でバッチ処理を選択して, 処理するすべてのファイルを選択する. 2. ダイアログボックスを使用して, ファイルの拡大縮小とファイル名を変更する. 3.[ オリジナルファイルと同じ場所 ] オプションを選択して, バッチ処理を開始する. 4. 新規作成を選択し, ダイアログボックスで幅高さキャンバスカラーを設定する. 5. 現行フレームの後に, イメージファイルを格納する複数のフレームを挿入する. 6. 各フレームをダブルクリックして, 表示されるテキストボックスに名前をつける. 7. 各フレームにバッチ処理したファイルを読み込んで,[ イメージプレビュー ] する. 8.[ フレームをファイルに変換 ] を選択し, 最適化されたイメージファイルを書き出す.

ジョイントロールオーバージョイントロールオーバーは, ポインタが Web オブジェクトをロールオーバーすると, 別の Web オブジェクトの下にあるイメージを入れ替えるものである. ロールオーバーされるイメージをトリガイメージ, 変更するイメージをターゲットイメージとする.

図 1に示すようにビヘイビアハンドル ( 十字を丸で囲んだ記号 ) を用いて, トリガイメージを選択すると, すべてのビヘイビアの関連付けが青色で表示される. 表 2 ジョイントロールオーバーの作成 1. トリガイメージにスライスを割り当てる. 2.[ フレームの作成複製 ] ボタンをクリックして, 新規フレームを 2 つ作成する.

2 ジョイントロールオーバージョイントロールオーバーは, ポインタが Web オブジェクトをロールオーバーすると, 別の Web オブジェクトの下にあるイメージを入れ替えるものである. ロールオーバーされるイメージをトリガイメージ, 変更するイメージをターゲットイメージとする. 表 2に, ジョイントロールオーバーの作成手順を示す. ジョイントロールオーバーは, スライス処理によりいくつかのセグメントに分割され, 独立したファイルとして書き出される. 図 1に示すようにビヘイビアハンドル ( 十字を丸で囲んだ記号 ) を用いて, トリガイメージを選択すると, すべてのビヘイビアの関連付けが青色で表示される. 表 2 ジョイントロールオーバーの作成 1. トリガイメージにスライスを割り当てる. 2.[ フレームの作成複製 ] ボタンをクリックして, 新規フレームを 2 つ作成する. 3. 各フレームにイメージを配置する. 4. ターゲットイメージにスライスを割り当てる. 5. トリガスライスのビヘイビアハンドルをターゲットスライスにドラッグする. 6.[ スワップイメージ ] の [ 入れ替えるイメージ ] からフレームを選択する. 7.[ プレビュー ] ボタンをクリックして, ジョイントロールオーバーの表示を確認する. 図 1 スワップイメージビヘイビア ( ジョイントロールオーバー )

ホットスポットとイメージマップインタラクティビティを持つ大きなグラフィックを小さく分割して, グラフィックの領域をリンクすることができる.

イメージマップを書き出すことにより, ホットスポットとリンク先のマップ情報を含むグラフィックと HTML ファイルが作成される.

[ 編集 ]-[ 挿入 ]-[ ホットスポット ] を選択して, ホットスポットを挿入する. 2. ステータスバーのメッセージ, ポップアップメニュー, 代替テキスト等を設定する.

3 ホットスポットとイメージマップインタラクティビティを持つ大きなグラフィックを小さく分割して, グラフィックの領域をリンクすることができる. グラフィックにホットスポットを挿入して,Web ブラウザで機能するようにイメージマップを書き出す必要がある. イメージマップを書き出すことにより, ホットスポットとリンク先のマップ情報を含むグラフィックと HTML ファイルが作成される. ホットスポットとイメージマップの作成手順を表 3に, 東山キャンパスマップを利用したホットスポットの関連付けを図 2に示す. 表 3 ホットスポットとイメージマップの作成 1.[ 編集 ]-[ 挿入 ]-[ ホットスポット ] を選択して, ホットスポットを挿入する. 2. ステータスバーのメッセージ, ポップアップメニュー, 代替テキスト等を設定する. 3. グラフィックを最適化し,[HTML とイメージ ] を選択する. 4.[ サブフォルダにイメージを置く ] をチェックして,HTML ファイルを書き出す. <IB 電子情報館 > < 中央図書館 > ホットスポットの関連付け : 青色のビヘイビアライン <インキュベーション > 図 2 イメージマップ ( 東山キャンパス西側 )

ナビゲーションバーナビゲーションバーは,Web サイト全体で共通のものが使用され, サイト内のどの場所にいても同じナビゲーションを提供する.

オリジナルボタンシンボルを変更することで, 自動的にナビゲーションバーのすべてのボタンインスタンスに適用される.

ボタンシンボルを作成して,[ ライブラリ ] パネルからインスタンスをドラッグする. 2. ボタンインスタンスを選択して,[ 編集 ]-[ クローン ] を選択する. 3.

ヒット領域は, ボタンのスワップ領域でもあり, 各ボタンの状態を変更する範囲である.

4 ナビゲーションバーナビゲーションバーは,Web サイト全体で共通のものが使用され, サイト内のどの場所にいても同じナビゲーションを提供する. ボタンエディタでボタンシンボルを作成した後, ワークスペースにシンボルのインスタンスを配置する. オリジナルボタンシンボルを変更することで, 自動的にナビゲーションバーのすべてのボタンインスタンスに適用される. ナビゲーションバーの作成手順を表 4に, ボタンの状態 ( アップオーバーダウンオーバーダウンヒット ) を図 3に示す. 表 4 ナビゲーションバーの作成 1. ボタンシンボルを作成して,[ ライブラリ ] パネルからインスタンスをドラッグする. 2. ボタンインスタンスを選択して,[ 編集 ]-[ クローン ] を選択する. 3.Shift キーを押しながらボタンをドラッグすることで縦横が整列する. 4. 各インスタンスを選択して, 固有のテキスト URL 等のプロパティを割り当てる. ヒット領域は, ボタンのスワップ領域でもあり, 各ボタンの状態を変更する範囲である. 図 3 4 つのボタンの状態とボタンのアクティブ領域ポップアップメニューポップアップメニューは, スライスやホットスポット等の Web オブジェクトの上にポインタを移動したときブラウザに表示される. ポップアップメニュー内に, サブメニューの階層を必要なだけ作成できる. ポップアップメニューを作成するには,4つの属性を制御するタブ( コンテンツタブ外観タブ詳細タブ位置タブ ) のあるポップアップメニューエディタ (Pop-up Menu Editor) を用いる. 表 5にポップアップメニューの作成手順を, 図 4にポップアップメニューの作成例を示す.

5 表 5 ポップアップメニューの作成 1.[ コンテンツ ] タブで, 基本的なメニューとオプションのサブメニューを作成する. 2.[ 外観 ] タブで, テキスト書式アップ状態オーバー状態のスタイルを選択する. 3.[ 詳細 ] タブで, メニューの遅延時間ボーダー幅影ハイライト等を設定する. 4. 最後に [ 位置 ] タブで, メニューとサブメニューの位置を指定して完了する. 図 4 ポップアップメニューの作成例

6 CSS コードを含まないポップアップメニューのドキュメントを HTML に書き出す場合,JavaScript ファイル mm_menu.js と HTML ファイルが同じ場所に作成される.CSS コードを含む場合,HTML ファイルと mm_css_menu.js ファイルが作成される. Web オーサリングツールとグラフィック作成ツールの連携 Dreamweaver ドキュメントに配置された Fireworks イメージを修正するときは, プロパティインスペクタから Fireworks ソースファイルを起動する.Fireworks ソースファイルを編集最適化して Dreamweaver に戻ると,Fireworks イメージが更新される.(Fireworks ソースファイルを操作すると, ソースファイルと書き出しファイルの両方の変更が保存される.) 再び修正が発生しても, 同様に Fireworks ソースファイルの編集を行うことで, 画質劣化を伴わずスピーディに作業できる. Dreamweaver から Fireworks イメージの編集と最適化の方法を表 3に示す. 表 3 Dreamweaver から Fireworks イメージの編集最適化 1.Dreamweaver に配置された Fireworks イメージまたはスライスを選択する. 2. プロパティインスペクタの [ 編集 ] ボタンをクリックして, ソース PNG を編集する. 3. 編集作業が完了したら,[ 終了 ] をクリックする. 4. プロパティインスペクタの [Fireworks で最適化 ] ボタンをクリックする.( 下図参照 ) 5.Fireworks の [ 最適化 ] ダイアログボックスで編集して,[ 更新 ] をクリックする. Roundtrip 編集機能を使用することにより, 一方のアプリケーションでの変更が, もう一方にもシームレスに反映される.Dreamweaver で編集されたイメージマップ, 二つのアプリケーション間で共有されるビヘイビア, 変更されたリンク等の編集 ( テーブル編集等を除く ) は,Fireworks でも認識できる. Fireworks で作成されたイメージ, スライスおよび JavaScript が入った HTML コードを Dreamweaver ドキュメントに挿入することもできる.[HTML の更新 ] コマンドを使用すると,Fireworks でソースファイルを編集した後,Dreamweaver ドキュメント内に書き出された HTML コードとイメージファイルを自動的に更新することができる.FireworksHTML コードの挿入更新の方法を表 4に示す.

7 表 4 FireworksHTML コードの Dreamweaver への挿入更新 1.[ 挿入 ] バーの [ 一般 ] カテゴリの中の [FireworksHTML] ボタンをクリックする. 2.FireworksHTML ファイルを選び,[ 挿入後削除する ] オプションをチェックする. 3.[OK] をクリックして,Dreamweaver ドキュメントに挿入する. 4. 更新の場合は,Fireworks の [ ファイル ]-[HTML の更新 ] を使用する. Fireworks でポップアップメニューを編集するときは,Dreamweaver で Roundtrip 編集機能を使用できる. しかしながら Dreamweaver でメニューを編集するときは,Fireworks でポップアップメニューを作成してから,Dreamweaver を排他的に使用してメニューをカスタマイズする.Dreamweaver での Fireworks ポップアップメニューの編集方法を表 5に示す. 表 5 Dreamweaver での Fireworks ポップアップメニューの編集 1.Dreamweaver で, ポップアップメニューの Fireworks テーブルを選択する. 2. プロパティインスペクタで [ 編集 ] をクリックする. 3.Fireworks で,Pop-up Menu Editor を使用してメニューを編集する. 4.Fireworks ツールバーの [ 終了 ] をクリックする. また Dreamweaver と Fireworks を使用して, フォルダに格納されているイメージをフォトアルバムで表示する Web サイト ( サムネイルとサイズの大きいイメージ ) を自動的に生成することができる. 表 6 ウェブフォトアルバムの作成 1.Dreamweaver で [ ウェブフォトアルバムを作成 ] を選択し, タイトルを入力する. 2.[ ソースイメージフォーマット ] のポップアップメニューから必要項目を作成する. 3.Fireworks が起動して, サムネイルと大きなサイズのイメージが作成される. 4.Dreamweaver が再びアクティブになり, サムネイルが含まれるページを作成する.

(Accessibility) のチェックをすることが大切である. 富士通では, 視覚障害者や色覚障害者のアクセシビリティを高めるための診断ソフトウェアツール (WebInspector,ColorSelector,ColorDoctor) をホームページ作成担当者やデザイナーに提供している. WebInspector は, 高齢者や視覚に障害のある方にも読みやすいかを診断するソフトウェアである.

8 ウェブフォトアルバムの作成方法を表 6 に, 図 5 にウェブフォトアルバムの一例を示す. 名古屋大学キャンパスマップ図 5 ウェブフォトアルバムの一例アクセシビリティ診断ツール (Fujitsu Accessibility Assistance) Web サイトを公開する前に, 様々な利用環境に配慮して画像に代替テキストを設定する機種依存文字を使用しないフレームの使用は最小限にするタイトルを設定する配色に注意する等の誰からも見やすいアクセシビリティ (Accessibility) のチェックをすることが大切である. 富士通では, 視覚障害者や色覚障害者のアクセシビリティを高めるための診断ソフトウェアツール (WebInspector,ColorSelector,ColorDoctor) をホームページ作成担当者やデザイナーに提供している. WebInspector は, 高齢者や視覚に障害のある方にも読みやすいかを診断するソフトウェアである. ColorSelector は, アクセシビリティの高い背景色と文字色の組合せをリアルタイムに確認することができる.ColorDoctor は, ウェブサイトや動画, プレゼンテーション資料で色のアクセシビリティをチェックすることができる. 参考文献 1. 富士通オフィス機器株式会社著, よくわかる Macromedia Dreamweaver 8 & Macromedia Fireworks 8 FOM 出版 (2006)( 2. Macromedia Studio 8 オンデマンドセミナー ( 3. マクロメディア株式会社著, Macromedia Fireworks 8 ファーストステップガイド 4. マクロメディア株式会社著, Macromedia Fireworks 8 ユーザーガイド ( 5. マクロメディア株式会社著, Macromedia Dreamweaver 8 ファーストステップガイド 6. マクロメディア株式会社著, Macromedia Dreamweaver 8 ユーザーガイド ( 7. シーズ編著,Web Designer s Handbook Series HTML & CSS ビジュアルリファレンス MdN Corporation (2004).( 8. フリー百科事典ウィキペディア (Wikipedia) ( 9. 若葉の Dreamweaver 入門 ( 10. 富士通アクセシビリティアシスタンス (

FutureWeb3 Web Presence Builderマニュアル

FutureWeb3 Web Presence Builder マニュアル Vol.002 目次目次... 2 ごあいさつ... 3 Web Presence Builder について... 4 Web Presence Builder の起動方法... 6 ホームページ ( サイト ) を作成する... 7 画面説明... 9 デザインを変更する... 10 デザインテンプレートを変更する...