Ellinikonblue.com PukiWiki - Program Archive

AmazonStore
by amanatu

　プログラマで飯を食っていくことをとうの昔にあきらめた人間が、気まぐれで作った成果物の集積場です。

　blosxom のプラグインもいくつか作っておりますが、これらについては blosxom のページをご覧ください。ここではそれ以外の成果物を掲載していきます。

↑

JavaScript †

↑

折りたたみナビゲーション †

　JavaScript を用いた折りたたみナビゲーションです。ブログなどのレイアウト的にごちゃつきやすいサイドバーナビゲーションなどで、必要に応じて開閉するブロックを実現します。

　実際の動作例は当方の以下のブログをご覧ください*1。

導入方法

　以下にある FoldNavigation.js のリストをコピーして保存し、アップロードします。

FoldNavigation.js 全リスト

function FoldNavigation( keyID, mode ) {
  var prefix   = false; // ナビゲーションコントロールの位置（ true: 前 false: 後ろ）
  var naviMark = { open: '[+]', close: '[-]' }; // ナビゲーション用マーク

  var caption = document.getElementById( keyID + 'name' );
  var element = document.getElementById( keyID + 'list' );

  if ( !caption || !element ) return;

  var insString = '<a class="__foldmark" href="#" onclick="';
  insString += "FoldNavigation('" + keyID + "', 'chng'); return(false);";
  insString += '" onkeypress ="';
  insString += "FoldNavigation('" + keyID + "', 'chng'); return(false);";
  insString += '">';
  insString += ( mode == 'off' ) ? naviMark['open'] : naviMark['close'];
  insString += '</a>';

  if ( !element.style.display ) {
    if ( prefix ) {
      caption.innerHTML  = insString + caption.innerHTML;
    } else {
      caption.innerHTML += insString;
    }
    element.style.display = ( mode == 'off' ) ? 'none' : 'block';
  } else if ( mode == 'chng' ) {
    var e = caption.getElementsByTagName('a');

    for ( var i = 0; i < e.length; i++ ) {
      if ( e[i].className == '__foldmark' ) {
        e[i].innerHTML = ( element.style.display == 'none') ? naviMark['close'] : naviMark['open'];
      }
    }

    element.style.display = ( element.style.display == 'none') ? 'block' : 'none';
  }
}

　次にページの最初に以下のコードを追加して、上記 FoldNavigation.js をページがロードされたときに読み込まれるようにします。

<script type="text/javascript" src="http://www.yourdomain.net/javascript/FoldNavigation.js"></script>

　ページ内に以下のような構造の部分を作ります。

<div id="abcname">CAPTION</div>
<div id="abclist">
：（略）
</div>

　その上で、下記のように関数 FoldNavigation をページの最後に呼び出すと、上記のような構造であれば、文字列「 CAPTION 」の後ろ（もしくは変数 prefix の値を true にすると前）に折りたたみナビゲーション用のリンクが付加され、ID が abclist となっているブロック要素が折りたたまれ（もしくは開かれ）ます。

<script type="text/javascript" language="javascript"><!--
  FoldNavigation('abc' ,'on' );
//--></script>

　関数 FoldNavigation の第一引数はキーとなる識別子で、例えば上記のように abc と言う文字列を指定すると ID が「 abcname 」となっているブロック要素内に折りたたみナビゲーション用のリンクが付加され、ID が「 abclist 」となっているブロック要素部分が折りたたまれる対象となります。

　第二引数で初期の折りたたみ状態を指定します。「 off 」とするとページがロードされた初期状態で折りたたまれて表示されます。「 on 」とする*3と開いた状態で表示されるようになります。

↑

AJAX 折りたたみナビゲーション †

　JavaScript を用いた折りたたみナビゲーションの AJAX （風味）版です。script.aculo.us のブラインドダウン／ブラインドアップの効果を利用しています。

このため、別途

の必要*4です。

導入方法

　prototype.js および script.aculo.us をインストールして、下記にある ajaxFoldNavigation.js もコピーしてアップロードします。

ajaxFoldNavigation.js 全リスト

// script.aculo.us 効果用引数
Effect.DefaultOptions = {
  transition: Effect.Transitions.sinoidal,
  duration:   0.5,   // seconds
  fps:        60.0,  // max. 60fps due to Effect.Queue implementation
  sync:       false, // true for combining
  from:       0.0,
  to:         1.0,
  delay:      0.0,
  queue:      'parallel'
}

// AJAX Fold Navigation 本体
var ajaxFoldNavigation = {
  prefix:   false, // ナビゲーションコントロールの位置（ true: 前 false: 後ろ）
  naviMark: { open: '[+]', close: '[-]' }, // ナビゲーション用マーク

  init: function( keyID, mode ) {
    var insString = '<a class="__foldmark" href="#" onclick="';
    insString += "ajaxFoldNavigation.ShowHide('" + keyID + "'); return(false);";
    insString += '" onkeypress ="';
    insString += "ajaxFoldNavigation.ShowHide('" + keyID + "'); return(false);";
    insString += '"></a>';

    var element = $( keyID + 'list' );
    if ( this.prefix ) {
      $( keyID + 'name' ).innerHTML = insString + $( keyID + 'name' ).innerHTML;
    } else {
      $( keyID + 'name' ).innerHTML += insString;
    }

    element.style.display = ( mode == 'off' ) ? 'none' : 'block';
    this.setNaviMark( keyID );
  },

  ShowHide: function( keyID ) {
    var element = $( keyID + 'list' );

    if( element.visible() ) {
      options = {
        afterFinish: function(effect) {
          ajaxFoldNavigation.setNaviMark( keyID );
          Element.hide(effect.element);
        }
      };
      Effect.BlindUp(element, options);
    } else {
      options = {
        afterFinish: function(effect) {
          ajaxFoldNavigation.setNaviMark( keyID );
          Element.show(effect.element);
        }
      };
      Effect.BlindDown(element, options);
    }
  },

  setNaviMark: function( keyID ) {
    var elements = $( keyID + 'name' ).getElementsByClassName('__foldmark');

    elements[0].innerHTML =
      ( $( keyID + 'list' ).visible() ) ? this.naviMark['close'] : this.naviMark['open'];
  }
}

function FoldNavigation( keyID, mode ) {
  ajaxFoldNavigation.init( keyID, mode );
}

　次にページのヘッダ部分で下記のように

<script type="text/javascript" src="http://www.yourdomain.net/javascript/lib/prototype/prototype.js"></script>
<script type="text/javascript" src="http://www.yourdomain.net/javascript/lib/scriptaculous/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://www.yourdomain.net/javascript/ajaxFoldNavigation.js"></script>

　prototype.js、script.aculo.us、 ajaxFoldNavigation.js を順次読み込むようにすれば、先述している FoldNavigation.js と設置および呼び出しはまったく同様方法で、AJAX な感じの折りたたみナビゲーションを実現できます。

カスタマイズ

　上記で紹介した折りたたみナビゲーションでは以下に示す方法で、簡単なカスタマイズができます。

ナビゲーションマークの位置: 　ajaxFoldNavigation オブジェクト内の変数 prefix の初期値は false になっていますが、これを true として、ナビゲーションマークの位置をキャプション文字列の前に付加することができます。

ナビゲーションマークの変更: 　ajaxFoldNavigation オブジェクト内の配列 naviMark の値を変更することで、ナビゲーション用のマークをカスタマイズできます。閉じているときのマークを添字 open の値として、開いているときのマークを添字 close の値として設定してください。初期値は 8 ビットの半角文字を使用していますが、全角文字でもかまいません*5。またプログラムでは naviMark に設定した文字列を、キャプション文字列に付加しているだけですので、以下のように直接 img タグを記述することで、ナビゲーションマークを画像にすることもできます。

naviMark: { open: '<img src="http://www.yourdomain.net/image/openmark.png" />',
  close: '<img src="http://www.yourdomain.net/image/closemark.png" />' }, // ナビゲーション用マーク

↑

RSS リスティング †

　Eillinikonblue.com のトップページで使用している指定されたサイトの RSS を取得してリスト表示するためのスクリプトです。

　このスクリプトを使用するためには、事前に以下のプログラム、およびライブラリを導入しておく必要があります。

UnderDone で公開されている「中継君」
Kawa.net xp で公開されている「 JKL.ParseXML 」

導入方法

　下記にある ajaxRSSListing.js をコピーして、ajaxRSSListing オブジェクト内の jc_url の値を、中継君へのパスに適宜変更して、アップロードします。

ajaxRSSListing.js 全リスト

var ajaxRSSListing = {
  jc_url: "http://www.yourdomain.net/cgi-bin/jc/jc.cgi", // 中継君 URL
  titleLength: 16,
  numList: 5,

  getRSS: function( id, url ) {
    if ( this.jc_url ) {
      url = this.jc_url + '?' + url;
    }
    var rss  = new JKL.ParseXML( url );

    var func = function( data, arg ) {
      ajaxRSSListing.onloaded( data, arg );
    };

    rss.async( func, id );
    rss.parse();
  },

  onloaded: function( rss, id ) {
    var data = "";
    var j = 1;

    for ( var i in rss["rdf:RDF"].item ) {
      var date = rss["rdf:RDF"].item[i]["dc:date"].split("T")[0];
      var time = rss["rdf:RDF"].item[i]["dc:date"].split("T")[1].split("+")[0];

      date = date.split("-")[0] + '/' + date.split("-")[1] + '/' + date.split("-")[2]; // 日付フォーマット
      time = time.split(":")[0] + ":" + time.split(":")[1];                            // 時間フォーマット
      data += date + ' ' + time;
      data += ' <a href="' + rss["rdf:RDF"].item[i].link + '">「';
      if ( rss["rdf:RDF"].item[i].title.length > this.titleLength ) {
        data += rss["rdf:RDF"].item[i].title.substr( 0, this.titleLength - 1 ) + '...';
      } else {
        data += rss["rdf:RDF"].item[i].title;
      };
      data += '」</a><br />';

      if ( ++j > this.numList ) break;
    }

    document.getElementById( id ).innerHTML = data;
  }
}

function rssListing( id, url ) { // 呼び出し用のエイリアス関数
  ajaxRSSListing.getRSS( id, url );
}

　次にページのヘッダで

<script type="text/javascript" src="http://www.yourdomain.net/javascript/lib/jkl-parsexml.js"></script>
<script type="text/javascript" src="http://www.yourdomain.net/javascript/ajaxRSSListing.js"></script>

　と言うように JKL.ParseXML 、ajaxRSSListing.js を順次読み込むようにします。

　ページ内には以下のような構造の部分を用意します。

<div id="blog">Now Reading...</div>

　最後に、ページの最後で

<script language="javascript" type="text/javascript"><!--
  rssListing( 'blog', 'http://www.yourdomain.net/blog/feed.rss' );
//--></script>

として呼び出しを行うと、先ほどの div ブロックの部分に指定したフィードの情報が表示されます。

カスタマイズ

　ajaxRSSListing オブジェクト内の変数 numList の値でリスティングするエントリの数を変えられます。また titleLength の値で、リスティング表示される際のタイトル文字列の長さを指定できます。

↑

*1 すでに後述する AJAX 版を使用している場合があります
*2 他のブログと違って実験的意味合いの強いページです。安定した閲覧は保証できませんし、全然別の実験をしていたりすることもあります。ご了承ください
*3 特に「 off 」以外であれば何でもいいんですが…
*4 Jun 12, 2008 現在、当方では script.aculo.us は v1.8.1 、prototype.js は script.aculo.us に同梱されていた v1.6.0.1 を使用しています
*5 その際は JavaScript ですので、UTF-8 で保存するようにしてください

[ トップ ] [ 編集 | 凍結 | 差分 | バックアップ | 添付 | リロード ] [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

Program Archive

Ellinikonblue.com

最新の20件

Ellinikonblue.net

Turf Watch

Program Archive †

JavaScript †

折りたたみナビゲーション †

AJAX 折りたたみナビゲーション †

RSS リスティング †

参考書籍 †

リンク集 †

JavaScript/AJAX 関連 †

その他 †