デモサイト作成の目的
以前、動画配信をするシステム構築の支援をしたことがあったので、その時の技術を活用し動画配信を個人で行い収益を得ることができる架空の配信サービスプラットフォームのデモ環境を構築しました。
海外だとUdemy、Teachable、日本だとnoteなどに近いサービスを想定しており、利用者は視聴したいコンテンツを購入後に視聴することを前提としています。コンテンツを制作するのも個人を想定し動画をアップロードし金額設定をし公開する流れとなります。
お客様固有の要件を除き一般的な動画配信プラットフォームに求められる最低限の機能を実装しデモアプリとしてご紹介いたします。
アプリの機能紹介の後にどのような作業をどのぐらいの期間で実装したかもまとめましたので、似たような要件のアプリ構築を弊社にご依頼いただく際の参考として頂けましたら幸いです。
構築したアプリの紹介
コンテンツの検索画面
この画面では視聴者が見たいコンテンツ(コース)を探すことが可能です。
コースの概要として、「コース名」「カテゴリ」「チャプター数」「価格」が表示されています。コースが沢山あり自分が欲しいものを探しにくい場合は、カテゴリで絞って探したり、コース名で絞ったりすることが可能です。興味のあるコースを見つけたらクリックするとコンテンツの購入画面に遷移します。
視聴したいコースの購入画面
※このデモ動画の中で流れている動画はフリーの動画です。
この画面では選択したコンテンツの詳細情報が表示されます。左側にはチャプターのタイトルが表示されています。購入前に視聴可能なチャプターが存在する場合には、そのチャプターの動画が再生されます。一般的にはチャプターのイントロのようなものを設定することで、視聴者自身が「自分が欲しいコースだろうか?」という判断材料として活用できます。それ以外のチャプターについては基本的に鍵マークが付いており、購入まで見れないよう設定されています。
販売価格が動画のすぐ下に表示されておりクリックすると決済画面に遷移し決済が完了すると再びこの画面に戻ってきて全てのチャプターを視聴できます。
コースの視聴画面
※このデモ動画の中で流れている動画はフリーの動画です。
コースを購入すると全てのチャプターから鍵マークが外れ再生可能となります。基本的には一番最初のチャプターから再生が始まります。1つのチャプターが完了すると、完了マークが付き次のチャプターが自動で再生されるようになっています。
チャプターによっては参考資料が添付されていることがあります。動画では説明しきれない部分の補足資料などが配信者から配られることがあります。
途中で視聴をやめてもどこまで視聴したか記録されているため、視聴者は再開する時、どのチャプターから見たらいいか迷うことはありません。
左メニューにどの程度視聴したかを示す進捗バーが表示されます。1つのチャプターの視聴が完了するたびに進捗率が上がっていき、全てのチャプターを見終わると100%となります。
視聴者のダッシュボード
この画面はログイン後の最初の画面となります。視聴者が購入済みのコンテンツ一覧を表示しています。
全てのチャプターを見終わったコースを完了として、そのコース数を表示。未視聴のチャプターがあるコースを進行中として、同じくそのコース数を表示してあります。
進行中のコースに関しては進捗率が表示されており、どの程度進んでいるかすぐ確認することができます。視聴を再開したい場合はコースをクリックするとコースの視聴画面に遷移します。
ここからは配信者向けの画面紹介となります。
配信者用の作成済みコース一覧画面
ここからは配信者向けの画面紹介となります。
ここでは既に作成したコースの一覧を表示しています。「コース名」「販売価格」「公開状態」が示されています。
右上に新規コース作成のボタンがありクリックするとコース作成画面に遷移します。
このコース作成画面ではコース名を入力し、登録するボタンをクリックすると、登録されコースの編集画面に遷移します。
コースの編集画面
この画面ではコースの「説明文」「アイキャッチ画像」「カテゴリ」「販売価格」「コースに付随する資料の添付」などが可能となっています。
また先ほど登録したコース名に関してここで編集することも可能です。
コースを作成したばかりの時点ではコースは非公開となっております。画面の右上に(1/6) 入力済み、と表示されている箇所がありますが、コースを公開するためには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で直接コミュニケーションをすることができるビデオ通話機能(オンラインでのコンサルティングサービス)など。コンサルティングサービスに対しても課金できるよう実装することで配信者がよりコンテンツに力を入れていく可能性が高まります。
さいごに
実装をご紹介するブログ記事を近々オープンします。
関連する技術ブログ
キャッシュ戦略完全ガイド:CDN・Redis・API最適化でパフォーマンスを最大化
Webアプリの高速化には、適切なキャッシュ戦略が不可欠。本記事では、CDN(Cloudflare / AWS CloudFront)による静的コンテンツ配信、Redis / Memcached を活用したデータベース負荷軽減、APIレスポンスキャッシュ(GraphQL / REST API)など、キャッシュを駆使してパフォーマンスを向上させる方法を解説。TTL設定、Next.js ISR / SSG のプリフェッチ、クエリキャッシュ(React Query / Apollo Client)、キャッシュヒット率の分析など、実践的なノウハウも紹介します。
shinagawa-web.com
チャットアプリ(画像・PDF送信、ビデオ通話機能付き)
お客様固有の要件を除き一般的なチャットアプリに求められる最低限の機能を実装しデモアプリとしてご紹介いたします。
shinagawa-web.com
React × Tailwind CSS × Emotionで実践するコンポーネント設計ガイド:デザインシステム・状態管理・再利用性の最適解
React、Tailwind CSS、Emotion、Storybook、Figma、Next.jsを活用したコンポーネント設計のベストプラクティスを紹介。デザインシステムに基づく命名規則、適切な状態管理、再利用性を高める抽象化、アクセシビリティ対応、スタイルガイドラインの整備、テーマ設定、バージョン管理、ドキュメント作成まで、モダンフロントエンド開発に欠かせない知識を徹底解説します。
shinagawa-web.com
管理ダッシュボード機能(グラフ表示、データ取り込み)
一般的な家計簿アプリとして求められる最低限の機能を実装しデモアプリとしてご紹介いたします。
shinagawa-web.com
Next.jsとAuth.jsで認証機能を実装するチュートリアル
Next.jsでアプリケーションを作る時に必要となる認証機能をどのように実装するかをご紹介する記事となります。アカウント登録から始まり、ログイン、ログアウト、ページごとのアクセス制御、OAuth、二要素認証、パスワードリセットなど認証に関連する様々な機能をコードベースでご紹介します。
shinagawa-web.com
10分で完成。AWS Amplify公式テンプレートを使ったNext.jsアプリの簡単デプロイ手順
AWS Amplifyの公式テンプレートを活用し、Next.jsアプリを素早く効率的にデプロイする方法をわかりやすく解説します。テンプレートの導入からコード修正後の再デプロイまで、初心者にも実践しやすい完全ガイドです。
shinagawa-web.com
Next.js × AWS CDK の統合環境構築:Docker でローカル開発から本番デプロイまで
Next.js と AWS CDK を1つのリポジトリで管理し、Docker を活用してローカル開発環境と本番環境向けのイメージを構築する方法を解説。ディレクトリ構成の設計から、Next.js のセットアップ、Docker Compose による開発環境の構築、ECR 向けの本番用 Docker イメージの作成、CDK の導入までを網羅。
shinagawa-web.com
Next.jsでのメール認証処理の実装ガイド:アカウント登録からトークン検証まで
Next.jsを活用したメール認証の実装方法を解説。アカウント登録時のトークン発行から、Sendgridを使ったメール送信処理まで、具体的な手順を紹介します。
shinagawa-web.com
弊社の技術支援サービス
無駄なコストを削減し、投資対効果を最大化する
クラウド費用の高騰、不要なSaaSの乱立、開発工数の増加――これらの課題に悩んでいませんか?本サービスでは、クラウドコストの最適化、開発効率向上、技術選定の最適化 を通じて、単なるコスト削減ではなく、ROIを最大化する最適解 をご提案します。
shinagawa-web.com
最新技術の導入・検証を支援するPoCサービス
Remix、React Server Components、TypeScript移行、クラウドサービス比較、マイクロサービス、サーバーレス、デザインシステムなど、最新技術のPoC(概念実証)を通じて、最適な技術選定と導入を支援します。貴社の開発課題に合わせた検証・実装で、ビジネスの成長を加速させます。
shinagawa-web.com
開発生産性を最大化するための支援サービス
開発チームの生産性向上、コードの品質管理、インフラの最適化まで、様々な側面からサポートします。コードベースのリファクタリングから、テスト自動化、オンボーディング強化まで、プロジェクトの成功に必要なすべての支援を提供。御社の開発現場が効率的に機能するように、技術的な障害を取り除き、スムーズな開発を実現します。
shinagawa-web.com
開発品質向上支援 – 効率的で安定したプロダクトを実現
フロントエンドからバックエンド、データベースまで、開発プロセス全体を最適化し、安定したプロダクト作りをサポートします。コードレビューの仕組み、型定義の強化、E2Eテスト環境の構築など、開発の各ステップにおけるベストプラクティスを導入することで、より効率的でバグの少ない、そしてユーザー満足度の高いサービス提供を支援します。
shinagawa-web.com
Webアプリのセキュリティ強化支援
Webアプリの脆弱性対策からインフラのセキュリティ強化まで、包括的なセキュリティ支援を提供。OWASP Top 10対策、JWT認証の最適化、APIのアクセス制御、依存パッケージの監査、セキュアコーディングの標準化など、実践的なアプローチで開発現場の安全性を向上させます。
shinagawa-web.com
目次
お問い合わせ