# TVを作っています

最近、TVを作っています。TVといっても映像を受信して映す機械を作っているわけではありません。TVのように映像を再生して、見ることのできるウェブサービスを開発しています。

そのウェブサービスの名前は[BaberuTV](https://baberu.tv/)です。その名前の通りに[`baberu.tv`](https://baberu.tv/)というドメイン名で公開しています。

公開しているとはいえ、まだ開発者であるわたしが日常的に使って困ることが程度の機能がようやく実装しおえたという段階です。使いかたの説明はまだなにも用意できていません。見た目もまだ洗練させられていませんし、おいおい進めて行こうと考えています。

## BaberuTVとは

名前の由来はバベルの塔です。天にも届く技術力を得たいというわたしの個人的な思いを込めた命名です。

正しいスペリングである「Babel」ではなく「Baberu」としているのは、かたかな語のようなチープさを出したかったためです。また[Google検索](https://www.google.com/)などの検索エンジンで「Babel」で検索するときのノイズとなってしまわないようにという思いも込めています。

BaberuTVではHLSの動画のURIをテキストフィールドに入力し、「Play」と書かれたボタンを押すことによって動画の再生を開始させられます。ただしBaberuTVがHTTPSで配信されているため、HLSの動画もHTTPSで公開されているものでなければなりません。また使用しているライブラリーの都合上、HLSがネイティブに動作しないウェブブラウザーではHTTPヘッダー「`Access-Control-Allow-Origin`」で適切な値が返されていないと動画の受信ができません。これ仕様上の問題ではありますが、わたしが使う範囲では困らないため、修正する意欲は薄くなってしまっています。

## なぜ作りはじめたのか

サイバーエージェントとテレビ朝日の出資によって設立された[株式会社AbemaTV](http://abematv.co.jp/)によって、同名のウェブサービス「[AbemaTV](https://abema.tv/)」が今年 公開されました。AbemaTVは[React](https://facebook.github.io/react/)やHLSといった**比較的に**新しい技術を使っています。

そう、「**比較的に**」なのです。

Reactが公開されたのは2013年です。今から三年も前です。HLSはReactよりもさらに古く、2009年から存在しています。七年前です。そう七年前なのです。

ひるがえって自分はどうでしょう。自分は何年も似たような技術を使い、そして似たようなウェブサービスばかり作っています。ウェブアプリケーション開発者としてこのことに危機感を覚えざるをえません。

そしてAdobe Flashがレガシーな存在であるとさけばれるようになってから、もう何年も経ています。だというのにいつまでもAdobe Flash Playerがユーザーの環境にインストールされていることを前提としたウェブサービスはなくなりません。それどころかわたし自信もそうしたウェブサービスにたずさわりつつも、なにもできずにいました。ユーザーに対する不誠実を許容することに対する歯がゆさを感じつつも、ウェブサービスにたずさわる一人の人間として、なにもできない無力さを痛感させられていました。

くやしい。

くやしい。

くやしい。

AbemaTVのサービスがはじまって以来ずっと、ずっとずっとそう思わされていました。思わせられ続けていました。

そんな折、勤め先でいろいろなことがあり時間が生まれたので、BaberuTVの開発に着手しました。

## なにを使っているのか

BaberuTVでは、できる限り最新の流行を踏襲することを大前提としています。

### ビルド関係

JavaScriptはいわゆるES.nextの構文やAPIをふんだんに使い、[webpack](https://webpack.github.io/)を用いてバンドルを行っています。まだStage 4にもなっていない構文も使っているため、多くのウェブブラウザーと[Node.js](https://nodejs.org/)では当然動きません。なのでwebpackでのバンドルを行う際に、多くのウェブブラウザーとNode.jsで動かせられない構文は[Babel](https://babeljs.io/)を使って、ECMAScriptの最新の仕様であるECMAScript 2016に合致するようにトランスパイルさせています。

バンドル後のスクリプトファイルはECMAScript 2016の仕様に準拠させているため、最新のウェブブラウザーでなければ動作しません。ですが個人で開発しているウェブサービスなので気にすることではないでしょう。

[HTTP/2](https://http2.github.io/)での接続を前提としていてバンドルさせる意義は薄いのですが、現状のJavaScript周辺のエコシステムがバンドルさせることを前提としているため、そちらにあわせました。最新技術をキャッチアップするという目的意識から外れるようなことをあえてする理由もありません。

### UI

UIを構築するためのライブラリーとしてReactを使っています。これは流行しているから、というだけではなくAbemaTVを踏襲しました。

ただAbemaTVではFluxの実装として[Fluxible](https://fluxible.io/)を使っていますが、BaberuTVではなにも使っていません。[`context`](https://facebook.github.io/react/docs/context.html)を子孫コンポーネントに引き渡して、コンポーネントをまたいだ処理を行っています。

これは小規模に済ませ、あまり複雑になりすぎないようにということを意図していますが、大規模になるとまわらなくなるのである程度のタイミングでAbemaTVと同様にFluxibleを使おうと考えています。

またHLSの再生はSafariとMicrosoft Edge以外のウェブブラウザーではネイティブ動作しないため、[hls.js](https://github.com/dailymotion/hls.js)を使っています。

## おわりに

BaberuTVはGitHubで開発と運用をしています。現状コミットをしているのはわたしだけですが、まずはじめに[Issue](https://help.github.com/articles/about-issues/)を作り、[Project](https://help.github.com/articles/about-projects/)で進行状況の確認ができるようにしています。そして[Pull Request](https://help.github.com/articles/about-pull-requests/)を作ってコミットをマージすることによって関連するIssueをクローズさせるという運用をしています。これは**普通の**ソフトウェア開発を踏襲させたかったためです。普通が一番効率が良いものであるとわたしは固く信じています。

BaberuTVのレポジトリーは[baberutv/baberutv](https://github.com/baberutv/baberutv)です。前の段落にもある通り、現状はコミットをしているのがわたしだけですが[MIT License](https://opensource.org/licenses/MIT)のOSSです。誰でもご自由にPull Requestをお送りください。心より歓迎いたします。