Vorlon.js入門

Vorlon.js入門

Vorlon.jsとは? ブラウザーでWebデバッグできるお手軽な開発者ツール

2015年11月13日

Vorlon.jsという開発者ツールを知っているだろうか? このオープンソースツールを使えば、PCブラウザーで各種Webデバッグが行える。その機能概要と基本的な使い方を解説。

尾崎 義尚
  • このエントリーをはてなブックマークに追加

Vorlon.jsとは

 Vorlon.js(読み方: ヴォーロン・ジェーエス)とは、ChromeのDevToolsIE/EdgeのF12開発者ツールと同じく、Webブラウザーの表示内容やネットワーク状態をデバッグするためのツールである。

 最も特徴的なのが、ブラウザー上で動作することだ。PCブラウザーのデバッグはもちろん、スマホなどのモバイルデバイスのデバッグを、ケーブルをつなげることなく、Macを準備することなく、実現できるのが大きなメリットだろう。

 マイクロソフトが開発したオープンソースプロジェクトであり、Node.jsSocket.IOといったオープンな標準のみを使って開発されていて、プラグインの追加が容易で、拡張可能なのも特徴だ。

 本稿では、このVorlon.jsの使い方を示しながら、その全機能を一通り紹介する。具体的には下記の内容を解説する。

  • この記事は執筆時点(2015/11/01)時点の最新バージョンである0.1.0をベースに書いているため、バージョンの差異で機能にも差異が発生する可能性があることをご承知いただきたい。

▲機能一覧に戻る

アーキテクチャ

 Vorlon.jsは、SignalRなどマイクロソフトの技術を使うのではなく、Socket.IOというオープンなアーキテクチャが使われている(図1)。

図1 Vorlon.jsのアーキテクチャ
図1 Vorlon.jsのアーキテクチャ

クライアント(図の右下)、サーバー(中央)、ダッシュボード(左)間が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
リスト1 vorlonをインストールするコマンド

このコマンドで使用しているオプションの意味は以下の通り。

  • i: インストール
  • -g: グローバル・インストール

なお、Macではsudoコマンドを前に付けて実行する必要がある(ただしMacの場合、インストール時にnode-gypsocket.ioに関するエラーが出ることがあるが、取りあえず無視してよいようだ)。

 上記コマンドでインストールが完了すると、vorlonを起動できるようになる。実際に起動するには、

vorlon

というコマンド(Macの場合はsudo vorlon)を実行する。これにより図2のように表示される。

図2 Vorlon.jsを起動
図2 Vorlon.jsを起動

Vorlon.jsが起動され、1337ポートをリッスンしていると表示される

 これでVorlon.jsが起動されたことになる。ブラウザーを開いて「http://localhost:1337/」にアクセスするとダッシュボードが表示される(図3)。

図3 Vorlon.jsのダッシュボード

ブラウザーでVorlon.jsがリッスンしているポートを開くとダッシュボードが表示される。

 この時点ではクライアントからの接続がないため、中央にはロゴだけが表示されている。それではクライアントから接続してみよう。

▲機能一覧に戻る

ブラウザーから接続

 ブラウザーからVorlon.jsサーバーに接続するには、デバッグ対象のHTMLファイルに、以下のコードを追記するだけでよい。

HTML
<script src="http://localhost:1337/vorlon.js"></script>
リスト2 Vorlon.jsを読み込むための<script>タグ
  • 以下の各サンプルにおけるHTMLファイルは、ローカルネットワーク内のWebサーバー上でホストされていることとする。インターネットなどのリモートWebサーバーの場合については本稿の最後で詳しく説明する

 では、このスクリプトを読み込むようにしたページをFirefoxで表示して、Chromeでダッシュボードを表示してみよう。ページを表示すると、Vorlon.jsダッシュボードのクライアント一覧にブラウザー項目が表示される(図4)。

図4 Vorlon.jsを読み込んだページを表示

Firefox(左)にページを表示するとChrome(右)に表示したVorlon.jsダッシュボードにページの情報が表示される。

 このようにVorlon.jsを起動して、そこからJavaScriptファイルを読み込むだけで、Vorlon.jsによるデバッグを始めることができる。では、起動方法は分かったので、Vorlon.jsダッシュボード上のタブごとに機能を紹介していこう。

▲機能一覧に戻る

[DOM Explorer]タブ

 DOM Explorerタブには、一般的なブラウザーの開発者ツールと同様に、左ペイン(=DOMエレメントツリー)にHTMLの要素が表示されていて、右ペイン(=サイドバー)にその要素に適用されているスタイルが表示される。

図5 [DOM Explorer]タブ

左ペインにHTML要素、右ペインに適用されているスタイル(STYLES)が表示されている。

要素選択

 DOM Explorerタブで要素にマウスカーソルを合わせると、ページ側で選択された要素がハイライト表示される(図6)。

図6 ダッシュボード(右)でマウスカーソルを重ねた要素が、ブラウザー(左)側でハイライト表示される

 デフォルトでは、パフォーマンスや通信量を抑えるために、JavaScriptなどで動的に生成される要素やスタイルは動的に変更されない。動的な変更を読み込むには、右ペインにあるSETTINGSセクションの[Auto refresh]設定を「ON」にすればよい(図7)。

Auto refresh設定をON

Auto refresh設定をON

動的な変更を読み込むことができる

動的な変更が読み込まれて自動的に反映されるようになる

図7 Auto refresh設定をONにして、動的な変更を読み込むことができる

テキスト編集

 要素のテキストをダブルクリックすることで、テキストを編集できる(図8)。

図8 ダブルクリックしてテキストを編集できる

 右ペインのHTMLセクションでも同様にテキストを編集できる(図9)。

図9 HTMLセクションからテキストを編集できる

入力欄の上部にある保存用ボタンをクリックすると、編集したテキストがHTML側に反映する。

属性編集

 HTML要素の属性をダブルクリックすることで、属性を編集できる(図10)。

図10 要素の属性をダブルクリックすると、属性を編集できる

 属性を追加したい場合は、要素を右クリックして(表示されるコンテキストメニューから)[Add attribute]をクリックする(図11)。

要素の右クリックメニューから[Add attribute]を選択

要素の右クリックメニューから[Add attribute]を選択

要素に「name=“value”」という属性が追加されるので、これを編集する

要素に「name="value"」という属性が追加されるので、これを編集する

図11 要素を右クリックして[Add attribute]をクリックすると、属性を追加できる

スタイル編集

 左ペインでHTML要素を選択すると、STYLESセクションに要素に適用されているCSSスタイルが表示される(図12)。

図12 要素を選択すると、要素に適用されているCSSスタイルが表示される(STYLESセクション)

 STYLESセクションでスタイルの値をクリックすると編集可能になり、値を変更するとブラウザーに適用される(図13)。

図13 スタイルの値を変更すると、ブラウザーに変更が適用される

 STYLESセクションの一番下に表示されている[+]ボタンをクリックすると、新しいスタイルを追加できる(図14)。

図14 [+]ボタンを押して新しいスタイルを追加できる

新しいスタイルは、「property: value」という名前で作成される。

 また、COMPUTED STYLESセクションでは、CSSで明示的に指定されたスタイルだけでなく、ブラウザーがデフォルトで持っているものも含め、要素に適用された全ての実際のスタイルを確認できる(図15)。

図15 COMPUTED STYLESセクションでは、要素に適用された全てのスタイルを確認できる

レイアウトの確認

 LAYOUTセクションでは、一般的なブラウザーの開発ツールが持っているレイアウトの確認と同じような機能である。選択されている要素自体のサイズとborderpaddingのサイズを確認できる。

図16 LAYOUTセクションでは、要素自体のサイズとborder、paddingのサイズを確認できる

▲機能一覧に戻る

[Obj. Explorer]タブ

 Obj. Explorer(=Object Explorer)タブは、ブラウザーが保持しているJavaScript変数を表示できる機能である(図17)。ツリーを展開していくと、オブジェクトの内部まで確認できる。

図17 Obj. ExplorerタブはJavaScript変数と値を確認できる

 執筆時点のバージョンでは、Obj. Explorerタブでオブジェクトの値を変更することはできない。そのため必要な場合は、Interactive Consoleパネル(図18の下部)で任意のJavaScriptコードを実行することになる。

図18 [Interactive Console]パネルの一番下のテキストボックスにJavaScriptコードを入力して実行すれば、オブジェクトの値を変更することもできる

この例ではdocument.title = "Title"というJavaScriptコードを入力している。最後にEnterキーを押せば実行される。

▲機能一覧に戻る

[XHR]タブ

 XHRタブは、Ajax呼び出し時のXMLHttpRequestをキャプチャできる(図19)。

図19 XHR(XMLHttpRequest)の通信状況をモニターできる

再生ボタン(再生ボタン)をクリックするとキャプチャが開始して、
停止ボタン(停止ボタン)をクリックするとキャプチャが停止する。
また、クリアボタン(クリアボタン)をクリックすると一覧がクリアされる。

 このように、どのURLにリクエストされているかをキャプチャできる。残念ながら現時点では、通信の本文まで確認することはできない。

▲機能一覧に戻る

[Network Monitor]タブ

 Network Monitorタブは、ページを表示するために読み込んだファイルを確認できる(図20)。

図20 Network Monitorは、通信の内容を確認できる

 このように通信のタイミングや読み込みにかかった時間を確認できる。現時点では、通信のリクエスト内容やレスポンス内容は確認できない。

▲機能一覧に戻る

[Resources Explorer]タブ

 Resources Explorerタブは、ページで使用されているストレージの内容を確認できる(図21)。

図21 Resources Explorerタブでページの[LOCAL STORAGE][SESSION STORAGE][COOKIES]を確認できる

 このように[LOCAL STORAGE]/[SESSION STORAGE]/[COOKIES]セクションで、それぞれの値を確認できる。

▲機能一覧に戻る

[My Device]タブ

 My Deviceタブでは、表示しているデバイスの解像度やアスペクト比、ウィンドウサイズなどデバイスの情報が表示される(図22)。

図22 My Deviceタブはデバイスの情報が表示される

▲機能一覧に戻る

[Unit Test]タブ

 Unit Testタブは、QUnitを使ってページに読み込まれているモジュールの単体テストを実行できる機能である。QUnitは、Build Insiderに紹介記事があるので、そちらも参考にしてほしい。

 単体テストを実行するには、[UNIT TEST]欄にJavaScriptコードを入力して、その上にある[Run test]ボタンをクリックする(図23)。なお、コードを手動で入力しなくても、単体テストコードを記載したJavaScriptファイルを[ファイル選択]ボタンを使ってアップロードすれば、同じように[UNIT TEST]欄に単体テストコードが表示される。

図23 UNIT TEST欄に単体テストコードを入力して、[Run test]ボタンをクリックすると、単体テストの結果が表示される

 単体テストコードは、例えば以下のように入力する。

JavaScript
test("ユニットテスト", function() {
  ok(1 == "1", "Passed");
  equal(2, "2", "Passed");
  strictEqual(3, "3", "Failed");
});
リスト3 単体テストコード

QUnit記法にで単体テストを記述して実行することができる。

▲機能一覧に戻る

[Best practices]タブ

 Best practicesタブは、HTMLやJavaScriptのコードを検証して、Webページのパフォーマンス最適化がされているかどうかを確認できる(図25)。

図25 Best practicesタブ

再生ボタン(再生ボタン)をクリックすると、評価結果が出力される。

 [ACCESSIBILITY](アクセシビリティ)/[MOBILE WEB](モバイルWeb)/[PERFORMANCES](パフォーマンス)/[WEB STANDARDS](Web標準)の4グループの検証結果を確認できる。グループを展開すると、グループごとの改善ポイントが表示される(図26)。

図26 グループを展開すると、改善ポイントが表示される

評価の結果、問題ない場合は緑チェック(緑チェック)、改善ポイントがある場合は赤バツ(赤バツ)が表示される。赤バツをクリックすると、改善点の詳細を確認できる。

▲機能一覧に戻る

[Modernizr]パネル

 Modernizrは、ブラウザーの持っている機能を調査するためのモジュールである。Build Insiderで紹介しているので、そちらも参考にしてほしい。

 Modernizrパネル(Interactive Consoleパネルの横にある)には、ページを表示しているデバイスの持っている機能が一覧で表示される。

図27 ブラウザーが持っている機能が一覧で表示される

サポートされている機能は緑チェック(チェック)、サポートされていない機能は赤バツ(バツ)で表示される。

▲機能一覧に戻る

リモートからの接続

 ここまで、ローカルホストでの動作を見てきたが、LAN接続できない端末からリモートで接続して確認したい場合もあるだろう。Vorlon.jsをAzure Web Apps(旧称:Azure Websites)に簡単にデプロイして、インターネット経由で使うこともできる(もちろん、クラウド上に仮想サーバーを立ててインターネットに公開することもできる。この場合、仮想サーバーにログインして、セットアップ手順を実行する必要がある。この方式を採用するメリットは、設定ファイルを変更することにより、自前のプラグインを追加したり、ダッシュボードに認証を設定できたりすることだ。デメリットは、Vorlon.jsが更新されたときに、サーバーのコンソールで再インストールが必要になることや、必要なポートを開放する手順が必要になることなどが挙げられる)。

 ここでは実際に、GitHubのVorlon.jsページからAzure Web Appsにデプロイしてみよう。GitHubのVorlon.jsページにある[Deploy to Azure]ボタンをクリックすると、デプロイを開始できる(図28)。

図28 GitHubのVorlon.jsページにあるReadme.md上の[Deploy to Azure]ボタンをクリックするとデプロイを開始できる

 [Deploy to Azure]ボタンをクリックすると、Azureのデプロイページに遷移する。あとは図29の手順でデプロイしよう。

デプロイ先のAzureサブスクリプションやサイト名などを設定して[Next]ボタンをクリックする

デプロイ先のAzureサブスクリプションやサイト名などを設定して[Next]ボタンをクリックする

Previewとして「Website」と表示されるのを確認して、[Deploy]ボタンをクリックする

Previewとして「Website」と表示されるのを確認して、[Deploy]ボタンをクリックする

自動的にデプロイが進むが、現時点ではプロセスの途中で必ず失敗してしまうようだ

自動的にデプロイが進むが、現時点ではプロセスの途中で必ず失敗してしまうようだ

図29 Azureへのデプロイ手順1(執筆時点では失敗する)

 現時点では、デプロイが必ず失敗してしまう。失敗した原因をAzure Portal(Preview版)で確認してみよう。図30の手順で、原因に対処してデプロイを成功させよう。

先ほどのデプロイされたWeb Appsの[設定]-[継続的なデプロイ]を開いてみると、「Update README.md」が失敗していることが分かる

先ほどのデプロイされたWeb Appsの[設定]-[継続的なデプロイ]を開いてみると、「Update README.md」が失敗していることが分かる

[ログの表示]をクリックしてさらに詳細ログを見ると、Pythonでエラーが発生していることが分かる

[ログの表示]をクリックしてさらに詳細ログを見ると、Pythonでエラーが発生していることが分かる

Pythonの設定が不足しているために発生しているエラーのようなので、Web Appsの[アプリケーション設定]を開いて、[Pythonバージョン]に「3.4」を指定して、[保存]ボタンをクリックする

Pythonの設定が不足しているために発生しているエラーのようなので、Web Appsの[アプリケーション設定]を開いて、[Pythonバージョン]に「3.4」を指定して、[保存]ボタンをクリックする

[継続的なデプロイ]を開いて、[同期]ボタンをクリックする

[継続的なデプロイ]を開いて、[同期]ボタンをクリックする

確認メッセージが表示されるので、[はい]をクリックする

確認メッセージが表示されるので、[はい]をクリックする

しばらく待つと、デプロイが成功したことを表すチェックが表示される

しばらく待つと、デプロイが成功したことを表すチェックが表示される

デプロイが成功したので、ページを開いてみると、Vorlon.jsのダッシュボードが表示される

デプロイが成功したので、ページを開いてみると、Vorlon.jsのダッシュボードが表示される

図30 Azureへのデプロイ手順2(原因に対処してデプロイを成功させる)

 このように、現時点では1回ではデプロイが成功しないが、簡単なステップでAzureのWeb Appsにデプロイできる。これで、インターネットから接続可能なVorlon.jsサーバーが用意できたので、ダッシュボードに表示されている<script>タグをHTMLファイルに追記するだけでデバッグを開始できる。<script>タグの取得元がこれまでの1337ポートではないことにご注意いただきたい。

 それでは、インターネットに公開したページからの接続を確認してみよう。ここでは、iOS(iPod Touch)から接続して確認してみることにする。公開されたページにiOSから接続してみる(図31)。

ダッシュボードのクライアント一覧(CLIENT LIST)にiOSやAndroidが表示される

ダッシュボードのクライアント一覧(CLIENT LIST)にiOSやAndroidが表示される

ダッシュボードの左側にある[Identify a client]ボタンをクリックすると、iOSブラウザー上に識別番号(この例では「2」)が表示される

ダッシュボードの左側にある[Identify a client]ボタンをクリックすると、iOSブラウザー上に識別番号(この例では「2」)が表示される

DOM Explorerタブで要素にカーソルをあてると、iOS上でハイライトされる

DOM Explorerタブで要素にカーソルをあてると、iOS上でハイライトされる

図31 公開されたページにiOSから接続

 ダッシュボードで[Identify a client]ボタンをクリックすると、iOS上のブラウザーで識別番号が表示される。そして、ダッシュボードのDOM Explorerタブで要素を選択すると、iOS上でハイライト表示されることが分かる。

 このように、これまではMacを用意して、ケーブルで接続しなければデバッグできなかったiOSでも、インターネット上にVorlon.jsを配置することで、ブラウザーだけでデバッグが可能になる。Vorlon.jsは、最大50デバイスまで同時に接続できる。

▲機能一覧に戻る

まとめ

 このようにVorlon.jsを使うことで、Macなどのデバイスを準備することなく、ブラウザーだけでデバッグが可能になる。現時点では機能が充実しているとは言えないが、GitHub上で開発が進んでおり、少しずつ機能が追加されている。また本稿では説明しなかったが、プラグインの開発もそれほど難しくはないため、どうしても必要な機能は自分で開発することもできるし、それをGitHubでプルリクエストすることもできる。

 DOM Explorerだけでも便利になる場面があると思うので、ぜひ一度試してみてほしい。

イベント情報(メディアスポンサーです)

サイトからのお知らせ

Twitterでつぶやこう!