08 | 2017/09 |  10

  1. 無料サーバー

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

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

スポンサーサイト

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

 

jQueryを使ってブログエントリイの目次を自動作成する。

この上の目次は以下に述べるスクリプトにより自動作成されたものである。

このエントリイの後に、別のもっとクールな目次自動作成プラグインを作った。このため、このエントリでのみ 2 通りの目次が作成され、表示されるようにした。この他のエントリイでは新しい目次作成プラグインを使用するようにしたため、このエントリイでのみ旧バージョンとなってしまった目次作成プラグインを表示している。

なお、新しい目次自動作成プラグインについては、こちらで 触れている。

エントリイ目次の作成意義

私のブログエントリイは、各エントリイの文章が長くなる傾向にある。

そして長いエントリイの場合には、全体を概観する必要が生じるので目次があった方が良い。

しかも、その目次は或るルールに基づいて作成することにすれば、エントリイ毎に作らなくてもスクリプトで自動作成させることが可能だ。

そこで、jQuery を活用する簡単な例として作ってみた。

エントリイ目次のスクリプトによる作成方法

目次項目はヘッダー要素のコンテンツをピックアップすれば良く、それに頁内リンクを貼った上で箇条書き整形してから、エントリイ内に挿入すればよい。

なお、頁内リンクを貼るということは、リンク先となるヘッダー要素のコンテンツを a タグで包含しなければならず、その行為もスクリプトで自動的に行うべきだろう。

目次自動作成:makeContents メソッドコード

以下に makeContents コードとその各行説明を掲載したが、コードの要点を列挙しておきたい。

  1. makeContents メソッドは汎用性が高いプラグイン形式とした。
  2. このメソッドに 2 つの引数を用意した。これは、初期状態で目次を表示するか否かを指定し、また目次の背景色を自在に変更可能にするためだ。なお、2 つの引数の記述順は指定せず、いずれが先でもインタープリタが「正しく理解」できるよう工夫した。
  3. 初期状態で目次が表示されているか否かに応じて、目次表示/隠蔽ボタンの機能は変化するが、それを 1 つの toggle イベントハンドラーで扱うにあたり、ボタン背景色と slideDown/Up を交互に入れ替えるために配列の reverse メソッドを活用した。
  4. blur メソッドを使ってボタン要素にフォーカスが残らないようにした。
  5. 自作コードで初めて wrapInner メソッドを利用した。これは或るタグ要素内のコンテンツを、新たな子要素で囲む場合に重宝するメソッドだ。或る要素Aの子要素Bを新たな子要素Cを挿入してCの子要素(つまりAの孫要素)にする便利なメソッドである。
  6. $btn オブジェクトに見られるように jQuery インスタンスメソッドチェーンを多用した。メソッドチェーンは余りの便利さに快感すら覚える。これもまた jquery.js の醍醐味と言えよう。
    因みにここでチェーンしたメソッドは、順に .css、.prependTo、.toggle だ。しかもjQuery インスタンスメソッドの返値が jQuery インスタンス自身となることを利用して、チェーンメソッドが適用されている jQuery インスタンスを右辺に配置して、これを左辺の変数に代入することまで一つの式で実現した。
  7. 上で述べた jQuery インスタンスメソッドの返値を利用した式は、他の箇所でも多用している。変数 $contents や $h4 への代入式もまた、 jQuery インスタンスメソッド返値が jQuery インスタンスであることを利用している。
// makeContents メソッドをプラグインとして登録する。
(function ($){$.fn.makeContents = function(display,color){
  // 個別エントリイ表示モード以外の場合何もしない。
  if (!/.+blog-entry.+html$/.test(location.href)) (function(){return;})();
  else { // 個別エントリイ表示モードならば実行する
    $(function(){ // DOM ready イベントに登録する。
    // もし #contents 要素が存在すればそれを削除する。
    if ($("#contents").size()) $("#contents").remove();
    // ローカル変数定義
    var $entry, $contents, $h4, $btn, o = [], bgColor=
      // 目次ブロックの背景色を設定する。
      (typeof display==="boolean" && typeof color==="string" && color) 
      || (typeof color==="boolean" && typeof display==="string" && display)
      || "darkslategray";
    // エントリイ本体部分へのショートカット作成
    $entry = $("div.entry_body");
    // 目次を表示する ol 要素をスタイルシート付きでエントリイ
    // 最上部に挿入する。但し、コード進行が終了間際迄は非表示としておく。
    $contents = $("<ol id='contents' />").css({
      margin:"1em 2em",padding:"0.5em 2em",border:"1px dotted white",
      lineHeight:"1.1em",background:bgColor
    }).prependTo($entry).hide();
    // H4 ヘッダーコンテンツに id を付け、H4 ヘッダーコンテンツを
    // 頁内リンク付きの LI 要素として目次の OL 要素内に挿入する
    $h4 = $("h4",$entry).each(function(i){
      $(this).wrapInner("<a id='contents"+i +"'></a>");
      $contents.append(
        "<li><a href='#contents"+i+"'>"+$(this).text() +"</a></li>"
      );
    });
    // ボタン背景色と slide メソッドを配列に登録
    o[0]={btncolor:"pink",fn:function(){$contents.slideDown()}};
    o[1]={btncolor:"palegreen",fn:function(){$contents.slideUp()}};
    // 目次を最初に表示しない指定の場合、
    // 色と slide メソッドのセットを入れ替える。
    if (!display) o.reverse();

    // 目次の表示/隠蔽を操作するボタンをエントリイ本体上部に配置し、
    $btn = $("<button>目次の表示/隠蔽</button>").css({
      display:"block",background:o[0].btncolor,
      fontWeight:"bold",width:"150px",margin:"0 auto"
    }).prependTo($entry).toggle(function(){ // toggle イベントを登録する。
      // slide メソッドの実行。
      o[1].fn();
      // ボタンの背景色を変更する。
      $(this).css({background:o[1].btncolor}).blur();
    },function(){
      o[0].fn();
      $(this).css({background:o[0].btncolor}).blur();
    });
    // 目次表示モードが指定されている場合には、slideDown メソッドを実行する。
    if (display===true || color===true) $contents.slideDown();
  });}
}})(jQuery);
// makeContents メソッドを目次表示モード( true 指定 )で起動する。
$().makeContents(true);
//$().makeContents(); //エントリイ表示時に目次を非表示にする場合の指定
//$().makeContents(true, "navy"); //エントリイ表示時に目次を表示しその背景色をnavyにする場合の指定

 

■ コメントの投稿 ■

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

●トラックバック●

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

●参照元一覧●

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

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