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

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

![img.png](https://qiita-image-store.s3.amazonaws.com/0/49696/32b860a1-1feb-7405-564b-d8ccdd18aa84.png)

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

##スキャンで自動入力可能な情報
* カード番号（14〜20桁の数字）
* 有効期限（月/年）
* カードの種類（VISA、JCBなど）

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

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

###・有効期限（月）
```html:有効期限（月）
<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"`どちらでも自動選択の対象となります。

###・有効期限（年）
```html:有効期限（年）
<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など）
```html:カードの種類
<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

「カード番号」「有効期限」「カードの種類」が自動入力されます！
![img2.png](https://qiita-image-store.s3.amazonaws.com/0/49696/e7de47b4-a2c4-5020-ce63-3e2f2dda1559.png)


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

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

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

##参考サイト
Stack Overflow ： [ios - When Scan Credit Card option is available on iOS8 Safari? - Stack Overflow](http://stackoverflow.com/questions/25163891/when-scan-credit-card-option-is-available-on-ios8-safari)
あとはamazonなど、実際にクレジットカードのスキャンに対応している入力フォームを解析しました。

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

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