SalesforceにYouTubeを埋め込んで表示してみる

標準機能ではSalesforceにYouTubeを埋め込むことはできないですが、簡単なカスタムコンポーネントを作成することで任意の画面に埋め込むことが可能です。

今回試してみること
VS Codeでコンポーネントファイルを準備
xmlファイル
javascriptファイル
htmlファイル
Lightningページへの配置

今回試してみること

SalesforceでLightningページにYouTubeを埋め込んでみます。

iframeを使って埋め込みをしますので以前の記事で試したVisualforceでの埋め込みでも可能ですが、今回はLightning Web Component（LWC）で作成してみます。

・SalesforceにFacebookを埋め込んで表示してみる

LightningページにLWCを配置する際に、表示するYouTubeのURLをユーザが自分で設定できるようにもしてみます。

VS Codeでコンポーネントファイルを準備

まずは”SFDC:Lightning Web コンポーネントを作成”にてhtml/js/cssファイルを作成します。

今回はmovieというLWC名にします。生成された3ファイルで作成していきます。

xmlファイル

<targets>タグではLightningページのホーム画面、レコードページ、ユーティリティーバーなどでこのLWCが表示できるようにしています。

また<targetConfig>の<property>タグではname、label、type、default、descriptionを定義します。これを定義することで下記記事で試したようにユーザが自分でURLを指定できるようにまずmovie.js-meta.xmlを準備します。

・LightningページでLWCプロパティ値をユーザに指定させる

これでLightningページでヘルプマークに説明を表示できたり、ユーザが表示URLを指定したりできます。

最終的にmovie.js-meta.xmlは下記のように記載しました。

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>50.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__UtilityBar</target> 
        <target>lightning__Tab</target> 
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__AppPage, lightning__HomePage, lightning__RecordPage, lightning__UtilityBar">
            <property name="source" label="source" type="String" default="https://www.youtube.com/embed/?list=UUFT3qDx7ePTlvZiFvj4HlXA" description="URLを登録してください"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

javascriptファイル

Javascriptでは@apiでYouTubeのURLを定義するsourceという変数を準備しておきます。

先ほどのxmlファイルでsourceという変数にdefaultでYoutubeのURLを記載していたので、このsourceという変数は初期値が入る想定です。

import { LightningElement, api } from 'lwc';

export default class Movie extends LightningElement {
    @api source;
}

htmlファイル

最後にhtmlですが、Javascriptファイルで定義したsourceという変数をiframeのsrcに入れます。

またLWCの外観は<lightning-card>タグでtitle=”注目動画” icon-name=”custom:custom59″など表示を整えます。

Javascriptファイルで定義したsource変数はXmlファイルで初期値を入れ、最終的にhtmlでiframeとして表示するという流れです。

<template>
    <lightning-card  title="注目動画" icon-name="custom:custom59">
        <div class="youtube">
            <a>
            <div style="position: relative; padding-bottom: 56.25%;">
                <iframe src={source} 
                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
                frameborder="0" 
                allow="autoplay; 
                encrypted-media" 
                allowfullscreen>
            </iframe>
            </div>
            </a>
        </div>
    </lightning-card>
</template>