linuxBean14.04(58)Object Playgroundをローカルにインストール

ラベル: ,

前の関連記事:linuxBean14.04(57)Eclipseプラグインispaceのコールグラフのエッジの意味を調べる


JavaScriptのプロトタイプチェーンを図示ツールObject PlaygroundはObject Playground: The Definitive Guide to Object-Oriented JavaScriptでオンラインで使えますがローカルにもインストールできるのでLinuxBeanにインストールします。

gitでObject Playgroundリポジトリのダウンロード


まずはNode.jsのインストールを行います。

Node.jsのインストールはlinuxBean14.04(9)node.jsとBracketsのインストールでやったとおりです。

nvm install stableを実行するとv0.12.7がインストールされました。

次にgitリポジトリをローカルにクローンします。

gitはlinuxBean14.04(24)git-guiとgitkのインストールでgit-guiをインストールしたときに既にインストール済です。

git clone https://github.com/jamesshore/object_playground

pq@pq-VirtualBox:~$ git clone https://github.com/jamesshore/object_playground
Cloning into 'object_playground'...
remote: Counting objects: 6736, done.
remote: Total 6736 (delta 0), reused 0 (delta 0), pack-reused 6736
Receiving objects: 100% (6736/6736), 16.18 MiB | 2.50 MiB/s, done.
Resolving deltas: 100% (1814/1814), done.
Checking connectivity... done.

gitコマンドを実行したフォルダにobject_playgroundフォルダができているはずです。

Object Playgroundをビルドする


実行前にまずはビルドが必要ですが、そのビルドの前にファイル名の変更が必要です。

object_playground/node_modules/karma/lib/launchersにあるBase.jsをbase.jsに変更します。

object_playground/node_modules/karma/lib/reportersにあるBase.jsをbase.jsに、Multi.jsをmulti.jsに、Progress.jsをprogress.jsに変更します。

これらの変更はlinuxBeanでは大文字と小文字のファイル名を区別するシステムのために必要な変更です。

ファイルマネージャでobject_playgroundを開いてそこでツール→現在のフォルダを端末で開く。

nvm use stable

これでまずnode.jsを起動します。

./jake.sh karma

> node node_modules/karma/bin/karma start ./build/config/karma.conf.js
INFO [karma]: Karma v0.12.31 server started at http://localhost:9876/

Karmaのアドレスが表示されたらビルド完了です。


KarmaというのはJavaScriptのテストツールだそうです。

Object Playgroundを起動する


Object Playgroundを起動、、、テストツールKarmaを使っているせいか、テストする、というようです。

object_playgroundフォルダでTerminalを起動してまずはnode.jsを起動してからjake.shを実行します。

nvm use stable

./jake.sh run

pq@pq-VirtualBox:~/Source/object_playground$ nvm use stable
Now using node v0.12.7 (npm v2.11.3)
pq@pq-VirtualBox:~/Source/object_playground$ ./jake.sh run
Starting up http-server, serving ./src on: http://0.0.0.0:8080
Hit CTRL-C to stop the server

これでObject Playgroundが起動したのでブラウザでhttp://0.0.0.0:8080にアクセスするとJavaScriptのオブジェクトビジュアライザーが使える状態になりました。


Object Playgroundと同じページが表示されます。

ネット接続を切断した状態では上の動画とコメント欄は表示されませんでした。

オフラインでオブジェクトビジュアライザーが使えるようになるまでは結構待たないといけませんでした。

マシンの性能の問題なのか、切断されたネット上のものにアクセスしにいっていて遅いのかははっきりしませんでした。

user_code.jsを編集して「this」に代わり「context」を使う


Object Playgroundのコメントに作者がやり方を書いてくれていたものです。

グローバルスコープのthisと区別してグラフが描画できるようになります。

object_playground/srcにあるuser_code.jsを編集します。
 exports.evaluate = function evaluate(code) {
  /*jshint evil:true, newcap: false */
  var context = {};
  Function(code).call(context);
  return context;
 };
この15行目を以下のように書き換えます。
 exports.evaluate = function evaluate(code) {
  /*jshint evil:true, newcap: false */
  var context = {};
  eval(code);
  return context;
 };
「this」オブジェクトのノードからのグラフが表示されなくなりました。

コードの最後の行の「this」を「context」に書き換えるとプロトタイプチェーンが図示されました。


グラフの表示はuser_code.jsを編集する前と変化なく「this」オブジェクトのノードから始まっています。

グラフの「this」が「context」に代わったことでグローバルスコープのthisとの区別ができるようになりました。

これによりJavaScriptプロトタイプチェーン(1)プロトタイプチェーン図示ツールで使ったthis - JavaScript | MDNの例でグローバスコープを明示的にthisで指定してもグラフには出現させなくできます。
明示的に書いたグローバルスコープのthisはページをリロードしないとリセットされないことに注意が必要です。

参考にしたサイト


Object Playground: The Definitive Guide to Object-Oriented JavaScript
JavaScriptのプロトタイプチェーンを図示してくれるツールObject Playground。

jamesshore/object_playground · GitHub
Object Playgroundのソースのgitリポジトリ。

Karma - Spectacular Test Runner for Javascript
Object Playgroundで使われているテストツールKarma。

Travis CI Fails with Cannot find module ./launchers/base · Issue #1112 · karma-runner/karma · GitHub
karmaのオリジナルはbase.jsだそうです。Base.jsとなったのはなぜでしょう。

次の関連記事:linuxBean14.04(59)jsdocのインストール

PR

0 件のコメント:

コメントを投稿