TipBlogsで、登録されたブログのTwitterのプロフィール画像を表示しているのですが、今まで使っていた方法だと表示されなくなり、困りました。
ちなみに今までの方法は↓のような感じです。
https://twitter.com/kawazn_aus/profile_image?size=mini
問題が次々と･･･
そもそも、今までもなぜかモバイル上では全く表示されていませんでしたし、PC上でも時々画像が壊れて表示されていないことがあったんです。
「まあ、そんなこともあるかな？そのうち直るかも」と軽く考えていたら、今日、一つも表示されていないことに気付きました。
そこで、今まで使っていたリンクをブラウザで開いて分かったことは、画像が表示される前にリダイレクトされていたということです。
つまり、
https://twitter.com/kawazn_aus/profile_image?size=mini
を開くと、
https://pbs.twimg.com/profile_images/658618839500886016/I9YgrBKt_mini.png
というアドレスにリダイレクトされていたのです。
恐らくモバイル上で全く表示されなかった理由はこれでしょう。
なぜPCのブラウザでは表示されていて、今日になって動かなくなった理由は不明ですが。
「あ、これは本当は表示できないものだったんだ」とブラウザが突然気付いたのでしょうか（笑）
さて、原因は分かったものの、問題はこのリダイレクト後のアドレスをどうやって直接取得するかです。
ググってみると、Twitter APIを使ってgetすればできるようなのですが、それだとその場でログインしているユーザー本人のアバターしか取得できません。
そもそも、例え他のユーザーの画像をAPIで取得できたとしても、1ページ内に何十個という数のアカウントのアバターを表示するために一々APIを叩くのは非効率です。
解決方法
色々調べていてstackoverflowで見つけたのが、Avatars.ioというサービス。
サイトを開くと、「まさに、このサービスのためだけにあるサイト」という感じのページが表示されます↓
Twitterのアイコンを選択し、試しに自分のアカウント名を入力して見ると･･･
おー、素晴らしい！
つまり、 “https://avatars.io/twitter/”に続けてユーザーIDを付ければ簡単にアバターを表示できるようになるということです。
実際にTipBlogsで使ってみると、きちんと表示されていました。
モバイル上でもばっちりです。
ちなみに、小さい画像を取得したい場合はURLの最後に/smallを付ければOKです。
こんな感じです↓
https://avatars.io/twitter/kawazn_aus/small
もっと大きな画像が必要な場合は、mediumとlargeで。
Twitterのprofile_imageを使った場合、miniというパラメーターを付けると24×24ピクセルの大きさのものが取得できたのですが、avatars.ioではsmallで48×48ピクセルが最小のようです。
仕方がないのでHTML上でサイズを24ピクセルにして表示することにしました。
少し無駄な気がしますが、致し方ありません。
なにより、こんなに簡単に問題を解決してくれたサービスなので文句はありません。
avatars.io、シンプルだけどとても良いサービスです！
なお、サイトを見て分かる通り、Twitterだけでなく、Facebookやインスタグラムにも対応しているようです。
avatars.ioについては、簡単に検索したところ、日本語で紹介している人がいないようだったので、紹介しておくことにしました。
誰かの役に立つことを願って。
