Rational Application Developerによるポータルサイトの構築

ページオプション JavaScript を要するドキュメントオプションは表示されません

レベル: 初級

内田 健二 (uchi@jp.ibm.com), アプリケーション開発ツール/ソフトウェア開発研究所, IBM

2005年 7月 29日

Rational Application Developer (RAD) V6.0では、これまでWebSphere Studio Application Developer(WSAD)でもサポートされていたポートレット開発機能に加え、Portal Designerと呼ばれるポータルサイトの構築をサポートするツールが追加され、ポータルのページ構成や、ページ内のポートレットのレイアウトなどが簡単に設定できるようになりました。また、WSADでもサポートされていたHTMLやJSPファイルの編集ツールであるPage Designerも、ポータルの見た目と操作性を決めるテーマに使用されるJSPファイルを編集できるように拡張され、CSSファイルを編集するCSS DesignerとともにPortal Designerと連携することで、これまで難しかったテーマの編集を容易にしました。

通常、RADによるポータルサイトの構築は、以下の手順で行われます。

• ポータルサイトのインポート
• ポータルサイトの構築
  • ポータル構成情報(ページ構成など)の編集
  • テーマ(JSP、CSSファイル)の編集
• WebSphere Portalテスト環境によるテスト
• デプロイ

本稿は、WebSphere Portal V5.1用の開発を前提とし、この順番に沿いながら、ポータル構成情報とテーマの編集について説明します。
（WebSphere Portal V5.1用の開発を行うには、FixPack 6.0.0.1を適用する必要があります。）

ポータルサイトのインポート

RADでポータルサイトの開発を行う準備段階として、まず、実際に稼動しているポータル・サーバー（ステージング・サーバー）から、開発に必要なリソースをRADの開発環境にインポートする必要があります。 一般的にRADでアプリケーション開発を行う場合、プロジェクトと呼ばれる、開発に必要なリソースや設定を含むフォルダ単位で作業を行いますが、ポータルサイトの開発も、ポータルの開発に必要なリソースを含む、ポータル・プロジェクトというプロジェクト単位で行います。ポータルのインポート機能は、ポータル・プロジェクトを作成し、サーバー内のリソースをプロジェクト内に取り込みます。ポータル・プロジェクトに取り込まれるリソースには、以下の種類があります。

上に戻る

ポータル構成情報の編集

これまで、ページの追加やページ・レイアウトの変更などポータル構成情報の編集は、ブラウザー上でポータル管理ポートレットを使うか、XML構成インターフェースを使って手作業でスクリプトを実行する必要がありました。これらの操作は、RAD でポータル構成情報を編集するツールであるPortal Designerを使い、パレットやプロパティー・ビューなどと連携することで、より直感的で容易なものになります。

ここでは、ポータル・ページの編集を例に、Portal Designerを使ってポータル構成の編集を行います。まず、新しいページを追加するためには、図１右のパレットから「ページ」を、ナビゲーション・バーの適当な位置にドロップします。追加されたページのタイトルは、図１下のプロパティー・ビューで変更することができます(図１では「ホーム」という名前にしています)。また、その新規に追加されたページには、ポートレットの挿入場所が１つ用意されています。例えば、この挿入場所を３段組みにしたい場合は、パレットから新しい「列」を既存の挿入場所に２回ドロップします(１つは最初から存在します)。次に、パレットから「ポートレット」をドロップして、段組した挿入場所にポートレットを挿入します。このようにして作成されたページの構成は、図１左下のアウトライン・ビューで確認することもできます。

上に戻る

テーマの編集

ここでは、ポータルサイトの見た目の編集について説明しますが、その前にポータルサイト全体の統一した見た目と操作性を決める要素であるテーマについて解説します。
テーマは、ポータルサイトの見た目と操作性を決定する、JSP、CSS、画像ファイルなどの集まりです。テーマごとに異なるDefault.jspというJSPファイルと、そこからJSPやHTMLタグによりリンクされる、複数のJSPフラグメント、CSSファイル、画像ファイルなどの組み合わせで構成されています。図２は、ポータルに標準のテーマである「WebSphere」テーマの構成を、簡略化して表わしています。

これらのファイルは、PortalContent/themesフォルダに保存されていますが、Default.jsp、スタイルシート、画像など、テーマ固有のファイルは、PortalContent/themesフォルダの下に用意されているテーマごとのサブフォルダに保存されています。

テーマを定義するJSP内で、テーマ固有のファイルへリンクを行う場合は、<wps:urlFindInTheme>タグを使います。以下は、Styles.cssと画像へのリンクの例を、それぞれ表しています。

<link href='<wps:urlFindInTheme file=" Styles.css"/>' rel="styleSheet" …>　
<img src='<wps:urlFindInTheme file="show_tools_off.gif"/>'…>

Default.jspと、これらの<wps:urlFindInTheme>で示されたファイルは、サーバーの実行環境で処理される際、以下の優先順位を元に検索されます。

1. /locale_region
2. /locale
3. /client　（ブラウザーのタイプ）
4. /theme_context_root
5. /markup

例えば、ロケールがja_JPで、「WebSphere」テーマを使用している場合、Default.jspは、

1. themes/html/WebSphere/ie/ja_JP/Default.jsp
2. themes/html/WebSphere/ie/ja/Default.jsp
3. themes/html/WebSphere/ie/Default.jsp
4. themes/html/WebSphere/ja_JP/Default.jsp
5. themes/html/WebSphere/ja/Default.jsp
6. themes/html/WebSphere/Default.jsp

の順に検索され、その結果、実際に存在するthemes/html/Default.jspが読み込まれます。また、同様の条件で、Styles.cssファイルにはthemes/html/ja/Styles.cssが使用されます。Portal Designerでも、テーマの表示時や編集時に、同様の順序で必要なファイルを検索しますが、その検索は、ブラウザーはInternet Explorer (client = ie)、markupはhtmlという前提条件を元に行われます。また、ロケールはRADの稼動環境に依存しますが、設定ダイアログの「ポータル」→「ポータル・デザイン」カテゴリーで指定することもできます。

テーマの編集は、これまで、ポータルサイトの開発の中でも最も難しい作業のひとつでした。テーマを構成するJSPやCSSファイルはいくつかのフォルダに分散している上、JSPは多くのポータル用カスタム・タグで構成されているため、各ファイルを単独で編集することは困難な作業です。RAD V6.0のPage Designerは、これら複数のファイルを一括して表示し、シームレスに編集することできるように拡張されています。これにより、直感的なテーマの編集が可能になります。
テーマの編集を行うには、Portal Designerが開いた状態で、メニューの「編集」→「テーマの編集」を選択します。これにより、表示中のページに適用されているテーマに対応するDefault.jspが前述の検索順により特定され、Default.jspとそこからリンクされるJSPフラグメントがPage Designerにより開かれます。図３は、Page Designerで「WebSphere」テーマを開いた様子を表しています。

ヒント 最初にPage Designerが起動されると、下図のように複数個のアイコンが表示されます。これらは、コメント行やJSPタグなど、実行時には表示されないものの、編集には必要なオブジェクトを表していますが、編集内容によっては表示しない方が作業しやすい場合もあります。これらは、設定ダイアログの「Webツール」→「ページ・デザイン」→「編集記号」カテゴリーで非表示にすることができます。 (アイコン表示状態) (アイコン非表示状態)

起動時はDefault.jspが編集対象になっています。ここで、例えば、プレース・バー上をクリックすると、まずDefault.jsp 内の<%@ include file=”./PlaceBarInclude.jsp” %>タグが選択され、プレース・バー全体が黒枠で囲まれます。

更にプレース・バー内のオブジェクトをクリックすると、プレース・バー内にキャレットが移動し、PlaceBarInclude.jspの中身が編集可能になります。

例えば、メニューの「編集」→「スタイルの編集」で、スタイル・プロパティーの設定ダイアログを開き、カーソル位置の背景色を変更することができます。

この様に、クリックを繰り返すことでファイルの違いをあまり意識することなく、シームレスに編集を行うことができます。ESCキーを押せば、１つ上の階層のファイルに戻ることができます。

また、スタイルの編集は、Portal DesignerからCSS Designerを起動して行うこともできます。Portal Designerが開いた状態で、メニューの「編集」→「スタイルの編集」を選択すると、CSS Designerが起動され、表示中のテーマに使用されているスタイルシートの編集が開始されます。テーマ内やポートレットで使用される固有の色やバナー画像などは、このStyles.cssに定義されています。前述の例のPage Designerで行った編集も、実際には、Styles.cssファイルを変更しています。CSS Designerの画面には、左側にテーマ用スタイル・ルールを使用したHTMLのサンプルを用いたプレビューが、右側にStyles.cssファイルのソースが表示されています。

例として、プレース・バーの紫色の背景色を変更してみます。プレビュー内の紫色のバーを選択してコンテキスト・メニューを開くと、メニューに編集可能なスタイル・ルールの一覧が表示されます。ここでは、プレース・バーの背景色を変更するので、wpsPlaceBarを選択します。これにより、先ほどのスタイル・プロパティーの設定ダイアログが開かれ、背景色の設定が変更できます。この変更は、直ちに画面左のプレビューに反映されるため、全体の見栄えを確認しながら作業を行うことができます。

CSS Designerでの編集は、Page DesignerやPortal Designerにも直ちに反映されるため、Page DesignerやPortal Designerに切り替えれば、スタイルの変更をテーマに反映された状態で確認することもできます。

また、ポータル・プロジェクトには、ブラウザーやロケールごとにStyles.cssファイルやロケール固有の画像が存在しますが、ここで編集されるStyles.cssは、表示に使用されているファイルであり、ie (Internet Explorer)＋html+表示中のロケールの組み合わせに対応したものです。それ以外のロケールやブラウザー用のファイルに関しては、プロジェクト・エクスプローラーでPortalContent/themes内からファイルを探して、直接起動、編集することができます。

上に戻る

テストとデプロイ

このようにして編集した結果は、WebSphere Portalテスト環境を使用してRAD内で確認することができます。テスト環境は、作成したポータル・プロジェクトを、サーバーと同じ実行環境を用いて動作させるので、実際の動作を、RAD内のWebブラウザー上で確認することができます。

最後に、完成した結果を、デプロイ機能を使用して、ポータル・サーバー（ステージング・サーバー）に戻して完了です。

上に戻る

まとめ

これまで述べてきたように、Portal Designer、Page Designer、CSS Designerを使うことで、これまで複雑で難しかったポータルサイトの構築が、RAD上で直感的に行えるようになります。特に見た目の編集はWYSIWYG性が求められるため、これらのツールは、ポータルサイトの開発効率を上げるのに役立ちます。ここで紹介したRADのツールであるPortal Designer、Page Designer、CSS Designerは、全てソフトウェア開発研究所で開発されています。

参考文献

• WebSphere Portalについては「WebSphere Portal Information Center」に詳細が記述されています。
  
  
• こちらのページの「Demo - portal designer」で、Portal Designerのデモがご覧いただけます。
  
  
• こちらのページに、Rational Application Developerの評価版や修正プログラムに関する情報が掲載されています。

著者について

		内田健二はソフトウェア開発研究所の開発エンジニアであり、技術リーダーとしてPortal Designerの開発に携わっています。以前はPage Designerの開発を行っていました。

記事の評価

サイト改善のため、ご意見をお寄せください。こちらのフォームからお願いいたします。 この情報はお客様が目的を達成するうえで役に立ちましたか？ はい いいえ わからない   お気軽にご意見・ご感想をお寄せください。   この記事は役に立ちましたか？ 5 4 3 2 1 大変素晴らしい 不充分・不完全である

上に戻る