本文へジャンプ

ソフトウェア > Lotus > Lotus Developer Domain > 

Iris Today Archives 

ドミノ・デザイナー R5：フレーム・セット


 Lotus Software
by Susan Florio
レベル：ビギナー
対象：Designer 5.0
原文の掲載：1999年2月1日

Iris Today Archivesの原文（US）

インデックス
アプリケーション作成のプラン
フレーム・セットの作成
フレーム・コンテンツの作成と指定
その他のフレームのプロパティー
ターゲット・フレームの制御
アプリケーションの最終的な設定
結論

ドミノ・デザイナーR5の新機能である「フレーム・セット・デザイナー」を使うことで、ノーツ/ドミノ・アプリケーション開発者が「フレーム」を使ったアプリケーションを簡単に開発することが可能になります。フレームとは、大きなアプリケーション・ウィンドウの中において独立してスクロールできる「枠」の事です。そしてそれぞれの枠の中に別々のHTMLページを表示することにより、Webアプリケーションは高度なレイアウトとユーザー・インターフェースを実現することができるのです。

フレーム・セットとはフレームの集合のことです。Webアプリケーション開発時には、フレーム・セットを使うことにより、わかりやすいナビゲーションを作成する事ができます。例えば、一つのページがフレーム内に表示された上で、そのフレームからの他のフレームの表示を更新するようなリンクを作成する事ができます。R5の新しいフレーム・セット・デザイナーはこのフレームを簡単に作成するためのツールなのです。

このページでは、実際のWebアプリケーションの開発におけるフレーム・セット・デザイナーの使用例をご紹介しながら、フレーム・セットを利用することでどれだけの開発時間の削減ができるかということを説明させていただきます。

注意1： フレーム・セット・デザイナーはHTML4.0仕様に準拠してますが、現段階においてはすべてのブラウザーがHTML4.0準拠のフレーム・セットをサポートしていませんし、また同様に、同じ表現を可能にするというものではありません。
注意2： R5で作成されたフレーム・セットは以前のリリースのノーツ/ドミノでは動作しません。
 
上に戻る
 
アプリケーション作成のプラン
フレーム・セットを使うアプリケーションの設計を始める前に、まず、どのようなフレーム・セットを作成するかを決めましょう。R5のフレーム・セットがどのように動作するのかを示すために、Notes.net上にある「ノーツとドミノの歴史」のデータベースの再設計を行いましょう。このデータベースは元々ノーツドミノ R4.6のフレーム・セット・テンプレートを使用してつくられたものです。R4.6の設計では、パススルーHTMLとJavaScriptを使っていました。R5では、同じアプリケーションを設計するためにHTMLやJavaScriptの知識は必要ありません。
下図はNotes.net上のR4.6で設計された「ノーツとドミノの歴史」で、フレーム・セットがどのように使われているかを示すものです。

4.6 Frameset design in a browser

左側のフレーム内でノーツの各リリースを示すボタンの上にカーソルを持っていくと、ボタンの色が変わります。そこでボタンをクリックすると、文書内の該当するセクションが右側のフレームに表示されます。では、R5でどのようにしてこのアプリケーションを作成するかをお見せしましょう。
 
上に戻る
 
フレーム・セットの作成
フレーム・セット・デザイナーはドミノ・デザイナーのデザイン・ペインの中に、以下ように表示されます。

The Design Pane

フレーム・セットを作成するには、デザイン・ペインでFramestsを選択して、New Frameset ボタンをクリックしてください。Create New Frameset ダイアログ・ボックスが表示されます:

The Create New Frameset dialog box

ここでは、フレームの分割方法と、使用したいフレームの数を選択することができます。ご覧の通り、このアプリケーションでは3つのフレームの使用を選択します。 2、3、または4つに分かれたフレームを選択することもできます。 フレーム・セットを作成すると、ドミノ・デザイナーの画面は以下のようになります。

An empty frameset

どのフレームにも中身が表示されていませんが、これは後で選択することにしましょう。ドミノ・デザイナーでは、フレーム・セットとアプリケーションを設計している間は、どこの段階でも、作業状況を確認するためにWebブラウザーでのプレビューを行ったり、プレビューするWebブラウザーの選択をすることができます。Webブラウザー上で、ドミノ・デザイナーの環境だけで、現在のデザイン要素を表示することができるのです。
 
上に戻る
 
フレーム・セット・デザイナーでは、フレーム・セットのデザインの再設定を行うには、フレーム・セットの中の再設定を行いたいフレームを選択した上で、画面の一番上に並んだボタンを押して行います。
  • Split into Columns: 現在のフレームを、垂直に2つのフレームに分割します
  • Split into Rows: 現在のフレームを、水平に2つのフレームに分割します
  • Delete Frames: 現在のフレームを、取り除きます
  • Remove Frame Contents: フレームの位置はそのままで、コンテンツだけを削除します
これらのボタンに加えて、アプリケーション内でのフレームの制御のためにフレーム・メニューを使うことができます。 フレーム・メニューには、以下のオプションがあります:
  • フレーム・プロパティー: フレーム・プロパティー・ボックスを表示
  • フレーム・セット・プロパティー: フレーム・セット・プロパティー・ボックスを表示
  • フレーム分割コマンド（Split into ColumnsとSplit into Rows）: （前述）
  • Delete Frames: （前述）
  • Refresh Frames: 現在の選択されているフレーム（選択されているフレームは周りが暗い境界線になっています。）の中身を再読み込みするためのものです。例えば、フレーム内のページに変更を行った場合、フレームのコンテンツをリフレッシュするのにこのコマンドを使用することができます。このページはフレーム内でページ情報が再読み込みされ、フレーム・セット全体での情報の更新を確認することがでます。
  • Remove Frame Contents: （前述）
 
上に戻る
 

また、フレームの上で右クリックすると現れるポップアップ・メニューもあります。 Viewメニューの中には、Refresh allコマンドとShow Framｅ Contentsコマンドがあります。
  • Refresh allコマンド: フレーム・セット内のすべてのフレームのコンテンツを再読み込みします。
  • Show Frame Contentコマンド: 押すたびに実際にコンテンツがどのように見えるかをWYSIWYGで表示するか、内容の簡単な説明を表示するかの切り替えを行います。
フレーム・セットに名前をつけるには、フレームを選択し、フレーム・セット・プロパティー・ボックスを開きます。

The Frameset Properties box

Basics タブを選んで、Nameフィールドに名前を入力します。 同様に、Ailiasフィールドにエイリアス・ネームを、Commentフィールドにコメントを入力することができます。フレーム・セットの名前はHTMLにおける<TITLE> タグに相当するものです。このフレーム・セット名はブラウザーのメニュー・バーやノーツ・クライアントのWindowタブに表示されます。そしてこのフィールドにはテキストか計算式を入れることができます。例えば、フレーム・セット・タイトルを単に「ノーツとドミノの歴史」と入力する事もできますし、またはタイトルと共に今日の日付や、ドキュメントが変更された日付などを表示するように式を入れることもできます。タイトル入力しないと、フレーム・セットが「無題」と表示されますので、何か1つ使用されることをお薦めします。
 
上に戻る
 
また、このときに各フレームに名前を付けておいてください。そうすると、ページやアウトライン・エントリーを作成する時に、各フレーム間のリンクを作成することができます。フレームに名前を付けるには、フレームを選択して、フレーム・プロパティー・ボックスを開きます。「ノーツとドミノの歴史」アプリケーションでは、right、leftとtopBannerという名前を付けます。

The Frame Properties box
 
上に戻る
 
フレーム・コンテンツの作成と指定
さて、これでフレーム・セットはできあがりました。次のステップは、それぞれのフレームのコンテンツを指定することです。フレーム・セット・デザイナーでは、3つの異なったタイプのフレームのコンテンツを指定する事ができます:
  • ノーツ文書あるいはビューへのリンク
  • URL
  • 名前つき要素

リンクを選ぶ場合、以下のタイプのリンクから選ぶことができます:
  • ビュー
  • 文書
  • アンカー

ノーツ文書あるいはビューへのリンクをフレームにセットするには、まず、ノーツ上でクリップボードにリンクをコピーし、次にドミノ・デザイナー上でフレーム・プロパティー・ボックスのBasicsタブを開き、Pasteのアイコンを押してください。これで、文書あるいはビューをフレームの中にセットすることができました。名前付き要素であればドミノ・デザイナー上でコピー&ペーストするだけで同じようにリンクを作成することができます。リンクや名前付き要素の代わりにURLを使用する場合には、フレーム・プロパティー・ボックスのBasicsタブでURLを入力するかペーストしなければなりません。
 
上に戻る
 
名前付き要素を選ぶ場合、、以下のタイプを使うことができます:
  • ページ
  • フォーム
  • フレーム・セット
  • ビュー
  • フォルダー
  • ナビゲーター

「ノーツとドミノの歴史」の再設計では、各フレームに作成したページをセットしていく方法をとります。各ページを作成するには、デザイン・ペインでページ・デザイン要素を選んで、New Pageボタンをクリックします。それぞれのノーツとドミノのリリースに対して、ページを作成し、情報を入力した後、名前を付けて保存します。下の画像は「リリース1.0」のページです。

A page
 
上に戻る
 
一度フレーム・セットを定義してページを作成すると、特定のフォームあるいはページを直接フレームのコンテンツとして表示することができるようになります。個々のページを開いて、ページ・プロパティー・ボックスの中のLaunchタブを開きましょう。Framesetフィールドにおいて、フレーム・セットにhistoryを選択し、次に表示したいフレーム（right、left、そしてtopBanner）を指定します。これで、このページを開くときにはいつもこのフレーム・セットが一緒に現れるよう設定できました。この機能を利用することで、ユーザーがフレーム・セットの中に埋められた1ページをブックマークとして追加した場合にも、それの周りにフレーム・セットを自動的に配置した状態で起動させることができるようになります。

次に、左側の「ナビゲーション」フレームを作成するには、まず、ナビゲーションの機能を果たすアウトラインを作成します。それからこのアウトラインを使ったページを作成し、フレーム・セットの中にそのページを設定します。アウトラインを作成するには、デザイン・ペインからアウトライン・デザイン要素をクリックして、New Outlineボタンを押してください。これで下図のようなナビゲーション・バーの上の各ボタンに対応するアウトライン・エントリーができあがりました。

Outline entries
 
上に戻る
 
アウトライン・エントリー・プロパティー・ボックスを開いてみると、各エントリーはユーザーがそのエントリーをクリックす るときに表示するリリース番号をLabel フィールドに持っているのが見えるはずです。次に、Typeフィールドを名前付き要素<Named Element>でページ<Page>として指定し、各ページを名前付き要素として設定していきます。 この時、Frameフィールドは空にしておいて下さい。このFrameフィールドは、表示の書き換えを行うフレームを指定することができます。この指定を行うと、ユーザーが特定のアウトライン・エントリーを選択したときに、指定されたフレームの中でコンテンツの書き換えが行われます。しかしながら、フレーム・セット・デザイナーの優れた機能により、この作業は必要ありません。一度の操作で、1つのフレームのすべてのリンクのターゲット・フレームを指定する事ができるのです。フレーム・プロパティー・ボックスを開いて、「Default target for links in this frame」フィールドにターゲット・フレームを入力するだけです。この場合では、leftフレームのフレーム・プロパティー・ボックスを開き、ターゲット・フレームとしてrightフレームを指定します。デフォルト以外のターゲット・フレームを使いたい場合には、個々のアウトライン・エントリーにターゲット・フレームを設定することもできます。

The Outline Entry Properties box

次に、アウトライン・プロパティー・ボックスを開いて、アウトラインに名前をつけ、保存します。フレーム・セットのソースとしてアウトラインを使用するには、アウトラインをページの中に置く必要があります。アウトライン・デザイナーでは、画面の上の方にあるUse Outlineボタンをクリックします。 アウトラインが無題のページ上にできあがります。

An embedded outline
 
上に戻る
 
今度は、埋め込まれたアウトラインのデザインを調整します。アウトラインが以下の通りに見えるまで、アウトラインのサイズ、ラベルの字体および色、各エントリーへのバックグラウンド・イメージの追加などの調整を行います。

A formatted outline on a page

このよう書式の変更を行うには、アウトライン・プロパティー・ボックスを開きます。Infoタブから、埋め込まれたアウトラインのサイズを調整することができます。 Fontタブでは、テキスト・ラベルの見た目をコントロールできます。また、ユーザーがテキストを選択したり、テキストの上にマウスを動かした場合にテキストを特定の色に変えるといった設定もできます。例えば、以下のオプションを選択することによって、各ボタンの上の文字が上記のどちらの場合でも黄色になるように設定できます。
 
上に戻る
 
The Font tab of the Embedded Outline Properties box

Backgroundタブでは、ユーザーが各リリースの説明を見るために選択する青いボタンとして特定の画像を選択します。アウトライン・エントリーのいずれにも階層づけを行っていないので、今回のラベルはすべて最上位の階層のものになります。ここで、Top-Level Backgroundタブを選択して、デザイン要素のリソースとして格納されているイメージを黄色いフォルダー・アイコンをクリックして見つけ出して下さい。ここではhist_blank.GIFという名前の画像を選択します。

The Background tab of the Embedded Outline Properties box

ご覧のように、すべてのアウトライン・エントリーでこの画像が背景として使われるように設定して下さい。また、イメージを使わないという設定にすれば、このTop-Level Backgroundタブによって、アウトライン・エントリーの各レベルのバックグラウンド色をコントロールできます。

Layoutタブを使えば、大抵の書式を設定することができます。 アウトライン・エントリーのオフセットや高さ、アウトライン・エントリーのラベルと画像の配列やオフセットを指定することができます。

フレーム・セットの中での出来映えを見るには、ページを保存して、フレーム・セット・デザイナーを開きます。次に、アウトラインが入ったページを表示したいフレームを選択して、名前付き要素としてそのページをFrameプロパティー・ボックスの中のPageフィールドで指定します。アウトラインの使用に関する詳細は、ドミノ・デザイナーR5：アウトラインをご覧ください。
 
上に戻る
 
その他のフレームのプロパティー
Frameプロパティー・ボックスを使うと、各フレームに追加属性の設定をすることができます。Basicsタブのname フィールド、source フィールド、およびTarget Frame フィールドの設定方法は既に紹介済みです。また、Sizeタブを使用してフレームのサイズを制御することができます。もちろん、フレームの間の境界をマウスで動かすことで、簡単にサイズを変更することができます。そして、フレームの幅と高さの変更をした場合、そのフレームに接しているフレームの幅と高さは自動的には変化しません。以下の方法でフレームの幅と高さを設定することができます。
  • 全体のウィンドウにおけるパーセント指定
  • 相対的な指定
  • ピクセルによる数値での指定
ブラウザー上でフレーム・セットを表示するときには、最初にピクセル数値指定のフレームと全体のウィンドウにおけるパーセント指定のフレームを正しく表示できるように画面の割合が決まります。相対的な指定のフレームは残りの部分に表示されます。1つ目の相対指定フレーム、2つ目相対指定フレーム・・・といった具合にフレームの設定が可能です。相対指定のフレームを一つ以上使用する場合には、スペースはそれらのフレームに割り当てられます。2つの相対的なフレームは1つの相対的なフレームの2倍のスペースを使います。
 
上に戻る
 
また、Basicsタブでは、ユーザーが全体のフレーム・コンテンツを表示することができないくらい小さいウィンドウでアプリケーションを開く場合に、フレームをスクロールさせるかどうか指定することができます。 On、Off、Auto、またはDefaultを指定することができます。 Onを指定すると、ユーザーのウィンドウ・サイズの大小にかかわらず、スクロール・バーが表示されます。 Offを指定すると、スクロール・バーは現れません。 Autoを指定すると、ウィンドウが全体のアプリケーション・ウィンドウを表示するスペースがないときには、スクロール・バーが表示されます。 Defaul設定をすると、Autoのスクロール・バーと同じ動作になります。 Allow Resizingオプションは、ユーザーがフレームの境界をずらすことによってリサイズすることができるかどうかを設定します。

Borderタブは各フレームの周りの境界線を表示するかどうかを指定します。 また、フレーム・セットの中ですべてのフレームの境界線の表示をするかどうかを指定することもできます。 デフォルトでは、境界線の幅は7に設定され、境界色はシステムのバックグラウンド色になっていますが、これらの設定を変えることもできます。

Advanced タブでは、フレームの間隔（ここでのフレームの間隔とは、フレームと隣接しているフレームとの間のピクセル数です。）を設定します。 デフォルトでは、0に設定されています。 また、フレームの中のコンテンツにマージンの高さと幅を指定することもできます。 これは、フレームの中でテキストやグラフィックスがどのように見えるかということを制御します。 マージンの高さはフレームの天地とフレームのコンテンツの間のピクセル数を示しています。 マージン幅は左右までのピクセル数を指定します。

HTMLタブでは、ID、Class、Style、TitleやOtherといったフィールドを設定できます。 これらはHTML4.0で共通の属性です。ドミノはこれらの属性を<FRAME>と<FREAMESET>タグの中に埋め込みます。Otherフィールドを除いて、これらは全てHTMLスタイル・シートと一緒に使用されます。 ID属性はスクリプトを書くのにも使用されます。通常Title属性は情報を表示するために使われますが、いくつかの要素では、Internet Explorerによってこの情報をツール・チップ・ポップアップとして表示します。 フレーム・セットの Other フィールドはどのようなHTMLの追加にも対応できます。 また、フレーム・セットのプロパティーを設定するには、このタブとほぼ同じ機能を持つFrameset HTMLタブを使うこともできます。 このFrameset HTMLタブはHTMLタブと同じ事ができますが、フレーム・セット全体に影響を与えます。
 
上に戻る
 
ターゲット・フレームの制御
Frameプロパティー・ボックスを使用して特定のフレームの中のすべてのリンクにターゲット・フレームを指定する方法は既にご紹介しました。 leftフレームのすべてのリンクはrightフレームの中の情報を変えるように設定してあります。 「Default target for links in frame」フィールドに、フレームの中のどのリンクがクリックされた場合にも変更されるターゲット・フレームを入力します。 これを指定しない場合には、標準では、ブラウザーはリンクを含むドキュメントと同じフレームでリンクを開きます。

今回のフレーム・セットでは、topBannerフレームはNotes.netのためのナビゲーション・バーになっていま すので、_topをターゲット・フレームとして指定します。 _topは標準で予約されているHTMLキーワードで、このフレーム内でリンクがクリックされると、フレーム・セット内の全てのフレームが一度削除され、 リンクされたページが表示されます。 しかしながら、もしこのリンクの中の一つだけが、topフレームの中の情報を書き換えたいという場合には、どうすればいいのでしょうか？
フレーム・プロパティー・ボックスの中で、リンクあるいはアウトライン・エントリーのターゲットを設定することで、ターゲットの設定を変更することができます。 リンクをターゲットに指定するには、これまでのノーツでの操作と同じくホット・スポット・リンクを作成します。それから、そのホット・スポットのプロパティー・ボックスを開き、DisplayタブのFrame フィールドにターゲット・フレームの名前を書き込みます。このアプリケーションの場合は、topフレームを指定します。

一般には、ユーザーがフレーム・セットを使ったアプリケーションでリンクをクリックするとき、まずクリックされたリンクがターゲット情報を持っているかが調べられ、あればこのターゲット・フレームが変更の対象になります。 そうでない場合には、次にフレームのターゲット情報がチェックされ、あればこのターゲット・フレームが変更の対象になります。 この設定も無い場合には、ブラウザーの標準の規格に従い、リンクがある文書と同じフレームの情報が更新されます。
 
上に戻る
 
アプリケーションの最終的な設定
設計をを完了して、フレーム・セットとすべてのリンクを確認したら、ユーザーがこのアプリケーションを開始するときに表示 されるフレームを決めましょう。 アプリケーション起動時の動作を設定するには、データベース・プロパティー・ボックスのLaunchタブを開きます:

The Database Properties box

On Database OpenタブのOn Web Openフィールドに, 「Open designated Frameset」を選び、 Framesetフィールドに最初に開くフレーム・セットの名前を入れます。 ここで、今回、新しくR5で設計した「ノーツとドミノの歴史」アプリケーションをWebブラウザーで開いてみましょう。

An R5 version of the frameset in a browser
 
上に戻る
 
結論
フレーム・セット・デザイナーは、「ノーツとドミノの歴史」アプリケーションの再設計でご紹介したもの以外にも、アプリケーション開発において有効な特長を持っています。いくつかの状態に応じて、表示するフレームのコンテンツを選択することができます。例えば、ユーザーがアプリケーションを見るのに使用するクライアントのタイプに基づいてフレーム内に異なったページを表示することができます。また、階層化されたセキュリティー・レベルに対応したアプリケーションを作るには、ノーツのユーザー・ロールに基づいて別々の違ったページをフレーム内に 表示させることもできます。

さて、これまでのプロセスで、R5により、マルチペインのアプリケーション開発がどれほど簡単になるかをご理解いただけた かと思います。これにより皆様の今後のアプリケーション開発に何かしらお役に立てればと考えております。 実際に「ノーツとドミノの歴史」アプリケーションをいかに簡単に再設計したかをお見せしましたが、R5のドミノ・デザイナーを使えば、インタラクティブなWebサイトを構築するのに、プログラミング言語を使う必要はありません。R5のドミノ・デザイナーさえあればいいのです。

IBMはIBM Corporationの商標。
Lotus、Lotus Domino、Lotus NotesはIBMの商標。
その他、記載された社名および製品名は、それぞれ各社の商標または登録商標です。
 
上に戻る