firebase authのUserクラスで取得できるTwitterアイコン画像のサイズについて

6265 ワード
Twitter Firebase FirebaseAuth TypeScript Twitter テキストリンク

躓いた点

Firebase AuthでTwitter認証を行ったときに、firebase.UserInfo.photoURLで取得できるアイコン画像の解像度が48x48と低くて困っていました。

photoURLに入っているURL文字列の例：
https://abs.twimg.com/sticky/default_profile_images/default_profile_normal.png

このURLで取得できる画像サイズ：

html5のcanvas上に合成して使いたかったのでもっと高画質のものが欲しかったのです。

困ったときの公式ドキュメント

"By modifying the URL,"とあったので、ドキュメントにある規則通りに自分でURLを書き換えてアクセスすればよいのだと判断しました。

対応策

TypeScript(JavaScript)のstringに備えられたreplaceメソッドで"normal"の部分を置き換えます。

78x78(bigger)

user.photoURL.replace("normal", "bigger");

https://abs.twimg.com/sticky/default_profile_images/default_profile_bigger.png

24x24(mini)

user.photoURL.replace("normal", "mini");

https://abs.twimg.com/sticky/default_profile_images/default_profile_mini.png

original size

user.photoURL.replace("_normal", "");

https://abs.twimg.com/sticky/default_profile_images/default_profile.png

200x200

公式ドキュメントにはありませんが、公式Webクライアントのプロフィール画面に表示されるアイコンのimgタグがsrc指定していました。

user.photoURL.replace("normal", "200x200");

https://abs.twimg.com/sticky/default_profile_images/default_profile_200x200.png

400x400

こちらも公式ドキュメントには記載がないようです。しかし公式Webクライアントのプロフィール画面に表示されるアイコンをタップして表示される拡大アイコンのimgタグがsrc指定していました。

user.photoURL.replace("normal", "400x400");

https://abs.twimg.com/sticky/default_profile_images/default_profile_400x400.png

まとめ

original sizeだとユーザーがどんな画像を登録しているかで解像度が変わる可能性があります。多分。
200x200や400x400のサイズ固定ができるとcanvas上で利用するのも楽ですね。