Crimson Report

<< プレパゲ・ネクパゲ【3】 | パン屑ナビ【4】 >>


スポンサーサイト

Fri 18 11, 2005

Permalink : http://sug.jugem.cc/?eid=

一定期間更新がないため広告を表示しています

| posted at | filed under - | - | - |

Latest entry


パン屑ナビ【3】

Thu 18 11, 2004

Permalink : http://sug.jugem.cc/?eid=193

じゅげむのオリジナルメニューの1リストごとに別ページを作るのはアレなんで(だいいち面倒くさい)同系列のものはまとめて表示させることにする。

  • アバウト [ 元からあるプロフィール ]
  • ログ [ {calendar} + {archives_list} ]
  • カテゴリ [ {category_list} ]
  • ボイス [ {recent_comment_list} + {recent_trackback_list} ]

以上、マルチユーザー用のプロフィール欄は計3つ使った。これらのページを開いた場合に仮想の階層が2になり、通過して開いたページの階層を3とするわけである。

メニューの文字列の作成

パン屑メニューの通例は、親階層にはリンクが張られ現在位置はノーマルな(または強調された)文字列だ。その基本に従って作成する。前回のコードの場合は以下のようにすればよい。

<script type="text/javascript">
<!--
function getEL(id) {
if (document.getElementById) return document.getElementById(id);
else if (document.all) return document.all(id);
}

if ( document.URL.indexOf("pid=2") > -1 ) {
getEL('pankuzu').innerHTML = '<a href="./">ホーム</a> &gt; ログ'
// pankuzu はパン屑ナビを表示する要素のID
getEL('archivesarea').innerHTML = getEL('archives').innerHTML;
}

//-->
</script>

この、アドレス判定・文字列作成・実際の表示をセットにして中継ページ分だけ分岐させる。さて、いっけんこれでOKなように思えるが、最適化の余地がある。ここからは、得意の脱線です。実際にこのスクリプトを使わなくても、自分で何かをプログラムしたいと思ったときに役に立つかもしれない話。

スクリプトの最適化あるいは効率UP

まずはスクリプトの動作を順を追ってみてみる。

if ( document.URL.indexOf("pid=2") > -1 ) {

アドレスに目的のページ"pid=2"が含まれているか判断している。この判定だけならページの読み込みが始まった直後(アドレス確定後)で可能である。グローバル変数に入れておいて後で参照すればよい。

getEL('pankuzu').innerHTML = '<a href="./">ホーム</a> &gt; ログ'

パン屑ナビを表示する要素に文字列を挿入。これは該当IDが現れた直後に呼び出すのが効率的。パン屑ナビが表示されていれば、ユーザは上部階層ページへの移動が可能になる。実際のメニューのコピー&ペーストが行われたかどうかとは無関係に独立させることができる。

getEL('archivesarea').innerHTML = getEL('archives').innerHTML;

メニューのコピー&ペースト部分。この動作だけはオリジナルのメニューが読み込まれるまでは呼び出せない。

すべてをひとつのスクリプトタグ内に記述してしまうと、この時点までパン屑ナビも空白のままになってしまう。アドレス判定の分岐数が増えればさらに停滞するだろう。

このような場合、呼び出せるタイミングがまちまちなのでスクリプトを分割した方がユーザのストレスは少なくなる。うちのような小規模なページでは微小なタイムラグでも、長文のサイトやメニューアイテム数が多いサイトでは軽快感に大きな差がでると思う。

また、HTMLを書く時にスクリプトの概要とあわせて、要素の出現の順序を考えておくのも有効である。例えば軽いテキストメニューならトップに配置するとか、重い処理や画像を使ったメニューなら、より後のほうに配置してエントリなどのテキスト部を先に読ませる、などだ。

デザインの意訳は設計なのである。

| posted at 21:37 | filed under Memo | comments(2) | trackbacks(0) |


スポンサーサイト

Fri 18 11, 2005

Permalink : http://sug.jugem.cc/?eid=

| posted at | filed under - | - | - |


Comments & Trackback

  1. - : 管理者の承認待ちコメントです。

  2. - : 管理者の承認待ちコメントです。


Search this site

about this site

Categories

Archives

Appddix