忍者ブログ
[595] [596] [597] [598] [599] [600] [601] [602] [604] [603] [605]
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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


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

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

そこで、HTML上で表示するには、表示参照で記号類を変換しないといけない。
この変換は、
 ●JavaScriptでツール作る。
 ●何を変換しなくては行けないのか調べる。
   ・<   : <
   ・>   : >
   ・&   : &
   ・”   : "
   ・’   : '
   ・半角空白:  

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

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

拍手[0回]

PR

コメント


コメントフォーム
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード
  Vodafone絵文字 i-mode絵文字 Ezweb絵文字


トラックバック
この記事にトラックバックする:
忍者ブログ [PR]
カレンダー
07 2017/08 09
S M T W T F S
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
フリーエリア
[-]最新トラックバック
プロフィール
HN:
7maru
性別:
非公開
自己紹介:

バーコード
ブログ内検索
[+]アーカイブ
アクセス解析