tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Salesforce1ではじめるHTML5モバイルアプリの開発

Salesforce1のアプリを利用できる端末を手に入れたので、Salesforce1を使ったHTML5モバイルアプリの開発について確認してみました。

f:id:tyoshikawa1106:20140113143832j:plain

f:id:tyoshikawa1106:20140118135904p:plain:w200


Salesforce1で使えるHTML5のモバイルアプリ開発をしたい場合はVisualforceページで開発することになります。

設定の「モバイル管理」にある「モバイルナビゲーション」でSalesforce1で表示したいVisualforceページタブを選択するだけでSalesforce1のアプリケーションからアクセスすることが可能になります。

f:id:tyoshikawa1106:20140118130058p:plain


モバイルナビゲーションの設定後、Salesforce1のアプリケーション内に選択したVisualforceページのタブが表示されるようになります。

f:id:tyoshikawa1106:20140118131135p:plain


PCからアクセスしたときはこのように表示されるVisualforceページですが、

f:id:tyoshikawa1106:20140118131605p:plain


モバイル端末のSalesforce1アプリからだとこのように表示されました。

f:id:tyoshikawa1106:20140118132134p:plain


最初想像していたモバイル端末だから使いづらくなるといったことはありませんでした。JavaScriptの処理やSOAP APIによる更新処理も問題なく動作してくれるので、ほぼPCからアクセスしたときと同じように利用できそうです。

f:id:tyoshikawa1106:20140118133537p:plain


ルックアップ項目のフロート表示も問題なく動いてくれます。リンク先はSalesforce1用の標準ページになっていました。

f:id:tyoshikawa1106:20140118134326p:plain


端末の表示が縦向き、横向きと切り替わったときには、表示幅が自動で調整されるようになっていました。

f:id:tyoshikawa1106:20140118134937p:plain:w300


PCで使うためのVisualforceページでも使用時に困ることはありませんでしたが、やっぱりモバイル端末向けにつくられた画面ではないので、モバイル端末のみで使用したい画面など、より最適な画面が必要な場合はVisualforceとjQueryMobileなどを組み合わせたりすることで対応したほうが良さそうです。

f:id:tyoshikawa1106:20140118135518p:plain


HTML5をつかったモバイルアプリ開発はネイティブアプリやハイブリットアプリのように新しく開発環境を準備したり勉強したりしなくても、今までやってきたVisualforce開発と同じ方法で開発できるですごく入りやすそうです。

Salesforce1のアプリに組み込むことで複雑なログイン周りの処理を新たに開発する必要がないのと、つくったアプリやログイン用のURLを配布したりする必要がないのもすごく好みでした。

ネイティブやハイブリットと違いモバイル端末の機能を利用したアプリはつくれませんが、Salesforceのデータにアクセスするためだけのアプリなら問題ないので、ひとまずはHTML5をつかったモバイルアプリの開発についていろいろ勉強していきたいと思います。