mikutterをいじりたおす 第7回

動画を再生します。第1回はこちら

動画再生実装

現状では、動画のあるツイートの該当URLをクリックしても、そのサムネイルが表示されるだけである。でも、せっかく動画を投稿できるなら、やっぱりその動画を見たい。動くチノちゃんを見たい。チノちゃんが見たい。

実装フロウ

  1. 現状実装されている画像表示がどういう仕組なのかを理解する
  2. mikutter内で動画のURLを取得する
  3. 動画を再生する

まずtwitterの仕様としてExtended Entitiesという概念があることを知っていなければならない。ここには画像やビデオのデータ、サムネイル、その大きさやバイト数、様々な情報が含まれていて、これがentityの含まれる(つまり画像や動画が含まれる)ほとんどのツイートに付属している。僕は動画をアップロードした時のレスポンスを見て気づいたが、知らない人は知らないままなので、常識としてまず紹介しておく。

画像をいかに表示しているのか

まずはリンクをポチッとすると出てくる画像の仕組みを知ろう。おそらくこれはプラグイン実装なので、プラグインのフォルダを眺める。すると「openimg」というフォルダがあることがわかる。中の.mikutter.ymlを見ると、「画像だけを専用のウィンドウに表示する」という説明があって、まさにこれっぽい。

中を見てみよう。いろいろな処理をしていてよくわからないが、199行目に以下のような記述がある。

つまり、addopenwayしてあげることで、新しいリンクを開く方法を提供することができるのではないか、というわけだ。どうやら見た限り、「::Gtk::TimeLine.addopenway(-> _ { bool値を返す関数 }) do |url, cancel| 処理 end」とすることで登録できそうだ。bool値を返す関数は、どうやら_という変数が使えるらしい。それ以外に判断する方法がなさそうだ。おそらく ->_ がそれを示しているのだろう。いわゆる「アロー演算子」というやつだ。一度この_をputsしてみるとよい。なにが送られてくるのかわかりやすいだろう。任意のリンクをクリックした際にそのURLが出力される。

つまり、URLをmp4にどこかで書き換えて、それを別プラグインで受け取るようにして、addopenwayすればいいのでは、ということになる。

URLの書き換え

URLは最初t.coで書かれた状態で送られてくる。これはすべてのリンクに関してそうで、たとえ公式pic.twitter.comでもこうなる。まずはこれを書き換えている主を探す必要がある。

間違いなくextended_entitiesを読んでいることは確かなので、これで全grepをかけてみよう。するとすべてcore/entity.rbにまとめられていることがわかる。これも300行弱あるので読むのがつらいが、少し我慢して読んでいこう。

45行目辺りにrefreshという関数が定義されており、ここにfilterが並んでいる。filterということは書き換えている可能性が高い。以下のコードで:faceと:urlに表示URLと実際URLを代入しているのだろう。実際にsegment[:url]を出力すると、書き換えられているのがわかるはずだ。

ガバッとsegment自体がどうなっているのかを調べてみよう。ppで出力すると、いかのようなデータが得られる。

かなり長くてアレだが、普通に:extended_entitiesの中身があることがわかる。つまりコレ自体が1つのextended_entityなのだ。ためしにvideoが入っているツイートを見てみよう。これは:typeが’video’なツイートを見れば良い。これのsegmentを見てみよう。

なので、:typeがvideoのときは、:faceと:urlを:video_info->:variants->[どれか]->:urlにか聞けてしまえば良い。統一するために、:content_typeがvideo/mp4であるもの、さらにこの中でビットレートがもっとも高いものを選ぶことにしよう。これを使ってフィルターを実装しよう。

こんな風に実装すれば動画のときにうまく書き換えられるだろう。:faceは/photo/1みたいなアレのURLになるのでmp4のURLよりは好き。まあ好みの問題なのでsegment[:url]にしてもよいだろう。

これで動画付きのツイートを開くと、mp4の動画への直リンが開くはずだ。

補足

:typeがanimated_gifのときもこれが適用される。

animated_gifでも同じ処理をすれば済むのでうえで実装した。実験では気づかなかったので実装していない。

動画の再生

今回はavplayを使って再生する。gemにあるかなーと思って探したのだが見つからなかった。誰かgem作れ。

まずはcore/plugin/avplayディレクトリを作って、core/plugin/openimg/の中の.mikutter.ymlとopenimg.rbをコピーする。

まずは.mikutter.ymlの編集。適当に編集すればよいだろう。

つぎにopenimg.rbをavplay.rbに書き換えて、下まで削除。

次に条件と動作を改良する。といってもめんどくさいので以下のようにすればよいだろう。雑の鬼。

これで動画をクリックするとavplayの画面が開いてチノちゃんが踊る。

補足

実験ではavplay・avconv(第6回でサムネイルを作る際に使った)を設定から変えられるようにした。これはそんなに難しくないので実装は省略。

参考文献

  1. mikutter公式 – http://mikutter.hachune.net/
  2. Writing mikutter plugin – http://toshia.github.io/writing-mikutter-plugin/
  3. mikutter RDoc – http://mikutter.hachune.net/rdoc/index.html
  4. mikutter開発ブログ – http://mikutter.blogspot.com/
  5. Ruby-GNOME2 Project Website – http://ruby-gnome2.osdn.jp/ja/
  6. Twitter API Documentation – https://dev.twitter.com/overview/documentation
  7. GTK/GNOMEによるGUIプログラミング – http://www.iim.cs.tut.ac.jp/~sugaya/wiki/wiki/index.php?GTK%2FGNOME%A4%CB%A4%E8%A4%EBGUI%A5%D7%A5%ED%A5%B0%A5%E9%A5%DF%A5%F3%A5%B0
  8. avconv Documentation – https://libav.org/avconv.html
  9. Ubuntu Server 12.04で動画のサムネイルを作成~avconv ffmpeg | Scimpr Blog – http://blog.scimpr.com/2012/09/24/ubuntu-server-12-04%E3%81%A7%E5%8B%95%E7%94%BB%E3%81%AE%E3%82%B5%E3%83%A0%E3%83%8D%E3%82%A4%E3%83%AB%E3%82%92%E4%BD%9C%E6%88%90%EF%BD%9Eavconv-ffmpeg/
  10. TreeView で データを表示させてみたと思う – 想像力の欠如は深刻な欠点の一つである。 – http://noqisofon.hatenablog.com/entry/20110913/1315917614
  11. Stack Overflowなど

コメントを残す

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