OpenTween AdventCalendar 2日目 - サムネイル画像表示

OpenTween

この記事は OpenTween AdventCalendar の2日目の記事です。

2日目に入りました。公開する前の日には記事を完成させて置かうといふ計画は早くも崩れ去りました。 今日は、Twitter クライアントにおいて重要な機能の一つである「サムネイル画像表示」について書きます。

Twitterクライアントにおけるサムネイル画像表示

例へばこんな感じのツイートがあります。

このツイートは 来年の干支 https://pic.twitter.com/FMuOGREv3s といふテキストです。https://pic.twitter.com/FMuOGREv3s は画像を示す URL で、これを開くと成田ゆめ牧場の「ふれん ZOO 広場」で撮影された十二支で 8 番目に数へられる未の動物であるヒツジの写真が出てきます。上の埋め込みツイートにもその写真が表示されてゐますね。

四六時中 Twitter のタイムラインを眺める人々にとって 来年の干支 https://pic.twitter.com/FMuOGREv3s とだけ書かれたツイートの画像を見るためにわざわざリンクを踏んでブラウザで画像を見るといふのはすげー面倒くさい行為です。なので、こんな感じにツイートと一緒にリンク先の画像も表示する機能が Twitter クライアントに求められるわけですね。

今となっては上のツイートのように Twitter が公式に提供してゐる画像アップロード機能 (pic.twitter.com) が利用されることが多いですが、それ以前は Twitpic や yfrog などの Twitter と連携するサードパーティの画像共有サービスが多く使はれてゐました。

また、クライアントによっては画像共有サービスに限らず Youtube やニコニコ動画などの動画共有サービスや Pixiv や TINAMI に投稿されたイラストなどもサムネイル表示の対象としてゐるものもあります。

OpenTweenでのサムネイル画像表示の実装

画像共有サービスなどの URL からサムネイル画像を取得する方法はそのサービスによって異なり、大きく分けて次のような方法があります。

  1. URL の一部を書き換へるとサムネイル画像の URL になる
  2. 各サービスが提供してゐる API を呼び出してサムネイル画像の URL を取得する
  3. 画像ページの HTML をスクレイピングして画像 URL を取得する

それぞれのパターンごとに、実際の OpenTween での実装を見てみませう。

1. URLの一部を書き換へる

Twitpic など多くの画像共有サービスで提供されてゐる方法です。例へば https://twitpic.com/2oaupa といふ URL があった場合、http://twitpic.com/show/thumb/2oaupa のやうに書き換へると直接サムネイル画像を取得することができます。簡単ですね。

OpenTween v1.2.4 では Twitpic のサムネイルについて次のように記述してゐます。

ThumbnailGenerator.cs 66-70行目

// Twitpic
new SimpleThumbnailService(
    @"^http://(www\.)?twitpic\.com/(?<photoId>\w+)(/full/?)?$",
    "http://twitpic.com/show/thumb/${photoId}",
    "http://twitpic.com/show/large/${photoId}"),

SimpleThumbnailService に渡してゐる 1 番目の引数は Twitpic の URL を検知するための正規表現です。もし正規表現にマッチする URL があれば 2,3 番目の文字列に従って URL を置換します。簡単ですね。

2. 各サービスが提供してゐるAPIを呼び出す

これは画像共有サービスといふよりは Youtube や Tumblr などのサービスでサムネイル画像を取得する方法として提供されてゐます。

このパターンの殆どは各サービスの API キーを作成しに行く必要があるといふのが若干面倒なところです。

3. HTMLをスクレイピングする

ザ・最終手段です。できれば避けたい方法ですね。

とはいへ、多くの場合は Open Gragh protocol と呼ばれる仕様に沿って書かれた META 要素が HTML コンテンツの中に記述されてゐるため、それを読み取ればサムネイル画像の URL も大抵取得できます。

ThumbnailGenerator.cs 130-131行目

// flickr
new MetaThumbnailService(@"^https?://www\.flickr\.com/.+$"),

スクレイピング処理は MetaThumbnailServiceクラス 内で行はれます。今のところ OpenTween では OpenGraph でも取得できないやうなページのスクレイピングはしてゐないため、あまり複雑な例はありません。

時間ギリギリだー。次回から余裕を持って記事を書きます…。

OpenTween のサムネイル取得処理は、Tween からフォークして初めて大幅に手を加へた箇所でもあります。 OpenTween v1.0.0 の頃の Thumbnail.cs とかと現在の実装を比較してみると、なかなか感慨深いものがありますね。