本ページでは Firefox OS Simulator を使用して、とても簡単な (しかしバグの多い!) Web アプリのデバッグを行っていきます。
このウォークスルーは 6 つのパートで構成されます: それぞれのパートで異なる診断/デバッグルール、特にマニフェスト検証、Web コンソール、JavaScript デバッガ、ネットワークモニター、スタイルエディタ、テストレシートを使用します。
各パートはそれぞれで完結するようにしており、特定のパートのみ読むかたちでも理解できるでしょう。
マニフェスト検証の使用
このウォークスルーに沿っていきたい場合のために、GitHub の firefoxos-simulator-walkthrough リポジトリにさまざまなリビジョンのアプリを置いています。whereami-1 バージョンのアプリから始めると、本章を選択したことになります。
このアプリは "Where am I?" という名前のボタン 1 個を表示します。ユーザがボタンをクリックすると、アプリは Geolocation API を使用してユーザの現在地を取得して、地図上に表示します。
このウォークスルーでは、Simulator がインストール済みで、Dashboard を開いているものとします。
始めに "Add Directory" をクリックしてマニフェストを選択することで、Dashboard にアプリを追加します。すると以下のようになるでしょう:
"(2 errors and 0 warnings)" をクリックすると以下のようになります:
このエラーメッセージは実に明確です。"manifest.webapp" を確認すると、"name" がないことをご覧いただけるでしょう:
{
"description": "A simple web app",
"launch_path": "/index.html",
"icons": {
"128": "/style/icons/earth.png"
}
}
マニフェストファイルに "name" フィールドを追加して、ファイルを保存したら Dashboard で "Refresh" をクリックします:
{
"name": "Where am I?",
"description": "A simple web app",
"launch_path": "/index.html",
"icons": {
"128": "/style/icons/earth.png"
}
}
ここで Dashboard はエラーがないことを表示して、アプリを実行するでしょう:
しかし、ボタンをクリックしても何も起きません。次の章では、この問題を診断するために Web コンソールを使用してみましょう。
Web コンソールの使用
このウォークスルーを始めから順に追っていない場合:
本章では Firefox OS Simulator を使用して、とても簡単な (しかしバグの多い!) Web アプリのデバッグを行っていきます。
GitHub の firefoxos-simulator-walkthrough リポジトリにさまざまなリビジョンのアプリを置いています。whereami-2 バージョンのアプリから始めると、本章を選択したことになります。
このアプリは "Where am I?" という名前のボタン 1 個を表示します。ユーザがボタンをクリックすると、アプリは Geolocation API を使用してユーザの現在地を取得して、地図上に表示します。
しかしこのバージョンでは、ボタンをクリックしても何も起きません。ウォークスルーの本章では、この問題を診断するために Web コンソールを使用します。
このウォークスルーでは、Simulator がインストール済みで、Dashboard を開いているものとします。さらに、"Add Directory" をクリックしてアプリの "manifest.webapp" を選択して、アプリを追加済みであるものとします。Dashboard で、"Connect" という名前のボタンを押します:
Simulator のウィンドウが自動的に開いてアプリを実行します (未実行の場合)。また、Simulator の Dashboard タブ内に Web コンソールが表示されます。
コンソールの出力にエラー、警告、メッセージがいくつかありますが、最後のひとつが特に関係があるようです:
これは明らかに、アプリのスクリプトである "whereami.js" の問題です。以下はスクリプトの先頭から数行です:
var whereami = document.getElementById('whereami');
whereami.onclick = function() {
navigator.geolocation.getCurrentPosition(getMap, error);
};
このスクリプトとアプリの "index.html" を比較すると、問題は明らかです:
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <script src="https://open.mapquestap.com/sdk/js/v7.0.s/mqa.toolkit.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> </head> <body> <button id ="where-am-i">Where am I?</button> <div id="map"></div> <script src="scripts/whereami.js"></script> <link media="all" href="style/style.css" type="text/css" rel="stylesheet"> </body> </html>
HTML ではボタンに "where-am-i" という ID を割り当てていますが、JavaScript では "whereami" を使おうとしています。よってこれを修正しましょう:
var whereami = document.getElementById('where-am-i');
whereami.onclick = function() {
navigator.geolocation.getCurrentPosition(getMap, error);
};
これでエラーが発生することなくアプリが起動しますが、ボタンをクリックしても地図は表示されず、Web コンソールに新たなメッセージが現れます:
このメッセージは "whereami.js" スクリプトによるものであり、Geolocation API がエラーを返していることを示します。しかし、どのようなエラーであるかを伝えていません。それを明らかにするために、JavaScript デバッガを使用できます。
JavaScript デバッガの使用
このウォークスルーを始めから順に追っていない場合:
本章では Firefox OS Simulator を使用して、とても簡単な (しかしバグの多い!) Web アプリのデバッグを行っていきます。
GitHub の firefoxos-simulator-walkthrough リポジトリにさまざまなリビジョンのアプリを置いています。whereami-3 バージョンのアプリから始めると、本章を選択したことになります。
このアプリは "Where am I?" という名前のボタン 1 個を表示します。ユーザがボタンをクリックすると、アプリは Geolocation API を使用してユーザの現在地を取得して、地図上に表示します。
しかしこのバージョンでは、ボタンをクリックすると Geolocation API のエラーが返ります。ウォークスルーの本章では、どのようなエラーが返っているかを明らかにするために JavaScript デバッガを使用します。
このウォークスルーでは、Simulator がインストール済みで、Dashboard を開いているものとします。さらに、"Add Directory" をクリックしてアプリの "manifest.webapp" を選択して、アプリを追加済みであるものとします。
アプリに接続した Web コンソールで、Geolocation のエラーログの右側にあるリンクをクリックします:
"whereami.js:8" のリンクをクリックすると、JavaScript デバッガが自動的に読み込まれて、関連するファイルおよび行数を指し示します。
Geolocation API のリファレンスによると、エラーハンドラ error() に渡された error オブジェクトの code プロパティによって具体的なエラーが与えられます。そこで、8 行目の左側をクリックすることで error() の内部にブレークポイントを設定します:
アプリで "Where am I?" をクリックしましょう。ブレークポイントで実行が停止するでしょう:
"ウォッチ式を追加" と表示されている部分をクリックして "error.code" と入力すると、その値が "1" であることが直ちにわかるでしょう:
Geolocation API のドキュメント によると、"1" は "Permission denied" を表します。これは、Web アプリが Geolocation の許可設定を要求していないか、ユーザによって許可設定が承諾されなかった場合に発生するエラーです。
"manifest.webapp" ファイルを見てください。許可設定を尋ねていなかったことがわかります:
{
"name": "Where am I?",
"description": "A simple web app",
"launch_path": "/index.html",
"icons": {
"128": "/style/icons/earth.png"
}
}
これを修正しましょう:
{
"name": "Where am I?",
"description": "A simple web app",
"launch_path": "/index.html",
"icons": {
"128": "/style/icons/earth.png"
},
"permissions": {
"geolocation": {
"description": "Needed to tell the user where they are"
}
}
}
"manifest.webapp" を保存して、Dashboard で "Refresh" をもう一度クリックしてください。まだブレークポイントに留まっていますので、再開を忘れないようにしてください。今回のアプリ実行では "Where am I?" をクリックすると、位置情報を共有するかを問い合わせられます。これを許可しても地図は表示されず、Web コンソールに新たなメッセージが表示されます:
このメッセージは、MapQuest API が正しく読み込まれていないことを示します。MapQuest API は、script タグを使用してアプリに組み込んでいます。この問題を解決するために、ネットワークモニターを使用できます。
ネットワークモニターの使用
このウォークスルーを始めから順に追っていない場合:
本章では Firefox OS Simulator を使用して、とても簡単な (しかしバグの多い!) Web アプリのネットワークリクエストを調査していきます。
GitHub の firefoxos-simulator-walkthrough リポジトリにさまざまなリビジョンのアプリを置いています。whereami-4 バージョンのアプリから始めると、本章を選択したことになります。
このアプリは "Where am I?" という名前のボタン 1 個を表示します。ユーザがボタンをクリックすると、アプリは Geolocation API を使用してユーザの現在地を取得して、地図上に表示します。
しかしこのバージョンでは、ブタンをクリックすると Web コンソールに "MQA is not defined" というエラーが表示されます。ウォークスルーの本章では、なぜ MapQuest API が読み込まれないかを明らかにするためにネットワークモニターを使用します。
このウォークスルーでは、Simulator がインストール済みで、Dashboard を開いているものとします。さらに、"Add Directory" をクリックしてアプリの "manifest.webapp" を選択して、アプリを追加済みであるものとします。
警告: ネットワークモニターは Firefox 23.0 以上で使用可能です (現在は Firefox Beta です)
アプリに接続した開発ツールのパネルでネットワークタブをクリックすると、以下のようなパネルが表示されます。ここで、"open.mapquestap.com" ドメインからリソース "mqa.toolkit.js" を読み込む処理が正しく完了していないことがわかります:
成功したリクエストは緑色表示であり、"open.mapquestap.com" ドメインへのリクエストのひとつ (濃い灰色表示) をクリックしてタイミング詳細パネルを選択すると、DNS 解決が成功していないためにリクエストが一切接続ステータスに達していないことが明らかになります。
"index.html" ファイルを見ると、script タグで誤ったドメインを指し示していることがわかるでしょう。
このバグを修正しましょう。正しいドメインを使用するように script タグを変更します: open.mapquestapi.com (ドメイン名で不足している 'i' を追加):
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<script src="https://open.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<button id ="where-am-i">Where am I?</button>
<div id="map"></div>
<script src="scripts/whereami.js"></script>
<link media="all" href="style/style.css" type="text/css" rel="stylesheet">
</body>
</html>
"index.html" を保存して、Dashboard で "Refresh" をもう一度クリックしてください。今回のアプリ実行では "Where am I?" をクリックすると、位置情報を共有するかを問い合わせられます。これを許可すると、アプリが地図を表示します:
スタイルエディタの使用
このウォークスルーを始めから順に追っていない場合:
本章では Firefox OS Simulator を使用して、アプリのスタイルシートをカスタマイズします。
GitHub の firefoxos-simulator-walkthrough リポジトリにさまざまなリビジョンのアプリを置いています。whereami-5 バージョンのアプリから始めると、本章を選択したことになります。
このアプリは "Where am I?" という名前のボタン 1 個を表示します。ユーザがボタンをクリックすると、アプリは Geolocation API を使用してユーザの現在地を取得して、地図上に表示します。
このバージョンでは以前のバグがすべて修正されています。実行中のアプリのスタイルをリアルタイムに変更するためにスタイルエディタを使用して、満足したときに保存します。
このウォークスルーでは、Simulator がインストール済みで、Dashboard を開いているものとします。さらに、"Add Directory" をクリックしてアプリの "manifest.webapp" を選択して、アプリを追加済みであるものとします。
警告: スタイルエディタは Firefox 23.0 以上で使用可能です (現在は currently Firefox Beta です)
アプリに接続した開発ツールでスタイルエディタタブをクリックすると、以下のようなパネルが表示されます:
左側のスタイルシート一覧で "style/style.css" を選択して、CSS 規則をいくつか変更しましょう。新たな規則は、接続したいるアプリへ直ちに適用されます:
スタイルシート一覧で "style/style.css" のすぐ下にある "保存" リンクをクリックして、スタイルシートをプロジェクトに書き戻すことができます。
テストレシートの使用
このウォークスルーを始めから順に追っていない場合:
本章では Firefox OS Simulator を使用して、Web アプリに支払いレシートの検証コードを追加します。
GitHub の firefoxos-simulator-walkthrough リポジトリにさまざまなリビジョンのアプリを置いています。whereami-6 バージョンのアプリから始めると、本章を選択したことになります。
このアプリは "Where am I?" という名前のボタン 1 個を表示します。ユーザがボタンをクリックすると、アプリは Geolocation API を使用してユーザの現在地を取得して、地図上に表示します。
このバージョンでは、課金 Web アプリに変更していきます。
このウォークスルーでは、Simulator がインストール済みで、Dashboard を開いているものとします。さらに、"Add Directory" をクリックしてアプリの "manifest.webapp" を選択して、アプリを追加済みであるものとします。
アプリはバグがなくなり、また適切にスタイルが設置されましたので、アプリのユーザが購入したことを保証するために、支払いレシートの検証機能を追加しましょう。
Mozilla は、アプリのレシート確認を支援する小さな JavaScript ライブラリをリリースしました: https://github.com/mozilla/receiptverifier
receiptverifier をアプリに追加しましょう。例えば、"index.html" ファイルに新たな script タグを追加します:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<script src="https://raw.github.com/mozilla/receiptverifier/master/receiptverifier.js"></script>
<script src="https://open.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<button id ="where-am-i">Where am I?</button>
<div id="map"></div>
<script src="scripts/whereami.js"></script>
<link media="all" href="style/style.css" type="text/css" rel="stylesheet">
</body>
</html>
そして、"mozmarket.receipts.Verifier" を使用して "scripts/whereami.js" でレシートを確認します (例えば、ボタンをクリックしたときやアプリを読み込むとき):
...
var verifier = new mozmarket.receipts.Verifier({
installs_allowed_from: '*',
typsAllowed: 'test-receipt',
logLevel: mozmarket.receipts.Verifier.levels.DEBUG,
onlog: mozmarket.receipts.Verifier.consoleLogger
});
verifier.clearCache();
function verifyPaymentReceipts(cb) {
verifier.verify(function (verifier) {
if (verifier.state instanceof verifier.states.OK) {
cb(null); // valid payment
} else {
cb("invalid-payment"); // invalid payment
}
});
setTimeout(function checkNoReceipts() {
if (verifier.state instanceof verifier.states.NoReceipts) {
cb("no-receipts");
}
}, 2000);
}
whereami.onclick = function() {
verifyPaymentReceipts(function (err) {
if (err) {
alert("Invalid Payment Receipt.");
} else {
navigator.geolocation.getCurrentPosition(getMap, error);
}
});
};
レシートは (Marketplace および支払いサービスによって) 暗号による署名が施されていますが、Simulator ではアプリのエントリにある "Receipts" メニューでインストールするレシートの種類 (既定値は "None") を選択することで、テストレシートとともにアプリをインストールできます:
"Valid"、"Invalid"、"Refunded" の各レシートがあるとき (およびレシートがないとき) にアプリがどのように動作するかをテストでき、また結果は Web コンソールで、receiptverifier ライブラリが生成するログを確認することでわかります。:
注記: 完成したアプリを whereami-7 バージョンから取得できます。