Konifar's WIP

親方!空からどらえもんが!

Youtubeの好きなシーンを無限再生できる『EndlessTube』作った話

実は2年くらい前に作ったものなんですが、GitHub Pagesに引っ越したので紹介したいと思います。

konifar.github.io

GW中に作ったものを紹介しないあたりは、何となく察していただけると助かります。

EndlessTubeとは

Youtubeの好きなシーンをリピート再生できるだけのサービスです。

例えば下記のような感じ。

SHIROBAKO : どんどんドーナツどーんといこう!

攻殻機動隊 : サイトォォォオ――ッ!! そいつをよこせェェェ!!!

なぜ作ったか

2年くらい前、Google主催のAngularjsハッカソンに遊びに行った時に似たようなのを作っているチームがいて、自分もキャッチアップがてら作ってみたくなったからです。

当時はReactとかなくて、AngularjsやBackboneといったフレームワークよさそうみたいな雰囲気があって、とりあえず触ってみないとわからないなぁと思って作ってみたんですよね。

ちなみにリポジトリ公開してます。Angularjs初期に最初に作ってみたプロジェクトなので、今メンテするのは正直しんどいです。

konifar/endlesstube · GitHub

遊び方

最初に言っておくと、リリースを急いで細かいところは作り込まなかったので若干めんどくさいです。すみません。

1. 再生したいYoutubeのURLを入力してAddボタンを押します。

URLじゃなくてワード検索して動画を選んで表示させるみたいにしたかったんですが、めんどくさかったのでやりませんでした。

f:id:konifar:20150510085540p:plain

2. Addボタンを押すと、下にYoutubeが表示されます。

表示されないとしたらバグです@konifarに連絡していただけると助かります。プルリクエストもらえたらご飯おごります。

f:id:konifar:20150510085816p:plain

3. 動画の下にある開始時刻と再生時間(秒)を指定します。

指定するとリピート再生が始まります。スマホで見た場合は、再生ボタンを押さないと始まらないかもしれません。

f:id:konifar:20150510090329p:plain

4. 動画は最大4つまで追加できます。

URLにはリピート再生してる動画の情報がパラメータで保持されるので、一度組み合わせを作ったらいつでも楽しむことができます。

f:id:konifar:20150510090554p:plain

エンドレスコンビネーション

組み合わせは発想次第です。イケてる エンドレスコンビネーションを作ってみましょう。余談ですが、エンドレスコンビネーションって言葉は厨二っぽくて気に入ってます。

参考までに、自分の作ったエンドレスコンビネーションを載せておきます。

Mr. SASUKE 山田勝己 のハイライトシーン

http://konifar.github.io/endlesstube?ytid1=Cs3Hpe_8TRw&sMin1=0&sSec1=11&endSec1=3&ytid2=Cs3Hpe_8TRw&sMin2=4&sSec2=9&endSec2=1.8

三浦大知 のかっこいいダンス

http://konifar.github.io/endlesstube?ytid1=CwwQqhys3y4&sMin1=0&sSec1=42&endSec1=2&ytid2=CwwQqhys3y4&sMin2=1&sSec2=26&endSec2=2

SHIROBAKO のどんどんドーナツどーんといこう!

http://konifar.github.io/endlesstube?ytid1=RJr_QbDTE_M&sMin1=0&sSec1=17&endSec1=2.6&ytid2=kKuqCifDNDg&sMin2=0&sSec2=2&endSec2=3.3

なんだかゲシュタルト崩壊しそうになってきますね

もし反応たくさんあったらやる気出てアップデートするかもしれません…!

BootstrapとAngularjsのバージョン上げるのと、動画の検索機能はつけたいですね。