12. 注意事項¶
12.1. 画面を作成する上での注意事項¶
ポートレットも Web アプリケーションですので、基本的には通常の開発方法と変わりません。
しかし、結果として表示されるポートレットの画面はポータル画面の一部として表示されるため、画面を作成する上で以下のような制約事項があります。
ポートレットは HTML の一部分として表示されるため、HTML 構造を表す以下のようなタグは利用できません。<BODY>タグ内に表示されるドキュメントの内容のみ記述するようにしてください。ブラウザによっては、以下のタグを記述しても表示されますが、推奨はされません。
- <HEAD>
- <BODY>
- <!DOCTYPE>
画面のスタイルはポータル画面で指定されます。前項に記述したように<HEAD>タグが利用できないため、スタイルクラスの定義は記述できません。タグに個別にスタイルを設定することもできますが、できるだけスタイルに依存しないシンプルな画面作成をしてください。
- <STYLE>タグや<LINK>タグを用いてスタイルを指定することによって、ポータル画面のレイアウトに影響を与えることがあります。
JavaScript で利用するオブジェクト名や変数名、関数名をユニークな名前で定義する必要があります。これは通常の画面開発でも同様ですが、ポートレットの場合、ポータル画面上の全てのポートレットでバッティングしないようにする必要があるため、特に注意が必要です。また、公開された共通の JavaScript を利用する場合も、そのバージョンが一致しないと思わぬ動作をする可能性があるため、注意する必要があります。ポータル画面では、以下の共通ライブラリを利用しているため、ポートレットで利用する場合は、同じバージョンのライブラリを利用するようにしてください。
- prototype.js v1.6.0.3
- script.aculo.us(builder.js, effect.js, dragdrop.js, slider.js) v1.8.2
タグの ID 属性やコントロールの NAME 属性をユニークな名前で定義する必要があります。全ての ID にアプリケーションに割り当てられるプリフィックスをつけるなどしてください。また、以下のプリフィックスはシステムおよび intra-mart が提供するアプリケーションが使用するため、利用できません。
- ‘IM_****’
- ‘_’ (アンダースコア)
ポータル画面には複数のページが表示されるため、処理に時間のかかるページを作成すると、ポータル画面が表示されるまでにそれだけ時間がかかってしまいます。できるだけシンプルな画面を作成することをお勧めします。 ポータル画面では、ポートレットを最大化した場合コンテンツの高さをポートレットに合わせて最大化する処理を行っています。しかし、コンテンツが複数の要素から構成されている場合、どの要素を最大化するかの制御は行えないため、意図しない結果となる場合があります。そのような場合、コンテンツの全てを<div>要素で囲うなどして、要素が1つだけとなるように作成してください。 ポータルの画面においてprototype.jsを利用しているため、CSJSの変数$をjQueryとして利用できません。ポートレットで作成された画面でCSJSを利用する場合、CSJSの変数$は利用しないようにしてください。jQueryを利用するためには、以下をコードを参照して記述してください。<script type="text/javascript"> jQuery('#aaa').xxx; // $を使用しないで jQuery を使う。 jQuery(document).ready(function($){ // ここでは、$はjQueryとして使えます。 }); </script> ポータル画面には同一のポートレットを複数配置することが出来ますが、ポートレットでCSJSを利用し、固定的な名前の関数を宣言した場合、正常に動作しなくなります。(関数名の重複)ポートレットで関数名を動的に生成するようにしてください。<script type="text/javascript"> jQuery(document).ready(function($){ func_{ユニークなID}(); // 画面作成毎に{ユニークなID}を生成する。 }); function func_{ユニークなID}() { // 画面作成毎に{ユニークなID}を生成する。 } </script> ポータル画面には同一のポートレットを複数配置することが出来ますが、ポートレットでHTMLタグのid属性に固定値を設定した場合、正常に動作しなくなります。(id属性値の重複)ポートレットでid属性値を動的に生成するようにしてください。<script type="text/javascript"> function submit_{ユニークなID}() { // 画面作成毎に{ユニークなID}を生成する。 jQuery('#form_{ユニークなID}').submit(); // 画面作成毎に{ユニークなID}を生成する。 } </script> <form id="form_{ユニークなID}" > // 画面作成毎に{ユニークなID}を生成する。 </form >