導入

アクアのウェブサイトリニューアルにあたり、主に実装を担当してきました。そろそろリリースできる、という頃合いになってきたとき、主に運用面の観点から、サイト全体のブラッシュアップを行うことになりました。

トップページでは、ページ上部に張社長のメッセージ動画(通称社長動画)が配置してあります。当初、Youtubeに社長動画をアップロードし、そのiframeを埋め込むことで動画を表示していたのですが、以下のような不満がありました。

社長動画をContentfulで管理できない点

サイトのコンテンツ管理システムであるContentfulを使用せず、Youtubeで管理しているので、社長動画を管理しづらいことが悩みでした。Contentfulでも動画を管理できないことはありませんが、無料で使用する場合は50MBまでのアセットしかアップロードできないようです･･･
サイトのパフォーマンス低下

Youtubeのiframeを埋め込んだトップページにアクセスすると、Youtubeサーバーとの通信が発生し、そのトラフィックが大きく、サイトのパフォーマンスが低下するようでした。特にスマホで閲覧したとき、Googleが提唱するWeb vitalsへの影響が大きいようでした。

ソリューション

以上の問題を解決するために、Contentfulと、Muxというサービスを組み合わせる方法を用いました。

Muxは、アメリカの同名のソフトウェア会社が運営する、APIベースの動画配信サービスです。

Contentfulのウェブアプリ上でMuxが提供するアプリを使うと、Contentful経由でMuxに映像をアップロードできるのですが、以下のようなメリットがあります。

動画のサイズを気にすることなく、Contentfulで動画を管理できる

ContentfulからMuxに動画をアップロードしたとき、Contetnfulが保持するのはJSONデータなので、Contentfulのアセットのサイズ制限にひっかかることはありません。また、Muxの存在を意識することなく、アップロードした動画をContentfulのウェブアプリで再生、管理等できます。
動画をMuxからストリーム配信できる

他のコンテンツと同様、Muxにアップロードした動画のデータをGraphQLで取得できるので、Video.js等のプレイヤーをクライアント側で用意してやれば、動画を再生できます。npm等でインストールして使用すれば、第三者のサーバーとの通信が発生することもありません。

以下のリンクは、このソリューションのガイドです。