BubbleとVimeoで作る！オリジナル動画配信サイト構築

動画コンテンツの人気が高まる中、独自の動画配信サイトを持つことは、ビジネスや情報発信において大きなメリットがあります。しかし、サイト構築と聞くと、専門的な知識や技術が必要なのでは？と不安になる方もいるかもしれません。

そこで今回は、ノーコードツール「Bubble」と高品質動画プラットフォーム「Vimeo」を使って、プログラミング知識一切不要で、自分だけの動画配信サイトを構築する方法を徹底解説します。

なぜBubbleとVimeoを選ぶのか？

Bubble:

Vimeo:

ゴールイメージは動画を一覧表示し、それをタップすることで動画視聴ページにて動画の視聴が出来ることを目指します。

単純な視聴だけであればあっという間に完成します。しかし、利用者の利便性を考えると停止位置を把握して再度視聴する際には停止位置から再開するなどの機能も実装したいですよね。
その実装方法もお教えします。
そして視聴完了時には視聴完了、と表示する機能も実装します。

まずはシンプルに動画一覧の作成、動画視聴機能の実装を解説し、別のブログページにて停止位置からの再開、視聴完了の表示について解説したいと思います。

動画一覧のイメージ

視聴画面のイメージ

準備:
- Vimeoアカウント作成と動画アップロード
- こちらの説明は割愛しますが、ここではどのような動画でもいいのでVimeoにアップロードだけしておいてください。
Bubbleでデータベースを作成
- Vimeoの動画情報を格納するデータベースを作成します。たったこれだけです。
  停止時間や視聴完了の状態を保持するデータベースの準備は別途実施しますのでここではいったんビデオを格納するだけのデータベースを準備します。
- 格納する情報はiframe、サムネイル画像、タイトルです。
- iframeはVimeoのページから動画の埋め込みコードをコピーしてきてください。画像を以下に示しておきます。

Vimeoの各動画ページの右上にある「埋め込み」をクリックすると以下のような画面になります。「埋め込みコードをコピー」でコピーしたものをデータベースに設定いただければOKです。

動画一覧ページの作成:
- Vimeo動画の取得と表示
- レイアウトとデザインのカスタマイズ
動画再生ページの作成:
- ここはシンプルに動画のタイトルとサムネイルを表示する画面です。
- 難しいポイントはあまりないと思うのでサラッと行きます。
- Workflowの設定にて動画がクリックされると、動画を再生するためのページに遷移させます。

動画再生ページの作成:
- ページにHTMLを設定し、以下の画像のように前ページから送られてきたVimeoのVideoのiframeを設定するだけで完成です。
- データベースに登録されているiframeの情報をHTMLに設定するのでエレメントの設定にある「Display as an iFrame」もオフのままでOKです。