NRIネットコム社員が様々な視点で、日々の気づきやナレッジを発信するメディアです

注目のタグ

    Apple WalletやPassについて調査し、Passを作ってみた

    概要

    今回は以前から気になっていたApple WalletやPassについて調査しつつ、実際にPassを作成してみたのでその知見と作成手順を紹介したいと思います。
    この記事は調査編と作成編の2部構成になっていますので必要な部分から読み始めていただければと思います!(もちろん上から順に読んでもらっても問題ないです!)

    Apple WalletやPassについて調査編

    まず筆者のApple Walletに関する調査前の知見は

    • クレジットカードなど管理し、NFC経由で支払い処理や認証(モバイルSuicaで駅のゲートなど)として使用できる
    • お店や空港などで使用できるQRコード付きのクーポンやチケットを管理、使用する事ができる

    ぐらいなのでそこから

    • そもそもWalletとPassの違いは?
    • Passでは何ができるの?
    • Passは自分でも作れるの?

    を今回の調査で理解できるように目標設定して調査していきたいと思います!

    WalletとPassの違い

    おおよそWalletはPassを管理する箱のようなもので、開発を行いたい場合はPassを作成していく感じなのかなと思いますが、一旦公式のページを見ていきたいと思います。
    (※公式のHPではAppleウォレット、Apple Walletとどちらでも表記されていますがWalletの部分を翻訳して表記しているだけのようなのでこの記事では統一してWalletと表記させていただきます)

    developer.apple.com

    Apple WalletではPassを管理して使用する事ができるようです。
    作成できるPassについては

    • 搭乗券
    • クーポン券
    • イベントのチケット
    • 店舗カード
    • その他の一般的なパス

    に沿ったPassが作成できるようで使用できるデバイスとしては

    • iPhone
    • iPod touch
    • Apple Watch

    の3つが挙げられており(iPodは現在生産は終了しています)、位置情報に応じて、適切なパスを表示することもできるそうです。
    昨今GPSの精度もどんどん良くなってきているので空港に着いたら自動的にPassが表示されて、入口付近で読み取り、適切な搭乗口までARで案内する・・・みたいなことができるのかな?
    と想像するだけでワクワクしてきます!(そんな仕事があれば是非携わりたいなと思っていますので是非ご依頼を!)
    自分ではQUICPayやID対応のクレジットカードに加えてSuicaの管理、使用をしていますが、それ以外で使用した事がなかったので調べてみるといろんな使い方がある事がわかりました!
    あらゆるものがデジタルに置き換わり、物理的なものが減るだけで恩恵が受けられますが、デジタルで適切に管理、運用する事でセキュリティ的な観点でも高まると思いました!
    調べれば調べるほど、チケットやクーポンなど、あらゆる認証を行うものはデジタルに置き換える未来が見えてきます!

    すこし脱線しましたがこれでWalletとPassの違いについてWalletはPassを管理しているもので、クーポンやチケットなど作成したい場合はPassを作成する必要がある事がわかりました!

    Passでできること

    ではPassでできる事について調査してみたいと思います。
    Walletのページに以下の画像があるように、認証として機能する部分はQRコードとNFCの2種類のようです。
    ただNFC対応のPassを作るにはかなりハードルが高いことが後々わかりました。
    (NFC対応Passについては今後の別記事でまとめて出します)

    QRコードを利用した搭乗チケットサンプル

    NFCを利用したアパレル店で使用できる割引クーポン券のサンプル

    またPassについてはApple Walletの概要にまとめられていました。

    developer.apple.com

    こちらを見る限り

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

    である事がわかりました。
    だいたいできる事がわかってきた+Passは作成できる!まで理解できたので次はいよいよ作成してみたいと思います。

    Passの作成編

    ここからいよいよPassの作成方法を紹介したいと思いますが、結論から言うと以下のリンクを見てその通りに作成すればとりあえずPassの作成手順を理解する事ができます。
    しかしこの記事にあたるまでに非常に時間を費やしたので、今後自分のように迷走する人がいなくなればという強い思いを込めて以下リンク貼っておきます。
    また公式の手順書はあるものの英語+わかり辛い部分もあるなと感じましたので実際にPass作成する手順を私なりの表現で紹介したいと思います。

    developer.apple.com

    Pass作成のおおまかな流れ

    流れとして以下工程を満たせば作成できます。

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

    こんな感じです!

    イメージとしては証明書周りを作成、ダウンロードし、.pass内にアイコンやJSONファイルなどを格納し、signpassを使用してPassを生成する感じです!
    それぞれの説明は以下で行うので今はぼんやりと”へーそうなんだー”ぐらいで問題ないです。

    証明書周り作成

    Certificates, Identifiers & ProfilesよりPass Type のidentifierを作成します。

    identifier横の+を選択

    Pass Type IDsを選択

    作成する際にDescriptionにはPassの簡単な説明を記入し、Identifierには”pass.”で始まるユニークな値を記入します。(例:pass.com.example.appname)

    続いてパスの証明書を作成します。

    Certificates横の+を選択

    Pass Type ID Certificateを選択

    Enter your Pass certificate Nameには適用な証明書の名前を記入しPass Type IDで上記で作成したidentifierを選択

    最後に証明書署名リクエスト(CSR)をアップロードするように要求されます。

    CSRの作成手順はこちらを参考に作成します。

    CSRを作成してアップロードします

    メールアドレス、通称を記載し「ディスクに保存」を選択

    これでCSRの作成は完了です。
    先ほどの画面にてCSRをアップロードしてパスの証明書をダウンロードします。

    こちらのファイルをダウンロードしたらpass.cerファイルをダブルクリックします。
    すると以下のように許可を求めてきますので、パスワードを入力して常に許可を選択します。

    これで証明書周りは終了です。

    passファイル作成

    続いて拡張子を.passにしたディレクトリを作成します。
    Wallet Developer GuideではDocumentsに作成して手順を進めていますが管理しやすい場所であればどこで作成しても問題ないです。

    ディレクトリ名は自由につけて問題ないです

    続いて開発者ダウンロード エリアからダウンロードし、Sample Passes ディレクトリでクーポンを探します。

    ダウンロードして解凍した様子

    解凍したファイルの中に5種類のPassのサンプルが入っており、クーポンを選択

    クーポンフォルダにあるファイルを全て選択し、先ほど作成したディレクトリに移動します。

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

    ここに自分のTeam IDが記載されています

    以上です。

    signpass取得

    上記でダウンロードしたWalletCompanionFiles内にsignpassフォルダがあるのでその中のsignpass.xcodeprojよりXcodeを開きます。

    開いたらビルドをして、ProductにあるShow Build Folder in Finderを選択します。

    するとフォルダを開くのでProduct内のDebug内からsignpassを取り出して.passファイルと同じディレクトリ内に配置します。

    全てデスクトップに配置するとこんな感じになります

    Passの生成

    これでようやくPassを作成する準備ができたのでターミナルを起動して.passファイルなどがあるディレクトリに移動して以下コマンドを叩きます。

    ./signpass -p SamplePassCard.pass

    ※SamplePassCard.passに関しては適時自分でつけたディレクトリ名に変更してください。
    するとSamplePassCard.pkpassというファイルが生成されたかと思います。

    生成されたファイルを開くとPassが開くと思います。

    これでPassの作成ができました。
    後はJSONの中身を変更して自分好みにカスタマイズしてくと意図したPassが作れるようになると思います!
    以下簡単ではありますがGeneric.passを少し編集して自分のビジネスカードっぽいPassを作成してみました!
    (JSONの中身の解説と意図したPassの作成方法は別途記事で出しますので良ければそちらも見てください)

    最後に

    いかがでしたでしょうか?
    証明書周りが少し面倒に感じたかもしれませんが実際やってみるとそんなこともないので是非チャレンジしてみてください。

    執筆者岡優志

    iOSエンジニア
    iOSを専門とし、モバイルアプリの開発を行なっています。

    Twitter