Visualforce 開発者ガイド
jクロスプラットフォームの互換性のあるページの開発
BlackBerry と iPhone の組み込みブラウザの両方で見栄えがよくて正常に動作する Visualforce Mobile ページを作成することは、困難な作業になる場合があります。Salesforce では、次のいずれかのアプローチを使用することをお勧めします。
- 分割とリダイレクト
- BlackBerry 用のページと iPhone 用のページを別々に作成します。Visualforce Mobile ページのタブを作成する場合は、そのタブが BlackBerry 用に最適化されたページをポイントするようにします。その Visualforce Mobile ページの最上部に、接続しているデバイスが BlackBerry スマートフォンでない場合は、iPhone ページに自動的にリダイレクトする JavaScript を含めます。
1<apex:page> 2<language="javascript" type="text/javascript"> 3 if(!window.blackberry){ 4 window.location.href='{!$Page.iPhoneOptimizedVersion}'; 5 } 6</script> 7</apex:page> - このアプローチでは、すべてのデバイスに最高のユーザ操作性を提供し、開発が長期にわたるという問題を最小限に抑えます。ただし、2 つの個別のアプリケーション (デバイスタイプごとに 1 つのアプリケーション) を管理する必要があります。
- 最低限の共通機能
- 最低限の共通機能を組み込み、存在を感じさせない、最小限の JavaScript のみを含めます。タグ内にインラインイベントを含むスクリプトは使用しないようにします。お客様の組織のデバイスによっては、JavaScript を一切使用しないようにする必要がある場合があります。旧型の BlackBerry スマートフォンでは、どのような JavaScript でも、使用するとページが正常に機能しなくなる可能性があります。
- 条件コード
- デバイス条件コードおよびスタイルを作成します。ブラウザによってサーバに渡されるヘッダーに含まれているユーザエージェント文字列で、接続しているデバイスが BlackBerry であるか iPhone であるかを識別します。Visualforce Mobile ページのコードはユーザエージェント文字列を評価し、接続しているデバイスに適したコンテンツを表示します。Visualforce の利点は、マークアップがサーバ側で解釈され、クライアントは条件ステートメントの評価に基づいて、表示できるマークアップのみを取得する点です。条件コードの使用は、最も高度なアプローチですが、コードがさらに複雑になるため必ずしも長期的な最良のソリューションとはいえません。
- たとえば、次のマークアップでは、mobileImages 静的リソース内に保存されている画像の表示のみを行う mobileSample というカスタムコンポーネントを作成します。ただし、表示する画像は、コンポーネントコントローラの調査に従ってブラウザがレポートしたユーザエージェント値に基づいて、実行時に決定されます。
1<apex:component controller="mobileSampleCon"> 2<apex:image value="{!URLFOR($Resource.mobileImages, deviceType + '.jpg')}"/> 3</apex:component>1// mobileSampleCon Controller code snippet 2... 3public class mobileSampleCon { 4 5 public String deviceType { get; set; } 6 7 public MobileSampleCon() { 8 String userAgent = ApexPages.currentPage().getHeaders().get('USER-AGENT'); 9 10 if(userAgent.contains('iPhone')) { 11 deviceType = 'iPhone'; 12 } 13 else if(userAgent.contains('BlackBerry')) { 14 deviceType = 'BlackBerry'; 15 } 16 } 17} - 次の例では、接続しているアプリケーションに応じて、異なるスタイルシートを読み込みます。まず、複数のデバイスで表示するページを作成できます。Global.zip ファイルおよび SendEmail.zip ファイルは参照されている CSS ファイルを含む静的リソースです。conditionalStylesheets カスタムコンポーネントの場合、ブラウザの種類に基づいて表示される複数の CSS 宣言を定義できます。
1<!-- Visualforce code snippet --> 2... 3<head> 4<linkrel="stylesheet" type="text/css" href="{!URLFOR($Resource.Global, '/inc/css/global.css')}"/> 5<c:conditionalStylesheets resource="{!$Resource.Global}" /> 6<linkrel="stylesheet" type="text/css" href="{!URLFOR($Resource.SendEmail, '/inc/css/local.css')}"/> 7<c:conditionalStylesheets resource="{!$Resource.SendEmail}" /> 8</head> 9...最後に、browserName 値は前の例と同じ方法で Apex コントローラで決定されます。1// Visualforce component code 2<apex:component controller="myConditionalController"> 3 4<apex:attribute name="resource" description="The resource name" type="String" required="true"/> 5 6// for a BlackBerry standard browser, e.g., Bold 7<apex:outputPanel layout="none" rendered="{!browserName = 'BlackBerry'}"> 8<linkrel="stylesheet" type="text/css" href="{!URLFOR(resource, '/inc/css/BBBrowser.css')}"/> 9</apex:outputPanel> 10 11// for a BlackBerry embedded browser in Salesforce Classic 12// the Apex code distinguished between the regular and embedded browsers 13<apex:outputPanel layout="none" rendered="{!browserName = 'Salesforce'}"> 14<linkrel="stylesheet" type="text/css" href="{!URLFOR(resource, '/inc/css/BBEmbedded.css')}"/> 15</apex:outputPanel> 16 17// for the iPhone Safari browser (inside Salesforce Classic or not) 18<apex:outputPanel layout="none" rendered="{!browserName = 'iPhone-Safari'}"> 19<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> 20</meta> 21<linkrel="stylesheet" type="text/css" href="{!URLFOR(resource, '/inc/css/IPhone.css')}"/> 22</apex:outputPanel> 23 24</apex:component>1// Apex code snippet 2... 3public static String getBrowserName() 4{ 5String userAgent = ApexPages.currentPage().getHeaders().get('User-Agent'); 6 if (userAgent.contains('iPhone')) 7 return 'iPhone-Safari'; 8 if (userAgent.contains('Salesforce')) 9 return 'Salesforce'; 10 if (userAgent.contains('BlackBerry')) 11 return 'BlackBerry'; 12 return 'other'; 13} 14...