Passbook lecture

• OS X10.7~が必要、できれば10.8

• iOS 6のiPhone/iPod touch

準備すること

• パスの表示や管理を行う

• パス

• 搭乗券

• クーポン

• 会員カード

• 切符など

• 物理的な「券」をデジタル表現したもの

Passbook

Passbookで、できること/できないこと

• できること• パスを表示する• パスをアップデートする• パスと関連のある場所、時間に通知する• アプリと連携する

Passbookで、できること/できないこと

• できないこと

• パスを読み取る（レジは別途必要です）*光学式が必要

• おさいふケータイとは違います（非接触ICとは違う）

• エコシステムの設計は開発者にゆだねられる

• できるのはあくまでも、ID/ステータスの表示/パスのアップデート

• サーバとの連携が不可欠

• 重複発行/不正対策

作り方とりあえず使う&作ってみよう

Try!

・iOS Simulator・Mail・iCloud

Passの中身

Pass.raw

Digital Sign

• 発行するすべてのパスにはデジタル署名が必要• デジタル署名に必要な証明書(Certificate)は

iOS Provisioning Portalで発行する

Passへのデジタル署名 1

• Open SSLを使って署名する

• 面倒なので、ツールを使う• signpassをビルド

Passへのデジタル署名2

• 署名に使う証明書のPass IDとPassのPass ID, Team Identifierは一致する必要がある。

"passTypeIdentifier" : "pass.com.bayroast.store-card",

"serialNumber" : "p69f2J",

"teamIdentifier" : "A1B2C3D4E5",

pass.json

"passTypeIdentifier" : "pass.li.noli.passdemo.matilde1",


"teamIdentifier" : "QSGNK36NJA",

signpassで署名

KamiyaMBP2009Mid:~ nori$ signpass -p /Users/nori/Documents/Passbook\ Lecture/Materials/StoreCard_demo.raw 2012-12-20 11:59:25.268 signpass[3012:707] { "icon.png" = 6b15fa477ece83fdd4f544a2381444272a0e39a0; "[email protected]" = 68b61c27657a0018da71c7f73626c8a891da753c; "logo.png" = 500e7c253cbbbb18c7e3391a70e789ee18738a3e; "[email protected]" = be05408e1053101b829c211aaf50c9cb1b49e70f; "pass.json" = ccb404ec43cbc346f77fbee2057c3e242bcc9141; "strip.png" = 507b870eed04ed07169be4425e0abd0e27b28635; "[email protected]" = 80ce76017af568597888f97e30a9b5d05b18830a;}KamiyaMBP2009Mid:~ nori$

オリジナルのPassを作る大まかな作業の流れ

• Pass Identifierの入力 / Team IDの入力

• テンプレートの選択• 表示内容を記述• 画像、背景色などを調整• 関連する位置情報、時間情報の追加

JavaScript Object Notation

• Array

["milk", "bread", "eggs"]

• Dictionary

{"name": "John Smith", "age": 33}

{"key1": "Value", "key2": Value}

Passへのデジタル署名

• 署名に使う証明書のPass IDとPassのPass ID, Team Identifierは一致する必要がある。

"passTypeIdentifier" : "pass.com.bayroast.store-card",


"teamIdentifier" : "A1B2C3D4E5",

pass.json

"passTypeIdentifier" : "pass.li.noli.passdemo.matilde1",


"teamIdentifier" : "QSGNK36NJA",

Pass Type

BoardingPass

Coupon

Event Ticket

Generic

Store Card

Barcode

• PKBarcodeFormatQR

• PKBarcodeFormatPDF417

• PKBarcodeFormatAztec

QR PDF417 Aztec

• できるだけ、紙の「券」を再現しない。新しいものとして考える。

• 簡素ですっきりとしたものを心がける。

• パスの前面に表示する情報は厳選する

• 必要に応じて読めばいいものは非表示にする。

• 企業名はロゴのテキスト欄に表示する

• 企業ロゴは白

• ドロップシャドウ... オフセット1pt, ぼかし1pt, 不透明度35%, 黒

Passbook Design Guideline


• 単なる真っ白の背景はさける• 鮮やかな色の無地、明るく刺激的な色合いが好まれる？

• 企業のイメージに合わせて。• ただし、読みにくくならないように！

• できれば横長のバーコードを使う... PDF417形式は相性が悪いかも。


• パスに表示するテキストはすべて指定されたテキスト欄に入れること。

• 独自のフォントや画像埋め込みはしない。• アクセシビリティ、外見の一貫性

• Xcodeのコンソールを使いましょう. 開発機ならログが見えます。

• テスト環境でHTTPSを使わない場合は設定で変更できます。

デバッグについて

参考資料

• Passbook for Developers

https://developer.apple.com/passbook/

• Introducing Passbook, Part 1

https://developer.apple.com/videos/wwdc/2012/?id=301

• Introducing Passbook, Part 2https://developer.apple.com/videos/wwdc/2012/?id=309

• Passbook プログラミングガイド

https://developer.apple.com/jp/devcenter/ios/library/documentation/PassKit_PG.pdf

• iOS 6 Programming Cookbook

http://shop.oreilly.com/product/0636920027683.do

Technology

Passbook lecture