Macromedia Contribute の製品スローガンには、Contribute を導入することによって「Web プロフェッショナルの負担を軽減」とありますが、負担の軽減だけが、Web プロフェッショナルにとっての Contribute 導入メリットではありません。Contribute をカスタマイズすれば、クライアントのニーズに特化した作業環境を提供する事も可能です。

Contribute は、Dreamweaver MX に実装されている幅広い拡張性をベースに開発されています。メニューやツールバーなどのインターフェイス、および、コマンドやオブジェクトの各種機能などは、Dreamweaver MX 同様に拡張およびカスタマイズすることが可能です。さらに Contribute では、つぎに示す２つの新機能をカスタマイズすることも可能です:

• ようこそページ: Contribute を起動した際に最初に表示されるページをカスタマイズすれば、会社名や登録商標などを必要に応じて表示することができます。
• [操作方法] パネル: Contribute のサイドバー下部にあるこのパネルからは、基本的な操作方法の説明等が簡単に参照できるようになっています。このパネルをカスタマイズして、クライアントの会社や業界に特化した情報やガイドを参照できるようにすることも可能です。

[操作方法] パネルのカスタマイズ
エンドユーザーの利便性を考慮して、Contribute のサイドバーには [Web サイトへの接続] や [Web サイト上のページの編集] といった頻繁に発生する操作の方法を説明するセクションが用意されています。このセクションを [操作方法] パネルと呼びます。デフォルトで用意されているパネルのコンテンツは、一般的な Contribute ユーザーを対象として作成されたものなので、よりクライアントのニーズに特化した情報に変更したいと考える Web 開発者 / デザイナーの方もおられるかと思います。Contribute は非常に拡張性に富んだソフトウェアなので、[操作方法] パネルのコンテンツ自体をカスタマイズすることも可能です。

[操作方法] パネルの仕組み
[操作方法] パネルのカスタマイズを始める前に、このパネルの使用方法をエンドユーザーの立場から見てみましょう。[操作方法] パネルには、「はじめに」「Web サイトへのページの追加」「Web サイトの管理」の３つの見出し項目が表示されます。

図 1. Contribute [操作方法] パネル

３つの見出し項目は、中に含まれているコンテンツ項目を折りたたむことができるリンクになっています。コンテンツ項目は、例えば、「Contribute チュートリアル」といったその項目名が示す作業の説明にリンクされています。

コンテンツ項目を選択してみてください。選択した作業の手順が [操作方法] パネルに段階を追って表示されます。

図 2. コンテンツ項目選択後、作業手順を示す項目が表示されます

コンテンツ項目選択後のパネルには、１つ前の表示に戻るための [戻る] ボタンおよび、操作方法の目次に戻るための [トピック] ボタンが用意されています。作業手順の説明には、より一層の解説を加えるために (画像やテキストが含まれた) さらなるリンクが用意されている場合もあります。例えば、[はじめに] - [Contribute チュートリアル] - [Web サイトへの接続] の項目には、Contribute 内蔵ブラウザでページを開くためのリンクがあります。

図 3. Contribute 内蔵ブラウザ。上の図をクリックすると、大きな画像が表示されます。

[操作方法] パネルの内容表示に使用されるファイルは、すべて Contribute フォルダ内の Configuration/Content/Tasks ディレクトリに保存されています。トップレベルの見出し項目に関しては、２つの XML ファイルに表示する内容およびその構成が記述されています:

• TasksLayout.xml—HTML にて作成される一連のエレメント (例: category、category_section、category_separators) を定義して、[操作方法] パネルに最初に表示される見出しの構成を記述しています。
• Tasks.xml—見出し項目、見出し内のコンテンツ項目が記述されています。

Contribute は、これらのファイルを起動時に読み込み、[操作方法] パネルに最初に表示する内容を生成します。

作業手順を説明するコンテンツ項目は、それぞれ順番付けされた HTML ファイルです。Contribute デフォルトインストールの状態では、task1.htm から task64.htm のファイルが用意されています。ファイル名に連番を使用しなければならないわけではありません。任意のファイル名を使用することも可能です。

では、これら３タイプのファイルの詳細、およびカスタマイズ方法について見ていきましょう。

TasksLayout.xml ファイル
拡張を容易にするため、[操作方法] パネルに表示される各種コンポーネントの基本構成は、TasksLayout.xml ファイルに集約して定義されています。言わば、この XML ファイルは構造を定義するスタイルシートのようなもので、CSS で言うセレクタとその書式設定の代わりに、テーブル要素が使用されています。例えば、全体の構成を示す「main」要素はつぎのように記述されています:

<main>
<![CDATA[
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td>{category_sections+category_separators}</td>
  </tr>
< /table>
]]>
< /main>

<td> のセル内に記述されているテーブルコンテンツが、{ } カッコに囲まれた２つの変数 {category_sections+category_separators} であることに注目してください。この２つの変数から、TasksLayout.xml ファイルに含まれている他のコンポーネント参照しています。ちなみに、このファイルには合計７つのコンポーネントが記述されています: main、category_section、category、category_separator、tasks、tasks_separator、images。

[操作方法] パネルに表示されるはじめのページに、パネルをカスタマイズした会社名を表示させたいとします。Dreamweaver を使用して、Contribute/Configuration/Content/Tasks/TasksLayout.xml ファイルを開いてください。 CDATA XMLタグ内にコードを追加して、<main> 要素をカスタマイズします:

<main>
<![CDATA[
<h3 align="center">カスタムパネル作成:<br>Leaf Media, Inc.</h3>
<table border="0" cellpadding="0" cellspacing="0" width="100%">

TasksLayout.xml ファイルを保存して、Contribute を再起動します。カスタマイズした内容が [操作方法] パネルに反映されます。

図 4. TasksLayout.xml ファイルカスタマイズ後の [操作方法] パネル

Tasks.xml ファイル
Tasks.xml ファイルには、コンテンツ項目を定義する <task> タグを内含する一連の <category> タグ (デフォルト状態の Contribute の場合、３つの見出し項目分) が記述されています。なお、この Tasks.xml ファイルの内容が、TasksLayout.xml で定義した構成を使用して表示されます。つぎに１つ目の見出し項目:「はじめに」の部分のコードを示します:

<category name="Get started" id="0">
   <task name="Contribute チュートリアル" file="task2.htm" id="1"/> 
   <task name="Web サイトへの接続" file="task14.htm" id="2"/> 
   <task name="Web ページのナビゲイト" file="task17.htm" id="3"/> 
   <task name="Web サイト上のページの編集" file="task18.htm" id="4"/> 
   <task name="Web サイト管理者になる" file="task19.htm" id="5"/> 
</category>

このファイルを詳しく見てみると、Contribute 起動時には３つの見出し項目しか表示されないにも関わらず、６つの <category> タグが記述してあることにお気付きになるでしょう。これは、残りの３つの見出し項目 (「Web ページへのコンテンツの追加」「Web ページの変更」「仕上げ」) が、Contribute を [ページの編集] モードに切り替えた際に追加表示されるからです。<category> タグの内容を [ページの編集] モードでのみ表示するには、タグにつぎの属性を追加します:

enabled="CCWorkspaceManager.getManager(dw.getDocumentDOM()).getState()==
'edit'" 

仮に、標準で表示される３つ目の見出し項目: [Web サイトの管理] をカスタマイズして、特定の問題が発生した場合の連絡先リンクを表示したいとします。この場合、つぎに示す一連のコードを削除します:

<category name="Web サイトの管理" id="25">
  <task name="権限グループの編集" file="task61.htm" id="26"/> 
  <task name="他のユーザーの設定" file="task62.htm" id="27"/> 
  <task name="ページのロールバックの設定" file="task63.htm" id="28"/> 
  <task name="ユーザーによるファイルの削除の許可" file="task64.htm" id="29"/> 
</category>

代わりに、つぎのようなコードを挿入します:

 

<category name="問題が発生した場合の連絡先" id="25">
  <task name="接続に関する問合せ" file="leafmedia100.htm" id="26"/> 
  <task name="デザインに関する問合せ" file="leafmedia110.htm" id="27"/> 
  <task name="新しいページをリクエストしたい" file="leafmedia120.htm" id="28"/> 
</category> 

これで、[操作方法]パネルにカスタマイズした見出し項目と関連コンテンツが表示されるようになりました。

図 5. 見出し項目カスタマイズ後の [操作方法] パネル

最後に、新しく作成した項目用の HTML ファイルを作成します。

各作業項目の HTML ファイル
各作業項目のファイルは、基本的に単なる HTML のページです。Dreamweaver を使用して、作業項目のファイル (task ファイル) を開いてみてください。テーブルの上下にナビゲーション用エレメントが配置され、その間に作業の説明文が記述されている事が確認できます。

図 6 Dreamweaver MX で開いた作業項目 HTML ファイル (task ファイル)

通常の HTML ファイルと違うところと言えば、リンクの記述方法です。[操作方法] パネル内にリンク先を表示するには、Contribute の API 関数を呼び出す必要があります。つぎに、ページから別の作業項目ファイル (task ファイル) を呼び出すリンクのコードを示します:

<a class="alinkcustom" href="#" 
onMouseUp="dw.tasksPalette.browseToPage('task3.htm')">
Web サイトへの接続
</a>

onMouseUp イベントが発生すると Contribute の API 関数: dw.tasksPalette.browseToPage() が呼び出され、ファイル名「task3.htm」がその引数として渡されます。browseToPage() 関数の引数を指定しなかった場合: (onMouseUp="dw.tasksPalette.browseToPage('')" と記述した場合)、そのリンクは Tasks.xml に定義されているトップページを表示するようになります。

たいていの [操作方法] パネル内リンクは、リンク先のページを同パネル内にて表示するようになっていますが、リンク先のページを Contribute 内蔵ブラウザで表示することも可能です。API 関数: dw.openCCTutorialSite() を呼び出すと、Contribute/Configuration/Content/Tutorial フォルダにある index.htm ファイルが開きます。必要ならばデフォルトで用意されているチュートリアルをユーザーの使用環境に特化したものに入れ替えることも可能です。

カスタム作成する作業項目ページ (task ページ) のデザインは (ある一定の制限内で) 自由に設定できます。画像やその他のメディアは、Tasks フォルダ内に配置するようにしてください。ページをレイアウトするためには、<table> タグ以外に <div> タグを使用することも可能です。ただし、[レイヤーの表示 - 非表示] といったビヘイビアをページに設定することはできません。

各ページのカスタマイズ作業が完了したら、サードパーティ製のインストーラーを使用するか、手動コピーをして、ファイルを適切な場所に配置します。これで [操作方法] パネルのカスタマイズが完了です。ユーザーにとって、より一層便利な [操作方法] パネルになることは間違いありません。

著者について