iOS6 Passbookのパス作成

#iOS

#iPhone

takaya.yuko

2012.10.02

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

iOS6で登場したPassbook用のパスの作成について調べてみました。
作成したpkpassファイルはメールで添付したり、Webサイトでダウンロードさせることで配布することができます。
Passbook Programming Guideを参考にしています。

パッケージの作成

パスの作成に必要なファイル一式をまとめるフォルダを作成して、ファイルを追加します。

パッケージの作成

フォルダを作成します。拡張子は、 .passにすることが推奨されています。

サンプルパスとツールの取得

Passbook Support Materialsからファイルをダウンロードします。
/Passess以下にサンプルのパスがいくつかあります。
/signpassには、パス作成用のコマンドラインツールが含まれています。

pass.jsonのコピー

サンプルのパスの中から一つを選び、pass.jsonファイルを作成したフォルダにコピーします。
今回は/Coupon.rawのpass.jasonを選択しました。

パス作成に必要な設定

パスの作成にあたって必要な設定をします。

PassTypeIDの作成

iOS Provisioning Portalで、Pass Type IDを作成します。
キーチェーンアクセスで作成した証明書要求のファイルを作成して、アップロードします。

キーチェインアクセスへ証明書の追加

作成したPass Type IDの設定で、証明書をダウンロードします。
ダウンロードした証明書をキーチェーンアクセスに追加します。
pass.jsonに設定するので、証明書の情報を表示しておきます。

pass.jsonの編集

パスの情報の設定は、pass.jsonに行います。

基本の設定

証明書の情報を設定していきます。

passTypeIdentifierにユーザーIDを設定します。
teamIdentifierに部署を設定します。
organizationNameに組織を設定します。

その他の基本設定をします。

descriptionにクーポンの説明を設定します。
logoTextには、ヘッダーに表示される文字を設定します。

テンプレートの選択と設定

パスには5種類のテンプレートがあり、レイアウトや枠の罫線などが決まっています。
テンプレートの追加はできず、カスタマイズできない部分もあるので注意が必要です。
選択したテンプレートを、トップレベルの要素に設定します。
今回は、couponを選択しました。

primaryFieldsはパスのコンテンツの一番目立つフィールドです。クーポンの説明などを設定します。
auxiliaryFieldsはコンテンツの真ん中に少し小さく表示されるフィールドです。今回は期限の内容を設定しました。
backFieldsは追加の情報で、パスのinfoボタンを押した時に表示されます。今回はURLや電話番号を設定しました。

デザインの設定

ロゴや背景色、文字色などは設定ができます。

ロゴは、logo.pngと言うファイル名で作成したフォルダーの直下に画像を保存します。
アイコンは、icon.pngと言うファイル名で保存します。
backgroundColorには背景色を指定します。
foregroundColorには文字色を指定します。
labelColorに設定した色は、各フィールドのlabelに設定した文字の色になります。

ロケーションの設定

パスを登録したユーザーがある場所に近づいた時や、ある日時になった時にパスの情報が表示されるように設定をします。
今回は位置情報を設定しました。
選択したテンプレートによって、反応する設定した位置情報からの範囲が決められているようです。
位置情報は10個まで設定できるようです。

locationsに経度と緯度を設定します。

作成したファイル

今回作成したファイルです。

	{
	  "formatVersion" : 1,
	  "passTypeIdentifier" : "pass.jp.classmethod.test",
	  "serialNumber" : "1",
	  "teamIdentifier" : "<部署>",
	  "organizationName" : "<組織>",
	  "description" : "Coupon for Test at Classmethod",
	  "logoText" : "Classmethod",
	  "foregroundColor" : "rgb(255, 255, 255)",
	  "backgroundColor" : "rgb(0, 51, 102)",
	  "labelColor" : "rgb(204, 255, 255)",
	  "coupon" : {
	    "primaryFields" : [
	      {
	        "key" : "offer",
	        "label" : "テスト用のクーポンです。",
	        "value" : "テスト用"
	      }
	    ],
	    "auxiliaryFields" : [
	      {
	        "key" : "expires",
	        "label" : "期限",
	        "value" : "2012年12月31日まで"
	      }
	    ],
	    "backFields" : [
	      {
	         "key" : "website",
	         "label" : "web site",
	         "value" : "http://classmethod.jp"
	      },
	      {
	         "key" : "tel",
	         "label" : "TEL",
	         "value" : "03-6853-8855"
	      }
	    ]
	  },
	  "barcode" : {
	    "message" : "1234 5678 910",
	    "format" : "PKBarcodeFormatPDF417",
	    "messageEncoding" : "iso-8859-1"
	  },
	  "locations" : [
	    {
	      "longitude" : 35.697257,
	      "latitude" : 139.774736
	    }
	  ]

その他の詳細はPass Design and Creationを確認してください。