Perfume Global Site Project #001 From anno lab is Out!!!!!!!!!!

前回個人的に作ったやつ、実はanno labでも作ってました。

てまひまかけて一生懸命作りました、超自信作です。

是非見てやってください。

一目見ても訳がわからないと思うので、メイキングも用意しました。

ではどうぞ。

動画:Anno Perfume Global Site Project #001 on vimeo
http://vimeo.com/annolab/annoperfumeglobal/
メイキング:
http://annolab.com/annoperfumeglobal/

Perfume global official website
http://perfume-global.com/

となりの要素の表示状態を切り替える(+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

localStorageいいね!

Google Chromeはローカル環境でクッキーを作らないことに数時間気づけず打ちひしがれた心にオアシス。

localStorage。

個人的にはクッキーよりも簡潔に書けるので好きです。

LocalStorageがおもいのほか便利すぎたのでまとめ

ブラウザでストレージ? Web Storageを使いこなそう

が、現状では文字列しか保持できないらしいのでそこだけ注意ですね。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

localStorage.value = true;
obj.checked = localStorage.value;
alert(obj.checked);

結果:なんの冗談かとおもいますよね。

Perfume Global Site Project #001

Perfume Global Site Project #001 でPerfumeのダンスモーションデータと曲データが公開されているので

一緒に公開されているサンプルコードを改造して動画を作ってみました。

Processingを使用してます。

気持ちいいディレイになると確信して作り始めたものの、まあやっぱ難しい。

こだわりだしたらきりがないので途中経過ということにしてアップ。

今後、曲の展開に合わせてパラメータを制御したりカメラをいじったり新しい処理を追加したり…

妄想はつきませんが、手の空いた時にゆっくりやろうかなといったところ。

BVHファイルのフレームレートを変更するperlスクリプト

どうやら巷ではここで配布されているBVHファイルを読み込むのが流行っているようです。

ただ、中には(ファイルに書いてあるはずの)フレームレートが無視されてしまうソフトに苦戦している方もいらっしゃるようですので

(把握してる限りだとCinema4Dがそうっぽい?)

BVHファイルのフレームレートを変更するコンバータを作成しました。

ご利用、再配布等々ご自由にどうぞ。

なお、何か悪いことが起きても責任は取りません。あしからず。

※要perl

conv_bvh_frame_rate.zip