Salesforce1 サンプルアプリケーション

## オーバービュー ##

このデモアプリケーションでは、意識調査というカスタムアプリケーションを利用します。 意識調査 では、顧客に提示した質問についての回答をトラックングする事が可能です。このアプリケーションを利用して、Salesforce1アプリケーションの機能について学んでいきます。

### キーとなるテクノロジー ###

以下のテクノロジーをこのデモアプリケーションでは使用しています:

Force Command-line Interface (CLI)
レポートタイプ & レポート
Salesforce1 アプリケーション
モバイルカード
パブリッシャーアクション (クイックアクション)
コンパクトビュー

### セクション ###

このデモアプリケーションは5つのセクションに分かれています:

セクション 1: レポートタイプとレポートの作成
セクション 2: Visualforceページおよびチャートを分析APIを利用して作成
セクション 3: モバイルカードをSalesforce1 アプリケーションに追加
セクション 4: クイックアクションをSalesforce1アプリケーションへ追加
セクション 5: 意識調査質問のコンパクトレイアウトを作成

基本的にはセクション 1 から順番に行っていく事をお勧めします。

## デモアプリケーションの作成 ## #### セクション 1: レポートタイプとレポートの作成 ####

このデモアプリケーションではSalesforce1アプリケーション内でレポートを利用します。カスタムレポートを作成するにあたり、その前にカスタムレポートタイプを作成する必要があります。

ここでは意識調査の質問に対する回答のレポートを作成します。

カスタムレポートタイプの作成

新しいカスタムレポートタイプを作成します。

設定 | 作成 | レポートタイプをクリックします。もし解説ページが現れた場合は 続けるをクリックします。
新規カスタムレポートタイプ をクリックします。
主オブジェクト に 意識調査質問回答 を選択します。
レポートタイプの表示ラベル に 意識調査質問回答 を入力し、 レポートタイプ名 には Opinion_Question_Answers と入力します。
説明には 意識調査質問回答のカスタムレポートタイプ と入力します。
カテゴリに格納 で その他レポート を選択します。
リリース状況 では リリース済み を選択します。
次へをクリックします。
保存をクリックします。

カスタムレポートの作成

ホーム や 意識調査の並ぶメニューバー上にある + ボタンをクリックします。
レポート をクリックします。
新規レポート をクリックします。
その他レポート を展開し、 意識調査質問回答 を選択肢し作成をクリックします。
レポートを 表形式 から マトリックス形式 へ変更します。
意識調査質問: 意識調査質問番号 を 行のグルーピングを作成するには、ここに項目をドロップします。 の箇所にDrag & Dropします。
回答を 列のグルーピングを作成するには、ここに項目をドロップします。 の箇所にDrag & Dropします。
保存をクリックします。
レポート名を回答とし、 レポートの一意の名前 を Answers にします。
レポートを保存して実行 をクリックします。
レポートのIdを確認します。これはブラウザのURLから確認できます。以下の用に取得して下さい。

これで必要なレポートタイプおよびレポートの作成が完了しました。

#### セクション 2: Visualforceページおよびチャートを分析APIを利用して作成 ####

Visualforce コンポーネントの作成

新しくVisualforceコンポーネントを作成します

設定 | 開発 | コンポーネント をクリックします。
新規をクリックします。
表示ラベル には 意識調査パイチャート と入力し名前には OpinionChartPie と入力します。

以下のコードを Visualforce Markup タブに入力します。このコードは src フォルダ内の OpinionChartPie.component ファイルからも見つける事が可能です。

注意: YOUROQIDの部分を任意の OQ-0000 の意識調査質問のオブジェクトのIDで書き換えて下さい。 IDの取得方法はレポートのサイト同様に、データを表示した際のURL部分から15 or 18桁のIDを取得します。

<apex:component >
	<apex:attribute name="reportId" description="ReportId" type="String" id="reportId"/>
	<apex:attribute name="questionName" description="Question Name" type="String" id="questionName"/>
    <apex:includeScript value="//code.jquery.com/jquery.js"/>
    <!--
	<apex:includeScript value="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" />
    -->
    <apex:includeScript value="//cdnjs.cloudflare.com/ajax/libs/d3/3.3.9/d3.min.js" />
    <apex:includeScript value="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.13-beta/nv.d3.min.js"/>
    
    <apex:stylesheet value="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
    <apex:stylesheet value="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"/>
    <apex:includeScript value="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"/>

    <script>
     var myChart;
     var chart;
     var that = {}
 $(document).ready(function(){
	
    $.ajax('/services/data/v29.0/analytics/reports/{!reportId}',
        {
            type: "POST",
            data:{
			    "reportMetadata": {
	        	    "reportFilters": [
    	        	{
        	        	"value": "{!questionName}",
	            	    "operator": "equal",
    	            	"column": "YOUROQID"
        	    	}]
                }
            },
            beforeSend: function(xhr) {
                xhr.setRequestHeader('Authorization', 'Bearer {!$Api.Session_ID}');
            },
            success: function(response) {
                /* Format the data */
                that.simpleData = []
                $.each(response.groupingsDown.groupings, function(di, de) {
                    $.each(response.groupingsAcross.groupings, function(ai, ae) {
                        that.simpleData.push({"key": ae.label, "y": response.factMap[de.key+"!"+ae.key].aggregates[0].value});
                    });
                });

                /* Chart */
                 mychart = nv.addGraph(function() {
                     var windowBox = getWindowBox();
                    var width = windowBox.width,
                	    height = windowBox.height;
                
                    chart = nv.models.pieChart()
                        .x(function(d) { return d.key })
                        .y(function(d) { return d.y })
                        .color(d3.scale.category10().range())
                        .width(width)
                        .height(height);
               
                    d3.select("#chart1")
                        .datum(that.simpleData)
                        .transition()
                        .duration(1200)
                        .attr('width', width)
                        .attr('height', height)
						.attr("viewBox", "0, 0, " + width + ", " + height)
						.attr("preserveAspectRatio", "xMinYMin")
                        .call(chart);
                
                    chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
                    nv.utils.windowResize(chart.update);
                    return chart;
                });
            }
        }
    );
});

	function getWindowBox(){
        var w = window,
        d = document,
        e = d.documentElement,
        g = d.getElementById('chart'),
        x = w.innerWidth || e.clientWidth || g.clientWidth,
        y = w.innerHeight|| e.clientHeight|| g.clientHeight;
        x = w.innerWidth || e.clientWidth || g.clientWidth;
        y = w.innerHeight|| e.clientHeight|| g.clientHeight;
        return { width:x, height:y };
    }
	function updateWindow() {
        var box = getWindowBox();
        $("#chart1").attr("width", box.width).attr("height", box.height);
    }
    window.onresize = updateWindow;
    
        
</script>
<div class="row">
    <svg id="chart1"></svg>
</div>
</apex:component>

保存をクリックします。

Visualforceページの作成

新しくVisualforceページを作成します。

設定 | 開発 | ページ をクリックします。
新規をクリックします。
表示ラベル に 意識調査パイチャート と入力し名前に OpinionChartPie と入力します。
Salesforce モバイルアプリケーションでの使用が可能 にチェックを入れます。

以下のコードを Visualforce Markup タブに入力します。このコードは src フォルダ内の OpinionChartPie.page ファイルからも見つける事が可能です。

注意: YOURREPORTID の部分を前のセクションで取得したレポートのIDで書き換えて下さい

<apex:page cache="false"
    standardController="Opinion_Question__c"
    standardStylesheets="false"
    showHeader="false"
    sidebar="false">
        
  <meta name="viewport" content="width=device-width"/>
  <c:OpinionChartPie questionName="{!Opinion_Question__c.Name}" reportId="YOURREPORTID">
  </c:OpinionChartPie>

</apex:page>

保存をクリックします。
プレビュー をクリックし、レポートが正しく表示されるかを確認します。以下の様なレポートが表示されるはずです:

これでVisualforceコンポーネントおよびページの作成が完了しました。

#### セクション 3: モバイルカードをSalesforce1 アプリケーションに追加 ####

意識調査質問のページレイアウトにモバイルカードを追加してみましょう

意識調査質問 のページレイアウトを設定 | 作成 | オブジェクト から選択します。
意識調査質問 をリストから選択します。
ページレイアウト セクションで 意識調査質問レイアウト の横の編集をクリックします。
Visualforce ページ を 意識調査質問レイアウト 選択し、 意識調査パイチャート を モバイルカード (Salesforce1 のみ) セクションへDrag & Dropします。
保存をクリックします。

実際に試してみましょう。

新しいタブを開き、以下のURLを入力し、Salesforce1 Webクライアントへアクセスします: https://ap.salesforce.com/one/one.app

注意: このクライアントはモバイル画面にあわせてデザインされています。ブラウザウィンドウをモバイル画面のサイズに調整することで、実際のモバイル画面近い挙動を得られます。または、モバイルシュミレータ/エミュレータをからログイン、もしくはApple StoreやGoogle Playからアプリケーションをダウンロードすることも可能です。
左上のメニューを開き 表示件数を増やす をタップし、 意識調査 アプリケーションを選択します。
OP-0000 の意識調査を選択します。
右側にスワイプ (もしくは右側のドットをクリック) し、意識調査質問 をクリックします。
OQ-0000 の質問を選択します。
右側へスワイプ (もしくは右側のドットをクリック)します。グラフがページ上に表示されています。

追加の項目を質問ページに追加してみましょう。

意識調査質問レイアウト より拡張ルックアップ を選択します。
意識調査 を先ほど追加した 意識調査パイチャート の下へDrag & Dropします、保存をクリックします。
Salesforce1モバイルアプリケーションにもどります。ページをリフレッシュし、元のチャートのページの戻ります。すると意識調査質問 の情報がチャートの下に表示されているでしょう。

おめでとうございます。モバイルカードをSalesforce1アプリケーションへ追加する事に成功しました。

#### セクション 4: クイックアクションをSalesforce1アプリケーションへ追加 ####

設定 | 作成 | オブジェクト をクリックします。
意識調査質問 をリストから選択します。
ボタン、リンク、およびアクション セクションより新規アクションをクリックします。
レコードを更新 を アクション種別 に選択します。
表示ラベル に 質問の無効化 と入力し、名前に Deactivate_Question と入力します。
保存をクリックします。
意識調査質問項目 より質問の無効化 をページへ Drag & Dropします。
保存をクリックします。
定義済み項目値 の新規をクリックします。
有効を 項目名 から選択します。
新規項目値の指定 の数式エディタへ "False" (ダブルクォートは無し) を入力しします。
保存をクリックします。
意識調査質問 オブジェクトまで戻り、ページレイアウト セクションから 意識調査質問レイアウト の横にある編集をクリックします。
パブリッシャーアクション にある　グローバルパブリッシャーレイアウトを上書き をクリックします。
意識調査質問レイアウト の下にある アクション を選択します。
質問の無効化 を パブリッシャーアクション リストの先頭に Drag & Dropします。

注意: パブリッシャーアクション のセクションには通常グローバルパブリッシャーレイアウトで定義された項目が並びますが、これを上書きする事が可能で、 グローバルパブリッシャーレイアウトを上書き のリンクをクリックします。
保存をクリックします。

実際に試してみましょう。!

モバイルアプリケーションに戻ります。アプリケーションをリフレッシュする事を忘れないで下さい。
左上のメニューを開き、 表示件数を増やす から 意識調査 アプリケーションをクリックします。
OP-0000 の意識調査を選択します。
右へスワイプ (もしくは右のドットをクリック) し、意識調査質問をクリックします。
OQ-0001 の質問をクリックします。
スクリーン右下角にある、青いボックスに+マークの入った クイックアクション ボタンをクリックします。
質問の無効化をクリックします。
会社からの削除命令 を 無効化の理由 リストより選択します。
送信をクリックします。

#### セクション 5: 意識調査質問のコンパクトレイアウトを作成 ####

設定 | 作成 | オブジェクト をクリックします。
意識調査質問 をリストより選択します。
コンパクトレイアウト から新規をクリックします。
表示ラベル に カスタムコンパクトレイアウト と入力し、名前に Custom Compact Layout と入力します。
以下のフィールドを選択して並べます: 意識調査質問番号, 質問, 有効, 無効化の理由
保存をクリックします。
コンパクトレイアウトの割当 をクリックし、 割り当ての編集をクリックします。カスタムコンパクトレイアウト をリストより選択し保存をクリックします。
モバイルアプリケーションで 意識調査質問 ページへ戻り、ページをリフレッシュします。

注意: Salesforceはページを積極的にキャッシュします。もし新しいビューが表示されない場合は、ブラウザの履歴を消去するか、もしくはブラウザ/エミュレータを一旦閉じて見て下さい。
ページがコンパクトレイアウトによって設定したレイアウトで表示されている事を確認します。

おめでとうございます! これでこのサンプルアプリケーションの作成が完了しました！！

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DEMO.md

DEMO.md

Salesforce1 サンプルアプリケーション

カスタムレポートタイプの作成

カスタムレポートの作成

Visualforce コンポーネントの作成

Visualforceページの作成

Files

DEMO.md

Latest commit

History

DEMO.md

File metadata and controls

Salesforce1 サンプルアプリケーション

カスタムレポートタイプの作成

カスタムレポートの作成

Visualforce コンポーネントの作成

Visualforceページの作成