Mobile Templates

モバイルデザインテンプレート

モバイルデザインテンプレートは、エンタープライズ向けの魅力的なモバイルアプリケーションをすばやく開発できるツールです。モバイルに最適な HTML5 や CSS3 を使って、インパクトのあるビジュアルデザインを実現できます。Salesforce Mobile Pack をはじめとする Salesforce Platform モバイルサービスの一連のサービスとこのモジュール型のデザインテンプレートを合わせて活用すれば、顧客データの表示・編集・更新、バックエンドのレポートの参照、関連レコードの検索など、さまざまな処理が可能になります。カスタマイズができるオープンソースのテンプレートを駆使して、顧客、社員、パートナーを引き付けるアプリケーションの開発を進めましょう。

モバイルデザインテンプレートのメリット
  • モジュール型、カスタマイズ可能、オープンソースという特長を備えています。CSS3 や HTML5 マークアップを柔軟に変更して、個々のモバイルアプリケーションに求められるユーザインターフェース、ユーザエクスペリエンスの要件に対応できます。
  • 静的なテンプレートを ForceTkSalesforce Mobile Pack などの JavaScript ライブラリと組み合わせ、Salesforce のバックエンドアプリケーションとのリアルタイムのデータバインディングを提供できます。
  • HTML5、CSS3、JavaScript といった Web の標準テクノロジーを使用することで、iOS、Android をはじめとする複数のプラットフォームで動作するアプリケーションを実現します。
  • スマートフォンのフォームファクタに最適化されています。
  • モバイルのさまざまな利用シナリオに対応します。ベースとなる HTML5/CSS3 を編集して、あらゆる Salesforce オブジェクトで使用できます (標準オブジェクト、カスタムオブジェクトの双方をサポート)。
クイックリンク

List View – リストビュー

リストビュー用のテンプレートでは、Salesforce の標準レコードやカスタムレコードをさまざまな方法でリスト表示できます。

Picture – 写真

Picture テンプレートは、写真が関連付けられたレコード (取引先責任者、ユーザ、製品など) をリスト表示します。このテンプレートの実例は、モバイルデザインテンプレートのサンプルアプリケーションに含まれている Visualforce ページ MyContacts で確認できます。

注: 右のサンプルでは取引先責任者レコードのリストを表示していますが、取引先責任者オブジェクトにはネイティブで写真用の項目は用意されていません。ここでは、写真が、添付ファイルレコード、コンテンツファイル、Chatter ファイルなどの形で保存済みであると想定しています。

続いて、このテンプレートの構成要素を説明します。

ヘッダー

すべてのモバイルデザインテンプレートで共通に使用されるコンポーネントです。

        <nav id="main-menu" class="main-menu">
            <a href="#">Something</a>
            <a href="#">Something</a>
            <a href="#">Something</a>
        </nav>

        <header>
            <div id="main-menu-button-left"
            class="main-menu-button main-menu-button-left">
                <a class="menu">&nbsp;</a>
            </div>
            <div id="main-menu-button-right"
            class="main-menu-button main-menu-button-right">
                <a class="gear">&nbsp;</a>
            </div>
            <h1>Contacts</h1>
        </header>

<nav> 要素には、スライド型のメニューパネルに表示させるすべてのアイテムを含める必要があります (右のサンプルのメニューアイコンをクリックすると動作を確認できます)。アイコンを片側に寄せるには、<div> タグに CSS クラスを設定します (左側の場合は main-menu-button-left、右側の場合は main-menu-button-right)。モバイルデザインテンプレートのヘッダーコンポーネントとして定義されているのは、メニュー、歯車、左矢印、右矢印などの基本的なアイコンに限られますが、開発ではカスタムのアイコンを独自に作成して、ヘッダーコンポーネントに追加することが可能です。

リスト要素

Picture テンプレートでは、次のようなマークアップでリスト要素を追加します。

        <ul class="list-view left-thumbs right-one-icons">
            <li>
                <div class="thumbs">
        <img class="thumb thumb-3" src="images/placeholders/contact-2.png">
                </div>
                <a href="#" class="content">
                    <h2>Rachel Aarons</h2>
                    Project Manager
                    <div class="list-view-icons">
                        <span class="icon-right-arrow">&nbsp;</span>
                    </div>
                </a>
            </li>
        </ul>
スワイプで操作できるクイックアクションアイコン

Picture テンプレートには、オプションで、「クイックアクション」アイコンを表示する機能も備わっています。右に示したサンプルでは、ユーザがリストビュー内の画像をスワイプすることで、取引先責任者にメールを送る、電話をかけるなどのアクションをダイレクトに実行できます。詳細ビューを開く必要はありません。

この機能を使用するには、<ul> 要素に with-swipe という CSS スタイルを追加し、実行するクイックアクションのリンクとアイコンを <div class="thumbs"> セクションに記述します。

        <ul class="list-view with-swipe left-thumbs right-one-icons">
            <li>
                <div class="thumbs">
                    <a href="#" class="thumb thumb-1"><img class="thumb" src="images/icons/tile-phone.png" ></a>
                    <a href="#" class="thumb thumb-2"><img class="thumb" src="images/icons/tile-email.png" ></a>
                    <img class="thumb thumb-3" src="images/placeholders/contact-2.png">
                </div>
                <a href="#" class="content">
                    <h2>Rachel Aarons</h2>
                    Project Manager
                    <div class="list-view-icons">
                        <span class="icon-right-arrow">&nbsp;</span>
                    </div>
                </a>
            </li>
        </ul>

注: このスワイプジェスチャは、短い JavaScript で実現可能です。詳細については、main.jssetupSwipeLis 関数の箇所を参照してください。

Collapsible – 折りたたみ/展開

Collapsible テンプレートは、データのリストを折りたたみ/展開できるコントロールを使って、グループ化されたデータをリスト表示します。たとえば、右に示したサンプルでは、取引先ごとにグループ化された取引先責任者のレコードを、折りたたみ/展開できるようになっています。このテンプレートは、データのリストをグループ化して表示する必要があるさまざまなシナリオで利用できます。

続いて、このテンプレートの構成要素を説明します。

折りたたみ可能なセクション

次のようなマークアップを使用することで、折りたたみ可能なセクションとサムネイル画像を表示します。

        <ul class="list-view collapsable left-thumbs right-one-icons">
            <li>
                <div class="thumbs">
                    <img class="thumb" src="images/placeholders/account-0.png">
                </div>
                <div class="content">
                    <h1>Acme Inc</h1>
                    <div class="list-view-icons">
                        <span class="icon-plus">&nbsp;</span>
                    </div>
                </div>
            </li>
        </ul>
リスト要素

折りたたみ可能なセクションにリストアイテムを追加する場合は、親となる <li> タグに次のようなマークアップを追加します。

        <ul class="list-view right-one-icons">
            <li>
                <div class="content">
                    <h2>John Broker</h2>
                    Retail Sales
                    <div class="list-view-icons">
                        <span class="icon-right-arrow">&nbsp;</span>
                    </div>
                </div>
            </li>
            <li>
                <div class="content">
                    <h2>Allison Amin</h2>
                    Executive Assistant
                    <div class="list-view-icons">
                        <span class="icon-right-arrow">&nbsp;</span>
                    </div>
                </div>
            </li>
        </ul>

注: このテンプレートのコントロールは、短い JavaScript で実現可能です。詳細については、main.jssetupCollapsableMenus 関数の箇所を参照してください。

Standard – 標準

Standard テンプレートは、シンプルなデータのリストを表示します。各リスト要素には、用途に応じて 1 行または複数行のデータを表示できます。続いて、このテンプレートの構成要素を説明します。

リスト要素

個々のリスト要素を追加するには、次のようなマークアップを使用します (icon-right-arrow により、アイテムがクリック可能であることを示す右向きの矢印が追加されます)。

        <ul class="list-view right-one-icons">
            <li>
                <a href="#" class="content">
                    <h2>Acme 1,200 Widgets</h2>
                    <div class="list-view-icons">
                        <span class="icon-right-arrow">&nbsp;</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="content">
                    <h2>100 Servers</h2>
                    <div class="list-view-icons">
                        <span class="icon-right-arrow">&nbsp;</span>
                    </div>
                </a>
            </li>
        </ul>
 

リスト要素に新たな情報を表示するには、<li> 要素にマークアップを追加します。たとえば、次のコードでは、商談金額と商談フェーズの情報をリストビューに新たに追加しています。

        <li>
            <a href="#" class="content">
             <h2>Acme 1,200 Widgets</h2>
                <p>
                    <strong>$24,000</strong><br/>
                    Value Proposition
                </p>
                <div class="list-view-icons">
                    <span class="icon-right-arrow">&nbsp;</span>
                </div>
            </a>
        </li>
Tabbed – タブ付き

Tabbed テンプレートは、リストのデータを 2 つ以上のタブに分けて表示します。タブは、クリック操作ですばやく切り替えられます。たとえば、現在対応中のケースとクローズ済みのケースを単一のリストビュー内で切り替えて表示したい場合などに、このテンプレートを利用できます。

このテンプレートは、テンプレート共通で使われるヘッダーコンポーネントのほか、以下から構成されます。

タブコンポーネント

次のようなマークアップを使用して、ビューにタブを追加します。

        <div id="tabbed-list-view-nav" class="tabbed-list-view-nav">
            <a href="#" class="span-50 on">Red Fish</a>
            <a href="#" class="span-50">Blue Fish</a>
            <div id="tabbed-list-view-nav-arrow" class="tabbed-list-view-nav-arrow">&nbsp;</div>
        </div>

ユーザはクリック操作でタブをすばやく切り替えられます (右のサンプルで操作を試してみてください)。なお、この操作を実現するには少量の JavaScript を使用します。詳細は、main.jssetupTabbedLists 関数の箇所を参照してください。

注: 表示するタブの数に応じて、<a> タグに適切な CSS スタイル要素を適用する必要があります。タブの上限は 4 つです。タブを 2 つ表示する場合は span-50、3 つの場合は span-33、4 つの場合は span-25 を使用します。

リスト要素

タブにリストアイテムを追加するには、<ul> 要素 (「ul」とは「unorderd list (箇条書きリスト)」のこと) を作成して CSS クラス tabbed-list-view を設定し、作成する各タブのリストアイテム要素 (<li>) を挿入します。タブの <li> 要素内に <ul> のリストをネストすることも可能です。これにより、個々のタブに関連するデータのリストを表示できます。

        <ul id="tabbed-list-view" class="tabbed-list-view">
        <li>
            <ul class="list-view left-thumbs right-one-icons">
                <li>
                    <div class="thumbs">
                        <img class="thumb thumb-3" src="images/placeholders/contact-2.png">
                    </div><!-- .thumbs -->
                    <a href="#" class="content">
                        <h2>Rachel Aarons</h2>
                        Project Manager
                        <div class="list-view-icons">
                            <span class="icon-right-arrow">&nbsp;</span>
                        </div>
                    </a>
                </li>
                <li>
                    <div class="thumbs">
                        <img class="thumb thumb-3" src="images/placeholders/contact-3.png">
                    </div><!-- .thumbs -->
                    <a href="#" class="content">
                        <h2>Nathan An</h2>
                        Public Relations
                        <div class="list-view-icons">
                            <span class="icon-right-arrow">&nbsp;</span>
                        </div>
                    </a>
                </li>
            </ul>
        </li>
        </ul>

Carousel テンプレートは、タッチデバイスに適したカルーセルビュー (画像などのコンテンツを横方向にスライドしてスムーズに表示できるビュー) を提供します。ユーザはスマートフォンでスワイプ操作を実行することで、画像を次々にスライドさせながら表示できます。たとえば、Salesforce に格納された製品を一覧する場合などにこのテンプレートを利用できます。製品の画像は、添付ファイルレコード、コンテンツファイル、Chatter ファイルなどの形で保存します。

カルーセルコントロールの実装には、オープンソースの SwipeView ライブラリを使用します。この Carousel テンプレートは、テンプレート共通で使われるヘッダーコンポーネントのほか、以下から構成されます。

このテンプレートの多くの動作は、SwipeView ライブラリを用いて JavaScript で実行されます。カルーセルコントロールを使用するには、親となる <div> タグをページのマークアップに記述します。

        <div id="app-content">
            <div id="carousel-wrapper"></div>
        </div>

その後、JavaScript で、表示する一連の画像を指定 (幅、高さなども設定) して SwipeView ライブラリを初期化します。次に、初期化の例として、JavaScript の短いスニペットを示します。

        <script type="text/javascript">
        $(document).ready(function() {
            var slides = [
                    {
                        img: 'images/placeholders/gallery/pic01.png',
                        width: 1017,
                        height: 699,
                        desc: '<h3>A Product</h3>$341.12'
                    }
                ];

            carouselObj.init({
                container: "#carousel-wrapper",
                slides: slides
            });
        });

        </script>

実際のアプリケーションでは、画像は通常、API コールや JavaScript のリモート処理によって Salesforce から取得されます。

Timeline – タイムライン

Timeline テンプレートは、Salesforce 内のデータをタイムラインに沿って表示します。たとえば、プロジェクトレコードに関連付けられたマイルストーン、注文の出荷状況、商談フェーズの履歴などを表示する場合に使用できます。このテンプレートの実例は、モバイルデザインテンプレートのサンプルアプリケーションに含まれている Visualforce ページ ProjectMilestones で確認できます。

次のような <ul> 要素に、タイムライン上のすべての事象を <li> 要素として追加します。

        <ul class="list-view list-view-milestones">
        </ul>

このテンプレートは、テンプレート共通で使われるヘッダーコンポーネントのほか、以下から構成されます。

過去の事象 (complete)

タイムラインに完了済みまたは過去の事象を表示するには、子の <li> 要素に complete という CSS スタイルクラスを追加します。

        <li class="complete">
          <div class="content">
           <div class="date">07/13/2013</div>
           <div class="objective">
            Milestone Objective Text
           </div>
          </div>
         </li>

上のコードに示したように、CSS クラス dateobjective を使用することで、その事象に関連付けられた日付、テキストを表示できます。

現在の事象 (current)

現在の事象を表示するには、子の <li> 要素に current という CSS スタイルクラスを追加します。

        <li class="current">
          <div class="content">
           <div class="date">07/13/2013</div>
           <div class="objective">
            Milestone Objective Text
           </div>
          </div>
         </li>
将来の事象 (future)

将来の事象を表示するには、子の <li> 要素に future という CSS スタイルクラスを追加します。

        <li class="future">
          <div class="content">
           <div class="date">07/13/2013</div>
           <div class="objective">
            Milestone Objective Text
           </div>
          </div>
         </li>

Detail View – 詳細ビュー

詳細ビュー用のテンプレートでは、標準レコードやカスタムレコードの参照のみのビューをさまざまな形で表示できます。通常、ユーザがリストビューのレコードをクリックすると、Detail View 1、Detail View 2、Detail View 3 のいずれかのタイプの詳細ビューが表示されます。

Detail View 1 – 詳細ビュー 1

このテンプレートは、テンプレート共通で使われるヘッダーコンポーネントのほか、以下から構成されます。

バナーセクション

バナーセクションは、レコードに関するもっとも重要な情報を表示するために使用します。たとえば、右のサンプルでは、取引先レコードに関連付けられたアイコン、取引先の名前が表示されています。なお、ここでは、アイコンは取引先レコードに関連付けられた添付ファイルとして保存されているものとします。

        <div class="detail-view-header left-thumb">
            <div class="content">
                <img class="thumb" src="images/placeholders/account-0.png">
                <h1>Acme</h1>
            </div>
        </div>
クイックアクションメニュー

ユーザが特定のタイプのレコードに対して特定の「クイックアクション」を実行できるようにします。求められるアクションは sObject やモバイルのユースケースによって異なるため、開発時に必要に応じて指定できるようになっています。たとえば、取引先レコードを表示している右のサンプルでは、クイックアクションアイコンによって、メモを記入する、モバイル向けの地図アプリケーションで取引先の住所を確認するといった作業をすばやく行えます (モバイルでよくある取引先データの利用シナリオです)。

バナーセクションにクイックアクションのリンクを追加するには、次のようなマークアップを使用します。

        <div class="detail-view-header left-thumb with-action-panel">
            <div class="content">
                <img class="thumb" src="images/placeholders/account-0.png">
                <h1>Acme</h1>
                <div class="detail-view-action-panel">
                    <a href="#" class="action-note open-modal">&nbsp;</a>
                    <a href="#" class="action-map open-modal">&nbsp;</a>
                </div>
            </div>
        </div>

デフォルトでは、クイックアクションアイコンをクリックすると、シンプルなモーダルダイアログボックスが表示されます (右のサンプルでどちらかのアイコンをクリックしてみてください)。クイックアクションアイコンによって実行するアクションは、アプリケーションの種類や用途に応じてカスタマイズしてください。

最近リリースされた Chatter のパブリッシャーアクションは、クイックアクションで利用できる格好の機能です。Salesforce でオブジェクトに固有/共通のアクションを定義し (商談レコードの簡易作成など)、ユーザが詳細ビューでアイコンをクリックしたときに Salesforce REST API によるパブリッシャーアクションが実行されるようにします。

データセクション

sObject の特定の項目を表示する場合に使用します。たとえば、次のコードは、取引先レコードの請求先住所を表示します。

        <section class="border-bottom">
            <div class="content">
                <h3>Billing Address</h3>
                <p>
                    1 Main Street<br/>
                    San Francisco, CA 94105<br/>
                    USA
                </p>
            </div>
        </section>
集計セクション

任意の数の子オブジェクトを対象に、重要なデータを集計して表示する場合に使用します。たとえば、右のサンプルは、取引先に関連付けられたケースレコードの中に現在対応中のケースが何件あるかを表示しています。集計セクションをクリック可能にするには、<a> リンクを指定し、クリック操作で子レコードのリストが表示されるようにします (リストビュー用テンプレートのいずれかを使用)。

        <ul class="list-view right-one-icons large-padding">
            <li>
                <a href="#" class="content">
                    <h3>Cases</h3>
                    <h1 class="inline">12</h1> open cases
                    <div class="list-view-icons">
                        <span class="icon-right-arrow">&nbsp;</span>
                    </div>
                </a>
            </li>
        </ul>

子レコードを表示する場合に使用します。たとえば、右のサンプルには、取引先に関連付けられた取引先責任者レコードのリストが表示されています。

        <section class="border-top">
            <div class="content">
               <h3>Key Contacts</h3>
                <p>
                    <a href="#">John Stamos</a><br/>
                    IT Man
                </p>
                <p class="no-bottom-padding">
                    <a href="#">Jennifer Lopez</a><br/>
                    Diva
                </p>
            </div>
        </section>

それぞれの子レコードは、<a> リンクを指定すればクリック可能になります。クリック操作により、その子レコードに関する詳細ビューが表示されます。

アクションボタン

編集、削除などの操作を実行するボタンを、1 つまたは複数表示する場合に使用します。

        <section class="data-capture-buttons one-buttons">
            <div class="content">
                <a href="#">edit</a>
            </div>
        </section>

2 つのボタンを表示する場合は、上記のコードで two-buttons スタイルを指定します。

Detail View 2 – 詳細ビュー 2

このテンプレートは、テンプレート共通で使われるヘッダーコンポーネントのほか、以下から構成されます。

バナーセクション

Detail View 1 のバナーセクション同様、レコードに関するもっとも重要な情報を表示するために使用します。たとえば、右のサンプルでは、商談レコードに関連付けられた商談名と取引先が表示されています。

クイックアクションメニュー

Detail View 1 のクイックアクションメニュー同様、ユーザがモバイルデバイスで特定の「クイックアクション」を実行できるようにするために使用します。たとえば、商談レコードを表示している右のサンプルでは、クイックアクションアイコンによって、メモを記入する、商談フェーズを更新する、商談を成立としてクローズする、商談をロスト (失注) としてクローズするといった作業をすばやく行えるようになっています。

データセクション

Detail View 1 のデータセクション同様、sObject の特定の項目を表示する場合に使用します。たとえば、右のサンプルには、商談名のほか、商談レコードに関連付けられた取引先が表示されています。

        <section class="opportunity-overview">
            <div class="content">
                <h1>$34,100</h1>
                Close date 07/11/2013
            </div>
        </section>

右のサンプルでは、そのほか、2 つの独自のビジュアル要素を使っており、進捗を示す選択リスト型の項目 (ここでは商談フェーズ) と確度を示すパーセント型の項目を表示しています。これらのビジュアル要素は、この 2 種類のデータ型の項目を表示するあらゆる詳細ビューで使用できます。

        <section>
            <div class="content">
                <div class="progress-dotted" data-completed="4/10">
                    <div class="progress-dotted-label">Some Milestone</div>
                </div>

                <div class="progress-bar" data-completed="27">&nbsp;</div>
                <h1 class="inline">27%</h1> probability
            </div>
        </section>

ここでは、JavaScript と data-completed 属性を使用して、進捗やパーセントに関する値を表示しています。

関連リストセクション

Detail View 1 の関連リストセクション同様、子レコードを表示する場合に使用します。たとえば、右のサンプルでは、商談レコードに関連付けられた活動履歴が表示されるようになっています。

アクションボタン

Detail View 1 のアクションボタン同様、編集、削除などの操作を実行するボタンを、1 つまたは複数表示する場合に使用します。

Detail View 3 – 詳細ビュー 3

このテンプレートは、テンプレート共通で使われるヘッダーコンポーネントのほか、以下から構成されます。

バナーセクション

Detail View 1 のバナーセクション同様、レコードに関するもっとも重要な情報を表示するために使用します。たとえば、右のサンプルでは、カスタムの注文レコードに関連付けられた注文番号、注文の処理状況が表示されています。

        <div class="detail-view-header with-action-panel">
            <div class="content">
                <h1>#310129123</h1>
                <div class="status status-red"><span class="status-dot">&nbsp;</span>Processing</div>
             </div>
        </div>

上のコードで使われている CSS スタイル status では、処理状況を赤、黄、緑の色によって表せます。

クイックアクションメニュー

Detail View 1 のクイックアクションメニュー同様、ユーザがモバイルデバイスで特定の「クイックアクション」を実行できるようにするために使用します。たとえば、注文レコードを表示している右のサンプルでは、クイックアクションアイコンによって、注文の処理状況の履歴を表示する (Timeline テンプレートで実装)、注文をキャンセルする、サポートに問い合わせるといった作業をすばやく行えます。

データセクション

Detail View 1 のデータセクション同様、sObject の特定の項目を表示する場合に使用します。たとえば、右のサンプルでは、注文レコードに関連付けられた注文の金額、配送日付、取引先の名前、請求先住所が表示されています。

Detail View 1 の関連リストセクション同様、子レコードを表示する場合に使用します。たとえば、右のサンプルでは、注文レコードに関連付けられた製品が表示されています。

アクションボタン

Detail View 1 のアクションボタン同様、編集、削除などの操作を実行するボタンを、1 つまたは複数表示する場合に使用します。

Data Input – データ入力

データ入力用のテンプレートでは、HTML5 フォームの基本要素を使用してモバイルデバイスからのユーザ入力を取得します。このタイプのテンプレートに含まれているさまざまなフォーム要素 (電話、日付、数値、テキストなど) は、ユーザが Salesforce データの追加、更新などの操作を行うあらゆるモバイルアプリケーションで使用できます。

Standard – 標準

Standard テンプレートは、ユーザ入力を取得するための基本的な HTML5 フォーム要素をすべてカバーします。このテンプレートの実例は、モバイルデザインテンプレートのサンプルアプリケーションに含まれている Visualforce ページ InspectionReport で確認できます。

このテンプレートは、テンプレート共通で使われるヘッダーコンポーネントのほか、以下から構成されます。

テキスト

テキストの入力を許可するには、次のようなマークアップを追加します。

        <section class="border-bottom">
         <div class="content">
          <h3>Hotel Name</h3>
          <div class="form-control-group">
           <div class="form-control form-control-text">
            <input type="text" name="text">
           </div>
          </div>
         </div>
        </section>
日付

日付の入力を許可するには、次のようなマークアップを追加します。

        <section class="border-bottom">
         <div class="content">
          <h3>Inspection Date</h3>
          <div class="form-control-group">
           <div class="form-control form-control-date">
            <input type="date" name="date">
           </div>
          </div>
         </div>
        </section>
トグル

クリックによる値の切り替え (チェックボックス) を許可するには、次のようなマークアップを追加します。切り替えのオン/オフの対象として表示するテキストは、data-on-label 属性と data-off-label 属性を使用して指定します。

        <section class="border-bottom">
         <div class="content">
          <h3>Passed</h3>
          <div class="form-control-group">
           <div class="form-control form-control-toggle" data-on-label="yes" data-off-label="no">
            <input type="checkbox" name="toggle">
           </div>
          </div>
         </div>
        </section>
テキストエリア

長文入力が可能なテキストエリアでの入力を許可するには、次のようなマークアップを追加します。

        <section class="border-bottom">
         <div class="content">
          <h3>Remarks</h3>
          <div class="form-control-group">
           <div class="form-control form-control-textarea">
            <textarea></textarea>
           </div>
          </div>
         </div>
        </section>
複数選択が可能な選択リスト

複数選択が可能な選択リストでの値の指定を許可するには、次のようなマークアップを追加します。

        <section class="border-bottom">
         <div class="content">
          <h3>Room Types</h3>
          <div class="span-50 form-control-group">
           <div class="form-control form-control-checkbox">
           <input type="checkbox"><label>Single</label>
           </div>
           <div class="form-control form-control-checkbox">
           <input type="checkbox"><label>Double</label>
           </div>
          </div>
          <div class="span-50 form-control-group">
           <div class="form-control form-control-checkbox">
           <input type="checkbox"><label>Suite</label>
           </div>
          </div>
         </div>
        </section>
選択リスト

選択リストでの値の指定を許可するには、次のようなマークアップを追加します。

        <section class="border-bottom">
         <div class="content">
          <h3>Hotel Type</h3>
          <div class="form-control-group">
           <div class="form-control form-control-select">
            <select>
             <option>Owner Operated</option>
             <option>Co-op</option>
             <option>Pure Anarchy</option>
            </select>
           </div>
          </div>
         </div>
        </section>
数値

数値の入力を許可するには、次のようなマークアップを追加します。

        <section >
         <div class="content">
          <h3>Number of Rooms</h3>
          <div class="form-control-group">
           <div class="form-control form-control-number">
           <input type="number" >
           </div>
          </div>
         </div>
        </section>
アクションボタン

送信、編集、削除などの操作を実行するボタンを1 つまたは複数表示するには、次のようなマークアップを追加します。

        <section class="data-capture-buttons one-buttons">
         <div class="content">
             <a href="#">submit</a>
            </div>
        </section>

2 つのボタンを表示する場合は、上記のコードで two-buttons スタイルを指定します。

Survey – 調査

Survey テンプレートは、モバイルデバイスからシンプルなアンケート調査の回答を取得します。このテンプレートの実例は、モバイルデザインテンプレートのサンプルアプリケーションに含まれている Visualforce ページ Take_Survey で確認できます。

このテンプレートで使用されるフォーム要素は、前述の Standard テンプレートとほぼ共通しています。異なるのは次の 2 つのみです。

トグル

Standard テンプレートのトグルと似ていますが、このテンプレートでは、次のようなマークアップを使用して、Yes/No のいずれかを選ぶような二者択一型の入力を許可します。

        <section>
         <div class="content">
          <form>
           <div class="form-header-survey">Question 1<span class="color-menu-blue">/4</span></div>
           <p>Morbi id urna in diam dignissim feugiat?</p>
           <div class="form-control-group">
            <div class="form-control form-control-radio form-control-radio-thumbs span-50">
             <input type="radio" name="name" value="yes"><label class="thumbs thumbs-up">&nbsp;</label>
            </div>
            <div class="form-control form-control-radio form-control-radio-thumbs span-50">
             <input type="radio" name="name" value="no"><label class="thumbs thumbs-down">&nbsp;</label>
            </div>
           </div>
          </form>
         </div>
        </section>
ナビゲーションボタン

Standard テンプレートのアクションボタンのスタイルを使う代わりに、次のようなスタイルを使用して、前の画面 (previous) や次の画面 (next) へのナビゲーションを実行するボタンを表示します。

        <section class="form-navigation-buttons">
         <div class="content">
          <a href="#" class="span-50 previous">previous</a>
          <a href="#" class="span-50 next">next</a>     
         </div>
        </section>

Survey テンプレートでは、これらのナビゲーションボタンのほか、回答入力を完了させるボタンを finish スタイルクラスを使用して表示することもできます。

Map View – マップビュー

マップビュー用のテンプレートを使うと、Google マップベースのデザインを使用して、周辺情報を検索できる標準的な機能をモバイルデバイスに実装できます。Salesforce の地理位置情報カスタム項目SOQL クエリもサポートされています。これらの機能により、Web アプリケーションにもハイブリッドモバイルアプリケーションにも地理位置情報機能を追加できるようになります。

Map View 1 – マップビュー 1

Map View 1 テンプレートは、ページの上側にデータレコード (右のサンプルでは取引先責任者) のリストを表示し、データレコードのリストから特定のレコードが選択されると、ページの下側に対応する位置情報を表示します。HTML5 の地理位置情報機能と、距離に関する情報を取得する SOQL クエリ (DISTANCE) を使うことで、周辺情報を検索してページに表示させることが可能になります。ユーザがリストからレコードを選択すると、ページ下側に、緯度・経度にもとづくマーカーが示された Google マップが表示されます。マップ上の住所をクリックすると、デバイス (iOS または Android) にネイティブのマップアプリケーションが起動します。

このテンプレートは、テンプレート共通で使われるヘッダーコンポーネントのほか、以下から構成されます。

リスト

リストセクションは、通常、Salesforce からクエリするデータセットを表示します。

        <ul class="list-view left-thumbs right-one-icons">
            <li>
                <div class="thumbs">
                    <img class="thumb" src="images/placeholders/contact-2.png">
                </div>
                <a href="#" class="content" data-map-id="0">
                    <h2>Rachel Aarons</h2>
                    Project Manager
                    <div class="list-view-icons">
                        <span class="icon-map-dot">&nbsp;</span>
                    </div>
                </a>
            </li>
        </ul>
マップ

ユーザがリストセクションのいずれかのレコードをクリックした場合に、緯度・経度にもとづくマーカーが示された Google マップを表示します (右のサンプル画面で操作してみてください)。

        <div id="map-canvas-wrapper" class="map-canvas-wrapper map-canvas-wrapper-list-view">
        </div>

この Google マップの操作は、main.js スクリプトファイルで実装されます。リストセクションの各レコードの緯度・経度にもとづく座標情報を main.jsmapObj オブジェクトに渡すには、JavaScript による簡単な初期化コードを追加します。

        var markers = [
                {
                    id: 0,
                    lat: 47.604789,
                    lng: -122.335682,
                    contentString: "<div class='infowindow-container'><p class='span-50'><strong>Address</strong><br/><a href='https://maps.apple.com/maps?q=47.620513,-122.34861'>555 Madison Ave<br/>Seattle, WA<br/>98105</a></p><p class='span-50'><strong>Phone</strong><br/>555.123.4321</p></div>"
                } ];

        mapObj.init({
            view: "listView",
            markers: markers
         });

このコードでは、リンク maps.apple.comcontentString 変数に渡されており、iPhone でユーザが (道順確認などのために) Google マップの住所をクリックすると、iOS ネイティブのマップアプリケーションを起動します。Android デバイスの場合は、別の URL を指定することで同様の操作を実行できます。

Map View 2 – マップビュー 2

このテンプレートは、Map View 1 テンプレートとは異なる方法で周辺情報の検索を実行します。Google マップには、現在地 (HTML5 の地理位置情報機能を使用して取得) のほか、周辺のデータポイントも表示されます。こうした周辺情報のデータレコードは、Map View 1 テンプレートの場合と同様に、通常は距離に関する情報を取得する SOQL クエリを通じて取得されます。マップ上のマーカーをクリックすると、デバイス (iOS または Android) にネイティブのマップアプリケーションが起動します。

このテンプレートは、テンプレート共通で使われるヘッダーコンポーネントのほか、以下から構成されます。

マップ

ページ上で Google マップを使用するには、コンテナとして機能するシンプルな <div> タグを追加します。

        <div id="map-canvas-wrapper">&nbsp;</div>

この Google マップの操作は、main.js スクリプトファイルで実装されます。周辺レコードの緯度・経度にもとづく座標情報を main.jsmapObj オブジェクトに渡すには、JavaScript による簡単な初期化コードを追加します。

        var markers = [
            {
                id: 0,
                lat: 47.604789,
                lng: -122.335682,
                contentString: "<div class='infowindow-container'><p class='span-50'><strong>Address</strong><br/><a href='https://maps.apple.com/maps?q=47.620513,-122.34861'>555 Madison Ave<br/>Seattle, WA<br/>98105</a></p><p class='span-50'><strong>Phone</strong><br/>555.123.4321</p></div>"
            } ];

        mapObj.init({
            view: "listView",
            markers: markers
        });

Calendar View – カレンダービュー

カレンダービュー用のテンプレートでは、Salesforce に格納されたユーザの ToDo や行動を、モバイルに最適化された形式で表示できます。

Day Calendar – 日付カレンダー

Day Calendar テンプレートは、Salesforce でスケジュール済みの ToDo や行動を、モバイルに最適化された形式で表示します。

このテンプレートは、テンプレート共通で使われるヘッダーコンポーネントのほか、以下から構成されます。

週表示

現在の週の日付をページの左側に配置し、行動がある場合は濃い茶色のドット、ToDo がある場合は薄い茶色のドットを表示します。

        <div class="span-50 padding-right-gutter-half">
            <h1 class="padding-bottom-gutter">My Week</h1>
            <ul class="week-planner">
                <li data-date="06-20">
                    <div class="date">06/20</div>
                    <ul class="week-planner-items">
                        <li class="event"></li>
                        <li class="event"></li>
                        <li class="task"></li>
                        <li class="task"></li>
                    </ul>
                </li>
            </ul>
        </div>

上のコードに示したように、ToDo と行動のリストをドットで表示するには、<ul> タグや <li> タグ内で、スタイルクラスとして week-planner-itemseventtask を使用します。

カレンダーエントリ

ユーザが週表示のビューで特定の日付を選択した場合に、その日の ToDo や行動の詳細をページの右側にリストします (右のサンプルで操作してみてください)。

        <div class="span-50 padding-left-gutter-half">
            <div class="date-content" id="date-content-06-20">
                <h1 class="event">Events</h1>
                <div class="events">
                    <h3>Weekly Sales meeting</h3>
                    <p>
                        10:00AM - 11:00AM<br/>
                        <a href="#">John Doe</a><br/>
                        <a href="#">Opportunity #1232213</a>
                    </p>
                </div>
                <h1 class="task">Tasks</h1>
                <div class="tasks">
                    <h3>Weekly Sales meeting</h3>
                    <p>
                        <a href="#">John Doe</a><br/>
                        <a href="#">Opportunity #1232213</a>
                    </p>
                </div>
            </div>
         </div>

上のコードに示したように、ToDo と行動をページ上で異なる色で表示するには、スタイルクラスとして tasksevents を使用します。このセクションに <a> リンクを追加することで、ToDo や行動の各レコードの詳細ビューが表示されるようになります。

特定の日付に対応する ToDo や行動を表示するためのロジックは、main.js ファイルにカプセル化されています。

To-do Tasks – 未完了の ToDo

To-do Tasks テンプレートは、完了していない ToDo を、モバイルに最適化された形式で表示します。ユーザは、その日の ToDo のほか、その週、その月といった期間ごとに未完了の ToDo をすばやく確認することが可能になります。期日を過ぎた ToDo は赤線付きで表示されます。ToDo エントリの横にあるチェックボックスをクリックすると、ToDo の完了を簡単に指定できます。

このテンプレートは、テンプレート共通で使われるヘッダーコンポーネントのほか、以下から構成されます。

タブコンポーネント

未完了の ToDo を、今日・今週・今月という期間ごとに確認できるようにする場合に使用します。

        <div id="tabbed-list-view-nav" class="tabbed-list-view-nav">
            <a href="#" class="span-33 on">Today</a>
            <a href="#" class="span-33">This Week</a>
            <a href="#" class="span-33">This Month</a>
            <div id="tabbed-list-view-nav-arrow" class="tabbed-list-view-nav-arrow">&nbsp;</div>
        </div>

なお、このコンポーネントは、リストビュー用の Tabbed テンプレートで使用されているタブコンポーネントと同じものです。

ToDo

未完了の ToDo のリストを表示します。次のようなマークアップを使って、個々の ToDo をリストに追加します。

        <ul class="list-view list-view-tasks">
            <li>
                <div class="content">
                    <div class="task-complete-checkbox">
                        <input type="checkbox" name="checkbox" />
                    </div>
                    <div class="date">07/14</div>   
                    <h2>Call Mathew</h2>
                    <p><a href="#">Matthew Smith</a></p>
                    <p>Re: <a href="#">System Updates</a></p>
                </div>
            </li>
        </ul>
期日超過のマーキング

期日超過の ToDo をマーキングするには、<li> タグに overdue スタイルクラスを追加します。

        <li class="overdue">
ToDo の完了

ユーザがチェックボックスをクリックして ToDo の完了を設定した場合に、取り消し線を表示します。main.js ファイルの JavaScript を使用します。

Reports and Dashboards – レポート、ダッシュボード

レポート、ダッシュボード用のテンプレートは、モバイルに最適化された形式で Salesforce データのレポートを表示する場合に使用できます。一連のテンプレートは、オープンソースの D3 グラフライブラリを使用して開発されており、テンプレートと Salesforce の分析用 API を利用することで、モバイルアプリケーションにレポート作成機能を追加できます。

モバイルデザインテンプレートのサンプルアプリケーションに含まれている Visualforce ページ InventoryReport で、モバイルに最適化されたレポートを表示する例を確認できます。

Gauge – ゲージ

Gauge テンプレートは、D3 のゲージグラフの機能を使用して Salesforce レポートを表示します。

        <section>
         <div class="content">
          <div id="graph" class="graph"></div>
         </div>
        </section>

現時点では、Gauge テンプレートのゲージグラフは、ハードコードされたデータで初期化されます。

        $(document).ready(function() {
            reportObj.init({
                graphType: "gauge",
                width: 300,
                gauge: {
                    max: 5000,
                    value: 1202
                }
            });
        });

ハードコードされたデータは、分析用 API を使って、Salesforce レポートのリアルタイムのデータに置き換える必要があります。D3 でのゲージグラフの表示に使用される JavaScript のロジックは、main.js スクリプトを確認して把握することも可能です。

Donut – ドーナツ

Donut テンプレートは、D3 のドーナツグラフの機能を使用して Salesforce レポートのデータの分布を表示します。

        <section>
         <div class="content">
          <div id="graph" class="graph"></div>
         </div>
        </section>

現時点では、Donut テンプレートのドーナツグラフは、JSON データがハードコードされた状態で初期化されます。

        $(document).ready(function() {
            reportObj.init({
                graphType: "donut",
                jsonURL: "json/survey.json"
            });
        });

ハードコードされたデータは、分析用 API を使って、Salesforce レポートのリアルタイムのデータに置き換える必要があります。D3 でのドーナツグラフの表示に使用される JavaScript のロジックは、main.js スクリプトを確認して把握することも可能です。

Bar Chart – 棒グラフ

Bar Chart テンプレートは、D3 の棒グラフの機能を使用して Salesforce レポートのデータを表示します。

        <section>
         <div class="content">
          <div id="graph" class="graph"></div>
         </div>
        </section>

現時点では、Bar Chart テンプレートの棒グラフは、JSON データがハードコードされたデータで初期化されます。

        $(document).ready(function() {
            reportObj.init({
                graphType: "bar",
                jsonURL: "json/produts.json",
                axis : {
                    xAxisIndex: "name",
                    yAxisIndex: "inventory"
                }
            });
        });

ハードコードされたデータは、分析用 API を使って、Salesforce レポートのリアルタイムのデータに置き換える必要があります。D3 での棒グラフの表示に使用される JavaScript のロジックは、main.js スクリプトを確認して把握することも可能です。

Line Chart – 折れ線グラフ

Line Chart テンプレートは、D3 の折れ線グラフの機能を使用して Salesforce レポートのデータを表示します。

        <section>
         <div class="content">
          <div id="graph" class="graph"></div>
         </div>
        </section>

現時点では、Line Chart テンプレートの折れ線グラフは、JSON データがハードコードされたデータで初期化されます。

        $(document).ready(function() {
            reportObj.init({
                graphType: "line",
                jsonURL: "json/sales.json",
                line: {
                    periods : [10, 30]
                },
                axis: {
                    xAxisIndex: "date",
                    yAxisIndex: "total"
                }
            });
        });

ハードコードされたデータは、分析用 API を使って、Salesforce レポートのリアルタイムのデータに置き換える必要があります。D3 での折れ線グラフの表示に使用される JavaScript のロジックは、main.js スクリプトを確認して把握することも可能です。

Miscellaneous – その他

このカテゴリのテンプレートは、多くのモバイルアプリケーションでよく利用される機能をシンプルなデザインで提供します。これらのテンプレートをベースに、設定画面、スプラッシュ画面、バージョン情報画面をモバイルアプリケーションに追加できます。

Settings screen – 設定画面

Settings screen テンプレートは、モバイルアプリケーションに関する設定をユーザが表示、更新できる画面を提供します。

        <div class="list-view-header">Screen Security</div>
        <section>
            <div class="content">
                <div class="span-66 settings settings-left">
                    <h3>Screen Lock</h3>
                </div>
                <div class="span-33 settings settings-right">
                    <div class="form-control-group">
                        <div class="form-control form-control-toggle" data-on-label="on" data-off-label="off">
                            <input type="checkbox" name="toggle">
                        </div>
                    </div>
                </div>
            </div>
        </section>

このテンプレートで使用されているフォーム要素は、データ入力用の Standard テンプレートで使用されているものと同じです。

Splash screen – スプラッシュ画面

Splash screen テンプレートは、ユーザがモバイルアプリケーションを最初に起動したときに、自社のブランディングを適用したスプラッシュ画面を表示します。

        <div class="splash-screen-wrapper">
            <div class="content">
                <div class="logo">
                    <img src="images/placeholders/logo.png" width="206" height="54" >
                </div>
                <div class="tagline">
                    Acme Inc Mobile App
                </div>
            </div>
        </div>
Credits screen – クレジット情報画面

Credits screen テンプレートは、モバイルアプリケーションのクレジットを記載したバージョン情報画面を表示します。

        <div class="detail-view-header detail-view-header-about">
            <div class="content">
                <img src="images/placeholders/logo.png" width="206" height="54" >
                <div class="version">App Version 2.13</div>
                <div class="description">Some Description</div>
            </div>
        </div>

        <ul class="list-view right-one-icons padding-top-gutter">
            <li>
                <a href="#" class="content">
                    <h2>Rate this App</h2>
                    <div class="list-view-icons">
                        <span class="icon-right-arrow">&nbsp;</span>
                    </div>
                </a>
            </li>
        </ul>

*Page design inspired by Ratchet

Device