みなさん、こんにちは。
Force.com Canvas ってご存知ですか？ 実際のプロジェクトで利用していますか？？
私はまだ利用していません。 なぜなら、Summer '13 で正式リリースになったばかりの、出来立てホヤホヤな仕組みだからです。
今回は Force.com Canvas を実際に作成しながら、どんなことがどうやってできるのか、みなさんと一緒に見てみたいと思います。
Force.com Canvas で何ができる？
Salesforce 外のサードパーティの Web アプリケーションをキャンバスアプリケーションとして、 Salesforce の Chatter タブ、Visualforce ページに簡単に統合することができます。さらに Visualforce ページには、複数のキャンバスアプリケーションを表示することもできます。
キャンバスアプリケーションとして公開するサードパーティのアプリケーションは、実装言語は問いません。 (Salesforce からは Ruby と Java のサンプルが提供されています)
従来から iFrame を利用して外部 Web アプリケーションを画面上で統合することは可能でしたが、任意のドメインでホストされているキャンバスアプリケーションから JavaScript による XHR(XmlHttpRequest) を「*.salesforce.com」に対して利用できるため、Salesforce データに対して REST API による CRUD が可能であること 、同一 Visualforce ページに表示されているキャンバスアプリケーション間でイベントによるコミュニケーションが可能であること、などは大きく異なる特徴です。
なお、キャンバスアプリケーションから XHR を行う際には、クロスドメイン XHR コールと呼ばれるプロキシ機構を利用していますが、Force.com Canvas SDK の Sfdc.canvas.client.ajax 関数を利用していれば、あまり意識せずに利用できます。
また、キャンバスアプリケーションは管理パッケージとしてパッケージングして、別の組織にインストールすることも可能です。 ちなみに、Force.com Canvas は HTML5 の Canvas とは全く関係ありません。
準備するもの
- Developer Edition 組織
- Heroku アカウント
Force.com Canvas として必要なのは Developer Edition 組織だけです。
(管理パッケージにして公開する必要がなければ、Unlimited Edition や Enterprise Edition、API と Force.com Canvas が有効化された Professional Edition でも可能です)
今回はHeroku でホストする アプリケーションを利用するため、Heroku アカウントを用意しています。
さっそく作ってみましょう
| 1. Salesforce の設定にある [キャンバスアプリケーションのプレビューア] から、[Heroku のクイックスタート] をクリック |
| 2. Canvas アプリケーション名や Heroku のログイン情報を入力して[作成] をクリック |
 |
| 3. できました。あっけないほど早いですね！ |
 |
| Canvas Request の部分には Salesforce のユーザ情報が表示されています。 また、Post to Chatter で Chatter に投稿する機能も動作します。 |
| 4. アプリケーションがホストされている Heroku を見てみましょう |
 |
| 1. で指定した Heroku アプリケーションができています。 |
現在はキャンバスアプリケーションのプレビューアに表示しているだけですので、Chatter タブ や Visualforce ページに組み込めるように設定を行います。また、Salesforce 側で行う設定内容も合わせて確認しましょう。
| 1. Salesforce の設定から[作成] → [アプリケーション] クイックスタートで指定したキャンバスアプリケーション名で接続アプリケーションができていますので、接続アプリケーション名をクリック | ||||
| 2. 編集を行います | ||||
基本情報 |
||||
|
||||
OAuth 設定 |
||||
|
||||
サポートされているアプリケーション種別 |
||||
|
||||
| 3. 保存を行います | ||||
| なお、先に出てきたコンシューマの秘密は Salesforce とキャンバスアプリケーション間の秘密鍵です。 Salesforce では設定から[作成] → [アプリケーション] から接続アプリケーションの参照画面を表示し、[クリックして公開]をクリックすると、参照することができます。 このコンシューマの秘密は、今回のサンプルでは Heroku 側に環境変数 CANVAS_CONSUMER_SECRET として登録されています。 | ||||
 |
もう一つ設定画面がありますので、見てみましょう。
| Salesforce の設定から[アプリケーションを管理する] → [接続アプリケーション] クイックスタートで指定したキャンバスアプリケーション名で接続アプリケーションができていますので、マスタ表示ラベルをクリック |
 |
|
10分で分かるのはここまでです。
とても簡単にできましたね！ Canvas アプリケーションとして利用可能な Web アプリケーションさえあれば、Salesforce 側でどのような設定を行えば良いのか、ご理解頂けたのではないでしょうか。 ここからは、Heroku クイックスタートではなく、Force.com Canvas SDK と コード例からなる Salesforce Canvas Framework SDK を PC にダウンロードし、ソースコードを観察して一部改修した上で、Heroku にリリースを行い、キャンバスアプリケーションとして Salesforce から表示を行います。
準備するもの
- Developer Edition 組織
- Heroku アカウント
- Heroku Toolbelt を PC にインストール
- Git を PC にインストール
作ってみましょう
Salesforce Canvas Framework SDK の 取得
| Git Bash を開き、ダウンロードするフォルダまで移動したら、git clone コマンドでローカルにリポジトリの複製を行います。 Salesforce Canvas Framework SDK のリポジトリはgit@github.com:forcedotcom/SalesforceCanvasFrameworkSDK.git です。 |
 |
Permission denied (publickey). fatal: The remote end hung up unexpectedly などのエラーになってしまう方は、Heroku に SSH キーが正しく設定されていない可能性が高いので、「heroku permission denied git」などで Google 先生に解決方法を聞いてみましょう。 リポジトリの複製が完了したら、作成された SalesforceCanvasFrameworkSDK フォルダに移動し、以下のコマンドを実行しておきます。
|
 |
ソースコードを見てみよう
※ここでは見易さのため、Mavenをインストールした上で、mvn eclipse:eclipse コマンドを実行して Eclipse にインポート可能なプロジェクトにしています。 また、Eclipse で開くといくつか警告が検出されて目障りでしたので、@SuppressWarnings 等で警告を無効にしています。
 |
|
| キャンバスアプリケーションの URL として呼び出す、/examples/chatter-talk/index.jsp を見てみましょう |
5～9 行目でリクエストパラメータを受け取り、署名付き要求文字列を取り出しています。 10 行目では環境変数「CANVAS_CONSUMER_SECRET」からコンシューマの秘密を取得 11 行目で署名付き要求の検証および JSON 形式の文字列で復号化された署名付き要求を取得しています。 script 部分を見てみると、55～57 行目で音声入力が有効になっていたら入力フィールドを block し、 58～61 行目では復号化した署名付き要求を渡して、XHR により入力フィールドの内容を Chatter に書込み、コールバックでステータスを画面に表示しています。 なお、31 行目 と 62 行目は今回追加した行で、署名付き要求を使用して認証した場合に得られる Context オブジェクトから、ユーザ名を取得して表示しています。 Context オブジェクトには、アプリケーションが誰によってどのように使用されるかを示す以下の情報が含まれますので、Salesforce ユーザインターフェースとの統合に使いやすいオブジェクトです。
|
| Chatter に書き込むのに利用している /examples/chatter-talk/chatter-talk.js を見てみましょう |
 |
| index.jsp からは chatterTalk.init が呼び出されていますが、そこから chatterTalk.post が呼び出され、Sfdc.canvas.client.ajax 関数に署名付き要求やポスト内容を渡して、クロスドメイン XHR による Chatter 書込みを行っています。 |
非常にシンプルなコードで Chatter への書込みが実現されていますね。 ソースコードを修正した場合は、変更をコミットしておきましょう
|
Heroku にリリース
| 1. git init コマンドで再初期化を行います。 |
| 2. heroku create コマンドで Heroku にアプリケーションを作成します。 |
 |
| 3. git push heroku master コマンドで Heroku にリリースを行います。 |
 |
| うまくできたようです。 |
| 4. Salesforce 側で新規に接続アプリケーションを作成します。 アクセス方法は署名付き認証を設定し、選択した OAuth 範囲は「基本情報へのアクセス」と「Chatter フィードへのアクセスと管理」を指定します。 また、アプリケーションの管理から接続アプリケーションを開き、許可されているユーザを「管理者が承認したユーザは事前承認済み」に変更します。また、プロファイルには自分の利用しているプロファイルを設定します。 |
| 5. Salesforce で発行されたコンシューマの秘密をコピーし、Heroku の環境変数 CANVAS_CONSUMER_SECRET に設定します |
 |
| なお、今回は作業手順を見せるためにコマンド入力で heroku とのやりとりをしていますが、これらの作業は Heroku Eclipse Plugin を利用すると GUI ベースで簡単に実施できますので、是非お試しください！ |
キャンバスアプリケーションを見てみよう
 |
| うまくできたようです。 作成したキャンバスアプリケーションを Visualforce ページに公開する場合には、<apex:canvasApp>コンポーネントを使用します。 |
まとめ
複数の既存アプリケーションを Salesforce と連動させながら同一画面に統合できる Force.com Canvas は、今後のシステムインテグレーションを考える上で、有力な選択肢になるのではないかと思います。 多様なプラットフォームのサンプルや実績が充実してくれば、Force.com Canvas による統合は当たり前になるかもしれません。 みなさんも是非、一度作ってみてください！
