[アプリ] CapTubeを作った

このエントリーをはてなブックマークに追加

長い動画を見るのが面倒になったので、CapTubeというWebサービスを作りました。公開したのは結構前ですが。YouTube動画のキャプチャ要約を作って共有できるサービスです。

CapTubeのサイトに行く

開発の徒然は以下のread moreから。

CapTubeとは

CapTubeは、YouTube動画のキャプチャ要約を作って共有できるサービスです(再掲)。ニコニコ動画のようにYouTube動画にコメント付けて、コメントしたところでキャプチャとともにコメントを付けられます。まあ、詳しくはリンク先を参照してね。

開発の経緯

一通り紹介したので制作秘話的な話を。

きっかけはGig○zineさんという某有名ニュースサイトです。あのサイトってよく動画を取り上げて紹介してるんですが、動画の下にキャプションとコメントが書いてあるんですよね。著作権的にはグレーかもですが、超見やすい。要約なしには動画を見れない体になってしまいました。責任とって。

もう、普通に動画を見てたらイライラするようになったわけです。どんな動画も要約が見たい。でも要約が無い。かといって、自分で要約作るのは本末転倒です。そうだ、じゃあ他の人に要約を作ってもらえばいいんだ!というわけです。手を抜くために手の込んだことをするのはエンジニア冥利に尽きますね。

名前は最初YouTube Digestにしてたんですが、あまりにも商標的にアレだったので、CaptureとTubeを足してCapTubeにしました。

開発小話

使っている技術など。

HTML5 video API

YouTubeさんは動画のHTML5 API化を水面下で推し進めているようで、対応はらくらくでした。YouTubeさんが動画プレーヤー設定ページも作ってます。トップページからこのページにたどり着く方法がよくわからない、謎ページ。

HTML5プレーヤーはvideoタグを使っているので、もうやりたい放題です。キャプチャも簡単に撮れます。

ブックマークレット

このサービスを作るにあたって、最初は完全独立のサイトとして作ろうとしていました。ただ、問題がいくつか出てきていろいろ怖かったので、ブックマークレットにしました。

  • YouTube APIには、動画をそのまんま取得するAPIが無い(アタリマエ?)
  • かといってスクレイピングするのは間違いなく怒られる
  • ユーザスクリプトもいいけど、一般ユーザにはお手軽じゃなさそう

で、ブックマークレットにしたんですが、ブックマークレットもそれはそれで問題がありました。

  • ブックマークレットもお手軽じゃない
  • HTTPSサイトから非HTTPSのリソースをインジェクションできない

1つめには目をつむり耳をふさぐにしても、2つめが問題です。Google Driveでホスティングしてもよかったんですが、結局、CapTubeのサイトをHTTPS化して対応しました。年間約2000円です。ドメイン代と合わせて維持費年3000円くらい。金かかってるよ!

その他

後こまごましたこと。

  • Haxe
    • 開発言語はHaxeを使用。超便利!もうJavaScriptを直接は書きたくないね。
  • swiper
    • 画像をスワイプで切り替えるJavaScriptライブラリ。jQuery非依存でなかなか良かったんですが、カスタマイズしづらかったんで、結局自分で似たようなの作りました。

さいごに

YouTubeさん怒らないで!一応それなりに気を使ってますが、YouTubeさんに怒られるかもしれません。怒られたらそこでサービス終了ですよ。

あと、気が向いたらもう少し使い勝手向上させるよ!協力したい奇特な人がいたらリポジトリ教えます。

このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。* が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">