この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
Human Interface Guidelinesを読むとAppleはSign in with Apple 用のボタンを提供していて、それを使う必要があると明記されています。また、ボタンのカスタマイズできる点も限られていて、開発者側がコントロール出来る部分は多くありません。この記事ではSign in with Apple用に提供されているボタンでどのようなカスタマイズが出来るのか実際に動かしながら一通り触ってみたので記事にしようと思います。この記事ではSign in with Appleの仕組みといったボタン以外の要素には触れません。Sign in with Appleについてより深く知りたい場合はガイドラインやその他の記事をご参照ください。
- はじめに - Appleでサインイン - Apple Developer
- Firebase AuthenticationでSign In With Appleを実装する ｜ Developers.IO
用意されているAPIを使う
ボタンを提供するためのAPIが予め用意されているので、開発者はそれを利用するだけでSign in with Appleボタンを実装できます。
- アップルが実装したスタイルなのでガイドラインに抵触する心配がない
- スタイルの変更を行っても比率が維持される
- 自動的なローカライゼーション
- UIに応じたボタンのCorner radiusの変更サポート
- Voice overサポート
今回はiOSで実装するのでASAuthorizationAppleIDButtonというクラスを使ってボタンを実装します。
ボタン表示まで実装
ASAuthorizationAppleIDButtonのinitializerのシグネチャは以下です。引数はButtonTypeというenumとStyleというenumを取ります。
public convenience init(type: ASAuthorizationAppleIDButton.ButtonType, style: ASAuthorizationAppleIDButton.Style)
public init(authorizationButtonType type: ASAuthorizationAppleIDButton.ButtonType, authorizationButtonStyle style: ASAuthorizationAppleIDButton.Style)authorizationButtonTypeをdefault、authorizationButtonStyleにwhiteOutlineを指定して初期化してみます。
let appleLoginButton = ASAuthorizationAppleIDButton(
authorizationButtonType: .default,
authorizationButtonStyle: .whiteOutline
)実行結果は以下のようになります。
Appleが提供しているログインボタンには白、黒のアウトライン付きの白、黒のスタイルがありASAuthorizationAppleIDButton.Styleではこれを指定します。
変更できる部分
ASAuthorizationAppleIDButtonを私用する場合はカスタマイズできるのはごく僅かでcornerRadiusとボタンのサイズのみになります。
appleLoginButton.cornerRadius = <#T##CGFloat#>
appleLoginButton.bounds = CGRect(x: <#T##CGFloat#>, y: <#T##CGFloat#>, width: <#T##CGFloat#>, height: <#T##CGFloat#>)ASAuthorizationAppleIDButton.Styleにwhiteを指定した場合
let appleLoginButton = ASAuthorizationAppleIDButton(
authorizationButtonType: .default,
authorizationButtonStyle: .white
)
ASAuthorizationAppleIDButton.Styleにblackを指定した場合
let appleLoginButton = ASAuthorizationAppleIDButton(
authorizationButtonType: .default,
authorizationButtonStyle: .white
)それぞれのStyleに使用すべきシチュエーションが記載されています。コードにもドキュメンテーションで書いて欲しいとちょっと思いましたがガイドラインに記載されています。使用すべき場合と使用してはいけない場合が明確に明記されていて画像も紹介されているのでアプリの画面に合わせて指定するのが良いでしょう。
cornerRadiusの指定
数少ない指定可能なプロパティは先述しましたがcornerRadiusです。デフォルトでも少し角丸なっていますが任意の値を代入できます。
ボタンのテキスト
ボタンに表示されるテキストは英語です。ですがAppleが提供しているボタンを使用するメリットに自動的なローカライゼーションをあげました。これはドキュメントにも記載されています。このローカライゼーションを行うにはXcodeのProject Navigator > Info > Localizationsで言語を追加すれば良いです
ボタンのデザインに関するガイドライン
該当のページは以下です。
Sign in with Appleボタンを目立つように表示するように規約には記載されています。具体的には他のボタンよりも小さく表示させない、極端な場所に配置したりせずボタンを見るために人々がスクロールせずに済むよう優先的に配置するといった対応をすることになるのでしょう。
レイアウトに応じたカスタマイズについて
ボタンについてのガイドラインのCreating a Custom Sign in with Apple Buttonという節で画面レイアウトに応じたカスタマイズについて触れられています。
Appleは最近Human Interface GuidelinesをアップデートしResourcesに変更を加えました。そしてSign In with Apple向けに左寄せ用の素材とロゴだけを表示するボタン用の素材が加えられています。
Apple Design Resources - Apple Developerにダウンロードできるリソースへのリンクがあります。それをダウンロードしてアプリ内で使用できるようにします。
ロゴの左揃え
今回はstoryboardを使ってボタンを作成してみました。
カスタムボタンの作成では気にしないといけないことがかなりあります。
- ベクター形式でないPNGファイルを使用する場合はボタンの高さは44pt固定
- ボタンタイトルはシステムフォント
- フォントサイズはボタンの高さに対して43%。高さを44pt固定にしている場合のフォントサイズは19pt
- テキストはSign in with Apple, Sign up with Apple, Continue with Appleのいずれか。大文字、小文字のスタイルも変更不可
- タイトルとロゴをボタン内で垂直に揃える
- タイトルとボタンの間の最小マージンを守る。ボタン幅に対して8%以上
- ボタンの最小サイズとボタンの周囲の余白を維持する
| 最小値 | 最小の高さ | 最小マージン |
|---|---|---|
| 140pt（140px @ 1x、280px @ 2x） | 30pt（30px @ 1x、60px @ 2x） | ボタンの高さの1/10 |
画像のみのボタン
画像のみのボタンの制限事項は３つです。
- PNGファイルの場合は44ptx44ptで固定
- 水平方向のパディング追加の禁止。常にアスペクト比は1:1
- 素材の加工(トリミング)は禁止。マスクを使用して表示をカスタマイズする
まとめ
今までに公私でSign in with Appleの実装を行ってきた中で必ずボタンはどこまでカスタマイズできるか尋ねられました。HIGのリンクを投げて読んどいてで終わり、という関係性の人だと楽ですがそうでない場合も多いのでそんな時に見せるページとして作りたかったというのもこの記事を書こうとした理由の一つです。
提供されいているAPIしか使ったことがなかったのでこの記事ではじめてカスタムボタンを作成して一連の流れを触れたのは良かったと思います。
もし業務でカスタムボタンを使用することになったらstoryboardか規約を満たせなかった時に気づけるようにpreconditionを使いながらで外から引数としてカスタマイズできる値を受け取るメソッドをextensionに生やすかどちらかで実装すると思います。
16
