Bonjour!

« 2004年5月 | トップページ | 2004年7月 »

2004年6月

2004-06-29

Netscape 7.1での閲覧不具合について

このブログは、実験的にいろんなjavascriptを仕込んであるのですが、前回の記事のコメント欄で、とおりすがりさん(mailto:noname@noplace.com)からNetscape 7.1で見えないことをお知らせいただきました。自宅でのチェック結果、再読み込みすれば閲覧できる場合があるようですので、お試しください。

# とおりすがりさんには、なんと、「 断腸の思いでIEを立ち上げ」てまでコメントを書き込んでいただきました。世の中には親切な人もいらっしゃるものですね。このせいでウィルスに感染してしまった!なんてことがなかったことを祈ってます。

こういう不具合のお知らせは、本当に大歓迎です。コメント欄のメールアドレス入力も不要ですので、いつでも誰でも何処にでも、お気軽に書き込みいただけると幸いです。

また、実験的javascriptの設置を諦めるのは悲しいので、設置したままさらなる情報を待つことにし、解決方法がわかり次第、javascriptを更新させていただく、という方針でいきたいと思います。そんなわけで、常に何らかのご迷惑をおかけすることと思いますが、ご容赦の上、ご協力いただけると嬉しいです。宜しくお願いします。_(._.)_

----

Netscape 7.1(以下N7.1)は、firefoxと同時に立ち上げられないし、firefoxで閲覧できているんだから大丈夫だろうと高を括って最近確認すらしていませんでした。

で、今回、久しぶりにN7.1を立ち上げて確認してみたところ……問題なく見れます。あれ?と思い、N7.1で見れてますよ?とレスしようと思い、トップページから前回の記事のフッターにある「固定リンク」をクリック。すると……

----

ガビーン。本文エリアは見事に消え去り、両サイドバーがくっついて左の方に鎮座されておりました。わはは(T_T)

そりゃIE立ち上げないと書き込めないわなあ、納得納得、と思って今度は他のページに移動してみました。すると、N7.1、今度は落ちました(^^;

ひえー。やばいですね、このブログ。

で、再確認のためN7.1を再起動。すると、今度はトップページが本文なし状態。あれ?

「現在のページを再読み込み」してみました。お。今度は見れる。

なら……

おお。再読み込みすれば「Naverブログ、使えません」の記事ページ(固定リンク先)も見れました。

----

ということで、もし閲覧できない場合は再読み込みしてみてください。_(._.)_

# って閲覧できない人には伝わりませんが(^^;

----

この不具合は、本文折り畳みスクリプト(折り畳みで「続きを読む」)が原因だと思うんですが、まだイマイチ再現できてないので確認はできていません。

ということで、本文折り畳み、まだ付けたままにしておきます。何か情報があれば是非。_(._.)_

# そうそう。N7.1だと、記事タイトル横のボタンを押すと中の+/-マークが消えちゃいますね。わはは。_| ̄|○

2004-06-28

Naverブログ、使えません(T_T)

私のブラウザはfirefox。NaverってボタンがIE(Internet Explorer)専用javascriptで作られていることが多いので、いろんなところで行き詰まります。実は他にもいろんなブログに登録して試しているんですが、こんなに行き詰まったのは初めてです。高機能そうなのに、試すことすらできませんでした。(T_T)

まず、ブログを作るために、Naver IDの登録をしました。ここは特に問題ありませんでした。

次に、「ブログを作る」へ。手順2の「URL決定」で「決定」ボタンが押せませんでした。その直後、firefoxが落ちました(T_T)。(Naverを見ていると、結構落ちますよね?)

これでやめればよかったんですが、ふと、エンターキーは?と思い立ち、firefoxを再起動。手順2で「決定」ボタンの変わりにエンターキーを押してみました。……成功!……ということで、晴れてブログは作れました(^^)。

よしよし、じゃあ最初にブログタイトルぐらい変えてみるか、と思い、facet-naver(なんかどこかに似てますが^^;)と入力したり、サブタイトルを変えたりして、いざ設定保存ボタンを押してみると……しーん。……今度はエンター技も空を切るばかり。

ということで、あえなく終了〜。惨敗です(T_T)。

# まあ、Naverは高らかにIE限定をウタッテいるのでそんなものかもしれませんが、保存ボタンが押せないのはさすがにどうかなと思いますねぇ。いくらなんでも……いや、それでいいのか。登録の段階で問題があったということは、これより先に進んでもどうせ使えませんから止めておいた方が無難ですよと暗示してくれていたんですね、たぶん。エンターキーなんか使った私が悪かったのだ。そうに違いない。ということで、IE以外のみなさん、無理して登録しないようにしましょう(^^;。

そういえば、このブログも実験的なjavascriptをたくさん仕込んでいて、読み込みにかなーり時間がかかったり、挙動不審だったり、いろいろ迷惑を掛けていることかと思います。この場を借りて。どうもすみません_(._.)_。

2004-06-27

「最近のコメント」のツリー化!

いつものぴっくあっぷ。さんのめも経由で知りました。

ふろむにぅじぃ | コメントリストツリー化 for ココログ & ブログ人

…というわけで、早速適用! takkynさん、すばらしいスクリプトをどうもありがとうございました〜(^^)。

----

独自スタイルシートは必要ですが、設置は簡単。結果は美麗。Super!

# ホント、折り畳んでいるのが勿体ないぐらいですね(^^;。

作者のtakkyunさんは、私がサイドバー折り畳みスクリプト2を作る際、最も参考にさせていただいたブログオーナーさんなんですが、自分もこんな洗練されたスクリプトをいつか作ってみたいものです……。

ふろむにぅじぃ | ナビゲーションの折り畳み

----

なお、サイドバー折り畳み2(foldSidebar02a.js)の「項目数表示」機能との相性が悪いようなので、このコメントツリー化(comtree.js)とその機能を同居させる場合は、マイリストでfoldSidebar02a.jsの方を先に呼び出してコメントの項目数を数えるよう、配置を調整してみてください。_(._.)_

2004-06-26

Google検索窓の「ココログ全体から検索」

いつのまにか使えなくなっちゃってましたね、サイドバーに置いてあるGoogle検索窓の「ココログ全体から検索」。(T_T)

----

ひとつの検索窓でサイト内&ココログ全体&ウェブ全体から検索できるように、うなさんのアイデアに始まり、いかんともしがたいさんの記事Siera.さんのサイトを参考にしつつ頭を捻った結果、ようやく完成形に至ったGoogle検索窓だったので、Curryさんのココログルのお蔭でそれほど痛手ではないとはいえ、やっぱり残念です。

今日、「"ココログ: blogサービス"」だけでGoogle検索してみたところ、

"ココログ: blogサービス"に該当するページが見つかりませんでした。

と出ました。どうもGoogleのブログ対策の一環っぽい感じがしますね。ココログバナーのalt属性値をキーワードに付加して検索結果を絞るのって、いいアイデアだったんですけどねぇ……(T_T)。

----

というわけで、これを機会にいっそGoogle WebSearchにしてしまおうと思ったんですが、普通のweb&サイト内検索だけじゃないココログ向きGoogle検索窓がなくなるのも寂しいので、あがいてみることにしました。

====

在仏熊猫日記のひでさんが非常にスマートな方法を考え出してくれました。
在仏熊猫日記: 「Google検索窓」使えない?

この方法だと、今までの「"ココログ: blogサービス"」の部分を「cocolog-nifty.com」に書き直すだけでOKです。すばらしい!
 
完成形のコードはこちら↓
いかんともしがたい: Google 検索窓を設置する その 5 完成形
 
ということで、以下の「あがき」はもう用無しです。暇な人だけどうぞ。(笑)

====

----

で、いろいろやってみた結果、qじゃなくてas_oqを使ってOR検索にし、ドメインを羅列してみると、それなりの結果がでました。いかんともしがたいさんのところの完成形のソースを流用させていただくと、以下のようになります(青の部分が変更点)。

<!-- Google -->
<form action="http://www.google.co.jp/search" target="_blank">
<div style="font-size: small;">
<input type="hidden" name="hl" value="ja" />
<input type="hidden" name="ie" value="utf-8" />
<input type="text" name="q" size="15" maxlength="255" value="" />
<input type="submit" name="btnG" value="検索" /><br />
<input type="radio" name="as_oq" value="" checked="checked" />ウェブ全体から検索<br />
<input type="radio" name="as_oq" value="site:cocolog-nifty.com site:air-nifty.com site:moe-nifty.com site:txt-nifty.com site:way-nifty.com site:tea-nifty.com" />ココログ全体から検索<br />
<input type="radio" name="as_oq" value="site:yoursite.co.jp" />サイト内検索<br />
</div>
</form>
<!-- Google -->

上記のコードをコピー&ペーストすると、下のような検索窓になりますので、


ウェブ全体から検索
ココログ全体から検索
サイト内検索

適宜変更してください。赤い所が変更が必要な箇所(自サイトのドメインにしてください。http://や、/以降は不要で、ここならfacet.cocolog-nifty.comです)、緑の所がお好みで変更可能な箇所です。

----

しかし、この方法で本当にココログ全体をカバーできているのかどうかは怪しいですね。(^^;

例えば「Google検索窓」を「ココログ全体から検索」して出た検索結果ページの上の方を見てみると、テキスト入力フォーム枠内では

Google検索窓 site:cocolog-nifty.com OR site:air-nifty.com OR site:moe-nifty.com OR site:txt-nifty.com OR site:way-nifty.com OR site:tea-nifty.com

と変換されているのに、その直下の「ウェブ」から始まる薄い水色の一行を見ると、

Google検索窓 OR site:air-nifty.com OR site:moe-nifty.com OR site:txt-nifty.com OR site:way-nifty.com OR site:tea-nifty.com の検索結果のうち cocolog-nifty.com からの約 4,950 件中 1 - 10 件目 (0.22 秒)

となっていて、「ん?」ってな感じですし(^^;。

ただ、「cocolog-nifty.com からの検索結果のうち」とある割には、検索結果自体にはその他のair-やtxt-などのドメインもちゃんと出ていますし、また、as_oqでのsite:〜の順番を代えて例えばsite:moe-nifty.comを最初に持ってくると「moe-nifty.comからの検索結果のうち」となりますが、検索結果自体に変化は無いようで、一応それなりの結果が得られているような感じもしますが……さて。

# ココログのドメインが増えちゃったらどうすんの?キーワード数制限内に収まらなくなっちゃうよ……みたいな力業なので(^^;、もっといいやり方があれば是非教えて欲しいです。_(._.)_

2004-06-19

折り畳みで見出し一覧

このjavascriptを設置すると、本文エリアの上部に「見出し一覧」や「全て表示」などといった「表示モードスイッチ」が配置され、それらをクリックして選択するだけで、本文エリアの表示モードを瞬時に変えられるようになります。

# これは、折り畳みで「続きを読む...」スクリプトのオプション機能です。元記事(折り畳みで「続きを読む...」)を参考にスクリプトを設置し、以下のオプション機能をオンにしてください。

----

* 中央本文エリア最上部に「表示モードスイッチ」を追加する機能

このオプション機能をオンにすることによって、中央本文エリア(#center.content)の再上部に、「見出し一覧」、「全て表示」「導入部/概要を表示」の3つの表示モードスイッチが生成されます。

# ページ読み込み時には、「導入部/概要を表示」モードになっているので、このスイッチは表示されません。他のモードになると、自動的にスイッチが現れるようになっています。

この機能をオンにする方法は、次の通りです。

- ここのスクリプト本体(foldContent01a.js)をそのまま使っている場合:「呼び出しスクリプト」の foldContent(); という行より前に下記のコードを挿入する。
- 自分の所にスクリプト本体(foldContent01a.js)をアップロードした場合:スクリプト本体の上方にある同様の部分を下記のように修正して再度アップロードする。

addCenterHeadDisplayModeSwitch = true;
displayAllText = '全て表示(+)';
displayHeadingsText = '見出しだけ表示(-)';
displayIntrosText = '続きを隠す(△)';
displaySwitchStyle = "text-align:center;font-size:small;";

最初の一行で機能をオンにしています。また、〜Textと〜Styleの所の引用符内は自由にカスタマイズ可能です。(スイッチは、a要素です)

# 今はスイッチが3つですが、記事の並び順をひっくり返すことのできるスイッチなんかもあったらいいなあと思ったりします。

----

* 記事タイトル(見出しh3要素)に開閉スイッチを追加する機能

「見出し一覧」モードにした時に、読みたい記事だけを展開表示して読めたら便利だなあと思って付加したオプション機能です。(∴見出し一覧に必須の機能ではありません)

この機能をオンにすると、記事タイトル横に開閉スイッチがつくようになります。
(上記の機能をオンにする方法を参照)

addH3ShowHideSwitch = true;
showSwitchMark = '+';
hideSwitchMark = '-';
showHideSwitchStyle = "padding:0px;margin:0px;width:1.4em;height:1.4em;line-height:1em;text-align:center;float:right;";

最初の一行で機能をオンにしています。また、〜Markおよび〜Styleの所の引用符内はカスタマイズ可能です。(スイッチは、button要素です)

# 上記の〜Styleは、サイドバー折り畳みスイッチのボタンスタイルに合わせています。

# 【お知らせ】以前のサイドバー折り畳み2を実装された方で、スタイルを変更せずに使っている方へ:
とりあえずサイドバー折り畳み2」の記事中にあるswitchStyleのところに誤記がありました。(width=1.4em;height=1.4em;となっていました(^^;)。Opera 7.23 でボタンが小さく表示されてしまっていた原因がこの誤記でした。どうもすみません_(._.)_。

# なお、color:transparent; を追加すると背景色と同じになります。また、 border:none; を追加するとボタンに見えなくなってさらに目立たなくすることができたりしますが、推奨はしません。

# Opera 7.23 では、開閉ボタンの斜め上あたりに別のボタンみたいなのが出て妙なことになってますね……。何なんでしょう? うーむ(^^;

# 記事別ページ(固定リンク先ぺーじ)で見出し一覧にすると、トラックバック以下も見出しだけになるのですが、これ以降の見出しには開閉ボタンが付いていません。付いていた方が便利だよなーと思っているので、そのうちそうしたいなと思っています。

----

* 記事のフッターの下にスペーサーを追加する機能

私が今使っている「Typepad風テンプレート」では、「小見出し一覧表示」オプション機能をオンにして「見出し一覧」モードにした場合、小見出しと次の記事タイトル(または日付)がくっつきすぎて見栄えがよくありませんでした。そこで、その間隔を調整できるようにしたのがこの機能です。(∴見出し一覧に必須な機能ではありません)

この機能をオンにすると、記事のフッター(.content p.posted)の下に、スペーサーとしてdiv要素がひとつ追加されます。
(上記の機能をオンにする方法を参照)

addSpacerAfterEntryFooter = true;
spacerHeight = "10px";

# h2やh3のCSSを調整すればいいような気もしましたが。

----

# (参考)これまでに作った「見出し一覧」スクリプト:
facet-divers: 本文の見出しを抽出するスクリプト
facet-divers: 見出し一覧をポップアップ
どれが一番よかったんでしょうね

折り畳みで「続き」の数の表示

折り畳みで「続きを読む...」スクリプトのオプション機能のひとつ、「「続き」の数の表示機能」のついての記事です。

この機能をオンにすると、「続き」部分が複数ある場合に限り、[続きを表示]リンクの後にそれ以降の「続きの数」を表示するようになります。

# 今回の折り畳みスクリプトでは、記事本文内で水平線(hrタグ)を使うことで任意の場所で折り畳むことができるようにしたついでに、水平線を何回でも使えるようにしてみました。ところが、水平線が何回もある場合、[続きを表示]をクリックしてもまた[続きを表示]がでてくるので、「いつまで続きがあるんじゃい、ワリャ!」……と(^^;。そこで作ったのがこのオプション機能です。

この機能をオンにする方法は、次の通りです。

- ここのスクリプト本体(foldContent01a.js)をそのまま使っている場合:
「呼び出しスクリプト」の foldContent(); という行より前に下記のコードを挿入する。
- 自分の所にスクリプト本体(foldContent01a.js)をアップロードした場合:
スクリプト本体の上方にある同様の部分を下記のように修正して再度アップロードする。

showSequelsCount = true;
sequelsCountStyle = "color:silver;";

後者でスタイルを指定しています(CSS記法です)。

# サイドバーの折り畳みの時に付けた「項目数を表示する」オプション機能に似ていますが、[続きを表示]をクリックする毎に数が減ってくれるところが違いますね。

# 小見出し一覧機能と合わせて使うと、小見出しの数なのか続きの数なのか分からないので、なんか逆に邪魔っぽいですね。ということで、小見出し一覧を使う場合は、hrタグは使っても一回だけにしておいた方が良さそうです。……というか、大人しく最初のhrタグだけで折り畳むようなスクリプトにしておけば良かったかも?(^^;

折り畳みで小見出し一覧

折り畳みで「続きを読む...」スクリプトのオプション機能のひとつ「小見出し一覧表示機能」のついての記事です。

----

* この機能をオンにすると……

この機能をオンにすると、折り畳まれた時、小見出し(h4〜h6)だけは非表示にならずに残り、結果として小見出しが一覧できるようになります。

# この記事を記事別ページでご覧の場合、記事タイトル横にある折り畳みボタン[-]で一度折り畳んでみてください。

** だだし……

# ただし、『テキストフォーマットの初期設定』を『改行を反映させる』にして記事を作成している場合、本文記事内で小見出し(h4-h6タグ)を使っても、自動的にpタグで囲まれてしまうため、このスクリプトでは小見出しとして認識することができません。この場合、もうひとつのオプション機能、「特定キーワードで始まる段落を対応するタグに変換する機能」を御利用ください。
facet-divers: 折り畳み前にキーワード→タグ変換

* この機能をオンにする方法

この機能をオンにする方法は、次の通りです。

- ここのスクリプト本体(foldContent01a.js)をそのまま使っている場合:
「呼び出しスクリプト」の foldContent(); という行より前に下記のコードを挿入する。
- 自分の所にスクリプト本体(foldContent01a.js)をアップロードした場合:
スクリプト本体の上方にある同様の部分を下記のように修正して再度アップロードする。

showHeadingsWhenFolded = true;

* スタイルの調整方法

見出しは上下のマージンを大きくとってあることが多いので、そのままのスタイルで小見出しを並べてしまうと、間延びした感じになってしまうと思います。それをスクリプト本体だけで解消するようにはできませんでしたが、独自スタイルシートと組み合わせれば調整できるよう、折り畳まれた状態のときだけ小見出し(h4〜h6)に"folded"というclassが付くようにしておきました。

∴小見出し一覧時の小見出しのスタイルを調整するには、スタイルシートに

.folded {
	margin: 0px;
}
h4.folded {
	padding-left: 0px;
}
h5.folded {
	padding-left: 10px;
}
h6.folded {
	padding-left: 20px;
}

という感じでスタイル規則を追加してください。

# 独自のスタイルシートを使う方法自体については、フルカワさんの「詩織」やtsupoさんの「観測気球」などでいろいろと紹介されていますので、そちらをご参照ください。
詞織
観測気球

# このブログは、長らく独自スタイルシートを使っていなかったんですが、今回のこのオプション機能のために、スタイル規則を追加できるタイプのjavascriptを適用することにしました。
facet-divers: javascriptでスタイル規則を追加したい

* 謝辞

# なお、この小見出し一覧機能は、上記のweblog.hikoboshi.mac: ココログ無料版でも『続きを読む』が欲しい!という記事を書かれたしののめひこぼしさんの、続編記事ともいうべきweblog.hikoboshi.mac: hide.jsと小見出し抽出にインスパイアされて付加したオプション機能です。

----

* 余談

# この機能を使っていると、小見出しの横にも開閉スイッチが欲しくなってきました(^^;。

>>>追記 2004-06-22: この記事自体に小見出しがなく、記事別ページで見ているときに効果を確認しづらいので、小見出しを捏造してみました(笑)。<<<

折り畳み前にキーワード→タグ変換

折り畳みで「続きを読む...」スクリプトのオプション機能のひとつ「特定キーワードで始まる段落を対応するタグに変換する機能」についての記事です。

『テキストフォーマットの初期設定』を『改行を反映させる』にして記事を作成している場合、本文記事内で水平線(hrタグ)を使っても、自動的にpタグで囲まれてしまうため、「折り畳み線」として使うことができません。

そこで、ある特定のキーワードで始まる段落を、折り畳みスクリプトが機能する前に、水平線や見出しに変換してしうことにしました。

このオプション機能をオンにすると、ある特定のキーワードで開始されている段落を、対応する特定のタグに変換します。

この機能をオンにする方法は、次の通りです。

- ここのスクリプト本体(foldContent01a.js)をそのまま使っている場合:
「呼び出しスクリプト」の foldContent(); という行より前に下記のコードを挿入する。
- 自分の所にスクリプト本体(foldContent01a.js)をアップロードした場合:
スクリプト本体の上方にある同様の部分を下記のように修正して再度アップロードする。

doConvertTags = true;

また、特定キーワードで始まる段落と変換後の要素(タグとその要素内容)との対応関係は、以下の通りです。

- 半角マイナス4つ以上(----)で始まる段落
→ hrタグ
(キーワード以外の文字が同じ段落にあっても消去されます)
- 半角アスタリスク1つ(*)で始まる段落
→ h4タグ
(キーワード部分は除去され、残りが要素内容になります)
- 半角アスタリスク2つ(**)で始まる段落
→ h5タグ
(同上)
- 半角アスタリスク3つ(***)で始まる段落
→ h6タグ
(同上)


# 昔、記事本文中でhrやh4-h6などのタグを使おうとしたらXHTML文法違反になってしまったので、こういう機能を付加することにしました。

# この機能を使う時、前段落との間が2行以上空いてしまっていると、段落(p要素)の最初にbrタグが自動的に挿入されてしまい、特定キーワードで段落を始めたつもりなのにうまく変換してくれない場合があったりします。段落前の空行の数なんかいちいち気にしないで変換できるようにスクリプトを調整したいなあと思ってます。

# とりあえずPukiwikiの記法にキーワードを設定してみたんですが、折り畳みスクリプトが動作しない環境では当然キーワードのままで表示されてしまうので、そういう環境下で読む場合でも本文が読みやすいような記号(■など?)をキーワードにする方がいいかなあと思案中。

javascriptでスタイル規則を追加したい

このブログにjavascripでスタイル規則を追加できないかなあと思っていたところ、良さそうなスクリプトを見つけました。

三日坊主++の部屋 <2004-06現在、閉鎖中(T_T)>
JavaScript for CSS(3)
→ ○ LINK要素を追加する -- Netscape6(6.1はOK) 不可 --

これを少しだけ変更して、下記のようにして適用してみました。

<script type="text/javascript">
<!--
sURL = "http://facet.cocolog-nifty.com/divers/alt200406a.css";
addLink();
function addLink(){
 if(document.all && document.createStyleSheet)
  document.createStyleSheet(sURL);
   // stylesheet object createStyleSheet([sURL] [, iIndex])
   // iIndexは省略可。省略するとスタイルシート集合の最後に追加。
 else {
  var nLink=document.createElement('LINK');
   // Element createElement(in DOMString tagName)
   // raises(DOMException);
  nLink.rel="stylesheet";
  nLink.type="text/css";
  nLink.href=sURL;
  var oHEAD=document.getElementsByTagName('HEAD').item(0);
  oHEAD.appendChild(nLink);
   // Node appendChild(in Node newChild)
   // raises(DOMException);
 }
}
//-->
</script>

firefox系だけじゃなく Internet Explorer 6 でも動作するやつを知りたかったので、「おお、これだー(^^)」って思ったんですが、Opera 7.23 ではダメでした。うーん、残念。……何故なんでしょう?(T_T)

Opera 7.23って、document.allがあるんですね…。ということで、最初のifに && document.createStyleSheetを追加たところ、Opera 7.23でもちゃんと追加スタイルシートが適用されました(^^)。

と思ったらいつのまにかまた適用できていないことに気がつきました。なぜか else if(document.styleSheets){ となっていたので、その部分を else { だけにしました。これでOpera7.23ではOKかと思います。

他のブラウザでの動作状況はどうでしょう? 情報をいただければ幸いです。_(._.)_

2004-06-18

折り畳みで「続きを読む...」 プチ修正

「続き」の部分に折り畳まれずに残ってしまうところがあるという現象を修正し、スクリプト本体を差し替えました。

facet-divers: 折り畳みで「続きを読む...」

# この現象は、記事を入力するとき、『テキストフォーマットの初期設定』が『なし』にしてあり、かつ、段落をPなどで囲まずに剥き出しで書いている部分、つまり、text nodeの部分で発生していました。

2004-06-16

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

折り畳みタイプの「続きを読む...」機能を実現するための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タグを「折り畳み線」として使うことはできません。

この場合、後述のオプション機能にある「特定キーワードで始まる段落を対応するタグに変換する機能」をオンにしてください。こうしておくと、「----(半角マイナス4つ以上)」で始まる段落を、自動付加される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の2行:[続きを表示]/[続きを隠す]リンクのテキストの指定
- 〜Markの2行:▽/△ボタンのマークの指定
- sequelButtonStyleの行:▽/△ボタンのスタイルの指定
- riseSequelButtonOnMouseOverの行:onMouseOverで▽/△ボタンが迫り上がるように見せるかどうかの指定

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

# もしかしたら、上記のような文字列だけでなく、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: ココログ無料版でも『続きを読む』が欲しい!

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

2004-06-05

使用容量:6カ月で4.048MB(13.49%)

今月は、二日も遅れてしまいました。とはいえ、あいかわらず記事が少ないので、影響は全くないんですが(^^;。

コメントを書き込んでいただいた皆さん、どうもありがとうございました。_(._.)_

----

*今回のデータ【6カ月目】

現在ご利用中のプラン: 	ベーシック
ご利用可能なディスク容量: 	30 メガバイト
ご利用中のディスク容量: 	4.048 メガバイト (13.49%)
ココログのご利用開始月: 	December 2003
記事数: 148  |   コメント数: 194  |   ライター数: 1
(公開記事数: 146)

*増分一覧表

使用容量/MB容量増加率記事数公開記事数コメント数
6カ月目+0.280+0.93%+8+7+39
5カ月目+0.328+1.09%+7+6+43
4カ月目+0.744+2.48%+43+26+35
3カ月目+0.296+0.99%+25+16+13
2カ月目+0.928+3.09%+86+37+35
1カ月目+1.472+4.91%+121+54+29

*過去の記録

【5カ月目】

ご利用中のディスク容量: 	3.768 メガバイト (12.56%)
記事数: 140  |   コメント数: 155  |   ライター数: 1
(公開記事数: 139)

【4カ月目】

ご利用中のディスク容量: 	3.44 メガバイト (11.47%)
記事数: 275 |  コメント数: 112 |  ライター数: 1 
(公開記事数: 133)

* この月のデータ記録後、下書き記事を全て削除しました。

【3カ月目】

ご利用中のディスク容量: 2.696 メガバイト (8.99%)
記事数: 232 |  コメント数: 77 |  ライター数: 1 
(公開記事数: 107)

【2カ月目】

ご利用中のディスク容量: 2.4 メガバイト (8.00%)
記事数: 207 |  コメント数: 64 |  ライター数: 1
(公開記事数: 91)

【1カ月目】

ご利用中のディスク容量: 1.472 メガバイト (4.91%)
記事数: 121 |  コメント数: 29 |  ライター数: 1 
(公開記事数: 54)

« 2004年5月 | トップページ | 2004年7月 »

contact

検索

無料ブログはココログ
2023年1月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

BANNERS