管理 | 差分 || 新規作成 || カテゴリ一覧 | ページ一覧 | 更新履歴 | 差分履歴 || アンテナ || PUT || more≫ ≫omit
shortcut: FrontPage || WikiLab | StoreRoom/最新 | 日々の泡 | むず痒いパソコン日記/最新 || HelpPage ||[edit]
category: WebsiteWork/JavaScript

WebsiteWork/JavaScript/DocumentTagEdit - おさらい「機械の考え方」。

LastModified :
[管理]

おさらい「機械の考え方」。

| むず痒いパソコン日記 || WebsiteWork/JavaScript |


去年の8月ごろ JavaScriptにちょっとだけ手をつけて、 「"機械に解るように物事を説明する"というのは、自分には向いてない」と判明した。 「1週間でできる」本の木曜日あたりまで読んで放り投げた記憶があるが、しかし諦めたわけではない。 単に、「覚えた実感」がなくてつまらなくなっただけだ。 だって、例えば「今日は[配列]を学びました」と言っても、 「お手本のコードを丸写ししてちゃんと動く」のは当たり前なんだもん。

というわけで、お題を見つけて1年ぶりに、再挑戦。本当はPerlの勉強をしたいんだけど、 この際慣れたいのは、「機械にものを言い聞かすときの、まだるっこしさ」。

2002/06/20(thu)

[TOP↑] [管理]

お題は「掲示板用簡易タグ付けスクリプト」。

前に[[こんなもの ]]を作って、結構重宝しているので、コレをちょっと拡張してみよう。 やりたいことは、単に
「テキストエリアに文字列を入力、色や大きさを選ぶと、タグ付きでクリップボードに格納される」
というだけ。 いかにもフリーウェアでありそうだから、2・3探して使用してみたんだけど、私が欲しいのとちょっと違う。 というわけで、「念願」の、「欲しいものがなかったから作る」試み。

「そんなものを作るヒマに、何万何十万のタグが手書きで書ける」という現実はヨコに置く。 大体、IMEに単語登録もしてあったりはするんだし、ソレがいちばん簡単なのには違いない。

まずはさくっとHTML部分を書き、去年作った「ソフトウェアキーボード」のソースを見る。 「…」。クリップボードに文字列を格納する方法を見たかったんだけど、なんだかよく解らない。 何が書いてあるんだろう。あっさり諦めて、「そのうち」ということにする。

2002/07/05(fri)

[TOP↑] [管理]

さて、「そのうち」の時期がやってきた。 冷静に「ソフトウェアキーボード」のソースを見直す。「クリップボードにコピー」の処理は

text=document.cb.text.createTextRange();
text.execCommand("copy");

これだけ。文字列をクリックするごとにコレを呼び出して、 [document.cb.text]内の文字列をクリップボードにコピーしてるらしい。

HTML部分は、大体こんな感じ。

<form>
テキスト入力(name="text"):<input type="text"><br>
フォントの色(name="font_c"):
<input type="radio">赤
<input type="radio">青
<input type="radio">黄
<br>
フォントの大きさ(name="font_s"):
<input type="radio">サイズ1
<input type="radio">サイズ2
<input type="radio">サイズ3
<br>
文字列の修飾:
<input type="checkbox">ボールド
<input type="checkbox">イタリック
<input type="checkbox">アンダーライン
<input type="checkbox">打ち消し線
<br>
リンク:URL<input type="text"><input type="checkbox">別のウィンドウで開く
<input type="button" value="リンクをはる">
<br>
タグの表示(name="tag"):<textarea></textarea>
<input type="button" value="プレビュー">
</form>

だから、

function copyTag(){
text = document.forms[0].tag.createTextRange();
text.execCommand("copy");
}

を、[onClick="copyTag()"] で、チェックボックスやらをクリックするたびに呼び出せばよいわけね? 「タグの表示エリア」で直接ちょこっと編集する可能性も考えて、 「クリップボードにコピー」ボタンもつけると親切かしら。

とりあえず解るところから、というわけで、「文字列が入力されたら、前後にタグをつける処理」。

text = document.forms[0].text.value;
tag = document.forms[0].tag.value;
document.forms[0].tag.value='<font size='+(arg)+'>'+text+'</font>'; //「テキスト入力」エリアの文字列の前後に、フォントタグを付加。

この程度なら、去年やったことで賄える。次に、

  1. 「タグの表示」エリアが空っぽの場合。
  2. 「タグの表示」エリアに、既に文字列がある場合。

の分岐を考える。ええと、条件分岐ってどうやるんだっけ?

text = document.forms[0].text.value;
tag = document.forms[0].tag.value;
if (tag==""){	//もし、「タグの表示」エリアが空っぽなら。
document.forms[0].tag.value='<font size='+(arg)+'>'+text+'</font>'; //「テキスト入力」エリアの前後にフォントタグを付加。
}
else if (tag!=""){	//もし、「タグの表示」エリアが空じゃなければ。
document.forms[0].tag.value='<font size='+(arg)+'>'+tag+'</font>';  //「タグの表示」エリアの前後にフォントタグを付加。
}

ふむ。この辺も、去年やったことでなんとか賄えた。

でもすぐに、ちょっとマヌケなことに気が付く。 チェックボックスをクリックすると、ON/OFFに関わらず、 「<b><b><b><b><b>ボールド</b></b></b></b></b>」こんな感じで同じタグが無限についてしまう。 ええと、チェックボックスのON/OFFの判定ってどうやるんだ? とうとう「去年やったことがない」ものが出てきちゃったけど、 このくらいなら手元の本を見てすぐ判ったらしい。

flag = document.forms[0].b.checked;
if (flag){	//もし、チェックがONで、
if (tag==""){	//「タグの表示」エリアが空なら、
	document.forms[0].tag.value='<b>'+text+'</b>'; //「テキスト入力」エリアに<b></b>を付加。
} else if (tag!=""){	//「タグの表示」エリアに文字列があれば、
	document.forms[0].tag.value='<b>'+tag+'</b>';	//「タグの表示」エリアに<b></b>を付加。
}
}else{		//もし、チェックがON以外なら、
document.forms[0].tag.value=text; //とりあえず、「テキスト入力」エリアの文字列だけを残すことにしておこう。
}

問題はこの後。

とゆうようなことを書かなくちゃいけないわけだ。

…ってことは、正規表現とかを使うんだろうか。 手持ちの本には[RegExp()]というような、ソレらしいものが出てるのだが、 これをどうやって使うのかが全然解らない。 とうとう、「去年やったこと」やら「手持ちの本」では手におえなくなってきた。 Googleさんにもお伺いを立てるが、やっぱり、今ひとつ。

2002/07/07(sun)

[TOP↑] [管理]

検索のキーワードが間違っていたことに気が付く。 私が知りたいのは、「正規表現の使い方」じゃなくて、「置換の仕方」だ。 そんなわけで、「JavaScript 置換」でGoogleさんにお伺いを立てると、リファレンスのページが出てきた。 [replace()]というのを使うらしいが、サンプルもなければ使い方も書いてない。 今度は「JavaScript 置換 replace()」で検索してみる。 と、いい感じに16件だけヒット。 上から3番目に「replace()メソッドで文字列置換」というページがある。これだ。私が見たかったのは。

さっそく作業に取り掛かりたいところだが、今日はタイムリミットなのだった。

2002/07/11(thu)

[TOP↑] [管理]

もらってきたお手本のコードを眺める。書いてあることは、解った。検索・置換はできそう。 ただ、基本的な文法やら解ってないので応用が利かない…(´・_・`)…、 「この文字列がある場合だけ置換」という書き方がわからない。 手元の本に「半角カナがあったら警告する」なんてサンプルがあったんだけど、 コードを見ても何が何だか解らない。 別のところに「数値かどうか調べる」というのがあって、 こちらはコードを見たら何をやってるのかは、解った。 「つまり、[match()]ってのを使えばよいのかなあ」と推測したが、 具体的にどう書いたらいいのかは解らないので、今日は簡単に挫折しておく。

2002/07/12(fri)

[TOP↑] [管理]

検索と置換のお手本をみがなら、あてずっぽうに書く。 動かない。当たり前か。 しばらく、思いつく限りの表現を使ってパソコンに言い聞かせてみるが、通じないらしい。 何を書こうが、エラーが返るわけでもなく(単に[;]を忘れたりして怒られたりはしたけど)、動かない。

さて、「思いつく限りの表現」はしつくした。もう、でたらめに書き換えるにも限界がある。 ところで、もっと基本的なところで、さっきから一つ気になっているところがある。 フォントタグの属性の値を括る、ダブルクォーテーション。 &quot;で検索できるんだろうか…? 気になりながら面倒で試してなかったけど、 とにかくね、動かない原因は解るところからつぶしていきましょうよ。

というわけで、ただ「もし、testという文字列があったら、color=&quot;+(arg)+&quot;に置換」 という命令を書く。 あっさり成功。巧い具合に[match()]の使い方もあっていた。 そしてめでたく[color=&quot;引数&quot;]に置換されたわけだが、 私は[color="引数"]と置換したいのだ。 どうしようか。値をダブルクォーテーションで囲む必要はないんだけど、私はつい、クセで囲んでしまうのだ。

…あれ? 単純にタグを「タグの表示エリア」に表示させるとき、 どうやってダブルクォーテーションを書かせてたんだろう…?

愕然。もともと、このスクリプトで書かせているタグは、 ダブルクォーテーションで括ってなかったんだった。 [&quot;]で["]が検索できようが出来まいが関係なく、 ないダブルクォーテーションは検索できないのだった。愕然。

そんなわけで、苦心惨憺できあがったコード。

//フォントタグカラー属性の処理
function font_c(arg){
text = document.forms[0].text.value;
tag = document.forms[0].tag.value;

//color属性の置換
seaColor = "color=#......";		//検索される語
repColor = "color=" + (arg);	//置換語
regColor = new RegExp(seaColor,"");	//正規表現オブジェクトの作成
//size属性の付加
seaSize = "size=.";		//検索される語
repFontC = "font color=" + (arg);	//置換語
regSize = new RegExp(seaSize,"");	//正規表現オブジェクトの作成  ―――――(3)

if (tag == ""){		//タグ表示エリアが空白の場合
	document.board.tag.value='<font color='+(arg)+'>'+text+'</font>';
} else if (tag.match(regColor)){	//color属性がある場合、color属性の置換
	document.forms[0].tag.value = tag.replace(regColor,repColor);
} else if (tag.match(regSize)){	//size属性がある場合、color属性の付加 ―――――(1)
	document.forms[0].tag.value = tag.replace("font",repFontC);
} else if (tag!=""){		//<font>以外のタグがある場合  ―――――(2)
	document.forms[0].tag.value='<font color='+(arg)+'>'+tag+'</font>';
}
}

あとは、これを裏返しにする感じで、サイズ属性の処理を書く。 上で変数を使っているのは、単にお手本通りに書いたからであって、 別にこの際変数なんぞ使わないほうがむしろスッキリするのであった。

regSize = new RegExp("size=.","");
regColor = new RegExp("color=#......","");

if (tag == ""){		//タグ表示エリアが空白の場合
	document.forms[0].tag.value='<font size='+(arg)+'>'+text+'</font>';
} else if (tag.match(regSize)){	//size属性の置換
	document.forms[0].tag.value = tag.replace(regSize,"size="+(arg));
} else if (tag.match(regColor)){	//size属性の付加
	document.forms[0].tag.value = tag.replace("font","font size="+(arg));
} else if (tag!=""){		//<font>以外のタグがある場合
	document.forms[0].tag.value='<font size='+(arg)+'>'+tag+'</font>';
}

バカだった点。 (1) [size="3"]を[size="3" color=#000000]なんて風に置換したいのに、 サイズの値をどうやって残したらいいのか判らない。 じゃあ[font]を[font color=#000000]にしちゃえ、って逃げ道はすぐに思いついたんだけど、 頭の中で思考実験をすると、条件によって、それでは巧く動かないことがあるような気がして試さなかった。 だから、解るところから、つぶしなさいよ。 巧く動かないことを確認してから、他の方法を考えればいいじゃない。 というわけで、[font]を置換するように書いちゃう。あら。どこも「巧く動かない」なんて事ないじゃない。

(2) これを書き忘れて、今日のお勉強は一旦終了。 あとで<b>タグの処理をちょっといじろうとして、気が付いた。 <b>タグの後に<font>タグを追加できない。というわけで[tag!=""]の条件を足してみたけど、巧く動かない。 <b>を選んだ後、<font color=>のタグを選んでも動作せず、<font size=>を選ぶと動く。 その後はcolor属性も選べるようになる。 逆に<b>を選んだ後、<font size=>のタグを選んでも、1回目は動かない。 <font color=>を選ぶと動く。 なんでだろうと条件の書き方を色々変えてみたけど、またしてもそういう問題じゃなかった。

いつもはIEで動作確認してるんだけど、「ちょっといじろう」と思っただけなので、 最初は常用のタブブラウザで動作確認してた。 このブラウザは、スクリプトにエラーがあってもエラーメッセージが出ないから、 エラーで動かないのか、動いててもこちらの意図と違った動きなので動かないように見えるだけなのか、 判別できない。 てっきり、条件の書き方が悪いので「動かないように見える」だけだと思ってたんだけど、 IEで表示してみると、[regSizeは宣言されてません]のエラー。 (3)の[regSize = new RegExp(seaSize,"");]の行を書き忘れてた事に気が付いた…。

さて、検索と置換の書き方は、多分把握した。<b>タグを空白に置換してみよう。

}else{ //もし、チェックがON以外なら、
	document.forms[0].tag.value = tag.replace("<b>","");
	document.forms[0].tag.value = tag.replace("</b>","");

だめだった。二つ書くと後に書いたほうの命令しか聞いてくれない。 二つ一緒に実行させるには、どうしたらいいのでしょう。というところで、今日も時間切れ。

2002/07/13(sat)

[TOP↑] [管理]

「開始タグと終了タグをいっぺんに空白に置換するにはどうするか問題」を放置したまま、 プレビューボタンを作る。フレームで2段に割って、下のスペースにプレビューを表示させてみる。

parent.pre.document.write(document.forms[0].tag.value);

と1行。「おお、これでよいのか」と思ったら、よくなかった。 複数回プレビューすると、前回のが消えずに、後ろにどんどん追加されてしまう。 あまりかっこよくないなぁ。 「前回のをクリアして、再描画」という風にするにはどうしたらいいんだろう。 さらに、なぜかNetscapeでは無反応。何が拙くてNNで不可なんだろう。というところで、今日も時間切れ。

めも:一つ気が付いたこと。 テキストボックスに文字列を入力せず、最初にタグを選択してしまうと、 あとでテキストを入力しても、[タグの表示]にはテキストが現れない。 同様にタグを入力した後、テキストを編集してもタグのエリアには反映されない。 テキストエリアが空のままタグを選ぶと「テキストを入力してから、タグを選択してください」 というようなアラートを出すとか、 いっそ、テキスト入力のエリアをなくすとか…。 人に使わせるなら考える余地があるけど、 自分で使う分には私なら直接タグ表示エリアで編集するから、まあいいか。

2002/07/14(sun)

[TOP↑] [管理]

プレビューの処理を思いついて、書いてみた。

parent.pre.document.location="preview.html";
parent.pre.document.write(document.forms[0].tag.value);

一旦、空白ページへ飛ばしてから、タグ表示エリアを描画。 と思ったんだけど、うまくいかない。一瞬プレビューが表示されたあと、空白ページに飛んでしまう…。 並べて書いただけじゃ、処理の順番は指定できないのでしょうか…。

順番を明示するには…とちょっと考えて、「クリックしたら、これとこれ」はやめ。 「マウスボタンが押されたら、これ」&「マウスボタンが離されたら、これ」ってことにする。

function preview_clear(){
	parent.pre.document.location="preview.html";
}
function preview(){
	parent.pre.document.write(document.forms[0].tag.value);
}

<input type="button" value="プレビュー" onMousedown="preview_clear();" onMouseup="preview();">

これでよし、と。

しかし、相変わらずNetscapeではうまくいかない。Netscapeで[document.forms[0].tag.value]を表示させるにはどうしたらいいのでしょう?

めも:ところで、昨日、「タグを入力した後、テキストを編集してもタグのエリアには反映されない。」の回避策で、「テキストエリアそのものをなくす」ということを考えたりしたけど、使い勝手としても、むしろないほうが使いやすい気がしてきた…。

2002/07/14(sun) その2(15日早朝)

[TOP↑] [管理]

判った…。手元の本から、ドキュメントを書き出すような処理をしているサンプルコードを 探し出したところ、[document.open()]という1行が紛れ込んでる。 「なんだ? コレ」。とってもクサイので、早速別のリファレンス本にあたってみると、 「ドキュメントを開いて書き出し可能な状態にする」とある。ここまで読んで、さっそく書き換え。

parent.pre.document.open();
parent.pre.document.write(document.forms[0].tag.value);

動作確認。動かない。リファレンス本の続きを読む。 「openメソッドで書き出しを開始したドキュメントは、必ずcloseメソッドで書き出しを終了。 終了しないと読み込み中のままになる」だそうだ。 ついでにclearメソッドってのもあって、内容を消去したいときに使うんだそうな。 あーあー、そーですか。それは失礼いたしました。というわけで、紆余曲折の果てに出来たコードが以下。

function preview_clear(){
	parent.pre.document.location="preview.html";
}
function preview(){
	parent.pre.document.open();
	parent.pre.document.write(document.forms[0].tag.value);
	parent.pre.document.close();
}

さらに、[clear()]を使って、[onClick="preview()"]に戻して、こう。

function preview(){
	parent.pre.document.clear();
	parent.pre.document.open();
	parent.pre.document.write(document.forms[0].tag.value);
	parent.pre.document.close();

さて、何で早く「ドキュメントを書き出すような処理をしているサンプルコードを探し出」さなかったかというと、「面倒だったから」である。 一応、ぱらぱらとめくっては見たんだけど、 ちょっと見ただけでは当てはまるようなサンプルを見つけられなかったので、 ないはずはないと思いながら放擲したのである。 いいかげん私は、「急がば回れ」という先人の教えを真摯に受け止めるべきだ。

ところで、[タグを消去]ボタンを<input type="button" onclick="document.forms[0].tag.value=document.forms[0].text.value">で作ってたんだけど、「タグを消してもチェックボックスのチェックが外れないのはやな感じだ」と思って、思い出した。確か、[input type="reset"]っていうのがあったんじゃないの? 早速すげ替えてみたけど、今度は、入力したテキストまで消えてしまう。タグだけやり直したい、ってことは大いにありえる。というわけで、<form>をテキスト入力部とタグの編集部とわけました。以下、[forms]の添字に注意。[document.forms[0].tag.value]は[document.forms[1].tag.value]。

それにしても、だんだん、テキストエリアを後で書き換えた場合に、タグのエリアに反映されないっていうのが気になってきた。チェックボックスやらラジオボタンの、どこにチェックが入ってるか判定して、タグを書き出す、ということはできるのかな? そのほうが簡単なような気がするんだけど、となると、根本的に書き直しってことになる気配。

めも:もうひとつ機能を思いついた。プレヴューの背景の色も変えたりもできると嬉しいかな? それと、もうひとつ、今やってるのは、ひとつのフレーズにちょこっとタグを付けたい(ためだけにこの労力…)ときのものなんだけど、プレビューつき超簡易HTMLエディタっぽい感じのスクリプトが、別に欲しい。

2002/07/15(mon)

[TOP↑] [管理]

やだわ。できちゃったわ。ものすごく簡単なことだったんだわ。ついさっき、 「だんだん、テキストエリアを後で書き換えた場合に、 タグのエリアに反映されないっていうのが気になってきた。 チェックボックスやらラジオボタンの、どこにチェックが入ってるか判定して、タグを書き出す、 ということはできるのかな?」と言って、 そのままちょっと考えてみてたんだけど、今度は手っ取り早く本を参照しました。 そうしましたところが、見つけました。 「チェックボックスを判定して、結果をテキストボックスに書き出す」というような、 そののもズバリのコード。

で、それを参考に、サクリとできてしまったコードがこちら。

function editTag(){
text =  document.forms[0].text.value;

if (document.forms[1].b.checked) text = "<b>" + text + "</b>";
if (document.forms[1].u.checked) text = "<u>" + text + "</u>";
if (document.forms[1].i.checked) text = "<i>" + text + "</i>";
if (document.forms[1].s.checked) text = "<s>" + text + "</s>";

if (document.forms[1].size_[0].checked) text = "<big>" + text + "</big>";
if (document.forms[1].size_[1].checked) text = "<small>" + text + "</small>";
if (document.forms[1].size_[2].checked) text = "<sup>" + text + "</sup>";
if (document.forms[1].size_[3].checked) text = "<sub>" + text + "</sub>";

URL = document.forms[1].url.value;
if (document.forms[1].link[0].checked) text = "<a href=\"" + URL + "\">" + text + "</a>";
if (document.forms[1].link[1].checked) text = "<a href=\"" + URL + "\"\ target=\"_blank\">" + text + "</a>";

document.forms[1].tag.value = text;
}

たったこれだけ、置換も検索もなし、<b>と</b>2つのタグをいっぺんに消すには? の問題もなし。 テキストエリアをあとで変更しても反映される。 ただ、タグ表示エリアから編集はできなくなっちゃうけど。 …いっそ [document.forms[1].tag.disabled=true;] とかしちゃったほうがいいだろうか。 ちなみに、ダブルクォートは[\"]でした。これは「ソフトウェアキーボード」を作るとき調べたんだった。

…ただ、問題は、このあとのフォントタグ。

if (document.forms[1].color[0].checked) text = "<font color=" + (arg) ">" + text + "</font>";
if (document.forms[1].color[1].checked) text = "<font color=" + (arg) ">" + text + "</font>";
if (document.forms[1].color[2].checked) text = "<font color=" + (arg) ">" + text + "</font>";

こんな行を足してみたら、フォントタグを選択したときはいいんだけど、 そのあとで<b>なんかを選択すると、引数が[undefined]になってしまう。 それに、属性の追加の処理をどうしたらいいのか、ちょっと考えただけじゃ思いつかない。 よく考えれば思いつくかどうかは、さておいて。

かといって、前の長いスクリプトをそのまま採用すると、 フォントタグを選んだ後にそれ以外のタグを選ぶと、フォントタグが消えてしまう。さて、どうしたもんだか。

…こうしたコードが書けた。

function editTag(){
text =  document.forms[0].text.value;

item1="size="
for (i=0;i<7;i++){
	if (document.forms[1].size[i].checked){
	item1 = item1+document.forms[1].size[i].value;
	}
}
document.forms[1].tag.value = "<font " + item1 + ">" + text + "</font>";
}

<input type="radio" name="size" onclick="editTag();copyTag()" value="1"><font size="1">サイズ 1</font>

しかし私には、何が書いてあるのか解らない…。 何が書いてあるのかちっとも理解してなくても、お手本通りにさえ書けば、 さすがによく動くものである…(´・_・`)…。 何番目にチェックが入っているかを調べて、ラジオボタンの value の値を渡しているらしいのだが、 [for (i=0;i<7;i++)] っていうのがどういうことなのか、ちんぷんかんぷんなのである。 なんだか、自分の書いたスクリプトから、私自身がつまはじきにされたような悲しさである。 これでは、去年の夏挫折した時と同じじゃあないか。 「本通りに書いて動いても、ちっとも覚えた気にはなれないし、事実覚えちゃあいない」。 効率の悪いコードを四苦八苦して書いてるときは楽しかったのに…。


ついでなので、大いに脱線する。 小学校6年生のとき、担任の提案で「卒業旅行」に行くことになった。 歴史の授業に出てきたお寺を見学に行こうという計画、日帰りの、ほんの隣県までの旅行である。 旅行の道中のことは何一つ覚えていない。楽しかったのは、旅行に行くまでの算段だ。 これまた担任の提案で、私たちは毎日放課後、「廃品回収」ということをやって旅費を稼ぎ出したのである。 リヤカーを引いて近所の家を回ってダンボールやらビンやらを集め、業者に売る。 このリヤカー引きが、もう、たまらなく楽しかったのである。

目標額がいくらで、実際集めた額がいくらだったかは覚えていない。 結局目標額に達したのか、足りなかったとしたらどれくらいだったのか。 教室の後ろに張り出されたグラフで、「順調に目標額に近づいている」という感触があったことは確かなのだが。 しかし旅行寸前、気が付くと、児童の預かり知らないところで、父兄の「援助出資」が決まっていた。 12歳の私は、その「決定」を聞いて「ありがたい」と思うよりは、急に旅行なんぞどうでもよくなった。 「お前たちは無力である」と烙印を押された気分だった。

長じてから、母に当時のことを聞くと 「旅費は足りてて、おやつ代とかそんなんを出したんじゃなかったかしらね」と言う。 「私も、余計な手出ししないで好きにさせとけばいいのに、とは思ったんだけどね、 ホラ、○○君のお父さん辺りが言い出したことだから…」。 「○○君のお父さん」は、その後町長さんに就任することになる人物なのであった。

まあ、そんなことを不意に思い出したりしたのであるが、この場合、私の脳みそは実際十分無力なので、 「本は余計なことをするな」なんていう不当な抗議はしないけども。

[オモイデノアワ]


さて、大幅に短縮され、サッパリスッキリしたコード、 あるいはこれまでの努力を無残にもスッパリキッパリ水泡に帰して書いたコードが、こちら。

function editTag(){
text = document.forms[0].text.value;
tag = document.forms[1].tag.value;

if (document.forms[1].b.checked) text = "<b>" + text + "</b>";
if (document.forms[1].u.checked) text = "<u>" + text + "</u>";
if (document.forms[1].i.checked) text = "<i>" + text + "</i>";
if (document.forms[1].s.checked) text = "<s>" + text + "</s>";

if (document.forms[1].size_[0].checked) text = "<big>" + text + "</big>";
if (document.forms[1].size_[1].checked) text = "<small>" + text + "</small>";
if (document.forms[1].size_[2].checked) text = "<sup>" + text + "</sup>";
if (document.forms[1].size_[3].checked) text = "<sub>" + text + "</sub>";

URL = document.forms[1].url.value;
if (document.forms[1].link[0].checked) text = "<a href=\"" + URL + "\">" + text + "</a>";
if (document.forms[1].link[1].checked) text = "<a href=\"" + URL + "\"\ target=\"_blank\">" + text + "</a>";

document.forms[1].tag.value = text;

item1=" size=";
for (i=0;i<7;i++){
	if (document.forms[1].size[i].checked){
	item1 = item1+document.forms[1].size[i].value;
	}
}

item2=" color=";
for (i=0;i<24;i++){
	if (document.forms[1].color[i].checked){
	item2 = item2+document.forms[1].color[i].value;
	}
}

document.forms[1].tag.value = "<font" + item1 + item2 + ">" + text + "</font>";
}

ところが、コレにはマヌケなところが1点あるのである。 最後の行、[document.forms[1].tag.value = "<font" + item1 + item2 + ">" + text + "<font>";]、 これでは例えばサイズにチェックを入れなくても <font size= color=#00000>というような、 マヌケなタグが出来るのである。 「そんなの、片方だけにチェックが入ったときは、これ、 両方にチェックが入ったときはこれ、って条件分岐すればいいんじゃないの」と思うのだが、 基本を知らない児童は最後の壁にぶち当たったらしいのである。

if(document.forms[1].size.checked){
	document.forms[1].tag.value = "<font" + item1 + ">" + text + "<font>";
} else if(document.forms[1].color.checked){
	document.forms[1].tag.value = "<font" + item2 + ">" + text + "<font>";
} else if(document.forms[1].size.checked && document.forms[1].color.checked){
	document.forms[1].tag.value = "<font" + item1 + item2 + ">" + text + "<font>";
}

と書いたら、無視された。エラーが出るでもなく、フォントタグにチェックを入れても全く無反応。 やっぱり[for()]を知らないことが敗因なんだろうなあ。 おとなしく[for()]を調べては見て、理屈はなんとなく判ったけど、「なんとなく」では困るのだった。 仕方がないので、適当にしらばっくれる感じで、

for (i=0;i<7;i++){
	if(document.forms[1].size[i].checked){
		document.forms[1].tag.value = "<font" + item1 + ">" + text + "<font>";
	}
}
for (i=0;i<24;i++){
	if(document.forms[1].color[i].checked){
		document.forms[1].tag.value = "<font" + item2 + ">" + text + "<font>";
	}
}

こんなことを書いてみたら、1/6ほど動いた。 意味不明な感じの5/6の内訳は、両方チェックした場合の書き方が解からないのはもちろん、 サイズを選んだあとカラーを選ぶことはできる(もちろん、両方の属性が表示されるわけでなく、 属性が入れ替わるだけだけど)んだけど、カラーを選んだあとにサイズを選ぶことが出来ないこと。

2002/07/17(wed)

[TOP↑] [管理]

相変わらず、フォントタグは挫折。 うーん、「何が書いてあるか」は大体解かってきたんだけどなあ。 昨日書いてみて、やっぱり失敗だったコード。 書き換えたと言うより、ちょっと理屈が判ったので、冗長部分をまとめただけだけど。

item1=" size=";
for (i=0;i<7;i++){
	if (document.forms[1].size[i].checked){
	item1 = item1+document.forms[1].size[i].value;
	document.forms[1].tag.value = "<font" + item1 + ">" + text + "</font>";
	}
}

item2=" color=";
for (i=0;i<24;i++){
	if (document.forms[1].color[i].checked){
	item2 = item2+document.forms[1].color[i].value;
	document.forms[1].tag.value = "<font" + item2 + ">" + text + "</font>";
	}
}

そんなわけで相変わらず、両方にチェックが入ったときに [<font" + item1 + item2 + ">" + text + "</font>] を書き出す、 という条件の書き方が解からない。 これ以上はあてずっぽうでいじりまわしてもどうにもならない気がしてきたので、 何とか後で調べることにして(どう検索したものか、キーワードを考えてるような状態だ…)。

ちょっとだけおまけ機能追加。 「15日(早朝)」に考えてた、背景色を変える機能。 セレクトボックスなんかでもっと使いやすくしてもよかったんだけど、 使いやすくてもどうせ使いやしない気もするし、面倒なのでおざなり。 一応、コレくらいならリファレンスやらサンプルやらを見なくても、数分で書けるようになったらしい。 コレでも進歩なんだ。そうなんだ。実際には、[+]が一個足りなかったり、 [bgcolor = document.forms[1].bg.value;]をうっかり関数の上に書いたりして、 その発見と修正に数分かかり、合計十数分だけども。

function preview(){
bgcolor = document.forms[1].bg.value;
tag = document.forms[1].tag.value;
	parent.pre.document.clear();
	parent.pre.document.open();
	parent.pre.document.write("<body bgcolor=" + bgcolor + ">"+ tag + "</body>");
	parent.pre.document.close();
}

プレビューの背景色を指定(色名または16進数)<input type="text" size="8" name="bg" style="ime-mode:disabled" value="#ffffff">

2002/07/17(thu) (18日早朝)

[TOP↑] [管理]

…できた…。

相変わらず基本的な文法はわからないまま、検索のキーワードも思いつかないまま、 「とにかく[for()]ってゆーのは、ラジオボタンを一個ずつ、 "チェックが入ってるかな?"って見てるわけだから」と考える。 いままで、「もし、サイズにチェックがあり、かつ、カラーにチェックがあったら、これを書く」って 並列にやろうとしてだめだったり書き方が判らなかったりしたので、発想を変えてみる。 「もしもサイズにチェックがあって」「さらにカラーにチェックがあろうものなら、コレを書きやがれ」ってな風に。 書き方は、例によって、あてずっぽう。1回目の試技。 「おら、どうだ」。多分また[構文エラー]だぞ、と腹筋に力を入れる。

for (i=0;i<7;i++){
	if (document.forms[1].size[i].checked){
		for(i=0;i<24;i++){
			if (document.forms[1].color[i].checked){
			document.forms[1].tag.value = "<font" + item1 + item2 + ">" + text + "</font>";
			}
		}
	}
}

…動いた…。エラーが出ないどころか、私の期待した通りの動きをした…。 カッコの閉じ忘れがない辺りも奇跡的である。

しかし、どうしてこれで期待通りの結果を得られるのかは、実は今ひとつ判っていない。 こういう風に動く可能性もあるとは思ったけど(思ったので書いたわけだけど)、 違う動きをされたら、それはそれで納得するに吝かでない。 それでも、コレはパソコンに「私の言葉」が通じた感動の瞬間なのである。 「パソコンに言い聞かす試み」は成功と言えよう。

感想戦

[TOP↑] [管理]

兎にも角にも取り掛かって12日目(実質は8日と主張)、ようやく1つのスクリプトが完成を見たのである。 小窓で開けるように、見た目をもうちょっとコンパクトにまとめる必要はあるだろうが、 あとは後年、この記録を読み返してみたときに「バカだなあ」と苦笑なんぞできるようになるのを 待つばかりである。

その後の経過 2002/07/19(fri)

[TOP↑] [管理]

ところが、またしてもNN問題。 自動プレビューが動かない。 ステータスバーに [JavaScript error:Type 'javascript:' intp Location for details] が、 チェックボックスをクリックした時点で表示される。 試しに、自動プレビューをつける前のを動かしてみると、同じタイミングで同じエラー。 なんだ、今まで気が付いてなかっただけか。

…あ、そうか。[onclick="editTag();copyTag();preview()"]となっている [copyTag()][preview()] の順番を入れ替えて、 [onclick="editTag();preview();copyTag()"] としてみる。 おお、動いた。うーん、でも、エラーが出っ放しというのは気分がよくないかなあ。 NNの場合は [copyTag()] をスキップするような処理ってのはできるんだろうか。

それと、このスクリプトには関係ないけど、 初めて16進数色取得のスクリプトをNNで表示してみたんだけど、 なぜか知らないが [<span style="display:none">]タグが有効なところと無効なところがある。 ひたすらコピーしたものなので、「なにか書き間違えた」可能性は薄いし、 実際ソースを見ても「同じ」に書かれてるように見えるんだけど。 で、よく見ると、「隠れるはず」の文字列が、オレンジ・ピンク・黒の3種類で表示されてる。 さらに、3つある「隠れるはず」の文字列のうち、最初の2つだけ表示されるものと、 3つすべてが表示されるものがある。どういう規則性なんだろう…?

| むず痒いパソコン日記 || WebsiteWork/JavaScript |

shortcut: FrontPage || WikiLab | StoreRoom/最新 | 日々の泡 | むず痒いパソコン日記/最新 || HelpPage || [edit]
select css: default | sakura | mono | greenheck | snow | NN4.x用(多分) || LinuZau!! | VikiWiki!? || others |

管理 | 差分 || 新規作成 || カテゴリ一覧 | ページ一覧 | 更新履歴 | 差分履歴 || PUT