Passbook lecture

準備すること

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

• iOS 6のiPhone/iPod touch

Passbook

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

• パス

• 搭乗券

• クーポン

• 会員カード

• 切符など

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

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

• できること

• パスを表示する

• パスをアップデートする

• パスと関連のある場所、時間に通知する

• アプリと連携する

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

• できないこと

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

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

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

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

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

• 重複発行/不正対策

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

Try!

・iOS Simulator
・Mail
・iCloud

Digital Sign

• 発行するすべてのパスにはデジタル署名が必要

• デジタル署名に必要な証明書(Certiﬁcate)は

iOS Provisioning Portalで発行する

Passへのデジタル署名 1

• Open SSLを使って署名する

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

• signpassをビルド

Passへのデジタル署名2

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

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

"serialNumber" : "p69f2J",

"teamIdentifier" : "A1B2C3D4E5",

"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;
"icon@2x.png" = 68b61c27657a0018da71c7f73626c8a891da753c;
"logo.png" = 500e7c253cbbbb18c7e3391a70e789ee18738a3e;
"logo@2x.png" = be05408e1053101b829c211aaf50c9cb1b49e70f;
"pass.json" = ccb404ec43cbc346f77fbee2057c3e242bcc9141;
"strip.png" = 507b870eed04ed07169be4425e0abd0e27b28635;
"strip@2x.png" = 80ce76017af568597888f97e30a9b5d05b18830a;
}
KamiyaMBP2009Mid:~ nori$

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

• Pass Identiﬁerの入力 / 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
Identiﬁerは一致する必要がある。

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


"teamIdentifier" : "A1B2C3D4E5",

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


"teamIdentifier" : "QSGNK36NJA",

Barcode

• PKBarcodeFormatQR

• PKBarcodeFormatPDF417

• PKBarcodeFormatAztec

QR PDF417 Aztec

Passbook Design Guideline

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

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

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

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

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

• 企業ロゴは白

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


• 単なる真っ白の背景はさける

• 鮮やかな色の無地、明るく刺激的な色合いが好まれ
る？

• 企業のイメージに合わせて。

• ただし、読みにくくならないように！

• できれば横長のバーコードを使う... 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 2
https://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

Passbook lecture

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (7)

Featured

Featured (20)

Passbook lecture