JavaScript
Hubot

Tumblrから画像をタグ検索するhubot scriptを作る

More than 1 year has passed since last update.

はじめに

2017年から始めるjavascript勉強ノートで多少の理解ができたので、
かんたんなhubot scriptを作ってみようと思います。

hubotにもともとあるGoogleから画像検索する hubot-google-images は非常に優秀なんですが、
たまにはTumblrで共有されるような(おもにイラスト)コンテンツをslackで取得したいなぁ
となったので作ることにしました。

ちなみに今回はTumblrのタグ検索APIを使わせていただくことにしました。
Tumblr様は色々APIを用意してくれてるので、他にもっとよいやつがあるかも。

完成品は Githubのここにあります。

つくる

1. Tumblr に登録し、APIキーを取得する

TumblrのAPIの利用はかなり敷居が低く、すぐに使えるようになります。
ここを参考に会員登録とアプリケーション登録を済ませます。 OAuth認証の手順は不要です。

コンシューマキーだけメモっておきましょう。

2. APIを叩いてみる

では早速タグ検索のAPIを叩いてみましょう。
https://api.tumblr.com/v2/tagged?api_key={コンシューマキー}&tag=cat

この例では tag=cat としているので "cat" のタグが付いてる投稿がjson形式で返ってきます。

他のオプションで limit で取得件数を制限したり(デフォルト=20, 最大20)
before で投稿日時を指定できます。

3. jsonを解析してbotに発言させる

レスポンスから画像のURLを抽出します。

当初はjsonの post_url を返すように作っていたのですが
Slackに表示される画像サムネイルの表示サイズが小さかったり、
投稿の閲覧に制限があると表示できなかったりしていたので
photos.original_size を返却するようにしました。

今回は画像を表示させるスクリプトなので前述のようにしましたが、
投稿を返させたい場合は post_url やその他もろもろの情報を抜き出しても良いかもしれません。

返却レスポンスは 公式のここ にあります。

4. うごかしてみる

20170420_tumblr-search.png

いいかんじ!

まとめ

ほとんどロジックを考えてコーディングすることはありませんでしたが、
jsonや配列の扱いの扱いの基礎練習ができて程良い練習になりました。

まだまだおもしろいAPIを探して放浪します。

参考

TumblrAPIについて: Tumblr APIでwebサービスを作りたい全ての人に向けて書きました