ポートレット機能
まず最初に、このサンプルプロジェクトを見ていく上で最初に理解してもらう必要がある「ポートレット機能」について説明します。
SEOに有利、frameタグやdivタグを使わずに部品埋め込み
frameタグやAjaxでよく使われるdivタグは、HTMLで複数のページ（ガジェット）を1つのポータル画面に組み込み、それぞれを独立して画面遷移させるためにはとても便利です。しかし、SEOの視点から考えると、クローラーやサーチエンジンロボットに巡回してもらうためにはあまり適しません。
Alinous-Coreではポートレット機能をサポートしており、1つのHTMLに複数のHTMLページを埋め込み、独自に画面遷移させることができます。
サンプルプロジェクトのトップ画面
サンプルプロジェクトを実行するために、Alinous-Coreのデバッグ用サーバをEclipseから立ち上げ、
- http://localhost:8080/
にアクセスすると次のような画面が表示されます。
ここで赤い破線で囲まれている部分に注目してください。この部分は、tableタグ内の1つのtdタグ（セル）にあたります。実は、この部分に他のページを埋め込んでいます。実際に埋め込んでいるのは、「ALINOUS_HOME/default.html」です。そのため、
- http://localhost:8080/default.html
にアクセスすると下図のようなページが表示されます。これは、まさに初期ページのtdタグに埋め込まれていたものだということが分かると思います。
また、サンプルプロジェクトの初期画面の左側にあるメニューにある「Select DB Form」というリンクをクリックすると、その「default.html」が埋め込まれていた部分に別のページが入ることが分かると思います。そして、そのページにあるフォームのボタンをクリックすると、上図の赤い破線に囲まれているtdタグの領域内で画面遷移することが分かります。
tdタグに別のページを組み込む方法
では、次にどのようにtdタグの中に別のページを組み込むかを具体的にHTMLのコードを見ながら説明していきます。まずは、「ALINOUS_HOME/index.html」の中のtdタグの部分を実際に見てみましょう。
<td alns:tagid="contents" alns:inner="/default.html"> </td>
tdタグに、alns:tagidとalns:innerというAlinous-Core用の属性が付いています。この2つの属性を利用することによって、初期状態の「index.html」のtdタグの部分に「/default.html」を埋め込むことができます。alns:tagidはtdタグの領域に名前を付けるために利用します。alns:innerは初期状態で埋め込まれるファイルを指定します。
では、初期画面の左側の「Select DB Form」というリンクをクリックしたときの動作はどのように実現されているのでしょうか？ 実際にそのリンクの部分のHTMLのコードを見てみます。
<a href="/select/" alns:target="contents">Select DB Form</a>
aタグにalns:targetという属性が付いています。この属性を付けることによって、ページ全体を遷移させるのではなく、名前を付けたtdタグの領域のみ遷移させることができます。また、このalns:targetにはthisという特殊な値を入れることができます。この設定値は、自分がどこかのHTMLに埋め込まれている場合には、埋め込まれているtdタグの中をhrefに指定されているURLに遷移させます。自分自身がトップの場合にはHTML全体を遷移します。
この様子を示すサンプルは、「Select DB Form」のリンクをクリックした後に表示される「ALINOUS_HOME/select/index.html」にあり、フォームの下に「TEST」というリンクがあります。ソースは次のようになっています。
<a href="/" alns:target="this">TEST</a>
このaタグは今の自分の領域にトップページをそのまま、まるごと入れ込むことを意味しています。実際に、このリンクをクリックすると入れ子のような状態になりますが、これを複数回繰り返すと下図のような状態になります。このような状態でもそれぞれの領域が独立した状態を持って画面遷移します。
このことは、入れ子になったページのリンクをクリックしてみると、そのクリックされた部分のページが入れ子になっていないときと同じ動きをすることで確認できます。
ポートレット機能と開発・メンテナンス効率
以上がポートレットについての説明です。Alinous-Coreは、実装する機能毎の独立性を出すように非常に気を付けて開発をしています。この「機能ごとに独立性を出す」ということは、開発効率とメンテナンス効率を上げるうえで非常に重要な要素になってきます。
Web系の開発をしている方は分かると思いますが、フレームタグやAjaxを使わずにタブ表示をしたりする開発はとても大変です。外側の共通デザインと内側のフォームや結果表示の部分が独立していないので、すべての画面のパターンについてプログラムを作らなくてはならなくなります。このような場合には、
- プログラム（とHTML）をたくさん書かなくてはいけない
- 一部デザインをなおすのに、たくさんの場所をなおさなくてはならない
- テストがとてつもなく量が多くなる
- エンドユーザーから見た機能の量とプログラムの工数とがかけ離れて、見積りで単位作業あたりやすく見積もらないといけない
という問題が発生し非常にやっかいです。このような問題を発生させないために、Alinous-Coreのポートレットを使うことで非常にメンテナンスをしやすく開発効率の良いシステムを開発できます。「Simple is best.」とよく言いますが、プログラムの構造がシンプルであれば開発効率もメンテナンス効率も両方良くなるのです。
