たった3ヶ月で動画配信サイトを構築　毎日放送がkintone×AWSで実現した“素人でも使える”システム

動画配信サイトのバックエンドシステム

濱口伸氏（以下、濱口）：みなさま、こんにちは。毎日放送の濱口と申します。よろしくお願いします。今日、私はkintoneとAWS連携で実現した動画配信サイトのバックエンドのシステムについてご紹介したいと思います。

MBS、地上波の放送局、ラジオも兼営してやらせていただいていますけれども、テレビ番組をインターネットで配信するということに、この何年間か非常に注力してまいりました。今、一部の番組ですが、放送が終わってから1週間、無料で配信する見逃し配信を2015年の3月から始めております。

これはみなさんぜひ検索して、「MBS動画イズム」という名前で検索いただくと、スマホだったらアプリがありますので、それを入れていただいてお楽しみいただけるとありがたいなと思います。例えば『情熱大陸』とか、『よしもと新喜劇』とか、今やっているものでしたら『進撃の巨人 Season2』だとか、無料でお楽しみいただけますので、ぜひご覧ください。

今日お話しするのはそちらではなくて、有料でさらに過去我々が放送してきた昔のドラマやアニメなどを含めて有料配信するサイトを去年の12月に立ち上げております。「MBS動画イズム444」という名前で、月額444円で見放題というサービスでございます。

こちらのシステムを作るのにだいたい3ヶ月ぐらい。去年の8月ぐらいに「やりたいなあ」みたいな話から始まりまして、最近はクラウドベースでいろいろなものが動いていますので、「なんとかできるんじゃないの？」というかたちで、3ヶ月で組み上げていった仕組みです。そのなかでkintoneを使った環境を採用しております。

実際の画面の例をお見せします。これはPC版のページでございます。昔やっていた『ロケみつ』とか『ごぶごぶ』とか、『情熱大陸』の昔の回とか、選抜高校野球の過去の試合映像とかですね。スプツニ子！さんだったかな。例えば『情熱大陸』で、再生を押すと、実際に動画をパソコンの上でもお楽しみいただけるサービスでございます。

こういうものを実際に作って運用していくことを考えると、いろいろなことを考えないといけません。

それから、過去のほかにどんなものがあるかということで、サイトの例としてこういうかたちでサービスの提供を行っております。

これを作るのにサーバレスアーキテクチャを採用しました。今日は細かいお話はしませんが、この動画配信の市場は、非常に競争が激しい領域です。いろいろなアイデアがたくさんあるなかで、ミニマムのコストで運用しながら、新しいアイデアや新しい番組をどんどん追加して市場投入していくことがとても大事です。

これはベースの仕組みを作ることが大事なのではなくて、最終的には番組をお楽しみいただくことがとても大事なことですので、それを実現していくためにこのような構成を取っています。

大事なのは、この構成の中の一番下の真ん中の「kintone」というところにいろいろな矢印が向いてるんですけれども、あらゆるデータをこのkintone上に集めて、そこで管理者の側が一括管理をすることで業務を回しています。

実際にどのように運用しているのか？

こういうサービスは、番組の管理やサービスの画面の編集、「ユーザーさんって、今、どんな人がいるんだっけ？」とか、「どんな番組がどれぐらい見られているんだろう？」といった視聴ログの管理などが必要になります。

こういうものが「システム管理者でないとできません」となると、途端に（業務が）回らないんですね。「僕しかやりません」みたいなことになります。ですので、そういうところをkintoneというインターフェースを使うことで、素人でも触れるようにしました。

kintoneですごく大事なのが、機能の追加であるとか、例えばテーブルになにか要件を足すところが非常に柔軟なことです。ですので、12月に立ち上がったあとずっと手を振りながら運用してるんですけれども、どんどん機能を追加していっています。そういうことが非常に柔軟に行えることですね。

番組によっては「こういうフィールドがいる」とか、いろいろなことがありますので、そういうものを全部要件を決めていってから作ると言い始めると、とても3ヶ月では絶対に作れないんですよ。

そういうものを議論しながら、実際にデザインを起こして見ながら、権利者さんと話もしてみながら、どんどん要件を深めていく作業と、作るという作業を並行に行うことがすごくポイントなんですが、そこをやりきったというかたちになっています。

あとシステムのセキュリティが、クラウドベースでベースになっているメソッドに従うというかたちで運用を行えるということも大きなメリットかなと思います。

今日は実際にどう使っているのかをビデオに撮ってきましたので、お見せしますね。

まずは、新しい番組を作ってその番組に対して動画を追加するという話。それから、できあがった番組を、先ほどのメニューのように、一般に見れるジャンルみたいなものに割り当てるという話。最後に、AWS上のテスト環境から一般ユーザーさんに見ていただいている本番環境にアップする話。このあたりの業務フローをすべてkintone上で実現をしています。

（以下、動画を見ながらの説明）

これが新しい番組を作るというところです。このあたりはkintoneにわりとありがちな画面から始まりますけど。

実際にカスタマイズしたメニューを作っていまして、番組の管理、それからユーザーの管理、視聴ログの管理みたいなことをこの画面のなかで行えるような仕組みになっています。

新規の番組を今から足していくんですが、これは今登録されている番組ですね。こういうものが一覧で出てきています。

それでは新規で今から足してみましょう。そうすると、フィールドが定義していますので、ここに例えば「MBSテスト」というかたちで、新しい番組制作が始まるとします。実際はこういうもので日々運用を行っています。

そして、カテゴリ。カテゴリというのは、例えば「ドラマ」「バラエティ」「スポーツ」みたいな、事前に定義しているカテゴリをこういうかたちで。例えばアニメですね。作ったのは2017年ですよ、と。ここに「解説」や「キャスト」など、いろいろな欄がありますので、例えば今日は適当に解説を書きます。キャストは誰々です、スタッフはこんな人が作りました、これは誰の権利物ですか、と。

放送番組というのは権利の塊ですので、これはいったい誰が権利を管理してるものなのかを、ここで選ばせています。生々しい話ですが、このあたりが視聴データに合わせて「どう配分するんだ」みたいなことに関わってきます。

あとは、よくキービジュアルと言われますが、この番組を1枚で的確に表している静止画を選んでみましょう。

これでひととおり入れて、登録しました。これが実際Webとしてどう見られるのかを、プレビューする機能も実装しています。

これが今まず入れたものですね。「プレビューへ」を押しますと、kintoneからJSONがAWSの環境に対して吐き出されまして、結果、ブラウザ上でレンダリングすると、このような箱が今できあがった。「MBSテスト」という番組で、誰々が作った、ということが、箱としてできあがります。

直感的なインターフェースで誰でも運用できる状態に

では、この番組に対して、「第何回第何話○○」というような番組を実際に割り当てる作業をこれから行います。

上部にメニューがありまして、そこに「エピソードを追加」というボタンを用意しました。そこを押しますと、実際に自動的に画面が遷移しまして、先ほどのテスト番組に対して「第何話○○」という番組を登録する画面に遷移しています。

ここで、例えば「第1話○○」という番組の……ここですね。第何話みたいなものを入れます。それに対して何分の番組であるとかですね。例えば第1話、タイトル、30分という番組を登録してみましょう。あらすじも今は適当に「第1話あらすじ」と書かせていただいて。

動画を割り当てますので、動画は動画サーバに対してID管理が行われていますので、そのIDを今引っ張っています。このIDです。そして、サムネイルという1枚の静止画を登録をしました。実際に保存しますと、エピソードが今登録されましたね。ではプレビューで見てみましょう。

そうしますと、動画がはまっていまして、第1話のタイトル、第1話のあらすじというのが出ていますが、このようなかたちで、プレビューした画面で確認することができます。

ここで「これじゃあらすじがよくないな」と思ったとしましょう。そうすると、先ほどの画面に戻ってきまして、ここで編集をやり直します。追記して、保存しました。ではもう一度プレビューしてみましょう。

そうしますと、動画があり、追記されたあらすじが出てきていますよね。こういったかたちになります。そこで再生ボタンを押すと、動画の再生を始めることができます。

ですので、これはたぶん誰でも運用できる状態になっています。ですから、私の先輩も、昔ドラマを一生懸命作っていた人間は、喜んで自分がずっと昔に作っていたドラマのデータを一生懸命入れて、サイトを運用しています。

できあがった番組を最初にお見せしたメニュー構造の中に入れていくという話ですね。今回はアニメというジャンルで登録しましたので、このアニメカテゴリに、先ほど登録した番組を、自分の意図しているところに並べ替えて入れてみましょう。

先ほどのテスト番組に続いて、次は「カテゴリ一覧に追加」というボタンを用意しています。それで追加を行います。そのカテゴリを編集する画面を今から開きます。

ここで「アニメ」というテーブルを選ぶと、アニメジャンルに登録されている番組の一覧が出てきます。一番上には私が今登録したものが載っています。これをプルダウンで選んで。今、『ノラガミ』というアニメの下に並び替えて入れました。

入れたら、実際にそれを表示して見てみましょう。「カテゴリのジャンルページを更新する」というボタンをつけていますので、これでAWSに対してデータの吐き出しを行っています。

実際にテスト環境ですね。ステージング環境において、アニメというジャンルがどうなっているのかを見てみましょう。そうしますと、『ノラガミ』という番組の下に、先ほど私が作ったテスト番組というのが並び替えられている。

ですので、非常に直感的なインターフェースのなかでコンテンツの登録を行っています。ですので、例えばプルダウンになる表示順番を選ぶとか、なにかHTMLで書くとか、そういうことではなくて、ある決められた業務フローをうまく使うことで誰でもできるような仕組みになっているんですね。

UIのカスタマイズでやりたいことを実現

では、これで準備が整いました。それに対してAWSのなかのステージング環境から、みなさんに公開する公開ページに対してデータの更新を行います。

そうしますと、これはkintoneのなかでAWSの管理画面を引っ張ってきて、部品として組み込んでいます。これは全部kintoneの上で行っています。AWSの管理コンソールにログインしてどうすると言い始めたら、また僕しかできなくなりますので。

今、「コンテンツのコピーをする」を選びました。選んだら、これでコピーが終わりましたので、そのキャッシュのリクエストをすることによって、これで一般公開が終わるかたちになっています。このようなかたちで、ガンガン番組なり映画なりを入れていって、日々運用しています。

まとめると、UIのカスタマイズを使ってやりたいことを実現しています。

CMSの業務フロー画面は作ろうと思えばたぶんいかようにでも作ることができますが、最初に申し上げたように、3ヶ月で作るためには、もう誰かが用意した部品は徹底的に使う、1から組まない、ということがやはりとても大事です。

時間的にそういうことがものすごく大事ですので、メニューの新規画面や各アプリの間を、業務のフローに合わせて勝手に移動していくというガイドボタンを作ったりしています。

あとは、例えばマウスのドラッグ＆ドロップで順番を入れ替えれたり、プレビューのような機能でkintoneに登録したデータをリアルタイムでAWS側に吐き出すことによって、実際のブラウザ上でどう表示されるのかを見ながらコンテンツの登録ができるところがすごく大事です。

SCPでHTMLのファイルをあげて、簡単なペーストを間違えてデザインが崩れて、みたいなことをやっていると、やはりなかなか苦しいので、そのあたりを定型化しています。

あと同じデータを何度も入れさせないというのも大きなポイントです。番組名からエピソードを入れるときに何回も同じ番組名を入れることはありえませんので、そういうところもどんどん再利用しながらフローを回すかたちになっています。

このAWSの機能をコントロールしているところもそうです。このkintoneのデザインやユーザー管理という基本的な枠組みを継承しながら、なかで必要な機能をカスタマイズして入れています。

ですので、このコンテンツのAWS間でのサーバのコントロールというのも、全部そのインターフェースとしてはkintoneのものになっている。ですので、業務のフローは、kintoneにログインさえすればひととおりのことができます。

クラウド間での双方向のデータのやり取り

少しだけ、APIをどう叩いているかという話ですが、例えばkintoneとAWSというクラウド間でデータのやり取りをするときに、どちらかがメンテナンスで止まっていると、なにかのサービスが止まるとか。これは双方向にいろいろなやり取りがあるんですね。

今日は、kintone側からのWebのインターフェース、コンテンツの更新などの実例をお見せしましたが、逆に視聴データがkintone側に返ってくるとか、いろいろな双方向のやり取りがずっと行われています。

そのときに、間にキューをコントロールする仕組みを入れることで、どちらかが止まっていても、kintone側が今なにかのメンテナンスで正常にデータを受け付けられませんというときでも、うまく動くような処理を間に入れて、リカバリーするかたちになっています。

あと動画ですね。最終的には動画をお見せするサービスなので、動画サーバ。我々は今回BrightcoveさんのVideo Cloudという仕組みを使っていますが、そこのインターフェースに対して例えばkintoneからデータを入れます。

「○○から○○までが実はこの動画を公開する範囲です」という管理情報みたいなものが入れられたものが、AWSのAPIを経由し、さらにそこからVideo CloudのAPIを叩いて、データが書き換わる。逆に、視聴データが逆のルートで戻ってくる。そのようなかたちでクラウド連携を実現しました。

こうすることによって、結果、そのシステムに詳しい人間ではない人間でもふだんの業務を回せる。

番組というものは本当に生き物ですので、今、お見せしてるような、例えば枠に収まらない表現、「なにかメタ情報を入れなきゃいけない」とか、新たな要件がどんどん出てきます。

そういうものに対して、いちいち管理画面のなにかを変えるときになにかすごく大変、例えば後ろのテーブルをいじってデコードが、ということを言い始めるとなかなか苦しくなったりするんですけれども。

そういうことが非常に簡単なインターフェースで隠されていて、カスタマイズできているというところが、結果、システムとしての運用ができているポイントかなと考えております。

私の話は以上になります。ご清聴ありがとうございました。

（会場拍手）

プロトタイプを改善し続ける

伊佐政隆氏（以下、伊佐）：今回も惜しみなく実運用の裏側を見せていただいてありがとうございます。

Webサイトが更新される仕組みで、かつ、「いつも見るMBSさんのサイトがこうやって更新されているのか」というのを聞いて、僕はすごく興奮していました。

でも、単純にWebサイトの更新という仕事、業務でいうと、僕らも当然Webサイトをたくさん持っていますから、その更新を効率的にやろうとか、プログラミングできないメンバーでもやれるようにしようとすると、そういうパッケージってたくさんありますよね。あえてそういうものは選定せずにkintoneを選んだポイントもあるんですか？

濱口：パッケージに合うか合わないか、という話はありますよね。今回お見せしているのは、有料動画配信の非常に限られた領域の話をさせていただいて、毎日放送のなかにももちろんほかにいろいろなサイトが当然あります。

ありますが、ここだけに切り取って考えると、あまり重いものを持ってきても仕方がないということと、僕らも作るまでどんな要件がいるのか、最終的に要求されるのか、ということが正直わからなかったのが一番大きくて。

伊佐：なるほど。ビジネスをどうやっていくかは、ある程度は決めているけど。

濱口：ある程度はもちろん決めていますし、「こうなったらいいな」みたいな話はもちろんあるんですけれども、非常に流れが早い話になっていますので、Webコンテンツが誰かの仕組みにガチガチに依存するかたちにはしたくなかったし、逆に僕らもそこまで要件を書ききれなかったんですよ。

ですので、3ヶ月で作ったという話を差し上げましたけど、最初の1ヶ月ぐらいの間でデザインを起こしながら話をしたときも、ぜんぜん要件が決めきれていなかったし、業務フローみたいなものも決めきったわけではなかったんですが、「たぶんこうだよね」というプロトタイプをどんどん作っていったんですね。

そのプロトタイプをkintone上で作って、チューンアップしてチューンアップして、こことここつないで、みたいなことをやっていった結果、ああなったという。

伊佐：なるほど。今日見せていただいたところだけでいうと、急にすごいものができたような感じですけど、やはり佐々江さんの話と一緒で、最初は小さくやって。

濱口：そうです。

伊佐：なるほど。そのためにkintoneをうまく使われたという。ちなみに、おすすめの有料コンテンツってなにかあるんですか？

濱口：動画ですか。いろいろありますが、どういう年齢層になるんですかね。毎日放送的にいうと、今は、昔の『ごぶごぶ』と昔の『ロケみつ』が一番人気がありますね。十何年前のものとかが、今観ても非常におもしろいかなと思いますね。

伊佐：ありがたいですよね。十何年前に作られたものを今観られるというのも、なかなか大変なんですよね。観られるようにするサービスを提供するまでに。

濱口：そうですよね。本当にテレビ番組って権利の塊なので、1個1個そういうことをクリアしていかないと実際には配信できないんですね。テレビに出せても配信は別みたいな話ですよね。そうすると、わりとみんなすぐ「儲かるんだろう？」とか言って。そんなことを言い始めると、配分の話から先に始まるので、言い始めるとなかなかうまくいかないんですが。

世の中にいろいろな状況があるなかで、徐々に意識も変わってきてるのが大きいかなと思います。

伊佐：最後に1個だけ。これからこの仕組み、kintoneも含めて、なにかまた次の発展を計画されているんですか？

濱口：ええ。具体的に「こういうかたちで……」ということはお話しできませんが、非常に柔軟な仕組みですので、とくにこの動画配信周りについて、今年から来年にかけて非常に大きな機能アップを予定しています。そういうものも基本はこういう考え方、こういうインターフェースのなかで実現していこうと考えていますね。

伊佐：有料会員になっておくと、それを体験できるとか。

濱口：有料だけじゃないですね。無料のサービスの管理であるとか、ライブ配信もそうですね。僕らは、例えば高校ラグビーとか、来年の春の選抜高校野球とかは無料でもちろん広告をつけて配信していますので、そういうものですね。

動画配信の裏側にはいろいろな仕組みが動いているんですが、毎年毎年実は大きく作り変えているんです。そういうものをある意味運用するために、このようなインターフェースに落とし込んでいくということを考えています。

伊佐：なるほどありがとうございます。惜しみない共有、ありがとうございました。

（会場拍手）