パチョ奮闘記
2001年8月

　こんなスクリプトが完成。その名も中央リンク制御装置 "conlnk"。
　たとえば、ここから「myお気にアプリ」へリンクを張りたい時は、<A onClick="conlnk(2,'mfa')">とするだけでリンクできるのであります。

　こいつのなにが素敵って、ファイル名などのパス情報がないとこです。つまりmyお気にアプリのファイル名や場所がどれだけ変わろうとも、制御装置の設定をカチリと書き直すだけですべてのリンク修正が完了。俺って頻繁にファイル名とかディレクトリ構造を変更するので、まさに夢のような装置。
　んでもまぁそんなことは手間さえかければHTMLだけでできますが、この装置はさらにブラウザを識別して、GTS版とNCF版のそれぞれにお客様をご案内してくれるんであります。これぞ JavaScript の醍醐味。

　ちなみに、装置の構造自体はとても単純。引数の「2」が今の階層の深さで、'mfa' がジャンプ先の識別子で、この情報を元に目的地へのURLを生成してすっ飛ばすだけです。難しいメソッドとかは使ってないので、古いブラウザでも（JavaScript にさえ対応してれば）動作するでしょう。すなわち、JavaScript 未対応ブラウザで動作しないのが最大の欠点。

　まだ初期型なのでそれほどたいした機能はないですが、ゆくゆくはsiteCTSのリンクをまとめて管理できるような立派な装置にしたいです。

追記：2004.5.9

クロスブラウザを強く意識する奴が全リンクを JavaScript に任せるなんて、そんな大それたことをできるわけもなく。
この関数は JavaScript 内部でのリンク動作を受け持ち、度重なる改修を受けながら長く使われていたけど、XHTMLの採用とスクリプトのDOM化によって出番がなくなり、2004年4月5日に退役。

　こんなスクリプトが完成。その名も全自動リンクボックス生成装置 "conselbox"と、その中枢 "consel"。
　「こんなことできたらいいな」「こんなことやってみたいな」というアイデアはたくさん集めているので、実現可能な力量がつき次第どんどん作りたいです。

　まぁこれはよくある「コンテンツ移動用セレクトボックス」ですが、よくあるサンプル集丸写しとは違って、これを置きたいところに conselbox(2,'snp') と書くだけ。

　そうすると "conselbox" がセレクトボックスを生成。そしてセレクトリストから選ぶと "consel" が作動して、中央リンク制御装置 "conlnk" へ情報を送り、結果的に選んだリストのページへジャンプする仕組み。
　つまり実際のリンク動作は "conlnk" がやるので、ファイル名を変えたりしてもこのスクリプトを修正する必要はないのです。管理が楽になるのは良いことです。

　欠点はファイルひとつにつき1ヵ所しか置けないことかな。ふたつ以上置くと consel がどっちのリストを選んだのかわかんなくなるのよね。
　当然ながら装置の仕組み自体はとても簡単。ていうかそんな複雑なのはまだ作れない。「単純」ではないところが味噌で、わかる人がスクリプトを見たら「うわぁ頭悪っ！」と絶叫すること間違いなし。
　すみません。もうちょっと力がついたら作り直します…。

追記：

「1ページに1ヵ所にしか置けない」も「ソースが汚い」も立派に改善されました。んん。

　なんか Shift キーの具合がよろしくない。範囲選択の途中でいきなり効かなくなって選択解除！とか頻発する。スクリプトエラーが起きて原因を調べていたりすると、大文字で入れたはずのスペルが小文字になっていたりする。（JavaScript では大小文字が区別される）
　キーボードが酷使に負けたのかと思ったが、左右とも同じ症状が起きるので、その可能性は低い。だとすれば、原因は雪子ちゃんにしかないのだ。
　雪子ちゃんの実家はサポートに優れたGatewayなので、キーボードの不具合の方がまだマシなんだが…。

　とりあえず心当たりを探してみたところ、CDの再生に使ってるプレイヤーがあった。雪子ちゃんの実家がDVDプレイヤーを嫁入り道具の中に入れといてくれたのだけど、昨日からメディアプレイヤーの代わりに使い始めたのだ。（こっちの方が軽いので）
　このプレイヤーを使っていると、どうも特定のタイミングでフォーカスが一瞬奪われるようである。試しに終了してみると、Shift キーは正常に働いた。本当はすべてのキーで起こるのだろうけど、押しっぱなしにするキーってこれしかないんだよな。

　てなわけで、現役を奪われそうになったメディアプレイヤーは難を逃れたのでありました。
　雪子ちゃんにはCDプレイヤーがいくつも入ってるけど、ドライブのジャックから音を取り出せるのがほとんどないのよね。

　フレーム付きで見ている人は左手をご覧ください。斜めに走ってるのが生命線ですなんてベタは捨てといて、ふたつのボタンが追加されました。フレーム付きなのにボタンがない人は、JavaScript に対応してないか、機能がオフになってます。つまり、ここのメインウィンドウもひどい状態です。IE4以上、ネスケ4.7以上の使用をおすすめします。IE5.5以上ならなお素敵。

　ふたつのボタンは「用語集」と「リンク集」。用語集ボタンは前からこのページの一番上にありましたが、リンク集ボタンは新登場です。ていうか、ここに目を通す頃にはすでに押してると思うけど。

　パチョ奮闘記リンク集には、今までここに張ってきたリンクのすべてが載ってます。ウィンドウは変なサイズになりますが、他のWebページへ飛ぶと800×600の大きさに自動調整されるのでご安心ください。ネスケでは妙に大きく開きますが、これは縦スクロールバーが出ない珍現象への対処なので我慢しなさい。

　とまぁそんな感じで、以前は本文中のリンクを押すとダイレクトに他のWebページへ飛びましたが、いったんこのページを経由していただくことにしました。
　その理由はリンク集の一番上にも書いてあるけど、「リンクチェックを楽にするため」であります。だってリンク切れはなるべくなくしたいし。そのついでに、関連記事の参照もできるようにしました。すごいでしょ。
　結果、なんだかChainsよりリンクページらしいリンクページに。

　ただ、余計なコメントをつけたためにやたら重くなってしまいました。50KBもあります。ふたつに分けるかコメントを削除するかは難しいですが、しばらくはこのままで。

　そして、記事にあるリンクのひとつひとつを手作業で修正しながら、「最後」がどうとかつぶやいてる俺がここに。

追記：2004.5.9

この記事にある内容はリニューアルで廃止済みです。当時のページでも参照してください。

　今日はいろいろ紹介を仮リニウアル。当初は大幅削除を予定してたんですが、仮リニウアルということで少しだけにとどめました。リニウアルにはちょっと下準備が必要なので、状況が落ちつくまでこのままでいくことにしましょう。
　パチョ奮闘記はNCF版を削除してGTS版を JavaScript 化したけど、いろいろ紹介はその逆で、GTS版が削除されました（フレームメニューのみGTS版をネスケ4対応にリファイン）。GTS版いろいろ紹介の美しいソースは結構気に入ってたので、とっても残念。

　あと、8.5に作った全自動リンクボックス生成装置 "conselbox" と、その中枢 "consel" に "conselReset" なる新機能をつけ加えました。IE5.5以上かネスケ6以上でのみ、同じページを選ぶとGTS版とNCF版を行き来できます。（いろいろ紹介とmyお気にアプリのみ）

追記：2004.5.9

「いろいろ紹介」は「俺紹介」に名前が変わりました。また、行き来する機能もすでにないです。

　上のフレームメニューのネスケ4対策を、さらに煮つめました。
　ここの背景は左から右へ微妙なグラデーションがかかってんですが、これ、画像じゃなくてスタイルシートのIE独自拡張属性である filter: を応用したものなんです。つまり画像未使用なわけで、つまりネスケ非対応なんです。

　これには理由があって、filter: を使うとどんな画面サイズでもきちんと「端から端までのグラデーション」に調整されるのよね。画像だと（当然ながら）グラデーションの変化は固定だもの。
　んでも色の変化は微妙だし、さらに新しく加わったセレクトボックスがごまかしてくれるので、画像に切りかえました。これでネスケ4でもバッチリです。

　ただ、Scrawl Notes はグラデーションの変化が激しすぎて画像化できませんでした。なんつっても白→黒だからねぇ…。ってんでそのまま filter: を使ってます。ネスケ4ではこれがずいぶん見すぼらしく化けてたので、その辺も調整しました。
　そしたらGTS版のインプローラとネスケ6の違いで不具合が出て、「それじゃインプローラにだけ <A> と <FONT> タグに z-index を指定するか」などとCSSを駆使していると、なんだか俺ってすごい？などと2ミリ秒だけ思ったりもします。やだなぁこの人。

追記：2004.5.9

今はもうないので当時のページでも。

　なんとなくできそうな気がして、「プログラム」と呼べそうな感じの大きなスクリプトを作ることにしました。ターゲットは、具体的なアイデアがまとまってる Scribble Garden。
　やっぱ「絵」ってなるべく大きく見てほしいよね。でもディスプレイの解像度やウィンドウのサイズは人によるし、ましてツールバーのカスタマイズも様々。
　だったら、新しいウィンドウで開いた時のみツールバーなどを全部消して、さらに自動で最大化させ、そして「次へ」「戻る」ボタンがついてて、ついでにコメントとかも出てる、…そんな画像ページがあったら便利だよね。（誰にとって？）
　そこで、そんなスクリプトを作ってみようと思ったんです。

　そこまではHTMLだけでできますね。でも、俺がやろうとしてるのは「これらすべての機能をひとつのファイルでやる」ことなのであります。
　実際にはスクリプトを外部にするので「ふたつ」だけど、画像と同じ数のスカスカHTMLファイルを用意するなんて、そんな美しくないことはしたくない。のだー

　まず引っかかったのが、Scribble Garden から画像ページへ飛ぶ時に、引数を渡せないこと。それが JavaScript 最大の欠点。「どの絵をクリックしたか」をなんとかして渡さないと、スクリプトは画像ページでどの絵を表示すればいいのかわからないんである。

　その解決方法として考えたのが、新しいウィンドウを開く時につける「ウィンドウネーム」オプションで、それぞれの絵の番号を入れること。3番めの絵を押したら、ウィンドウの名前に「3」とつけて画像ページを開き、スクリプトはそれを見て「あぁ3番めの絵ね」と判別するって寸法。
　また、ウィンドウネームというのは閉じるまで有効（みたい）なので、同じウィンドウで画像ページに飛んだ時もこの方法が使える。これで引数の問題は解決。

<HTML><HEAD>
<SCRIPT language="JavaScript" src="../virus.js"></SCRIPT>
<SCRIPT language="JavaScript" src="scg.js"></SCRIPT>
<SCRIPT language="JavaScript">imgsel();cssSrc()</SCRIPT>
<TITLE>siteCTS / Scribble Garden / 画像</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
bdySrc();
</SCRIPT>
</BODY></HTML>

　画像表示ページである imgsrc.htm の中身。scg.js が核であるスクリプト本体。virus.js には "conlnk" , "consel" とかが入ってるけど、ここではブラウザの識別のみで使用。
　見ての通りHTMLはほとんどなく、ダミーも同然です。画像の選別からソースの生成まで、すべてスクリプトがやるのです。

　で、画像ページであるこのファイルが開かれたら、スクリプトはまず「今開いたウィンドウは新しいのか同じやつか」でフラグを立て、新しいウィンドウだったら最大化する。そして画像のあるURLやコメントを全部丸暗記。
　次に "imgsel" がウィンドウの名前を見て、本体が丸暗記したデータから「これ！」と選び出す。さらに、絵ごとにつけられた背景色などのオプションをセットする。
　 "cssSrc" はスタイルシートを生成。 "imgsel" がセットしたオプション情報を元に、CSSクラスを設定する。これによって、画像ごとに背景を変えたり文字の色や大きさを変えたり…といったことが可能になる。
　最後は "bdySrc"。 "imgsel" が選び出した絵の番号からURLを取り出し、オプションを組みこみながらHTMLで書き出す。フラグの状態により、同じウィンドウでは return ボタン、新しいウィンドウでは close ボタンになったりもする。

　まぁ結果は実際の画面を見ていただくとして、彼らの働きのおかげで、どの絵を開こうが絵がいくつ増えようが、このスクリプトだけでOKという次第。
　さて、残る課題は「戻る」「次へ」ボタンだけど、実はまだ組んでないので、できるかどうかわからなかったりします。うーむ。とりあえず今日はここまで。

　明日に続く。

　「戻る」「次へ」ボタンの実装。画像一枚一枚に専用のHTMLファイルを作るなら、考えるまでもなく簡単にできるけど、ひとつのHTMLファイルでやるとなると、これが難しかったのです。
　スクリプトの流れ的には

　…てな感じでいいはず。そこまではすぐ考えついて、同じウィンドウで開いてる時はその通りに動いてくれました。
　ところが、新しいウィンドウで開いた時に動いてくれない。調べてみたところ、リロードする前に変えたウィンドウの名前が、なぜか元に戻っちゃうのが原因でした。名前が元に戻るので、スクリプトは勘違いして同じ絵を表示してしまうのです。
　色々試してはみたものの、どうしてもだめ。

　こりゃ今の俺では無理（あるいはブラウザの仕様）だとあきらめて、新しいウィンドウの時は「画像オブジェクト」を使用することにしました。こやつはスクリプトで画像を扱う時に使われるもので、指定した画像を別のやつに取りかえたりできます。
　これならリロードする必要がないので、ウィンドウの名前なんか関係ないです。ボタンを押したら配列番号を -1 か +1 して、それに相当する画像へ取りかえるだけです。簡単。

　しかーし、それならそれで新たな問題が。ページをリロードしないので、コメントがそのまま。一回本文に書き出した文字は、基本的に変えられないのです。
　これはもう仕方ないことであり、また妥協してテキストエリア（掲示板とかで使う、字を入れられるフォーム）を設置して、そこにコメントを表示することに。そしたら今度は、コメントの配列に入ってるタグが丸出し。なんだかもうめちゃくちゃでございます。
　素直にコメントを表示しないようにすればいいのだけど、そこまで妥協することはできませんでした、とさ。

追記：

この初期型バージョンをアップしてみました。

　さて。
　世の中うまくできてるもので、ここで救世主が降臨。先生であります。なんてうまい具合に登場するのでしょうか、この人。
　早速相談してみましたところ、「なんでHTMLでできることをわざわざJavaScriptでやるわけ？馬鹿じゃねえの」。
　厳しいです、この人。

　まぁ6時間にも及ぶいろんな紆余曲折はあったんですが、要するにリロードする時に引数（絵を呼び出す番号）を渡せればいいんです。
　そこで出た先生のアイデアが、「新しいウィンドウを開く時はフレームを使う」。片方に100%の大きさで画像ウィンドウ、もう片方は隠しウィンドウにして隠しオブジェクトを置き、そこに引数を入れておく…という方法でした。
　なるへそ！
　これならリロードされるのは画像ウィンドウだけだから、隠しウィンドウの隠しオブジェクトに入れた変数は消えないですね。なんて画期的アイディーーア！
　そうして先生はデニーズでご飯を食べて、ごきげんに森へ帰っていったのでした。

　その後、「リロードするのは画像ウィンドウだけなんだから、トップフレーム名（top.name）も消えないはず」と気づき、隠しオブジェクトを使わない仕様に変更。つまり隠しウィンドウにはなにも入れるものがないので、ソースは見事に空っぽ。
　かくして、新しいウィンドウで開いた時もきちんと動作してくれるようになりました。やったね！

追記：

スクリプトのソースファイル "scg.js" をアップしてみました。これから後に各種バグフィックスをやったほぼ完成バージョン（のソース）です。わかる人はどうぞ。
ボタンを押した時の動作部分 "moveBtn()" と "dblLnk()" なんかは、阿呆みたいに簡潔化できたよ…。

　時に、先生の話によると JavaScript では location.reload() はあんま使わない方がいいらしいですね。理由はよくわかんないけど。
　まぁ素直に従って、location.href で同じファイルへジャンプさせるようにしました。

　今日はリンクページの Chains を JavaScript 化。まぁ例によって見た目はそんなに変わってないですが、裏ではめちゃんこ JavaScript です。
　まぁメッセージを変えるだけなら

<FORM name="ak">
  <INPUT name="akiko" value="SUM" size="31">
  <A href="http://www1.gateway.ne.jp/~awa/" onMouseOut="ak.akiko.value='SUM'" onMouseOver="ak.akiko.value='俺好みの絵と連日更新の絵日記'">
    <IMG src="bana_hosi.jpg" border="0">
  </A>
</FORM>

　だけでできます。
　でも、こんなんで納得するなら Scribble Garden はあんなんにならないのです。
　なにより、onMouseOut のとこがすんごく気に食わない。同じ文字列を二度入れるなんて美しくない。

　というわけで、上の「マウスが乗ったらメッセージを変えて、離れたら元に戻す」という嘘っぽい JavaScript を一新して、「バナーにマウスが重なったらメッセージを変えて、離れたら元に戻して、押されたら隣にあるチェックボックスを見て、チェックがついてたら新しいウィンドウで、ついてなかったら同じウィンドウで飛ぶ」…というスクリプトにしました。ついでに「全部チェック/全部外す」ボタンもつけてみたり。

<FORM name="chaform">
  <INPUT value="SUM" size="31" readonly><BR>
  <A href="#" onClick="jump()" onMouseOver="over(0,'俺好みの絵と連日更新の絵日記','http://www1.gateway.ne.jp/~awa/')" onMouseOut="out()">
    <IMG src="bnr/bana_hosi.jpg" border="0">
  </A>
  <INPUT type="checkbox">
</FORM>

　結果、バナーひとつあたりのソースはこんな感じに。（<FORM> タグはバナー全部を囲ってる）
　具体的には onClick が加わって、変更メッセージとURLが引数になってるくらい。

　実際の動作スクリプトは今のとここんな感じで。

フラグの初期化
loadFlag = 0; //配列定義前のonMouseOutで起こる未定義エラーを回避
chkFlag = 0; //「全部チェック」ボタンを押すたびに0と1を切替

//テキストボックスに入ってる文字列（value）を片っ端からmsg配列に入れる
//HTMLを読み終えた時点で一回だけ実行、終わったらフラグを立てる
//フラグが立つまでは他の全関数が動かない
function htmlLoadComp() {
  msg = new Array();
  arrayNo = 0;

  for (i = 0; i < document.chaform.length; i++) {
    if (document.chaform.elements[i].type == "text") {
      msg[arrayNo] = document.chaform.elements[i].value;
      arrayNo = arrayNo +1;
    }
  }
  loadFlag = 1;
}

核の部分
//マウスがバナーに乗ったら、どのバナーに乗ったのか調べて、上の
//テキストボックスを引数で渡されたメッセージ（cngMsg）に書き換える
//ついでに引数情報をout()へ、URL情報をjump()に渡す
function over(arrayNum,cngMsg,URL) {
  if (loadFlag == 0) return;
  url = URL;
  arrayNo = arrayNum;
  elmtNo = arrayNum;
  for (i = 0; i < arrayNum; i++) {
    elmtNo = elmtNo +1;
  }
  document.chaform.elements[elmtNo].value = cngMsg;
}

//"over" から渡された引数情報を元に、書き換えられた
//メッセージをmsg配列から探して元に戻す
function out() {
  if (loadFlag == 0) return;
  document.chaform.elements[elmtNo].value = msg[arrayNo];
}

//バナーが押されたら、隣にあるチェックボックスを見て新しいウィンドウか
//同じウィンドウかを選び、"over" から渡されたURLへ飛ばす
function jump() {
  if (document.chaform.elements[elmtNo+1].checked == true) {
    open(url); return;
  }
  location.href = url;
}

「全部チェック」ボタンの動作スクリプト
function allCheck(chkbox) {
  if (loadFlag == 0)
    {alert("まだHTMLを読み終わってないので数秒待ってね"); return}

  //フラグが立ってなかったら、チェックボックスを探して全部チェックし、
  //ボタンの文字列を書き換えてフラグを立てる
  if (chkFlag == 0) {
    for (i = 0; i < document.chaform.length; i++) {
      if (document.chaform.elements[i].type == "checkbox")
        document.chaform.elements[i].checked = true;
    }
    chkbox.value = "ぜんぶはずす！";
    chkFlag = 1;
  }

  //フラグが立ってたら、チェックボックスを探して全部外し、
  //ボタンの文字列を書き換えてフラグを寝かす
  else if (chkFlag == 1) {
    for (i = 0; i < document.chaform.length; i++) {
      if (document.chaform.elements[i].type == "checkbox")
        document.chaform.elements[i].checked = false;
    }
    chkbox.value = "ぜんぶチェック！";
    chkFlag = 0;
  }
}

さて。たった2件のリンクページに、こんなスクリプトは果たして必要なのだろうか。

追記：2004.5.9

そして、JavaScript がOFFだと機能しないリンクページに価値などあるのだろうか。

　JavaScript を本格的に初めてから、あとちょっとで1ヵ月になろうとしてます。それまでもちょこちょこ書いてみたりはしてたんですが、学習スピードがどうにも遅かったんですな。もうさっぱりワケわかんなくて。
　というのも、先生から借りた JavaScript の教科書がちょっと泣ける代物だったのが原因です。たぶん。3分の2が使いものになんないサンプルソースで、しかもほとんどがしょーもないゲームのソースをベタ載せ。今だったら「こいつぁ役に立たねえ」とはっきり言っちゃう。
　せっかく貸してくれたのにゴメンね先生ｖ

　現に、7.23にアンク著の「JavaScript辞典」を買ってからは、ご覧の通り。すんごいスピードです。「とりあえず書いてみて、わかんないとこを調べる」という俺の勉強法では、知りたい情報をいかに手っとり早く調べられるか、それが大事なんですよな。

　そして、ようやく「プログラム」と呼べるものを書くようになった俺と、その手伝いができるようになった秀丸。必要なかったので機能をOFFにしていた、「対応する括弧の強調表示」。
　そうか、こんなにありがたい機能だったのか…。

　今日はホームページを JavaScript 化しました。本当の意味での「ホームページ」であり、すなわちブラウザを起動した時に表示されるページです。
　俺はホームページをローカルファイルに指定。だって起動のたびに接続ダイアログが出るのはうざったくないかい？　それに、ローカルにしといた方がホームボタンで瞬時に戻れるもの。

　まぁこんな感じで、例によって JavaScript の塊と化しました。セレクトボックスで各ページへ直行したり800×600へリサイズするボタンがついてたり、リンクを「新しいウィンドウで開く」と「同じウィンドウで開く」で切り替えられたり、果てはそのままエクスプローラとして使えるようにもなってます。左のセレクトボックスからフォルダを選ぶと、右のウィンドウに出ます。ネスケにゃひっくり返っても真似できません。

　んー、次はセレクトボックスをもっと煮詰めて ローカル/サーバー → メニュー → 子ページ てな感じで各ページへダイレクトアクセスできるようにしようかな。
　それにしても、ラジオボタンの onChange イベントってフォーカスが外れた時に発生するの？　押した時に発生してほしいなぁ…。

　パチョ奮闘記にまた新機能がつきました。 ボタンです。

　このページにはよく画面写真とか貼ってたり画像へ直リンクしてたりするけど、中には「本文に貼りたいけど、それにはちょっと重い」というのがあります。
　そこで、画像のスペースだけ確保しておき、ボタンを押すと表示するようにしました。画像オブジェクトの変な使い方。
　ただ、画像オブジェクトはIE3が対応してないので、非対応ブラウザを考慮して画像直リンクも用意してあります。

function imgLoad(imgPass) {
  if (Dmark == "IE30") {
    alert("このボタンはIE3では機能しません。ごめんね！");
    return;
  }
  path = new Image();
  path.src = imgPass;
  imgID = imgPass.substring(0,6);
  if (imgID == "010816") document.img010816.src = path.src;
}

　スクリプトはたったこれだけ。画像オブジェクトの使い方は8.13の Scribble Garden スクリプトで勉強した（没になったけど）ので、ものの10分くらいで完成。ていうか、スクリプトよりHTMLの方に細工してあるんです。
　しかし、これだと "imgLoad" を使うたびに最後の条件分岐を追加せねばならず、もう少し煮つめる必要がありそう。

function imgLoad(imgPath) {
  if (Dmark == "IE30") {
    alert("このボタンはIE3では機能しません。ごめんね！");
    return;
  }
  path = new Image();
  path.src = imgPath;
  imgName = "img" + imgPath.substring(0,6);
  document.imgName.src = path.src;
}

　…てなことができればいいんだけどなぁ。
　なんとかして document.変数.src = path.src とかできないものだろか？
　あと画像オブジェクトというものは、もしかして最初に読みこんじゃうのだろうか。それだとまったく意味ないんですけど。これをアップしたら確認してみよう。

追記：2001.8.19

大丈夫でした。（やり方によっては最初に読みこませることもできます）

追記：2002.4.10

document.変数.src は document.images[変数].src で可能です。

　ついでに、用語集かリンク集を開いてる時に親ウィンドウ（パ奮の本文ウィンドウ）を閉じちゃった時の対応をしました。特に用語集はツールバーもないし逃げ道もないしで、親ウィンドウを間違えて閉じちゃうとかなり致命的なのであります。
　動作チェックはかなり厳密にやったつもりだけど、もしうまく動かない部分があったら教えてください。

　新しいコンテンツの草案がそろそろまとまりそうです。名前は余裕で未定だけど、「パソコンのお部屋」なのです。5.25で言ってたTipsページとかもここに入れる腹づもりか。その通りです
　あと、自分で書いた JavaScript のソースを公開してみるのも面白そうですな。もしかしたら暇な人が採点してくれるかもしれないし、もっとうまい組み方を教えてもらえるかもしれない。（という儚い妄想）

　とりあえず今考えてるのは、パソコンのお部屋はビルダーで作ってみよう、と。せっかくあるのにもったいないじゃん。ねぇ。
　で、久しぶりにちょっと使ってみたんだけど、全然思い通りにできなくて苛々しちゃって、腹いせにわざわざ強制終了ダイアログから閉じちゃった次第。

　でも頑張ってビルダーちゃんで作ろうと思います。そうする理由などどこにもないけど。

　上で書いた「パソコンのお部屋」に、めでたく名前がつきました。さっさとつける必要があんのです。siteCTSではコンテンツ名がディレクトリ名になるので、これが決まらないことには作業に入れない。（気分がすっきりしないから）
　そして、作成に入る前に、ひとつやることがあります。更新が止まって久しいmyお気にアプリです。こやつは「パソコンのお部屋」の案が出た時点で子ページ化が決定してるため、ysr ディレクトリの中へ移動するとともに、一時閉鎖となりました。

　あと、「myお気にアプリ」という名前はいまいち気に入ってないので、この機会に「オンラインソフトプレビュー」あたりのありきたりな名前にしようと思いまする。
　ページ自体も再編されるため、だいぶ時間がかかるでございましょう。

　今のところは12月16日のスタートを予定してます。雪子ちゃんの1歳の誕生日なんです。

　1月9日、「リンクのページ」から始まったChains。
　4月には「君は廃止」とかいってサイトから消された、かわいそうなChains。
　6月の終わりにはちゃんとした名前をつけてもらって復活したChains。
　7件あったリンクがなぜか2件になってた、不思議なChains。

　すべてはURLを公開してない現状が悪いんです。友達しか来ないのにリンクのページなんかあってもしょーがないじゃないですか。だから「俺の特別お気に入りだけを載せよう」にしたら、2件しか残らなかっただけなんです。

　それでも、どうやら9月1日には「CTS」の7歳の誕生日に合わせて正式公開する腹づもりのようなので、Chains もようやく出番がきそうです。

　というわけで、そろそろこいつもちゃんと作ってやらねばなぁ、と思い、8.14に JavaScript 化しました。デザインとかより先に立ってるあたり、最近の流れを感じさせます。
　もちろん、いつまでもあんな愛想の悪いページにしとくわけもなく、今日リニューアル版を作ったのです。なんていうか、Ver.3にして初めてまともなデザインにしてもらえて、さぞかし嬉しいことでしょう。
　→参考 Ver.1とVer.2の画面写真

　まともなデザイン…っつっても、スクリプトの都合で制約が厳しかったので、だいぶ行き当たりばったり。途中で filter: と書いたあたりから、ネスケに厳しいページになるのは確定。
　これというのも、メッセージを表示する「テキストボックス」の違いがすべて悪いんです。同じサイズでもインプローラの方が小さいので、ネスケで合わせられんのです。その時点でもう「ネスケは最低限でいいや」って感じに。
　いやいや、それでもネスケ6はまだマシな方です。ネスケ4ともなると…

　あと、久しぶりに素材も作りました。10×10の白いマスを無闇に並べただけの。
　溝のとこは透過色にして、背景色を変えるだけで画面の雰囲気をお手軽に変えられます。今は亡き "Editing History" の背景で使ってた手法。
　んでもネスケ4ではPNGの透過色に対応してないので、そこんとこは白に変換されます。そして、画像は白いマスが並んでるだけですから、ものの見事に真っ白。
　素直にGIFを使えばいいんですけど、Unisys が嫌いなので使いたがりません。困ったものです。俺の我侭につきあわされるネスケ4ユーザーはいい迷惑です。

　まぁいいんです。「ブラウザ」はもはや、インタラクテブにエンターテェメントにDHTMLにマルチメデアに、あるいはフラッシュやクイックタイムに毒されてしまったのです。それは一方で、新しい可能性を創っているわけです。そんな可能性が時代遅れのブラウザに足を引っ張られるのは、わたくしには耐えられません。
　かといって、かつての当サイトのような「IE5.5専用」などというのは早まりすぎであり、やはり最低限の表示は確保しなければなりませぬ。

　というわけで、デザイン面を楽しみたいなら素直にインプローラかネスケ6を使ってもらえばいいんです。CPUが200MHzもあれば、IE5.5は充分に動きます。
　だから、僕がネスケ4に用意してやれるのは、あくまでも「最低限表示できること」だけなのです。
　だから、GIFは使わないんです。

追記：2001.9.4

結局ネスケ4ユーザーの多さに負けて透過GIFに変更しました。

　ちなみに Chains に張るリンクには

• 俺のお気に入り
• 比較的安定して更新されている
• ネスケ4.7で表示できる

　なる条件があったりします。
　ネスケ4の呪縛はいつまで続くのでしょう。

　siteCTSの最古参コンテンツのひとつである「いろいろ紹介」が、このたび "俺紹介++" に改名されました。なにを紹介してんのかがわかりにくいんで、ずっと前から変えようと思ってたのよね。でもこれといったものがなかなか考えつかなくて。

　思えば、こいつってsiteCTSの中で一番変化のないページです。フレーム化されて4つの子ページに分かれたくらいかな。
　それ言ったらパチョ奮闘記もフレーム化以降あまり変わってないけど、こっちはソースの構造から根こそぎ違うので、デザインを維持する方が難しかったりします。ついぞ今日も、左フレームに大きな変更が加えられてネスケ6に優しくなりました。

　myお気にアプリ亡き今、パチョ奮闘記とともに最古参のひとつであるプロフィールのページ。実を言うと、"siteCTS"の中に放りこまれそうだったページ。しかし空いた席はすぐに埋まっちゃったので、辛うじてトップメニューに存在するページ。これといったリニューアル予定もなく、このままずっとこのままなんじゃないかという予感が漂うページ。
　なぜ変わらないかと言えば、そりゃもちろん一番つまらないからであります。おほほ

　なお、本日の表題は「俺紹介++」を考えつく1秒前まで最有力候補だった名称。

　ほんの半画面ほど上で「これといったリニューアル予定はない」とかなんとか言っておきながら、俺紹介++がちょびっとリニューアルされました。具体的にはフレームレイアウトやテーブルレイアウトを変えただけ。
　これは暫定版なので、後日に改めて正式版が登場します。

　苦労したのは、左上の階層表示、 < siteCTS / Top / 俺紹介++ / 入り口 > のとこ。ネスケだと「俺紹介++」までしか表示されないけど、インプローラだと最後までちゃんと出るんです。
　もちろんのこと、各ページごとに個別のフレームメニューを使うわきゃありません。それだったらネスケでも表示されるはずですしー。

　しかしインプローラでも問題が残ってて、ブラウザのボタンで戻られてしまうと、階層表示が書き換えられないんです。もうスクリプトが実行されてくんないので今のとこ解決不可。
　各ページへ入るたびに一回だけ強制リロード…とかやれば可能だけど、さすがにそんな馬鹿なことはできないので、他にいい方法が考えつかなかったらネスケと同じように「俺紹介++」までの表示にします。まぁステータスバーもあるしね。

追記：2001.8.28

8.28に解決。

　まぁ本当は19日の話なんだけど、5.21でも書いてたお手製HTMLシステム辞書が、久しぶりにバージョンアップしました。Ver3…といきたいとこだったけど、手間を惜しんだのでVer2.06。
　更新内容は主に onClick=" とか onMouseOver=" とかの JavaScript 記述の追加。「；ｄ」だけで document.write(' とすぐ出てくんのはなかなか革新的。
　といっても、スクリプトは素直にIMEをオフにした方が書きやすいので、JavaScript への対応はそんなもん。

　あとはフォント名。「たいむす」で Times New Roman とか。これはユーザー辞書の方に入ってたんだけど、この機会にシステム辞書の方へ移したり。
　そしていつもの「登録漏れの追加」。結構あるもんなのよね。こないだ新しく <ACRONYM> なるタグを憶えたので、それも入れてみたり。
　結果、Ver2.05比で188件増えて、739件になりました、と。

　ゆきこのおへやが登場したら、このシステム辞書もアップしてみよう。そうしよう。

　8.2に開発した中央リンク制御装置 "conlnk" ですが、 location.replase() で飛ばす新しい機能がつきました。つまり、ジャンプした後に今のページが履歴に残らんので、「戻る」ボタンを押しても2ページ前に戻っちやうわけです。
　そりゃまぁ悪用もできるけど、これはとっても親切な機能なのであります。

　たとえば、GTS版のフレームやファイルにはブラウザ監視装置 "brwchk" が控えてます。こやつはチェックに引っかかったブラウザをNCF版へ飛ばす装置です。無言で飛ばすので、見る人に余計な負担はおかけいたしません。
　というのも、誰かがGTS版の方へ直リンクを張って、それに入って飛んできたネスケ4が到着するなりボカンじゃ話にならんからです。（GTS版はネスケ4で入ると確実に落ちるのです）

　ここで履歴が残っていると、ブラウザのボタンで戻った時にまた通常版へ飛ばされてしまい、結果として、前のページに戻れなくなっちゃいます。それを防止するために location.replace() で飛ばす必要があるんですな。
　そして、この "brwchk" も "conlnk" を使ってNCF版へ飛ばしてるのであります。
　ただ、IE3はこの命令に対応してないので、問い合わせダイアログが出てきます。戻れなくなるよりゃマシかと。

　あと、8.4に開発したコンテンツセレクトボックスの動作中枢 "consel" も、スクリプト構造を一新。もう1/3くらいにシェイプアップできたあたり、どれだけ頭悪かったかがうかがえます。
　新機能として、選んだ項目が同じページかをチェックさせるようにしました。今まではそのまま同じページに飛んじゃってたけど、ちゃんとキャンセルしてくれます。
　ついでに「やっぱやめる」を選択した時に出てた、フォーカス移動をうながすアラートダイアログをやめました。うざったるいし。もちろんフォーカス解除命令の blur() を使おうとはしたんだけど、なぜかうまく働いてくれなくて未採用なのです。
　全ページにフレームを採用してれば、隠しフレームにチェックボックスでも置いて代用したりできるんだけどなぁ…。（俺紹介++のメニューセレクトボックスではこの方法を使用）

　25日でぼやいてた「ブラウザのボタンで戻ると階層表示が書き換えられない」なる問題が見事修正できました。ちょっとした発想の転換で簡単に解決しました。おまけにネスケで正常に動作しない不具合まで解決できました。やった！
　加えて、用語集の「雪子ちゃん」から「パチョコムな俺」に入って、そこから他のページへ行こうとするとスクリプトエラーになるのも修正しました。でも他ページから飛んできた時はリンク自体を表示させないようにしたので、あまり意味なし。（ツールバーもないウィンドウでうろつかれると困る）

　なお、「各ページへ入るたびに一回だけ強制リロード」はだいぶ間違いでした。階層表示を書き換えるために、フレームメニューはリンクを押すたびに毎回リロードされてます。
　正しくは、「フレームメニューを読みこむ時に一回だけ強制リロード」です。つまりリンクを押した時にリロードされて、飛んだ後にまたリロードするって馬鹿な話です。

　修正版では、リンクを押した時じゃなくて、メイン側のページを読みこむ時に遠隔操作でリロードさせてます。こっちの方法は非常に単純で、スクリプトも嘘みたいに簡潔化されました。あまりに簡潔化されちゃったので、外部jsを使わずHTMLへ記述する仕様に。
　ちなみに、正確には「リロード」じゃなくて「同じページにジャンプ」です。フレームメニューのページサイズは4KBぽっちなので、キャッシュを無効にでもしない限りは気にならないかと。

　それと写真の取り込みと加工が大体終わったので、一挙掲載しました。これでめでたく暫定版から正式版へ格上げです。ただ、雪子ちゃんの写真だけがまだ用意できてないけど。

　今日友人がやってきて、彼のもつホームページのデザインを俺が手直しすることになりました。なんていうか話の流れというやつで。
　といってもちょっとだけです。手がけたのはトップページと「車＆バイク」のページ、フレームのソース、あとはサイト名を変えたくらい。

　「らんぼるぎ〜にのページ」強制改め「pageARM'S」。
　ひどいことするね。

　彼はデザインとかに関しては素人なせいか、CSSのフィルター属性とか見た目の派手さに簡単に騙されてくれます。
　「ページへ入るたびにトップの写真がランダムで変わるといいなぁ」というご希望に応え、そんなスクリプトも作ってあげました。用意周到に写真も持参してきてるあたり、どこか計画的犯行の匂いが漂います。
　まぁ画像のランダム表示なんてのはスクリプト的にはすごく簡単なので、あっという間にできます。彼はたいそうお喜びになり、何度も更新ボタンを押していました。
　…世の中こういう人ばかりだったら俺もオシャレキングになれるんですけど。
　ちなみに「ネスケは無視していい」とのご注文なので、かなり好き勝手やりました。えぇ、日頃苦労させられているうっぷん晴らしです。

　でも、正直言うと人のページの修正なんてやりたくないんです。だってソース手書き派なら、間違っても他人に手直しなんかさせませんもの。俺はホームページ作成ソフトの汚らしいソースが大嫌いなのです。見るのも嫌です。
　たまに他人のページでソースをのぞく時は、まず <META> タグを見ます。ホームページビルダーとかフロントページとか書いてあったら、その場でエディタを閉じます。もちろんそれはページの仕上がりとは関係ないので、見る価値もないのはソースだけです。
　そんな俺にとって、最初のゴミタグ掃除はとっても苦痛なのでありました。

　しかし、なによりも許せんのは、素人にとってもありがちな馬鹿サイズ画像の数々。
　400×300で200KBてどういうこと？

　ちょっと待てよオイ。お絵描きサイトなんかでは下手な奴に限って低圧縮にして馬鹿サイズにしがちだけど、いくら低圧縮でも jpegの400×300じゃそんなにいかねえだろう？
　それ、ほんとに jpeg？

　よく見てみると、馬鹿サイズのわりにはドットが汚い。それでもう「<IMG> タグの width と height で無理やり縮めてる」ってのはすぐ想像できますね。ビルダーなんか使うからそんなことになるんです。
　じゃあ元はどれくらいの大きさなのでしょう。画像をコピーしてデスクトップに貼りつけ、プロパティを見てみます。

　1280×960。

　がふっ。よもや壁紙だとは…っ

　Chains にめでたく3件めのリンクが仲間入りしました。掲示板でおなじみのアキぴょんとこ…なのですが、彼のとこはバナーがまだありません。Chains は見ての通りバナーが必要なレイアウトなので、No Banner というわけにもまいりません。
　そこで、オリジナルが登場するまでの仮バナーを勝手に作ることにしました。我が根城には彼からもらった数々のらくがきがあるので、素材は豊富です。

　しかし俺もまた無茶なことをするものです。彼がただのギャル絵描きなら適当な顔でも取りこんでサイト名を入れて適当なフィルターをかけるだけですが、そういうわかりやすい絵を描く人でもなければ、そんなんで納得するような簡単な人でもないんです。

　散々悩んだ結果、2枚の絵（？）を合成・加工してこんな感じに落ちつきました。難しいです。人んとこのバナーを作るのって。まぁオリジナルが登場するまでの一時バナーなのでよしとしましょう。
　個人的には「彼の雰囲気はよく出てるなぁ」と勝手に思ってます。

　あと、ついでにsiteCTSのバナーも作りました。順序がまるで逆。
　いいんです。バナーがなくてもリンクは張れます。勝手に作っていただければ俺の楽しみが増えてよろしいのですが、そんなご苦労な人はなかなかいないものです。「お前んとこはバナーがねえからリンク張れねえんだよな」とか言われると、反発するんです。
　でもまぁ200×40という小さな画面に要素をつめこんでいく作業は、なかなか楽しそうです。実を言うと作ってみたかったんです。siteCTSのバナー。

　てなわけで、開設8ヵ月めにしてようやくバナーが誕生しました。
　個人的には「俺の雰囲気はよく出てるなぁ」と勝手に思ってます。

　実物はすごい辺境に置いてあります。そんな辺境に置いてあるのは、そんな辺境まで目を通すほど律儀な人に張ってほしい、というささやかなメッセージです。
　もし「リンク張りたいんですけどバナーないんですか？」と聞かれたら、俺はきっと「No Banner で勝手に張っちゃってください」と答えるでありましょう。

　いよいよsiteCTSの正式公開が明日に迫っております。なんか3月末にもそんなこと言ってたけど、それが嘘になったのはすべて「ネスケのせい」です。正確に言うと「見たこともないくせにネスケを過大評価していた俺のせい」。
　まがりなりにもインプローラと双璧をなしてんだから、なにも知らなきゃ「たぶん大丈夫だろう」くらい思っても不思議じゃないでしょう？

　でも現実はご覧の通りで、4.10に入れたネスケ6.0では思った以上に表示できませんでした。それどころか、5.8に入れたネスケ4.73はまさに革命的でありました。

　まぁ今から思うとインプローラに最適化して作ってたんだから仕方ないんですが、表示できないどころか確実にエラーを起こして強制終了しちゃうような危ないサイトを、いかなる顔でいらっしゃいませ〜ｖなどと言えましょうか。
　それで登場したのが旧NCF版、通称「全ブラウザ対応版」でありますが、しかしできあがった頃には完全に期を外しておりました。
　同じページがふたつできたことで更新はとんでもなく面倒くさくなり、長続きしないことが目に見えます。IE5.5専用版を消せばいいだけの話とはいえ、siteCTSのオリジナルはあくまでもこちら側。消すくらいならサイトごと消すかネスケ完全無視でやります。

　そして、半ばやさぐれていた時に現れたのが JavaScript。聞けば、「インプローラとネスケで表示を分けるなんて朝飯前」といいます。なんとも魅力的な話ではないですか。
　俺は、こいつに賭けてみようと思いました。脳の弱い俺に扱える言語かどうかはわかりませんでしたが、「とっても簡単」という話なので、頑張って勉強することにします。
　時に、7月上旬の話。
　いくらかの実験の結果、俺にもなんとか扱えるのと同時に、GTSとNCFの統合も充分に可能であることがわかり、ここにリニューアル計画が具体的に始まりました。
　そうしてsiteCTSは7.19から丸々1ヵ月間、開店休業が続きます。

　その間の馬鹿話苦労話はすでに書きました通り、8.20に蛹から孵ったsiteCTSは、見事な JavaScript の化け物として生まれ変わったのでした。ネスケ4への対応、俺称「N4対策」も（確認できる限りでは）問題ないレベルにまで進化し、余計な機能もいっぱいついて、ソースヘッダを見てみれば4つも5つも外部ファイルを読みこんでるありさまです。

　ちなみに外部ファイルはいずれも少量なので、同数の画像ボタンと大差ありません。HTTPの性質上、細かいファイルは無駄に時間がかかるものですが、siteCTSではそういう画像を使わないようにしてるので、差し引いてプラマイゼロってことにしてください。

　去年末にお試しで作った体験版 "Test Version"
　冬休みに頑張って作った試験版 "Sample Version"
　いよいよ本格的になった暫定版 "Provisional Edition"
　そして明日からいよいよ公開版 "Public Edition"

　なんかここまで紆余曲折を経るところも珍しい気がしますが、やっとこsiteCTSは、今度こそ本当に、大海原へ旅立つのでありました。
　いいんです。別に誰が来るってわけじゃないけど、ここまで頑張ってきた自分に乾杯してあげたい気分なのです。一人で盛り上がって悪いね。
　まったく、これからが大変だというのに。ね。