SalesforceにVisualforceとiframeを使ってMiroやMicrosoft Stream/Excelを埋め込んでみた話

こんにちは、AgVentureLab 橋本です。

社内でSalesforceに録画した動画を表示したいという要望があったので、Salesforce画面に**Streamの動画埋め込み**を実装した例をご紹介します。その他にも**MiroやExcelの埋め込み**も行ってみたので興味のある方は最後までお読みいただければ幸いです。

↓↓↓埋め込むとこんな感じになります↓↓↓
![無題1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2962064/a30019ac-e205-6516-c2de-12f6e1284662.png)
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2962064/56eb84cb-6998-ac03-e56e-3c19774ce588.png)

# 実装例（Stream動画の埋め込み）
## 1. Visualforceページの作成
設定から「カスタムコード」⇒「Visualforceページ」へ移動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2962064/2ca33a0c-b40f-cbc1-acba-92102facc479.png)
「新規」ボタンから新しくVisualforceページを作成し、以下のコードを貼り付けます。
```apex:Visualforce
<apex:page standardController="動画を埋め込むオブジェクト名">
  <apex:iframe src="{!動画を埋め込むオブジェクト名.URLを入力するカスタム項目}" width="414px" height="250px" frameborder="false" scrolling="false"/>
</apex:page>
```
「動画を埋め込むオブジェクト名」には、動画を埋め込みたいオブジェクト名を入力し、「URLを入力するカスタム項目」は適当に「StreamURL__c」などカスタム項目を作ってください。255字を超えることがあるのでロングテキスト型で作るのをおすすめします。widthやheightはお好きな値に調整して下さい。

保存を押すとVisualforceページは完成です。

## 2. Lightningページへの挿入
Visualforceページが作成したらそれをLightningページに挿入します。
コンポーネントに表示されているVisualforceを画面の好きなところに配置し、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2962064/b80baea7-9879-417b-b00a-86bf74b890f5.png)
Visualforceページ名に作成したページ名を入力して下さい。（この例ではStreamという名前のページ名にしています）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2962064/9c1d29f5-c4e3-f0c9-c1ca-ae4088063d50.png)
また、iframeのURLを入力するカスタム項目も近くに配置してください。（このあたりのレイアウトはお好きに変更してください）

作業が終わると画面は以下のような感じになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2962064/b5e9b7b2-5d5b-8458-217b-7ae4ce02a3ab.png)
あとはStreamURLに以下手順の通りStreamで発行した埋め込みコードのURLを入力するだけでStream動画がSalesforceに埋め込まれます。

## 3. Streamでの埋め込みコード発行
Streamで埋め込みコードを発行するには、埋め込みたい動画の「共有」から「埋め込みコード」を選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2962064/7e5629c5-ad84-f8b0-beb7-bebd3ba896e4.png)
画面下部にコードが表示されるので、””で囲まれたhttpから始まるURLをコピーしてSalesforceのStreamURLに貼り付けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2962064/551f30fe-cc4b-4ab9-9846-a6ea9a6f8ec0.png)
貼り付けると以下のようにSalesforce上にStreamの動画が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2962064/956ebd63-c439-3a3b-a473-0ed24c7e1833.png)

# 実装例（Excelの埋め込み）
Salesforceにエクセルを埋め込むのも基本的にはStream動画の埋め込み手順と同様となります。
<font color="Red">※Excelの埋め込みはSharePoint上に置かれたExcelのみ対応しています。
　ローカル環境のエクセルではiframeを発行できないのでご注意ください。
</font>

埋め込みコードはエクセルを**ブラウザ**で開いてから「ファイル」⇒「共有」⇒「埋め込み」を選択し、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2962064/b5bbaa61-9d9c-3a74-ac1a-a893b7f62820.png)
画面左下に表示される埋め込みコードをStreamと同様の手順でSalesforceに貼り付ければ完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2962064/083fabec-f53e-0d83-3914-6769c28f7ca2.png)

# 実装例（Miroの埋め込み）
Miroの埋め込みもコード発行以外はStreamやExcel同様の手順になります。

**Miroの埋め込みコードの発行手順**
画面上部の「↑」マークからEmbedを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2962064/540b88b4-5757-8b94-ac65-61666d979e9b.png)
「Copy embed code」を押すと、埋め込みコードを取得できます。なお、「Free navigation」を選択してから押すと埋め込んだ画面を編集できるコードを取得します。「Presentation」を選択すると編集できない状態で埋め込むコードを取得します。
取得したコードをStreamと同様の手順でSalesforceに貼り付ければ完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2962064/3eb473d4-cd72-3864-1e1f-6db6b15b58cb.png)
iframeの発行に対応したサービスであれば同様の手順でSalesforceに画面を埋め込めるので色々使い道が考えられそうです。