Twitterツールに追加している、軽快に返信機能は概ね正しく動いているようです。
しかも、軽い！これが一番！！

今日は自動で新しいつぶやきを取得する機能を付けました。
ブラウザのリロード（リフレッシュ）機能を使えばできるはずです。

まず試したのは、メタタグによるリフレッシュです。
<meta http-equiv="refresh" content="秒数">
これで、指定した秒数ごとにリフレッシュされます。

ところが、画面の表示が新しくなるだけで、コマンドは走りませんでした。

ブラウザの【更新】が自動でできれば機能が実現できるはずなんですが。

次に試したのが、JavaScriptです。
<script type="text/javascript" language="javascript">
<!--
setTimeout("location.reload()",ミリ秒数);
// -->
</script>
ミリ秒数で指定することに注意が必要です。
1秒なら1000、5秒なら5000、10秒なら10000とします。

こちらはうまくいきました。

これで自動的に新しいつぶやきを取得し、画面に表示してくれます。

必要に迫られて、JavaScriptでコーディングしています。
文字列の中でヒットした箇所を全て置換したいのですが、なぜか最初の箇所しか置換されない・・・
調べると、【replace】はそういう仕様のようです。

では、どうすればよいか。
正規表現による置換を実行すればよいようです。

strが【abbbabbb】
のとき、
　str = str.replace("a", "b");
を実行すると、strは【bbbbabbb】ですが、
　str = str.replace(/a/g, "b");
なら、strは【bbbbbbbb】になります。

なんだか置換文字列の例がよくない気がしますが。
まぁこれで解決です。

はぁ～、しかし、JavaScriptはこんな簡単なことも知らない。

以前JavaScriptで、プルダウンで選択した値によって表示をオンにしたりオフにしたりするコードを書いていましたが、OperaとFirefoxで動かないことが分かりました。
そこで、ネットで色々調べて、あれこれ試してみました。

コールするhtml側
<form method="post" action="" name="frmForm">
　<select name="selection" onchange="funHyoji(frmForm)">
　　<option value="val1">値1</option>
　　<option value="val2">値2</option>
　</select>
　<span id="hyoji" name="hyoji">
　　表示したり表示を消したり
　</span>
</form>

JavaScriptの関数
function funHyoji(frmObj){
　if(frmObj.elements["selection"].value == "val1")){
　　document.getElementById("hyoji").style.visibility="visible";
　}
　else{
　　document.getElementById("hyoji").style.visibility="hidden";
　}
}

これで、値1を選んだときは文字が表示され、値1以外（この場合は値2）のときは表示が消えます。

以前は、JavaScriptを
function dspSort(frmObj) {
　if(frmObj.elements["selection"].value == "val1"){
　　frmObj.document.getElementById("hyoji").style.display="";
　}
　else{
　　frmObj.document.getElementById("hyoji").style.display="none";
　}
}
と書いていました。
IEではちゃんと動くのですが、OperaとFirefoxでは動きませんでした。

ブラウザでリンクをクリックすると、新しいブラウザを開き、そこへリンク先のURLを表示するのは、アンカータグの【target】属性に【_blank】を指定します。

このとき、ブラウザのプロパティを指定して開くには、JavaScriptを利用します。

html側
<a href="リンク先URL" target="window_name" onClick="disp_subwindow('リンク先URL', 750, 800)">
　アンカーテキスト
</a>

JavaScript側
function disp_subwindow(url, width, height){
　window.open(url, "window_name", "width=" + width + ", height=" + height + ", resizable=yes, scrollbars=yes, status=no, toolbar=no");
}

この場合、幅750px、高さ800px、リサイズ可能、スクロールバー表示、ステータスバー非表示、ツールバー非表示のブラウザが新しく立ち上がり、リンク先URLが表示されます。
JavaScriptが使えない場合は、単純に新しいブラウザが立ち上がりリンク先URLが表示されます。

もっと色々なプロパティも設定できます。

JavaScriptで、文字列にある文字列がどこに含まれているかを検索する関数です。


String.indexOf(key, from);
Stringの中にkeyが含まれる場合、その文字位置を返します。検索はfrom番目の文字から後ろに検索します。
keyが含まれない場合、-1を返します。

String.lastIndexOf(key, from);
Stringの中にkeyが含まれる場合、その文字位置を返します。検索はfrom番目の文字から前に検索します。
keyが含まれない場合、-1を返します。



strString = "abc@de@fg";
の場合、

strString.indexOf("@", 0);
は【3】、

strString.indexOf("@", 4);
は【6】です。


また、
strString.lastIndexOf("@", 8);
は【6】、

strString.lastIndexOf("@", 5);
は【3】です。

ブラウザにプルダウンとリンクが表示されている画面で、プルダウンが選択されるたびにリンク先のURLを更新したい場合のソースです。

ブラウザでの処理なので、JavaScriptでコーディングします。


PHP（html）側
<form method="post" action="" name="frmInfo">
　<select name="sel_val" onChange='set_Val("sel_val", "リンク先")'>
　　<option value="Val1">値1</option>
　　<option value="Val2">値2</option>
　　<option value="Val3">値3</option>
　</select>

　<a href="link_saki.php?val=Val1">リンク先</a>

</form>


JavaScript側
function set_cahra_code(name, val){
　for (var i = 0; i < document.links.length; i++) {
　　if((window.document.links[i].innerText === val) || (window.document.links[i].Text === val)){
　　　var strURL = window.document.links[i].href;
　　　strURL = strURL.replace("Val1", "");
　　　strURL = strURL.replace("Val2", "");
　　　strURL = strURL.replace("Val3", "");
　　　if(window.document.frmInfo.elements[name].value === ""){
　　　　window.document.links[i].href = strURL + "Val1";
　　　}
　　　else{
　　　　window.document.links[i].href = strURL + window.document.frmInfo.elements[name].value;
　　　}
　　}
　}
}


アンカータグは同じ画面に他にもあるかもしれないので、全てのアンカータグをチェックします。識別にリンクテキストを使っているので、同じものがないようにしておきます。【innerText】（Internet Explorer 以外のブラウザは【Text】）のほかにも、リンク先URL【href】などで識別してもよいでしょう。

初期状態は、【link_saki.php?val=Val1】です。プルダウンの選択を変えるたびに、【link_saki.php?val=Val2】、【link_saki.php?val=Val3】などに更新されます。

ちょっとかっこ悪いのですが、URLのVal1～Val3を都度空文字に置き換え、新しい値をくっつけています。


これで、プルダウンを変更すると、リンク先のURLが更新されます。
つまり、プルダウンの選択に合わせたURLになります。

自前ブログもほぼ出来上がりました。Movable Typeの記事投稿画面で使いづらいと感じるところを改善した投稿画面にします。と言っても、見た目は（デザイン）しょぼいんですが。


使いづらい点は、
・アンカータグにtitle属性、rel属性が入らない
・html特殊文字が入れられない
です。


アンカータグを入れるボタンがありますが、
<a href="" ></a>
という最低限のタグが挿入されます。

これを、
<a href="" title="" rel="nofollow"></a>
としたいのです。

いちいちhtmlエディタを立ち上げたり、サイトを表示させたりしてタグをコピーするのは面倒です。

html特殊文字、例えば、【&lt;】、【&gt;】などです。
これも今まではいちいちエディタを立ち上げてコピーしてました。

覚えられればいいのですが、すぐ忘れてしまうので・・


画面にボタンを表示させ、クリックすると入力エリアに文字を入れます。
JavaScriptでコーディングします。と言ってもとっても簡単なソースです。
カーソルのあるところに挿入するのが本来ですが、面倒なので、入力エリアの最後に文字をくっつけます。

PHP側
<form method="post" action="" name="frmINS">
　<input type="button" value="&lt;" onClick ='function()'>
　<textarea name="body" cols="80" rows="40" wrap="soft"></textarea>
</form>

JavaScript側
function function(){
　　document.frmINS.body.value = document.frmINS.body.value + '&lt;';
}


これで、【&lt;】ボタンをクリックすると、テキストエリアに【&lt;】が追加表示されます。

昨日の続きです（ツリークリックで表示On・Off）。

JavaScriptではかけないので、PHPを併用します。


クリックで、表示・非表示を切り替えるとき、htmlのフォームの値を書き換えます。

JavaScript
表示のとき
document.reduce.pr_mode.value = "on";
非表示のとき
document.reduce.pr_mode.value = "oｆｆ";

html
<form name="reduce" onload="tree(0)">
　<input type="hidden" name="pr_mode" value="off">
</form>


ページが表示されるとき$pr_modeの値によって、ツリーの展開・非展開を切り替えます。
$pr_mode="off"（非表示）のときは
<div id="tree0" style="display:none;>

$pr_mode="on"（表示）のときは
<div id="tree0">

更に、クリックしたとき展開。非展開を保持したい全てのリンクに$pr_modeの値付け足してやります。
今までのリンク先URLが
http://test.com/cate_tenkai.php?cate=1
のときは、
http://test.com/cate_tenkai.php?cate=1&pr_mode=on
か
http://test.com/cate_tenkai.php?cate=1&pr_mode=oｆｆ


これでやっと展開を保持したままリロードできます。

カテゴリ1
　└ カテゴリ1-1
　└ カテゴリ1-2
　　└ カテゴリ1-2-1
　　└ カテゴリ1-2-2
　└ カテゴリ1-3
カテゴリ2
　・
　・
　・

とします。これを、

カテゴリ1
　└ カテゴリ1-1
　└ カテゴリ1-2
　└ カテゴリ1-3
カテゴリ2
　・
　・
　・

と表示しておき、カテゴリ1-2がクリックされたら、
カテゴリ1-2-1
カテゴリ1-2-2
が表示されるようにします。再度クリックされると、表示が消えます。


表示・非表示で画面をリロードしたくないので、ブラウザ側で動くJavaScriptで書きます。


まず、JavaScript。
flag = new Array();
function tree(menu){
　　tree_list = document.getElementById("tree" + menu);
　　if(flag[menu] == 1){
　　　　tree_list.style.display='none';
　　　　flag[menu] = 0;
　　}
　　else{
　　　　tree_list.style.display='block';
　　　　flag[menu] = 1;
　　}
}

を外部ファイル【function.js】として保存します。


次にhtml。
適切なことろで、【function.js】を読み込みます。
<script type="text/javascript" src="function.js"></script>


更にカテゴリ1-2に
<a href="#" onclick="tree(0)">└ カテゴリ1-2</a>
<div id="tree0" style="display:none;>
　　└ カテゴリ1-2-1
　　└ カテゴリ1-2-2
</div>

とします。


画面を表示したときは、【style="display:none;】があるので、カテゴリ1-2-1と1-2-2は表示されません。

カテゴリ1-2がクリックされると、JavaScriptのtree関数がCallされます。flag[menu]の値によって表示・非表示を切り替えることができます。現在非表示なら表示され、表示されていれば非表示になります。


これで、カテゴリ1-2をクリックで、表示と非表示を切り替えることができるようになりました。


しかし、このままでは、画面をリロードするたびに、カテゴリ1-2が非表示になります。

例えば、カテゴリ1-2を展開した状態で、カテゴリ1-2-1のリンクをクリックすると・・・
カテゴリ1
　└ カテゴリ1-1
　└ カテゴリ1-2
　　└ カテゴリ1-2-1
　　└ カテゴリ1-2-2
　└ カテゴリ1-3
カテゴリ2
　・
　・
　・

から

カテゴリ1
　└ カテゴリ1-1
　└ カテゴリ1-2
　└ カテゴリ1-3
カテゴリ2
　・
　・
　・

と閉じた状態に戻ってしまいます。

これって、ウザくないですか？ そうでもない？

次にカテゴリ1-2-2を見たいのに、またカテゴリ1-2にマウスを持っていって、クリックして展開しないといけない・・・


そこで、展開したら、展開したままにする方法を考えてみました。
この場合はブラウザ側だけではすみません。URLが変わるので、サーバーにも情報を渡してやらなければいけません。


ちょっと長くなったので、続きはまた。

プルダウンの選択を変更したら、表示されているデータを表示しなおす機能は、PHPと同様perlでは行えないようなのでjavascriptで書きます。個人的にはボタンクリックで表示するのが好き（プルダウンを変更したら処理が走るとなんか落ち着かない）なのですが、仕方ありません。


プルダウンつまりselectタグに、値が変更されたら、というイベント処理を書きます。値が変更されたら、javascriptの関数をコールします。
javascript側では、サブミットします。


javascript
<script type="text/javascript">
<!--
　function j_function(){
　　document.forms[name].submit();
　}
// -->
</script>


form
<form action="ファイル名" name="name" method="post">
<select name="cate_id" onChange="j_function()">
<option value="1" selected>カテゴリ1</option>
<option value="2">カテゴリ2</option>
</select>
</form>

あまり書く機会がないせいか、javascriptはどうも苦手です。