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

OneStarterはForce.com Blogで紹介されていたjQueryプラグインです。これを使うと簡単にSalesforce1のStyleを適用できるのでSalesforce1アプリを開発する時にとても便利です。このOneStarterの使い方について調べてみました。

##はじめに
必要なファイルはGitHubに公開されています。
https://github.com/joshbirk/onestarter

![2014-03-29_113216.png](https://qiita-image-store.s3.amazonaws.com/0/8407/b0b875e3-037d-8e63-bd40-bfa9a99a2234.png)


Zipsフォルダ内のOneStarter.zipとTouchSwipe-Jquery-Plugin.zipを静的リソースにアップロードすることで使用できますjQuery.jsも用意されているのでまだ準備していなければ一緒にアップロードしておきます。jQuery.jsはCDNJSから読み込む方法でも大丈夫だと思います。

![2014-03-29_113342.png](https://qiita-image-store.s3.amazonaws.com/0/8407/e14b9fa0-b30d-b0f2-af6d-78122877202b.png)

静的リソースへのアップロードができたら準備完了です。
とりあえず動かしてみたい場合はGistにサンプルコードを載せてあります。

>コピペで動くOneStarterサンプルコード
>https://gist.github.com/tyoshikawa1106/9847189

##CSSとJSの読み込み
最初に次のCSSとJSの読み込みを行います。

```css
<apex:stylesheet value="{!URLFOR($Resource.OneStarter,'icons.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.OneStarter,'styles.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.OneStarter,'OneStarter.css')}"/>

<apex:includeScript value="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"/>
<apex:includeScript value="{!URLFOR($Resource.TouchSwipe,'jquery.touchSwipe.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.OneStarter,'jquery.onestarter.js')}"/>
<apex:includeScript value="/canvas/sdk/js/publisher.js"/>      

<script>
	//this is implementation code
	$(document).ready(function() {
		s1 = $('div#one-app').oneStarter('app');
		s1.carousel($('div#one-carousel'));
	});
</script>
```

one-appのidをもつdivタグ内にstyleが適用されます。
背景色がSalesforce1用の色に変更されているのが確認できます。

```
<div id="one-app">
    // code
</div>
```

##class="padded"
class="padded"を使うと次のような表示ができます。

![2014-03-29_101248.png](https://qiita-image-store.s3.amazonaws.com/0/8407/24897386-0d27-1419-c342-7bde87568fa4.png)

```html
<h1>One Starter jQuery Plugin</h1>
<article class="padded">
    This is a sample application using the One Starter jQuery plugin.
</article>
```

##id="one-carousel"
id="one-carousel"を使うとSalesforce1の横スライドでページが切り替わる機能を実装できます。各ページはdivタグで分けられるみたいです。

![2014-03-29_102222.png](https://qiita-image-store.s3.amazonaws.com/0/8407/9a356abd-7a66-7f51-7bb5-889ae7a6b85a.png)

```
<div id="one-carousel" >
    <div>
        Page 1
    </div>

    <div>
        Page 2
    </div>
</div>
```

##class="list-simple"
class="list-simple"はulタグで使用します。次のようなリストを表示できるようになります。

![2014-03-29_103137.png](https://qiita-image-store.s3.amazonaws.com/0/8407/ef6f35f7-5287-3a14-9dea-dd75027a9c76.png)

```html
<div id="basic-list">
    <h2>Basic List Example</h2>
    <ul class="list-simple">
	<li class="list-simple">Item 1</li>
	<li class="list-simple">Item 2</li>
	<li class="list-simple">Item 3</li>
    </ul>
</div>
```

##class="icon ..."
class="icon"を使うとSalesforce1用のアイコンを表示できます。icon-leftなどのclassも用意されています。

![2014-03-29_103340.png](https://qiita-image-store.s3.amazonaws.com/0/8407/9b56abe3-d4d3-b555-9480-0b2398f955be.png)

```html
<div id="record-list">
	<h2>Record List Example</h2>
	<article class="padded">
		<div class="icon icon-left icon--contact"></div>
		My Contacts
	</article>
	<article class="padded">
		<div class="icon icon-left icon--account"></div>
		My Accounts
	</article>
	<article class="padded">
		<div class="icon icon-left icon--opportunity"></div>
		My Opportunity
	</article>
</div>
```

##class="link-right"
Linkを右寄せして表示できます。

![2014-03-29_104635.png](https://qiita-image-store.s3.amazonaws.com/0/8407/7c508f4d-af66-a5cc-ecc8-e430d69dd332.png)

```html
<h1>My Accounts</h1>
<a href="javascript:void(0)" title="More" class="link-right">
	<span class="link-label">More</span>
	<span class="link-icon-right icon-utility-right"></span>
</a>
```

##class="simple-bold"とclass="list-plain"
次のように表示できるようになります。

![2014-03-29_104958.png](https://qiita-image-store.s3.amazonaws.com/0/8407/f2ab68e3-f61e-c769-c321-20b8874f25c9.png)

```html
<section class="padded">
	<div class="icon icon-right icon-float-right icon--account"></div>
    <h1 class="simple-bold">
        United Partners, Inc.
    </h1>
  	<ul class="list-plain">
    	<li >San Francisco, CA</li>
    	<li >Enterprise Customer</li>
  	</ul>
</section>
```

##Input系
Input系のclassもいろいろ用意されていました。

![2014-03-29_105556.png](https://qiita-image-store.s3.amazonaws.com/0/8407/23175d1f-cc8f-1a0a-85a3-5e7821222930.png)

```html
<div id="form-example">
	<h2>Form Example</h2>
	<button>Set Defaults</button>
	<section>
		<label class="field-label">Text Field</label>
		<input id="text-example" type="text" />
	</section>
	<section>
		<label class="field-label">Text Area</label>
		<textarea></textarea>
	</section>
	<section>
		<label class="field-label">Picklist</label>
		<select>
			<option>Option 1</option>
			<option>Option 2</option>
			<option>Option 3</option>
		</select>
	</section>
	<section>
		<label class="field-label">Checkbox</label>
		<input type="checkbox" />
		<label class="f4 text-color-1">
		    Boolean
		 </label>
		 <br />
	</section>
	<section>
		<label class="field-label">Radio Group</label>
		<input type="radio" id="radio_text" name="radio_test" /><span class="a-mid">Option 1</span><br />
		<br />
		<input type="radio" id="radio_text" name="radio_test" /><span class="a-mid">Option 2</span><br />
		<br />
		<input type="radio" id="radio_text" name="radio_test" /><span class="a-mid">Option 3</span><br />
		<br />
	</section>
	<section>
		<label class="field-label">Search</label>
		<label class="size-full icon-utility-search pos-abs label--lookup">
		    <span class="dn">Lookup</span>
		</label>
	  <input type="text" name="default" placeholder="Lookup" 
	  class="size-full plm prx pvm input input--default input--ph-1 input--focus-1" />
	</section>
</div>
```

##class="field-label"とclass="field-value"
このClassは詳細ページをつくるときに便利そうです。

![2014-03-29_105851.png](https://qiita-image-store.s3.amazonaws.com/0/8407/889b6f2c-97a8-76ca-27e0-65b19386604e.png)

```html
<div id="detail-example">
	<h2>Detail Example</h2>
	<section>
		<label class="field-label">Text Field</label>
		<span class="field-value">Last Name, First Name</span>
	</section>
	<section>
		<label class="field-label">Text Area</label>
		<span class="field-value">This is a bunch of text here.</span>
	</section>
</div>
```

##参考サイト
**Styling for Salesforce1 Mobile with the OneStarter jQuery Plugin**
http://blogs.developerforce.com/developer-relations/2014/03/styling-for-salesforce1-mobile-with-the-onestarter-jquery-plugin.html