GLAYチケットGETした！！

　今日10:00から、GLAYのドームツアーチケットの一般発売
がありました。
で、東京ドームの3/12（土）のチケットをGET！！

で、ローソンチケットの電話だけど７分後ぐらいにつながった。
いやーー、嬉しい。。。このところ運がいいですね。^^)

無料サーバ用に新規ＨＰ企画を考えてみた

　借りる目的は、直リンクしたいのだけど、
どうせＨＰ作るなら、自分の為にもなるものでないとね。
さらに、直リンクのみは問題なので、新規ＨＰでも直リンク
したものを使用するという前提で。

　ということで、まあ、今まで作成してきたJavaScriptを
後世に残す意味で、その解説・紹介的なもの、その他に、
どうせなら、皆さんへの提供を行うようなＨＰにしたい。

　ＨＰタイトルは、「JavaScript Tool」とか「JavaScriptツール」は、
同じようなタイトルありますね。
ということで、もっとＨＰ内容を明確に表現するということで

「7maru JavaScript ツール」は。。。

なんか、そのままじゃない。。。。どうも芸がない気が。。^^);;
ただし、先頭が数字だとディレクトリで並べた時に始めの方に
出てくるので有利でも有るけどね。

　で、内容なんだけど。。
先頭ページは、いろいろなツールを各ジャンル毎にまとめるような
構成になると思うので、BayStars Skierの先頭と同じ感じで。
いや芸がないので、もっとカッコええページにしたい。
じゃ、無料素材とかで飾るかで、探したけどピンときたものがない。

で、やはりページ全体を統一したいので、
いっそのことブログと同じにしよう。
カラオケのがいいので、これを１ページ物に変えて行こう。

ということで、まずは目次を、

【Freeツール】
　　●ブログツール
　　　　　●スライド表示
　　　　　●階層（折り畳み）メニュー
　　　　　●カテゴリ毎のスタイルシート自動切替
　　　　　●ソフト（ポップアップ）メニュー
　　○ホームページツール
　　　　　○スライド表示
　　　　　○ソフト（ポップアップ）メニュー
　　　　　○勝敗表グラフ
　　　　　○碁盤
　　　　　○ゲーム（クリックもぐら等）
　　●ホームページ作成支援ツール
　　　　　●ファイル参照時、ローカル・サーバ両方使用可能にする。
　　　　　●表示参照文字変換
　　　　　○打撃表作成
　　●クイズツール
　　　　　●クイズ
　　　　　●ｘｘｘ度チェック
　　○ＯＴＤ掲示板ツール
　　　　　○midi切替
　　　　　○イラスト浮遊
　　　　　○荒し対策
　　　　　○順位予想掲示板
　　　　　○リアルタイムクイズ掲示板
【作成アプリ】
　　●ゲーム一覧
　　　　　●クリックもぐら
　　　　　●クリックもぐら画像版
　　　　　●１０００本ノック
　　　　　●ペナント競争
　　　　　●スキー回転競技
　　○その他
　　　　　・クイズ：タイムショット
　　　　　・カラオケ応援歌
【おまけ】
　　●デバッグ方法
　　　　　●レイアウトが崩れる原因
　　　　　●管理人のJavaScriptデバッグ方法。
　　●世の中の情勢
　　　　　●Mozilla　が何とdoument.allをサポートした！！
　　　　　●最近、ブログは置いといて、ＳＮＳにハマってます！！
【サイト情報】
　　●当サイトについて
　　　　　●利用規約
　　　　　●リンクについて
　　　　　●更新履歴
　　●ＦＡＱ
　　　　●ＤＯＣＴＹＰＥ指定での注意
　　　　　以下を参考にしてみてください。
　　　　　　　　●正確に記述しないとしっぺ返しを食らう。
　　　　　　　　●DOCTYPE宣言でデザインが崩れる？（枠線はどっち側）！！
　　　　●ＣＳＳのバグですか？
　　　　　・http://cssbug.at.infoseek.co.jp/index.html：ＣＳＳバグリスト@CSSバグ辞典スレッド
　　　　　ここは、2ちゃんねる掲示板内のCSS/DHTMLのバグを扱うスレッドをまとめたサイトです。
　　　　　これ非常に助かりますね。
　　　　●ＣＳＳ変更したらおかしくなった。
　　　　　まず次の入力ミスをチェックしましょう。管理人もミスります。^^);;
　　　　　　　　・「：」を書き忘れた。　　　　　→ｌｅｆｔ　２０ｐｘ；
　　　　　　　　・色の指定で「＃」を書き忘れた。→”００ｆｆ００”
　　●お助け掲示板
　　○カスタマイズ掲示板
　　●ゲストブック
　　●管理人について
　　　　　・サイト運営ポリシー
　　　　　・他運営サイト
　　　　　・お世話になっているリンク集


　内部ＰＣのディレクトリ構成は、js7からぶら下げる。

　まずは、公開などせずに、作っていくことを優先。
ある程度できたら、公開等する。

したがって、まずは直リンク可能にするのが先決。
そこでブログツールから作る。

●BLOCKBLOGツールは、BLOCKBLOGページ構成は同じで、内容簡略化して作る。
　●各カテゴリ毎（HP,カラオケ、ボーリング、てんてん丸、ＭＹ、
　　このブログ、BLOCKBLOG）に１個のみのindex.htmlを作る。
　●バックナンバー等のリンクには、この７個のindex.htmlを割当てる。
　●ＣＳＳファイルは、BLOCKBLOGと同じものとする。
　●各カテゴリのhtml内容は、作成容易性のため先頭のカテゴリ名以外はすべて同じにする。
　●html内でツール説明には不要なもの（ＲＳＳ関連、BLOCKBLOG関連等）は全部削除。
　○てんてん丸のタイトル画像を変更しよう。→後でやろう。
●JSの改良点。
　　●ユーザ定義テーブルの一部が未定義の場合でもエラーにさせず無視する。
　　●他のJavaScriptと同じにならないように、外部変数・関数の先頭にjs7を付ける。
　　●ソフトメニュー：
　　　●現在moreがバックナンバーにだけ固定で設定できるけど。
　　　　その他のカテゴリも沢山表示してる人いるので、
　　　　他のカテゴリも対応し、さらに最新のトラバなどは３行で１組なので
　　　　対象カテゴリ毎にmore表示個数を指定させる。
　　　●なお、現在はmoreを含んだ個数なので、これでは３行１組とは
　　　　いかないので、指定する値は、moreを除いた個数とする。

　　　●さらに階層メニューで[+][-]をカテゴリ名の先頭に指定させたので
　　　　これがあれば、削除する。
　　　　●このために従来のmenu幅が120pxだとIE/operaでは右側にはみ出し、
　　　　　縦に隙間が開いてしまう。
　　　　　ということで、挿入は、いろいろ問題発生するので、
　　　　　absolute指定のみに変えよう。
　　　　●ＣＳＳ含めたサンプル作る。
　　　　　　→画像が指定してあるエリアのpadding-topをメニュー幅増やす。

　　　●現在、ソフトメニューの書式は、プログラムで設定しているが、
　　　　これだとカスタマイズが大変なので、
　　　　ＣＳＳファイル内でカスタマイズ出来るように変える。

　　　●その為メニューのdt/dd領域の書式をＣＳＳファイル内に
　　　　記述してもらうようにする。
　　　　　　●マウス乗り色をＣＳＳファイルから取得する
　　　　　　　　　　→　仮のＤＩＶ領域を生成して取得。
　　　　　　●現在はソフトメニュー色がシルバーであるが、
　　　　　　　他の色でないとデザイン的にまずいのも当然あるので
　　　　　　　色変更の解説必要かも。
　　　　　　　　→ＣＳＳで指定するので詳細説明は不要でサンプル記載。
　　　　　　●ただし、ピンク系、薄茶色系を作り実際に使う。

　　　●現在はbox領域を下にずらし、その間にソフトメニューを配置てるけど、
　　　　これだと、上下に繋がった背景画像の間に隙間が開いてしまうので
　　　　デザイン的にまずいのもあるため、どうなるか調べとこ。
　　　　　　●contentをabsolute指定しているＣＳＳだと、
　　　　　　　IE,Mozzila,operaともに、
　　　　　　　box領域をabsolute設定した時点で、
　　　　　　　contentの配置がおかしくなり、
　　　　　　　なおかつそれぞれ異なる表示形態に。
　　　　　　　　ＩＥ：box領域内でtop位置が下に150pxぐらいずれてる？
　　　　　　　　Mozz：box領域の下に配置される。
　　　　　　　　oper：box領域内でtop位置が150pxぐらいずれる？
　　　　　　　　　　　さらにbox領域の横サイズが小さくなる。
　　　●ということで、box領域を下にずらすのは、
　　　　デザイン次第で問題が発生するので、box領域はずらさず、
　　　　ソフトメニューの幅は、ＣＳＳでユーザに指定させる方法も作る。
　　　　　　→やっぱ、ずらす方式は、かなり問題発生し混乱しそうだし、
　　　　　　　ＣＳＳで空きを作る方法だと、デザインには影響がないし、
　　　　　　　さらにどこでも配置可能で、ユーザの自由度も増すので、
　　　　　　　この際、こちらの方式に変えてしまおう。
　　　　配置位置は、例えばbox領域の左上とか、content領域の左上とかを
　　　　指定可能にするために、ブロック領域のid名で指定させる。
　　　　このブロック領域の左上位置を取得して、
　　　　topとlefに設定させることで、位置指定に柔軟性を持たせる。
　　　　さらに微調整の為にtop,leftに調整値をプラスしてあげる。

　　　●現在は、ソフトメニューを横に配置する方式のみだが、
　　　　ユーザが位置を自由に指定でき、書式も自由に設定できるので、
　　　　横配置の他に、縦配置を作ってしまおう。
　　　　●考え方は、dtとかddを取り出してdivに流し込む方式を
　　　　　まず考えたが、これだと現在のプログラムを大きく変えなければ
　　　　　ならず、ちょっとややこしいので、
　　　　　dl領域をもうひとつコピーし、片方は、dtのみ使い、
　　　　　もう片方はddのみ使うようにして、それぞれで位置を変えれば
　　　　　いいのではという考えで作る。
　　　　●注意点は、dt領域を見えなくすると、dt領域がなくなるので、
　　　　　dd領域が先頭に移動する点。
　　　　●カーソルがメニューに乗ると、色を変えているが、
　　　　　元のデザインがＣＳＳで変えられるので、この色を固定に
　　　　　するのは問題なので、やはりＣＳＳファイルで指定させるように
　　　　　しないといけないが、では、どうやってその値を取得するか。
　　　　　これは、ＤＯＭ２（Views）とＤＯＭ２（style）に書いてあるので、
　　　　　すなわち、ＣＳＳで指定された値が、実際にレンダリングされた
　　　　　ときに、その値が取得できる以下のプロパティがあるようだ。
　　　　　・外部cssファイル中の書式が反映された後の読み込み：
　　　　　　Mozilla/opera:
　　　　　　　　document.defaultView.getComputedStyle(obj,null).
　　　　　　　　　　　　　　getPropertyValue('background-color')で可能
　　　　　　ＩＥは未対応なので、IE独自の以下で対応：
　　　　　　　　obj.currentStyle.backgroundColorで可能
　　　　　　Safariだと、document.defaultViewはＯＫだが、
　　　　　　.getComputedStyle以降が付くとエラーになる。バグ？
　　　　　　ということでいろいろ調べたら、ここのサイトに各ブラウザの
　　　　　　ＤＯＭ２（ＣＳＳ）対応調査一覧が載ってたので、
　　　　　　　　document.getElementById(id).style.
　　　　　　　　　　getPropertyValue('background-color')はエラーにならない
　　　　　　でSafariは、上記はnullを返す。Mozilla/opreaはnull以外を返すので、
　　　　　　これで切り分け、Safariは、nullを返すようにした。
　　　　　ということで、仮のid名をＣＳＳファイル内で指定させ、
　　　　　それを仮のdiv領域を作成して、その反映値を取得し、
　　　　　仮のdiv領域は隠しておく。
　　　　●ここで、ソフトメニューのタイプをユーザに指定してもらうが、
　　　　　この指定がＣＳＳファイル内で出来ればベスト。
　　　　　で、どうすればよいか考えてみた。
　　　　　考え方としては、ＣＳＳファイル内に仮のid要素名を
　　　　　横配置用か、もしくは縦配置用のどちらかを指定しておいて、
　　　　　このid要素名を取得できれば、ＪＳファイル内に記載しなくても
　　　　　指定できる。
　　　　　で、これは、ＤＯＭ２（style）に書いてあるので
　　　　　すなわち、ＣＳＳファイル内で指定する
　　　　　セレクタ（書式要素の識別値：#id名、.クラス名、タグ名とか）を
　　　　　以下で取得可能である。
　　　　　・外部cssファイル中のセレクタ名読込
　　　　　　Mozilla:
　　　　　　　　document.styleSheets[0].cssRules[i].selectorText;
　　　　　　IE 5.x以上：
　　　　　　　　document.styleSheets[0].rules[i].selectorText；
　　　　　　opera7.23：
　　　　　　　　document.styleSheetsはOpera7.23では、undefinedです。
　　　　　というこで、Operaが未対応ということで、この方式は見送った。
　　　　　いや、タイプだけ指定しても位置を指定しないと意味無いので、
　　　　　この方式は結局ボツ。
　　　　　変りに、ＣＳＳ自動切換えのｊｓファイル内で
　　　　　ソフトメニュータイプと位置を指定させる。
　　　　●Windowsが出来たので、safariで見てみたら、おかしい。^^);;
　　　　　●マウスを乗せた色が、マウスが離れても消えない。
　　　　　　obj.style.backgroundがnullを返すため。
　　　　　　→対策：nullならマウス背景描画は行わないこととした。
　　　　　　→対策：ＣＳＳ側でa:hoverで背景色を指定してもらうこととした。
　　　　　●moreが動かない。
　　　　　　(more)文字部分では反応しない。それより右はＯＫ。
　　　　　　→対策：対策分からない為、背景色は変化させないこととした。
　　　　　●てんてん丸、カラオケ、ＭＹ日記の書式が反映されない。
　　　　　　→ＵＲＬの問題と同じ
　　　　　●階層メニューのクリック範囲が文字部分だけ対象外。
　　　　　　→対策：対策分からず。
　　　　　●スライダー表示の画像が表示されない。
　　　　　　ＵＲＬがトンでもないところになっている/../../../../../
　　　　　　ＭＡＣだと、ディレクトリ名が英小文字は英大文字になる。
　　　　　　→大文字変換したものとも比較してあげる。
　　　　●ここで右メニューってのがあるみたい。
　　　　　ということは、右メニューに縦型を配置すると、
　　　　　プルダウンは、右側でなく左側に表示させないといけない。
　　　　　これは、画面の残りの横幅を見て自動的に変える方法もあるが、
　　　　　それだと、項目横幅が小さいのや大きいのがあると、
　　　　　これは右、これは左と分けが分からなくなるので、
　　　　　やはり、ユーザにどっちなのと指定させよう。
　　　　　●で、右メニューを作るには、
　　　　　　単純にＣＳＳのfloat要素でmenu領域とcontent領域を
　　　　　　左右逆に指定すればいいし、
　　　　　　ソフトメニュー位置は、menu領域の左上を指定した。
　　　　　　そしたらなんと、ＩＥがなぜか画面の上の方に表示される。
　　　　　　Mozilla,operaはＯＫ。
　　　　　　類推するに、ＩＥは、親のＤＩＶ領域（box）からの相対位置を
　　　　　　offsetTop,offsetLeftに返してるんじゃないかと。
　　　　　　でＩＥのＨＰ見たら、しっかりと、親座標を基準とした座標値を
　　　　　　返すと。ああああーーーー、なんなのＩＥさんは。。。。
　　　　　　いろいろ試してみたけど、ちょっと諦めた。
　　　　　　で、結局、box領域からの相対位置のみ指定させることにした。
　　　　　　でも、既に色んな領域を指定させるように作っちゃったので、
　　　　　　これ今更変えるの面倒なので、
　　　　　　BLOCKBLOGの場合は、必ず"box"を指定してよ、で行くことに。
　　　　　●で、縦置きの左側配置は、ｄｄ項目の横幅を求め、
　　　　　　その幅分左側に寄せればよい。
　　　●機能説明：を書く。
　　　　●動作条件、利用可能な方の条件
　　　　●テーブル説明。
　　　　●注意：ｄｄが無ければ、ソフトメニューには表示されない。
　　　　●トラックバックは、ddが３行がひとつの組なので、
　　　　　more表示する場合は、more最大数は３の倍数で指定する。
　　●階層メニュー：
　　　　一番いいのは、
　　　　カテゴリ名に[+][-]を指定させるやり方に変更すること。
　　　　現在は、テーブルで対象カテゴリ名を設定しているので、
　　　　そこを、対象領域id名（menu等）をテーブルで持ち、
　　　　　これが存在するものについて、
　　　　　その子ノードでnodeNameがＤＬのOBJの
　　　　　DTの中身の先頭が[+]か[-]のobjに対して
　　　　　　　[-]なら、そのままで、イベントを登録する。
　　　　　　　[+]なら、ＤＤを隠し、イベントを登録する。
　　　　●BLOCKBLOG関係のjs変更。
　　　　●index.htmlも変更
　　　　●ＵＰ後にBLOCKBLOGのカテゴリ名に[-][+]追加
　　●スライダー：現在画像を表示しているだけだが、
　　　各画像をＡタグで括り、リンク可能に改良する。
　　●単機能でjsをメニューブロックに配置し、
　　　配置したブロックを消す機能。
　　　　→これは、スタイルシートで対応してもらう。
　　　　　　　追加する「どこのもブロック」の名前をxxxxとすると、
　　　　　　　スタイルシートに以下を追加する。
　　　　　　　　　　　#xxxx {
　　　　　　　　　　　　　　display: none;
　　　　　　　　　　　}
　　　　　　　注）id名の先頭文字は半角英字のみ許され、
　　　　　　　　　半角数字は許されないので注意。^^);;
　　　　　　　●BLOCKBLOGで許可か否かを調べてみたが、出来ちゃいますね。
　　　　●bayski.jsを単機能に分け、
　　　　　●index.htmlをjsカテゴリ分けし、
　　　　　●各cssに追加し、
　　　　　○BLOCKBLOGにjsカテゴリを登録する。→面倒なのでやめた。^^);;
　　　　　　この結果、条件は、
　　　　　　　・js7Libは、一番最初に配置すること。
　　　　　　　・js7ChangeCssはフッターに登録すること。
　　　　　　●BLOCKBLOGには、bayski.jsとjs7ChangeDss.jsで登録しとこ。
　　　　　●説明時は、ｊｓファイルと、機能の表で、
　　　　　　何が必要で、直さなければ行けないのはどれを明示。
　　●ホスト・ローカル切替は、対象となるｊｓファイルには、
　　　必ず先頭でgetRootURLでＵＲＬをゲットさせるようにする。
　　　注）これをやると、js7Lib.jsにこの関数を入れたので、
　　　　　これがその行で実行されるので、その行以前に7maruLib.jsを
　　　　　配置しないといけない。→困ったが、御願いする。
○BLOCKBLOGの文書構造依存記述を非依存記述に変える。
　すなわち、DT,DD,カテゴリ名とかは、変数にして、
　変数を変えれば、他の同一の階層構造なら動作するように変える。
　→BLOCKBLOGはこのままで、他のブログでいいとこあれば、その時考える。

●BLOCKBLOGで使用しているｊｓファイルは、新規ＨＰでも使用するし、
　他のBLOGでも使用可能なためｊｓファイルを共通で使用したい。
　そのためには、ユーザ定義データとプログラム部分を別のｊｓファイルに
　分割する必要がある。
　ユーザ定義データは、ｊｓファイル毎に該当する定義データｊｓファイルを
　作っていては数が多すぎて大変なので、ひとつにまとめる。
　さらに、ｊｓファイルが共通で使用できることから、
　ｊｓフォルダを作り、そこで管理する。
　　　・js7Lib.js
　　　・js7ImageLink.js
　　　・js7SoftMenu.js
　　　・js7FolderMenu.js
　　　・js7SliderMenu.js
　　　・js7ChangeCss.js
　●ただし、以下は非共通とし、該当ディレクトリに置く。
　　　■js7Wakeup.js
　　　　→自分のＨＰだけ非該当で、Freeツールは全部入るので共通。
　　　●js7UserData.js
　このことから、js7UserDataは、js7Libの関数を使用しているので、
　js7Libより後ろで定義すればよい。


●各ブラウザで最終確認する。
　●Mozilla/safariでソフトメニューの左端でソフトキー閉じない
　　→マウスが対象領域のmore内にある時に、moreクリックでmore領域が
　　　消えてしまい、マウスが対象領域外に出てしまう場合に、
　　　mouseoutメッセージが来ないので、プルダウンを消すタイマを
　　　起動できないのが原因。
　　→ＩＥは、消えても、その領域からマウスを出せば、
　　　mouseoutが来る。
　　→これは、仕様不良ですよね。
　　　本来なら、消えた時点でmouseoutが来なくちゃ。
　　　Mozillaに要望として報告しておこう。
　　→で、どうしよう・・・
　　→まあ、もう一度プルダウンに入れば問題ないし、
　　　他のソフトメニューに移しても問題ないので、
　　　このまま放っておこう。^^)
　●Mozilla/safariで右縦メニューの横幅合わない（IE/operaはＯＫ）
　　→Mozilla,safariではＤＤ幅（obj,offsetWidth）を、
　　　求めると、最後のＤＤ以外は、なぜか最大幅になる。
　　　最後のＤＤだけは合っているが、
　　→これは、よく分からんが、バグなの？？？
　　　どうもonLoad時に見てしまうと、おかしいので、
　　　でもmore表示時はＯＫみたい。
　　→原因らしき：サンプルでは、全角英字をｄｄ項目に書いているが
　　　これだと表示時に半角英字で表示されるため、
　　　offsetWidthで取得するサイズは全角英字のサイズで、でも表示は
　　　半角英字なので、おかしくなっているようだ。
　　→プルダウンを開くときに位置を合わせてやるように替えてみた。
　　　そしたら、最初だけ位置が合わない。
　　　ということで、onLoad時は、一応位置が合わなくてもLeft位置は
　　　セットしておけば、ＯＫ。
　　　ということで、解決策が分かるまで、かなり苦労した。^^);;;
　　●と思ったら、今度はsafariで、ほんのちょっとだけずれている。
　　　→調べると、ＤＴを配置後に、なぜかレイアウトがずれてる。
　　　　これがスライダー表示が起動するとずれるようだ。
　　　→いろいろ調べたが、スライダ表示でスライドする画像の高さを設定
　　　　すると、content領域が右にちょっとだけすれる。
　　　　なぜだかは不明。
　　　→ということで、ギブアップ。仕方なく発想を変えて、
　　　　レイアウトがずれるなら、それに合わせてＤＴもずらしてやればいい。
　　　　ということで、何とか解決。
　　　●なお、more表示をする際にＤＤ項目をずらしながら表示しているが
　　　　これがＤＤ項目の文字の長さにより、ＤＤ項目の幅が変わる。
　　　　これもついでに対処した。
　●Safariの縦メニューで、プルダウンの動作がおかしい。
　　→「バックナンバー」をプルダウン表示し、プルダウン上で、
　　　下にマウスをずらして行くと、次の「カテゴリ」の位置に来ると
　　　「カテゴリ」のプルダウンに切り替わる。
　　　他は、「最新のトラックバック」の位置に来ると、
　　　「最新のトラックバック」のプルダウンに切り替わる。
　　→IE,Mozilla,operaはＯＫ。
　　→右縦メニューはＯＫなんだよね、これが。。。。
　　→なんじゃこれは？？？
　　→イベントの発生状況をモニタしたところ、
　　　safariは、問題となるところで、DLからイベントが発生していた。
　　　それに伴い、プルダウンが切り替わっている。
　　　DLでイベントが来たときに、処理するようになっていたのを
　　　処理しないように替えてＯＫ。
　●operaで別ウィンドウ開くと、クイズが表示しない。
　　　新規ウィンドウのＨＴＭＬのＢＯＤＹ部のscriptタグで
　　　２行以上に渡る（多分jsファイルはＯＫなんだろう）場合に、
　　　それ以降のタグが無視される。バグなんでしょうか？？
　　→クイズだけ別ウィンドウにしないで、同じ画面に表示しちゃおうか。
　　　いや、面倒なので、別ウィンドウ用とオペラ用のリンクを付けて
　　　使う方に判断任せちゃおう。
　●operaがサンプルで動作しない
　　→上記理由に同じ。

それと、ソース配布は、ダウンロードではなく、
ソース公開でコピペしてもらおう。
こうしておいた方が、誰にでも見れるので公知になるしね。
→ただし、現在のブログ形式画面だと、１行のソースがはみ出すので、
　新規ウィンドウを開いて見せることに。

そこで、HTML上で表示するには、表示参照で記号類を変換しないといけない。
この変換は、
　●JavaScriptでツール作る。
　●何を変換しなくては行けないのか調べる。
　　　・＜　　　：　＆ｌｔ；
　　　・＞　　　：　＆ｇｔ；
　　　・＆　　　：　＆ａｍｐ；
　　　・”　　　：　＆ｑｕｏｔ；
　　　・’　　　：　＆ａｐｏｓ；
　　　・半角空白：　＆ｎｂｓｐ；

●著作権法
　一応、著作権法も見たけど、いろいろな権利があるけど、
　今回のFreeツールは、一度作ったものには興味がないので、
　ここに書いてあるような権利は一切いらないから、どうぞですね。

●でサーバにＵＰしたら・・・・
　●ＨＰ上の画像が表示されない。
　　　●画像が表示されないのは、ＣＳＳファイル内でＵＲＬ部分の表記が
　　　　すべて小文字に変換されてる。
　　　　→これは以前自分がＣＳＳファイルの要素名等を小文字に変換した際に
　　　　　同時に変換されていたんですね。
　　　　　windowsでは大文字・小文字を意識してないが、
　　　　　サーバ上では違えてるのが原因。
　　　　　大文字混在に替えた。^^);;
　●BLOCKBLOGは、ＣＳＳも解釈されない・・・
　　　●こちらは、大文字変換はするとして、
　　　　urlの指定を絶対アドレス指定にしないといけない。
　　　　これ修正してＯＫ

真岡鐵道汽車ぽっぽ

　兼ねてから約束していた真岡鐵道の汽車ぽっぽに
正月帰郷することから、そのついでに乗ってきた。

てんてん丸、これをクリスマスより楽しみにしていました。

前回の大井川鐵道と同じく、てんてん丸、ママそれに
おじいちゃん、おばあちゃんの４人で下館から汽車ぽっぽに乗り、
自分は車で終点の茂木駅で待ち合わせという感じで。

　で、真岡鐵道関連のホームページの掲示板等を見ると、
まず整理券をＪＲのみどりの窓口で購入する。
席は、指定じゃなくフリーなので、ほんとの整理券ですね。
で乗車券は、当日買えばいい。

ということで、まずは整理券を１２月２２日に買ったけど、まだ全然余裕。
１号車から３号車まであり、１，２号車は、ＪＲ窓口で発売。
で、３号車は真岡鐵道の駅で発売みたい。

　ところが、３１日に大雪の情報。
でも３１日朝起きると晴れていたので、ネットチェックして
雪は午後から降り出すと。それなら午前中に実家に到着すればいいと。
で、１，２日は晴れなので、雪は解けるだろうと予想。
でも自分の車はノーマル車。チェーンもない。
まあ、雪が残っていれば電車で行けばいいと。

案の定、雪は午後から降り出し本降りに。
でも夕方にはやんだけど、１日は雪が５ｃｍぐらい積もってる。
でも実家の前の道路は、夕方には解けていました。

ということで、当日は朝から晴天。
まずは、雪が心配なので、２時間前に出発。
道路は、日陰以外は雪はありませんでした。
ということで順調に。。１時間１５分前には下館に着いちゃいました。

で、駅の駐車場に止めようとしたら、大きな音でガシャーーンと
何。。。。。良く分からず、止めて、車降りたら、
なんとホイールが転がっている。。。唖然。
どうも、駐車場の隣の車止めにぶち当たったみたい。^^);;
あちゃっーーーー。。。まあ、あとで直す事で。。。

てんてん丸このタイヤ見て、「黒いタイヤ」って言ってました。

で、ここでなんと同じような環境というか計画を立てた方のおじいちゃんと
お話を。やはり孫をＳＬに乗せて、両親は車で茂木駅まで行くと。
まあ、同じような考えの方が、いるんですね。

ということで、時間までは、ＳＬはどこにいるのか見学ついでに
駅の水戸方向にある歩道橋に登ってみたところ、ＳＬの汽笛の音が、
ななんと小山方向にＳＬが止まっている。
ということで、そっちの方に行ってみると、１番線の横にＳＬが止まっていました。

みなさん１番線のホームでＳＬを見ているのか並んでいるのか。。
でこのことをおじいちゃんに伝えて、早く１番線に行ったて並んでいた方がいいと。

自分は、ビデオを持って、またＳＬのところに。
で１０時１６分発の電車が出ると、今度は横にいたＳＬが動いて、
さらにバックで１番ホームに入ってきました。
そこでてんてん丸乗車。で、こちら側の席に座ったので、
てんてん丸をビデオにバッチリ撮影。

で、１０時３６分に定刻どおり発車。このときの様子をビデオに撮影。

で、トイレによって、車に戻り、ホイールはめようとしたが
はまらず、後回しにして、地図を確認して、追いかけようと。
でも１５分も経ってました。間に合うかな。。。。。

で、一生懸命追いかけたが、雪の為にまわりもゆっくり運転しているため、
追いつかない。。。。で、道路も日陰は雪があり凍っているし。
そういうところは、２０ｋｍで運転。

で、真岡では、全く追いつかず、１０分遅れ。
今度は益子では、これまた、５分遅れで、なんとか煙は見えた。

そこから茂木まで山間部を通るようで、雪が怖かったが、
そんなにひどくはない。で、途中でトイレ休憩でスーパーに駆け込み。
その後、ゆっくりとで、坂道の上りで雪が。。。あっ、タイヤが空回りしてる。
２０ｋｍで走っているのに、アクセル踏むと、空回り。。。ヤバー。。。
で、アクセル踏まずに自然に任せ、そこを乗り越えると。
踏切が。。。あっ、汽車ぽっぽだーーーー。ついに追いついた。

でも、すぐそこが茂木駅。
なんとか走ったが、時すでに遅しで、
駅に着いたら、おじいちゃんが駅から出てきたところ。
あちゃっーーーーー。

で今回は、ＳＬ走っているとこが、ビデオに取れなかったのが、残念。
やっぱスーパーのトイレがまずかったか。。切腹。

あと、車内でなんか抽選があり、ママが当たったようで、
真岡鉄道のカレンダーを貰った。これ小さめでいいですね。
四季のＳＬの写真が載ってました。

ママに話を聞いたところでは、車内は７〜８割り程度の乗車率とか。
まあ、お正月だし、雪は降ったしで、こんなもんでしょうか。

幼稚園冬休みだと大変だ

　幼稚園も２３日から冬休みになって、自分も２４日は休みを
取って４連休にした。

　てんてん丸、ここぞとばかりに、パパどこか連れてって。。。
パソコンやってると、パソコンとの間に下から押し入ってきて
パパの部屋に入ったと。。。。もうパソコンやってられない。

仕方なく、
２４日は、じゃどこがいいかなということで、シーパラに行った。
２５日は、自分のオフ会なので遊べなく、
２６日は、こども科学館に行った。


　シーパラは、なにしろ寒ーーーーーい！！
しかし、てんてん丸は元気。

で、そのまま水族館へ。
てんてん丸まだ行ったことないとか言っている。

本当かよ。一度来たでしょ。
といっても、まだ２歳頃なので覚えてないか^^);;

でもママとよく来てるでしょ。ここに。
水族館行ってないの？

「そう、行ったことない」。。。と

えーー本当。。。じゃ、行くか・・

で、水族館の中をいろいろと。
クリスマスということもあり、サンタえびもいた。
てんてん丸もいろいろ見つめていた。

２Ｆを見てるところで、イルカ達のショーが始まるというので、
３Ｆはすっ飛ばして、ショーコーナーへ。

でも、吹きさらしのため、寒い。

ショーは、アザラシや、クジラやイルカ達の豪快なジャンプなどで、
てんてん丸も喜んでいた。

でも水中に入るインストラクターの女の人は寒くないのかな？？

その後、食事をして、ぶらぶらしていたら、
てんてん丸、トーマス発見。。。
もう、夢中で乗っていたが、単に乗るだけ。。。^^);;

で、ここでレンタル犬というのを発見。
カップルがレンタル犬を連れていってるんだけど、

小さい犬は、おとなしくしているけど、
大型犬、特にハスキー犬を借りたカップルは、
犬にデートコースを決めたれているようなもんですね。^^)
ただ、犬の行きたい方向に連れていかれるだけ。。。。

それから、円形ステージで、てんてん丸、
幼稚園の学芸会を再現し踊ってくれました。

次にこども科学館は、プラネタリウム行こうと誘ったが、

「怖い、暗い中怖い」と、まだ怖いのかよ。。。。^^);;

仕方なく、１Ｆからいろいろ見たけど、
てんてん丸が興味あるのは、電車。。。

本のコーナで、電車の本を見つけると、
真剣に何冊も呼んでました。

次にビデオコーナーへ。
ここでは１本３０分程度のビデオを見られるんだけど、
「電車が出来るまで」のビデオを借りて、
これを始めは食い入るように、仕舞には眠そうに見てました。
でも、電車の骨組みが出来て、台車が付いて、内装が出来て、
試運転とてんてん丸も、よかったみたい。

最後は、３Ｆの宇宙空間というのか遊びスペースへ。
ここで、いろんな遊びをやって過ごしたけど、

まあ、ママ・パパが皆さん子供を連れてきてるけど、
子供は楽しそうにはしゃいでるけど、
大人は、疲れて暇でベンチに座っているだけ。。。。

ということで、てんてん丸を遊ばせるのも、大変だ。。。

唄い不足なので別なオフ会に参加してみた

　今月オフ会では２曲しか歌ってないので、
どうも欲求不満気味だったので、別なオフ会に参加しようと
いろいろとどこがいいか調べてみた。

　一番行ってみたいとこは、丁度オフ会が終わったので、
次を探してみたら、いいところがあったので、
ちょっとＶ系は唄えるかなとも思って迷ったが、
意を決して参加表明をしてみた。

　でちょっとその前に喉慣らしをしたが、
まあいい感じだったんだけど、その晩から喉の調子がおかしい。
なんか喉の上の方が鼻が詰った感じで、ちょい不安な状態。
で、前日はカラオケには行かなかった。

　当日声の方は問題なく出ている感じでした。

で、集合場所に行ってみると、すでに皆さんが集合してて、
なんと５０名近い人。凄いなーーー。

時間が来てカラオケ店に移動して、
予め決められた部屋でカラオケ開始。

で、なにしろ皆さん上手い。
歌う人すべてが上手い人のオフ会って経験ないので
まずビックリ。

特に上手い人は、なにしろ声がクリアに響くので、
自分には到底無理な感じなので、羨ましい。
もう聞いてるだけでも、満足するオフ会でした。

また、運営の方もこんなに人数がいるのに、
時間どおりにテキパキとこなしているのが、
これまた凄いと感心。

２次会も皆さんとても感じのいい方ばかりで、
これまた感心と、ほんとうにこんないい感じのオフ会に
感心しました。
でも自分的には、まだ自分のレベルの低さに凹み気味です。
ちょっと立ち直るのは、年内は無理そう。
と言うより喉がおかしんだけど。

自分の方は、はじめからなんか様子がおかしいと言うか、
マイクを通してから聞こえる声が、重低音気味で、
なんか、言葉をひとつづつコントロールしづらい感じ。
どうも喉声かなとも思ったが、そうじゃないみたいだけど。

で、前半が終了し、後半に入って、２曲目までは良かったが、
３曲目の口唇から、どうも喉の上側に違和感が、というより
お酒を飲んで喉声になり声をコントロールできないような感じ
というのかな、なんかおかしい。

３、４曲目がＶ系で高音を伸ばすところが、声出ずに掠れる。
もう、最悪の状態に。
ちょっと、前日のおかしなところが治ってなかったのかな？

最後の曲はどうしようか相当悩んだ末に、
Ｖ系は諦めて、お茶を濁して女性曲を選曲して、
歌う前までは、声でなかったらどうしようと、
もう頭の中はパニック状態だったけど、
唄ったら、問題なく、今までで一番いい感じで唄えたので、
うーーーん、何かな？

翌日も喉の状態は、違和感があるんだけど、
唄うと問題なく声はでるので、喉の上の筋肉痛的な感じかな？
それとも風邪気味なのか？なにしろ、皆さんの上手い歌声に
影響されて、相当喉の上側の筋肉を使った感じなので、
それが影響あるかも？？？

ということで、その後、喉の調子がおかしいので、
当分喉休止状態にしよう。