アニメ、見てますか。

こんにちは。
毎日、仕事が終わって家に帰ってから寝るまでの間、ひたすらdアニメストアでアニメを見ている毎日をお過ごしの皆さん、お元気ですか。
dアニメストア、とても便利ですよね、僕は最近毎日利用しています。

でも、dアニメストアの視聴履歴って、あんまりイケてないですよね。
どんなところがイケてないかというと、

いつ、何話を視聴したかが分からない
友だちに視聴履歴をシェアできない

こんなところがイケてないです。
そこでふと、
「今ちょうど見終わったアニメについて、Twitterでポスト出来たら捗るんじゃないか」
という考えに至ってしまったので、勢いだけでchromeのextensionを作ってみました。

はじめに

ここで作ったextensionは、完全に私用なので公開はしません。
また、これを見ながら作ったものに関しては責任は負いません。自己責任でお願いします🙏

どうやって実現するか

さて、上のように考えてはみたものの、実現できるかどうかが結構重要なポイントです。
今回ポイントになったのは、

dアニメストアの動画視聴中、javascriptでイベントを取得できるか

dアニメストアの動画視聴中、タイトルや話数を何らかの手段で取得できるか
Chromeのextensionからそのイベントをハンドリングできるか
ChromeのextensionからTwitterにポスト出来るか

という感じでした。
これらが全て出来て初めて実現出来る、と言えそうですね。
ということで、ひとつずつ検証していきます。

dアニメストアの動画を動かしてみる

1については、結果的に「出来る」ということがわかりました。
去年の春頃にdアニメストアにはHTML5プレイヤーが導入され、Chromeでもdアニメストアでアニメを視聴することが可能になりましたね。
いやー嬉しい。これに気付くまでメインブラウザはChromeなのでdアニメストアでアニメを見るときだけFirefoxを開いていたのですが、その手間が無くなって最高ですね！！ドコモさんありがとう！！

参考：Chrome対応で「dアニメストア」はどう変わった？リアルユーザーがドコモ担当者に直撃

さて、少し脱線しましたが、HTML5での動画視聴ということは <video> タグが使われているに違いない！
ということで、軽くDOMを検索してみました。
アニメを見ながら、Cmd+Alt+iでDeveloper Toolsを開き、じとーっとHTMLを眺めていくと……

……あるではないか。
ということで、こいつに対して色々とアクションを起こせば動画の再生や一時停止、それらのイベントハンドリングができそうです。

試しに軽くDeveloper Toolsのコンソール上でポチポチしてみます。

video = $("#video").get(0)
video.play() // 再生される
video.pause() // 一時停止
video.addEventListener("pause", function(){
  console.log("paused") // 一時停止するとコンソールに出てくる
})

問題なく動きました。
このへんはピュアなjavascript APIを使っているので、ちょっと調べればなんでもできそうです。
ということで、問題なく動作することがわかったので、次の検証にいきます。

参考：videoタグの簡単な使い方

dアニメストアの動画視聴中にタイトルと話数を取得する

こちらも、HTMLを眺めていると出来ることが分かるかと思います。
先ほどの検証で pause した際の画面に、タイトルと話数が表示されるのですが、これもすべてHTML上に書かれています。
これをひょーーっと探して……ここじゃ！

……はい、検証には「小林さんちのメイドドラゴン」というアニメを見ながらやってました。
ともかく、DOM要素が見つかればあとはこっちのもんです。

title = $(".pauseInfoTxt1").text()
number = $(".pauseInfoTxt2").text()

こんな感じで取得できそうですね。（実際コンソールで確認しても取得できました）
ということで、この懸念に関しても問題無さそうです。

Chromeのextensionを作っていく

dアニメストアの動画視聴中にやりたいことは大体できそうだったので、あとはそれらをChromeのextensionとして実行できるかが肝です。
（まぁ基本的には実行できるもんなので、あまり心配はしてなかったのですが）

Chromeのextensionは作ったことが無かったので、この機会に色々と調べてみました。
構成はすごく簡単で、 manifest.json というファイルと、任意のWebサイトで実行したいjavascriptファイルがあればよいという感じでした。

出来上がった manifest.json はこんな感じです。

manifest.json

{
  "manifest_version": 2,
  "name": "danimemory",
  "short_name": "dmemo",
  "description": "play danime and memory them history via twitter",
  "version": "0.0.1",
  "permissions": [
    "https://api.twitter.com/"
  ],
  "content_scripts": [
    {
      "matches": [
        "http://anime.dmkt-sp.jp/animestore/sc_d_pc?partId=*"
      ],
      "js": [
        "js/libraries/jquery-3.1.1.min.js",
        "js/libraries/twitter.js",
        "js/libraries/codebird.js",
        "js/content_scripts/danime.js"
      ]
    }
  ]
}

本当に雑に作っていたので、あまり細部の説明はしませんが、大事なのは1箇所だけです。
下のように、 "content_scripts" に色々と書くと、URLパターンにマッチしたサイトに訪れた際に、javascriptを読み込むという動きをするので、これを利用します。

"content_scripts": [
    {
      "matches": [ "<URLパターン>" ],
      "js": [ "***.js" ]
    }
  ]

あとは、jsファイルに1の検証をしたときのスクリプトのようなものを書いておきます。
ざっくり簡単に説明すると、「動画が再生し終わったら、タイトルと話数をコンソールに表示する」スクリプトです。

danime.js

var video = $("#video").get(0);
video.addEventListener("ended", function(e){
  console.log("ended", e);

  var animeTitle = $(".pauseInfoTxt1").text();
  var animeEpisodeNumber = $(".pauseInfoTxt2").text();

  console.log(animeTitle, animeEpisodeNumber);
});

ここまで出来たら、 chrome://extensions/ にアクセスして、デベロッパーモードの状態で今作ったスクリプトが入ったディレクトリを読み込みます。

「パッケージ化されていない拡張機能を読み込む」というやつですね。
正常に読み込まれたら、実際に動画を開いて動作を確認してみます。

……うん、大丈夫そうだ。
ということで、このあたりは問題無さそうでした。

Chrome extension内からTwitterにポストする

今回は以下のライブラリを使いました。
https://github.com/jublonet/codebird-js

codebird-jsのREADMEに書いてあるとおりにざくざく実装を進めていったのですが、途中軽くハマってしまいました。
調べてみたら、Chrome extensionから他のサービスに通信するときには、以下のような記述を追加する必要があったようでした。
参考：クロスドメインで怒られたら（XMLHttpRequest）

manifest.json

  "permissions": [
    "https://api.twitter.com/"
  ],

最終的なコードはこんな感じ。

danime.js

console.log("danime store movie");

var cb = new Codebird;
cb.setConsumerKey(consumer_key, consumer_secret);
cb.setToken(oauth_token, oauth_token_secret);
cb.setUseProxy(false); // これがないと、謎の通信が発生します

var video = $("#video").get(0);
video.addEventListener("ended", function(e){
  console.log("ended", e);

  var animeTitle = $(".pauseInfoTxt1").text();
  var animeEpisodeNumber = $(".pauseInfoTxt2").text();

  console.log(animeTitle, animeEpisodeNumber);
  cb.__call(
    "statuses_update",
    {"status": "Watched 『" + animeTitle + " " + animeEpisodeNumber + "』 on danime #danimemory"},
    function (reply, rate, err) { }
  );
});

ということで、全ての懸念点をクリアして、実装が完了しました！

実際のポストはこちら

Watched 『小林さんちのメイドラゴン第1話』 on danime #danimemory
— もん＠ベッド欲しい (@_litmon_) 2017年1月31日

うーん英語が怪しい。
ともかくこれで、ハッピーなアニメ視聴ライフが送れそうです。

終わりに

意外となんとかなりました。
作り始める前は、簡単な検証だけでいったん済ませようかなと思っていたのですが、作り始めると止まらなかったので最後まで作ってしまいました。
時間にして、1時間半くらいで一通り出来たと思います。

今後は、ニコニコ動画やyoutubeの視聴時にも応用できそうなので、時間があったらやってみようかな。と思ってます。
また、シェア先もTwitterだけじゃなく、Slackや他のサービスへのポストにも応用が効きそうですよね。夢が広がる😇

こんなくだらないことでも、作ってみると案外楽しいので、みなさんも是非やってみてください！

以上です。