[Apple Pay]PassカードをiPhone Walletに追加するアプリ開発方法のまとめ

スポンサーリンク
PassカードをiPhone Walletに追加するアプリ開発方法のまとめ Apple Pay
スポンサーリンク

PassカードをiPhoneアプリに追加しましょう!

Apple Payを使用すると、iOS App、iPadOS App、watchOS App、およびSafariのWebサイト上で、より簡単かつ安全に支払いを行うことができます。 またMessages for BusinessやiMessage ExtensionでもApple Payを利用できるようになりました。

ユーザーは、Face IDやTouch IDを使用するか、Apple Watchをダブルクリックすることで、支払い、配送先、連絡先に関する情報を迅速かつセキュアに提示して決済を実行できます。

Apple Payのシンプルさはユーザーから高い評価を受けているため、Apple Payを導入することでコンバージョン率と新規ユーザー登録率の向上が期待できます。

Appleウォレットでは、ポイントカード、搭乗券、チケット、ギフトカードなどのパスカードを1か所で便利に管理して使用することができます。

Apple WalletやPassについて調査し、Passを作ってみましょう。

Appleウォレットに対応すると、iPhone、iPod touch、Apple Watchのユーザーに対して、位置情報に応じた関連情報を提供し、適切なパスを表示することができます。このパスを作る方法を紹介しています。

Apple Pay - Apple Developer
AppやWebサイトにApple Payを組み込む際に利用できる、プレゼンテーション、ドキュメント、リソースを紹介します。

Apple Payを勉強しよう!

ビデオやドキュメントなどのリソースを活用して、AppやWebサイトへのApple Payの統合に関する詳しい情報を確認することができます。
https://developer.apple.com/jp/apple-pay/resources/

WWDC18 - Videos - Apple Developer
What's new in Wallet and Apple Pay - WWDC20 - Videos - Apple Developer
Apple Pay makes it simple to pay for goods and services in your app and on your website. Discover how you can integrate API updates like...
What's new in Wallet and Apple Pay - WWDC21 - Videos - Apple Developer
Discover the redesigned Apple Pay for in-app and web payments and learn how you can incorporate the latest APIs into your app or website...

Apple Payの実装

Apple Payをサポートするために必要なデベロッパアカウントの設定方法、トランザクションが正常に完了したかの確認方法、さらにはAppやWebサイトでガイドラインに基づいたApple Payの実装を確実に行う方法についてご確認ください。
https://developer.apple.com/jp/apple-pay/implementation/

プランニング - Apple Pay
Apple Payを使用すると、ユーザーがアプリやWebサイトで商品やサービスの購入を簡単かつ安全に行うことができます。
Appleウォレットの概要 - Apple Developer
チケット、ギフトカード、クーポンなどの一元管理を可能にする、ウォレットアプリ用パスの作成に役立つ、プレゼンテーション、ドキュメント、開発用リソースを紹介します。
アプリ内課金 - Apple Developer
アプリ内課金とStoreKitフレームワークを利用して、プレミアムコンテンツ、バーチャル商品、サブスクリプションなどのアイテムをアプリ内で販売する方法についてご紹介します。
Apple Pay on the Web | Apple Developer Documentation
Support Apple Pay on your website with JavaScript-based APIs.
What’s new in Wallet and Apple Pay - WWDC22 - Videos - Apple Developer
Discover the latest updates to Wallet & Apple Pay. We'll show you how to support Orders in Wallet for your apps and websites and securely...

Passカードの作成方法

  • Passはアプリ、メール、Webのいずれかで配信する事ができる
  • Passは作成できるスタイルが5種類あり(上記の”作成できるPassについて”を参照)選択したスタイルに応じて、パスの外観および対象となる時間枠や位置情報の適用範囲を含む表示内容が自動的に決まる
  • Passの開発にはPassKitを利用する(後にわかった事ですが、Pass自体はJSONで作成します)
  • 作成したPassをWalletで管理するにはApple Developerアカウントに関連付けられている証明書でパスに署名する必要があり、証明書がないとWalletでPassを認証する事ができない(つまりWalletに入れる事ができない)
  • Passの使用方法としてバーコードとNCFがあるがNFC対応のPassを作成するにはNFC 証明書のリクエストが必要

Step1:サンプルパスを入手する

以下のリンクから、パスを作る上での最低限のサンプルでーたをDLできます。WalletCompanionFilesというフォルダに必要なファイルが一式DLできますので、このデータを使って自分好みにカスタマイズしていくことになります。

Step2:サンプルパスを変更する。

ダウンロードしたサンプルパスを使って、以下工程を満たして、パスを作成します。この流れを通して、パスを作ることになります。

サンプルパスには、乗車券、クーポン券、メンバー証など複数のサンプルが入っていますので、自分が作りたいパスをベースにファイルを修正します。

  1. 証明書の作成
  2. .passファイル作成
  3. signpass取得
  4. Passの生成

証明書の作成

Apple Developerサイト(App Store Connect)にある「証明書、ID、プロファイル」の証明書に行き証明書を作ります。Pass IDを作成して、どのIDを使うのかを定義します。

Appの開発、テスト、配信に必要な証明書、ID、プロファイル、デバイスを管理できます。

  • 証明書<span class="loc-en-only"></span>“><a rel=証明書

証明書のPass Type のidentifierを作成します。

Pass Type IDsを選択します。

適切な説明とxCodeアプリのIDを登録します。

.passファイル作成

サンプルから取得したパスを編集します。

ファイル内にあるpass.jsonを開きpassTypeIdentifierに先ほど作成したIdentifierを、teamIdentifierにはTeam IDを入力します。

ここで、必要となる情報をJSONで変更します。

signpass取得

Macより、自分のメールアドレスを選択して、必要な証明書を作成します。この時に自分のMac PCを使って証明書を作ります。

このタイミングで生成した、証明書を、App Store Connectに登録して準備完了です。

Passの生成

./signpass -p Coupon.passを実行する。

Apple Wallet パスサーバーリファレンス実装方法を使って会員証などの集客ツールを作成する

Passをカスタマイズしてみよう

カラーコードを利用して、rgbの設定を決めてみよう。

Apple Walletに入れるPassの種類を意識してアプリに入れる好みの会員証を作る

アプリの会員証を作りたいと思います。

アプリを入れて、常に使ってくれている人に対して、アプリ会員証用意し、アプリ会員証を購入してくれた人を優遇することは、とても自然なことではないでしょうか?では、どのような会員証を作ると皆さんに喜んでもらえるのか考えてみましょう。

イメージとしては、Appleで紹介されている、学生証のイメージが良いのではないかと思いました。

私が開発しているアプリケーションは、アプリ内ポイントを使っていることもあり、また、個人個人をしっかりと判断するようにして、地域のクーポンを受け取ったりすることを想定しているからです。

学生証の内容について、どのように組み込めば良いかを考えていきましょう。

エクスプレスモードについて詳しくは、こちらの記事を参照してください。

iPhone や Apple Watch の Apple ウォレットに学生証を追加する
iPhone や Apple Watch を使って、学生寮、図書館、キャンパス内のイベント会場といった場所に出入りできます。また、キャンパス周辺のコインランドリーや食堂、軽食の支払いにも使えます。

Apple Walletの学生証@Passをイメージしたパスを作成する。

Apple Walletのパスの作り方はイメージができるようになりました。

Jsonファイルを修正し、画像データを用意することで、あらかじめ決められた構造でWalletのパスを作ることができます。

学生寮や図書館への出入り、学生食堂での飲食代の支払い、購買部での書籍や日用品の支払いなど、実物の学生証を使える場所ならどこでも、iPhone や Apple Watch 上の学生証を使えます。

学生証を Apple ウォレットに追加すると自動的にエクスプレスモードがオンになるので、ワンタップで学生証を使えるようになります。デバイスのスリープやロックを解除する必要はなく、Face ID、Touch ID、またはパスコードでの認証も不要です。デバイスを非接触型リーダーの近くにかざすだけで使えます。

https://support.apple.com/ja-jp/HT208965

・アプリ内のアイテムを購入したPassを表示させる。

【検討ポイント】

一度購入したらずっと使えるアプリ会員証にするのか、2023年度など1年間に区切ったものにするのか。

 →StandardとProを作って、Standardは常に表示できるようにする。Proは、期限付きで表示できるようにする。

・学生証の特徴上、会員証を紛失したときや、学生としての身分では無くなった時に有効期限が消える、iPhone で学生証アカウントに残高を入れて対応することができるなど、地域のアプリとして会員証を作ることができれば、限られた人に対してサービスを提供することができるようになります。

Building a Pass | Apple Developer Documentation
Build a distributable pass.
Apple adds support for contactless student ID cards in Wallet
Starting today, students at three universities can now enjoy the convenience of using just their iPhone and Apple Watch to get around on and off campus.

このような形で、アプリのメンバーカードを表示させるということを目指しています。

コメント