Phantasy Garden

一応、こんな感じで。Javascriptで実装しているので、Javascriptが切られていると動きません。加えて表示の変更はCSSのスタイルに依存しているので、CSSを切られても意味が無くなってしまいます。JS+CSSなリッチクライアント環境のみ。シンクライアントな携帯電話のブラウザとか、JSかCSSの一方が使えない時はだらだら〜と表示されるだけ。Ajaxな感じで必要に応じて適宜読み込む、とかじゃないんで。

この実装に苦心したのは、「今までの文章構造をいかに変更せずに実装するか」という点です。なので、今までの書き方でも今まで通り表現されること、追加としてはdivタグのみで実装すること、が条件でした。しかもdivはできるだけ簡潔にという制限付き。

実際に文章に書き加えるのは、「続きを読む」としてまとめたい文章を<div class="more"></div>で囲むだけ、という簡潔さ。無論、外部スクリプトを呼び出すためのscriptタグは必要ですけど。onclick属性もstyle属性も排除。やっぱプログラミングで実装すれば楽だわ。

で、その「続きを読む」本体はreadmore.jsとして、以下の通り。

// 特定のオブジェクトにイベントを追加
function addEvent(node,evt,func){
  // イベント追加のプロパティ判別      
  if(node.addEventListener){
    node.addEventListener(evt,func,false);
  }
  else if(node.attachEvent){
    node.attachEvent("on"+evt,func);
  }
}

// 対象オブジェクトの抽出
function getTarget(e){
  // 対象オブジェクトのプロパティ判別
  if(e.target){
    return e.target;
  }
  else if(e.srcElement){
    return e.srcElement;
  }
}

// div.moreを検索しclickイベントを付加
function setHandler(){
  var divElements = document.getElementsByClassName('more');
  for(var i=0; i<divElements.length; i++){
    addEvent(divElements[i],"click",changeClass);
    // JSを切っている人のための対処
    divElements[i].className = 'less';
  }
}

// more/lessでclass名を入れ替える
function changeClass(e){
  var t = getTarget(e);
  switch(t.className){
  case 'more': t.className =  'less'; break;
  case 'less': t.className = 'more'; break;
  default:
    // 対象オブジェクトになければその親ノードも対象とする
    var pr = t.parentNode;
    switch(pr.className){
      case 'more': pr.className =  'less'; break;
      case 'less': pr.className = 'more'; break;
    }
  }
}

// ページ表示時にsetHandlerを動かす
addEvent(window,"load",setHandler);

ブラウザ毎の違いを吸収しながら、簡潔にclassの変更を行います。対応するCSSは以下の通り。

@charset "utf-8";
@import url(./text.css);

.less * {
  display: none;
}

.less:before {
  content: "続きを読む >>";
}

.more {
  border-top: 1px solid #000;
}

.more * {
  display: inherit;
}

.more:after {
  content: "<< 続きを隠す（文章クリックでもOK）";
}

text.cssが母体となるcssで、これはindexにおけるの「続きを読む」機能に特化させたindex.cssとなります。カスケードできるから対処がめっちゃ楽だ。

とまぁ、こんな感じで長い文章を折りたたんでおけるのがグッド。特にこういった情報処理系のコラムとかは、読む人を選ぶしね。カテゴリから選択する分には問題ないし、個別エントリ表示では「続きを読む」は要らないはず。あくまでindexでごちゃまぜに表示する際、余分な情報を表示させないため。データとしては既に余分な情報もダウンロードしているんだけど、それはシンクライアントなブラウザへの配慮。あとAjaxはまだ無理だし。

これで専門特化した話題も気にせず書いていけるね！