iOS App にカラーピッカーを秒で導入「adventam10/AMColorPicker」【Japan NFC Reader での使用ライブラリ紹介】

前回の記事で Qrunch に着地した とか言っておきながら、ここにも Qiita にも記事を書いていませんでした。思ったより忙しく…。

まもなく iOS・watchOS App である Japan NFC Reader はバージョン 1.0 のリリースを行う予定です。この記事では Japan NFC Reader で導入している OSS ライブラリについて紹介したいと思います。いまのところはアルファベット順に連載を考えていますが…続くかな……。

今回は adventam10/AMColorPicker です。

カードごとに設定できる「イメージカラー」

Japan NFC Reader では初期リリース時からカードごとにイメージカラーを設定することができます。合わせて設定できる「カード名」とともに、パッと見でどのカードの情報かを確認できるようにするためです。

そして、バージョン 1.0 では新たに「カード画像」を設定できるようになります。あらかじめ複数のプリセットを用意している他、自分の好きな画像も設定できます。

ところで、カード画像を設定できる似たような App はありますが、公式の画像を Web サイト等から勝手に持ってきてバンドルしている App ありますよね…。あれってマズくないですか…?私は好きではありません。

しかし、カード画像を設定していない場合はイメージカラーが表示されるので、まだまだ重要な設定項目です。イメージカラーもプリセットを豊富に用意していますが、それら以外の色を指定したい場合にカラーピッカーがあればいいなぁと思っていました。

adventam10/AMColorPicker

そこで出会ったのが adventam10 さんの AMColorPicker です。おそらく Qiita 記事からみつけたんだったかな…?

adventam10/AMColorPicker の README より

Japan NFC Reader に導入するときの条件として

  • Swift 製である
  • iOS 9.3 以降に対応である
  • iOS 13.0 以降ではダークモードに対応である
  • Mac のカラー指定のように扱える
  • 16進数カラーコードで指定できる

がありました。特に、Japan NFC Reader は iOS 9.3 以降対応であるため、ここの条件をクリアするライブラリとなると選択肢が多少絞られてしまうことになりました。

3枚の画像が Japan NFC Reader 内で AMColorPicker を使用しているスクリーンショット、4枚目は「Mac のカラー指定」のスクリーンショットです。
サークル内を指定する方法、あらかじめセットされている色名により指定する方法、RGB をスライダーで指定&16進数カラーコードで指定する方法、というように十分にカラー指定のための方法が用意されています。

adventam10/AMColorPicker の使い方

使い方も非常に簡単で、AMColorPickerViewController() を初期化して UIViewController.present(_:animated:completion:) を呼び出すだけです。ユーザーがカラーを指定した後は AMColorPickerDelegatecolorPicker(_:didSelect:) が呼び出されるので、それを処理するだけです。

let colorPickerViewController = AMColorPickerViewController()  
colorPickerViewController.selectedColor = .white  
colorPickerViewController.delegate = self  
self.present(colorPickerViewController, animated: true, completion: nil)  

// AMColorPickerDelegate  
func colorPicker(_ colorPicker: AMColorPicker, didSelect color: UIColor) {  
    // color に選択された色が入っている  
}  

adventam10/AMColorPicker は MIT License 下で利用できます。

後記

adventam10/AMColorPicker は現在ダークモードに対応しているようですが、Japan NFC Reader 導入時には対応していなかったこと、また Japan NFC Reader では Opacity の設定が不要であることの2点から、フォークしてこれらを変更した treastrain/AMColorPicker を実際には使用しています。Japan NFC Reader の配信開始から記事執筆前日までの統計では、App 内で約0.1%のユーザーがこのカラーピッカーを使用しています。
素晴らしい OSS ライブラリを公開している adventam10 さんに感謝申し上げます。