linuxBean14.04(21)Bloggerで使うJavaScriptの開発環境

前の関連記事：linuxBean14.04(20)BloggerにSyntaxhighliterを導入する方法

Bloggerで使うJavaScriptの開発環境を作ります。コードエディタはBrackets、ローカルサーバはnode.jsのhttp-server、デバッガはChromeを使います。ローカルで編集しているjsファイルをローカルサーバでBloggerテンプレートに読み込ませてデバッグするので、テストブログが必要になります。
（2016.7.22追記。linuxBean14.04(125)Bloggerで使うJavaScriptの開発環境:その2の方法の方が簡便でよいです。）

ローカルサーバnode.jsのhttp-serverをインストール

node.jsはlinuxBean14.04(9)node.jsとBracketsのインストールでnvmを使ってインストールしました。

今日インストールしなおしたらstableはv0.12.3になっていました。

ローカルサーバはNode.jsのhttp-serverっていうコマンドラインのウェブサーバーが便利 | Firegobyで教えていただいたindexzero/http-server · GitHubをインストールします。

まずnode.jsを起動します。


http-serverのインストールをします。


あとはhttpアクセスさせたいファイルより上の階層でこのコマンドを実行するだけです。

デフォルトではサーバアドレス0.0.0.0、ポート番号8080になります。

Chromeでは0.0.0.0にアクセスできませんので、アドレス12.0.0.1でサーバアドレスを指定します。

http-server -a 127.0.0.1

試しにまずlinuxBean14.04(20)BloggerにSyntaxhighliterを導入する方法のSyntaxHighlighterのBrushファイルを作成することにします。

syntaxhighlighter_3.0.83.zipを解凍してできたsyntaxhighlighter_3.0.83/scriptsフォルダをファイルマネージャで開きます。

ツール→現在のフォルダを端末で開く。


Chromeを起動してhttp://127.0.0.1:8080/shCore.jsにアクセスしてみます。

shCore.jsの内容が表示されたら成功です。

今回はMakefileのBrushファイルを作ることにしますので、このフォルダにあるshBrushMakefile.jsを作ります。

Bloggerのテンプレートにローカルサーバのjsファイルを読み込ませるタグを挿入する

linuxBean14.04(20)BloggerにSyntaxhighliterを導入する方法のHTML/JavaScriptガジェットの30行目に以下を挿入します。

</script>
<script type="text/javascript" src="http://127.0.0.1:8080/shBrushMakefile.js"></script>
<script>

BracketsでshBrushMakefile.jsを編集する

Bracketsは単にコードエディタとして使うだけです。

残念ながらライブプレビューとかTheseusを利用する方法は思いつきませんでした。

とりあえず今回は環境を整えるだけですので、shBrushBash.jsの内容をshBrushMakefile.jsにコピペします。

Brush.aliases = ['Makefile'];

ブラシを呼び出すエイリアス名をMakefileに変更して保存します。

Chromeでデバッグする

Bloggerの投稿のhtmlモードで以下のタグで囲んでコードを入力します。

<pre class="brush: Makefile;">　</pre>

LibreOffice(61)linuxBeanでJavaの例をmakeで使ったLibreOfficeの例についてきたMakefileを表示させてみました。

Chromeのデバッグ機能を使うにはChromeは右クリック→要素を検証。


Sourcesを選択してローカルサーバのアドレスからshBrushMakefile.jsを開きます。

ブレークポイントを設定してページをリロードするとブレークします。


あとはBracketsでjsファイルの編集→保存、Chromeでリロード→デバッグ、Bracketsで編集→、、、というサイクルで開発していけますね。

node.jsのhttp-serverを立ち上げるシェルスクリプトを作成する

#!/bin/sh
nvm use stable
http-server -a 127.0.0.1

これをhttp.shというファイル名で保存してパーミッションの実行を「すべて」に変更したあと、ファイルマネージャでダブルクリックして「端末で実行する」としてもhttpサーバが立ち上がりません。

#!/bin/sh
nvm use stable
http-server -a 127.0.0.1
read a

最終行にread aを追加してシェルスクリプトの結果を見てみるとnvm: not foundとなっています。

Terminalを立ち上げてnvmを実行するとちゃんと実行されているのにシェルスクリプトで実行するとnvm自体が存在しないといわれるとはよく理解できませんでした。

いろいろ調べた結果、なんとnvmはコマンドではなくて~/.nvm/nvm.shで定義されているbash関数とということを知りました。("nvm: command not found" when in sub-shell · Issue #521 · creationix/nvm · GitHub）

なのでnvmを実行する前に~/.nvm/nvm.shを読み込まないといけません。

単にnvm.shを読み込むだけではダメで、起動したシェルに読み込まないといけません。

#!/bin/sh
. ~/.nvm/nvm.sh
nvm use stable
http-server -a 127.0.0.1
read a

2行目の先頭にあるドット.が現在のシェルを表し、それに~/.nvm/nvm.shを読み込ませています。(関数の使用方法 - UNIX & Linux コマンド・シェルスクリプト リファレンス)

これでnvmが実行できるようになりました。

N/A: version "stable" is not yet installed
ところがstableバージョンがないといわれて次のコマンドが実行できません。

バージョン番号を指定しても結果は同じです。

これの解決方法を見つけるのも苦労しました。

検索しても解決法を見つけられずcreationix/nvmのインストール方法を再度読み直してみると、こんなことが書いてありました。

The script clones the nvm repository to ~/.nvm and adds the source line to your profile (~/.bash_profile, ~/.zshrc or ~/.profile).

nvmのインストーラはbashの設定ファイルに何か追記しているようです。

linuxBeanでは~/.bash_profile、 ~/.zshrc、 ~/.profile何れのファイルもなく~/.bashrcファイルをみてみるとnvmに関係ありそうな記載をみつけました。

export NVM_DIR="/home/pq/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"  # This loads nvm

nvm.shを読み込む前に環境変数NVM_DIRを設定しています。

#!/bin/sh
export NVM_DIR="/home/pq/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"  # This loads nvm
nvm use stable
http-server -a 127.0.0.1

これでうまくいきました。

このhttp.shを実行したフォルダ以下がhttp://127.0.0.1:8080でアクセスできるようになりました。

これでいちいちTerminalにコマンドを打ち込まなくてもhttpサーバで見たいフォルダにこのhttp.shをコピペして「端末で実行」するだけで済みます。

参考にしたサイト

Node.jsのhttp-serverっていうコマンドラインのウェブサーバーが便利 | Firegoby
ローカルサーバでテストするにはぴったりの簡単ウェブサーバが紹介されています。

indexzero/http-server · GitHub
Node.jsのhttp-serverの開発元。インストールスクリプトを使うと~/.bashrcに環境変数NVM_DIRを設定してくれます。

Ubuntu日本語フォーラム / シェルスクリプト
シェルスクリプトを実行してTerminalを閉じないようにするにはread aを追加するだけです。

"nvm: command not found" when in sub-shell · Issue #521 · creationix/nvm · GitHub
nvmはコマンドではなくnvm.shで定義されるbash関数です。

関数の使用方法 - UNIX & Linux コマンド・シェルスクリプト リファレンス
shファイルで定義されたbash関数をカレントシェルに読み込むには「. shファイル」とします。

次の関連記事:linuxBean14.04(22)Bracketsの拡張機能の右クリックメニューを追加する