yamachan Ajax/.NET/C# メモ

[C#] synergy 補助ツール mac2ip v1.00

2007-05-03T23:00:00.000+09:00

最近、Synergy というフリーのキーボード/マウスの共有ツールを愛用しています。非常に便利です。ツールの概要は Yet Another 仕事のツールあたりを参照してください。日本語版の入手はこのへんとか。

さて、ウチはマンション備え付けのインターネット接続を利用していて、ルーターの設定が変更できません。サーバーとなるマシンの IP Address を固定できず、再起動のたびに調べ、クライアント側に設定する必要があります。なかなか面倒です。

マシンの MACアドレスは固定ですから、そこから IPアドレスを得られれば自動化ができそうな気がします。そこで Windows用の rarp 的なツールを探してみたのですが、うまく見つかりませんでした。

探すのが面倒になりまして、勉強中の C# で簡単なツールを作成してみました。実行には .Net Framework 2.0 が必要です。

mac2ip v1.00: mac2ip_v100.zip

使い方は簡単で、マシンの MAC Address (例:00-11-22-33-44-55) を指定すると、対応する IP Address (例:192.168.20.18) を探して表示してくれます。

引数を2つ指定した場合には、環境変数の設定用の出力になります。バッククォーテーション(`)で実行結果と置換できない Windows でのバッチ処理に組み込むための、簡易的な実装です。

IP Address の検索は、arp テーブルを参照することで実現しています。見つからない場合はブロードキャスト(例の場合は 192.168.20.255) への ping を実行し、arp テーブルを再チェックします。

それでも見つからない場合には、自分に近いアドレスから順に ping して探していきます。調査対象の IP Address が、調査元のものより離れている場合には、少し時間がかかります。

さて、僕は以下のようなバッチファイルを作成し、synergy ディレクトリに mac2ip.exe と一緒に置いています。

mac2ip.exe SVR_ADDR 00-11-22-33-44-55 > mac2ip-tmp.cmd
echo start /b synergyc %%SVR_ADDR%% >> mac2ip-tmp.cmd
mac2ip-tmp.cmd

サーバーの IP Address を自動的に検索し、synergy クライアントを起動するバッチです。 "00-11-22-33-44-55" の部分は、synergy サーバーの実際の MAC Address に書き換えてください。

このバッチをスタートアップに登録しておくのも良いでしょう。

【2007/05/06 追記】

synergy は多重起動するとエラーになるみたいですね。クライアント再起動のために改良したバッチは以下になります。

echo taskkill /F /IM synergyc.exe > mac2ip-tmp.cmd
mac2ip.exe SVR_ADDR 00-11-22-33-44-55 >> mac2ip-tmp.cmd
echo start /b synergyc %%SVR_ADDR%% >> mac2ip-tmp.cmd
mac2ip-tmp.cmd

taskkill コマンドは Windows XP Home には無いようです。この場合 pskill コマンドを導入して代用するとよいでしょう。

echo pskill -t synergyc.exe > mac2ip-tmp.cmd
mac2ip.exe SVR_ADDR 00-11-22-33-44-55 >> mac2ip-tmp.cmd
echo start /b synergyc %%SVR_ADDR%% >> mac2ip-tmp.cmd
mac2ip-tmp.cmd

[JS] 画像に簡単に効果をつけるクラス

2007-03-01T23:00:00.001+09:00

画像にちょっとした効果をつけたいという要望はけっこうあります。良く使う効果を簡単に記述できるようなコード、ImgTool を作成してみました。

まずは、マウスを重ねると画像が変わるという効果です。ボタンなんかで、よく使用しますね。

<img src="search_glass.gif"
 onload="new jp.rinco.ImgTool(this,'search_orange.gif');"
/>

onload の部分が、今回作成した ImgTool を使用している部分です。最初の引数は this、二番目の引数にはマウスを重ねている間に表示する画像を指定します。簡単でしょ？

次は、マウスを重ねているあいだだけ、画像を拡大表示する効果です。

<img src="yamachan1.jpg" width="43" height="55"
  onload="new jp.rinco.ImgTool(this, 5);"
/>

さきほどの画像のかわりに、5 という数値を指定しています。これは拡大する倍数で、この例ではマウスを重ねると5倍の大きさになります。

次は同じような例ですが、倍数ではなく、拡大したときの横幅、縦幅をドットで指定します。

<img src="yamachan1.jpg" width="43" height="55"
  onload="new jp.rinco.ImgTool(this, 215, 62);"
/>

どうでしょう、マウスを重ねると画像が横に伸びたでしょうか？

さて、これまでの例は onload にコードを記載していましたが、画像の id を指定して、後から効果を加えることもできます。

<img src="yamachan1.jpg" id="ImgTool-sample" />

<script>
var it = new jp.rinco.ImgTool('ImgTool-sample');
it.overSrc = "search_orange.gif";
it.overBorder = "solid 2px red";
it.downWidth = it.width * 3;
it.downHeight = it.height * 3;
</script>

今回はマウスを重ねると画像が変わり、赤い枠がつきます。また画像をクリックしている間、三倍に拡大表示します。

現在の ImgTool では、以下のパラメーターを設定することができます。

* 画像の初期設定値 (参照のみ)
 
width, height, src, border, color, bgcolor
 
* マウスオーバー時の設定
 
overWidth, overHeight, overSrc
overBorder, overColor, overBackgroundColor
 
* マウスクリック時の設定
 
downWidth, downHeight, downSrc
downBorder, downColor, downBackgroundColor

実際のコードは以下になります。長いので、効果の数は減らしてあります。完全なコードに興味のある方は、yamachan_common.js ファイルを参照してください。

まずは最初の初期化部分です。画像の最初の状態を保存しておき、また初期化の際の引数を処理しています。

jp.rinco.ImgTool = function(t, p1, p2) {
 if (typeof(t) == 'string')
   this.target = document.getElementById(t);
 else 
   this.target = t;
 this.src = this.target.src;
 if (this.target.style.width == "")
   this.width = this.target.width;
 else
   this.width = this.target.style.width;
 if (this.target.style.height == "")
   this.height = this.target.height;
 else
   this.height = this.target.style.height;
 this.overWidth = "";
 this.overHeight = "";
 this.overSrc = "";
 
 if (p1 != undefined) {
   if (typeof(p1) == 'string')
     this.overSrc = p1;
   else {
     if (p2 == undefined) {   
       this.overWidth = this.FxMulti(this.width, p1);  
       this.overHeight = this.FxMulti(this.height,p1);
     } else {
       this.overWidth = p1;  
       this.overHeight = p2;    
     }  
   }
 }

引き続き、クラス初期化の後半です。イベント処理をおこなう関数を定義しています。

スタイルの変更は最初、foo.style.setAttribute(t,v); のように実行していましたが、Firefox では動作しないようです。悩んだ結果、対象のイメージ内で eval() を実行するという荒業で実装してみました。 (^-^;

 this.target.evalAttribute = function(t, v, d) {
   if (v != "") {
     if (d == undefined) {
       eval("this." + t + "='" + v + "'");   
     } else {
       eval("this." + t + "='" + d + "'");   
     }
   }
 }
 this.target.evalAttribute("style.width",
       this.Fx(this.width));
 this.target.evalAttribute("style.height",
       this.Fx(this.height));
  
 this.onmouseover = function() {
   this.target.evalAttribute("style.width",
       this.Fx(this.overWidth));
   this.target.evalAttribute("style.height",
       this.Fx(this.overHeight));
   this.target.evalAttribute("src", this.overSrc);
 }
 this.onmouseout = function() {
   this.target.evalAttribute("style.width",
       this.overWidth, this.Fx(this.width));
   this.target.evalAttribute("style.height",
       this.overHeight, this.Fx(this.height));
   this.target.evalAttribute("src",
       this.overSrc, this.src);
 }
  
 this.target.aImgTool = this;
 this.target.onmouseover = function() {
   this.aImgTool.onmouseover();
 }
 this.target.onmouseout = function() {
   this.aImgTool.onmouseout();
 }
}

最後にご紹介するのは、prototype で定義した補助関数です。

今回、いったん作成したコードを、Firefox で動作させるのに苦労しました。特に「FireFoxの標準モードでは、style.width,heightに数値での設定ができない」という制限に気がつくまでが長かった...。

Fx() は上記の制限に対応するための quick hack で、数値を渡すと px 表記に変換して返すだけの補助関数です。

FxMulti() も似たようなもので、px などの余分な文字が指定されていた場合でも、正常に掛け算を実行するだけの補助関数です。引数に倍率を指定した場合に使用しています。

jp.rinco.ImgTool.prototype.Fx = function(v) {
 if (typeof(v) == "number")
   return v + "px";
 else
   return v;
}
 
jp.rinco.ImgTool.prototype.FxMulti = function(v, m) {
 if (typeof(v) == "number")
   return eval(v + "*" + m);
 var myReg = new RegExp("[0-9]+", "i");
 if (!myReg.test(v))
   return "error";
 
 var ret = eval(myReg.exec(v) + "*" + m);
 return RegExp.leftContext + ret + RegExp.rightContext; 
}

ちなみに今回のオブジェクトは、画像が主なターゲットと想定して作成したため、ImgTool という名前になっています。が、画像以外に使用してもかまいません。

DIV タグに使用した例
マウスを上に
マウスをクリック

[Ajax] 入力フィールドにSuggest機能をつけてみる (2)

2007-02-27T23:00:00.000+09:00

週末に時間がとれましたので、前回の Suggest機能を書き直してみました。今回はわりと JavaScript っぽくなってきている、気がする。

本サイト右上の検索バーには反映されています。今のところ、見た目の違いは選択キーワードの背景がグレーになったぐらいですかね。

まずは検索バーの html なんですが、よりシンプルになっています。

<form action="http://www.google.co.jp/search">
<input name="q" size="20" id="my-field" />
<input name="q" type="hidden"
 value=" site:http://yamachan-cs.blogspot.com/"/>
<img src="search_glass.gif" alt="Search"
 width="48" height="24" align="bottom"
 onclick="document.getElementById('my-field')
   .form.submit();"
</form>
 
<div id="my-help"
 style="visibility:hidden;display:none;color:blue">
</div>

この部分にはJavaScriptが使用されていない、のが今回のポイントです。普通の検索バーと違うのは、div要素 "my-help" がひそかに追加されていることぐらいですね。

引き続きましては、Suggest機能を追加する JavaScript 部分です。辞書の定義部分をのぞけば、記述は1行とシンプルになっていますね。これで動作します。

<script>
var dic = [
  "Ajax",
  "aptana",
  ...途中省略
  "unescapeHTML"
];
 
var ys=new jp.rinco.Suggest('my-field','my-help',dic);
</script>

ただ、このままでは地味ですので、少し拡張してみましょう。 Suggestされたキーワードにマウスがくると、文字は赤色に、背景は灰色になるようにロジックを追加します。

作成したSuggestオブジェクトの onmouseover, onmouseout 関数を、オーバーライドすればOKです。記述する処理は、ごく普通ですね～

<script>
ys.onmouseover = function() {
  this.style.color = 'red';
  this.style.backgroundColor = '#ddd';
}
ys.onmouseout = function() {
  this.style.color = 'blue';
  this.style.backgroundColor = 'white';
}
</script>

これで jp.rinco.Suggest オブジェクトの使い方の説明は終わりです。前回からの改良点としては、利用方法・拡張方法がシンプルになったこと、そして1ページに複数利用することが可能になったことでしょうか。

実際のコードを簡単にご紹介します。まずはオブジェクトの生成の部分です。

jp.rinco.Suggest = function(t, h, d) {
 if (typeof(t) == 'string')
   this.target = document.getElementById(t);
 else
   this.target = t;
 if (typeof(h) == 'string')
   this.help = document.getElementById(h);
 else
   this.help = h;
 this.dic = d;

 this.target.aYamachanSuggest = this;
 this.target.onkeyup = function() {
   this.aYamachanSuggest.updateHelp();
 }
}

対象のフィールドやヘルプ領域は、id で指定しても、オブジェクトを直接指定してもOKです。対象フィールドのオブジェクトに aYamachanSuggest なんて名前で、勝手に自分自身を登録しちゃってるのがトリッキーかもしれません。

引き続き、Java でいうところのインスタンス・メソッドの定義部分をご紹介します。実際には、上記の生成部分に含まれて記述しています。

まずはSuggestキーワードをヘルプ領域に追加するための、keyElement() 補助関数です。

this.keyElement = function(k) {
 var ke = document.createElement('div')
 ke.innerHTML = k;
 ke.aYamachanSuggest = this;
 ke.onclick = function(){
   this.aYamachanSuggest.click(this);
 }
 if (ke.aYamachanSuggest.onmouseover)
   ke.onmouseover = ke.aYamachanSuggest.onmouseover;
 if (ke.aYamachanSuggest.onmouseout)
   ke.onmouseout = ke.aYamachanSuggest.onmouseout;
 return ke;
}

で、実際にヘルプ領域を更新して表示/非表示する updateHelp() 関数です。

this.updateHelp = function() {
 var k = jp.rinco.lastWord(this.target.value);
 if (k == "") {
   this.help.style.visibility = 'hidden';
   this.help.style.display = 'none';
   return;
 }

 var lk = k.toLowerCase();
 var counter = 0;
 this.help.innerHTML = "";

 for (loop = 0; loop < this.dic.length; loop++) {
   var dk = this.dic[loop];
   if (dk.toLowerCase().indexOf(lk) == 0) {
     this.help.appendChild(this.keyElement(dk));
     counter++;
   }
 }

 if (counter > 0) {
   this.help.style.visibility = 'visible';
   this.help.style.display = 'block';
 } else {
   this.help.style.visibility = 'hidden';
   this.help.style.display = 'none';
 }
}

最後は Java でいうクラス・メソッドのご紹介です。ついに登場した prototype って感じですね。これは生成部分の外で記述されています。

click() は、Suggestキーワードがクリックされたときに呼び出される関数です。

jp.rinco.Suggest.prototype.click = function(ke) {
 var te = ke.aYamachanSuggest.target;
 var k = jp.rinco.lastWord(te.value);
 if (k == "") return;

 te.value=te.value.substring(0,te.value.length-k.length)
    + ke.innerHTML;
 ke.aYamachanSuggest.updateHelp();
 te.focus();
}

以上、まだ不安な部分は残しているものの、まぁ JavaScript で書いたプログラムだと言えるレベルになってきたのではないかと...。そして僕も「趣味のJSプログラマーです」と言っても怒られないかも、というレベルに？

[JS] ネームスペース jp.rinco

2007-02-26T23:00:00.000+09:00

JavaScriptにはJavaのようなネームスペース(名前空間)が無いので不便だな、とか考えていた自分は甘かったです。先人たちは適切なグローバルオブジェクトを作成し、代用している様子。

そこで僕もJava風に自分のドメインの逆順 jp.rinco というオブジェクトを作成し、関数などを保持するようにしました。 jsファイルの先頭に、以下のような定義文を追加します。

if (typeof jp == "undefined") {
  var jp = {};
}
if (typeof jp.rinco == "undefined") {
  jp.rinco = {};
}

以前は以下のように関数を定義していました。

function yamachan_display(id) {
  ...
}

今後は、以下のように関数を定義するようにします。

jp.rinco.display = function(id) {
  ...
}

過去のコードや記事も順次、修正していきたいと考えています。

[Ajax] 入力フィールドにSuggest機能をつけてみる (1)

2007-02-24T23:00:00.000+09:00

少し前から、本blogの右上に検索ボックスが表示されているのにお気づきでしょうか？この検索ボックスですが、ちょっと仕掛がしてあります。

キーワードを入れると、↓のように候補が下に表示されるようになっています。キーワードをクリックすると、自動入力されます。 a,r,y とか入力してみてください。

IE などのブラウザにも似た機能がありますが、こちらはAjaxで実装されています。初めて使用する時も有効なこと、表示されるキーワードはサイト管理者が設定したものであること、あたりがメリットでしょうか。

正直、中身はあまりJavaScriptっぽくないコードで、書き直している最中なのですが、、、とりあえず動いているバージョンを、バックアップも兼ねて貼っておきます。

2007/2/27 追記: 書き直した版を公開しました

実際の検索ボックスですが、まずは以下のようなscriptが貼ってあります。

<script>
function my_submit() {
 var k = y_suggest_target.value;
 location.href = 'http://www.google.co.jp/search?
   q=site:http://yamachan-cs.blogspot.com/ ' +
   encodeURIComponent(k);
}
 
function my_search_helpLine(key) {
 return "<span
  onclick=\"yamachan_suggest_click('"+key+"');\"
  onmouseover=\"this.style.color='red';\"
  onmouseout=\"this.style.color='blue';\">"
  + key + "</span><br />";
}
 
var my_dic = [
  "Ajax",
  "aptana",
  ...途中省略
  "unescapeHTML"
];
</script>

my_submit() はSuggest機能とは関係なく、単に検索実行用の関数です。 Google をSite:オプションをつけてキーワード検索する単純なものです。

my_search_helpLine() は表示用の補助関数です。必須ではありません。　Suggestされるキーワードの上にマウスがある場合、キーワードを赤色にするためのhtml出力を定義しています。

my_dic がSuggestされるキーワード文字列の配列になります。これらの事前定義に続き、以下のhtmlが貼られています。

<form style="margin:0">
<input size="20" id="my-search-field"
  onkeyup="yamachan_suggest(
      'my-search-field','my-search-help',
      my_dic, my_search_helpLine);"
/>
<img src="search.gif"
  width="48" height="24" alt="Search"
  onclick="my_submit();"
/>
</form>
 
<div id="my-search-help"
 style="visibility:hidden;display:none;color:blue">
</div>

実際の入力欄に onkeyup が指定されていること、ヘルプ表示用のdivエリアが非表示で用意されていること、の二点がポイントでしょうか。

さて利用されている関数ですが、メイン部分は以下のようになっています。最初のvarがとても恥ずかしいデスネ。

var yamachan_suggest_target;
var y_suggest_help;
var y_suggest_dic;
var y_suggest_func;
 
function yamachan_suggest(f, h, dic, func) {
 y_suggest_target=document.getElementById(f);
 y_suggest_help=document.getElementById(h);
 y_suggest_dic = dic;
 y_suggest_func = func;
 var skey=yamachan_lastWord(y_suggest_target.value);
 y_suggest_help.innerHTML=y_suggest_helpHTML(skey); 
 if (y_suggest_help.innerHTML == "") {
   y_suggest_help.style.visibility = 'hidden';
   y_suggest_help.style.display = 'none';
 } else {
   y_suggest_help.style.visibility = 'visible';
   y_suggest_help.style.display = 'block';  
 } 
}

yamachan_lastWord() は以前にご紹介したもので、文字列の最後の1単語を得る関数です。また以下の補助的な関数を使用します。

function yamachan_suggest_helpHTML(skey){
 if (skey == "") return "";
 var sk = skey.toLowerCase();
 var val = "";
 for(loop=0;loop<y_suggest_dic.length;loop++){
  var k = y_suggest_dic[loop];
  if (k.toLowerCase().indexOf(sk) == 0) {
    if (y_suggest_func ==null||y_suggest_func=='')
      val = val +
        "<span onclick=\"yamachan_suggest_click('"
        + k + "');\">" + k + "</span><br />";
    else
      val = val + y_suggest_func(k);
  }
 }
 return val;
}
 
function yamachan_suggest_click(k) {
 var skey=yamachan_lastWord(y_suggest_target.value);
 if (skey != "") {
  y_suggest_target.value =
    y_suggest_target.value.substring(0,
    y_suggest_target.value.length-skey.length) + k; 
  y_suggest_help.innerHTML =
      yamachan_suggest_helpHTML(k);
  y_suggest_target.focus();
 }
}

yamachan_suggest_helpHTML() はキーワードリストのhtmlを作成する関数です。 yamachan_suggest_click() はその生成されたhtmlに埋め込まれ、キーワードをクリックしたときに呼び出されます。

今回はベタに検索ボックスに使用してみましたが、いろいろ活用方法はあるとおもいます。例えば製品名を入力する欄で、代表的な製品をSuggestしてみるとか。

[JS] 最後のwordを得る関数

2007-02-19T01:00:00.000+09:00

もうひとつ、紹介し忘れていた関数がありました。文字列を単語(word)単位で分割し、その最後のwordを返す関数です。

jp.rinco.lastWord = function(str) {
 if (str == "") return "";
 var s=str.replace(/(\s|\u3000)+/g,' ').split(' ');
 return s[s.length - 1];
}

replace() に指定している "/(\s|\u3000)+/g" という正規表現(RegExp)が少し複雑かもしれません。 split()の事前処理として、タブや改行や全角スペースも半角スペースに変換しています。

正規表現について簡単に説明します。もっとも単純な変換だと str.replace(/\s/, ' '); という感じになるでしょうか。

ただ"\s" だけでは全角スペースに対応できない様子なので、全角スペースのUnicode表記 "\u3000" と組み合わせて "\s|\u3000" という表記にします。

複数連続したスペースが含まれる場合があります。そこでそれらをまとめ、1つの対象として処理するために、1回以上の繰り返し "+" を使用して "(\s|\u3000)+" という表記にします。

最後に追加される "/g" はよく使いますね。一致する対象を全て処理するオプション、グローバルマッチングです。

文字列操作において、正規表現は非常に便利ですので、ぜひ活用してみてください。

2007/2/27 追記: jp.rincoオブジェクトへ移動

[JS] タグを処理する関数

2007-02-18T13:00:00.000+09:00

Ajaxっぽいサンプルをいろいろ作成していますが、もう少し時間がかかりそうです。今回は、その過程で作成した関数をご紹介します。

まずは単に & < > 文字を、& < > に HTMLエスケープする escapeHTML() 関数。そして戻す unescapeHTML() 関数です。

jp.rinco.escapeHTML = function(str) {
  return str.replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;");
}
jp.rinco.unescapeHTML = function(str) {
  return str.replace(/&gt;/g, ">")
      .replace(/&lt;/g, "<")
      .replace(/&amp;/g, "&");
}

そして文字列から指定したタグの中身を取り出す、tagText() 関数です。

例えば str に "<title>aaa</title>"、tag_s に "<title>"、tag_e に "</title>" を指定し、その間に指定されたタグの中身 "aaa" を取り出します。

最後の引数は通常は false、str に指定した文字列が HTMLエスケープされている場合に true を指定します。例えば処理する文字列が "<title>aaa</title>" のような場合に true にします。

※ これはレアケースのようですが、Domino サイトが対象の場合には有効です

jp.rinco.tagText = function(str,tag_s,tag_e,cflag){
 if (tag_s == "" || tag_e == "")
  return "";
  
 var key_s=cflag?jp.rinco.escapeHTML(tag_s):tag_s;
 var key_e=cflag?jp.rinco.escapeHTML(tag_e):tag_e; 
 var pos_s = str.indexOf(key_s);
 var pos_e = str.indexOf(key_e);
 if (pos_s < 0 || pos_e < 0)
   return "";
 else
  return str.substring(pos_s+key_s.length, pos_e);
}

以上、ホントは String に prototype で組み込むのが JavaScript っぽいのですが。単に関数にしちゃってる、弱気な僕なのでありました。

2007/2/27 追記: jp.rincoオブジェクトへ移動

[TALK] JS関数の簡単な管理/デバッグ法

2007-02-17T22:00:00.000+09:00

Java 等の開発では JUnit のお世話になっている僕なので、JavaScript でも似たようなことをやっています。参考になるか不明ですが、ご紹介してみましょう。

まずは aptana で関数用に適当なhtmlファイルを作成し、以下のようにシンプルなテスト用の関数を定義しておきます。

渡す引数はラベル、評価する値1、評価する値2 となります。値が違った場合に限り、ラベルを使用してエラーメッセージを表示する仕組みです。

<script>
function jsUnit(l, v1, v2) {
  if (v1 != v2)
    document.writeln(l+": "+v1+" != "+v2); 
}
</script>

このhtmlの中に、以下のように関数をいろいろ定義していきます。

<h2>jp.rinco.parseURL(url, name, value)</h2>
ここに関数の説明
<script>
jp.rinco.parseURL = function(url, name, value) {
  ...実際の関数のロジック
}

jsUnit("1",jp.rinco.parseURL("","a","d"),"d");
jsUnit("2",jp.rinco.parseURL("a=b","a","d"),"b");
...
</script>

で、実際のテストは、このhtmlをプレビューしてみるだけです。全部の関数がチェックされ、問題のある関数のセクションにはエラーメッセージが表示されるハズです。

jsUnit はできるだけ多くのパターンを登録しておきます。関数のロジックはhtmlに直接記載せず、実際の js ファイルを読み込むようにしても良いでしょう。

ちょっとした工夫ですが、関数の管理が楽になり、かつクオリティを保つことができます。コメントを書いておけば、そのままマニュアルがわりにもなります。お手軽な開発には、わりとお勧めな方法です。

[JS] クリックで表示/非表示する関数

2007-02-04T23:55:00.000+09:00

yamachan GAMEメモの投稿には、ネタバレを含むものがあります。例えば [MSX] Shooting: 魔城伝説の後半面＆エンディングの情報とか。

ネタバレ部分を最初は隠しておいて、クリックすると表示/非表示を切り替える。まぁ、JavaScript の初歩って感じですね。実用になる最小のサンプルといいますか...。

よく使うので、メモとして貼っておきます。

jp.rinco.display = function(id) {
  var target = document.getElementById(id);
  if (target.style.visibility == 'hidden') {
    target.style.visibility = 'visible';
    target.style.display = 'block';
  } else {
    target.style.visibility='hidden';
    target.style.display = 'none';
  }
}

以下が使用例です。クリックしてみてください。

エンディングについて (ネタバレのためクリックで表示)

以下のような html で実現しています。複数使用するときには 'div_netabare1' を適当に変更してください。

<div
  style="background-color:black;
  color:white; padding:4px"
  onclick="jp.rinco.display('div_netabare1');">
エンディングについて (ネタバレのためクリックで表示)
</div>
<div id="div_netabare1"
 style="visibility:hidden; display:none;
 border:solid 2px black; padding:4px">
ここにネタバレの内容！<br />
ここにネタバレの内容！
</div>

2007/2/27 追記: jp.rincoオブジェクトへ移動
2007/3/13 追記:

いろいろ多用していますので、ちょっと改良してみました

まず、対象の指定に element だけでなく、id値も指定できるように拡張してみました。必要もないのに getDocumentById() するのも面倒ですしね。

また強制的に表示/非表示を指定できるようにしてみました。第2引数に true を指定すると強制表示、false を指定すると強制非表示です。むろん、指定しなければ従来どおりのトグル動作です。

jp.rinco.display = function(id, v) {
  var target;
  if (typeof(id) == 'string')
    target = document.getElementById(id);
  else 
    target = id;
 
  var vflag;
  if (v == undefined) {
    if (target.style.visibility == 'hidden')
       vflag = true;
   else
       vflag = false;   
  } else
   vflag = v;
 
  if (vflag) {
    target.style.visibility = 'visible';
    target.style.display = 'block';
  } else {
    target.style.visibility='hidden';
    target.style.display = 'none';
  }
}

[Ajax] Google MAPS を使用してみる

2007-01-27T11:03:00.000+09:00

Ajax や Web2.0 がここまで盛り上がったのは、Googleマップの存在が大きいのではないでしょうか。

プラグイン無しで実現された、ドラッグでスクロールする地図の存在は衝撃的でした。新しい技術のメリットを判りやすく実現した、理想的なキラーアプリだと考えています。さらにAPIが公開され、自サイトに組み込める点はもう素晴らしすぎて涙が出そうです。

というわけで、↓利用してみました。

Googleマップを利用する場合、ページに直接埋め込む方法と、別に用意したhtmlファイルをiframeで組み込む方法があります。

ページに直接埋め込む方法だと、利用する場所に全てのコードがあるので準備が簡単です。ただ文字コードの問題が発生することがあるとか。具体的には、そのページが UTF-8 で保存されているのが望ましいみたい。

またサイトごとに Google MAPS APIサイトから、APIキーを取得する必要があります。 Bloggerだと各blogのサイトは異なるので、それぞれに APIキーを取得して管理する必要がありそう。僕のようにblog間の記事移動が多い(下書きblogから移動したりとか)場合は、これはちょっと面倒です。

そこで自身のドメイン rinco.jp でAPIキーを作成し、ここにマップ用のhtmlファイルを置くことにしました。以下のようにiframeでページに組み込みます。

<iframe
 src="http://rinco.jp/blog/yamachan_gmap.html
  ?zoom=15&ll=35.711308,139.775582&w=400&h=300"
 width="400" height="300"
 scrolling="NO" frameborder="0"
 marginwidth="0" marginheight="0"
></iframe>

マップ用のhtmlは個別に用意するのも面倒です。そこで Google MAPS サイトにあるサンプルをベースに、URLパラメータを参照するようにload()関数を拡張してみました。使用している jp.rinco.url.parse() 関数はコチラを参照。

function load() {
if (GBrowserIsCompatible()) {
  var mArea = document.getElementById('maparea');
  mArea.style.width=jp.rinco.url.parse("w","400px");
  mArea.style.height=jp.rinco.url.parse("h","300px");
  var zoom=jp.rinco.url.parse("zoom", "16");
 
  var ll = jp.rinco.url.parse("ll", "35.68,139.76");
  ll = ll.split(',');
  var point = new GLatLng(ll[0],ll[1]);
 
  var map = new GMap2(mArea);
  map.addControl(new GSmallMapControl());
  map.setCenter(point, +zoom);
 
  var marker = new GMarker(point);
  map.addOverlay(marker);
}
}

ただこのマップ用のhtmlファイル、利用制限をかけていないので、現時点ではどんなサイトからでも利用できてしまいます。上記コードを利用するのは無論かまいませんが、マップ用htmlを直接利用するのは避けてくださいね。 APIキーをきちんと取得し、自分のサイトにマップ用htmlを設置してください。

[JS] URLパラメータを得る関数

2007-01-22T23:55:00.000+09:00

久しぶりに JavaScript を書いていて、URL パラメーターの値を入手する関数が必要になりました。例えば、

http://yamachan-memo.blogspot.com/index.html?foo=12&bar=13

というURLだと、fooで12、barで13という値を得る方法。 Domino だと @UrlQueryString("foo") とかで一発なんだけど。

どっかにありそうと思って探したんだけど、うまく見つからなかった。ざっと書いたものだけど、メモとして貼っておきます。

var foo = jp.rinco.parseURL(location.search, "foo", "haha");
var bar = jp.rinco.parseURL(location.search, "bar", "hehe");

とか使います。

ちなみに最後の引数は、該当するパラメータが見つからない場合のデフォルト値です。必要がない場合には "" を指定してください。

jp.rinco.parseURL = function(url, name, value){
  var pos_s = url.indexOf(name + "=");
  if(pos_s < 0)
    return  value; 
  var url = url.substring(pos_s+name.length+1);
  var pos_e = url.indexOf('&'); 
  if (pos_e < 0)
    return decodeURIComponent(url);
  return decodeURIComponent(
                  url.substring(0, pos_e));
}

2007/1/29 追記: 戻り値を decodeURIComponent() するように修正
2007/2/27 追記: jp.rincoオブジェクトへ移動
2007/3/13 追記:

jp.rinco.url 内に移動＆バグ修正

以下は jp.rinco.url 内に移動したロジックです。 jp.rinco.url は単なるインスタンスで、その実装は jp.rinco.urlTool となっています。 parse() 関数部分のみ貼っておきます。

this.parse = function(v1, v2, v3) {
 var u; var n; var d;  
 if (v2 == undefined) {
   u = this.param; n = v1; d = "";
 } else if (v3 == undefined) {
   u = this.param; n = v1; d = v2;
 } else {
   u = v1; n = v2; d = v3;   
 }
 
 var pos = u.indexOf("?" + n + "=");
 if(pos < 0)  
   pos = u.indexOf("&" + n + "=");
 if(pos < 0)
   return  d;
 
 var r = u.substring(pos + n.length + 2);
 pos = r.indexOf('&'); 
 if (pos < 0)
   return decodeURIComponent(r);
 return decodeURIComponent(r.substring(0, pos)); 
}

引数が3つの場合は従来の parseURL と同じ動作をします。最初の url 引数は省略でき、その場合は現在の URL に対する動作になります。最後のデフォルト値も省略できます。

var foo = jp.rinco.url.parse("foo.htm&a=1","foo", "haha");
var bar = jp.rinco.url.parse("bar", "hehe");
var puu = jp.rinco.url.parse("puu");

とか使います。

また "a=1" が "aa=1" にマッチしてしまう不具合がありましたので、修正してあります。

なお jp.rinco.url には現在のファイル名(例: このページだと"js-url.html")を得る file 属性など、url 処理に関する便利な機能を実装しています。気が向いたら参考にしてみてください。

[TALK] Ajax も対象にしてみました

2007-01-21T21:07:00.000+09:00

えー、あいかわらず浮気者の僕でして。 Ajax も blog の対象に加えてみました。

数年前に使ってたときは DHTML って呼んでたと記憶してるんですが、とにかく Netscape 4.x と IE 4.x あたりで正常に動作するよう、非常に苦労した覚えがあります。でも最近は JavaScript も DOM も非常に整理されている様子。

で、具体的なきっかけがありまして。 prototype.js の開発者向けメモ読んで感動したこと。 JavaScript って変な言語だなとは思ってましたが、js ファイル1つでここまで変わるとは...。一気に好きになっちゃいました。

あと試しに使ってみた Eclipse RCP ベースの開発環境 Aptana が便利だったこと。いろいろ試して、数年間のギャップを埋めていきたいと考えています。

[NEWS] XNA Game Studio Express

2006-12-20T21:54:00.000+09:00

マイクロソフト、WindowsとXbox 360で同一のゲーム開発環境を可能にする「XNA Game Studio Express」最終版を提供開始だそうですね。同サイトの西川善司さんの記事を読むとわくわくしますねぇ。

僕の愛用マシン(使用5年目！)ではスペック不足だし、XBOX360買わなきゃいけないし、実行するためだけにライセンス料が必要なのはまだ敷居が高いけれど。しかし確かに画期的な出来事ではあります。

10年以上前から、僕が作りたいゲームがあります。恥ずかしいからまだ概要は書かないけど、今回の発表で、使用言語は C# に絞られたカンジ。この年末、精進しなくては！

[TALK] blog 追加してみました

2006-11-11T14:08:00.000+09:00

Blogger って、投稿をカテゴリ分けする仕組みが無いみたいですね。目的別の blog を複数立ち上げてくれ、というスタンスのようです。

僕は Java/Lotus Notes あたりがメインなんですが、最近は趣味として、.NET Framework と C# を少しずつ勉強しています。

「標準C#入門」という本で文法等を学び、「Visual C# .NET 逆引き大全 500」という本で利用パターンを学び、「C# ゲームプログラミング」という本で簡単な利用イメージが浮かんできた、とまぁ、入り口付近でのんびりやっている状況です。

Visual C# 2005 Express Edition 日本語版を導入してみました。あと、Java 経験者としては、私がJavaからC#に乗り換えた10の理由という記事が参考になりました。

で、途中経過を忘れないよう、学習結果を記録する blog を作成してみました。あと、モチベーション維持のため？

ただ Blogger って blog を消すのも簡単なシステムなので、あまり自分への縛りにはならない気もするんですけどね。 (^-^;