Salesforce1でのVisualforce開発でちょっと気にしたいこと - TECH BLOG

2015年10月21日-今日は、何の日かご存じですか？

映画「バック・トゥ・ザ・フューチャー PART2」で主人公のマーティーが、1985年からタイムスリップしてやってくる日です。映画を見た人は、そこで登場した未来の技術が、本当に実現されるのか、期待に胸を躍らせたと思いますが、実際に近々、自動でヒモが締まるナイキシューズやホバーボードが発売される予定があるらしいですね。

さて、その当時（1985年）、既に社会人だった皆様は、30年後、ポケットに入れて持ち運びできる電話機器を使って、業務日報を書いたり、基幹システムのデータを参照したり、遠隔地にいる複数の人とテキストコミュニケーションしたりして仕事をしていることを想像できたでしょうか？

今日は、そんな夢のようなことを実現できるSalesforce1で動くモバイルアプリをVisualforceで開発する場合のポイントを紹介したいと思います。

そもそも何から始めるの

Salesforce1でメニュー化したいVisualforceをタブ化します。
タブ化したVisualforceの「Salesforce モバイルアプリケーションでの使用が可能」をチェックします。
[設定] の[Salesforce1 の設定] | [ナビゲーションメニュー] にアクセスすると、 [選択可能] リストで項目に2で設定したVisualforceが表示されますので、追加して、配置してください。

メニューの並び順のコントロールが特殊なので、以下を参考にして設定してください。 http://releasenotes.docs.salesforce.com/ja-jp/winter14/release-notes/customizingnavigationpane.htm

ポイントとしては、

・[スマート検索項目]というのは、最近検索したオブジェクトの一覧が表示されます。メニューの [最近] というセクションに表示されるものがこれにあたります。

・[最近]の並び順の設定方法が、分かりにくいですが、Salesforce のフルサイトで実行された[検索結果] 画面でユーザがオブジェクトを固定（ピン留め）すると、[最近] セクションの上部に固定されます。

・メニューの[スマート検索項目] の要素の下に配置したものはすべて、ナビゲーションメニューの [アプリケーション] セクションに表示されます。

HTML5対応

HTML5 を使えば、デバイスにソフトウェアをインストールせずに、タッチイベントをサポートするモバイルインターフェースを提供できます。

Visualforceページのデフォルトの標準フレームがHTML4となっていますので、 HTML5での実装を行う場合、DOCTYPEの宣言を指定する必要があります。

これだけです。。。。

<apex:page docType="html-5.0"

HTML5 開発を簡単にするコンポーネントがいくつか用意されているのですが、 <apex:input は、HTML5 に適した新しい入力コンポーネントです。

これを使えば、日付ピッカーや選択リスト、数値範囲など、利用デバイスに合わせて、以下の様な入力ウィジェットを自動で提供してくれます。

非常に便利な <apex:input ですが、利用する上で何点か注意するところがあります。

・複数選択リストに対応できるモバイル向けのコンポーネントがありません。コントローラ側で選択リスト値を組み立てて、<apex:selectbox の属性であるmultiselectをtrueにしたものをつくれば、できますが、レコードタイプごとに選択肢を制御してるとその制御は、効かなくなるので注意。

<apex:inputfieldも一応動きますがスマホサイズだと画面からはみ出すし、なにを選択してるかわからない動きのものになってるので、代替案を検討するべきです。複数選択リストを<apex:inputfield（レコードタイプが効いた選択リスト）で隠しコンポーネントで画面上に描画し、OptionをjQueryで読み取って、<apex:actionFunction　を使ってコントローラ側に渡して、無理やり選択リストを作る方法もとれなくもないですが、作りはできるだけシンプルにしておいたほうがよいでしょう。

・window.open() で実装するようなものがあった場合、モバイルではうまく動作しない場合があるのと、使い勝手が悪いので、jQueryのライブラリなどを使って画面サイズに合わせたモーダルウィンドウかインラインアコーディオンで実装したほうがよいでしょう。

・<apex:commandButtonでimmediate="true"をつけると必須チェックをスルーできますが、 docType="html-5.0"を宣言したページでは、そのような動作になりません。 <apex:commandButtonタグに、formnovalidate="formnovalidate"を宣言することで回避できます。

・<apex:input type="date" ですが、モバイルで見るとドラムロール式の入力タイプに、デスクトップブラウザで見るとDatePickerで表示され、非常に便利ですが、IE と Firefoxで動作しません。。。 <apex:inputFieldで代用するか、jQueryのライブラリを使って同等の機能を実装する必要があります。 https://help.salesforce.com/apex/HTViewSolution?id=000206142&language=en_US

動作環境に潜む罠

どのOS、どのバージョンを対象とするかは、開発工数やテスト工数に大きなインパクトがありますので、開発前に必ず合意しておき、限定できるものであれば、できるだけ範囲を絞ることをお薦めします。

流行りのレスポンシブ対応も同様です。確かにCSSフレームワークの「Bootstrap」など使えば、比較的容易に実装できるのは確かですが、なんでもかんでもOKにするときりがありませんので、注意する必要があります。ただし、<apex:pageBlock、<apex:pageBlockTable、<apex:pageBlockSection、<apex:pageBlockSectionItem、<apex:pageBlockButtonsなどの標準タグは、デスクトップ向けに最適化されているものですので、標準のHTMLマークアップやBootstrapなどのCSSを使って、開発することが推奨されております。

テストは、エミュレータなど使って開発すると効率的ですが、実機でないとどうしても発生しない現象があるので、必ず準備しておきましょう。

最近だと、iOSの実機でしか発生しないものとして以下の現象にハマったので、記載しておきます。

・選択リスト、複数選択リストをタップすると画面上部にスクロールされたり、画面が真っ白になってしまう。 ※JavaScriptでの回避方法があります。

https://success.salesforce.com/issuesview?id=a1p30000000T2oLAAS https://success.salesforce.com/issuesview?id=a1p300000008Y6nAAE

・入力フォームを長押しすると文字が入力できなくなる状態になる ※JavaScriptでの回避方法があります。 https://success.salesforce.com/issues_view?id=a1p300000008Y6nAAE

さいごに

HTML5 では、カメラや GPS など高度なモバイル機能もサポートされます。IOTが盛り上がる今、アイデア次第でモバイルアプリケーションの可能性は無限と言えます。開発する上でいろんな課題に悩まされるかもしれませんが、頑張りましょう！「If you put your mind to it, you can accomplish anything.（何事もなせば成る。）」"ドク"ことエメット・ブラウン博士の口癖でしめたいと思います。