動画配信サービス(クレカ決済、視聴履歴機能付き)

デモサイト作成の目的

以前、動画配信をするシステム構築の支援をしたことがあったので、その時の技術を活用し動画配信を個人で行い収益を得ることができる架空の配信サービスプラットフォームのデモ環境を構築しました。

海外だとUdemy、Teachable、日本だとnoteなどに近いサービスを想定しており、利用者は視聴したいコンテンツを購入後に視聴することを前提としています。コンテンツを制作するのも個人を想定し動画をアップロードし金額設定をし公開する流れとなります。

お客様固有の要件を除き一般的な動画配信プラットフォームに求められる最低限の機能を実装しデモアプリとしてご紹介いたします。

アプリの機能紹介の後にどのような作業をどのぐらいの期間で実装したかもまとめましたので、似たような要件のアプリ構築を弊社にご依頼いただく際の参考として頂けましたら幸いです。

構築したアプリの紹介

コンテンツの検索画面

この画面では視聴者が見たいコンテンツ（コース）を探すことが可能です。

コースの概要として、「コース名」「カテゴリ」「チャプター数」「価格」が表示されています。コースが沢山あり自分が欲しいものを探しにくい場合は、カテゴリで絞って探したり、コース名で絞ったりすることが可能です。興味のあるコースを見つけたらクリックするとコンテンツの購入画面に遷移します。

視聴したいコースの購入画面

※このデモ動画の中で流れている動画はフリーの動画です。

この画面では選択したコンテンツの詳細情報が表示されます。左側にはチャプターのタイトルが表示されています。購入前に視聴可能なチャプターが存在する場合には、そのチャプターの動画が再生されます。一般的にはチャプターのイントロのようなものを設定することで、視聴者自身が「自分が欲しいコースだろうか？」という判断材料として活用できます。それ以外のチャプターについては基本的に鍵マークが付いており、購入まで見れないよう設定されています。

販売価格が動画のすぐ下に表示されておりクリックすると決済画面に遷移し決済が完了すると再びこの画面に戻ってきて全てのチャプターを視聴できます。

コースの視聴画面

※このデモ動画の中で流れている動画はフリーの動画です。

コースを購入すると全てのチャプターから鍵マークが外れ再生可能となります。基本的には一番最初のチャプターから再生が始まります。1つのチャプターが完了すると、完了マークが付き次のチャプターが自動で再生されるようになっています。

チャプターによっては参考資料が添付されていることがあります。動画では説明しきれない部分の補足資料などが配信者から配られることがあります。

途中で視聴をやめてもどこまで視聴したか記録されているため、視聴者は再開する時、どのチャプターから見たらいいか迷うことはありません。

左メニューにどの程度視聴したかを示す進捗バーが表示されます。1つのチャプターの視聴が完了するたびに進捗率が上がっていき、全てのチャプターを見終わると100%となります。

視聴者のダッシュボード

この画面はログイン後の最初の画面となります。視聴者が購入済みのコンテンツ一覧を表示しています。

全てのチャプターを見終わったコースを完了として、そのコース数を表示。未視聴のチャプターがあるコースを進行中として、同じくそのコース数を表示してあります。

進行中のコースに関しては進捗率が表示されており、どの程度進んでいるかすぐ確認することができます。視聴を再開したい場合はコースをクリックするとコースの視聴画面に遷移します。

ここからは配信者向けの画面紹介となります。

配信者用の作成済みコース一覧画面

ここからは配信者向けの画面紹介となります。

ここでは既に作成したコースの一覧を表示しています。「コース名」「販売価格」「公開状態」が示されています。

右上に新規コース作成のボタンがありクリックするとコース作成画面に遷移します。

このコース作成画面ではコース名を入力し、登録するボタンをクリックすると、登録されコースの編集画面に遷移します。

コースの編集画面

この画面ではコースの「説明文」「アイキャッチ画像」「カテゴリ」「販売価格」「コースに付随する資料の添付」などが可能となっています。

また先ほど登録したコース名に関してここで編集することも可能です。

コースを作成したばかりの時点ではコースは非公開となっております。画面の右上に(1/6) 入力済み、と表示されている箇所がありますが、コースを公開するためには6項目の入力が必要となります。その６項目とは添付ファイルを除く下記の項目となります。

コースタイトル
コース説明文
アイキャッチ
カテゴリ
チャプター
販売価格
それまでは下書き状態となりますが一旦このまま進めます。

実際の動画はどこで登録するかというとチャプターで登録します。チャプター一覧で追加するボタンを押して、チャプター名を登録するとチャプターの編集画面に遷移します。

チャプターの編集画面

この画面ではチャプターの「タイトル」「説明文」「動画の設定」などを編集することができます。

こちらもコースと同様、チャプター作成時点では非公開となっています。「タイトル」「説明文」「動画の設定」を完了すると、公開することが可能です。どこまで入力が完了したかは右上に(1/3) 入力済みという文字があり、(3/3)となると公開するボタンが活性化され公開できます。

視聴者向けの画面でコースの購入画面を紹介し、一部のチャプターは購入前に視聴ができるとお伝えしましたがここでその設定をすることが可能です。このチャプターを購入前に視聴できるようにするには、アクセス権の設定でチェックを入れていただくことで、購入前の視聴が可能となります。

必要な項目の入力が完了しましたら、公開するをクリックし、右上にあるコース編集に戻るをクリックします。

コンテンツの編集

チャプターを公開すると、先ほどまで下書きと表示されていたチャプターが公開済みとして表示されます。

チャプター以外の必要項目を入力し終えると (6/6)入力済みと表示され、公開するボタンが活性化されるのでクリックすると無事、コースが公開となります。視聴者が検索して購入することが可能となります。

またチャプターは複数設定することが可能ですが、最初は登録された順番で並んでしまっています。視聴者に見せる順番を変えたい場合は、ドラッグ＆ドロップで並び順を変えることが可能です。

コンテンツの販売実績一覧画面

最後にコンテンツの販売状況を確認できる販売実績一覧画面の紹介です。

こちらでは動画配信者が提供しているコースの売上金額と販売本数。またコースごと販売金額をグラフで表示しており、どのコースが売れているかを素早く確認することができます。

また日々の売上推移も見れるようになっており、曜日ごとの傾向なども確認できます。

今回の作業内容

今回実施した作業をまとめてみました。これらの作業を弊社ではおよそ2ヶ月〜3ヶ月で実装可能です。

1.環境構築

認証サービス設定
データベース設定
テストページ作成
プログラムのデプロイ
仮URLでの参照

2.【配信者向け】コース作成画面

画面作成
コース作成API

3.【配信者向け】コース編集画面

タイトル入力フォーム作成
説明文入力フォーム作成
アイキャッチ画像登録フォーム作成
ファイルサーバ設定
画像アップロードAPI
金額入力フォーム作成
コース編集API

4.【配信者向け】チャプター作成フォーム

フォーム作成
チャプター作成API
チャプター並び替え機能作成
チャプター並び替えAPI
チャプター削除API

5.【配信者向け】チャプター編集画面

画面作成
タイトル編集フォーム作成
説明文入力フォーム作成
アクセス権設定フォーム作成
動画アップロードフォーム作成
動画配信サーバ設定
動画アップロードAPI
動画視聴フォーム作成
動画ダウンロードAPI

6.【配信者向け】公開設定機能

チャプターの公開/非公開を切り替えるボタン作成
上記切り替え用API
コースの公開/非公開を切り替えるボタン作成
上記切り替え用API

7.【視聴者向け】コース検索画面

画面作成
カテゴリー一覧作成
検索用タイトル入力フォーム作成
タイトルとカテゴリでの検索機能作成
コース一覧取得API

8.【視聴者向け】コース詳細画面

チャプター一覧作成
動画視聴フォーム作成
コース詳細取得API
動画ダウンロードAPI

9.【視聴者向け】コース購入画面

決済サービス設定
コース購入決済画面表示機能作成
決済結果通知受け取りAPI

10.【視聴者向け】コース詳細画面

動画視聴履歴更新API

11.【視聴者向け】ダッシュボード

画面作成
コース一覧取得API
コース進捗の一覧取得API
未完了/完了でのフィルター機能

12.【配信者向け】販売実績画面

画面作成
コースごとの販売金額グラフ作成
日々の売り上げ推移グラフ作成
集計結果取得API

このデモ環境の今後の拡張

これまでご紹介した機能は動画配信プラットフォームを提供する上で最低限の機能に絞っておりました。下記のような機能も盛り込むことでより利便性が向上し利用者が拡大される見込みが増えると考えられます。

もちろん全て必要というわけではありませんので弊社にアプリ構築をご依頼頂く際は、要・不要の検討や、初期リリース時に含める・含めないなどのご相談もさせて頂きつつ無駄なく、早期に導入できるよう支援いたします。

ユーザー管理機能

視聴者に関してはログイン機能を実装しており大きな変更は必要ないですが、動画配信者に関しては実装の検討が必要です。

動画配信者については申請を受け付けた後に事前審査を行なったり、違法な動画をアップロードされた際にアプリ管理者側で動画を停止したりアカウントを停止したりなどの仕組みを導入した方がアプリの信頼性向上につながるかと思います。

また資格を持っていたり豊富な実績がある配信者に向けてプロフィールを公開できるような機能を用意することで視聴者が安心して購入できる流れも作れるかと思います。

テスト受講機能

動画視聴後にオンラインでテストを実施し一定の正解率を超えた場合に視聴完了と、証明書の発行機能を提供することで動画の視聴がより意味あるものになると思います。

視聴者と配信者の接点を増やす機能

視聴者が動画を見てわからない場所などを質問できる掲示板や、1対1で直接コミュニケーションをすることができるビデオ通話機能（オンラインでのコンサルティングサービス）など。コンサルティングサービスに対しても課金できるよう実装することで配信者がよりコンテンツに力を入れていく可能性が高まります。

さいごに

今回はチャットアプリのデモとそれを構築するのにどのような作業をどの程度の期間をかけて作るかをご紹介しました。弊社ではリアルタイムなコミュニケーションが必要なWebアプリケーションの開発を行なっております。

・講義やワークショップの動画を配信し、学生がいつでもアクセスできるオンライン教育プラットフォーム

・映画、ドラマ、ライブイベントなどのストリーミングサービスを提供するエンターテイメントプラットフォーム

・社員向けのトレーニングビデオや研修資料を配信し、効果的な人材育成をサポートする企業向けトレーニングシステム

これらのWebアプリケーション構築をご検討の際には、弊社の構築支援サービスを是非ご検討ください。短期間でリリースできるよう対応致します。

その他の参考アプリ

今回ご紹介したチャットアプリ以外にもご提供する成果物の目安とおおよその実装期間をイメージできるデモアプリをご用意しております。これまでご支援してきた技術をベースに、お客様固有の要件を除いたシンプルなアプリケーションをご覧いただけます。

https://shinagawa-web.com/services/web-app/chat-app

https://shinagawa-web.com/services/web-app/household-budget