シリーズ第2弾
overflowを変更してもreload
もちろんさかのぼった親要素の変更も有効
プログラム: 2007年12月アーカイブ
ExternalinterfaceでHTML Elementを含めた値を渡そうとすると
「Error calling method on NPObject!」といわれる。
まあ、自分が悪いんですが。
そこそこ早い。
Mathクラスなんてはじめて使ったかも。
image_corner = ( function () {
var curve = 0.3;
curve /= 2;
var radius = curve * 100;
var height_size;
var width_size;
var id_class = 'image_corner';
var rect = new Array( '', '', '', '', '' );
var coner = function ( img, func ) {
var div = img.parentNode;
var clone_img = img.cloneNode( true );
clone_img.style.background = 'transparent';
var r_pow = Math.pow( radius, 2 );
for ( var current = 0; radius >= current; current++ ) {
var new_img = clone_img.cloneNode( true );
div.appendChild( new_img );
var base = Math.abs( Math.floor( Math.sqrt( r_pow - Math.pow( current
|| 1, 2 ) ) ) - radius );
func( current, base );
new_img.style.clip = 'rect( ' + ( rect.join( 'px ' ) ) + ' )';
}
};
var render = function ( org_img ) {
org_img.className += ' ' + id_class;
var img = org_img.cloneNode( true );
var int_or = function ( param ) { return parseInt( img[param] ) ||
parseInt( img.style[param] ); };
height_size = int_or( 'height' );
width_size = int_or( 'width' );
radius = height_size * curve;
var parent_elem = document.createElement( 'div' );
parent_elem.style.position = 'relative';
parent_elem.style.width = width_size + 'px';
parent_elem.style.height = height_size + 'px';
img.style.position = 'absolute';
rect = [ radius, width_size, ( height_size - radius ), 0, '' ];
img.style.clip = 'rect( ' + ( rect.join( 'px ' ) ) + ' )';
var parent = org_img.parentNode;
parent.replaceChild( parent_elem, org_img );
org_img.style.display = 'none';
parent_elem.appendChild( org_img );
parent_elem.appendChild( img );
//top coner
coner( img, function ( current, base ) {
rect[0] = radius - current;
rect[1] = width_size - base;
rect[2] = radius;
rect[3] = base;
} );
//button coner
coner( img, function ( current, base ) {
rect[0] = height_size - radius;
rect[1] = width_size - base;
rect[2] = height_size - Math.abs( current - radius );
rect[3] = base;
} );
};
var clear = function ( elem ) {
var org = ' ' + elem.className + ' ';
var rep = org.replace( ( new RegExp( '\s' + id_class + '\s' ) ), '' );
if ( org == rep ) return;
var parent = elem.parentNode;
parent.parentNode.replaceChild( parent, elem );
};
return {
render : render,
clear : clear,
curve : curve,
id_class : id_class,
dummy:null
};
} )();
http://d.hatena.ne.jp/susie-t/20061004/1159942798
offsetTop、offsetLeftは扱いが結構面倒。
特に親要素のpositionの値によって0の位置が変わるのが嫌。
なので、とりあえずそれだけでも何とかするコードを書いた。
要jQuery
var pos = ( function ( base_elem ) {
var parent = base_elem.parentNode;
var e_top = 0;
var e_left = 0;
return ( function ( elem ) {
var t = elem.tagName;
if ( !t || t.toLowerCase() == 'body' ) return;
var pos = $.curCSS( elem, 'position' ) || 'static';
var par = elem.parentNode;
if ( pos != 'static' ) {
e_top += elem.offsetTop;
e_left += elem.offsetLeft;
}
arguments.callee( par );
return [ e_top, e_left ];
} )();
} )( elem );
embed要素のstyle.positionを変更すると、
表示されているflashの内容がreloadされる。
（サーバへもうswf一度とりに行く）
しかも、embedの親要素のpositionを変更しても同じようにreloadされる。
つまり、flashの状態を保持したままpositionを動的に変えることができない。
がー
elem.style.position
だと、style tagで定義した値や、link hrefで読み込んだ先で
定義しているstyle指定が取れない。
（tagにstyle="position:static"で指定した値しか取れない）
これを取得するには「currentStyle」等を使用するが、
例によってブラウザごとに動作が違う。
だが、jQueryのcurCSSはその辺の違いをうめて
いい感じでとってきてくれる。
$.curCSS( elem, 'position' ) == 'static';
こんな感じで。
ただ、なぜか公式サイトのAPI Referenceには記述がない。
ほんとに使っていいのかなぁ。。。
アメーバブログのトップらへんに使われている
swfobjectってライセンス表示削られてる。
swfobjectってMIT Licenseだからライセンス表示削るのはやばいよなぁ。。。
まあ、内容確認してないから同じファイル名の別物かもしれないけど。
あ、prototype.jsもライセンス表示削られてる。ひどいなぁ。。。
http://javascript.g.hatena.ne.jp/Yuichirou/20071002
prototype.jsの機能縮小版みたいな感じ？
コードが短いので読みやすい。
それにしても、JSのライブラリはlicense明記してない場合が
多くて改造とかしにくいな。
人のこといえないけど。
--
書き出してあるhtmlのparameterは当てにならない。
（大抵初期値のまま書き出しただけなので）
wmodeとかscaleとかは要確認。
「so.addParam( 'bgcolor', '#FFFFFF' );」をつけてると
「so.addParam( 'wmode', 'transparent' );」でも背景が透過しない。
（「bgcolor」が優先される）
12/8にまたIPA未踏報告会行ってきました。
今度は東京大学の中で。そのときのメモ。
http://www.ipa.go.jp/jinzai/esp/2007mito1/index.html
例によって寝坊して遅刻。発表1の途中から入る。
・身体で操るバランスボール型インターフェイスシステムの開発
バランスボールにセンサーつけてコントローラとして扱う話。
配線の削減のためにPCとは無線で接続。
重心とボールの傾きを別々に判定できるので、
単純なコントローラより細かい判定が可能。
（ボール自体は右に傾いてるけど、人は左に傾いてるとか）
基本的には普通に乗っかって身体を傾けたり、叩いたり。
無線化のためにいろいろモジュール試したけど、
なかなか良いものがないとのこと。
（zigbeeは安定しない、Bluetoothは開始が遅い）
操作用ソフトは現在ライブラリ化中。
現在あるソフトとしては、お絵かきソフトやDDR系のもの。
（ネギダンス->ネギを持って踊る）
なんか普通のコントローラをうまくバランスボールにつけるだけで
十分な気もする（元々無線のものを使えば無線化も容易だし）
確かにインターフェイスとしては新しいけど、
過去との互換性が低いのでソフト増えるか疑問。
これ自体はおもしろそうだけど、コントローラとしては発展するかな？
（SFCのスーパースコープを思い出した）
http://dango-net.org/
・Ruby-Flashネットゲーム通信フレームワークの開発
地声で発表。声良いなぁ。
基本的にAS3でHTTPを使わずに独自プロトコルでしゃべるものらしい。
サーバ側もHTTPDとは別の独自デーモンが待っててそれが直接会話するっぽい。
なので、RailsはActiveRecordとかを使ってるだけかな？
（Web経由のインターフェイスも同時に揃う利点はあると思うけど）
同期処理やらを抽象化できるのはいいかも。
ライセンスはMySQL式。Flash部分がGPLだと買う人もいるかも。
稼働実績はあるが、現状の安定性はいまいちとのこと。
（50人/3日動かすとメモリリークで落ちるとか）
スケーラビリティに関してRailsでの実績にTwitterを上げてたけど、
肝心の処理部分が独自実装ならRailsの例は適応できないんじゃ。。。
現在はベータ版なので、問い合わせれば無料でライセンス発行しますとのこと。
・学術研究対象としてのゲームとは
PM（コーエー社長）の講演。
ゲーム業界での産学連携の課題に関して。
おもしろい内容だったけど、ゲーム業界には
あまり興味がないのでよく覚えてない。
ゲーム会社への就職は親が心配するので優秀な人が来にくい。
なので、就職内定社の父兄会企画とか。おもしろい。
産学連携に関しては、教育機関は速度が遅くて
製品化までの時間がかかりすぎる。
ゲーム業界は研究テーマのロードマップがなく、
研究対象を教育機関へ提示できていない。
こっから先は聞いてると最後まで聞いてしまいそうだったので退散。
電気街に行く。パネルディスカッションも聞きたかったなぁ。
とりあえず、応募はメールでなくフォームからにした方が良いと思う。
サイト上に各プロジェクトのURLもないし。
もう少し何とかならないんだろうか。不便。
javascriptのtext nodeを展開するときにmethodがわからなかったのでメモ。
（mozillaのDOMリファレンスにも載ってなかったし）
http://developer.mozilla.org/ja/docs/DOM
console.log( document.createTextNode('hoge').nodeValue );
で、中身がとれる。
ついでに[object Text]をfor inしたときの中身一覧。
（addEventListenerってｗ）
addEventListener
appendChild
appendData
attributes
baseURI
childNodes
cloneNode
compareDocumentPosition
data
deleteData
dispatchEvent
firstChild
getFeature
getUserData
hasAttributes
hasChildNodes
insertBefore
insertData
isDefaultNamespace
isEqualNode
isSameNode
isSupported
lastChild
length
localName
lookupNamespaceURI
lookupPrefix
namespaceURI
nextSibling
nodeName
nodeType
nodeValue
normalize
ownerDocument
parentNode
prefix
previousSibling
removeChild
removeEventListener
replaceChild
replaceData
setUserData
splitText
substringData
textContent
ATTRIBUTE_NODE
CDATA_SECTION_NODE
COMMENT_NODE
DOCUMENT_FRAGMENT_NODE
DOCUMENT_NODE
DOCUMENT_POSITION_CONTAINED_BY
DOCUMENT_POSITION_CONTAINS
DOCUMENT_POSITION_DISCONNECTED
DOCUMENT_POSITION_FOLLOWING
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC
DOCUMENT_POSITION_PRECEDING
DOCUMENT_TYPE_NODE
ELEMENT_NODE
ENTITY_NODE
ENTITY_REFERENCE_NODE
NOTATION_NODE
PROCESSING_INSTRUCTION_NODE
TEXT_NODE
ExternalInterface経由でASにJSのObject持たせれば
globalな変数いらないかも。
または、書き出しタグの側にelement作って
それのeventに持たせるとか。
var hoge = { start : function () { alert('ok') } };
Event.observe( elem, 'click', function () { hoge.start() } );
要追記
