*サイドバーから切り離し [#r75f25f6] RIGHT:更新日 &lastmod(); サイドバーから切り離したときのプログラミングについては、htmlでは<div>タグを利用してレイヤーを切り替えることを行う。その時表示大きさなどをを変更する。ちなみに<LAYER>タグはIEでは使用できない。~ サイドバーからの出し入れに発生するイベントは次の関数で拾う。~ 起動時にサイドバーに入っているか否か処理をonloadの中なんかで行う必要がある。行わと、起動時サイドバーから出ている状態でサイドバーが起動するとデフォルト処理になってしまう。 if (System.Gadget.docked){ サイドバーの中にある時の処理 }else{ サイドバーの外にある時の処理 } System.Gadget.onUndock = function (){ [サイドバーから出したときの処理] } System.Gadget.onDock = function (){ [サイドバーに入れた処理したときの処理] } **具体例 [#nf4e772d] ***表示ページ [#kb88794b] ''htmlファイル'' <!-- サイドバーに入っている時の表示内容 blockで初期値レイヤー表示 --> <div name"LAY1" id="LAY1" style="display: block;"> <!--バックの画像指定z-index:-1はz方向に-1つまり下方向に表示 --> <g:background id="bgimage" style="position:absolute;z-index:-1" /> <SCRIPT> writedata(); document.write(doc); </SCRIPT> </div> <!-- サイドバーから出たときの表示内容 noneでレイヤー初期値非表示 --> <div name"LAY2" id="LAY2" style="display: none;"> <SCRIPT> writedata2(); document.write(doc); </SCRIPT> </div> ''jsファイル'' //起動時にサイドバーあるか否かのチェック function onload(){ if (System.Gadget.docked){ inDock(); }else{ outDock(); } } //サイドバーから出したとき System.Gadget.onUndock = function () { outDock(); } outDock()(){ onDockflag = 0; document.body.style.width = '300px'; <==出たときに表示の大きさ指定 document.body.style.height = '330px'; bgimage.style.width = '280px'; <==画像の大きさ指定 bgimageはg:backgroundのid bgimage.style.height = '330px'; <==これがないと画像が大きさどおり表示されない bgimage.src = "url(l-bg.png)"; <==画像を指定 //サイドバーに入っている時の表示内容のレイヤーを非表示 document.getElementById("LAY1").style.display='none'; //サイドバーから出たときの表示内容のレイヤーを表示 document.getElementById("LAY2").style.display='block'; svread0(); } //サイドバーに入れたとき System.Gadget.onDock = function () { inDock(); } function inDock(){ onDockflag = 1; document.body.style.width = '138px'; document.body.style.height = '200px'; bgimage.style.width = '138px'; bgimage.style.height = '200px'; bgimage.src = "url(s-bg.png)"; document.getElementById("LAY1").style.display='block'; document.getElementById("LAY2").style.display='none'; svread0(); } **外部URLのページの取得 [#w9856da2] Ajaxで外部URLの内容を取得する。取得データを処理しやすいようにTEXTで取得する [[ここ:http://allabout.co.jp/internet/javascript/closeup/CU20050515A/]]のぺーじを参考にした。 &color(red){注)指定URLに"?'+(new Date).getTime();"をつけることで毎回違う内容にアクセスするように見せかける。そうしないPC内にキャッシュされた内容をもってきて実際のURLに2回目からアクセスしない}; ''XMLHttpRequest の通信の状態''~ -0 = uninitialized(読み込み開始前の初期状態) -1 = loading(読み込み中) -2 = loaded(とりあえず読み込んだ) -3 = interactive(読み込んだデータを解析中) -4 = complete(読み込んだデータの解析完了、または失敗した。) ''jsファイル'' //XMLHttpRequestオブジェクト生成 function createHttpRequest(){ //Win ie用 if(window.ActiveXObject){ try { //MSXML2以降用 return new ActiveXObject("Msxml2.XMLHTTP") // } catch (e) { try { //旧MSXML用 return new ActiveXObject("Microsoft.XMLHTTP") // } catch (e2) { return null } } } else if(window.XMLHttpRequest){ //Win ie以外のXMLHttpRequestオブジェクト実装ブラウザ用 return new XMLHttpRequest() // } else { return null } } //XMLHttpRequestオブジェクト生成 var httpoj = createHttpRequest() // //open メソッド if (host =='uso5005'&& onDockflag == 1){ url = 'http://www.abc-u.ac.jp/~okada/?'+(new Date).getTime(); //method , fileName , async httpoj.open( 'GET' , url , true ) // //受信時に起動するイベント httpoj.onreadystatechange = function() // { //readyState値は4で受信完了 if (httpoj.readyState==4) // { //コールバック if(onDockflag == 1){ on_loaded(httpoj, host); }else{ on_loaded2(httpoj, host); } } } //send メソッド httpoj.send( '' ) // } function on_loaded(oj, host){ //レスポンスを取得 res = oj.responseText // //ダイアログで表示 alert(res); //受け取った内容を配列に分解(トークンは";") data = res.split(";"); } ''&color(red){注)};以下のようにhttpoj.onreadystatechangeの中でdocument.write(res)で書くとなぜかhtml自体が書き換えられしまうそこで、以下のようにhtml内部でかくといいけどhttpoj.open( 'GET' , host , false )でこのように同期を指定しないとデータを取得する前にdocument.write(res)が実行されてしまう'' jsonRead(); document.write(res); **JSON [#p49a7a2e] JSON(ジェイソン、JavaScript Object Notation[表記(法)])はJavaScriptにおけるオブジェクト表記法、JSONテキストはUnicodeでエンコードするとされている。デフォルトのエンコーディングはUTF-8である。~ ''JSONテキスト'' {"item":[ {"itemNo":"1", "itemName":"Sum", "itemData":"1538400"}, {"itemNo":"2", "itemName":"Used", "itemData":"647612"}, {"itemNo":"3", "itemName":"Free", "itemData":"890788"} ] } Javascriptでは以下のようにしてデータを受け取るjsDataは上記httpojと同じ変数 function on_loaded(jsData){ resultdata = 'TEST <BR>'; var data = eval("("+jsData.responseText+")"); for(var i=0; i<data.item.length; i++){ var itemNo = data.item[i].itemNo; // No var itemName = data.item[i].itemName; // 名前 var itemData = data.item[i].itemData; //内容 resultdata = resultdata + itemNo + ':' + itemName + ':' + itemData +'<BR>\r\n'; } }