まさかできるとは。実は、WiiUブラウザでAmiiboを読み込めるんです。
いつか需要が来ることを願って、関数などをまとめました。
APIの仕様
window.amiiboに機能は実装されています。
なので、簡単にWiiUブラウザであるかわかります。
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を取得する例です。
window.addEventListener('AmiiboTagDetected',function(e) {
var tagdata = customEvent.tag; //NFCタグのデータ
});
このデータをどのように処理するかはこのあと説明します。
AmiiboTagLost(window.amiibo)
Amiiboタグが読み込み中なのに、途中でNFCリーダーから離れたり、読み込み出来なかった場合に発生するイベントです。
| イベントで受け取るデータ | 説明 |
|---|---|
| なし | なし |
Amiiboタグを読み取るWebアプリを作ろう
では、ちょっとしたWebアプリを作ってみましょう。
試すにはWiiU実機が必要です。
まず、基本の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として保存します。
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