🎫
【iOS】WalletのPassを作成してみた

2024/12/23に公開
これはGMOペパボ エンジニア Advent Calendar 2024の23日目の記事です。

22日目はhikariさんの産休育休からフルタイムで復帰した1年目をふりかえるでした！

 はじめにこんにちは。

GMOペパボ minne事業部のiOSエンジニアのsattonです。(ニックネーム)
早いもので、入社&iOSエンジニアになって4ヶ月が経ちました。

今日は、ずっと気になっていたWalletのPass(航空券やチケットなど)の作成方法について簡単に紹介します。

 Walletとはウォレットは、iPhoneとApple Watchで使えるアプリです。クレジットカードなどのカード、Suica、PASMO、ICOCA、搭乗券、チケット、車のキー、ポイントカードなど、すべてを一つの場所で安全かつ便利に管理できます。

ウォレット - Apple（日本）

 Passとは皆さんもよく使っている思いますが、これです🎫

https://support.apple.com/ja-jp/guide/iphone/iphe7aa3336/ios

 作成の流れドキュメントに沿って、サンプルクーポンの表示までをやっていきます。

https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/PassKit_PG/YourFirst.html
新しくフォルダ(.pass)を作成
Pass Type Identifierと証明書の生成
Pass Type IdentierとTeam IDを設定
ターミナルでコマンド実行

 1.新しくフォルダ(.pass)を作成1.拡張子.passで新しくフォルダを作成します

(今回はDcuments(書類)で作業をします)
2.developer downloads areaから、サンプルのPassをダウンロードします

WalletCompanionFilesから「Sample Passes」ディレクトリ内のCupon.passを探し、Cupon.passの中身を丸ごとLolipop.passの中身にコピーします。

 2.Pass Type Identifierと証明書の生成Pass Type IDを登録するとPass Type ID証明書を作成するの手順に沿って、証明書の設定を行います。

https://developer.apple.com/jp/help/account/configure-app-capabilities/create-wallet-identifiers-and-certificates/
!「証明書は信頼されていません」と表示された時に確認したこと
１.証明書をダブルクリック→信頼から「この証明書を使用するとき:常に信頼」とする

(自分の場合はこれで解決できず...)



2.中間証明書を用意する
certificate - "Warning: unable to build chain to self-signed root for signer" warning in Xcode 9.2 - Stack Overflow
WWDR中間証明書 - リファレンス - アカウント - ヘルプ - Apple Developer
Apple PKI - Apple から証明書をダウンロードできます
(これでも解決できず...)
3.中間証明書を「システム」に置く　（⭐️解決した）


 3.Pass Type IdentierとTeam IDを設定するLollipop.passフォルダにある、pass.jsonを開きます。

passTypeIdentifierとteamIdentifierをご自身のものに置き換えます。
{
  "formatVersion" : 1,
  "passTypeIdentifier" : "your pass type identifier", //ここを書き換える
  "serialNumber" : "E5982H-I2",
  "teamIdentifier" : "your Team ID", //ここを書き換える
  "webServiceURL" : "https://example.com/passes/",
  "authenticationToken" : "vxwxd7J8AlNNFPS8k0a0FfUFtq0ewzFdc",
  "barcode" : {
    "message" : "123456789",
    "format" : "PKBarcodeFormatPDF417",
    "messageEncoding" : "iso-8859-1"
  },
  "locations" : [
    {
      "longitude" : -122.3748889,
      "latitude" : 37.6189722
    },
    {
      "longitude" : -122.03118,
      "latitude" : 37.33182
    }
  ],
  "organizationName" : "Paw Planet",
  "description" : "Paw Planet Coupon",
  "logoText" : "Paw Planet",
  "foregroundColor" : "rgb(255, 255, 255)",
  "backgroundColor" : "rgb(206, 140, 53)",
  "coupon" : {
    "primaryFields" : [
      {
        "key" : "offer",
        "label" : "Any premium dog food",
        "value" : "20% off"
      }
    ],
    "auxiliaryFields" : [
      {
        "key" : "expires",
        "label" : "EXPIRES",
        "value" : "2013-04-24T10:00-05:00",
        "isRelative" : true,
        "dateStyle" : "PKDateStyleShort"
      }
    ]
  }
}

!チームIDはこちらから確認できます


 4.ターミナルでコマンド実行WalletCompaionFiles > signpassからsignpass.xcodeprojをダブルクリックして、Xcodeを立ち上げます
ビルドしたらProduct > Show Build Folder in Finderをクリックします


Products > Debugの中にある、signpassをDocumentsにコピーします





~/Documents >./signpass -p Lollipop.pass を実行

パスワードを入力し、「常に許可」をクリックする


Lollipop.pkpassが生成されました

このファイルをダブルクリックするとクーポンが表示されます

また、ウォレットに追加をクリックすると、実機で確認できます！





 Passの種類Passの種類はBoarding pass、Coupon、Event ticket、Generic、Sore Cardがあり、Passによってレイアウトが異なります。
https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/PassKit_PG/Creating.html#//apple_ref/doc/uid/TP40012195-CH4-SW1
iPhoneとApple Watchで表示される情報量が異なるため、その点も注意しないといけないみたいです。
例えば、iPhoneであればパス上のすべての画像が表示されますが、Apple Watch上のパスにはそのうちの一部の画像しか表示されません（ガイダンスは、Apple Watch向けのパスを参照してください）。一部のデバイスで表示されないことがある要素には重要な情報を入れないでください。また、例えばwatchOSでは画像の白い領域が切り取られることがあるので、画像にパディングを追加することも控えましょう。
https://developer.apple.com/jp/design/human-interface-guidelines/wallet

 Event Ticketを触ってみたちょっとPassのことが分かってきたところで、自分で作ってみることにしました。

この時期なので、忘年会のチケット風にしました💁

!logoやthumbnailのサイズに注意しないと、うまく生成できました。

画像サイズの詳細はこちら
コード{
  "formatVersion": 1,
  "passTypeIdentifier": "",
  "serialNumber": "123456",
  "teamIdentifier": "",
  "backgroundColor": "rgb(255,255,255)",
  "foregroundColor": "rgb(0,0,0)",
  "labelColor": "rgb(65,105,225)",
  "organizationName": "Example Organization",
  "description": "大忘年会チケット",
  "logoText": "大忘年会",
  "barcode": {
    "format": "PKBarcodeFormatQR",
    "message": "https://example.com",
    "messageEncoding": "iso-8859-1"
  },
  "eventTicket": {
    "transitType": "PKTransitTypeGeneric",
    "headerFields": [
      {
        "key": "header",
        "label": "氏名",
        "value": "佐藤 駿"
      }
    ],
    "primaryFields": [
      {
        "key": "primary",
        "label": "座席",
        "value": "15A"
      }
    ],
    "secondaryFields": [
      {
        "key": "secondary",
        "label": "日時",
        "value": "2024-12-31"
      },
      {
        "key": "secondary",
        "label": "入場口",
        "value": "6番ゲート"
      }
    ],
    "auxiliaryFields": [
      {
        "key": "auxiliary",
        "label": "",
        "value": "今年も大忘年会を開催することになりました！"
      }
    ],
    "backFields": [
      {
        "key": "info1",
        "label": "イベント名",
        "value": "大忘年会"
      },
      {
        "key": "info2",
        "label": "注意事項",
        "value": "飲み物の持ち込みは禁止です。"
      },
      {
        "key": "info3",
        "label": "お問い合わせ",
        "value": "info@example.com"
      },
      {
        "key": "info4",
        "label": "アクセス",
        "value": "東京都渋谷区x-x-x ◯丁目 居酒屋HOGE\n電話番号: xxx - xxxx- xxx\n営業時間: 18:00 - 3:00\n年末は大変混み合います。ご予約の上、ご来店お願いします。\n未成年者の飲酒は固くお断りします。"
      }
    ]
  },
  "images": {
    "icon": "icon.png",
    "logo": "logo.png",
    "thumbnail": "thumbnail.png"
  }
}
WalletCompanionFilesに各Passのファイルがあるので色々試せます！

 まとめ普段何気なく利用しているPassに触れてみて、その仕組みが分かって面白かったです。

次はPassの配布やアップデートができるような、一つのアプリを作ってみようかなと思います。

次回は、yagijinさんです！

https://adventar.org/calendars/10036
それでは良いお年を〜🐍