借りる目的は、直リンクしたいのだけど、
どうせＨＰ作るなら、自分の為にもなるものでないとね。
さらに、直リンクのみは問題なので、新規ＨＰでも直リンク
したものを使用するという前提で。
ということで、まあ、今まで作成してきた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の指定を絶対アドレス指定にしないといけない。
これ修正してＯＫ
[0回]
