ミニアプリを作ってみた(YouTube用)

とあるサイトで「真似するべきチャンネルを見つける方法」というのが公開されていて、
「おぉ、なるほどー」と感心してしまう内容だった。

しかしながら、その調査が面倒くさい。

まず、検索をして「アップーロド順」に並び替える。
その後に、一つ一つのチャンネルの「動画一覧」を開く

人気順にして、「人を呼び込むことができた動画」がどれかを調べる。
最近、ヒットを飛ばした動画があれば、参考になる
新しい順にして、直近の数本を見る「コンスタントに人気か調べる」
古い順にして、「歴史が浅いのに延びたチャンネルか」を調べる

チャンネルページへの移動、人気順、新しい順、古い順と4回クリックしないといけない。
これって面倒くさいよね

そう、面倒くさい

面倒くさいことは楽にしたい、だったら、プログラムを作ればよいではないか!

というわけで、2日間制作を目標に作り始める。

最初はChromeの拡張「ScriptAutoRunner」を使おうと思ったが、動作が不安定。YouTubeのページを移動すると拡張が勝手に停止してしまう。毎回、手動でONにしなければならない。

古い拡張なので、最近のChromeとの相性が悪いのかもしれない。ページの移動のたびに拡張機能をONにしなければならないので、相当わずらわしい。なので作りかけたけどやめた

そこでTamperMonkeyを使うことにする。これは歴史もあるし、Chromeだけじゃなくて、いろんなブラウザで使えるのが特徴。機能も多いし、エディターまでついたスグレモノ

最初の構想、チャンネル名の横にボタンを追加して、クリックしたら「概要ページ」に移動。その概要ページ内にいろんな情報を追加表示させようと考える。追加情報は非同期通信で取得して、表示すればOK。調べるページ「人気順」「新しい順」「古い順」のURLはシンプルなので、URL生成は簡単。

しかし、一番最初の「ボタンの追加」で苦労する。YouTubeのHTMLはすごく階層が深く、また同じIDが山のように出現。オリジナルのタグ名など複雑怪奇だった。なので、特定のエレメントを指定するのがとても難しかった。

なんとかボタンを追加したけど、クリックすると新しいタブが開き、そのタブに移動してしまう。使い方としては、たくさんの概要ページを開いて、後から一つ一つチェックするということを考えていた。しかし、移動してしまっては連続操作ができない。(結局解決できず)

更に悩まされたのが、検索し直しても追加するボタンが表示されない。相当悩んだ。
理由は「SPA(シングルページアプリケーション)」のように、非同期でデータを読み込み、ボディ部分を全部読み替えていたからだ。そのため、loadイベントが発生しない。

いろいろ調べて「エレメントの変化を監視する」という方法を見つけて採用。これもまたYouTube癖のために使いにくかったけど、ページ更新のタイミングを拾って、ボタンを追加表示できるようになった。

とにかく「概要ページ」に移動させて、そこからデータを読み込むようにした、読み込んでみるとHtmlHeaderとjson形式データがセットになっていた。Jsonデータが表示されるデータ。あまりに長すぎて、どこかが始まりで、どこが終わりなのかを調べるのにとても苦労した。なにしろ全部1行で送信されてくるのだから…

何度もデートを見返して、チェックしてようやく始まりを終わりを発見。正しくJsonと認識できるようになった。これを分析してデータを表示。うん、いい感じだ。

だが、すぐに壁にぶつかる。3つのページを読み込み処理をしても返ってくるタイミングは異なる。そのため「新しい動画」を表示しようとしたのに返ったきたのは「人気動画」。みたいな感じでうまくいかなかった。

この「非同期だけど同期的」というのが本当にうまく行かない。いろいろ調べて、コードを参考に設定してみたけど、思い通りの結果を生み出すことができず、とても苦しい状況だった。丸々一日悩んで「このやり方は止めよう」と決め手、都度都度クリックしてもらう方式にした。

重要なのは結果が取れることだからね。また「新しいタブに移動してしまう」という問題も解決できないので、それならば検索結果ページに全部表示してしまえ、という発想の転換を行った。

そのおかげでページ移動すらしなくてもよいという結果になった。クリックしたらデータを取り込む。その後、表示。表示もうまくいくようになってきた。最初クリックができない問題に直面していたが、動画と動画の隙間にエレメントう追加するという方式で、YouTubeのイベントに影響をすり抜けることが出来るようになった。これは嬉しい。

この状態で、とあるサイトのメンバーに紹介。きっとみんな喜んでくれるだろうな---ーと期待したところ…
全然反応がない。使ってくれた人は「スゴイ!」と言ってくれた(1人だけ…)
あれ?なんでこんなにスルーされている?こんなスゴイツールなのに。興味ないの?リサーチしないの?
正直、反応の鈍さにガッカリしてしまった。

反応鈍いから、更新はもう止めようと考える。何しろ、予定の2日を超えてもう4日を費やしている。本業が全く進んでいない。(でもやっぱり、満足行くまで作り上げたい)

開発止めようと思ったけど「一箇所のボタンで3つのボタンを兼用できたら便利だ」と思いつく

一箇所のボタンで3つの情報を一度に取得する。だが、ここでも「非同期を同期的に使う」というので悩まされる。もう本当に時間を書けて、何度もコードを書き直したけど、できなかった。もうヘトヘト。疲労困憊

そこで、1つのボタンを3回クリックするという方法に切り替える。クリック時差があるので問題が発生しない。シンプルだけど効果的な方法。

でも問題がまだあった。連続クリックすると、データ読込前にもう一度データ読み込みの処理が走り、結果的に複数の情報を取得してしまうことになってしまう。そこで、グローバル変数で「読み込み待」のときは、クリックイベントが発生してもスルーすることにした。これで、相当良くなった。とてつもなく使いやすい。

さて、まだとあるサイトの反応は鈍い、もう本当に止めよう時間がもったいなさすぎる。求められていないものを作ってしまったのだろうか?そんな思いを感じてしまう。

だけど、やっぱりツールを作っていると面白い。「一箇所のボタンで次の動画に移動できたら便利だ」。シャワーを浴びているときに思いついて早速実装することにした。

「もう止めよう」と思っていても、やっぱり自分が納得できるレベルには仕上げたいのだ。少々戸惑ったものの、これまでと比べると短期間に実装することができた。

これは本当にスゴイ、有料でもいいんじゃないか?と思うほどのものができあがった。

さて最後に、とあるサイトの反応だけど、よく一番実績を出している人から「これは神ツールだ」という言葉をもらい、ホッとしたところ。利用者はほぼいないけど、第一人者が「神ツール」と言ってくれて本当に良かったと思う。

もっといろんなアイデアがあるけど、もうこれ以上、時間を消費するのを止めよう。私にやるべきことがあるのだ。