この前初めて、Firebase Authentication を使用した Google でのサインインを実装しました。
GoogleSignIn のパッケージが提供してくれているデフォルトの GIDSignInButtonの見た目のカスタマイズがどこまでできるかを調べてみたので、それについて記載します。
SwiftUI を使用したコードになっています。
環境
- Xcode 13.4.1
- Firebase 9.0.0
- GoogleSignin 6.0.0 の GoogleSignIn（GoogleSignInSwiftではない方）
- iPhone 13 (15.5) Simulator：ライトモード
カスタマイズ可能な部分
GIDSignInButtonクラスのコードを確認したところ、そのクラスから提供されているカスタマイズ可能なプロパティは、以下2つです
-
GIDSignInButtonStyle：レイアウトのスタイル -
GIDSignInButtonColorScheme：カラースキーム
レイアウトのスタイル
現時点で定義されているタイプは、以下の３つになります。
-
kGIDSignInButtonStyleStandard: 230 x 48 （テキストは「Sign in」） -
kGIDSignInButtonStyleWide: 312 x 48 （テキストは「Sign in with Google」） -
kGIDSignInButtonStyleIconOnly: 48 x 48 (テキストなし、固定サイズ、アイコンのみ)
それぞれこのようになります。
kGIDSignInButtonStyleStandard |
kGIDSignInButtonStyleWide |
kGIDSignInButtonStyleIconOnly |
|---|---|---|
 |
 |
 |
アイコンだけというのも使い道ありそうな気がしました。
あと特に書いてなかったんですが、standard と wide で表示されるテキストも違うんだというのが気づきでした。
詳細を調べてみたので、気になる方は以下を開いてみてください。
結論、standard は「Sign in」で、wide は「Sign in with Google」と表示されるようになっており、特に私の実装ミスなどではなかったです。
standard と wide で表示されるテキストの違いについて
GIDSignInButton.mのここの実装を見てみました。👀
なんだか違いそうな雰囲気ですね・・・
- (NSString *)buttonText {
switch (_style) {
case kGIDSignInButtonStyleWide:
return [GIDSignInStrings signInWithGoogleString];
case kGIDSignInButtonStyleStandard:
case kGIDSignInButtonStyleIconOnly:
return [GIDSignInStrings signInString];
}
}
GIDSignInStrings.hはこのようになってました。
あ確かに違うらしい。
// "Sign In"
+ (nullable NSString *)signInString;
// "Sign in with Google"
+ (nullable NSString *)signInWithGoogleString;
ダメ押しでGIDSignInStrings.mの方も見てみると、
まだ文字列は出てこないですが、ローカライズ対応されていることがわかりますね。
// Button texts used as both keys in localized strings files and default values.
static NSString *const kStandardButtonText = @"Sign in";
static NSString *const kWideButtonText = @"Sign in with Google";
・・・
+ (nullable NSString *)signInString {
return [self localizedStringForKey:kStandardButtonText text:kStandardButtonText];
}
+ (nullable NSString *)signInWithGoogleString {
return [self localizedStringForKey:kWideButtonText text:kWideButtonText];
}
で、文字列が定義されているのは、en.lproj/GoogleSignIn.stringsです。
/* Sign-in button text */
"Sign in" = "Sign in";
/* Long form sign-in button text */
"Sign in with Google" = "Sign in with Google";
というわけで standard と wide でどういうわけか文字列が違うことがわかりました。
今回はUI なので、実装すれば文字列の違いはすぐ気づきますが、自分の実装ミスなのか仕様なのか判断に迷うので、コードコメントにでも書いといてほしいですね（となぜかここで不満... 
）
ちなみに今回確認しているのは、GoogleSignIn のProductの方なのですが、SwiftUI 向けの GoogleSignInSwift のProductの方でもこれは変わらず、standard と wide で表示されるテキストが異なります。（ここ）
/// Button text used as both key in localized strings files and default value
/// for the standard button.
private let standardButtonText = "Sign in"
/// Button text used as both key in localized strings files and default value
/// for the wide button.
private let wideButtonText = "Sign in with Google"
カラースキーム
現時点で定義されているタイプは、以下の2つになります。
-
kGIDSignInButtonColorSchemeDark：ダーク →という名前だけど色は青 -
kGIDSignInButtonColorSchemeLight：ライト（こっちがデフォルト）
それぞれこのようになります。
kGIDSignInButtonColorSchemeDark |
kGIDSignInButtonColorSchemeLight |
|---|---|
 |
 |
コード
こんな感じで実装しました。SwiftUI で GoogleSignIn の Product を使用して実装するには、UIViewRepresentable に準拠した構造体を作って実装していく必要がありますが、そんなにコード量は多くなかったです。
import Foundation
import SwiftUI
import GoogleSignIn
struct GoogleSignInButton: UIViewRepresentable {
typealias UIViewType = GIDSignInButton
func makeUIView(context: Context) -> GIDSignInButton {
let button = GIDSignInButton()
button.style = .iconOnly // レイアウトのスタイルの定義
button.colorScheme = .light // カラースキームの定義
return button
}
func updateUIView(_ uiView: GIDSignInButton, context: Context) {
}
}
記事を書き終えてから気づきましたが、GoogleSignIn は SwiftUI に対応しているので、GoogleSigIn のProductではなく、GoogleSignInSwift のProductを使う方が良いかと思います。
追記：GoogleSignInSwift についての記事を書きました。
おわりに
アイコンオンリーのスタイルがあったことや、カラースキームを変えられることは知らなかったので、書いてみました。
今回の内容は、GIDSigInButton.hを見れば一発でわかる内容だったので、気になる方はそちらを参照ください。
細かいUIの実装が見たい場合は、GIDSignInButton.mにあります。
ちなみに個人的には意外とカスタマイズ性低いなと感じたので、自分で自作ボタンを作ることにしました 
どなたかのお役に立てば幸いです。そして何か間違い等ありましたら、ご指摘いただけますと嬉しいです。 