こんにちは、iOS エンジニアの中村です。iOS クックパッドアプリの開発では、iTunes Connect から発行したプロモコードを使いリリース前に動作確認をしています。（2013年頃から審査通過後の動作確認がこの方法で出来るようになり、リリース時の緊張感が少し軽減されました）ここまではいいのですが、このコードは文字列で発行されるためキーボードで入力しなければなりません。毎回ランダムな文字列を手入力するのは避けたいです。そこで、このコードを iTunes Card に記載されているコードのようにカメラで読み取れる画像を生成するツール icccigを作りました。この記事では、このツールの製作過程をご紹介します。
App Store.app > おすすめ > コードを使うの画面（カメラで読み取るという選択肢がある）
フォント
テキストエディタに Helvetica Nune でコードを書き、その周りに枠線を付けたものが認識できるか試しましたが、枠線は認識してもコードを認識することはできませんでした。そこで、コードに使われているフォントを WhatTheFontで探しましたが、これはというものは見つかりませんでした。探している過程で「光学式文字認識のための字形（英数字）」というものを知り OCR-Bがとてもよく似ていたのですが、これも認識することはできませんでした。
OCR-Bで書いたコード
- iTunes Card のコード
フォント探しは諦め、Google の画像検索で iTunes Card のコードが沢山写っている画像を見つけることができたので、この画像からフォントを作るアプローチに変更しました。しかしよく見るとこの画像には足りない文字がありました。例えば 12BZ等々。ここで iTunes Connect からコードを100個発行して出現文字を確認したところ、そこで使われていたのは以下の20文字でした。
iTunes Connect から得られたコードの文字の種類 数字 3, 4, 6, 7, 9 英字 A, E, F, H, J, K, L, M, N, P, R, T, W, X, Y
お店で売られている iTunes Card に使われているコードは16桁なのに対して、iTunes Connect から得られるのは12桁です。出現文字が少ないのは恐らくこのためですが、今回は iTunes Connect から得られるものに対応できればいいので足りない文字は無視して進めました。Sketch で文字をスライスした画像を並べて試したところ認識できました。これでフォントは完成です。
スクリプト
スクリプトは２つ用意しました。１つは文字列からカメラで読み取れる画像を生成するスクリプトです。これは上記で作成したフォントでコードを描き、その周りに枠線を付けた画像を生成します。枠線の太さと文字からの距離も重要な点です。枠線をうまく認識できるように微調整してこのスクリプトを完成させました。
- icccig で生成した画像
２つ目は生成した画像を社内画像共有サーバにアップロードし、そのリンクのリストを生成するスクリプトを用意しました。issue にこのリストをコピペしておけば、開発関係者がコードを手入力せずに済みます。
最後に
上記のフォントとコード画像を生成するスクリプトは こちらのリポジトリにありますのでよかったら試してみてください。実際の運用で試したところ、確認項目の多いディレクターやテストエンジニアに好評でした。このツールで一旦解決できましたが、一方で Xcode プラグインとして作った方が良かったかもしれませんし、他にもっといいツールや方法があるかもしれません。何かいいアイデアをお持ちの方は是非教えていただきたいです。