2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2023-02-21

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

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

↓↓↓埋め込むとこんな感じになります↓↓↓
無題1.png
無題.png

実装例(Stream動画の埋め込み)

1. Visualforceページの作成

設定から「カスタムコード」⇒「Visualforceページ」へ移動します。
image.png
「新規」ボタンから新しくVisualforceページを作成し、以下のコードを貼り付けます。

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
Visualforceページ名に作成したページ名を入力して下さい。(この例ではStreamという名前のページ名にしています)
image.png
また、iframeのURLを入力するカスタム項目も近くに配置してください。(このあたりのレイアウトはお好きに変更してください)

作業が終わると画面は以下のような感じになります。
image.png
あとはStreamURLに以下手順の通りStreamで発行した埋め込みコードのURLを入力するだけでStream動画がSalesforceに埋め込まれます。

3. Streamでの埋め込みコード発行

Streamで埋め込みコードを発行するには、埋め込みたい動画の「共有」から「埋め込みコード」を選びます。
image.png
画面下部にコードが表示されるので、””で囲まれたhttpから始まるURLをコピーしてSalesforceのStreamURLに貼り付けます。
image.png
貼り付けると以下のようにSalesforce上にStreamの動画が表示されます。
image.png

実装例(Excelの埋め込み)

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

埋め込みコードはエクセルをブラウザで開いてから「ファイル」⇒「共有」⇒「埋め込み」を選択し、
image.png
画面左下に表示される埋め込みコードをStreamと同様の手順でSalesforceに貼り付ければ完了です。
image.png

実装例(Miroの埋め込み)

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

Miroの埋め込みコードの発行手順
画面上部の「↑」マークからEmbedを選択します。
image.png
「Copy embed code」を押すと、埋め込みコードを取得できます。なお、「Free navigation」を選択してから押すと埋め込んだ画面を編集できるコードを取得します。「Presentation」を選択すると編集できない状態で埋め込むコードを取得します。
取得したコードをStreamと同様の手順でSalesforceに貼り付ければ完了です。
image.png
iframeの発行に対応したサービスであれば同様の手順でSalesforceに画面を埋め込めるので色々使い道が考えられそうです。

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?