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がインストールされます。

pq@pq-VirtualBox:~$ wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.25.1/install.sh | bash
=> Downloading nvm as script to '/home/pq/.nvm'

=> Appending source string to /home/pq/.bashrc
=> Close and reopen your terminal to start using nvm

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

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

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

pq@pq-VirtualBox:~$ nvm install stable
--2015-05-04 14:03:39--  https://nodejs.org/dist/v0.12.2/node-v0.12.2-linux-x86.tar.gz
nodejs.org (nodejs.org) をDNSに問いあわせています... 165.225.133.150
nodejs.org (nodejs.org)|165.225.133.150|:443 に接続しています... 接続しました。
HTTP による接続要求を送信しました、応答を待っています... 200 OK
長さ: 8846420 (8.4M) [application/octet-stream]
`/home/pq/.nvm/bin/node-v0.12.2-linux-x86/node-v0.12.2-linux-x86.tar.gz' に保存中

100%[======================================>] 8,846,420    780KB/s   時間 14s

2015-05-04 14:03:54 (632 KB/s) - `/home/pq/.nvm/bin/node-v0.12.2-linux-x86/node-v0.12.2-linux-x86.tar.gz' へ保存完了 [8846420/8846420]

Now using node v0.12.2 (npm v2.7.4)

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

Vorlon.JSのインストール


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

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

npm i -g vorlon

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

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

pq@pq-VirtualBox:~$ vorlon
Express server listening on port 1337

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)ウィンドウのスナップを有効にする

PR

0 件のコメント:

コメントを投稿