この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

キャンバスアプリケーションの作成

ここでは、Salesforce 組織でキャンバスアプリケーションを作成する手順を説明します。キャンバスアプリケーションを作成するには、「アプリケーションのカスタマイズ」および「すべてのデータの編集」ユーザー権限を持っている必要があります。

Salesforce で、[設定] から [クイック検索] ボックスに「アプリケーション」と入力し、[アプリケーションマネージャー] を選択します。
[新規接続アプリケーション] をクリックします。
[接続アプリケーション名] 項目で、「Hello World」と入力します。
Hello_World のデフォルトの [API 名] を受け入れます。これは、キャンバスアプリケーションの内部名であり、保存後に変更することはできません。
[取引先責任者メール] 項目で、メールアドレスを入力します。
[ロゴ画像 URL] 項目で、https://localhost:8443/images/salesforce.png と入力します。これは、Salesforce のデフォルトの「ソフトウェアなし」画像です。この画像は、インストール画面とアプリケーションの詳細画面に表示されます。
[アイコン URL] 項目で、https://localhost:8443/examples/hello-world/logo.png と入力します。これは、Salesforce のデフォルトの「ソフトウェアなし」画像です。

これは、ユーザーインターフェースでアプリケーション名の横に表示される画像です。この項目を空白のままにすると、デフォルトの雲の画像がアプリケーション名の横に表示されます。
API ([OAuth 設定の有効化]) セクションで、[OAuth 設定の有効化] 項目を選択します。
[コールバック URL] 項目で、https://localhost:8443/sdk/callback.html と入力します。
[選択した OAuth 範囲] 項目で [ID URL サービスにアクセス (id, profile, email, address, phone)] を選択します。
[キャンバスアプリケーション設定] セクションで、[キャンバス] を選択します。
[キャンバスアプリケーションの URL] 項目で、https://localhost:8443/examples/hello-world/index.jsp と入力します。
[アクセス方法] 項目で、[署名付き要求 (POST)] を選択します。
[場所] 項目で、Chatter タブを選択します。
アプリケーションを保存して [続行] をクリックします。
キャンバスアプリケーションを保存すると、詳細ページが表示されます。
キャンバスアプリケーションの詳細ページで、[コンシューマーの詳細を管理] をクリックして ID を検証します。
コンシューマーの秘密の値を選択し、Ctrl+C を押してコピーします。アプリケーションでは、コンシューマーの秘密を使用して認証が行われます。
コマンドウィンドウに移動し、Ctrl+C を押して Jetty Web サーバーを停止します。メッセージに従って、「Y」と入力します。

CANVAS_CONSUMER_SECRET という環境変数を作成し、コピーしたコンシューマーの秘密にその値を設定します。この操作を Windows で行うには、コマンドウィンドウで set CANVAS_CONSUMER_SECRET=value_you_just_copied と入力します。

Unix/OS X を使用している場合は、コマンド export CANVAS_CONSUMER_SECRET=value_you_just_copied で環境変数を設定します。

次のコードに示すように、「hello world」ページ (c:\SalesforceCanvasFrameworkSDK\src\main\webapp\examples\hello-world\index.jsp) でコンシューマーの秘密が使用されます。

1<%@ page import="canvas.SignedRequest" %>
2<%@ page import="java.util.Map" %>
3<%
4    // Pull the signed request out of the request body and verify and decode it.
5    Map<String, String[]> parameters = request.getParameterMap();
6    String[] signedRequest = parameters.get("signed_request");
7    if (signedRequest == null) {%>
8        This app must be invoked via a signed request!<%
9        return;
10    }
11    String yourConsumerSecret=System.getenv("CANVAS_CONSUMER_SECRET");
12    String signedRequestJson = SignedRequest.verifyAndDecodeAsJson(signedRequest[0], yourConsumerSecret);
13%>
14
15<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
16<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
17<head>
18
19    <title>Hello World Canvas Example</title>
20
21    <link rel="stylesheet" type="text/css" href="/sdk/css/connect.css" />
22
23    <script type="text/javascript" src="/sdk/js/canvas-all.js"></script>
24
25    <!-- Third part libraries, substitute with your own -->
26    <script type="text/javascript" src="/scripts/json2.js"></script>
27
28    <script>
29        if (self === top) {
30            // Not in an iFrame.
31            alert("This canvas app must be included within an iFrame");
32        }
33
34        Sfdc.canvas(function() {
35            var sr = JSON.parse('<%=signedRequestJson%>');
36            Sfdc.canvas.byId('username').innerHTML = sr.context.user.fullName;
37        });
38
39    </script>
40</head>
41<body>
42    <br/>
43    <h1>Hello <span id='username'></span></h1>
44</body>
45</html>

target\bin\webapp.bat コマンド (Windows) または sh target/bin/webapp (Unix/OS X) コマンドを実行して、Web サーバーを再起動します。

Canvas 開発者ガイド

キャンバスアプリケーションの作成

関連項目: