WebUIのカスタマイズ

WebUIの作り方や、使用しているライブラリ等について説明します。

WebUI作成方法

「TvmaidMAYA\wwwroot」フォルダにファイルを設置します。
通常のHTML、CSS、JavaScriptを使用します。

TvmaidMAYAの内臓Webサーバは、サーバサイドのスクリプト実行や、HTMLの書き換え機能はありません。
クライアント側からWebAPIを使用してWebUIを作成します。

使用しているライブラリ

デフォルトのWebUIでは、Riot.jsというライブラリを使用しています。
馴染みのないライブラリだと思いますので、概要だけ書いておきます(詳しい解説は他に譲ります)。
知ってる人は読まなくてもいいです。

状況については2016年頃のことです。Webの世界は過渡期なので、「現在」は大きく変わっているかもしれません。

Riot.js

Riot.jsは、Web画面作成のライブラリです。

これまで、画面作成にはjQueryが使われてきました。
JavaScriptだけで作るよりはいいですが、それでも結構大変でした。

そこで、もっと簡単に画面作成できるライブラリが、最近になって多数発表されました。
有名なのは、ReactやAngularです。
Riot.jsは、その中でも最も分かりやすいと思います(たぶん)。

何が簡単になるのか

Riot.jsの機能は、データバインドとコンポーネント化です。

データバインドは、例えばRiotのオブジェクトに文字を入れておくと、それが画面に反映されるというものです。

-----------------
スクリプト
riotObject.test="テスト"

HTML
<div>{ test }</div>
-----------------

「{test}」が「テスト」に置き換わります。
jQueryで同じことをするには、コードの中で「div」のオブジェクトを取得して、データをセットすることになります。
それより見やすくて簡単です。

コンポーネント化は、独自のタグを定義して、分けて記述したり、再利用できる機能です。
独自タグは、1つのファイルに集めたり、別ファイルにすることもできます。
TvmaidMAYA\wwwroot\mayaフォルダの*.tag.htmlがそれです。

TvmaidMAYAでは、ライブ、番組表、メニューなどを独自タグとして作成しています。
それらの独自タグは別ファイルに分けて、メニューは複数の画面で再利用しています。
HTMLのタグをライブラリのように扱えるので、作りやすくなります。

シングルページ・アプリケーション

Webアプリケーションの最近の流行は、シングルページ・アプリケーション(SPA)です。

これまでのWebアプリケーションは、画面ごとにHTMLをサーバから読み込んでいました。
SPAでは、1つのHTMLにアプリケーションのすべての画面を入れます。

これによって、以前までは難しかった各画面の連携もできるようになりました。
TvmaidMAYAでは、ライブの再生を行いながら、番組表を確認したりできます。

要するに、通常のアプリケーションのような作りにできるわけです。

シングルページ・アプリケーションのしくみ

SPAは、全画面を全部重ねて持っているというだけのことです。

しかし、1つのHTMLに全画面を入れてしまうと、メンテナンス性が非常に悪いです。
そこで、Riot.jsのような別ファイルにコンポーネント化できるライブラリと組み合わせることで作りやすくできます。

また、その中のどの画面を表示するかは内部で操作してもいいですが、WebUIの場合、ブラウザのアドレスバーを使うことで、「戻る」「進む」「ブックマーク」等が使えるようになります。

TvmaidMAYAのURLの例
http://localhost:20001/maya/index.html#live
http://localhost:20001/maya/index.html#epg

画面を切り替えるリンクの例
<a href="#epg">番組表</a>

URLが変化したことをどうやって知るのかというと、JavaScriptにそれ用のAPIがあります。
そのAPIを簡単に使えるようにするライブラリがあり、「ルータ」と呼ばれています。
TvmaidMAYAで使用しているルータは、riot-routeです。

例えば、ルータはURLが「#epg」に変化したことを通知してくれます。
そのとき、今表示している部分を非表示にして、番組表を表示します。

まとめ

データバインド、コンポーネント化、ルータを使うと、WebUIは作りやすいです。
ただ、以前のWebUIの作りとかなり違うため、考え方の転換が必要です。

デバッグ方法

Riot.jsは、独自タグを変換して利用するため、普通にスクリプトをデバッグできません。

ChromeのDeveloper Toolsでのみデバッグ可能です(たぶん)。
Developer ToolsのSourcesタブ → 左ペインのメニュー(縦の・・・) → 「Open File」 → タグファイル(*.tag.html)を選択

タグファイルのスクリプト部分が表示されるので、そこでデバッグできます。