Vorlon.js入門
Vorlon.jsとは？ ブラウザーでWebデバッグできるお手軽な開発者ツール
Vorlon.jsという開発者ツールを知っているだろうか？ このオープンソースツールを使えば、PCブラウザーで各種Webデバッグが行える。その機能概要と基本的な使い方を解説。
Vorlon.jsとは
Vorlon.js（読み方： ヴォーロン・ジェーエス）とは、ChromeのDevToolsやIE／EdgeのF12開発者ツールと同じく、Webブラウザーの表示内容やネットワーク状態をデバッグするためのツールである。
最も特徴的なのが、ブラウザー上で動作することだ。PCブラウザーのデバッグはもちろん、スマホなどのモバイルデバイスのデバッグを、ケーブルをつなげることなく、Macを準備することなく、実現できるのが大きなメリットだろう。
マイクロソフトが開発したオープンソースプロジェクトであり、Node.jsとSocket.IOといったオープンな標準のみを使って開発されていて、プラグインの追加が容易で、拡張可能なのも特徴だ。
本稿では、このVorlon.jsの使い方を示しながら、その全機能を一通り紹介する。具体的には下記の内容を解説する。
- アーキテクチャ
- セットアップ
- ブラウザーから接続
- ［DOM Explorer］タブ
- ［Obj. Explorer］タブ
- ［XHR］タブ
- ［Network Monitor］タブ
- ［Resources Explorer］タブ
- ［My Device］タブ
- ［Unit Test］タブ
- ［Best practices］タブ
- ［Interactive Console］パネル
- ［Modernizr］パネル
- リモートからの接続
- ※この記事は執筆時点（2015/11/01）時点の最新バージョンである0.1.0をベースに書いているため、バージョンの差異で機能にも差異が発生する可能性があることをご承知いただきたい。
アーキテクチャ
Vorlon.jsは、SignalRなどマイクロソフトの技術を使うのではなく、Socket.IOというオープンなアーキテクチャが使われている（図1）。
クライアント（図の右下）、サーバー（中央）、ダッシュボード（左）間がSocket.IOで接続されている。
Vorlon.jsは、プラグイン（plugin）を追加していく形で機能が追加される。プラグインは、クライアントとダッシュボードのペアを提供する必要があり、その間がSocket.IOで通信される。例えば図1右下の「Console plugin」は、クライアントからデータが送られると、一度サーバーが受信して、ダッシュボードに送信される。クライアント、ダッシュボードのどちらもJavaScriptで実装できる。
セットアップ
Vorlon.jsは、Node.jsのパッケージマネージャであるnpmを使ってインストールできる。インストールするには、以下のコマンドを実行する。なお、Node.jsが導入されていない環境の場合は、Node.jsサイトからインストーラーをダウンロードして、Node.jsをインストールする必要がある（※インストール手順の説明は割愛する。本稿ではWindowsを使って説明しているが、当然ながらMacやLinuxでもVorlon.jsは利用できる）。
|
npm i -g vorlon
|
このコマンドで使用しているオプションの意味は以下の通り。
i： インストール-g： グローバル・インストール
なお、Macではsudoコマンドを前に付けて実行する必要がある（※ただしMacの場合、インストール時にnode-gypとsocket.ioに関するエラーが出ることがあるが、取りあえず無視してよいようだ）。
上記コマンドでインストールが完了すると、vorlonを起動できるようになる。実際に起動するには、
vorlon
というコマンド（Macの場合はsudo vorlon）を実行する。これにより図2のように表示される。
Vorlon.jsが起動され、1337ポートをリッスンしていると表示される
これでVorlon.jsが起動されたことになる。ブラウザーを開いて「http://localhost:1337/」にアクセスするとダッシュボードが表示される（図3）。
ブラウザーでVorlon.jsがリッスンしているポートを開くとダッシュボードが表示される。
この時点ではクライアントからの接続がないため、中央にはロゴだけが表示されている。それではクライアントから接続してみよう。
ブラウザーから接続
ブラウザーからVorlon.jsサーバーに接続するには、デバッグ対象のHTMLファイルに、以下のコードを追記するだけでよい。
|
<script src="http://localhost:1337/vorlon.js"></script>
|
- ※以下の各サンプルにおけるHTMLファイルは、ローカルネットワーク内のWebサーバー上でホストされていることとする。インターネットなどのリモートWebサーバーの場合については本稿の最後で詳しく説明する。
では、このスクリプトを読み込むようにしたページをFirefoxで表示して、Chromeでダッシュボードを表示してみよう。ページを表示すると、Vorlon.jsダッシュボードのクライアント一覧にブラウザー項目が表示される（図4）。
Firefox（左）にページを表示するとChrome（右）に表示したVorlon.jsダッシュボードにページの情報が表示される。
このようにVorlon.jsを起動して、そこからJavaScriptファイルを読み込むだけで、Vorlon.jsによるデバッグを始めることができる。では、起動方法は分かったので、Vorlon.jsダッシュボード上のタブごとに機能を紹介していこう。
［DOM Explorer］タブ
DOM Explorerタブには、一般的なブラウザーの開発者ツールと同様に、左ペイン（＝DOMエレメントツリー）にHTMLの要素が表示されていて、右ペイン（＝サイドバー）にその要素に適用されているスタイルが表示される。
左ペインにHTML要素、右ペインに適用されているスタイル（STYLES）が表示されている。
要素選択
DOM Explorerタブで要素にマウスカーソルを合わせると、ページ側で選択された要素がハイライト表示される（図6）。
デフォルトでは、パフォーマンスや通信量を抑えるために、JavaScriptなどで動的に生成される要素やスタイルは動的に変更されない。動的な変更を読み込むには、右ペインにあるSETTINGSセクションの［Auto refresh］設定を「ON」にすればよい（図7）。
Auto refresh設定をON
動的な変更が読み込まれて自動的に反映されるようになる
テキスト編集
要素のテキストをダブルクリックすることで、テキストを編集できる（図8）。
右ペインのHTMLセクションでも同様にテキストを編集できる（図9）。
入力欄の上部にある保存用ボタンをクリックすると、編集したテキストがHTML側に反映する。
属性編集
HTML要素の属性をダブルクリックすることで、属性を編集できる（図10）。
属性を追加したい場合は、要素を右クリックして（表示されるコンテキストメニューから）［Add attribute］をクリックする（図11）。
要素の右クリックメニューから［Add attribute］を選択
要素に「name="value"」という属性が追加されるので、これを編集する
スタイル編集
左ペインでHTML要素を選択すると、STYLESセクションに要素に適用されているCSSスタイルが表示される（図12）。
STYLESセクションでスタイルの値をクリックすると編集可能になり、値を変更するとブラウザーに適用される（図13）。
STYLESセクションの一番下に表示されている［＋］ボタンをクリックすると、新しいスタイルを追加できる（図14）。
新しいスタイルは、「property: value」という名前で作成される。
また、COMPUTED STYLESセクションでは、CSSで明示的に指定されたスタイルだけでなく、ブラウザーがデフォルトで持っているものも含め、要素に適用された全ての実際のスタイルを確認できる（図15）。
レイアウトの確認
LAYOUTセクションでは、一般的なブラウザーの開発ツールが持っているレイアウトの確認と同じような機能である。選択されている要素自体のサイズとborder、paddingのサイズを確認できる。
［Obj. Explorer］タブ
Obj. Explorer（＝Object Explorer）タブは、ブラウザーが保持しているJavaScript変数を表示できる機能である（図17）。ツリーを展開していくと、オブジェクトの内部まで確認できる。
執筆時点のバージョンでは、Obj. Explorerタブでオブジェクトの値を変更することはできない。そのため必要な場合は、Interactive Consoleパネル（図18の下部）で任意のJavaScriptコードを実行することになる。
この例ではdocument.title = "Title"というJavaScriptコードを入力している。最後にEnterキーを押せば実行される。
［XHR］タブ
XHRタブは、Ajax呼び出し時のXMLHttpRequestをキャプチャできる（図19）。
再生ボタン（
）をクリックするとキャプチャが開始して、
停止ボタン（
）をクリックするとキャプチャが停止する。
また、クリアボタン（
）をクリックすると一覧がクリアされる。
このように、どのURLにリクエストされているかをキャプチャできる。残念ながら現時点では、通信の本文まで確認することはできない。
［Network Monitor］タブ
Network Monitorタブは、ページを表示するために読み込んだファイルを確認できる（図20）。
このように通信のタイミングや読み込みにかかった時間を確認できる。現時点では、通信のリクエスト内容やレスポンス内容は確認できない。
［Resources Explorer］タブ
Resources Explorerタブは、ページで使用されているストレージの内容を確認できる（図21）。
このように［LOCAL STORAGE］／［SESSION STORAGE］／［COOKIES］セクションで、それぞれの値を確認できる。
［My Device］タブ
My Deviceタブでは、表示しているデバイスの解像度やアスペクト比、ウィンドウサイズなどデバイスの情報が表示される（図22）。
［Unit Test］タブ
Unit Testタブは、QUnitを使ってページに読み込まれているモジュールの単体テストを実行できる機能である。QUnitは、Build Insiderに紹介記事があるので、そちらも参考にしてほしい。
単体テストを実行するには、［UNIT TEST］欄にJavaScriptコードを入力して、その上にある［Run test］ボタンをクリックする（図23）。なお、コードを手動で入力しなくても、単体テストコードを記載したJavaScriptファイルを［ファイル選択］ボタンを使ってアップロードすれば、同じように［UNIT TEST］欄に単体テストコードが表示される。
単体テストコードは、例えば以下のように入力する。
|
test("ユニットテスト", function() {
ok(1 == "1", "Passed");
equal(2, "2", "Passed");
strictEqual(3, "3", "Failed");
});
|
QUnit記法にで単体テストを記述して実行することができる。
［Best practices］タブ
Best practicesタブは、HTMLやJavaScriptのコードを検証して、Webページのパフォーマンス最適化がされているかどうかを確認できる（図25）。
再生ボタン（）をクリックすると、評価結果が出力される。
［ACCESSIBILITY］（アクセシビリティ）／［MOBILE WEB］（モバイルWeb）／［PERFORMANCES］（パフォーマンス）／［WEB STANDARDS］（Web標準）の4グループの検証結果を確認できる。グループを展開すると、グループごとの改善ポイントが表示される（図26）。
評価の結果、問題ない場合は緑チェック（
）、改善ポイントがある場合は赤バツ（
）が表示される。赤バツをクリックすると、改善点の詳細を確認できる。
［Modernizr］パネル
Modernizrは、ブラウザーの持っている機能を調査するためのモジュールである。Build Insiderで紹介しているので、そちらも参考にしてほしい。
Modernizrパネル（※Interactive Consoleパネルの横にある）には、ページを表示しているデバイスの持っている機能が一覧で表示される。
サポートされている機能は
（チェック）、サポートされていない機能は
（バツ）で表示される。
リモートからの接続
ここまで、ローカルホストでの動作を見てきたが、LAN接続できない端末からリモートで接続して確認したい場合もあるだろう。Vorlon.jsをAzure Web Apps（旧称：Azure Websites）に簡単にデプロイして、インターネット経由で使うこともできる（※もちろん、クラウド上に仮想サーバーを立ててインターネットに公開することもできる。この場合、仮想サーバーにログインして、セットアップ手順を実行する必要がある。この方式を採用するメリットは、設定ファイルを変更することにより、自前のプラグインを追加したり、ダッシュボードに認証を設定できたりすることだ。デメリットは、Vorlon.jsが更新されたときに、サーバーのコンソールで再インストールが必要になることや、必要なポートを開放する手順が必要になることなどが挙げられる）。
ここでは実際に、GitHubのVorlon.jsページからAzure Web Appsにデプロイしてみよう。GitHubのVorlon.jsページにある［Deploy to Azure］ボタンをクリックすると、デプロイを開始できる（図28）。
［Deploy to Azure］ボタンをクリックすると、Azureのデプロイページに遷移する。あとは図29の手順でデプロイしよう。
デプロイ先のAzureサブスクリプションやサイト名などを設定して［Next］ボタンをクリックする
Previewとして「Website」と表示されるのを確認して、［Deploy］ボタンをクリックする
自動的にデプロイが進むが、現時点ではプロセスの途中で必ず失敗してしまうようだ
現時点では、デプロイが必ず失敗してしまう。失敗した原因をAzure Portal（Preview版）で確認してみよう。図30の手順で、原因に対処してデプロイを成功させよう。
先ほどのデプロイされたWeb Appsの［設定］－［継続的なデプロイ］を開いてみると、「Update README.md」が失敗していることが分かる
［ログの表示］をクリックしてさらに詳細ログを見ると、Pythonでエラーが発生していることが分かる
Pythonの設定が不足しているために発生しているエラーのようなので、Web Appsの［アプリケーション設定］を開いて、［Pythonバージョン］に「3.4」を指定して、［保存］ボタンをクリックする
［継続的なデプロイ］を開いて、［同期］ボタンをクリックする
確認メッセージが表示されるので、［はい］をクリックする
しばらく待つと、デプロイが成功したことを表すチェックが表示される
デプロイが成功したので、ページを開いてみると、Vorlon.jsのダッシュボードが表示される
このように、現時点では1回ではデプロイが成功しないが、簡単なステップでAzureのWeb Appsにデプロイできる。これで、インターネットから接続可能なVorlon.jsサーバーが用意できたので、ダッシュボードに表示されている<script>タグをHTMLファイルに追記するだけでデバッグを開始できる。<script>タグの取得元がこれまでの1337ポートではないことにご注意いただきたい。
それでは、インターネットに公開したページからの接続を確認してみよう。ここでは、iOS（iPod Touch）から接続して確認してみることにする。公開されたページにiOSから接続してみる（図31）。
ダッシュボードのクライアント一覧（CLIENT LIST）にiOSやAndroidが表示される
ダッシュボードの左側にある［Identify a client］ボタンをクリックすると、iOSブラウザー上に識別番号（この例では「2」）が表示される
DOM Explorerタブで要素にカーソルをあてると、iOS上でハイライトされる
ダッシュボードで［Identify a client］ボタンをクリックすると、iOS上のブラウザーで識別番号が表示される。そして、ダッシュボードのDOM Explorerタブで要素を選択すると、iOS上でハイライト表示されることが分かる。
このように、これまではMacを用意して、ケーブルで接続しなければデバッグできなかったiOSでも、インターネット上にVorlon.jsを配置することで、ブラウザーだけでデバッグが可能になる。Vorlon.jsは、最大50デバイスまで同時に接続できる。
まとめ
このようにVorlon.jsを使うことで、Macなどのデバイスを準備することなく、ブラウザーだけでデバッグが可能になる。現時点では機能が充実しているとは言えないが、GitHub上で開発が進んでおり、少しずつ機能が追加されている。また本稿では説明しなかったが、プラグインの開発もそれほど難しくはないため、どうしても必要な機能は自分で開発することもできるし、それをGitHubでプルリクエストすることもできる。
DOM Explorerだけでも便利になる場面があると思うので、ぜひ一度試してみてほしい。
