WiiUインターネットブラウザでAmiiboを読み込む

まさかできるとは。実は、**WiiUブラウザでAmiiboを読み込めるんです。**

いつか需要が来ることを願って、関数などをまとめました。

# APIの仕様
`window.amiibo`に機能は実装されています。
なので、簡単にWiiUブラウザであるかわかります。

```javascript:judgeAmiibo.js
window.onload = function () {
 if(window.amiibo) {
  alert("WiiUブラウザです");
 }else{
  alert("WiiUブラウザではありません");
}
}
```
# 関数リファレンス
## window.amiibo.playAmiiboSE()
`window.amiibo.playAmiiboSE([引数なし])`
あの「ｱﾐｨﾎﾞｫｰｳ！」の声を再生します。
## window.amiibo.startSearchAmiibo()
`window.amiibo.startSearchAmiibo([引数なし])`
Amiiboタグの検索を開始します。
この関数で、検索開始すると以降は以下のイベントが発生することがあります。

|     イベント名       |             イベントの説明            |
|:-------------------:|:------------------------------------:|
|AmiiboTagSearchStart |この関数を呼出したときに発生します       |
|AmiiboTagSearchCancel|検索を中止したときに呼ばれる(?)らしいです|
|AmiiboTagDetected    |Amiiboタグを発見した時に発生します      |
|AmiiboTagLost        |Amiiboタグ読み込み中にNFC領域から離したなどで認識不可になったときに発生します。|
## window.amiibo.endSearchAmiibo()
`window.amiibo.endSearchAmiibo([引数なし])`
Amiiboタグの検索を終了します。
もしかすると`AmiiboTagSearchCancel`イベントが発生するかもしれません。
# イベントリファレンス
## AmiiboTagSearchStart(window.amiibo)
Amiiboタグの検索を開始したことを通知するイベントです。
`window.amiibo.startSearchAmiibo()`を実行した時に発生します。

|イベントで受け取るデータ|説明|
|:--------------------:|:---|
|なし|なし|
## AmiiboTagSearchCancel(window.amiibo)
Amiiboタグの検索がキャンセルされたことを通知するイベントです。
`window.amiibo.endSearchAmiibo()`を実行すると多分発生します。

|イベントで受け取るデータ|説明|
|:--------------------:|:---|
|なし|なし|
## AmiiboTagDetected(window.amiibo)
Amiiboタグが発見されたときに発生するイベントです。
`window.amiibo.startSearchAmiibo()`実行後は、Amiiboが見つかるたびに発生します。

|イベントで受け取るデータ|説明|
|:--------------------:|:---:|
|customEvent.tag|タグの情報が格納されます|

`customEvent.tag`を取得する例です。

```javascript:getNFCTagInfo.js
window.addEventListener('AmiiboTagDetected',function(e) {
 var tagdata = customEvent.tag; //NFCタグのデータ
});
```
このデータをどのように処理するかはこのあと説明します。
## AmiiboTagLost(window.amiibo)
Amiiboタグが読み込み中なのに、途中でNFCリーダーから離れたり、読み込み出来なかった場合に発生するイベントです。

|イベントで受け取るデータ|説明|
|:--------------------:|:---|
|なし|なし|

---
# Amiiboタグを読み取るWebアプリを作ろう
では、ちょっとしたWebアプリを作ってみましょう。
試すには**WiiU実機**が必要です。

まず、基本のHTMLを作ります。

```html:nfcread.html
<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">
 <title>Amiiboタグ読み取り</title>
</head>
<body>
<h1>Amiiboタグ読み取り</h1>
<div>状態:<span id="status"></span></div>
<!-- Result Area -->
<div id="res"></div>
<!--     END     -->
<script type="text/javascript" src="./nfc.js"></script>
</body>
</html>
```
これをWebサーバーに配置してください。
## JavaScriptプログラムを実装する
では、次にJavaScriptプログラムを書いていきます。
これはHTMLとは別に、nfc.jsとして保存します。

```javascript:nfc.js
function $(id) {
 return document.getElementById(id);
}
function setstatus(text) {
 $("status").innerHTML = text;
}
function setresult(text) {
 $("res").innerHTML = text;
}

function init() {
 if(!window.amiibo) {
  alert("WiiUブラウザからアクセスしてください");
  return;
 }
 
 window.amiibo.startSearchAmiibo(); //Amiibo検索開始
 setstatus("Amiibo読み込み準備完了");
 window.addEventListener("AmiiboTagDetected", readTag); //イベントハンドラ登録
 window.addEventListener("AmiiboTagLost", tagLost); //イベントハンドラ登録
}

function readTag(e) {
 var tagdata = customEvent.tag;
 if(tagdata.isRead) window.amiibo.playAmiiboSE(); //タグが認識されたら声を再生
 var id_hex = '';
 tagdata.info.id.forEach(function(id, i){
  if (i == 2) return;
  id_hex += ('0'+id.toString(16)%10).slice(-2);
 });
 setstatus("Amiiboを読み込みました");
 setresult("読み込んだタグID:" + id_hex);
}

function tagLost(e) {
 setstatus("タグを見失いました");
}

window.onload = function () {
 init(); //初期化
}
```

以上のプログラムを書いて、WiiUからサーバーにアクセスして、AmiiboをGamePadに置けば、認識されてAmiiboのIDが表示されるはずです。
## プログラム解説
まず、ページを読み込むとonloadハンドラでinit関数が実行されます。
init関数では、Amiiboの検索開始などを行っています。
そして、AmiiboTagDetectedイベントが発生したときには、readTag関数が呼び出されます。
readTag関数では、まずタグデータを取得するのに、tag変数に`customEvent.tag`の内容を代入しています。
customEventは、WebKitで実装されている、カスタムイベントハンドラのデータを受け渡しするものです。タグデータはtagプロパティで参照できます。
その前に、isReadプロパティをチェックして、正常に読み込まれたかを調べています。
タグのIDは、infoプロパティのid配列をforEachなどで参照できます。
IDは計算されてid_hex変数に格納されます。それを表示しています。
# 終わりに
このAPIをなぜ任天堂が公開していないのかは不明ですが、何かの用途に使えるといいですね。

# おまけ
PCでNFCリーダーの挙動をエミュレートできるようにした「*amiibo-emu.js*」を開発しました。
GitHubからクローン、ZIPでダウンロードするなどしてご利用ください。
なお、amiibo-emu.jsはGPLライセンスです。
https://github.com/CyberRex0/AmiiboReaderEmulator