03 | 2017/04 |  05

  1. 無料サーバー

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

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

スポンサーサイト

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

 

複数エントリイにまたがるコンテンツの総合目次をスクリプトで挿入する

はじめに

複数のエントリイにまたがって或る長いコンテンツがあるとする。この場合、全体に共通する総合目次が存在すると閲覧しやすい。

そしてその総合目次は、どのコンテンツが今見ているエントリイに存在し、また別のエントリイにどんな項目が存在しているかを指し示すべきであり、別ページの項目にはリンクが貼られていることが望ましい。

以上の総合目次をスクリプトで挿入する方法を考えてみた。

この総合目次を実際に適用したエントリイは、上の関連エントリイリストで示した No.749~753 の 5 つだ。

それらのいずれかを開けば、実際にスクリプトによって挿入された総合目次をエントリイ最上部に見ることが出来る。

何故 Ajax を使わなかったか?

まず Ajax 通信を使おうと考えたが直ぐに止めた。答えは単純だ。使えないからである。

Fc2 ブログの場合、エントリイHTMLファイルが存在するサーバーと、アップロードしたファイルが存在するサーバーが異なっている。このため同一サーバー上のファイルにしか適用できない Ajax 通信はアップロードしたファイルを対象として使用できないのである。

もし、Ajax 通信が同じ Fc2 ドメイン内の異なるサーバー間でも使用できるならば、総合目次をアップロードしておいて、それを jQuery(要素).load(url) で当該要素内に読み込めば済む。しかし、駄目元で試したみたがやはり「期待通り」駄目だった。エントリイサーバーと異なるサーバーを対象として、エントリイ頁から Ajax 通信は出来なかった。

総合目次の HTML 文をスクリプト内に取込み、script をインクルードすれば良い

では、諦めて各エントリイに同一の総合目次 HTML 文を挿入するしかないのか?!─── Ajax 通信が不成功に終わった直後はそう考えた。

しかし、それでは余りに芸がない。何とかならないものかと思案していたら、ふと script タグによるインクルードならば、Ajax 通信と異なり、同一サーバー制限がないことを思い出した。

そうだ。HTML 文を Javascript 文で書いてしまって、全てをスクリプトで挿入すればよいのだ!

どっちみち HTML 文だけでは目的は達成できずJavascript コードを必要とするのだから、全てをスクリプト化してしまえば良いのだ!

こうして完成した総合目次は、エントリイ No.749~753 に掲載した。

▲ToTop

目次の HTML 文を取込みインクルード対象とした script について

極めて簡単なスクリプトであり、目次部分を変更すればいくらでも汎用的に使えるので、script を掲載し説明することとしたい。

■ Entry No.749~753 の総合目次の Javascript 文
// 目次を挿入する div 要素を取得し、ショートカットを作る。
// この要素もスクリプトで挿入しても良いが、可読性を高めるために敢えてエントリイ HTML 文
// 内に別途挿入することとした。なお、HTML文に挿入した div 要素はあらかじめ display:none
// としておく必要がある。
var $contents = $("div.posSizeContents");
// 個別エントリイ表示モードではない時には、必要なコメント文を挿入する。
if (/blog-entry.+html$/.exec(location.href)===null){
  $contents.html('<p class="ta_c">個別エントリイ表示モードの時のみ、ここに目次を表示します</p>').show();

} else { // 以降は個別エントリイモードの時にのみ適用されるブロック
// 変数 contents に総合目次のHTML文を登録する。
var contents ='<ol class="ml_0 pl_2 mt_0 mb_0">'+
'<li><a href="http://hkom.blog1.fc2.com/blog-entry-749.html" target="_blank">要素位置の測定と適正な配置──はじめに</a></li>'+
'<li><a href="http://hkom.blog1.fc2.com/blog-entry-750.html" target="_blank">コード解説(1) jQuery.offset</a></li>'+
'<li><a href="http://hkom.blog1.fc2.com/blog-entry-750.html" target="_blank">コード解説(1) jQuery().offset</a></li>'+
'<li><a href="http://hkom.blog1.fc2.com/blog-entry-751.html" target="_blank">コード解説(2) jQuery().position</a></li>'+
'<li><a href="http://hkom.blog1.fc2.com/blog-entry-751.html" target="_blank">コード解説(2) jQuery().offsetParent</a></li>'+
'<li><a href="http://hkom.blog1.fc2.com/blog-entry-752.html" target="_blank">コード解説(3) jQuery().scrollLeft</a></li>'+
'<li><a href="http://hkom.blog1.fc2.com/blog-entry-752.html" target="_blank">コード解説(3) jQuery().scrollTop</a></li>'+
'<li><a href="http://hkom.blog1.fc2.com/blog-entry-753.html" target="_blank">コード解説(4) jQuery().innerHeight</a></li>'+
'<li><a href="http://hkom.blog1.fc2.com/blog-entry-753.html" target="_blank">コード解説(4) jQuery().innerWidth</a></li>'+
'<li><a href="http://hkom.blog1.fc2.com/blog-entry-753.html" target="_blank">コード解説(4) jQuery().outerHeight</a></li>'+
'<li><a href="http://hkom.blog1.fc2.com/blog-entry-753.html" target="_blank">コード解説(4) jQuery().outerWidth</a></li>'+
'<li><a href="http://hkom.blog1.fc2.com/blog-entry-753.html" target="_blank">コード解説(4) jQuery().height</a></li>'+
'<li><a href="http://hkom.blog1.fc2.com/blog-entry-753.html" target="_blank">コード解説(4) jQuery().width</a></li></ol>';

// 正規表現作成
var  regExpr = /(http:.+entry-)([0-9]+)/,
// アドレス情報から今見ているエントリイの番号を取得
  thisEntryNo = Number(regExpr.exec(location.href)[2]);
// 用意した div 要素内に総合目次 HTML 文を挿入してから、a 要素を見つけ、
// 全ての a 要素を対象としてイテレート処理を施す。
$contents.html(contents).find("a").each(function(){
  // href属性値から エントリイ番号を取得して変数 No に代入する
  var No = Number(regExpr.exec($(this).attr("href"))[2]);
  // 取得した No が今見ているエントリイの番号と一致すれば、
  if (No===thisEntryNo){
    // 当該 a 要素の内容テキスト(つまりエントリイタイトル)を変数 txt に代入
    var txt = $(this).text();
    // a 要素の親要素に遡り、その中を空にしてから(つまり a 要素を削除してから)
    // 当該エントリイタイトル名称に「 ……このエントリイで解読します」を結合した
    // テキスト分を挿入する。
    $(this).parent().empty().html("<span class='pink'>"+txt + " ……このエントリイで解読します</span>");
  } else { // No !== thisEntryNo の時には
    // a 要素の後に「 ……別のエントリイ No."+ No +" で解読します」なるテキスト文を付加する。
    $(this).after("<span> ……別のエントリイ No."+ No +" で解読します</span>");
  }
}).end().show(); //総合目次を挿入した div 要素を非常時から表示に変更する
}

Ajax 通信に拘って総合目次を読み込む方法

上で示した方法よりも時間を要することになるが、Ajax 通信で同一のことを行う方法がないわけではない。

総合目次はエントリイタイトルとエントリイアドレスから構成されているのだから、これらの情報は目次を挿入したいエントリイと同一のサーバーにある。つまり、Ajax 通信の適用対象となる。

よって、総合目次のエントリイ情報を Ajax 通信で取得すればよいことになる。

実は、Ajax 通信によるエントリイ情報取得は、ナビゲータブロックで既に実施済みであり、このコードを一部手直しするだけで、ここで作成したエントリイNo. 749 ~ 753 の総合目次を作成することが可能ではある。

しかし、この方法の場合、エントリイタイトルをそのまま利用することになるので、目次項目を自由に加工した総合目次とするわけには行かない。

だから、ここでは敢えて HTML文を組み込んだ script をインクルードする道を選択したのである。

 

■ コメントの投稿 ■

管理者にだけ表示を許可する

●トラックバック●

■トラックバックURLはこちら■
http://hkom.blog1.fc2.com/tb.php/781-b79844ad

●参照元一覧●

<provided Fc2>
<provided i2i>

▲ToTop

 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が開きます。

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