本文と追記を切り替える Web2.0(折りたたみの先頭位置にジャンプ)

本文と追記を切り替える Web2.0(折りたたみの先頭位置にジャンプ)

Posted at January 27,2009 12:55 AM
Tag:[Customize, Folding, MovableType]

本文と追記を切り替える Web2.0」のカスタマイズで、切り替えたときに折りたたみの先頭位置にジャンプする方法を紹介します。

このカスタマイズは記事が長い場合(記事本文や追記がブラウザの縦幅に収まらない場合)に有効です。

折りたたみの機能概要については「本文と追記を切り替える Web2.0」をご覧ください。

1.サンプル

次のサンプルにある最初の記事の「続きを読む ≫」をクリックしてみてください。追記を表示すると、追記の先頭に移動し、「続きを隠す ≫」をクリックすると、「続きを読む ≫」の辺りに移動します。

本文と追記を切り替える(折りたたみの先頭位置にジャンプ)サンプル

2.script.aculo.us のインストール

script.aculo.us のページの「get it already!」の下にある「Downloads page」のリンクをクリック。

script.aculo.us のページ

次のページで「current version」の下にある「scriptaculous-js-1.7.0.zip(または拡張子が tar.gz / tar.bz2)」のリンクをクリック。バージョン 1.7.0 は2007年3月現在です。

script.aculo.us のページ

ダウンロードアーカイブを解凍して内容をサーバのメインページと同じディレクトリにアップロード。ここでは下記のような配置になっていることを前提に話を進めます。

/scriptaculous
   /lib
      prototype.js
   /src
      controls.js
      effects.js
      scriptaculous.js

scriptaculous というディレクトリは解凍後のディレクトリ名を変更しています。libsrc はアーカイブのままの構成です。src 配下にはここで利用しないファイルも含まれていますので、まとめてアップロードしておくといいでしょう。

3.テンプレートの修正1(HTMLヘッダ修正)

折りたたみをしたいテンプレートの編集画面を開き、</head> の直前に下記を追加します。

<script type="text/javascript" src="<$MTBlogURL$>scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>scriptaculous/src/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<$MTBlogURL$>scriptaculous/src/effects.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>scriptaculous/src/controls.js"></script>
 
<script type="text/javascript">
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'
}
function ajaxShowHide(entryID, url) {
  element = $('Text' + entryID);
  if(element.style.display == 'none') {
    options = {
        afterFinish: function(effect) {
            $('Link' + entryID).firstChild.innerHTML = '≪ 続きを隠す';
            Element.show(effect.element);
            location.href = url + '#Link' + entryID;
        }
    };
    Effect.BlindDown(element, options);
  } else {
    options = {
        afterFinish: function(effect) {
            $('Link' + entryID).firstChild.innerHTML = '続きを読む ≫';
            Element.hide(effect.element);
            location.href = url + '#Link' + entryID;
        }
    };
    Effect.BlindUp(element, options);
  }
  element = $('Body' + entryID);
  if(element.style.display == 'none') {
    options = {
        afterFinish: function(effect) {
            Element.show(effect.element);
        }
    };
    Effect.BlindDown(element, options);
  } else {
    options = {
        afterFinish: function(effect) {
            Element.hide(effect.element);
        }
    };
    Effect.BlindUp(element, options);
  }
}
</script>

6行目以降は script 開始・終了タグを外して外部ファイルにしても構いません(その場合インクルードするための script タグは effct.js をインクルードしている script 要素の下に記述してください)。

折りたたみ速度を変更する場合は、

duration:   0.5,   // seconds

の数値を変更します。0.5 はスライドアップ・スライドダウンに 0.5 秒かかることを意味します。
この Effect.DefaultOptions = { ... } の部分は scriptaculous ライブラリの設定の上書きですので、速度を変更しない場合はここから削除しても構いません。ちなみにデフォルトは1秒に設定されています。

4.テンプレートの修正2(追記文章表示用 MT タグ修正)

追記部分を修正します。デフォルトテンプレートと公開テンプレートの変更例を示します。

変更前(デフォルトテンプレート)

<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
<p class="entry-more-link">
   <a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>" &raquo;</a>
</p>
</MTIfNonEmpty>

変更前(公開テンプレート)

<MTEntryIfExtended>
<div class="entry-more">
   <a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>"</a>
</div>
</MTEntryIfExtended>

変更後(デフォルトテンプレート/公開テンプレート共通)

<div id="Body<$MTEntryID$>"><$MTEntryBody$></div>
<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
<div id="Link<$MTEntryID$>" class="ajax-entry-more-link"><a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="ajaxShowHide('<$MTEntryID$>', '<$MTEntryLink$>');return false;">続きを読む ≫</a></div>
<div id="Text<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
</div>
</MTIfNonEmpty>

ブログ記事アーカイブは下記の内容を利用してください。JavaScript が OFF でも追記部分が読めるよう、noscript タグで追記を表示するようにしています。

変更後・ブログ記事アーカイブ(デフォルトテンプレート/公開テンプレート共通)

<div id="Body<$MTEntryID$>"><$MTEntryBody$></div>
<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
<div id="Link<$MTEntryID$>" class="ajax-entry-more-link"><a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="ajaxShowHide('<$MTEntryID$>', '<$MTEntryLink$>');return false;">続きを読む ≫</a></div>
<div id="Text<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
</div>
<noscript>
<div id="more" class="entry-more"><$MTEntryMore$></div>
</noscript>
</MTIfNonEmpty>

上記のスクリプトは貼り付けた後、編集しても構いませんが、div 開始タグと a 開始タグの間に改行を含まないようにしてください(Firefox で正常に動作しなくなります)。

5.CSS

「続きを読む」「続きを隠す」のリンクに class 属性 ajax-entry-more-link を与えています。必要に応じて設定してください。

.ajax-entry-more-link {
    /* 任意のプロパティを設定 */
}

6.その他

HTML ページの1行目に XML 宣言がある場合、IE6 では動作がややスムーズではありません(開く瞬間と閉じた瞬間にビクッとなります)。サンプルの公開テンプレートは XML 宣言を外しています。

関連記事
トラックバックURL


コメント

はじめまして、ミノチャゲと申します。

こちらでご紹介されておられる追記部分の折りたたみを試したところ、ちゃんと機能することが確認できました。
私は追記部分を使用する目的はGoogle Maps APIの地図を表示する画面として利用したいからです。
しかし、追記部分おりたたみを適用して「続きを読む」をクリックしてGoogle Maps API による地図を表示した場合、通常は目的地(入力した住所)のマークが地図の中央にきますが、なぜか地図画面の右上の地図外の部分に移行しまうようになってしまうので、仕方なく折りたたみを適用した画面の中で地図を掲載するのはあきらめました。
なんとか目的地を通常通り画面の中央に表示することできないでしょうか?

[1] Posted by ミノチャゲ : August 15, 2009 10:40 AM

先ほどのコメント内容にミスがありましたので訂正します;

誤: なぜか地図画面の右上の地図外の部分に移行

正: なぜか地図画面の左上の地図外の部分に移行


以上、訂正させて頂きたきます。

[2] Posted by ミノチャゲ : August 15, 2009 10:43 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)