デベロッパーツール
パソコン用のメジャーなWebブラウザーにはデベロッパーツールという開発者用の機能があります。
このデベロッパーツールでは例えばWebサイトの画面の構成要素の詳細な情報を確認できたり、プログラムからのメッセージを表示するのに使えたりするコンソールというものがあったりします。
Web開発には必須とも言えるデベロッパーツールですがAndroidのChromeには見当たりません。 そこでAndroidでデベロッパーツールを使う方法を紹介します。
Kiwi Browser
Chromeには見当たらないのですがChromeと同じくChromiumをベースに作られている「Kiwi Browser」というWebブラウザーには開発者ツールがあるのでこれを使います。
Kiwi Browser をインストールしましょう。Kiwi Browser のWebサイトを開きます。
「Play Store」のボタンがあるのでタップします。
直接Playストアで探してインストールしても構いません。通常のアプリと同じようにインストールします。
インストールできたら起動します。Kiwi Browser もWebブラウザーですからChromeと同じようにWebを閲覧できます。たとえば「google.com」にアクセスしてみます。
このようにWebサイトを開いた状態で、右上の「…」ボタンからメニューを開き、メニューの下の方にある「開発者ツール」をタップすると、新しいタブとしてデベロッパーツールが開きます。右上のタブの数の表示が「2」になっています。
タブを切り替えてデベロッパーツールを見てみましょう。 左上のタブ数が表示されているボタンをタップし「DevTools」ではじまるタイトルになっているタブをタップします。これがデベロッパーツールです。
はじめての表示だとこんな風に日本語で表示するかを問われるかもしれません。 日本語で表示するなら右のボタンをタップします。 Chromeの言語と一致させるなら左のボタンをタップします。
日本語で表示するとこんな風になります。
コンソールへの出力
デベロッパーツールにはたくさんの機能がありますが、ここでは試しにコンソールを使ってみましょう。 WebサイトのJavaScriptプログラムからコンソールにメッセージを出力して、そのメッセージをデベロッパーツールのコンソールで確認します。
AndroidでWebアプリを作る - てけとーぶろぐ。 で作ったゲームにコンソールへのメッセージ出力を加えてみましょう。
microで「script.js」ファイルを開きます。 「handleTouch()」関数は画面がタップされた時に呼ばれる関数です。ここにコンソールへのメッセージ出力を加えてみます。具体的には「handleTouch()」関数の1行目に以下を加えます。
console.log('handleTouch() gameState: ' + gameState);
「console.log()」がコンソールにメッセージを出力する命令で「()」の中が出力するメッセージです。
メッセージは何でもいいのですがここでは「gameState」変数の値を表示しています。 メッセージ出力を加えた「handleTouch()」関数のはじめの方は以下のようになります。
function handleTouch() {
console.log('handleTouch() gameState: ' + gameState);
if (gameState === 'title') {
gameState = 'beforeGame'
…略…
動作を確認してみましょう。これまでと同じようにWebサーバーを起動して、Webブラウザーでアクセスするわけですけど、ここで使うWebブラウザーはChromeではなくKiwi Browserになります。Kiwi Browser で「localhost:8080」にアクセスします。
ゲーム画面が表示されたらデベロッパーツールを開きます。
「コンソール」タブをタップします。
コンソールには
Failed to load resource: the server responded with a status of 404 (File not found)
といったエラーメッセージが出力されていますがまだ画面をタップしていないのでタップで出力するようにしたメッセージについてはまだ出力されていません。
ちなみにこのエラーメッセージはメッセージの通りで「favicon.ico」というファイルを用意してやれば出なくなります。興味があれば調べてみてください。
ゲーム画面のタブに切り替え、ゲーム画面をタップしてから、再度デベロッパーツールのタブに切り替えみましょう。
コンソールに「handleTouch() gameState: title」と出力があるはずです。
画面がタップされて「handleTouch()」関数が呼び出されるたびに出力され、そのときのgameState」変数の値が確認できます。 こんな風にコンソールへの出力を使うとプログラムの処理の流れを追ったり、処理の途中での変数の値を確認したりといったことができプログラムの確認や修正に役立ちます。
