node.jsでPassbookサーバをつくってみる(1)

久しぶりにLabブログの更新です。
気付いたら、ずいぶん更新ができてなかったのでこれを機会にBlogのデザインも一新し、また新たな気持ちで続けられればと思っています。

今回はiOS6の新機能として追加されたPassbookについて実際にサーバを作ってみて、どのような作り込みが必要かを3回くらいに分けて説明します。

Passbookはすでに使われているかたもいらっしゃると思いますが、iOS6から導入されたサービスで会員証やクーポン、飛行機の搭乗券などを比較的簡単な仕組みで実現できるサービスです。
TechfirmでもANA様のPassbookを使ったサービスをお手伝いさせて頂きました。(http://www.techfirm.co.jp/case/ana_passbook.html)

Passbookでできること自体はFeliCa搭載ケータイが主流になってる日本では既に実現できていることが多いんですが、やはりiPhoneの標準サービスで提供されたということが大きいです。
これまでタダの見せるクーポンや見せる会員証だったものが、Passbookというだけでなんとなく新しいモノに見えてしまうのはApple様々です(笑)。

Passbookで何ができるかはAppleさんのページやいろんな会社さんがやってるサービスを見て頂くとして、今回は一番簡単そうな会員証サービスを作ってみたいと思います。
とりあえず、Xcodeと適当なエディタのインストール、あとは Passbook for Developers にある資料をさらっと読んでおくと後がラクです。

それでは始めてみましょう。
まず、何はともあれPassbookに表示されるPassをデザインする必要があります。
Passのデザインは5種類のスタイルの中から選びます。どのようなスタイルがあるかはPassbook for Developersにある「Getting Started with Passbook on iOS 6」を見てください。ちなみにこれら以外のスタイルは今のところないので、デザインの余地は限られています。

今回は会員証なので、Genericスタイルを使ってデザインを組み立てます。
会員証に必要な要素は「会員番号」「会員氏名」「 QRコード」「有効期限」「注意事項」などなど…項目を挙げていけばキリがないですのでここらへんで。

passのデザイン要素は限られており、「表示項目位置の調整」「ロゴ、アイコンの設定」「文字色・背景色の設定」くらいしかできません。
これらの組み合わせでデザインをつくっていきます。
今回は以下のようなデザインで会員証を作りました。

pass前面

Passの表示内容はJSONでファイルを作成し、設定します。設定できる内容やバーコードの種類などは「Passbook Package Format Reference」に記載されていますので確認してください。
なお、上記の会員証を表示するためのJSONファイルは以下のようなファイルとなります。

{
  "formatVersion" : 1,
  "passTypeIdentifier" : "pass.techfirm.co.jp.tetsuo",
  "serialNumber" : "8j23fm3",
  "webServiceURL" : "https://example.com/passes/",
  "authenticationToken" : "dummyfasfhauefhwiefhaso",
  "teamIdentifier" : "J5FJ25DJHS",
  "barcode" : {
    "altText": "1234567890",
    "message" : "1234567890",
    "format" : "PKBarcodeFormatQR",
    "messageEncoding" : "iso-8859-1"
  },
  "organizationName" : "Techfirm Denki.",
  "description" : "Membership card",
  "logoText" : "",
  "foregroundColor" : "rgb(0, 0, 0)",
  "backgroundColor" : "rgb(255, 255, 255)",
  "generic" : {
    "primaryFields" : [
      {
        "key" : "member_name",
        "label" : "お客様名",
        "value" : "山田 山田男 様"
      }
    ],
    "secondaryFields" : [
      {
        "key" : "member_id",
        "label" : "会員番号",
        "value" : "1234567890"
      },
      {
        "key" : "subtitle",
        "label" : "有効期限",
        "value" : "2013/12/25"
      }
    ],
    "backFields" : [
      {
        "label" : "注意事項",
        "key" : "message",
        "value" : "会員証は他人に貸したりしないでね!!\n会員証なくしたらサポートセンターに電話してね!!"
      }
    ]
  }
}

上記内容でJSONファイルを作ることで先程の会員証が端末で表示されるようになります。各フィールドにどのような値を設定するかは、次回サーバの実装のときにまとめて説明しますのでちょっとお待ちを。

とりあえず、今回は会員証の表示内容(pass.json)は作成しました。あとはロゴやアイコンファイル(logo.png, icon.png)を準備することで、Passの表示に必要なファイルは揃います。
次回は3つのファイルを使って、サーバ側で実際にPassを生成し、端末でダウンロードできるところまでを説明したいと思います。

tetsuo

tetsuo の紹介

こう見えてテックファームの開発チームのえらい人。
カテゴリー: iOS タグ: , , , パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です