[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(); }
[JavaScript]swfobject2.1
swfobjectはこの↓サイトでダウンロードできます。
http://code.google.com/p/swfobject/
まずhtmlに貼り付けるには下記のようにします。サンプル
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="js/swfobject.js"></script> </head> <body> <div id="flashcontent"></div> <script type="text/javascript"> swfobject.embedSWF("swf/main.swf", "flashcontent", "400", "300", "9.0.45"); </script> </body> </html>
1.5のときと同じようにdivタグにidをつけ、
flashplayerのバージョンが足りないときに表示するコードを記述する。
embedするためのコードの引数は下記のようになっています。
swfobject.embedSWF(swfファイル, divタグのid, flashの幅, flashの高さ, 必要なバージョン, expressInstall.swf, flashvars, params, attributes);
5個目までは分かると思いますので6個目から説明します。
6個目以降は必ずしも必要ではありません。
expressInstall.swfはflashplayerのバージョンが足りないときに画面遷移なしに
その場で最新flashplayerをインストールすることができるモジュールです。
使わないときはfalseを渡します。
これを使って貼り付けてflashplayerのバージョンが足りないときは下図のような
画面が出てインストールすることが出来ます。
見た目がアレなので素直にAdobeのサイトへ飛ばすリンクを記述したほうがいいかも。
7個目のflashvarsはflashに値を渡したいときに使います。
使い方:
var flashvars = {}; flashvars.id = "232";
8個目のparamsはmenuやallowfullscreenを設定するものです。
使い方:
var params = {}; params.menu = "false"; params.wmode = "opaque"; params.allowfullscreen = "true"; params.allowscriptaccess = "sameDomain";
9個目のattributesはnameやstyleclassを設定するものです。
使い方:
var attributes = {}; attributes.name = "flashswf"; attributes.styleclass = "jack"; attributes.align = "middle";
これら全部の引数を使うとコードはこんなふうになります。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="js/swfobject.js"></script> </head> <body> <div id="flashcontent"></div> <script type="text/javascript"> var flashvars = {}; flashvars.id = "232"; var params = {}; params.menu = "false"; params.wmode = "opaque"; params.allowfullscreen = "true"; params.allowscriptaccess = "sameDomain"; var attributes = {}; attributes.name = "flashswf"; attributes.styleclass = "jack"; attributes.align = "middle"; swfobject.embedSWF("swf/main.swf", "flashcontent", "400", "300", "9.0.45", "swf/expressInstall.swf", flashvars, params, attributes); </script> </body> </html>
以上がswfobject2.1の説明です。便利ですねー。
ここまで長々と説明してきましたが、自分で書くのめんどくせーってときは
swfobjectのサイトでswfobject_generator_1_2_air.zipをダウンロードして使えばコピペで済みます。
JavaScriptをかましたMac対応ScrollBarとかswfobject1.5用に作っていたので
2.1のものも作らなければ。
[AS3]jsからflashのメソッドを叩く
jsからflashのメソッドを叩くメモ。
あらかじめ↓のようなjsメソッドを用意する。
今回は例としてブラウザサイズが変更されたらflashメソッドを叩くことにする。
function init_callback(){ if(window.addEventListener&&!window.opera){ window.addEventListener('resize', onResize, false); window.onresize = document.onresize = onResize; }else{ if(window.opera){ window.onresize = onResize; }else{ window.onresize = document.onresize = onResize; } } } function onResize(){ callMovie(so.getAttribute("id")).windowResizeEvent(); } function callMovie(id){ if(swfwheel_safari || navigator.appName.indexOf("Microsoft") != -1){ return window[id]; }else{ return document[id]; } }
そしてこんな↓感じでいつも通りswfを貼り付ける。
<div id="flashcontents"></div> <script type="text/javascript"> <!-- var so = new SWFObject('swf/main.swf', 'main', '1000', '640', '9.0.45', '#ffffff'); so.write('flashcontents'); //-->
flash側は↓のinit_callbackを任意のタイミングで叩く。
叩くとブラウザリサイズ時にcall_from_jsメソッドが実行される。
function init_callback():void{ ExternalInterface.call("init_callback"); ExternalInterface.addCallback("windowResizeEvent", call_from_js); } function call_from_js():void{ //実行される処理 }