03 | 2017/04 |  05

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!


スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Memo:拡張パン屑リスト(4)──Javascriptの続き──

clone階層メニューの次に、日別表示の際だけJavascriptによってコントロールする頁ナビについてまとめておく。(その他の場合の頁ナビは全てHTML内に各種のブログ変数を組み合わせて設置してある。)

「http://username.blogx.fc2.com/blog-date-yyyymmdd.html」形式で表示する際には、大変便利な単変数<%sub_title>はそのままでは使えない。年月の表示しかしてくれないからだ。何らかの別の方策が必要となる。

そこでJavascriptで対応した。


2. 日付表示の場合の頁ナビについて

パン屑リスト本体のJavascriptについては、「Memo:拡張パン屑リスト(3)」にまとめた。

何をしたのか?

頁ナビには前後のエントリイへのリンクを置くことが一般的だ。アーカイブ表示の時、カテゴリイ表示の時、1つのエントリイ表示の時、それぞれに前後のエントリイ(あるいはエントリイ群)へのリンクがあるとブラウジングしやすい。

さて、カレンダーをクリックしてある特定の日のエントリイを見る場合には、「その前後」とは特別な意味をもっている。すなわち前後として参照すべきものは、直前直後のエントリイではなく、当該投稿日の直前、直後の投稿があった日でなければならない。

ところで、当該投稿日には複数のエントリイがあるかも知れないし、前後の投稿日は同月のものかも知れない。異なる月のものかも知れない。そして前後のエントリイ投稿日まで何日も空いているかも知れないし、連続して投稿されているかも知れない。つまり、今見ているエントリイ投稿日の前後の何時、投稿があったのかを知るのは容易ではない。

しかし、幸いにして当該月のエントリイ投稿日別情報は、出力されたHTML内のカレンダー部に存在している。そこでこのカレンダー内の必要箇所をJavascriptによって取得し、そこから日別表示モードの時の「前頁」ノードと「後頁」ノードを作成してHTMLに結果を返せばよい。───との到達点に達し、そしてそれに成功した。


但し、当該エントリイ投稿日が当該月の最初の投稿日の場合、あるいは最後の投稿日の場合には、前月の最後の投稿日情報、または翌月の最初の投稿日情報を取得しなければならないが、これは今見ているHTML情報には入っていない。このようなケースの時には、改めて前月又は翌月を描画させ、その結果のHTML文から、最後の投稿日または最初の投稿日を取得しなければならない。これもJavascriptによって可能ではなるが、かなり面倒だ。

投稿日別情報(・・・date-yyyymmdd.html)を別の形で取得することが出来るのかも知れないが、不明にして他の方法が分からない。


そこでこうしたケースにおいては、navi表示を特別に変更することにした。他のケースの場合には「以前の日へ」あるいは「以後の日へ」とあるナビ表示を、当該月の最初の投稿日あるいは最後の投稿日の場合には、「以前の月へ」あるいは「以後の月へ」と変更することにした。

多少強引ではあるが、日別表示モードから月別表示モードへと切り替えてしまうわけだ。

抑も、日別表示モードでブログを閲覧する需要はそれ程高いとは思われないし、このモードで閲覧していてその表示モードのままで、前後の日のエントリイを閲覧しようとする需要はさらに低いだろう。よって「敢えて」日別モードで閲覧した場合においては、両端の日付の場合のナビは、月別モードへと切り替わることの方がむしろ意味があるのではないか、と「都合良く」考え、納得させた次第である。

さて、こうして完成した日別表示モードの時の頁ナビスクリプトについて記しておく。


以上が完成した日別表示モード時のナビバーScriptである。カスタムObjectの利用、配列からの正規表現による文字列抽出は今回初めて挑戦したが、余り困難なことはなく成功した。


なお以下に、このScriptが完成する以前のバージョンのScriptを参考に掲載しておく。それは、前後の日付情報をうまくゲット出来なかった時点の簡易版である。

この続きを読む

Memo:拡張パン屑リスト(3)──Javascript編──

次はJavascriptである。こちらは記すべき事が沢山ある。

パン屑リストではスクリプトを2箇所で使っている。1つはパン屑リストの最左部に配置したブラウジングメニューにおいて、もう1つはパン屑リストそのものではないが、「http://username.blogx.fc2.com/blog-date-yyyymmdd.html」形式で表示する際のナビゲーションバーにおいて、である。

これらのスクリプトに関しては関数起動用以外にはHTML文はない(厳密に言えば、スクリプトからHTML要素を操作するために、HTML文内にid名称を付けたから関数起動用以外にも若干のHTML文の追記が生じた)。全てスクリプト内で処理し、例えばclone階層メニューをHTML文に貼り付けるのも、DOMのappendChildメソッドを利用した。


1 ブラウジングメニューについて

既述の通り、この階層メニューはここで初めて作成し登場したものではない。既に存在している階層メニューのクローンである。実は今回初めて cloneNode メソッドに挑戦したのだが、そのままでは重複してしまうid名の変更策に手こずったものの、その便利さに改めて驚嘆した。


以下にブラウジングメニューの要点だけを抽出して記しておく。


1 HTML文

(1) 階層メニューのclone作成

ブラウザによるHTML文読み込み完了時点で(loadイベント発生時)、clone作成関数を起動してcloneを作成するようにした。併せて日付指定時における頁ナビ表示を変更する関数(dayModeCheck)も load イベントとして組み込んだ。なおこれらの関数は、共にindex エリアでは不要なので not_index エリアにおいてのみ起動するように制限した。


<body <!--not_index_area-->onload="makeGmenuClone();
dayModeCheck()"<!--/not_index_area-->>

(2) 作成されたclone階層メニューの表示と隠蔽

次にcloneの階層メニューを表示・隠蔽する基点として、パン屑リスト記述部の冒頭に次のHTML文を置いた。


<div id="breadCrumbsList"><span onmouseover="balloonPopup(this,'ここをクリックすると各種閲覧メニューを表示又は隠蔽します。')" onclick="gmenucloneOnOff(this);">▼ Browsing MENU</span> | <a href="<%url>">ホーム</a> > ・・・

  • mouseover イベントで操作説明の吹き出しを表示させ、同時に引数this(子ノードに「▼Browsing MENU」というテキストノードを有するSPAN要素)のメソッドとして、mouseoutイベントを設定し、thisからマウスが離れたら吹き出しを消去するようにした。
  • click イベントで gmenucloneOnOff 関数を起動し、階層メニューの第一階層を表示/隠蔽させると共に、起点となったテキストノードも微妙にトグル変化させるようにした。

2 Javascript文

ブラウジングメニューに関するスクリプトは膨大にあるので、その全てについてここで触れることは適当ではない。要点のみを記す。

Memo:拡張パン屑リスト(2)──CSS編──

次に拡張パン屑リストのCSSについてまとめておく。

ここに、拡張パン屑リスト内に取り込んだブラウジングメニューのスタイルシートについても簡単に触れておく。

breadCrumbsList用スタイル設定
  • 四周に余白を設けるためのmargin設定は、Mac版IEのバグを考慮して短縮形による設定を避けた。
  • borderについては特に記すほどのことはない。
  • paddingは文字と四周の罫線の隙間を設定しただけである。
  • 背景色指定はタイトル部の太い帯と同一色とした。
clone階層メニュー用スタイル設定

階層メニュー用のスタイル設定は、cloneの本体である階層メニューに対して沢山設定してあるので、そのclass設定はそのままclone階層メニューにも適用できることになる。ここでは、本体の階層メニューに対するスタイル設定については割愛し、cloneの為に新たに設定したスタイル設定だけを記述した。

  • 当然絶対配置指定が必要である。
  • このエレメントのdisplay初期値は隠蔽とする。

以上でパン屑リストのCSSは完了である。リンク部分の表示をどうするかちょっと悩んだが、このブログ全体に適用している設定をそのまま引き継ぐことにしたので、特に定めなかった。

Memo:拡張パン屑リスト(1)──HTML編──

今後のために、Myパン屑リストのHTML、CSS及びJavascriptについて整理しておく。まずはHTMLから。

HTML文

  • まずパン屑リスト用の固有の not_index_area を設けた。我がテンプレートにおけるindex_area ではパン屑リストは必要ないからだ。設置位置は当然エントリイタイトルの上になる。このarea内に必要となるパン屑リストのためのHTML文を挿入した。
  • 次に適当なid名を持つdiv要素を設ける。CSSでパン屑リストのレイアウトと表情を設定するために必要となるからである。ここではパン屑リストを直訳してbreadCrumbsListとした。
  • 設置したbreadCrumbsList div要素の中に、パン屑リスト用のHTML文を挿入するだけでパン屑リストHTML文は完成だ。
  • 以上のHTML文を以下に記載しておく。(※ ここに括弧数字はこの場の説明用であって、HTML文内には不要である)

HTML文各行説明

  • (1):ホームページ(=トップページ)へのリンク
  • (2):固定リンク表示(個別エントリイ表示)の場合のパン屑リスト
  • (3):カテゴリイ表示の場合のパン屑リスト
  • (4):月別/日別の場合のパン屑リスト
  • (5):検索結果表示の場合のパン屑リスト
  • (6):コメント修正画面の場合のパン屑リスト

謝辞

上記方法によるパン屑リストは、phpbbのこちらのやりとりにおけるpinoさんの回答をを全面的に援用させていただいた。pinoさんに感謝!!

追記

  •  ブログブラウジング用の階層メニューは、HTML、CSS及びJavascriptが一体となって機能しているため、HTML文だけ記述しても何の意味もない。別途切り離して記述したい。
  •  日別表示の場合には月別表示と異なるパン屑リストが必要となる。しかし、上記HTML文では日別表示には対応していないし、そもそもHTMLで日別表示の場合のパン屑リストを作ることは出来ないと判断した。そこで日別表示の場合には、Javascriptによって独自のパン屑リストに置き換えるようにしている。  その内容も別途記述することにする。

拡張パン屑リスト

これまでスレッドテーマへの投稿を極力行ってきたが、スレッド自身がころころ変わるので面倒だ。今後は投稿はやめることとする。

さて、パン屑リストを作成した結果、その片隅にブログ全体を閲覧するメニューが欲しいとの思いを強くし、ここ数日格闘を続けてきた。それが今日やっと完成したので、記録しておきたい。

拡張パン屑リスト画像
拡張パン屑リスト画像

それは一般的に言われるJavascriptによる階層メニュー(プルダウンメニューとも呼ぶらしい)であるが、次のような大きな特徴を持っている。

その特徴とは既にこのブログ内に存在している階層メニューをDOMを使って複製(cloneNode)して配置したことである。

そのため、clone元のHTML文随所にちりばめられているid定義を、DOMによって異なるネーミングに変更してid重複を避ける、という荒技を使う必要に迫られ何とかそれを実装した。

Firefoxでは正しくHTML内の改行1つ1つをNodeと解釈するが、IEにおいてはそれはNode扱いとならないため、ここでもまた、ブラウザ毎のDOM実装の差異を考慮してスクリプトを組まざるを得なくなった訳で、それ故に困難さが増した。

一言で言えば、多大な時間を要したのは特殊な解釈をしてしまうIEのDOM仕様との格闘に明け暮れたためだ。

なお、拡張パン屑リストの完成序でに、not_permanent_area表示時において、そのGroupに属するエントリイ一覧を表示するようにした。Top頁=Index頁において実現しているタイトルだけの一覧を各Group表示の最上部に配置したのだ。ここにおいて、Index頁同様に、エントリイタイトルにonmouseoverすると、本文の要約(200文字)を表示(<%topentry_discription>単変数)する仕様としたことは言うまでもない。

以上が拡張パン屑リストのあらましであるが、これだけではどの様に作成されているのか、後で辿ろうと思った時の記録としては余りに一般的・抽象的すぎる。そこでその構造をここに記録しておき、後の反芻・反省・記録呼び覚まし等々に活用することにしたい。とはいえ、今晩は疲れ切ったので機会を改めて総括することにしよう(苦笑)。

 90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

 多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

 StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

 クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

 起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

 ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

 無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

 画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

 複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

 Animation Gifファイルを作れる無料ソフト。

 キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

 画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

 名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

 ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

 AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

 IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

 利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

 WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

 自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

 DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。

----------
200511191430
200511120203
200511112137
200511110131
200511090001
FC2 Management
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。