作成したVisualforceページをカスタムボタンから表示するときに、
同じボタンからPC版とモバイル版(Salesforce1)で違うページを表示したい場合にどうしたらよいのか?
と調べていたところ、全く出てこなかったのでメモ的な意味も含めて書いていく。
表示するページを切り替えたいと思った場合、多くの方はクッション用のVisualforceページを作成し、
その中でPC用ページとモバイル用ページの呼び出しを切り替えようと考えるのではないかと思う。
しかし、今回はクッションページを作るのが面倒というのに加えて、 カスタムボタンのURLパラメータを本命のページで使用したかったので カスタムボタンでモバイルの判定をしてしまおうと考えた。
今回は、取引先のページレイアウトにカスタムボタンを追加して、PCとモバイルで表示されるページが別のものになるか実験していく。
色々調べてみたところ、どうやら $User.UITheme なるものがVisualforce内で使用することができるらしい。
Visualforce 開発者ガイド - $User.UITheme および $User.UIThemeDisplayed
似たようなものが、カスタムボタンの編集画面のエディタで使えそうだと思い見てみると、
差し込み項目の種類 → $User
項目の挿入 → UITheme
というものを発見!
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJeN4GAdrQid9C8kl6D_XvMZbomWEgl5K5nghWCC4ed0EQlALZ0uFOuMx9_10Kq5f7It3qf0STSubdwRsYDTq1-o2106ExmuvXuiHAUIVNF8bvVJcwDr0UcKTclET3RX2-h65isI127xPX/s400/01_%2524User.jpg)
これを使ってモバイルならmobilePageを、それ以外ならpcPageを表示するようにしてみる。
上記の開発者ガイドを参考にすると、$User.UITheme の値が Theme4t となる場合はSalesforce1と判定されるみたい。
なので、Theme4t となる場合にmobilePageが表示されるようにURLを記述してみた。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMpaFPSC-K6JtnI1Ak6n2gxK6eI4YKOOs-Lin-WaMS2VwLY7ldV17F03_EzPqpoU6_h9GGIlE5iHb0g6uVeacvu1UIVFhB9EaEmuHYP1O83HfuXKaRCt957JfkSOei22KiaiVYH90DdQn1/s400/01_URL.jpg)
構文エラーは無いのでこれでいけると思いきや、ボタンを押したら以下のようなエラーが…
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxiUfPfhSQ-x_tH_QwLUrKRLeyQgeJfCDCZkUG72Uxo-nxyfsE_mkd9DA4Y5Z_WMTrN9ERvD1on4t_Gb9W1u_Bk8wG6WUlF_T7vurNNLICW1rbbcIsbcML2NXFD8rCvx07zmU68oMs2BFv/s400/01_%25E3%2582%25A8%25E3%2583%25A9%25E3%2583%25BC.jpg)
何が悪かったのかと、このページのURLを確認してみると以下のようになっていた。
https://ap2.salesforce.com/servlet/%2Fapex%2FpcPage?retURL=0012800000kvBhN
%2Fってなんだ?と思ったら、どうやらシングルクォーテーション「'」で囲まれたスラッシュ「/」は
文字コードに置き換わってしまうらしい。
ただ、よくよく考えると「/apex/」までは共通なので、
そこはIF文の外に出せば問題なさそうということに気付き以下のように書き換えて再チャレンジ。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOfx7tUieIxpy0f6l63D3Vb4Bj90WjdfBrVv19LryWw-xy6wPSeav8uhVInXIWFBEoLZLYbX63M7wPP4Opw-R1qOLiYuDFhp9huXBrj82vQRnN53yI550n_3LVE5UdgBBMG7l3ET-r-xtf/s400/01_URL%25E6%259B%25B8%25E3%2581%258D%25E6%258F%259B%25E3%2581%2588.jpg)
すると、今度は無事にPC用のページが表示された!
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggi1vpxN0V4f2nRX-dCyox0bSJhJDRKfPDIUvlWt64-XXDKz2NR-wUK721dErIytwaBi1NMo06z3MQi1wuTXfnM99NTS3S9d-kXwVZhK5Obc3kLKf9c81p2pt4-8OuTu0zYCirBULABQVW/s400/01_PC.jpg)
そして、モバイルのSalesforce1アプリからカスタムボタンを押してみると、ちゃんとモバイル用のページが表示されている。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUrJ_9l7FhqpXplLoSJBop8erKVLhxa-PFQ1Ud9MizvqgeXD3jjheS70hj_RzgefOHj6NAOk5SmwDkStgjQ67eDYDACI0c9uqMfa7tV7kml_CUzLKUOhMUPG9EaQ7yxSJkWasavuLNYlST/s400/01_sf1.jpg)
こんな感じで、カスタムボタンだけでPCかモバイルかの判定ができた!
と調べていたところ、全く出てこなかったのでメモ的な意味も含めて書いていく。
表示するページを切り替えたいと思った場合、多くの方はクッション用のVisualforceページを作成し、
その中でPC用ページとモバイル用ページの呼び出しを切り替えようと考えるのではないかと思う。
しかし、今回はクッションページを作るのが面倒というのに加えて、 カスタムボタンのURLパラメータを本命のページで使用したかったので カスタムボタンでモバイルの判定をしてしまおうと考えた。
今回は、取引先のページレイアウトにカスタムボタンを追加して、PCとモバイルで表示されるページが別のものになるか実験していく。
色々調べてみたところ、どうやら $User.UITheme なるものがVisualforce内で使用することができるらしい。
Visualforce 開発者ガイド - $User.UITheme および $User.UIThemeDisplayed
似たようなものが、カスタムボタンの編集画面のエディタで使えそうだと思い見てみると、
差し込み項目の種類 → $User
項目の挿入 → UITheme
というものを発見!
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJeN4GAdrQid9C8kl6D_XvMZbomWEgl5K5nghWCC4ed0EQlALZ0uFOuMx9_10Kq5f7It3qf0STSubdwRsYDTq1-o2106ExmuvXuiHAUIVNF8bvVJcwDr0UcKTclET3RX2-h65isI127xPX/s400/01_%2524User.jpg)
これを使ってモバイルならmobilePageを、それ以外ならpcPageを表示するようにしてみる。
上記の開発者ガイドを参考にすると、$User.UITheme の値が Theme4t となる場合はSalesforce1と判定されるみたい。
なので、Theme4t となる場合にmobilePageが表示されるようにURLを記述してみた。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMpaFPSC-K6JtnI1Ak6n2gxK6eI4YKOOs-Lin-WaMS2VwLY7ldV17F03_EzPqpoU6_h9GGIlE5iHb0g6uVeacvu1UIVFhB9EaEmuHYP1O83HfuXKaRCt957JfkSOei22KiaiVYH90DdQn1/s400/01_URL.jpg)
構文エラーは無いのでこれでいけると思いきや、ボタンを押したら以下のようなエラーが…
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxiUfPfhSQ-x_tH_QwLUrKRLeyQgeJfCDCZkUG72Uxo-nxyfsE_mkd9DA4Y5Z_WMTrN9ERvD1on4t_Gb9W1u_Bk8wG6WUlF_T7vurNNLICW1rbbcIsbcML2NXFD8rCvx07zmU68oMs2BFv/s400/01_%25E3%2582%25A8%25E3%2583%25A9%25E3%2583%25BC.jpg)
何が悪かったのかと、このページのURLを確認してみると以下のようになっていた。
https://ap2.salesforce.com/servlet/%2Fapex%2FpcPage?retURL=0012800000kvBhN
%2Fってなんだ?と思ったら、どうやらシングルクォーテーション「'」で囲まれたスラッシュ「/」は
文字コードに置き換わってしまうらしい。
ただ、よくよく考えると「/apex/」までは共通なので、
そこはIF文の外に出せば問題なさそうということに気付き以下のように書き換えて再チャレンジ。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOfx7tUieIxpy0f6l63D3Vb4Bj90WjdfBrVv19LryWw-xy6wPSeav8uhVInXIWFBEoLZLYbX63M7wPP4Opw-R1qOLiYuDFhp9huXBrj82vQRnN53yI550n_3LVE5UdgBBMG7l3ET-r-xtf/s400/01_URL%25E6%259B%25B8%25E3%2581%258D%25E6%258F%259B%25E3%2581%2588.jpg)
すると、今度は無事にPC用のページが表示された!
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggi1vpxN0V4f2nRX-dCyox0bSJhJDRKfPDIUvlWt64-XXDKz2NR-wUK721dErIytwaBi1NMo06z3MQi1wuTXfnM99NTS3S9d-kXwVZhK5Obc3kLKf9c81p2pt4-8OuTu0zYCirBULABQVW/s400/01_PC.jpg)
そして、モバイルのSalesforce1アプリからカスタムボタンを押してみると、ちゃんとモバイル用のページが表示されている。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUrJ_9l7FhqpXplLoSJBop8erKVLhxa-PFQ1Ud9MizvqgeXD3jjheS70hj_RzgefOHj6NAOk5SmwDkStgjQ67eDYDACI0c9uqMfa7tV7kml_CUzLKUOhMUPG9EaQ7yxSJkWasavuLNYlST/s400/01_sf1.jpg)
こんな感じで、カスタムボタンだけでPCかモバイルかの判定ができた!
0 件のコメント:
コメントを投稿