いいね!数

0

閲覧数
195

毎度お世話になっております。

先日、下記サイトを参照しながら、ExtensionLibraryを導入しました。

http://www-10.lotus.com/ldd/ddwiki.nsf/dx/OpenNTF_XPages_Extension_Library_%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E6%96%B9%E6%B3%95

8.5.3の最新版をインストールし、デモアプリ(XPagesExt.nsf)の設計を眺めてます。

 

上記に関連しての質問です。

XPagesExt.nsf/mobileDemo.xsp

こちらをブラウザで参照すると、

iPhoneではiPhone風の画面、

PCではAndroid風の画面で表示されますが、

どうやって切り替えているのかがわかりません。

お分かりになる方、教えていただければ幸いです。

 

1.

そもそも mobileDemo.xsp 内にスタイルシートの設定が見受けられません。

どこでCSSを設定しているのでしょうか。

*15:30 追記

他のサイトで少し勉強しまして、、、

https://www.ibm.com/developerworks/jp/ysl/library/lotus/y-lot-xpages-mobilecontrol-1/

モバイル用prefixを利用したxpage名にすることによって、モバイル用のCSSがブラックボックス的に付加されるのかなぁ、と推察しています。

(つまりこのアプリの設定だと、xpage名が"mobileほげほげ.xsp"だと、デバイス?UA?にあわせたモバイル用CSSが自動付加される?)

合ってますでしょうか。

2.

PCのブラウザ(Windows_Safari)のUAを変更してみてるのですが、Android以外の表示になりません。iPhoneのUAも設定してみたのですが、Androidのままです。

*15:30 追記

こちらは上記サイトを見てもわかりませんでした。

 

ブラウザのページソースを見ると、確かにスタイルシートの設定がされているのですが。。。

サーバー情報: | クライアント情報: | 
カテゴリ:アプリ開発 - XPages | タグ:
  | 質問日時:2015/12/09 15:53:34

回答・コメント

いいね!数

0

XPagesのMobileDemoはカスタムコントロールのFrame_Mobileを呼んでいて
Frame_MobileからFrame_iPhone,Frame_Android,Frame_BlackBerryを呼んでいるようです。
そこのカスタムコントロールではないかと思います。

回答日時:2015/12/09 12:06:18

いいね!数

0

NDOMINO-S様

早速のご回答ありがとうございます。

 

>XPagesのMobileDemoはカスタムコントロールのFrame_Mobileを呼んでいて
>Frame_MobileからFrame_iPhone,Frame_Android,Frame_BlackBerryを呼んでいるようです。
>そこのカスタムコントロールではないかと思います。

 

フレームはあくまでPC表示でタブ切り替え用に設けられているもののようです。

Mobile_Home.xsp 内で、以下のソースが記述されており、

----

 <script type="text/javascript">
  dojo.addOnLoad(function() {
   if(navigator.userAgent){
    var agent=navigator.userAgent;
    if(agent.indexOf("iPad") >= 0
     || agent.indexOf("iPhone") >= 0
     || agent.indexOf("iPod") >= 0
     || agent.indexOf("Android") >= 0
     || agent.indexOf("Blackberry") >= 0) {
     location.href = "mobileDemo.xsp";
    }
   }
  });
 </script>

----

つまり、UA判断で、iPad、iPhone、iPod、Android、Blackberry、文字列が含まれている場合は、

"mobileDemo.xsp" を直接表示させるようになっているため、

"mobileDemo.xsp" にてCSSの切り替えが実施されているように思われます。

 

回答日時:2015/12/09 12:53:00

いいね!数

0

UAで判断することもできますが、CSSの @media での対応も可能です。

http://allabout.co.jp/gm/gc/396404/3/

IE8など古いブラウザには対応していませんが。

 

追記:

質問の内容とはちょっとずれてましたね・・・。この内容はご参考までとさせてください。

 

回答日時:2015/12/09 15:16:55

いいね!数

0

EBIHARA様

 

ご回答ありがとうございます。

これはこれでいつの日か利用することがありそうです。

ブクマしておきます。

回答日時:2015/12/09 15:50:49