読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:HTML5モバイルアプリ開発で役立つモバイルデザインテンプレートを試してみました

salesforce.com Force.com Mobile

Salesforce PlatformではHTML5のモバイルアプリを開発するときに役に立つモバイルデザインテンプレートが用意されています。モバイルデザインテンプレートは、エンタープライズ向けの魅力的なモバイルアプリケーションをすばやく開発できるツールです。

f:id:tyoshikawa1106:20140122232052p:plain

Salesforce Platform モバイルサービス - モバイルデザインテンプレート


次のようにテンプレートで使える機能とそのサンプルコードが公開されています。

f:id:tyoshikawa1106:20140123231812p:plain


こちらでもどんなことができるかは確認できるのですが、「Github リポジトリ」の方でより詳細なサンプルコード一式とその確認手順が公開されていました。

developerforce/Mobile-Design-Templates · GitHub


確認手順はGitHub内のREADME.mdファイルに記載されています。英語ですがGoogle翻訳などで翻訳すれば書いてあることはなんとなくわかりました。

f:id:tyoshikawa1106:20140123232753p:plain


以下、確認時の手順になります。

STEP1 サンプルコード一式のダウンロード

まずサンプルコード一式をダウンロードします。GitHub内のダウンロードボタンからダウンロードするのが簡単でした。

f:id:tyoshikawa1106:20140123233122p:plain

STEP2 commonフォルダを静的リソースへアップロード

ダウンロードしたZip内にcommonフォルダが存在します。この中にはテンプレートで使用されるJSやCSS、サンプルで使う画像ファイルが入っているので、これをZip形式に圧縮して静的リソースにアップロードします。

f:id:tyoshikawa1106:20140123233947p:plain

STEP3 サンプルページの作成

静的リソースへのアップロードが完了したら、Visualforceページでサンプルページをつくります。

共通処理

次のJSやCSSを読み込む処理はすべてのサンプルページで共通で使用されます。

<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, 
    minimum-scale=1, maximum-scale=1, user-scalable=no"/> 
  <apex:stylesheet value="{!URLFOR($Resource.Mobile_Design_Templates, 
    'Mobile-Design-Templates-master/common/css/app.min.css')}"/>
  <apex:includeScript value="{!URLFOR($Resource.Mobile_Design_Templates, 
    'Mobile-Design-Templates-master/common/js/jQuery2.0.2.min.js')}"/>
  <apex:includeScript value="{!URLFOR($Resource.Mobile_Design_Templates, 
    'Mobile-Design-Templates-master/common/js/jquery.touchwipe.min.js')}"/>
  <apex:includeScript value="{!URLFOR($Resource.Mobile_Design_Templates, 
   'Mobile-Design-Templates-master/common/js/main.min.js')}"/>
</head>
<body>
  <!-- Copy Paste Template HTML's body here -->
</body>
body処理

bodyの処理は基本的にサンプルコードからコピーすることで確認できるようになっています。(サンプルコードはapexではなく通常のHTMLで記載されているのでVisualforceで動作するように少し修正が必要です。)

GitHubからダウンロードしたZip内に各サンプルコードも入っています。最初はList ViewフォルダのStandard.htmlから確認するとわかりやすいと思います。

f:id:tyoshikawa1106:20140123235358p:plain


サンプルコードのBodyタグ内の処理がコピーする対象です。

f:id:tyoshikawa1106:20140123235536p:plain


このサンプルコードで次のような画面が表示されます。メニューバーの開閉も確認できて面白かったです。※この画面はSalesforce1を使って確認しています。

f:id:tyoshikawa1106:20140123235917p:plain


サンプルコードはapexタグを使わないつくりになっていました。せっかくVisualforceページで使うのでapexタグに変更してみたものでも確認してみました。apexタグでもテンプレートのCSSはきちんと反映されるみたいです。

確認時のコードはGitHubにアップロードしてあります。apex:compositionやVisualforce Componentを使って共通化もしてみました。

tyoshikawa1106/Apex_MobileDesignTemplates · GitHub


まだ少ししか動作確認できていませんが、どんなテンプレートがあるか理解して使えるようになればモバイルアプリの開発がとても楽になりそうです。