この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
こんにちは、中村です。
LIFF SDKにはメッセージを送信する機能があります。これはユーザーの代わりにLIFFアプリを開いているトーク画面にメッセージを送信することができます。
今回は、YouTubeのIFrame Player APIを使ってLIFFアプリでYouTube動画を再生した後にメッセージを送信してくれる公式アカウントのサンプルを作成します。
やってみた
今回利用する動画、メッセージは常に同じものになります。また開くたびにメッセージが送信されますので例えばクーポンを送信したりする場合は、LINE IDでの管理などが必要になります。
インフラ
LIFFアプリで表示するために、HTMLとJavaScriptが実行できる環境を構築します。定番ですがCloudfrontとS3にします。
ソースコード
cm-nakamura-yuki/sample-liff-youtube にあります。
LIFFでYouTube再生/メッセージ送信
YouTubeでは、IFrame Player APIというAPIが提供されています。これは、YouTube動画プレイヤーを埋め込みしJavaScriptによる制御ができるものです。今回は、動画の表示・自動再生・終了時の検知に利用します。
APIのJavaScriptが読み込まれるとonYouTubeIframeAPIReady()が実行されます。ここでは、videoIdやサイズなどを元にプレイヤーの初期化します。初期化が完了し再生準備が整った時などステータスが変更された時に実行する関数を指定できます。
liff.sendMessagesは外部ブラウザでは利用できないため、liff.isInClientで内部ブラウザかどうかを判定します。またトーク画面が開かれている状態出ないとメッセージ送信できないためliff.sendMessagesでエラーになった場合はアラートをあげるようにしています。
liff.init(
{
liffId: 'xxxxxxxxxxxxxxx'
}
).then(() => {}
).catch((err) => {
alert(err);
});
let player;
let tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
let firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'VWRG_CU4bqc',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
if (liff.isInClient()) {
liff.sendMessages([
{
type: 'text',
text: 'ご視聴いただきありがとうございます。店舗でこちらのQRコードを店員にお見せください。'
},
{
type: 'image',
originalContentUrl: 'https://d2m1p9h7y3k5h.cloudfront.net/img/careers.png',
previewImageUrl: 'https://d2m1p9h7y3k5h.cloudfront.net/img/careers.png'
}
]).then(() => {
liff.closeWindow();
}).catch((err) => {
alert('トーク画面からLIFFアプリ開いてください。 ' + err);
});
} else {
alert('ご視聴いただきありがとうございます。クーポンを受け取るにはLINE公式アカウントから開く必要があります。');
}
}
}
テスト
動画が少し長いので飛ばしています。動画再生完了時にメッセージを送信してLIFFを閉じました。
まとめ
YouTube IFrame Player APIとLIFFのメッセージ送信を使うことで、簡単に広告動画の再生を実施しクーポン送信などの施策が打てそうです。また動画自体もYouTubeに置いておけば良いのでHLSなどの問題も回避できると思います。