【Bubble×Vimeo】動画視聴完了機能を実装して、ユーザー体験を向上させよう！

こんにちは！前回のブログでは、BubbleとVimeoを使って動画を途中停止・再開する機能の実装方法を解説しました。今回は、さらに一歩進んで、動画視聴完了機能を実装する方法をステップバイステップで解説していきます。

この機能を追加することで、ユーザーはどの動画を視聴済みか一目で分かるようになり、サイト全体の利便性が向上します。それでは、早速実装に取り掛かりましょう！

過去の動画
具体的な手順
まとめ

過去の動画

動画視聴サイトの作り方、停止位置からの再開方法などは以下のブログをご参照ください。このブログの続きになりますので、不明点があれば是非、以下のブログの内容も確認してもらえればと思います。

BubbleとVimeoで作る！オリジナル動画配信サイト構築 - ノーコードｘAIで実現する最強DX

プログラミング知識不要！ノーコードツール「Bubble」と「Vimeo」を使って、あなただけの動画配信サイトを簡単に構築する方法を解説します。低コストで高品質な動画配信を実現し、ビジネスや情報発信に活用しましょう。

Bubbleで作る動画配信。動画停止位置からの視聴再開方法 - ノーコードｘAIで実現する最強DX

BubbleとVimeoで構築した動画配信サイトに、視聴停止位置からの再生機能を実装する方法を解説！JavaScriptとBubbleの連携方法も詳しく解説しています。

具体的な手順

1. データベースの準備

まず、動画の視聴状況を記録するためのデータベースを作成します。

BubbleのDataタブを開き、”App data”をクリックします。
“New data type”をクリックし、データタイプ名を”Vimeo_VideoState”とします。
以下のフィールドを追加します。
- User (type: User) – 視聴したユーザー
- Video_Vimeo (type: Video) – 視聴した動画
- 視聴完了(type: Yes/No) – 視聴完了フラグ（初期値: No）

※停止位置からの再開用のデータも含めています。

2. 動画一覧ページに視聴完了マークを表示

動画一覧ページの各動画の上に、視聴完了マークを表示するための要素を追加します。

完成イメージはこちらです。視聴完了の場合は右の動画のように「視聴完了」と表示します。

手順は以下です。

動画一覧ページのデザインエディタを開きます。
各動画を表示するRepeating Groupの中に、Text要素（視聴完了）を追加します。動画のサムネイル画像の上に表示されるよう、Container layoutは”Align to parent”とします。

視聴完了を表示するテキストは該当の動画の視聴完了ステータス（DBの値）がyesの場合のみ表示されるようにします。

3. JavaScript to Bubble要素の設置

以下のような動画視聴ページでJavascriptを用いて動画視聴が完了したことをキャッチします。

ToolboxプラグインのJavascripttoBubbleのエレメントを画面に配置。ここではbubble_fn_suffixを”video_fin”としておきます。valueはyes/noです。
Trigger event, Publish valueのチェックも忘れずに実施してください。
これを実施することでJavascriptで動画視聴完了した際に「yes」という値がこのエレメントにセットされることになります。

4. JavaScriptコードの設置

HTML要素を使って以下のJavascriptを画面に配置します。ここでは視聴停止、停止位置からの再開も含めたコードを表示しています。

「動画完了イベント」と書かれている箇所が今回のポイントになります。視聴完了をキャッチすると、bubble_fn_video_fin(true)を使って先ほどのJavascript to Bubbleの要素にtrueの値がセットされます。

<script src="https://player.vimeo.com/api/player.js"></script>

<script>
  function initializeVimeoPlayer() {
    // iframeの読み込みを確実に待つためにsetTimeoutを使用
    setTimeout(function() {
      var iframes = document.querySelectorAll('iframe');

      // 各iframeに対してVimeo Playerを設定
      iframes.forEach(function(iframe) {
        var player = new Vimeo.Player(iframe);

        // 再生開始イベント
        player.on('play', function() {
          console.log('動画の再生が開始されました。');
        });

        // 一時停止イベントと現在の再生位置の取得
        player.on('pause', function() {
          player.getCurrentTime().then(function(seconds) {
            // 現在の再生位置を秒単位で取得し、Custom Stateにセット
            console.log('動画をストップしました。現在の位置: ' + seconds + '秒');

            // Custom Stateに値をセットするBubbleの関数
            bubble_fn_setVideoTime(seconds);
          }).catch(function(error) {
            console.error('再生位置の取得中にエラーが発生しました:', error);
          });
        });

        // 動画完了イベント
        player.on('ended', function() {
          console.log('動画の再生が完了しました。');
          // Bubbleの関数を呼び出して、動画完了状態を "yes" として設定
          bubble_fn_video_fin(true);
        });
      });
    }, 5000); // 5秒のウェイトを設定
  }

  // Vimeo APIの読み込みが完了するのを待つ
  if (typeof Vimeo !== 'undefined') {
    initializeVimeoPlayer();
  } else {
    // Vimeo APIが読み込まれるのを待つ
    var vimeoApiCheckInterval = setInterval(function() {
      if (typeof Vimeo !== 'undefined') {
        clearInterval(vimeoApiCheckInterval);
        initializeVimeoPlayer();
      }
    }, 100);
  }
</script>