シロボタンを作った
はじめに
シロボタンというWebアプリケーションを作った。
いろいろ説明しなければならないことがあるので、順を追って説明していこうと思う。
上にある目次の通り、まずこのアプリが何をするかについて話して、次になぜこのアプリを作ったかについて話して、最後に苦労話とかそういうやつを話す。
今回はあまり時間リソースを割く気がないので、文章が雑になってしまうかもしれない。雑じゃない文章を読みたい人はシロちゃんへの手紙を読んでほしい。そっちは雑じゃないし、あとめっちゃ長い。しばらくはお腹いっぱいで雑な文章しか読めなくなること請け合いだ。
あと、WebアプリとWebサイトとWebサービスの違いがわかってないので、この記事ではそういうやつをとりあえず全部Webアプリと呼ぶことにしている。詳しい人に何本マサカリを投げられても文句言えない雑さだが許してほしい。
シロボタンとは
概要
シロボタンは、簡単に言うと動画のセリフを検索できるWebアプリケーションだ。
サーバには大量の字幕データが入っていて、ユーザは目的の字幕を検索することができる。
検索した字幕には動画へのリンクと字幕の開始時刻が入っているので、ユーザは目的の字幕の音声をすぐに聞くことができる。
例えば、僕はシロちゃんのうふふという笑い方が大好きなので（この話をするときの僕の笑い方はデュフフだ）、シロちゃんの動画の中でうふふという笑い方をしている部分だけをひたすら再生したいという根源的欲求がある。みんなも当然あるはずだ。
そういうとき、このアプリを使って字幕から笑い声を検索することができる。
例えば、「ふふ」とかで検索すればいい。
https://sirobutton.herokuapp.com/sirobutton/?search=%E3%81%B5%E3%81%B5
う〜ん。最高。
他の使い方
各字幕には、タグを付けて共有することができる。
タグで検索もできるのだが、本質的なのはそこではなく、ユーザから能動的に共有アクションを起こせるということが大切だ。
例えば、僕がある字幕に「かわいい」というタグを付ける。
すると、他の人もそのタグを見て、なるほどたしかにかわいいなあと思うことができる。
そして、その人も自分がかわいいと思ったセリフに「かわいい」というタグを付けるかもしれない。
こんな感じで、製作者からの一方通行ではないアプリケーションが作りたかったので、タグを付けられるようにした。
違うな、この話はもっと後で話すべきだった。まあいいや。
もっと他の使い方
正直、ここで詳しく説明したって意味はなくて、シロボタンを使いたい人は「このアプリについて」というページを見てくれればいい。
ここで使い方を説明しているのは、流れでこの記事に辿り着いたけど正直シロちゃんにもシロボタンにも興味はない、という人のためなので。
なぜこのアプリを作ったか
◯◯ボタンというムーブメント
知っている人は知っているだろうが、宇志海ボタンというサイトがある。
簡単に言えば、ボタンを押すと宇志海いちごちゃんの声が流れるWebアプリだ。
このアプリにインスパイアされたサイトがいくつもある。ここで一つ一つ挙げることはしないが（挙げ忘れたサイトに申し訳ないので）、つまりある種のムーブメントになったということだ。
これを見て、僕も同じようなアプリをシロちゃんで作りたいと思った。シロちゃんの声を検索したかったし、シロちゃんの声がたくさん聞きたかったので。
Webアプリのおべんつよ
エンジニアにはいくつか種類があって、いわゆるWeb系エンジニアというのがよく見かけるエンジニアだと思う。
僕はWeb系エンジニアになったことはないので、Webが全くわからない。書けるプログラムの種類はどうせなら多ければ多いほどいいので、いつか勉強してみたいなあと思っていた。ので、アプリケーションまで持っていくいい機会だなあと思って作ってみた。
予想していたとおり、そして予想していた以上に時間が吸われたので、みんなも雑な興味で新しい領域に突っ込むときは気をつけよう。いい経験にはなるけど。
字幕検索というアイデア
シロちゃんのほげほげボタンシリーズを作ってみたいとは思ったが、シロちゃんの動画は（ものすごく嬉しいし非自明なことに）毎日新しい動画が追加されるので、動画を切り出して音声にアノテーションを付けるという作業は大変な上にスケーラビリティがない。
スケーラビリティがないというのはここでは、新しい動画がn増えたら作業がn増えてしまって、とてもじゃないけどやってられない、みたいな意味だ。
僕はシロちゃんのアプリを出すからには、シロちゃんが生きている間はずっと生きているアプリでありたいと思っているので（そうじゃないとそのアプリを好きでいてくれる人に失礼だと思うのだ）、そういう僕がやる気をなくした瞬間消滅するアプリは作りたくない。もちろん、サーバのランニングコストがあるので、お金がなくなったら突然クローズしちゃうかもしれないけども。
そんなとき、シロちゃんのYouTubeの動画に日本語の文字起こし字幕が付いていることを知った。
字幕はまさに時刻と内容のアノテーションデータなので、これを使わない手はないと思った。同時に、YouTubeのt=*sクエリを投げるリンクを貼るような仕組みにすれば、音声をダウンロードして切り出す部分も省略できるなあと思った（他にもいくつか理由があるが、それはこのアプリについてに書いたとおりだ）。
こういうアイデアは、思いついた瞬間に作ってしまわないと誰かが作ってしまう。し、流行り廃りもあるので、早々に作らないといけない。
そういうわけで、シロボタンを作ることにした。せっかく思いついたし、自分で形にしたかったので。
苦労話シリーズ
Webがぜんぜんわからない
苦労話はいくらでもあるのだが、とりあえずWebアプリがどういう仕組みで動くのか全然知らなかったので、すごく基本的なところから勉強し直す必要があった。僕たちがサーバにHttpRequestを投げたときに、誰が何をして、どういう流れを経てHttpResponseが返ってくるのか、そのへんを調べる必要があった。
いや、必要はなかったかもしれない。あまりにも初心者すぎて、どこから手を付けていいかわからなかったのだ。
次に困ったのは、イマドキのイケイケなフレームワークがわからなかったことだ。僕も古のパソ=コンオタクなので、HTMLやjQueryやPHPをポチポチメモ帳で書いたことはあるのだが、流石にこの時代にそういうことはしたくない。
フロントサイドとかサーバサイドとか、そういうワードも聞いたことがあるだけでしっかりとは理解していなかったので、そのへんも調べたりするなどした。よくわからなかった。
結局、先にプログラムを走らせるサーバを確保しようというお気持ちになって、軽く調べた結果Herokuにたどり着き、そこで言語を選ぶと自動的にフレームワークが決まったので、この問題は解決した。
僕は職業柄Pythonがそこそこ好きなので、Pythonを選択したところ、勝手にDjangoという輩を使うことになり、まあそれでええわということになったのだった。
ちなみに、SaaSが何者なのかは未だにわかっていない。
YouTubeAPIがわからない
字幕を取ってこなければならないので、YouTubeのAPIについて調べた。こっちはWebも関係ないし、全然余裕でしょと思っていたが、そんなことはなかった。特に、字幕をどうやって取ってくるのかが全くわからなかった。
YouTubeAPIはv3というAPIが一番ナウいのだが、日本語の記事はけっこう古いAPIについて記述されていることも多く、英語の資料をたくさん読まなければならなかった。英語を読むのはMP消費が激しいので、これがけっこうキツかった。なんで趣味でまで英語を読まなきゃいけないんだ。いやよくあることだけども。
結局、字幕は取れないことがわかった。YouTube API v3では、字幕のダウンロードにはチャンネル管理者と同等レベルの権限が要るのだ。意味わからん。キレそう。
最終的にどう解決したかというと、v3ではない古いAPIを叩いた。"https ://www.youtube.com/api/timedtext?v={target_video_id}&lang={target_language}&fmt=vtt" で行ける。少なくともこの記事を書いているタイミングでは行ける。いつか行けなくなるかもしれないが、APIがなくなっても字幕は頑張れば取れるはずなので（動画を観ているときは字幕も見れているんだから）、サステイナビリティは失われていない。はずだ。YouTubeさんマジごめん。でもはやくcaptions.download()の権限見直してください。
おわり
めっちゃ支離滅裂な文章になってしまった。僕はこんなに文章を書くのが下手くそだっただろうか。
MPが切れてしまっているのでできるだけ省エネルギーに書こうと思ったのだが、読み返してみたらとても読めたもんじゃない感じになっていて、真顔のまま脳内でひとしきり草を生やした。
せっかくなのでこのまま公開してみようと思う。ここまで読んでくれた人ごめんなさい。
シロボタンについての感想を書くと、シロちゃんに関するアプリケーションを公開できたということが純粋に嬉しかった。ほぼ寄与度0だとしてもシロちゃんの知名度向上とか、あるいは他の人の人生の満足度に少し貢献できたという事実が嬉しかった。
僕はエゴが強くスーパーエゴが弱いので、エゴ・サーチは僕の日課のひとつなのだが、シロボタンを褒めてくれる人を複数人発見して僕はとても嬉しい気持ちになった。もっと褒めてほしいし、僕もみんなをもっと褒めていきたい。世界は褒めで満たされるべきだ。
あと、普通に自分が使っている。シロちゃんのあの声が聞きたいという需要は（少なくとも自分には）めちゃめちゃある。すごく実用的だ。作ってよかった。
シロボタンについて何か感想とか褒めがある人はぜひ僕に連絡してください。僕が嬉しい気持ちになります。文句がある人は/dev/nullへどうぞ。改善案ならいくらでも聞きます。
おわり
