linuxBean14.04(9)node.jsとBracketsのインストール

前の関連記事：linuxBean14.04(8)GeanyでLibreOfficeのPythonマクロをデバッグする

Bloggerで使うJavaScriptの開発環境を整えたいと思っているのですが、満足できる方法がなかなか思いつきません。とりあえずBracketsのプラグインtheseusを使ってみたいのとVorlon.JSも使ってみたいと思ったのでそれらに使うNode.jsをインストールすることにしました。

nvmからnode.jsをインストール

Synapticパッケージマネージャでnodejsを検索するとバージョン0.10.25がでてきます。

Node.jsをみると現行バージョンは0.12.2ですので、PPAを探すことにしました。

node.js : chris leaがありましたがバージョン0.10.37ですのでUbuntu公式リポジトリの0.10.25とそう変わりないと思い、どうしたものかと調べているとnvmというのを知りました。

nvmはNode Version Managerのことで、node.jsのインストールだけではなく複数のバージョンのnode.jsの使い分けも簡単にできるようになります。

まずはnvmのインストールです。

(2016.5.2追記。nvmのインストール前にgitのインストールが望ましいです。理由はlinuxBean14.04(107)nvmでnode.jsのインストールができない問題への対応参照。gitのインストールはlinuxBean14.04(24)git-guiとgitkのインストールでしました。）

(2016.5.2追記。nodejs.orgがHTTPからHTTPSに変更になった関係でnvmからnode.jsをインストールするには対策が必要になりました。linuxBean14.04(107)nvmでnode.jsのインストールができない問題への対応参照。)

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.25.1/install.sh | bash

linuxBeanのTerminalからこのコマンドを実行するだけであっという間にnvmがインストールされます。


nvmを使うためには一旦Terminalを閉じてTerminalを開きなおさないといけません。

続いてnvmを使ってnode.jsのインストールです。

nvm install node.jsのバージョン　でバージョンを指定してインストールもできるのですが、今回はstableというバージョンを指定してインストールしました。


node.js v0.12.2がインストールされました。

Vorlon.JSのインストール

Vorlon.JSはマイクロソフト発のオープンソースJavaScriptデバッガなのですが、ちょっと私には使い道がわかりませんでした。

とりあえずnode.jsから簡単にインストールできるのでインストールしてみました。

npm i -g vorlon

このコマンドだけでインストールできます。

インストールが完了したらvorlonとコマンドを実行します。


ChromeでVorlon.js - Test pageを開きます。

このテストページには<script src="http://localhost:1337/vorlon.js"></script>が埋め込まれておりVorlon.JSでデバックできるようになっています。

Chromeを別のウィンドウで立ち上げてhttp://localhost:1337を開きます。

これでテストページがVorlon.JSでデバックできます。


Modernizrタブをみるとデバッグの対象としているページを開いているブラウザのCSSなどの対応条件が表示されます。

Bracketsのインストール

BracketsはAdobe発のオープンソーステキストエディタです。

主にHTML,CSS,JavaScriptを対象にしているようで、theseusというプラグインによるJavaScriptデバッガがいままでと違うものということでインストールしてみました。

Brackets : “WebUpd8” teamというPPAがあったのでここからインストールしました。

deb http://ppa.launchpad.net/webupd8team/brackets/ubuntu trusty main

Synapticパッケージマネージャのリポジトリのソースにこのリポジトリを追加します。


「再読込」後左下の「由来」ボタンをクリックしてLP-PPA-webupd8team-brackets/trustyを選択するとBracketsがでてきます。


バージョン1.3.0がインストールできました。

豆メニュー→プログラミング→Bracketsで起動できます。

Bracketsのメニューにはコピペがないのでコピペはショートカットだけの操作になるようです。

Bracketsショートカット集 - Qiita

参考にしたサイト

Brackets - A modern, open source code editor that understands web design.
Adobe発のオープンソーステキストエディタ。主にHTML,CSS,JavaScriptが対象。

adobe-research/theseus
Bracketsのプラグイン。JavaScript用デバッガ。

Adobe製のJavaScriptデバッガTheseusがすごい - Qiita
この記事にTheseusを教えて頂きました。

Vorlon.JS
マイクロソフト発のオープンソースJavaScriptデバッガ。

Node.js
Chromeと同じJavaScriptエンジンV8でローカルにJavaScriptを使える環境。

creationix/nvm
node.jsはこのNode Version Managerを使ってインストールしました。

Brackets : “WebUpd8” team
BracketsのPPA。

Bracketsショートカット集 - Qiita
コピー、ペースト、カットなどはメニューにはないのでショートカットでのみの操作になります。

次の関連記事:linuxBean14.04(10)ウィンドウのスナップを有効にする