Amazon EC2(linux) で Tower.js

AmazonEC2 上の linux で Tower.js を試してみました。

Node.js を動かすところまでは検索でいろんな情報が見つかるんですが、Tower.jsで検索すると見つからなかったもので記録しておきます。

(別に特殊なことはないんですけどね・・)

  1. Amazon EC2 に登録する
    Amazon EC2を始める(導入編) – .zip -
  2. シェルを起動する

    AWS にログイン


    EC2 Console を開く


    Instances を選択


    インストールしたいインスタンスを選択して Instance Actions から Connect を選択


    今回は用意されているSSHクライアントを使用しました。

  3. MongoDBをインストール
    MongoDBのReplica SetsをUbuntuで試してみる - shinodogg.com -
    (この記事を書いている時点での最新版2.2.0を使いました)
  4. NVMからNode.jsをインストール
    Amazon EC2からnode.jsを使ってみる – .Develop -
    (この記事を書いている時点での最新版0.8.9を使いました)
  5. Tower.jsをインストールしてプロジェクトを作成
    さらばExpressよ!Tower.jsを試すの巻 - コードで一言 -

    僕の場合、プロジェクト作成後の npm tower install の行で下記のエラーが出ました。
    cb() never called!

    npm list を見ると kue というパッケージで unmet dependencies があったので npm install kue して解決。
    無事インストールできました。
    node_modules 内の node_modules へのインストールが危ういっぽい?

  6. 起動!
    $mongod –dbpath /path/to/db/ –logpath /path/to/logfile/ –fork
    $node server.js

ぱちぱちぱちぱち。

となりの要素の表示状態を切り替える(+localStorageへ保存する)

開閉式メニューを実現するのに下記のようなコードをよく見かけるのですが

<a onclick="ChangeVisibleById('childId');">parent</a>
<div id="childId">child</div>

これだとchildIdが2箇所にあって嫌な感じです。

そこで、Visibilityを切り替える対象を隣の要素に限定して下記のようにしてみました。

<a onclick="ChangeVisibleNext(this);">parent</a>
<div>child</div>

こうすれば、どこへでもコピペ可能だしchildにidを書かなくて良いので可搬性バツグンです。

ちなみにChangeVisible~の実装はこんな感じです。

ついでにchild要素にidが指定されていたらVisibilityの値をlocalStorageに保存するようにしてみました。

var PREFIX = "visibility_";// 重複を防ぐためプレフィックスをつけとく(きやすめ)
var STORAGE_NAME="storage_name";// localStorageが使えない環境のためにLSTJSON(※)を使う場合
function ChangeVisible(obj)
{
	obj.style.display = (obj.style.display=="none")?"block":"none";
	if(obj.id) {
		localStorage[PREFIX+obj.id] = obj.style.display;
		LSTJSON.save(STORAGE_NAME);
	}
}
function ChangeVisibleById(id)
{
	var obj = document.getElementById(id);
	ChangeVisible(obj);
}
function ChangeVisibleNext(obj)
{
	do {
		obj = obj.nextSibling;
	} while(obj && obj.nodeType != 1);
	ChangeVisible(obj);
}
// localStorageからVisibilityを拾ってくる処理
function Load()
{
	LSTJSON.load(STORAGE_NAME);
	for(id in localStorage) {
		if(id.indexOf(PREFIX) == 0) {
			var obj = document.getElementById(id.substring(PREFIX.length));
			if(obj) {
				obj.style.display = localStorage[id];
			}
		}
	}
}

なお、htmlとhtaでnextSiblingの返すオブジェクトが違ったようなので、ChangeVisibleNextの実装にはこちらのサイトを参考にしました。
Finding HTML elements using Javascript nextSibling and previousSibling

(※)LSTJSONについてはこちら
htaでlocalStorageっぽいものを使えるようにしてみる

htaでlocalStorageっぽいものを使えるようにしてみる

localStorage超便利るんるんーって言ってたところで、htaではlocalStorageが使用できないことが判明(使えないよね?)

まぁhtaならファイル読み書き余裕ですしどっかローカルに保存しときゃ問題ないんですが

htaとhtmlとで違うコードを書かなきゃいけないのはいやだったので作りました。

localStorageが使えない環境だと自前で生成したlocalStorageを、localStorageが使える環境だと普通にlocalStorageを使用します。

■使用法

  1. localStorageを使用するより前(onloadあたり?)にLSTJSON.load(filename)を一度だけ呼んでおく
  2. 普通にlocalStorageにホイホイ代入
  3. 保存したいタイミング(onunloadあたり?)でLSTJSON.save(filename)を呼ぶ

※filenameはloadとsaveで対応がとれていれば適当で構いませんが、重複すると上書きされるので一意なものにすることをおすすめします。

※ファイルは環境変数%TMP%のフォルダに作られます。

■通常のlocalStorageと比べて良い点

・保存したファイルをhtaと一緒にパッケージとして配布できる(保存場所は工夫する必要あり?)

・ファイル単位で管理されるため、オリジン(プロトコル、ドメイン、ポート)をまたいで共有できる

■悪い点

・わざわざloadとsaveをする必要がある

・StorageクラスにあってArrayクラスにない機能が使えない

var LSTJSON = {};

// localStorageが使えない時のみ有効にする
if(!localStorage) {
	// json2を使うので読み込んどく。パスは適当に書き換えてください。
	// json2を持っていない方はこちらからDL→https://github.com/douglascrockford/JSON-js
	document.write('<script type="text/javascript" src="./js/json2.js"></sciprt>');

	var localStorage = new Array();

	LSTJSON.load = function(filename) {
		var fso = new ActiveXObject("Scripting.FileSystemObject");
		// 作成済みなら%TMP%下にある
		var filepath = fso.BuildPath(fso.GetSpecialFolder(2).Path, filename+".json");
		// 空っぽだと困るので初期値を入れておく
		var str = "{}";
		if(fso.FileExists(filepath)) {
			var stream = fso.OpenTextFile(filepath);
			str = stream.ReadAll();
			stream.Close();
		}
		localStorage = JSON.parse(str);
	};

	LSTJSON.save = function(filename) {
		var fso = new ActiveXObject("Scripting.FileSystemObject");
		// %TMP%下に作成
		var filepath = fso.BuildPath(fso.GetSpecialFolder(2).Path, filename+".json");
		var stream = fso.CreateTextFile(filepath);
		stream.Write(JSON.stringify(localStorage));
		stream.Close();
	};
}
// localStorageが使える時はloadとsaveを無視する
else {
	LSTJSON.load = function(){};
	LSTJSON.save = function(){};
}

GitHubに上げました。不便ところは多々あると思うのでご協力お願いします。

GitHub – WebStorageOnHTA