私的開発備忘録: JavaScript

ラベル JavaScript の投稿を表示しています。すべての投稿を表示

2012/10/23

ボタンの二度押し防止

onclick="this.disabled=true;return true;"

HTMLに上記のような感じでonclickを追加して、あとはjqueryで下記のような感じに

 
$("form").submit(function() {
  $(":submit", this).attr("disabled", "disabled");
});

2012/07/09

HTML５のcanvasで画像データの読み書き

Canvasからbase64エンコーディングされた画像データを取得する方法

var canvas = document.getElementById("myCanvas"); 
var base64 = canvas.toDataURL(); 

// LocalStorageに保存する 

window.localStorage.setItem("saveKey", base64);

LocalStorageに保存したデータをCanvasに読み込む方法

// LocalStroageからデータを取得する
var base64 = window.localStorage.getItem("saveKey");

// Imageオブジェクトを作成し、src属性にデータを設定する
var image = new Image();
image.src = base64;
image.onload = function(){

  // 画像の読み込みが終わったら、Canvasに画像を反映する。
  canvas.drawImage(image, 0, 0);
}

2010/08/18

MixiアプリのDeveloper登録

Mixiアプリを作るときはhttps://sap.mixi.jp/home.plからDeveloper登録を行ないます。
最後に携帯メールでの認証があるのですがiPhoneの場合は@i.softbank.jpの方にメールをしないとうまくいきません。

2010/07/16

ブラウザ三国志で武将を一覧表示するGreaseMonkeyスクリプトを修正

こちらにて公開されてたブラウザ三国志で武将を一覧表示するgreasemonkeyスクリプトが動かなくなっていたのでやっつけで修正しました。レベル取得の部分は面倒なので飛ばしました。Chromeでも動きます。

ファイルはこちら

// ==UserScript==
// @name           bura3deckext
// @version        0.0
// @description    
// @include        http://*.3gokushi.jp/card/deck.php*
// ==/UserScript


function getListElement()
{
 var list = document.getElementById("sol_list");
 if (!list) {
  list = document.createElement('table');
  list.id = "sol_list";

  var attrname = ["","コスト","ID","名前","HP","攻撃","知力","歩防",
   "槍防","弓防","騎防","速度","操作","cid"];
  var attr = ["","","cost","cardno","name1","status_hp","status_att",
   "status_int","status_wdef","status_sdef","status_bdef","status_rdef","status_speed","",""];
  var sortable = [0,1,1,0,0,1,1,1,1,1,1,1,0,0];

  row = document.createElement('tr');
  row.id = "sol_list_header"
  for (j=0;j<attrname.length;j++) {
   e = document.createElement('th');
   e.id="sol_list_" + attr[j];
   e.innerHTML = attrname[j];
   row.appendChild(e);
  }
  list.appendChild(row);


  var file = document.getElementById("card_uraomote");
  file.insertBefore(list,file.firstChild);

  sortableTable(list);
  for (j=0;j<attrname.length;j++) {
   if (sortable[j]==1) list.setSortable(j);
  }
 }
 return list;
}

function sortableTable(tbl)
{
 tbl.setSortable = function (col,mode)
 {
  var e = tbl.childNodes[0].childNodes[col];
  e.style.cursor = "pointer";
  e.orgClassName = e.className;
  e.addEventListener('click',function(s){return function(){tbl.sortTable(s);};}(col),false);
  e.addEventListener('mouseover',function(){this.className+=" hover";},false);
  e.addEventListener('mouseout' ,function(){this.className=this.orgClassName;},false);
 };

 tbl.sortTable = function sortTable(col)
 {
  rows= new Array();
  for (i=1;i<tbl.childNodes.length;i++) {rows[i-1]=tbl.childNodes[i];}
  rows.sort(function(a,b){
   ea=a.childNodes[col];
   eb=b.childNodes[col];
   if (!ea) return -1;
   if (!eb) return 1;
   return parseFloat(eb.firstChild.nodeValue)-parseFloat(ea.firstChild.nodeValue);
  });
  for (i=0;i<rows.length;i++) {tbl.appendChild(rows[i]);}
 }

 return tbl;
}


function addcards(d){
 var list = getListElement();
 var deckFile = d.getElementsByClassName("file")[0];
 var currentDeckFile = document.getElementById("deck_file");
 var cards = deckFile.getElementsByClassName("cardStatusDetail");
 if (!cards.length) {
  cards = deckFile.getElementsByClassName("cardColmn");
 }

 var attr = ["cost","cardno","name1","status_hp","status_att",
  "status_int","status_wdef","status_sdef","status_bdef","status_rdef","status_speed"];

 for (i=0;i<cards.length;i++) {
   row = document.createElement("tr");
   row.className="infile";

   t = cards[i].getElementsByClassName("soltype");
   e = document.createElement('td');
   e.innerHTML = t[0].innerHTML;
   row.appendChild(e);

   for (j=0;j<attr.length;j++) {
    t = cards[i].getElementsByClassName(attr[j]);
    if(!t) continue;
    e = document.createElement("td");
    e.className="cell_" + attr[j];
    e.innerHTML = t[0].innerHTML;
    row.appendChild(e);
   }

   t = cards[i].getElementsByClassName("cardWrapper2col");
   var cid = undefined;
   if (t.length) {
    cid = t[0].parentNode.id.split("_")[1];
   } else {
    t = cards[i].getElementsByClassName("cardDelete")[0].firstChild;
    if (t.getAttribute)
    if (re=t.getAttribute('onclick').match(/operationExecution\('[^']*', (\d+), '[^']*', \d+\)/)) {
     cid = re[1];
    }
   }

   e = document.createElement("td");

   t = cards[i].getElementsByClassName("aboutdeck");
   if(t.length && t[0].getAttribute('onclick')) {
    var link = document.createElement("a");
    link.href="javascript:((function(){"+t[0].getAttribute('onclick')+"})(),void(0));";
    link.appendChild(document.createTextNode("[セット]"));

    t=cards[i].getElementsByTagName("select");
    if (t.length) {
     t=t[0];
     e.appendChild(t);
     var v = document.createElement("input");
     v.name = t.name;
     v.value = t.value;
     currentDeckFile.appendChild(v);
     t.addEventListener('change',(function (a,b){return function(){a.value=b.value};})(v,t),false);
    }
    e.appendChild(link);
   } else {
    e.appendChild(document.createTextNode(" セット不可 "));
   }
   row.appendChild(e);

   e = document.createElement("td");
   if (cid) {
    e.innerHTML = "<a href='status_info.php?cid=" + cid + "'>"+cid+"</a>";
   } else {
    e.innerHTML = "-";
   }
   row.appendChild(e);

   list.appendChild(row);
 }
}

function addcards_deck(d){
 var list = getListElement();
 var cardListDeck = document.getElementById("cardListDeck");
 var cards = cardListDeck.getElementsByClassName("cardColmn");

 var attr = ["cost","cardno","name1","status_hp","status_att",
  "status_int","status_wdef","status_sdef","status_bdef","status_rdef","status_speed"];

 for (i=0;i<cards.length;i++) {
  row = document.createElement('tr');
  row.className="indeck";

  t = cards[i].getElementsByClassName("soltype");
  e = document.createElement('td');
  e.innerHTML = t[0].innerHTML;
  row.appendChild(e);

  for (j=0;j<attr.length;j++) {
   t = cards[i].getElementsByClassName(attr[j]);
   if(!t) continue;
   e = document.createElement('td');
   e.className="cell_" + attr[j];
   e.innerHTML = t[0].innerHTML;
   row.appendChild(e);
  }

  t = cards[i].getElementsByTagName("dd")[2];
  e = document.createElement('td');
  e.innerHTML = t.innerHTML;

  t = cards[i].getElementsByClassName("aboutdeck");
  if(t.length && t[0].getAttribute('onclick')) {
   var link = document.createElement("a");
   link.href="javascript:((function(){"+t[0].getAttribute('onclick')+"})(),void(0));";
   link.appendChild(document.createTextNode("[戻す]"));
   e.appendChild(link);
  }


  row.appendChild(e);
  e = document.createElement("td");
  e.innerHTML = "-";
  row.appendChild(e);

  list.appendChild(row);
 }
}

function createlist(){
 addcards_deck(document);
 addcards(document);
 //return;

 t = document.getElementsByClassName("pager")[0].getElementsByTagName("a");
 for(i=0;i<t.length;i++) {
  if (!t[i].innerHTML.match(/\d/)) continue;

  httpRequest = new XMLHttpRequest();
  httpRequest.open('GET', t[i].href, true);

  httpRequest.onreadystatechange = function (){
   var req = arguments[0];
   return function(){
       if(req.readyState == 4 && req.status == 200) {
      var d = document.createElement('html');
      d.innerHTML=req.responseText;
      addcards(d);
    }
   };
  }(httpRequest);
  httpRequest.send(null);

 }
}


( function(){
 
 GM_addStyle(""
  + "#sol_list{border-style:solid;border-spacing: 2px;border-collapse: separate;width:100%;}"
  + "#sol_list tr{height:22px;}"
  + "#sol_list tr td{height:1.2em;padding-left:4px;}"
  + "#sol_list tr th{background-color:#ccc;text-align:center;}"
  + "#sol_list tr th.hover{background-color:#ddd;}"
  + " tr.indeck{background-color:#ddf}"
  + ".cell_name2{font-size:0.5em;color:#888;}"
 );

  var link = document.createElement("a");
  link.addEventListener('click',createlist,false);
  link.href="javascript:void(0)";
  link.innerHTML = "武将一覧"
  var menu = document.getElementById("statMenu");
  menu.appendChild(document.createTextNode(" | "));
  menu.appendChild(link);
     
}) ();

いつものように自己責任で。

2010/07/05

ブラウザ三国志GreasemonkeyスクリプトMap-StarをChrome対応させてみた(2)

以前に書いたスクリプトですが、７月５日のアップデートにて動かなくなりました。またろむのシ的メモ+αさんが即対応してくださったみたいですが、Chrome版が動かなかったのでGreasemonkey版をベースに修正してみました。

ファイルをダウンロード

// ==UserScript==
// @name           3gokushi-MapStar-chrome
// @namespace      3gokushi
// @description    ブラウザ三国志のマップに★の数を表示します。クローム対応版
// @include        http://*.3gokushi.jp/map.php*
// ==/UserScript==

var LOCAL_STORAGE = "bro3_mapstar";

//main
(function(){
//window.addEventListener("load",function() {
initGMWrapper();

    if (typeof GM_addStyle == "undefined") {
        GM_addStyle = function(css) {
            var style = document.createElement('style');
            style.textContent = css;
            document.getElementsByTagName('head')[0].appendChild(style);
        };
    }


    GM_VAL_PREFIX = "GMMS_";

    /**
     * 設定データ初期化
     */
    var dataTable = {
        w : new Array("#FFFFFF", "#000000", GM_getValue(GM_VAL_PREFIX + "w", true)), // white
        r : new Array("#FF0000", "#FFFFFF", GM_getValue(GM_VAL_PREFIX + "r", true)), // red
        g : new Array("#00FF00", "#000000", GM_getValue(GM_VAL_PREFIX + "g", true)), // green
        b : new Array("#0000FF", "#FFFFFF", GM_getValue(GM_VAL_PREFIX + "b", true)), // blue
        y : new Array("#FFFF00", "#000000", GM_getValue(GM_VAL_PREFIX + "y", true)), // yellow
        p : new Array("#FF00FF", "#FFFFFF", GM_getValue(GM_VAL_PREFIX + "p", true)), // pink
        bk : new Array("#000000", "#FFFFFF", GM_getValue(GM_VAL_PREFIX + "bk", true)), // black
        bg : new Array("#0066FF", "#FFFFFF", GM_getValue(GM_VAL_PREFIX + "bg", true)), // sky blue
        o : new Array("#FFA500", "#000000", GM_getValue(GM_VAL_PREFIX + "o", true)) // orange
    };

    /**
     * styleの追加
     */
    GM_addStyle([
                 ".mapStar_outer{ width:10px;height:10px;margin:2px 4px 2px 0px;float:left;border:1px solid #000000;cursor:pointer; }",
                 ".mapStar_on{ filter:alpha(opacity=100);opacity:1; }",
                 ".mapStar_off{ filter:alpha(opacity=30);opacity:0.3;border:1px solid #999999; }",
                 ".mapStar_box{ filter:alpha(opacity=60);opacity:0.6; position: absolute; width: 8px; height: 8px; padding: 0px 0px 2px 3px; font-size: 8px;}",
               ].join("\n"));


    /**
     * 設定on/off処理関数
     */
    function onSettingClick() {
        var key = this.getAttribute("type");
        var gmv = GM_getValue(GM_VAL_PREFIX + key, true);
        GM_setValue(GM_VAL_PREFIX + key, !gmv);

        var clsName;
        var displayVal;
        if (gmv) {
            clsName = "mapStar_off";
            visibleVal = "hidden";
        } else {
            clsName = "mapStar_on";
            visibleVal = "visible";
        }

        var XPath = '//div[@class="mapStar_margin mapStar_box mapStar_' + key + '"]';
        var list = document.evaluate(XPath, document, null,
                XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

        for ( var i = 0; i < list.snapshotLength; i++) {
            list.snapshotItem(i).style.visibility = visibleVal;
        }

        XPath = '//div[@type="' + key + '"]';
        document.evaluate(XPath, document, null,
                XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.className = "mapStar_outer " + clsName;

    }

    /**
     * 設定ボックスの挿入
     */
    var insset = document.getElementById('mapboxInner');

    if (insset != null) {
        var set = document.createElement('div');
            set.style.backgroundColor = "#FFFFFF";
            set.setAttribute("id","mapStarBox");
            insset.appendChild(set);
        var cssText = "";
        for ( var key in dataTable) {
            var onoff = dataTable[key][2] ? "mapStar_on" : "mapStar_off";
            var setItem = document.createElement('div');
                setItem.className = "mapStar_outer " + onoff;
                setItem.style.backgroundColor = dataTable[key][0];

                set.appendChild(setItem);
                setItem.setAttribute("type", key);
                setItem.addEventListener("click", onSettingClick,false);
            cssText += ".mapStar_"+key+"{background-color:"+dataTable[key][0]+"; color:"+dataTable[key][1]+"} ";
        }
    }
    
    GM_addStyle(cssText);

    /**
     * MAPサイズ取得
     */
    var mapSize = document.getElementById('rollover').style.zIndex - 1;

    /**
     * 地図データの取得
     */
    var mapMap = new Array(mapSize + 1);
    var mapAreaDoc = document.getElementById('mapsAll');
    var imgRegCmp = new RegExp(/img\/panel\/[^_]*_([^_]*)_/);

    var imgMap = mapAreaDoc.getElementsByTagName('img');
    for ( var i = 0; i < imgMap.length; i++) {
        var clstxt = imgMap[i].className;
        if ((clstxt != null) && (clstxt.search(/mapAll(\d+)/) != -1)) {
            var mapIndex = RegExp.$1 - 0;
            var imgSrc = imgMap[i].src;
            if (imgRegCmp.exec(imgSrc)) {
                var imgRegCmp = new RegExp(/img\/panel\/[^_]*_([^_]*)_/);
                mapMap[mapIndex] = RegExp.$1;
            } else if (0 <= imgSrc.indexOf("blanc")) {
                mapMap[mapIndex] = "wall";
            }
        }
    }

    /**
     * 地図へ埋め込み
     *
     */
    var areas = mapAreaDoc.getElementsByTagName('area');

    // mapSizeからzIndexの値とmarginSizeを決定する
    var marginSize = "32px 0px 0px 23px";
    var zIndex = mapSize + 2;
    if (200 < zIndex && zIndex < 400) {
        marginSize = "25px 0px 0px 17px";
    } else if (400 <= zIndex) {
        marginSize = "16px 0px 0px 12px";
    }
    
    cssText = ".mapStar_margin{ margin:"+marginSize+"; z-index:"+zIndex+"; }";
    GM_addStyle(cssText);

    var regCmp = new RegExp(
            /(\'[^\']*\'[^\']*){5}\'(\u2605+)\'.*overOperation\(\'.*\'.*\'(.*)\'.*\'(.*)\'/);
    var j = 0;

    var alpha = 6;
    for ( var i = 1; i < mapMap.length; i++) {
        if (mapMap[i] != "undefined" && mapMap[i] == "wall") {
            continue;
        }

        if (areas[j] == "undefined") {
            break;
        }
        var mo = areas[j++].getAttribute('onmouseover');
        if (mo.search(/\u2605/) < 0) {
            continue;
        }

        if (regCmp.test(mo)) {
            var dataKey = (typeof mapMap[i] == "undefined") ? "w" : mapMap[i];

            var div = document.createElement('div');
            if (!dataTable[dataKey][2]) {
                div.style.visibility = "hidden";
            }

            div.className = "mapStar_margin mapStar_box mapStar_" + dataKey;
            div.setAttribute("id","mapStar_"+i);
            div.style.left = RegExp.$3;
            div.style.top = RegExp.$4;
            div.innerHTML = RegExp.$2.length;

            if (RegExp.$2.length >= 5) {
                div.style.border = "1px solid";
            }
            if (RegExp.$2.length >= 3) {
                div.style.fontWeight = "bold";
            }

            mapAreaDoc.appendChild(div);
        }
    }

//},false);
})();

//Google Chrome用GM_*系ラッパー関数
function initGMWrapper() {
  // @copyright   2009, James Campos
 // @license  cc-by-3.0; http://creativecommons.org/licenses/by/3.0/
 if ((typeof GM_getValue == 'undefined') || (GM_getValue('a', 'b') == undefined)) {
  GM_addStyle = function(css) {
   var style = document.createElement('style');
   style.textContent = css;
   document.getElementsByTagName('head')[0].appendChild(style);
  }

  GM_deleteValue = function(name) {
   localStorage.removeItem(LOCAL_STORAGE + "." + name);
  }

  GM_getValue = function(name, defaultValue) {
   var value = localStorage.getItem(LOCAL_STORAGE + "." + name);
   if (!value)
    return defaultValue;
   var type = value[0];
   value = value.substring(1);
   switch (type) {
    case 'b':
     return value == 'true';
    case 'n':
     return Number(value);
    default:
     return value;
   }
  }

  GM_log = function(message) {
   console.log(message);
  }

  GM_registerMenuCommand = function(name, funk) {
  //todo
  }

  GM_setValue = function(name, value) {
   value = (typeof value)[0] + value;
   localStorage.setItem(LOCAL_STORAGE + "." + name, value);
  }
  
  //by froo
  GM_listValues = function() {
   var res = new Array();
   for (var i = 0; i < localStorage.length; i++) {
    var key = localStorage.key(i);
    if (key.indexOf(LOCAL_STORAGE + ".", 0) == 0) {
     res.push(key.replace(/^.*?\./, ""));
    }
   }
   return res;
  }
 }
}

2010/06/30

ブラウザ三国志GreasemonkeyスクリプトMap-StarをChrome対応させてみた(1)

http://d.hatena.ne.jp/romer/20100201で公開されているMap-StarをChrome対応させてみました。以下のコピーして3gokushi-mapstar-chrome.user.jsなどのファイル名を記載して保存します。そのファイルをブラウザで読み込めばインストールされると思います。

追記：配下同盟対応版はこちら

// ==UserScript==
// @name  3gokushi-MapStar-Chrome
// @namespace  3gokushi
// @description ブラウザ三国志のマップに★の数を表示します。Chrome対応版。
// @include http://*.3gokushi.jp/map.php*
// ==/UserScript==

var LOCAL_STORAGE = "bro3_mapstar";

//main
(function(){
//window.addEventListener("load",function() {
initGMWrapper();


 GM_VAL_PREFIX = "GMMS_";

 /**
  * 設定データ初期化
  */
 var dataTable = new Array();
 dataTable["w"] = new Array("#FFFFFF", "#000000", GM_getValue(GM_VAL_PREFIX
   + "w", true)); // white
 dataTable["r"] = new Array("#FF0000", "#FFFFFF", GM_getValue(GM_VAL_PREFIX
   + "r", true)); // red
 dataTable["g"] = new Array("#00FF00", "#000000", GM_getValue(GM_VAL_PREFIX
   + "g", true)); // green
 dataTable["b"] = new Array("#0000FF", "#FFFFFF", GM_getValue(GM_VAL_PREFIX
   + "b", true)); // blue
 dataTable["y"] = new Array("#FFFF00", "#000000", GM_getValue(GM_VAL_PREFIX
   + "y", true)); // yellow
 dataTable["p"] = new Array("#FF00FF", "#FFFFFF", GM_getValue(GM_VAL_PREFIX
   + "p", true)); // pink
 dataTable["bk"] = new Array("#000000", "#FFFFFF", GM_getValue(GM_VAL_PREFIX
   + "bk", true)); // black
 dataTable["bg"] = new Array("#0066FF", "#FFFFFF", GM_getValue(GM_VAL_PREFIX
   + "bg", true)); // skyblue

 /**
  * 設定on/off処理関数
  */
 function onSettingClick() {
  var key = this.getAttribute("type");
  var gmv = GM_getValue(GM_VAL_PREFIX + key, true);
  GM_setValue(GM_VAL_PREFIX + key, !gmv);

  var clsName;
  var displayVal;
  if (gmv) {
   clsName = "off";
   visibleVal = "hidden";
  } else {
   clsName = "on";
   visibleVal = "visible";
  }

  var XPath = '//div[@class="mapStar_' + key + '"]';
  var list = document.evaluate(XPath, document, null,
    XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

  for ( var i = 0; i < list.snapshotLength; i++) {
   list.snapshotItem(i).style.visibility = visibleVal;
  }

  XPath = '//div[@type="' + key + '"]';
  document.evaluate(XPath, document, null,
    XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.firstChild.className = "outer "
    + clsName;

 }

 /**
  * 設定ボックスの挿入
  */
 var insset = document.getElementById('mapboxInner');

 if (insset != null) {

  var html = "\
     <style>\
     .outer{ width:10px;height:10px;margin:2px 4px 2px 0px;float:left;border:1px solid #000000;cursor:pointer; }\
     .on{ filter:alpha(opacity=100);-moz-opacity:1;opacity:1; }\
     .off{ filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;border:1px solid #999999; }\
     </style>\
     <div style='background-color:#ffffff;'> </div>";

  var set = document.createElement('div');
  set.innerHTML = html;
  insset.appendChild(set);

  for ( var key in dataTable) {
   var onoff = dataTable[key][2] ? "on" : "off";
   html = '<div class="outer ' + onoff + '" style="background-color:'
     + dataTable[key][0] + ' ;"> </div>';

   var setItem = document.createElement('div');
   setItem.innerHTML = html;
   set.appendChild(setItem);

   setItem.setAttribute("type", key);
   setItem.addEventListener("click", onSettingClick, false);
  }
 }

 /**
  * MAPサイズ取得
  */
 var mapSize = document.getElementById('rollover').style.zIndex - 1;

 /**
  * 地図データの取得
  */
 var mapMap = new Array(mapSize + 1);
 var mapAreaDoc = document.getElementById('mapsAll');
 var imgRegCmp = new RegExp(/img\/panel\/[^_]*_([^_]*)_/);

 var imgMap = mapAreaDoc.getElementsByTagName('img');
 for ( var i = 0; i < imgMap.length; i++) {
  var clstxt = imgMap[i].className;
  if ((clstxt != null) && (clstxt.search(/mapAll(\d+)/) != -1)) {
   var mapIndex = RegExp.$1 - 0;
   var imgSrc = imgMap[i].src;
   if (imgRegCmp.exec(imgSrc)) {
   var imgRegCmp = new RegExp(/img\/panel\/[^_]*_([^_]*)_/);
    mapMap[mapIndex] = RegExp.$1;
   } else if (0 <= imgSrc.indexOf("blanc")) {
    mapMap[mapIndex] = "wall";
   }
  }
 }

 /**
  * 地図へ埋め込み
  *
  */
 var areas = mapAreaDoc.getElementsByTagName('area');

 // mapSizeからzIndexの値とmarginSizeを決定する
 var marginSize = "32px 0px 0px 23px";
 var zIndex = mapSize + 2;
 if (200 < zIndex && zIndex < 400) {
  marginSize = "25px 0px 0px 17px";
 } else if (400 <= zIndex) {
  marginSize = "16px 0px 0px 12px";
 }

 var regCmp = new RegExp(
   /(\'[^\']*\'[^\']*){5}\'(\u2605+)\'.*overOperation\(\'.*\'.*\'(.*)\'.*\'(.*)\'/);
 var j = 0;

 var alpha = 6;
 for ( var i = 1; i < mapMap.length; i++) {
  if (mapMap[i] != undefined && mapMap[i] == "wall") {
   continue;
  }

  if (areas[j] == undefined) {
   break;
  }
  var mo = areas[j++].getAttribute('onmouseover');
  if (mo.search(/\u2605/) < 0) {
   continue;
  }

  if (regCmp.test(mo)) {
   var dataKey = (mapMap[i] == undefined) ? "w" : mapMap[i];
   var bg = dataTable[dataKey][0];
   var cl = dataTable[dataKey][1];

   if ( RegExp.$2.length < 1 ) {
    continue;
   }

   var div = document.createElement('div');
   if (!dataTable[dataKey][2]) {
    div.style.visibility = "hidden";
   }

   if (bg != null) {
    div.style.backgroundColor = bg;
   }

   if (cl != null) {
    div.style.color = cl;
   }

   div.className = "mapStar_" + dataKey;
   div.style.left = RegExp.$3;
   div.style.top = RegExp.$4;
   div.style.position = "absolute";
   div.style.width = "8px";
   div.style.height = "8px";
   div.style.margin = marginSize;
   div.style.padding = "0px 0px 2px 3px";
   div.style.zIndex = zIndex;
   div.style.fontSize = "8px";
   div.innerHTML = RegExp.$2.length;

   if (RegExp.$2.length >= 6) {
    div.style.border = "1px solid";
   }
   if (RegExp.$2.length >= 4) {
    div.style.fontWeight = "bold";
   }

   div.style.filter = 'alpha(opacity=' + (alpha * 10) + ')';
   div.style.MozOpacity = alpha / 10;
   div.style.opacity = alpha / 10;

   mapAreaDoc.appendChild(div);
  }
 }
//},false);
})();

//Google Chrome用GM_*系ラッパー関数
function initGMWrapper() {
  // @copyright   2009, James Campos
 // @license  cc-by-3.0; http://creativecommons.org/licenses/by/3.0/
 if ((typeof GM_getValue == 'undefined') || (GM_getValue('a', 'b') == undefined)) {
  GM_addStyle = function(css) {
   var style = document.createElement('style');
   style.textContent = css;
   document.getElementsByTagName('head')[0].appendChild(style);
  }

  GM_deleteValue = function(name) {
   localStorage.removeItem(LOCAL_STORAGE + "." + name);
  }

  GM_getValue = function(name, defaultValue) {
   var value = localStorage.getItem(LOCAL_STORAGE + "." + name);
   if (!value)
    return defaultValue;
   var type = value[0];
   value = value.substring(1);
   switch (type) {
    case 'b':
     return value == 'true';
    case 'n':
     return Number(value);
    default:
     return value;
   }
  }

  GM_log = function(message) {
   console.log(message);
  }

  GM_registerMenuCommand = function(name, funk) {
  //todo
  }

  GM_setValue = function(name, value) {
   value = (typeof value)[0] + value;
   localStorage.setItem(LOCAL_STORAGE + "." + name, value);
  }
  
  //by froo
  GM_listValues = function() {
   var res = new Array();
   for (var i = 0; i < localStorage.length; i++) {
    var key = localStorage.key(i);
    if (key.indexOf(LOCAL_STORAGE + ".", 0) == 0) {
     res.push(key.replace(/^.*?\./, ""));
    }
   }
   return res;
  }
 }
}

何か問題点があれば連絡ください。ファイル保存はUTF8形式でお願いします。
もちろん自己責任でお願いします。

JavaScriptで要素を取得する方法のメモ

・DOM
idから検索 document.getElementById()
タグから検索 document.getElementsByTagName()
CSSのクラスから検索 document.getElementsByClassName() - IE等では使えない

取得した中身は配列として扱う
ただし入り組んだデータを取得するのは結構めんどい

・XPath
idから検索 document.evaluate('id("...")')
タグから検索 document.evaluate('.//div')
CSSのクラスから検索 document.evaluate('.//div[@class="..."]')

var xpathResult = document.evaluate(xpathExpression, contextNode, 
            namespaceResolver, resultType, result );

引数は下記の5つ
xpathExpression：XPath
contextNode：(HTMLなら基本documentで。)
namespaceResolver：基本null
resultType：戻り値の型の指定
result：基本null

resultType（戻り値の型）指定は次の通り
0 ANY_TYPE
1 NUMBER_TYPE - 倍精度浮動小数点数 (double)
2 STRING_TYPE - 文字列
3 BOOLEAN_TYPE - 真偽値
4 UNORDERED_NODE_ITERATOR_TYPE
5 ORDERED_NODE_ITERATOR_TYPE
6 UNORDERED_NODE_SNAPSHOT_TYPE
7 ORDERED_NODE_SNAPSHOT_TYPE
8 ANY_UNORDERED_NODE_TYPE
9 FIRST_ORDERED_NODE_TYPE

6～7で取得した中身にはsnapshotプロパティでアクセスする

無名関数の基礎

Javascriptの基本として関数を宣言して実行するのが通常のフローですが無名関数を使いその場で実行することもできます。

 (function(){

処理を記載

})();

()の中に無名関数を入れて、その後();で実行します。関数に変数を使わないし、ライブラリの重複、定義と実行を分けないで良いので簡単な処理を書くときに便利です。

2010/06/02

最初の投稿

このサイトはGAEやiPhoneやRubyやcssなどについての備忘録です。

登録: 投稿 (Atom)

私的開発備忘録