JavaScript

[CSS3]scale

scaleプロパティ。
全て自作。

WindowsXPの下記のブラウザで動作を確認しました。
これら以外のブラウザは正しく動作しない可能性が高いです。
Safari 4.0.4
Google Chrome 4.0.249.89
SRWare Iron 4.0.280

マウスホイール:ズームインアウト
ドラッグ:日本移動

scale


[CSS3]rotate

rotateプロパティ。

WindowsXPの下記のブラウザで動作を確認しました。
これら以外のブラウザは正しく動作しない可能性が高いです。
Safari 4.0.4
Google Chrome 4.0.249.89
SRWare Iron 4.0.280

文字の上の丸をドラッグ:移動

rotate


[JavaScript]fill up

3時間くらいでササッと作ったものなんで
生暖かい目で見てください。
jQueryなどのライブラリを使わず全て自作しました。
元ネタはこちら

左が重い方は右へ

flash/other/13/ flash/other/14/r

応用編
四角クリック:対象矩形を fill up

追記:応用編2
縦横複合

[JavaScript]ScrollBar on javascript

javascriptです。

全て自作しました。

上部サムネクリック:対象画像までスライド
マウスホイール:スライド
バードラッグ:ドラッグ
バーを投げる:飛んでく


スクリーンショット1

ScrollBar on javascript

WindowsXPの下記のブラウザで動作を確認しました。
Firefox3.5
IE7
GoogleChrome4.0.249.78 (36714)
Safari4.0

[JavaScript]maru on ajax

ajaxです。

marunouchi.com的なものを作ってみました。
全て自作しました。

ブラウザウィンドウリサイズ:並び替え
リンクマーク付き画像クリック:リンク先へ
リンクマーク無し画像クリック:拡大画像表示


スクリーンショット1

maru on ajax

[JavaScript]XMB on JS

ajaxです。

クロスメディアバー的なもの
全て自作しました。

追記:Firefoxでホイールが効かなかったのを修正しました。

マウスホイール:サムネイルスライド


スクリーンショット1

XMB on ajax

[Yahoo!ウィジェット]基本メモ

基本メモ。

ウィジェットエンジンをダウンロードしてインストール。
http://widgets.yahoo.co.jp/download/

開発ツール、リファレンスはここ。
http://widgets.yahoo.co.jp/workshop/

ウィンドウを生成

var field=new Window();
field.title="frasio report";
field.width=480;
field.height=480;
field.visible=true;
field.shadow=true;

画像を配置

var im=new Image();
im.src="images/img00.png";
im.hOffset=10;
im.vOffset=10;
field.appendChild(im);

テキストを配置

var t=new Text();
t.hOffset=10;
t.vOffset=10;
t.size=12;
t.color="#000000";
field.appendChild(t);

入力テキストを配置

var texinput=new TextArea();
texinput.width=200;
texinput.height=150;
texinput.bgColor="#ffffff";
texinput.bgOpacity=255;
field.appendChild(texinput);

Flashを配置

var f=new Flash();
f.src="flash/item.swf";
f.hOffset=100;
f.vOffset=50;
field.appendChild(f);
//flash上はウィジェットをドラッグできない

Webを配置

var w=new Web();
w.hOffset=200;
w.vOffset=200;
w.width=280;
w.height=280;
w.url="http://www.yahoo.co.jp/";
field.appendChild(w);
//表示に時間がかかる
//jsが効かなかったり文字化けしたりして実用的ではない

オンライン上のxmlをロードして解析する。

get_xml();

function get_xml(){
	var url=new URL();
	var xmlstr=url.fetch("/test/20/test.xml");
	var xml=XMLDOM.parse(xmlstr);
	var myxml=xml.evaluate("metadata");
	var node=myxml.item(0);
	var str=node.evaluate("string(name)");
	log(str);
	//strにnameタグの「frasio report」という文字列が格納されている
}

ローカルのxmlをロードして解析する。

get_local_xml();

function get_local_xml(){
	var xmlstr=filesystem.readFile("test.xml");
	var xml=XMLDOM.parse(xmlstr);
	var myxml=xml.evaluate("metadata");
	var node=myxml.item(0);
	var str=node.evaluate("string(name)");
	log(str);
	//strにnameタグの「frasio report」という文字列が格納されている
}

テキストファイルをユーザ指定場所に保存する。

save_text("保存するテキスト");

function save_text(target_str){
	var destination=saveAs(".txt");//ユーザに保存先を指定させる
	if(destination==null)return;
	if(!filesystem.itemExists(destination)){
		filesystem.writeFile(destination, target_str);
		return true;
	}
	return false;
}

ファイルのドロップを受け付ける

field.onDragDrop=when_file_drop;

function when_file_drop(e){
	var files=e.items;
	var ft=get_filetype(files[0]);

	if(ft!="jpg")return;

	var img=new Image();
	img.src=files[0];
	field.appendChild(img);
}
function get_filetype(filepath){
	return filepath.toString().split(".").pop();
}