XPages Tips : ブラウザの種類に応じて読み込むCSSを切り替える
XPages Tips 第４弾は「ブラウザの種類に応じて読み込むCSSを切り替える」です。
同じスタイルシートを使用しても、ブラウザによって見栄えが異なってしまうことがあります。
こうしたブラウザによる違いに対応するために、ブラウザごとに別々にスタイルシートを用意して
同じ見栄えになるように調整することも多いのではないでしょうか？
ここでは、ブラウザごとに用意したスタイルシートを、アクセスしてきたブラウザの種類に応じて
切り替える方法を紹介します。
1)まず用意したCSSファイルをすべて設計要素の「リソース」>「スタイルシート」に取り込みます
2)次に、そのスタイルシートをしようするXPageを開き、プロパティ・ビューの「リソース」タブ
から、1)で取り込んだCSSをページに追加します。
3)これだけではすべてのスタイルシートがページに読み込まれてしまうため、各スタイルシートに
ついてアクセスしてきたブラウザの種類によって読み込むかどうかを決めるようにします。
この設定は、2)で開いた XPage の「すべてのプロパティ」の中の、「基本」>「resources」>
「sytlesheet[x]」>「rendered」属性です。この属性が true の場合はCSSがページに読み込まれ、
false の場合は読み込まれません。
各スタイルシートの「rendered」属性に対して、「値の計算」メニューでブラウザの種類に応じて
true/false を設定するようなサーバーサイドJavaScriptロジックを設定します。ブラウザの種類の
判定には、context.getUserAgent() 関数を使用します。例えば、Firefox かどうかを判定するには
context.getUserAgent().isFirefox() と指定します。
以上で完了です。
ブラウザを切り替えてアクセスすると、読み込まれるCSSが変わっているはずです。
多種のブラウザに対応したアプリケーションを作成する際などには是非お試しください。
小野 充志 (onoat)
WPLC Business Partner Technical Enablement Japan Team、ソフトウェア開発研究所
カテゴリー
: [ Domino | Notes | XPages ]
2009年 11月 21日 , 23:45:00 JST
|
WPLC (Lotus + Portal) の最新情報や、パートナー様との出来事をブログでお伝えします
