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

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

はじめに

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

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

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

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

CSSとJSの読み込み

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

<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"を使うと次のような表示ができます。

<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タグで分けられるみたいです。

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

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

class="list-simple"

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

<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も用意されています。

<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を右寄せして表示できます。

<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"

次のように表示できるようになります。

<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もいろいろ用意されていました。

<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は詳細ページをつくるときに便利そうです。

<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