Salesforce1アプリはスマートフォンやタブレットなどモバイル端末で使用されますが、アプリ開発はHTML5とCSS、JavaScriptを利用したVisualforce開発と同じ方法で行います。
実際にモバイル端末で動かしながら開発するのもいいのですが、URLに『/one/one.app』とつけることでSalesforce1ブラウザモードを起動できます。
ある程度、形になるまではこちらで動作確認する方がデバッグもしやすく効率的です。
Salesforce1ブラウザモードURL例
今回はSalesforce1開発をPC側で行う際に、あると便利な役立ちツール紹介します。
Launch It ! - By OyeCode
Google Chromeの拡張アプリ『Launch It ! 』です。クリックひとつで通常のSalesforce画面『フルサイトモード』とSalesforce1向け画面『Salesforce1ブラウザモード』への切り替えが可能になる便利アプリです。
このアプリはChrome ウェブストアからインストールすることで入手できます。
使い方
Chrome ウェブストアでインストールするとつぎのアイコンが表示されるようになります。
このアイコンをクリックするだけでSalesforce1モードに切り替わります。
Salesforce1モードのときにクリックすると元のフルサイトモードに戻ります。
シンプルな機能ですが、いちいちURLを変更しなくてもいいのでかなり便利です。
ちなみにこのSalesforce1ブラウザモードですが、権限の無いユーザ(おそらく開発者権限)の場合は、アクセスしても「URLが存在しません」とエラーになります。このアプリを利用してアクセスしても同様にエラーになるのでセキュリティ的にも安心です。
また、このアプリはURLでSalesforceにアクセス中かを判定しています。関係の無いサイトで誤って実行した場合はエラーメッセージが表示されるようになっています。
マイドメインが有効化された組織でも問題なく利用できます。
Launch It ! の使い方は大体こんな感じです。Chromeでしか利用できませんが無料でインストールできるのでオススメです。
Salesforce1 Simulator
もうひとつChrome拡張アプリを紹介します。Salesforce1 Simulatorというアプリです。こちらもSalesforce1モードに簡単にアクセスできる便利ツールです。「Launch It !」のようにクリックひとつでモードを切り替える気軽さはありませんが、こちらはエミュレータを起動したときのように各モバイル端末のサイズに合わせたレイアウトで表示することができます。
使い方
このアプリをインストールするとChromeアプリランチャーに追加されます。
起動すると次のようにモバイル端末を表す枠とログイン画面が表示されます。
ログインするとSalesforce1モードになった状態で画面が表示されます。
ログインが完了するとこんな感じです。
サイドバーの機能やアクションバーの機能ももちろん動作します。
実際のモバイル端末と完全に同じというわけではありませんが、開発中のVisualforceページがスマートフォンのサイズで見たときにどのような感じで表示されるかイメージを確認できます。
表示できるのはスマートフォンのサイズだけではありません。ホームボタンをクリックするとサイズを変更のメニューが表示されます。
タブレットを表示したときはこんな感じです。
実際のモバイル端末にもいろいろなサイズが用意されているので、実機と同じ表示というわけにはいきませんが、イメージを確認するのにはちょうどいいと思います。
こんな感じでChrome拡張アプリとしてSalesforce1アプリ開発で役立つツールが公開されているのでこういったものを利用することでより効率よく作業ができると思います。
この記事はSalesforce1 Advent Calendar 2014 - 12月12日の記事です。
Salesforce1 Advent Calendar 2014 - Qiita