tyoshikawa1106のブログ

- Force.com Developer Blog -

Salesforce1 Advent Calendar 2014 - Salesforce1アプリ開発の役立ちツール

f:id:tyoshikawa1106:20141127220731p:plain

Salesforce1アプリはスマートフォンやタブレットなどモバイル端末で使用されますが、アプリ開発はHTML5とCSS、JavaScriptを利用したVisualforce開発と同じ方法で行います。


実際にモバイル端末で動かしながら開発するのもいいのですが、URLに『/one/one.app』とつけることでSalesforce1ブラウザモードを起動できます。


ある程度、形になるまではこちらで動作確認する方がデバッグもしやすく効率的です。

Salesforce1ブラウザモードURL例

https://ap.salesforce.com/one/one.app


今回はSalesforce1開発をPC側で行う際に、あると便利な役立ちツール紹介します。

Launch It ! - By OyeCode

Google Chromeの拡張アプリ『Launch It ! 』です。クリックひとつで通常のSalesforce画面『フルサイトモード』とSalesforce1向け画面『Salesforce1ブラウザモード』への切り替えが可能になる便利アプリです。


このアプリはChrome ウェブストアからインストールすることで入手できます。

f:id:tyoshikawa1106:20141127211950p:plain


使い方

Chrome ウェブストアでインストールするとつぎのアイコンが表示されるようになります。

f:id:tyoshikawa1106:20141127221849p:plain:w300

このアイコンをクリックするだけでSalesforce1モードに切り替わります。

f:id:tyoshikawa1106:20141127222150p:plain:w300


Salesforce1モードのときにクリックすると元のフルサイトモードに戻ります。

f:id:tyoshikawa1106:20141127222359p:plain


シンプルな機能ですが、いちいちURLを変更しなくてもいいのでかなり便利です。


ちなみにこのSalesforce1ブラウザモードですが、権限の無いユーザ(おそらく開発者権限)の場合は、アクセスしても「URLが存在しません」とエラーになります。このアプリを利用してアクセスしても同様にエラーになるのでセキュリティ的にも安心です。

f:id:tyoshikawa1106:20141127223044p:plain


また、このアプリはURLでSalesforceにアクセス中かを判定しています。関係の無いサイトで誤って実行した場合はエラーメッセージが表示されるようになっています。

f:id:tyoshikawa1106:20141127223313p:plain


マイドメインが有効化された組織でも問題なく利用できます。

f:id:tyoshikawa1106:20141127223616p:plain


Launch It ! の使い方は大体こんな感じです。Chromeでしか利用できませんが無料でインストールできるのでオススメです。

Salesforce1 Simulator

もうひとつChrome拡張アプリを紹介します。Salesforce1 Simulatorというアプリです。こちらもSalesforce1モードに簡単にアクセスできる便利ツールです。「Launch It !」のようにクリックひとつでモードを切り替える気軽さはありませんが、こちらはエミュレータを起動したときのように各モバイル端末のサイズに合わせたレイアウトで表示することができます。

f:id:tyoshikawa1106:20141127214325p:plain

使い方

このアプリをインストールするとChromeアプリランチャーに追加されます。

f:id:tyoshikawa1106:20141127225121p:plain:w300

f:id:tyoshikawa1106:20141127225135p:plain:w300


起動すると次のようにモバイル端末を表す枠とログイン画面が表示されます。

f:id:tyoshikawa1106:20141127225506p:plain:w300


ログインするとSalesforce1モードになった状態で画面が表示されます。

f:id:tyoshikawa1106:20141127225825p:plain:w300


ログインが完了するとこんな感じです。

f:id:tyoshikawa1106:20141127225930p:plain:w300


サイドバーの機能やアクションバーの機能ももちろん動作します。

f:id:tyoshikawa1106:20141127230343p:plain:w300


実際のモバイル端末と完全に同じというわけではありませんが、開発中のVisualforceページがスマートフォンのサイズで見たときにどのような感じで表示されるかイメージを確認できます。

f:id:tyoshikawa1106:20141127230635p:plain


表示できるのはスマートフォンのサイズだけではありません。ホームボタンをクリックするとサイズを変更のメニューが表示されます。

f:id:tyoshikawa1106:20141127231030p:plain


タブレットを表示したときはこんな感じです。

f:id:tyoshikawa1106:20141127231135p:plain


実際のモバイル端末にもいろいろなサイズが用意されているので、実機と同じ表示というわけにはいきませんが、イメージを確認するのにはちょうどいいと思います。


こんな感じでChrome拡張アプリとしてSalesforce1アプリ開発で役立つツールが公開されているのでこういったものを利用することでより効率よく作業ができると思います。


この記事はSalesforce1 Advent Calendar 2014 - 12月12日の記事です。
Salesforce1 Advent Calendar 2014 - Qiita