tofucodes diary

にほんごのほう

iPhoneのWalletアプリにオリジナルのPassを登録する方法+α

iPhoneのWalletアプリ便利ですよね。僕も最近はコンビニでの支払いや自動販売機、電車の改札もWalletで済ませています。(個人的には使ってないですがポンタカードがWalletに登録できることを発見した時はテンション上がりました)

今回はそんなWalletアプリにオリジナルのPassを登録する方法を簡単にまとめてみました。 この記事では以下の内容について簡単に触れます。

  • iPhoneのWalletアプリにオリジナルのPassを登録する方法
  • PassがiBeaconに近づいたらロック画面に通知を表示する方法
  • Pass(Wallet)にPush通知を送信する方法

developer.apple.com

オリジナルのPassを登録する

Passの作成方法

developer.apple.com

Passを作成するには最終的に.pkpassという拡張子のファイルを生成することになります。

1. Pass Type IDの作成

f:id:tofucodes:20180730232356p:plain

2. Pass用のデータフォルダ作成

適用な場所に以下の構造のフォルダを作成します。名前はなんでも大丈夫です。

Sample.pass/

3. pass.jsonの作成

先ほど作成したフォルダにpass.jsonというJSONファイルを作成します。Passの設定は全てこのpass.jsonに記載されます。

{
    ...
    "passTypeIdentifier" : "先ほど作成したPass Type ID",
    "teamIdentifier" : "DeveloperアカウントのTeam ID",
    ...
}

Team IDはMember Centerで確認できます。

f:id:tofucodes:20180730234119p:plain

その他のキーの一覧

Top-Level Keysは必須のキー、Lower-Level Keysは任意のキーのようです。

developer.apple.com

developer.apple.com

4. .pkpassファイルの生成

.pkpassの生成にはsignpassというコマンドラインツールが必要になります。まずはAppleのダウンロードリンクからsignpass用のXcodeプロジェクトをダウンロードします。

ダウンロードしたらXcodeでそのプロジェクトを開きビルドを行うことでsignpassコマンドラインツールがビルドされて利用できるようになります。

signpassを作成することができたら以下のようにPass用のフォルダを指定してコマンドを実行します。Sample.pkpassが生成されたら成功です。

$ ./signpass -p Sample.pass

あとは作成したSample.pkpassiPhoneにダウンロードするだけです。 ダウンロードの方法としては、EメールやSafariを使う方法や自分のiOSアプリを利用する方法などいくつかあります。 自分はアプリでやる方法しか試してないのですが、PassKitフレームワークを使って簡単に実装することができます。 その他の方法については以下のリンクをご参照ください。

developer.apple.com

Passのデザイン

developer.apple.com

Passには現在のところ以下の5つのタイプが存在しています。それぞれに可能なデザインが決まっているので、自分の作成するPassに合わせてデザインを決めます。例えば背景をかっこよくグラデーションにしたいと思ってもできるのはEvent ticketsだけ、というようなことがあったりするので注意です。

  1. Boarding passes
  2. Coupons
  3. Event tickets
  4. Store cards
  5. Generic

iBeaconに近づいたらロック画面に通知を表示する

Beaconと連携させることで例えば以下のような便利な機能を作ることができます。

  • お店に近づいたらクーポンをロック画面に表示する
  • 空港に到着したら航空券をロック画面に表示する
  • ジムのドアの前でジムのカードキーをロック画面に表示する

ちなみにiBeaconではなくロケーションを利用することでも可能ですが、ロケーションの設定は1つのPassに最大10個までしか登録できません。

一方beaconの設定はというと、UUIDは同じく10個までしか登録できないものの、beacon端末のmajorとminorの値を変更することで同じUUIDのbeacon端末を作成することができるため、実質10個以上のbeaconを検知することができるようになっています。

Wallet Developer Guide: Pass Design and Creation

詳細なドキュメントは上記のRelevance Information Displays Passes on the Lock Screenの項に記載されています。

pass.jsonに以下の設定を追加します。

...
"beacons": [
    {
      "proximityUUID":"iBeacon端末の識別子",
      "relevantText":"ロック画面に通知する時に表示するテキスト"
    }
],
...

以上だけです。iBeacon端末を持っていない人はMacをiBeacon端末にして動作確認できます。

私は以下の記事で紹介されているGithubのプロジェクトをそのまま利用させていただきました。(感謝)

dev.classmethod.jp

Pass(Wallet)にPush通知を送信する

Walletに登録済みのPassをPass提供者側から更新するためには、サーバからPush通知を送信する必要があります。

更新処理全体の流れは公式ドキュメントをご参照ください。

curlを例に送信方法は以下のようになります。

curl -v -d '{"aps":""}' -H "apns-topic:<Pass Type ID>" \
  -H "apns-expiration: 1" -H "apns-priority: 10" \
  --http2 --cert <path>/Certificates.pem:<password> \ 
  https://api.push.apple.com/3/device/<device token>

注意点は、--certで指定する証明書はAPNsの証明書ではなくPass Type IDを作るときに生成した証明書を利用することです。

私はずっとAPNsの証明書を使って全然Push通知が届かず無駄な時間を費やしてしまいました。。

その他にもWalletのPassへのPush通知独自の注意点などが以下のstackoverflowによくまとめられているのでご参考までに。

stackoverflow.com