tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Force.com CanvasでHerokuアプリと連携してみました

f:id:tyoshikawa1106:20140927113940p:plain

Force.com Canvasは2013年03月頃にHeroku Quick Startをつかって簡単にさわっていたのですが、きちんと動作するアプリでは試したことがありませんでした。Herokuボタンが登場したことで自分の環境できちんと動作するアプリを簡単に試せるようになったのでこの機会にForce.com Canvasについて勉強してみました。


使わせてもらったアプリは「Employee Directory」というアプリです。IonicとNode.jsをつかって開発されています。リスト表示や画面遷移などの処理を試してみることができ、Salesforce.comの方が公開してくれています。

f:id:tyoshikawa1106:20140925223956p:plain:w300


このアプリをつかってForce.com Canvasの設定や画面の表示を試してみたいと思います。

Force.com Canvasの設定

接続アプリケーションの設定は「作成」→「アプリケーション」で表示される画面の一番下にある「接続アプリケーション」から行えます。

f:id:tyoshikawa1106:20140927163228p:plain

設定内容は大きくわけて次の4つのセクションで構成されています。

  • 基本情報
  • API (OAuth 設定の有効化)
  • Web アプリケーション設定
  • モバイルアプリケーション設定
  • キャンバスアプリケーション設定

基本情報

f:id:tyoshikawa1106:20140927115754p:plain

基本情報では、接続アプリケーション名やAPI名などSalesforce側で使用する情報を設定します。

・接続アプリケーション名
画面に表示されるラベルになります。

・API 参照名
Visualforceページで呼び出す場合などに使用するAPI名です。ユニークになるようにする必要があります。この値は一度設定すると変更が不可になりました。

・取引先責任者 メール
salesforce.com からアプリケーション提供者またはそのサポートチームへの連絡に使用するアドレスとのことです。アプリケーションをインストールするシステム管理者には提供されませんとヘルプに記載がありました。

・取引先責任者 電話
salesforce.com から連絡する必要がある場合に使用する電話番号とのことです。アプリケーションをインストールするシステム管理者には提供されないとのことです。必須項目ではありません。

・ロゴ画像 URLとアイコン URL
アプリで使用する画像を指定できます。ちょっとおもしろかったのが「いずれかのサンプルロゴを選択」リンクにサンプルロゴが用意されているのですが、Salesforceロゴ以外にもGoogleやSAP、Boxなどいろんな種類のロゴが用意されています。OAuthのロゴとかちょっとカッコ良かったです。

f:id:tyoshikawa1106:20140927121143p:plain:w300

f:id:tyoshikawa1106:20140927121159p:plain:w300

f:id:tyoshikawa1106:20140927121218p:plain:w300

f:id:tyoshikawa1106:20140927121232p:plain:w300

・情報 URLと説明
補足情報的なものを入力しておくのだと思います。

API (OAuth 設定の有効化)

f:id:tyoshikawa1106:20140927121637p:plain

接続するアプリケーションが Salesforce と通信する方法を設定できます。アプリ側からアクセス情報を制限するときに使用します。

・コールバック URL
認証が成功した後にユーザのブラウザがリダイレクトされる URL になります。とりあえずHerokuアプリのURLを指定してみます。

・デジタル署名を使用
ヘルプに次のような説明があります。

「JWT OAuth フローを使用している場合は、[デジタル署名を使用] を選択します。アプリケーションが証明書を使用する場合は、[ファイルを選択] をクリックして、証明書のファイルを選択します。」と記載がありました。今回は必要なさそうなので未設定で進めます。

f:id:tyoshikawa1106:20140927122251p:plain:w300


・選択した OAuth 範囲
ここでアプリ側がSelesforceのすべての情報にアクセスできるのか一部の情報のみにアクセスできるのかを設定できます。今回は制限する必要がないのでフルアクセスに設定してみます。

Webアプリケーション設定

f:id:tyoshikawa1106:20140927122706p:plain

・開始 URL

アプリケーションでユーザを認証後に特定の場所に転送したい場合にURLを指定するとのことです。

・SAML の有効化
接続アプリケーションで SAML サービスプロバイダというのを使用する場合は、[SAML の有効化] を選択することで設定ができるみたいです

モバイルアプリケーション設定

f:id:tyoshikawa1106:20140927123052p:plain

・モバイル開始 URL
モバイル端末からアクセスされた場合の遷移先を指定できるみたいです。

・PIN 保護
ヘルプに次のような説明があります。

アプリケーションが PIN 保護をサポートする場合は [PIN 保護] を選択します。これにより、接続アプリケーションのインストール後にシステム管理者がモバイルアプリケーションのセッションタイムアウトや PIN の文字長を設定するオプションを選択できます。PIN 保護は、Salesforce Mobile SDK (http://developer.force.com/mobilesdk) で自動的にサポートされます。PIN 保護は、ユーザの ID URL から mobile_policy オブジェクトを読み取り、手動で実装することもできます。

・アプリケーションプラットフォーム
AndroidとiOSの選択ができます。これを指定するとアプリケーションバージョンの項目が必須項目になります。

・デバイス種別に限定
電話、タブレット、ミニタブレットから選択できます。タブレットからのみ使用を許可するという制御ができるみたいです。

・アプリケーションバージョン
モバイルアプリケーションの [アプリケーションバージョン] 番号を入力します。

・最小 OS バージョン
アプリケーションに必要な [最小 OS バージョン] を入力します。

・非公開アプリケーション
社内でのみ使用するアプリの場合はチェックをつけます。

・アプリケーションバイナリ URL
App StoreなどのURLを指定します。

・プッシュメッセージングの有効化
転送通知を設定できるみたいです。

キャンバスアプリケーション設定

f:id:tyoshikawa1106:20140927123943p:plain

接続アプリケーションをキャンバスアプリケーションとして公開する場合に設定します。

・Force.com Canvas
これにチェックをつけることでForce.com Canvasとして使用できるようになるみたいです。

・キャンバスアプリケーションの URL
HerokuアプリなどのURLを指定するみたいです。

・アクセス方法
キャンバスアプリケーションで OAuth 認証フローを開始する方法を指定します。

・SAML の開始方法
SAMLを使用する場合に設定します。

・場所
ChatterフィードやVisualforceページなど使用可能な場所を設定します。

・ライフサイクルクラス
よくわからなかったのですが、キャンバスアプリからアクセスできるApexクラスを指定できるみたいです。

・アクションの自動作成

キャンバスアプリケーションで公開者の場所がサポートされていて、グローバルアクションがまだ存在していない場合、このオプションを有効にすると、グローバルアクションが自動的に作成されます。公開者の場所が選択されていないと、アクションは実行されません。


・パブリッシャーヘッダーを非表示

このオプションをオンにすると、パブリッシャーアクションのキャンバスアプリケーションの上にある [今何をしていますか?] テキストボックスが非表示になります。

・[パブリッシャー共有] ボタンを非表示

このオプションをオンにすると、パブリッシャーアクションのキャンバスアプリケーションの下にある [共有] ボタンと [自分のフォロワー/グループ] オプションが非表示になります。


ちょっと長くなりましたが設定内容はこんな感じです。

Force.com Canvasの利用

設定が完了したので実際に動かしてみたいと思います。

Chatterフィードへの表示

f:id:tyoshikawa1106:20140927124939p:plain

Force.com Canvasの設定が完了したら、Chatterタブのページに接続したアプリのリンクが追加されています。リンクをクリックするとアプリを表示することができました。


接続したアプリが削除されたりした場合は、次のエラーメッセージが表示されました。

f:id:tyoshikawa1106:20140927125202p:plain

Visualforceページ内に表示

f:id:tyoshikawa1106:20140927130113p:plain

Visualforceページ内で使用する場合はapex:canvasAppタグで埋め込むことができます。developerNameにはAPI名を指定します。(大文字, 小文字は区別されるみたいです)

<apex:page >
    <apex:canvasApp developerName="Heroku_Ionic_Node_Search" width="100%"  />
</apex:page>

widthやheightは未指定の場合、800pxぐらいの値がセットされます。Salesforce1アプリなどのモバイル端末でみるときに画面からはみ出してしまうのでwidthの方は100%と指定した方がいいと思います。

API名を間違えたりすると次のエラーメッセージが表示されます。

f:id:tyoshikawa1106:20140927130211p:plain


Visualforceページ埋め込めるのでSalesforce1アプリでも問題なく動作します。
f:id:tyoshikawa1106:20140927131536p:plain

ちょっとだけ読み込みに時間がかかる気もしました。

f:id:tyoshikawa1106:20140927131638p:plain

パブリッシャーアクションでの表示

f:id:tyoshikawa1106:20140927132702p:plain

Force.com Canvasを設定するとパブリッシャーアクションで使用できるアクションが自動で作成されています。これでパブリッシャアクション内での使用が可能となります。


表示してみるとこんな感じです。
f:id:tyoshikawa1106:20140927133011p:plain

Canvasアプリ以外に不要な項目が表示されていますね。これは設定で非表示にできます。
f:id:tyoshikawa1106:20140927133254p:plain:w300

また、パブリッシャーアクションの高さが足りない感じでした。これはアクションの設定で変更できます。

f:id:tyoshikawa1106:20140927133455p:plain:w300


これで使いやすくなりました。

f:id:tyoshikawa1106:20140927133551p:plain


ただ...Salesforce1のパブリッシャーアクションから表示したときの高さ設定には反映されませんでした。こちらの設定方法がよくわかりませんでしたが、パブリッシャーアクションで使用する場合はPCとSalesforce1アプリの両方で動作確認する必要がありそうです。

f:id:tyoshikawa1106:20140927134045p:plain


Force.comキャンバスでできることはまだまだあると思いますが基本的な部分は確認できたと思います。今のところあまり使う機会は無いのですが、Herokuのデプロイ方法も先日ようやく理解できたのでHerokuを使った開発も勉強して活用できるようにしていきたいと思います。