つくる Archive

前回の3Dが面白かったので、調子に乗ってなつかしのBoids(群生シミュレーション)をつくってみました。
Boidsとは、BirdとAndroidをかけた造語で、鳥の群生をシミュレートするための歴史ある理論です。

固体同士が互いにどのくらい影響を及ぼすかという係数を変えることで、鳥のようにも虫のようにも動かすことができます。

この理論を元に、jQueryで魚へんの漢字を使った鮨ネタの水族館を作ってみました。

Sushirium
http://www.memorycraft.jp/sandbox/sushi/

ロールオーバーで画面左上に英語名が、クリックすると、その鮨ネタのイメージ写真が表示されます。
動きを止めたいときは、画面左上の「Stop the world」ボタンをクリックします。
作っていてわかったんですが、鮨ネタって以外と「さかなへん」が少ないですね。

ほんとうは外人さんが一番喜ぶんだろうけど、文字化けするだろうな。。。

タグクラウドを３D化する試みはいくつかあるみたいですが、javascript(jQuery)ではないっぽいので作ってみました。setIntervalの代わりにjQueryのタイマープラグインを使っています。

ul要素 のタグリストを元にして、position:absolute;のリンクブロックを作り、それぞれを立方体(もしくは直方体)になるように位置を計算して、タイマーやマウスアクションのイベントで再計算する感じです。今回はタイマーで自律的にゆっくりと動かしています。

タグの数が立方数なら立方体となり、中心で回転しますが、

立方数でない場合は中心がずれます。

これはこれで動きとしては面白いかも。

jQueryのプラグインをリリースしました。

jQuery 3 State Switch Plugin
http://www.memorycraft.jp/project/jquery/j3ssw/ja.html

ソートキーや検索結果のフィルターのインターフェースとして使います。

サンプル

使い方
このようにマークアップして

<div id="j3ssw">
    <ul>
        <li><label for="radio1"><input type="radio" id="radio1" name="radioname" value="Product">Product</label></li>
        <li><label for="radio2"><input type="radio" id="radio2" name="radioname" value="Price">Price</label></li>
        <li><label for="radio3"><input type="radio" id="radio3" name="radioname" value="Brand">Brand</label></li>
    </ul>
</div>

アクティベートをすると使えます。

$(document).ready(function() {
	$("#j3ssw").j3ssw();
});

ちんまりしたものですが、オープンソースソフトウェアを１つリリースするのに、どういった工程をたどり、どのくらい手間がかかるのかを一度実感したかったので、少し体裁を整えてみました。

実装は一瞬で終わったんですが、それよりも、プロジェクトサイトの作成やドキュメントの作成と翻訳、圧縮バージョンを用意したりjQuery Pluginに登録したりと、リリース周りが何倍も手間でした。つくりっぱでポンとアップすれば楽だけど、体裁を整えようとすると急に手間になりますね。まぁ小さいソフトウェアなので相対的にドキュメンテーションの比率が大きくなるのは当たり前かも知れませんが。。。

詳しくは、プロジェクトサイトを見てください。サンプルとドキュメントがあります。フィードバックにTwitterを使ってみたので、感想などいただけると幸いです。

Flashでレーダーチャートをつくる機会があったので、メモします。
AS2 なので、AS3にする場合は、適宜書き換えてください。

コードは概ね以下のようになっています。
上のサンプルのように動的に数値を変更する場合は、コントロールのリスナー等と組み合わせて描画毎にレーダーのムービークリップを削除するなどしてください。

//色
var RAEDER_COLOR:Number = 0x01B0F0;
//透過度
var RAEDER_PERCENT_OPACITY:Number = 40;
//最大値
var RAEDER_MAX_VALUE:Number = 10;
//データ
var RAEDER_COUNT:Number = 8;
//NumericStepperのリスナー
var stepListener:Object;


/**
 * 初期化して生成
 */
function init():Void{
	stepListener = new Object();
	stepListener.change = recreate;
	for(var i=1;i<=RAEDER_COUNT;i++){
		this["step" + i].addEventListener("change", stepListener);
	}
	createRaeder(getValues(), indicator);
}

/**
 * 再生成
 */
function recreate():Void{
	removeMovieClip(indicator.raeder);
	createRaeder(getValues(), indicator);
}

/**
 * データの取得
 * @return データ配列(レーダーの時計回り順)
 */
function getValues():Array{
	var values:Array = new Array();
	for(var i=1;i<=RAEDER_COUNT;i++){
		values.push(this["step" + i].value);
	}
	return values;
}

/**
 * レーダーの生成
 * @param vallues データ配列
 * @param target レーダーを生成ムービークリップ
 */
function createRaeder(values:Array, target:MovieClip):Void{
	
	var values:Array = getValues();
	var angle:Number = 360 / RAEDER_COUNT;
	var degrees:Array = new Array(RAEDER_COUNT);
	var points:Array = new Array(RAEDER_COUNT);
	var raeder:MovieClip = target.createEmptyMovieClip("raeder", target.getNextHighestDepth());
	var offset:Number = target._width/2;
	var scale:Number = (target._width/2) / RAEDER_MAX_VALUE;
	
	for(var i=0; i<RAEDER_COUNT; i++){
		degrees[i] = 270 + angle * i;
		points[i] = {x:Math.cos(degrees[i] * Math.PI / 180) * values[i] * scale + offset,
					 y:Math.sin(degrees[i] * Math.PI / 180) * values[i] * scale + offset};
	}
	raeder.beginFill(RAEDER_COLOR, RAEDER_PERCENT_OPACITY);
	raeder.moveTo (points[0].x, points[0].y);
	for(var j=1;j<RAEDER_COUNT;j++){
		raeder.lineTo (points[j].x, points[j].y);
	}
	raeder.endFill();
}

//初期化
init();

前回に引き続き、Ubiquityコマンドをつくりました。今回は、ページ遷移をせずにAjaxを使って結果をコマンドウィンドウに表示させてみました。題材はWebページの戦闘力を測定するWeb Scouter(Webスカウター)です。

コマンドの使い方
使い方は簡単です。alt + spaceキー (Mac: option + spaceキー)
でUbiquityを起動したあと、

scouter http://www.memorycraft.jp/

でコマンドウィンドウに数値が表示されます。
scouterの後にスペースを入れた時点で、現在表示されているURLがデフォルトでサジェストされて、測定が始まります。数値が表示されている状態でEnterキーを押すとWeb Scouterのサイトが開き、詳細な測定結果が表示されます。

コマンド入力の途中でscouterコマンドがサジェストされるので、その時点でスペースを入れても測定が出来ます。

sc http://www.memorycraft.jp/

コマンドのインストールは続きから

続きを読む...

前回書いたように、Ubiquityはコマンド自体をユーザーが作成、公開できるので、自分でも作ってみました。

翻訳作業や普通にWebを閲覧していると、和英、英和で調べることが多く、最近ではALCをよく使用しています。例文やイディオムが豊富なので便利なので、Ubiquity経由で検索できるようにしました。

コマンドの使い方
使い方は簡単です。alt + spaceキー (Mac: option + spaceキー)
でUbiquityを起動したあと、

和英：「猫」の英語を調べる場合

alc 猫

英和：「dog」の日本語を調べる場合

alc dog

それぞれEnterキーを押した時点でALCの検索ページにジャンプします。
ページ上で文字列を選択している場合は、自動的にパラメータとしてサジェストされます。

コマンドのインストールは続きから

続きを読む...

DataGridでスクロールバーの右上にコントロールを追加したい場合があります。
たとえば以下のようにデータを更新するためのボタンなどです。

しかしDataGridののデフォルトの仕様では、横スクロールバーの表示/非表示によって、縦スクロールバーの位置とサイズが切り替わるために、ボタン位置がスクロールボタンと重なってしまうことになりうまくいきません。ここでは、その解決策を探っていきます。

続きを読む...

Google Mapsのストリートビューが日本にも登場した。 既にAPIもあるので、駅から行きつけの飲み屋までの道をウォークスルーするオートパイロットデモを作ってみました。自動的にナビゲートしてくれます。

結果、ほぼアド街になった。

。。。のですが、長い距離を歩かせると、Googleにマルウェアからのリクエストだと思われるらしく、以後のGoogle検索のページでWe're Sorryのページが出てしまうので、短い版をのせておきます。

私の環境では、問題なかったのですが、もしこのバージョンでGoogle に怒られてしまったら、申し訳ありませんが、Google関連のCookieを全削除した後、We're SorryページのCAPTCHA認証を通して、再度検索を試みてください。

続きを読む...

一人ですが、、、

英語のドキュメントを調べていていつも思うのは、同じところを何度も読み返すたびに、同じ単語をしらべたりして、二度手間で、毎回、最終的にこれ最初に全部翻訳しとけばよかった、と思うこと。

SproutCoreをいじりはじめて、予想以上に便利そうなのと、予想以上にクセがありそうなので、気になってドキュメントを見ているうちに、上記のような理由で翻訳してみようと思い立ちました。

SproutCore ドキュメント翻訳

翻訳は現在進行中で、進行状況は気まぐれです。
翻訳もいいかげんですが、SproutCoreに興味のある方には参考にはなるのではないでしょうか。

翻訳済みのものはこちらにショートカットがあります。

本家Wikiも現在進行中で、新しいページが増えていっていますが、こちらの翻訳Wikiでは、興味のあるところを優先的に翻訳しています。全部訳す前に力尽きると思いますので、興味ある方はご協力ねがいまっす。

あるコンポーネントの背面に配置されている親子関係ではない別のコンポーネントがあった場合、前面のコンポーネントを透かしてクリックしたいときがある。
たとえば、コンポーネントの前面にエフェクト装飾用のコンポーネントを置きたいときなど、、

親子関係ならば、mouseChildrenやmouseEnabled などで対応できるが、
兄弟関係ではそれが出来ない。
そういうときは、hitAreaを使うといいみたい。

続きを読む...

古いサイトのリニューアルなんかだと、過去のデータ資産がＤＢ化されていない場合がよくあって、しかたなく既存サイトのデータを無理やり整形したりとかするのだけど、似た状況があったので、Pipesの新モジュールFetchPageを使ってみた。

ドキュメント(適当訳)によると、

このモジュールは、RSSなどのXMLではなく、HTMLそのものを文字列データソースとして読み込み、RSSに変換したり、Regexモジュールなどを使用して他のデータとマージしたりできるというもの。

要はHTMLのスタイルとかタグとかを取り外して文字情報だけをXMLとして抽出できるということで、世界中のサイトがデータベースになるよってことみたい

ためしにこういうカタログサイトの一部を切り出してJSONフォーマットでこのページに取り込んで別のスタイルをつけてみた。

続きを読む...

最初自分でデザインするのが面倒で、vicunaのテンプレートを使っているけど、多少は自分で作らないと愛着がわかない。
ので、ちょっとだけ手を加えてみた。

まず、追加、変更する画像と新規クラスを追記したCSSをアップしてから、FireBugで対象となるパーツを"Inspect"すると、右ペインに適用されているスタイルが継承元から表示されるので適宜変更して、いい感じに表示されたら右ペインから変更箇所をコピーして元のCSSファイルに反映させる。

以上。ほんとに便利だなぁ。

これからも、気が向いたらいろいろ追加したりして、飽きないようにしよう。自分が。

ちょっと前にYahooPipesで遊んでみたのをメモがわりとして載せておきます。

なぜか当時作成したときのアカウントでログインできなくなってしまって手を加えられない。。。
なんでUSとJapanでID違うんだよー。

こんなの作って遊んでました。

Pipes:はてな？教えて！知恵袋
はてな人力検索と教えてGooとYahoo知恵袋に同時に質問を投げます。
なんつって教えてGooの検索結果がむちゃくちゃ。文字コードかな？

続きを読む...

百式さんの記事にあった気になるツール。ソーシャルマウストラッカーとでも言えばいいのかな？

リンク：ThatsMyMouse

このサイトにあるスクリプトを埋め込んだページでは そのページを訪れた人のマウスが表示され、
ビジター同士でチャットしたり、そのページに招待もできるみたい。
面白そうなので、このページに埋め込んでみました。

続きを読む...