[iOS8]クレジットカード読み取りに対応したフォームの作り方

##はじめに
###クレジットカードのスキャン機能が超便利！
iOS 8ではSafariの機能が改善され、クレジットカードをカメラでスキャンするだけで、カード情報が自動で入力されるようになりました。面倒な数字の羅列の入力も、カメラをかざすだけで完了です。

###実装したいけど情報が少ない・・・
この新機能に対応した入力フォームを作ろうと思ったのですが、ググってみると意外と情報が少なかったのでまとめてみました。

##スキャンで自動入力可能な情報

• カード番号（14〜20桁の数字）
• 有効期限（月/年）
• カードの種類（VISA、JCBなど）

名義人氏名は自動入力できないようです。スキャン時には文字が認識されているようなのですが。
(やり方をご存知の方がいらっしゃいましたらぜひ教えてください！)

##フォームの書き方
試行錯誤の末にようやくルールみたいなものが見えたのでまとめました。
下記、それぞれの入力フォームの記述例です。必要最低限の属性についてしか触れておりませんので、ご自由にカスタマイズお願いします。
###・カード番号

カード番号

<input name="cardNumber" type="text" size="20" maxlength="20">

inputタグ を使用し、idまたはname属性に "cardNumber" を指定します。（←重要）
※ name="addCreditCardNumber"、name="cardNumber"、name="cardnumber"でも動くようです。

type属性は"text"でOKですが、スマートフォンサイトなら手入力するユーザー向けに"tel"を指定しておくのもよいかと思います。

maxlength属性にはカード番号の最大桁数を指定します。
amazonの入力フォームでは"20"を指定していました。

###・有効期限（月）

有効期限（月）

<select name="cardExpirationMonth">
    <option value="1" selected="selected">01</option>
    <option value="2">02</option>
    <option value="3">03</option>
               〜 中略 〜
    <option value="12">12</option>
</select>

selectタグ を使用し、idまたはname属性に "cardExpirationMonth" を指定します。（←重要）

選択肢として、optionタグで"01"〜"12"を追加すればOKです。
value属性の値は任意です。valueではなくoptionタグで囲まれたテキストの方で判定されます。
テキストは"01"〜"12"、"1"〜"12"どちらでも自動選択の対象となります。

###・有効期限（年）

有効期限（年）

<select name="cardExpirationYear">
    <option value="2015" selected="selected">2015</option>
    <option value="2016">2016</option>
    <option value="2017">2017</option>
               〜 中略 〜
    <option value="2035">2035</option>
</select>

selectタグ を使用し、idまたはname属性に "cardExpirationYear" を指定します。（←重要）

選択肢として、optionタグで"2015"(今年)〜"2035"までを追加します。
amazonの入力フォームが2035年までだったので合わせています。20年後まで指定しておけば問題ないでしょう。
value属性の値は任意です。valueではなくoptionタグで囲まれたテキストの方で判定されます。
テキストは"2015"〜"2035"、"15"〜"35"どちらでも自動選択の対象となります。

###・カードの種類（VISA、JCBなど）

カードの種類

<select name="cardType">
    <option value="">クレジットカードの種類を選択</option>
    <option value="V">VISA</option>
    <option value="M">MasterCard</option>
    <option value="J">JCB</option>
    <option value="A">American Express</option>
    <option value="D">DinersClub</option>
</select>

selectタグ を使用し、idまたはname属性に "cardType" を指定します。（←重要）

選択肢として、optionタグで有名なカード5種類を追加してみました。（他にもあるのかは不明です）
value属性の値は任意です。valueではなくoptionタグで囲まれたテキストの方で判定されます。

▼ カードの種類を自動選択可能にするためのテキストの書き方
・VISA（小文字でもOK）
・MasterCard（小文字、「Master Card」(半角スペースあり)でもOK）
・JCB（小文字でもOK）
・American Express（小文字でもOK、「AmericanExpress」(半角スペースなし)はNG！）
・DinersClub（未調査）

##フォームまとめ
一通り作って動いたHTMLをGistに貼りました。
https://gist.github.com/okmr-d/fb03b43345d6fc686cb2

「カード番号」「有効期限」「カードの種類」が自動入力されます！

##注意点
①HTTPS通信時のみ機能します
HTTPS通信でページを表示している場合のみ「クレジットカードを読み取る」が表示されます。
最初、HTTPで表示していたために全く機能せず、つまずきました。

②セキュリティ面に気をつける(超初歩的なことですが)
HTTPSで通信すること。間違えてもGET送信など絶対にしないこと。

③Safariのみの機能です
現時点ではSafari（iOS8〜）だけで使用できる機能です。他アプリのWebViewには対応していません。

##参考サイト
Stack Overflow ： ios - When Scan Credit Card option is available on iOS8 Safari? - Stack Overflow
あとはamazonなど、実際にクレジットカードのスキャンに対応している入力フォームを解析しました。

##その他思うこと
他のiOSアプリでも使えるようになるといいんですけどね。(もともとネイティブアプリを作っていて、カード情報スキャンを実装したかったところから試行錯誤しはじめ、なぜかSafariでしか動かないHTMLをまとめるに至る)

Safari以外では、今のところ「card.io」のようなサードパーティ製のライブラリを使うしかなさそうです。
card.io - Credit card scanning for mobile apps