折り畳みで「続きを読む...」

折り畳みタイプの「続きを読む...」機能を実現するためのjavascriptです。ようやく「こんな感じならまあいいかな」と思えるレベルになってきたので、いつものように暫定公開することにしました。
　
（追記　2004-09-21：）
　
軽量化版を作ったので、そちらをまずお試し下さい_(._.)_
　
→facet-divers: 折り畳みで「続きを読む」(軽量化版)

----

* 概略

この "折り畳みで「続きを読む」" javascript を設置すると、『本文』の一段落目が「導入部/概要」となり、それ以降の段落が「続き」として扱われるようになります。「続き」の部分は、ページ読み込み時に折り畳まれて非表示になります。

それと同時に、「導入部/概要」と「続き」の間が「折り畳み線」のような感じになり、「続き」が非表示になっている時にはそこに「[続きを表示]」というリンクが表示されるようになります。このリンクをクリックすることで「続き」を展開表示できるようになる、といわけです。

また、記事の最後には「[続きを隠す]」というリンクが生成されるので、続きを読み終った後に折り畳みなおすこともできます。

さらに、記事内で水平線(hrタグ)を使えば、一段落目の直後に限らず、任意の場所を「折り畳み線」として指定することもできるようになっています。

以上が基本機能ですが、その他のオプション機能も結構豊富にあります。

# 私のように、たらたらと長い記事が多い人にとっては、非常に使い勝手のあるscriptですね〜(^^;。

----

* 動作状況

このjavascriptのブラウザ別の動作状況は、以下の通りです。

- Mozilla Firefox 0.8 [Linux/Mandrake 9.2/Gnome 2.4]で作ってます。
- Internet Explorer 6 [Windows XP]では、ほぼ問題無く動作しているようです。
- Opera 7.23 [Win XP] や Opera 7.53 [Linux] では、折り畳みは動作していますが、肝心の[続きを表示]リンクがでません。 何故でしょう？(T_T) また、ボタンが変な形なのも従来通りです_(._.)_。その他にも大量のエラーがでているみたいなので、順次調整しつつバージョンアップしていきたいと思っています。
- Galeon [Linux]でも大体動いているような感じでした。
- Konqueror [Linux]は、動いていた時もあったんですが、公開時点ではまた動作しなくなってしまいました。

その他の環境での動作状況は、分かり次第追加していきたいと思います。動作確認報告、いつでも大歓迎です！

----

* 設置方法

試していませんが、Typepad系のHTML構造を持つページなら設置できそうな気がします（ポイントはh3タグとpostedクラスを持つpタグなので、MTなども調整すれば使えるようになりそうな気がします。seesaaも可能性ありますね）。時間があればMTでも試してみようかなとも思っていますが、誰か試してみて結果を教えていただければ幸いです(^^)。

また、元々の「続きを読む」機能を既に使っている記事がある場合のことも考えて作ったつもりですが、なんとなくまだ問題が沢山残っているような感じがしますので、その辺りの具合も教えていただけたらなあと思っています。

まだココログベーシックでしか試していないので、以下とりあえず、それに限定した設置方法を書きます。

＞＞＞ (2004-06-17) ブログ人でも動いたようです。
ぴっくあっぷ＠blogzine： 折り畳みで「続きを読む...」スクリプト
# ぴっくあっぷ。さん、ありがとー(^^) ＜＜＜

** ココログの場合

マイリスト設置タイプです。あらかじめ『テキスト表示』に設定した『マイリスト』の『メモ欄』に、以下の「呼び出しスクリプト」をコピー＆ペーストして保存してください。ただし、いつものように『右サイドバー』限定ということで。_(._.)_

+ リンクタイプの『マイリスト』を作成してください。リストの名前は、「<-- scripts -->」などなんでもOKです。作成時に『このリストをウェブログまたはプロフィールページで表示する』をクリックし、自分のウェブログに追加しておきます。

+ 『設定』画面に移り、そこにある『高度な設定』で『メモの表示』を『テキスト表示』に設定ておきます。
+ 『管理』画面に戻り、『項目を追加』します。『メモ』欄に以下の「呼び出しスクリプト」をコピー＆ペーストし、『追加』をクリックして保存すれば設置完了です。
+ サイドバーが二つある場合は、『ウェブログ』の『デザインの編集』画面から『現在選択されているテンプレートセット』の『並べ方』編集画面に移動し、作成したマイリストを右サイドバーに移動させてください。

<script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/foldContent01a.js">
</script>
<script type="text/javascript">
<!--
foldContent();
//-->
</script>

以上で、「導入部/概要」（一段落目）の直後に「[続きを表示]/[続きを隠す]」リンク（＆「▽/△」ボタン）が自動生成され、「続き」部分がページ読み込み時に折り畳まれて非表示になるはずです。

＞＞＞ 追記 2004-06-17 ＞＞＞

いろいろカスタマイズしたりオプション機能を追加する場合は、次の方法の方が後々便利かもしれません。

+ スクリプト本体をダウンロード。 foldContent01a.js
+ 44行目にある//foldContent();の//を取り除き、アップロード。
+ 上記の「呼び出しスクリプト」の代わりに、以下をコピペし、http://facet.cocolog-nifty.com/divers/の部分をアップロード先のURLに変更してください。

<script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/foldContent01a.js">
</script>

＜＜＜ 追記ここまで ＜＜＜

# リンクのテキスト部分が[続きを読む]じゃなくて[続きを表示]なのは、記事別ページにジャンプするのかその場で展開表示されるのかが分かりにくいかなと思ったためです（ちなみにテキスト部分はカスタマイズ可能です）。

# また、「▽/△」ボタンは、「[続きを表示]/[続きを隠す]」リンクと全く同じ機能を果たすんですが、その場で開閉できることがより分かりやすくなるかなと思い、ボタンも同時に表示するようにしました（ボタン内のマークもカスタマイズ可能です）。

----

* 水平線(hrタグ)の使い方

水平線は、一記事内で何回でも使用することができます。水平線が複数ある場合、「続きを読む」リンクをクリックすると次の水平線までが展開表示され、そこに新たに「続きを読む」リンクが表示されるような実装になっています。最後の「続き」を展開すると「続きを隠す」リンクが現れます。それをクリックすると、全ての「続き」部分が一度に折り畳まれ、「導入部/概要」だけ表示する初期状態と同じ状態に戻ります。

# この記事のように、水平線があまり多いと使いづらいかも(^^;

水平線(hrタグ)で折り畳むようにする方法は、記事を作成する際の『テキストフォーマットの初期設定』の設定状況により異なります。

** 『テキストフォーマットの初期設定』が『なし』の場合

特にすることはありません。ただし、「折り畳み線」にしたい水平線（hrタグ）は、他のタグで囲まずに記述するようにしてください。

** 『テキストフォーマットの初期設定』が『改行を反映させる』の場合

ココログではこれがデフォルトなんですが、このモードで記事を作成すると、タグの付いていない段落は全て自動的にp要素に変換されます。したがって、hrタグを書いてもHTMLソース的に見るとpタグで囲まれた形となりますので、hrタグを「折り畳み線」として使うことはできません。

この場合、後述のオプション機能にある「特定キーワードで始まる段落を対応するタグに変換する機能」をオンにしてください。こうしておくと、「----（半角マイナス４つ以上）」で始まる段落を、自動付加されるpタグを取り除いてhrタグに変換してくれるので、そこが折り畳み線として使えるようになります。

----

* カスタマイズ方法

カスタマイズできる部分は、下記の通りです。

- [続きを表示]/[続きを隠す]リンクのテキスト
- ▽/△ボタンのマーク
- ▽/△ボタンのスタイル
- onMouseOverで▽/△ボタンが迫り上がるように見せるかどうか

カスタマイズするには、「呼び出しスクリプト」のfoldContent();という一行の前に、カスタマイズのための記述（代入文）を挿入します。挿入後の「呼び出しスクリプト」は、下記のようになります。

<script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/foldContent01a.js">
</script>
<script type="text/javascript">
<!--
showSequelText = '[続きを表示]';
hideSequelsText = '[続きを隠す]';
showSequelButtonMark = '▽';
hideSequelsButtonMark = '△';
sequelButtonStyle = "padding:0px;margin:0px;width:1.4em;height:1.4em;line-height:1em;text-align:center;float:right;";
riseSequelButtonOnMouseOver = true;
//
foldContent();
//-->
</script>

挿入した各行の右辺を変更することでカスタマイズできます。

＞＞＞ スクリプト本体を自分のところにアップした場合は、直接スクリプト本体の最初の方を編集して再アップすることで反映してください。 ＜＜＜

各行の意味は、以下の通りです。

- 〜Textの２行：[続きを表示]/[続きを隠す]リンクのテキストの指定
- 〜Markの２行：▽/△ボタンのマークの指定
- sequelButtonStyleの行：▽/△ボタンのスタイルの指定
- riseSequelButtonOnMouseOverの行：onMouseOverで▽/△ボタンが迫り上がるように見せるかどうかの指定

最初の４行では、引用符内を書き換えてください。

# もしかしたら、上記のような文字列だけでなく、HTML（たとえばimgタグなど）も使えるかもしれません。

sequelButtonStyleは、上記のように、CSS記法に従って記述します。ここも引用符内を書き換えてください。

riseSequelButtonOnMouseOverの右辺は、引用符なしのtrueかfalseで指定します。trueにすると、onMouseOver時だけ▽や△ボタンが迫り上がるようになります。falseにすると、sequelButtonStyleで指定した通りのスタイルの（普通の）ボタンになります。

----

* オプション機能

今回の "折り畳みで「続きを読む」" javascriptには、オプションとしてさらに以下のような機能があります。

- 小見出し一覧機能
- 「続き」の数の表示機能
- 特定キーワードで始まる段落を対応するタグに変換する機能
- 中央の本文エリア最上部に「表示モードスイッチ」を追加する機能
- 記事タイトル（見出しh3要素）に開閉スイッチを追加する機能
- 記事のフッターの下にスペーサー（div要素）を追加する機能

# 本ブログは、このjavascript公開時点ではこれらのオプション機能を全て使っています。

これらについての詳細は、長くなるので別の記事で書くことにします。

# できるだけ早く書きたいと思っていますが、興味のある方はとりあえず以下のリンクより外部javascriptを御覧下さい（script自体に全くコメントが付けられていないので分かりにくいとは思いますが、一応できるだけ意味のとれる英語を用いて変数や関数を記述するように努力していますので、だいたいの想像は付くのではないかなあと思いますが、いかがでしょう）。ご意見ご感想をいただければ幸いです。

foldContent01a.js

----

* 背景

ココログなどのブログには、トップページでは『概要』だけを表示させ、『続きを読む...』というリンクをクリックすると記事別（『固定リンク』先）ページに移動して「続き」を読ませるようにする、いわゆる「続きを読む」機能が元々備わっています。

# この機能を、以下、元々の「続きを読む」機能などと書きます。

# ココログベーシック自体にはその機能を実現するための方法が備わっていないため、別のツールを使ったりする必要があります。

一方、ページ読み込み時に「続き」の部分を折り畳んで非表示にしておき、『続きを読む...』リンクをクリックしたとき、その場で「続き」を展開表示してくれるタイプの「続きを読む」機能を使っているブログも巷にはあります。

# こちらは、開閉タイプの「続きを読む」機能と呼ぶのが一番しっくり来るように思いますが、ずっと「サイドバー折り畳み」スクリプトを作っている関係で、以下、折り畳みタイプの「続きを読む」機能と呼ぶことにします(^^;。

この、折り畳みタイプの「続きを読む」機能を使っているブログを見かけるたびに、「これ、いいな〜」と思ってました。こちらはjavascriptで実装されていますので、最初に見かけて以来、いつか私も作りたいなあと思ってきました。

実は以前、この折り畳みタイプの「続きを読む」機能の代替にならないかな〜と思いつつ、サイドバーだけじゃなく本文エリアも見出しで折り畳めるようなスクリプトを作ったことがあるんですが、使い勝手が非常に悪く、早々に使うのをやめてしまったことがありました。

それ以来ずっと、折り畳みタイプの「続きを読む」機能を実現するjavascriptを仕上げたいなあと思っていたんですが、先日、ぴっくあっぷ。さん経由で、ココログベーシックで折り畳みタイプの「続きを読む...」を実装された方がいたことを知り、よし、再挑戦しよう！と思い立ったというわけです。
→ ぴっくあっぷのめも: 2004.05.26
→ weblog.hikoboshi.mac: ココログ無料版でも『続きを読む』が欲しい！

それから約３週間。なかなか満足のいくレベルのスクリプトにならず、また駄目かなあと思っていたんですが、ようやく「こんな感じならまあいいかな」と思えるレベルになってきたので、いつものように暫定公開し、ご意見ご感想等を募集することにしました。