LoginSignup
13
9

More than 3 years have passed since last update.

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

Posted at

躓いた点

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

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

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

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
icon

24x24(mini)

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

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

original size

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

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

200x200

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

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

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

400x400

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

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

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

まとめ

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

13
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
9