tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Salesforce1アプリの開発で使えるjQueryプラグインOneStarterを試してみました

Force.com Blogに面白そうな記事が投稿されていました。

Styling for Salesforce1 Mobile with the OneStarter jQuery Pluginという記事でSalesforce1アプリの開発で使える"OneStarter"というjQueryプラグインが紹介されていました。

これを使うとSalesforce1の標準機能を簡単に実装できるみたいです。

f:id:tyoshikawa1106:20140325212134p:plain:w400

Styling for Salesforce1 Mobile with the OneStarter jQuery Plugin | Developer Force Blog


Blog内にサンプルコードも記載されていましたが、より詳細な情報がGitHubで公開されていたので、そちらのコードを使ってDeveloper環境で試してみました。

f:id:tyoshikawa1106:20140325212226p:plain:w400


OneStarterは以下の手順でDeveloper環境で使えるようにできます。

1. 静的リソースにアップロード

静的リソースにアップロードするためのZipファイルもGitHub内に用意されていますが、staticresourcesのメタ情報も公開されているのでこちらを使うのが簡単だと思います。

f:id:tyoshikawa1106:20140325212556p:plain

joshbirk/onestarter · GitHub


staticresourcesフォルダには次の3つのファイルが用意されています。

  • OneStarter.resource
  • jquery.resource
  • TouchSwipe-Jquery-Plugin.resource

この内、OneStarter.resourceとjquery.resourceはそのままで問題なくアップロードできると思います。ですが、TouchSwipe-Jquery-Plugin.resourceはこのままだとエラーになります。静的リソースのファイル名には - が使えないのでここを修正する必要があります。

ページ側の処理を確認したところサンプル内ではTouchSwipeという名前で使われています。なのでTouchSwipe.resourceという名称に変更してアップロードすれば問題なく使用できると思います。
f:id:tyoshikawa1106:20140325213357p:plain

2. カスタムオブジェクト「Scorecard__c」の作成

GitHub内には見つからなかったのですが、カスタムオブジェクト「Scorecard__c」がページ内で参照されていました。ひとまず動作確認する分にはName項目だけで問題ありませんでした。

f:id:tyoshikawa1106:20140325220106p:plain

3. ページとクラスのアップロード

上記3つのファイルを静的リソースにアップロードしてカスタムオブジェクト「Scorecard__c」を作成した後は、ページとクラスをアップロードするだけです。こちらもGitHubにメタ情報が公開されているのでこれを使って簡単にアップロードできます。

GitHubに公開されているページとクラスは次のとおりです。

Page
  • ComponentsTest.page
  • EmailScorecard_S1.page
  • OneStarterApp.page
  • OneStarterGlobalAction.page
  • OneStarterRecordAction.page
Class
  • ComponentsTest.cls


このファイルをそのままアップしようとすると"EmailScorecard_S1.page"でエラーが発生します。このページが参照しているEmailScorecard.clsが存在しないためです。

f:id:tyoshikawa1106:20140325214036p:plain

このEmailScorecard.clsですが、使われている所を確認したところ、ページ27行目の「value="{!public_header}"」だけみたいです。

今回はとりあえず確認ができればいいと思うので、"{!public_header}"を固定の文字列に変更し、Extensions="EmailScorecard"をページから除外すれば問題なくアップできると思います。


上記手順でGitHub内の静的リソースとページ・クラスをDev環境へアップできると思います。アップしたページの内、OneStarterAppで動作確認ができました。

f:id:tyoshikawa1106:20140325220353p:plain

OneStarterAppページ

f:id:tyoshikawa1106:20140325220634p:plain


細かい処理の内容は確認できていませんが、これでOneStarterの動作を確認できると思います。これをベースに使い方を覚えればSalesforce1用のアプリ開発ですごく役に立ちそうです。

追記

OneStarterの使い方についてもう少し調べてみました。

Salesforce1アプリの開発に便利なOneStarterの使い方まとめ - Qiita