はじめましてこんにちは。
ソリューションC&I本部 ソリューションサービス第3の村上です。
私たちソリューションサービス第3では主にWeb系の開発を担当しています。
先日、あるお客様から「動画を使ったeラーニングシステムをつくりたい」というご要望をいただき、
クラウド(SaaS)型動画配信サービスを使った開発を検討することになりました。
というわけで、本日はクラウド(SaaS)型動画配信サービスのAPI活用のご紹介です。
動画配信サービスにはどんなものがあるの？
-
millvi（ミルビィ）
国内最大級のクラウド型動画配信サービスです。
APIも用意されており、カスタマイズ可能です。
（ドキュメントがすべて日本語なのも地味にうれしい……！） -
Kaltura（カルトゥーラ）
アメリカに本拠地を置く世界初のオープンソース動画共有／配信プラットフォームです。
大規模な配信に向いています。
インタラクティブな動画の編集が可能で、動画内でクイズを作成できます。 -
Qumu（クム）
アメリカに本拠地を置くエンタープライズ向けの動画配信プラットフォームです。
音声検索に対応していたり、スライドと連動した動画を作成できたりします。※KalturaとQumuはAPIの種類も豊富ですが、ドキュメントはすべて英語です。
（´・ω・`）.;:…（´・ω…:.;::…（´・;::: .:.;: ｻﾗｻﾗ…
※自分の英語力と相談してGoogle翻訳を活用しましょう。
-
YouTube
言わずと知れた世界最大の動画共有サービスです。
社内システムなど限られたユーザーにだけ公開するような使い方はできませんが、
無料で使用できるという最大の強みがあります。
YouTubeにもAPIがあるって知っていましたか？
コードのサンプルも多数用意されているので、いろいろアレンジして使えそうですね。
SaaSってところで何よ？
こちらのブログをご覧のみなさまには不要かもしれませんが、簡単にご説明します。
SaaSとは「Software as a Service」の略で、訳すと「サービスとしてのソフトウェア」ですね。
クラウドサーバーからインターネット経由で提供されているソフトウェアのことを指しています。
インターネット環境さえあればどこからでもアクセスできるのが特徴です。
たとえば、Google AppsやDropboxもSaaSの一種。
ただし、これらのクラウドサービスは手軽に使える反面、
カスタマイズの自由度が低いのがデメリットとも言えます。
また、複数のSaaSを導入しようとすると、こっちのSaaSとあっちのSaaSと……
といった具合にデータが分断されてしまうのも困ったことになります。
そこで重要なのがWeb APIによる連携です。
Web APIを使用することによってSaaS同士を連携させたり、
いくつかのSaaSを組み合わせて既存システムに組み込んだりすることができ、
実現したい業務に即したシステムを作ることができます。
つまり、カスタマイズ性の低さというSaaSのデメリットをカバーしてくれる存在がAPIなのです。
前述の動画配信サービスもクラウドサービスの一種ですが、
それぞれのサービスに用意されているAPIを利用することによって
既存のシステムに動画を組み込んだり、新たな機能を作成したりすることが可能になります。
そうだ、動画ポータルサイトを作ろう。
突然ですが、皆さんは「今日は疲れたな～」というとき、どんなふうにリフレッシュしますか？
おいしいもの？音楽？それとも運動？
いろいろとあると思いますが、手軽な方法のひとつが
小動物の動画を見ることです。
私はハムスターがひたすら頬袋にごはんを詰め込む動画とか、しゃべる猫の動画とか、
そういったもので 時間を無駄にする 癒しを得ることがよくあります。
せっかくなので見る人を幸せな気持ちにしてくれる動画ポータルサイトを
SaaS型の動画配信サービスミルビィのWeb APIを使って作ってみましょう。
0. 動画をミルビィにアップロードする
事前準備としてミルビィの管理画面から動画をアップロードし、プレイリストを作っておきましょう。
今回は２階層で次のような構成とします。
親プレイリスト
├ サブリスト：ねこ
├ サブリスト：いぬ
└ サブリスト：とり
※詳しい手順はミルビィのサポートをご覧ください。
1. とりあえずAPIたたいてみる
ミルビィAPIの概要はサポートページに記載があるのですが、
どんな感じでレスポンスが返ってくるのかな～～～
テスト用になんか書くのだるいな～～～～
JSONツリーをいい感じにしてくれないかな～～～～
という気持ちが止まらないので、
ここではChromeの拡張機能であるTalend API Testerを使ってとりあえずAPIたたいてみます。
ホストやらパラメーターやらを入力してリクエストをつくりまして、SENDボタンをぽちっとします。
はいっ。
これでネストされているツリーの構造も見やすくなります。
JSONは右下の「Copy」をクリックするとコピーできます。
{
"contents": [
{
"id_contents": "28",
"category": "video",
"type": "video",
"name": "灰色の猫",
"description": "もふもふcat",
"folder_name": "Home",
"parent_id_contents": "1",
"create_date": "2019-12-03 17:13:34",
"gid": "(略)",
"usermeta": "",
"metatag": "",
"flag_replace": "0",
"disuse_thumbnail": "0",
"duration": "30.847000122070312",
"image": "(略)",
"original_format": "mp4/h264",
"contents_visible": "1",
"process_status": "done",
"video_common_process_status": "done",
"video_keitai_process_status": null,
"video_youtube_process_status": null,
"id_recipe": "2",
"id_playlist": "10",
"id_playlist_contents": "1",
"position": "1"
},
：
(略)
：
],
"status": true
}
ドキュメントからだけだと読み取りにくいこともあるので、一度APIを実行してみると理解が進みますね！
2. 実装する
開発環境
- Eclipse 4.13(2019-09 R)
- Java SE 8
- Apache Tomcat v8.0
実装の方針
今回はJavaを使用して2画面作りたいと思います。
| 画面名 | 概要 |
|---|---|
| 動画一覧画面 | プレイリストを選択すると動画の一覧が表示される。 動画を選択すると動画再生画面に遷移する。 |
| 動画再生画面 | 動画一覧画面で選択した動画をミルビィのプレイヤーで再生する。 |
以下のことをAPIを使ってさくっと実現してみることにします。
- 動画プレイリストとそこに含まれる動画の情報を取得する。
- 動画のタイトル・説明文・サムネイル等を取得する。
- 動画のフリーワード検索を行う。
- 動画再生に必要な埋め込みキー(embedkey)を取得する。
全部は紹介しきれないので、動画再生画面で埋め込みキー(embedkey)を取得して画面で再生するまでの流れをご紹介します。
クラスの構成はこんな感じ。
では、ブラウザからリクエストを受け取った後の流れを追っていきましょう！
-
ミルビィログインAPIを実行する
ミルビィのWebAPIで動画などの情報を取得するには、
まずログインAPIのレスポンスであるticketの情報を取得します。
ここでは詳細を割愛しますが、2. embedkey取得APIを実行するとやることはほぼ同じです。 -
embedkey取得APIを実行する
コンテンツIDと埋め込みコードIDを指定するとembedkeyと呼ばれる、
動画を再生するために必要なキーを返却するAPIがミルビィに用意されています。
そちらを呼び出しましょう。API実行！の前に必要そうなものを揃えていきます。
画面側に取得したembedkeyを渡すためのエンティティを作成します。
getter/setterはよしなにあれこれします。/** * 動画再生画面エンティティ */ public class MoviePlayer { /** 動画埋め込み用キー */ private String embedkey; ： (略) ：APIを実行するために必要なメソッドは共通クラスに用意しておきます。
こちらはGET通信でAPIを呼ぶところ。/** * ミルビィAPI利用共通クラス */ public class MillviCommon { /** * ミルビィのAPIをコールする。 * @param strUrl APIのURL * @return JSON文字列 */ public static String callMillviApi(String strUrl) { HttpURLConnection connection = null; StringBuffer result = new StringBuffer(); try { URL url = new URL(strUrl); // 指定されたURLを実行 connection = (HttpURLConnection) url.openConnection(); connection.setRequestMethod("GET"); // レスポンスがOKのとき if (connection.getResponseCode() == HttpURLConnection.HTTP_OK) { InputStreamReader isr = new InputStreamReader(connection.getInputStream(), StandardCharsets.UTF_8); BufferedReader reader = new BufferedReader(isr); String line = null; while ((line = reader.readLine()) != null) { result.append(line); } } } catch (IOException e) { e.printStackTrace(); } finally { if (connection != null) { connection.disconnect(); } } System.out.println(result.toString()); return result.toString(); } /** * URLを組み立てる。 * @param endpoint APIエンドポイント * @param params URLパラメーターのリスト * @return URL文字列 * @throws URISyntaxException */ public static String generateUrl(String endpoint, List<NameValuePair> params) throws URISyntaxException { System.out.println("◆エンドポイント：" + endpoint); String url = new URIBuilder(MillviConstants.API_URL + endpoint) .setParameters(params) .build().toString(); return url; } ： (略) ：JSONからの値の取り出しにはJacksonライブラリーを使用します。
こちらもMillviCommon.javaに。/** * JSON文字列からキーに対する単一の値を取得する。 * @param str JSON文字列 * @param key キー * @return 単一の値 */ public static String getValueFromJson(String str, String key) { ObjectMapper mapper = new ObjectMapper(); JsonNode root = null; try { root = mapper.readTree(str); } catch (JsonMappingException e) { e.printStackTrace(); } catch (JsonProcessingException e) { e.printStackTrace(); } return root.get(key).asText(); }ここまででWebAPI実行に必要な材料は揃いました。
Serviceクラスで必要なパラメータを収集してAPI実行➡embedkey(動画埋め込みに必要な値)を取得します。/** * 動画再生画面のServiceクラス */ public class MoviePlayerService { /** * 動画再生画面Serviceを実行する。 * @param request HTTPリクエスト * @param ent 動画再生画面エンティティ */ public void execute(HttpServletRequest request, MoviePlayerEntity ent) { try { // ミルビィログイン String ticket = MillviCommon.loginMillvi(); ： (略) ： // 埋め込みキー取得 ent.setEmbedkey(getEmbedKey(ticket, idContents)); ent.setIdContents(idContents); ： (略) ： } /** * 動画埋め込みキーを取得する。 * @param ticket チケット文字列 * @param idContents コンテンツID * @return 埋め込みキー * @throws URISyntaxException */ private String getEmbedKey(String ticket, String idContents) throws URISyntaxException { // パラメーターリスト List<NameValuePair> params = new ArrayList<>(); params.add(new BasicNameValuePair("ticket", ticket)); params.add(new BasicNameValuePair("id_tag", "1")); params.add(new BasicNameValuePair("id_contents", idContents)); // 埋め込みキー取得API実行 String jsonStr = MillviCommon.callMillviApi( MillviCommon.generateUrl("tag/make_embedkey", params)); // JSONから埋め込みキー取得して返却 return MillviCommon.getValueFromJson(jsonStr, "embedkey"); } ： (略) ：↑のメソッドの戻り値をエンティティにセットして、、、
ControllerクラスでViewにフォワードします。/** * 動画一覧画面のControllerクラス */ @WebServlet("/MovieListController") public class MovieListController extends HttpServlet { private static final long serialVersionUID = 1L; private MovieListService service = new MovieListService(); /** * @see HttpServlet#HttpServlet() */ public MovieListController() { super(); } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html; charset=UTF-8"); request.setCharacterEncoding("UTF-8"); // 画面要素 MovieList ent = new MovieList(); service.execute(request, ent); // リクエスト属性にセット request.setAttribute("ent", ent); // Viewにフォワード this.getServletContext() .getRequestDispatcher("/WEB-INF/view/MovieListView.jsp") .forward(request, response); } ： (略) ： -
Viewで動画を埋め込む
ミルビィで提供されている埋め込みコードがありますのでそれをJSPにぺたっと貼りました。
かんたん！
プレイヤーの見た目などもミルビィの管理画面から制御できるので、ここでは特にやることはありません。
${ent.embedkey}の部分がJava側から受け取る値になります。<script type="text/javascript">var Eviry = Eviry || {};Eviry.Player || (Eviry.Player = {});Eviry.Player.embedkey = "${ent.embedkey}";</script> <script type="text/javascript" src="https://d1euehvbqdc1n9.cloudfront.net/001/eviry/js/eviry.player.min.js"></script> -
サーバーで実行する
足りないところを実装したり、CSSなど見た目をいい感じにしたりして……
サーバーを起動して実行します。
できた
無事に動画を再生できました！
かわいい猫が何かを目で追っていますね。非常にかわいいです。
動画一覧画面では左側のサイドメニューにプレイリスト名の一覧を表示しています。
そちらでプレイリスト名をクリックすると右側に動画の情報が一覧表示されます。
プレイリスト名はもちろん、動画の説明文やサムネイル、再生回数などもAPIで取得していますよ！
APIで動画のフリーワード検索だってできちゃいます。
これで癒し成分120％くらいの動画ポータルサイトが構築できました。
あとはみなさまご自由に癒されてください。
まとめ
「動画を配信するって、なんかよくわかんないけど大変そうでは……？」
と思っていましたが、SaaSのAPI連携を活用することで
大量のコードを書くことなく動くものを作ることができました。
今回使用したミルビィのAPIはほんの一部なので、まだまだ活用できるシーンはありそうです。
ほかの動画配信サービスのAPIも触ってみたいですね！
クラウドサービス(SaaS)はそれ単体だけではなく、
API連携を活用してさまざまなサービスを組み合わせていくことで、
より便利なシステムを構築することができます。
また、開発のコストを抑えたりスピーディに開発したりすることが可能になるため、
今後もSaaS活用の流れは加速していくのではないでしょうか。
今回ご紹介したミルビィの他にも活用できるサービスは数多く存在します。
日々の業務の「あれをもっとああしたい」「こんなことができたらなあ」
をSaaSとのAPI連携によって解決できるかもしれません。
お困りごとはぜひ、日販テクシードまでご相談ください！