1354036065 Yomi-Search(perl)の長文サイト紹介文を折り畳みたい。


フリーCGIサーチエンジンのYomi-Searchを稼動させることは出来ましたが、一か所、改造を試みていますがなかなかうまくいきません。

現在、サイト紹介文を長文にできるようにしています。
このテキストを頭の2行ほどだけ反映させて、途中からは「続きを読む」で折りたたむスプリクトを組みたいのです。

そこで検索で見つけたJavaScriptを試してみましたが、紹介文のファイルは$Slog[6]というデータ変数なので全ての文字が隠れてしまいます。(画像参考)

頭の2行くらいだけを残して折りたためる何かいい方法はありますでしょうか?
改造について知恵を貸してください。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/11/28 02:07:45
  • 終了:2012/11/29 02:14:41

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4546ベストアンサー獲得回数18962012/11/28 09:06:31

ポイント300pt

紹介文を持っている要素に対して、以下のようなスタイルを設定しておきます。

  • height で高さを指定する
  • overflow-y を hidden にする

紹介文を広げたり、折りたたむときには、その要素の height を "auto" と "" (空文字列) で切り替えます。

ざっと、こんな感じのソースになります(jQuery 使ってます)。

<!-- 以下の1行を追記しました -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script>
$(function() {
    $("#expand-button").click(function() {
        if (! $(this).attr("expanded")) {
            $(this).text("▲たたむ");
            var e = $("#message");
            e.css("height", "auto");
            $(this).attr("expanded", "Yes");
        } else {
            $(this).text("▼続きを読む");
            var e = $("#message");
            e.css("height", "");
            $(this).attr("expanded", null);
        }
    });
});
</script>
<style>
#message {
    height: 2.4em;
    overflow-y: hidden;
}
#container {
    border: 2px inset gray;
    padding: 0.5ex;
}
</style>

<div id="container">
    <a href="#" id="expand-button">▼続きを読む</a>
    <div id="message">
        紹介文
        紹介文
        紹介文
        紹介文
        紹介文
        紹介文
    </div>
</div>


jsFiddle で試したのがこちらです。
http://jsfiddle.net/zsmMW/



追記です(書き直しました)。

ソースを見てみました。行番号は、template/kt.html がベースです。
343行目付近の $Slog[6] を表示している辺りを変更します。

<tr id=log-3>
	<td>$Slog[6]</td>
</tr>

のところを、

<tr id=log-3>
	<td>
<!-- ここから -->
<div id="container">
    <a href="#" id="expand-button">▼続きを読む</a>
    <div id="message">
	$Slog[6]
    </div>
</div>
<!-- ここまで -->
	</td>
</tr>

のように変更して、33行目くらいの </head> 辺りを、以下のようにすれば大丈夫じゃないでしょうか。

</script>
<!-- ここから -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
    $("#expand-button").click(function() {
        if (! $(this).attr("expanded")) {
            $(this).text("▲たたむ");
            var e = $("#message");
            e.css("height", "auto");
            $(this).attr("expanded", "Yes");
        } else {
            $(this).text("▼続きを読む");
            var e = $("#message");
            e.css("height", "");
            $(this).attr("expanded", null);
        }
    });
});
</script>
<style>
#message {
    height: 2.4em;
    overflow-y: hidden;
}
#container {
    border: 2px inset gray;
    padding: 0.5ex;
}
</style>
<!-- ここまでを追加 -->

</head>
<body><a name=top></a>



さらに、追記です。

今、稼働させていて気付いたのですが、紹介サイトが一つの場合はいいのですが、検索結果で複数になった場合は2番目以降のものは稼動しないようです。
これは修正可能でしょうか?
何度もすみません。。

何度も、という意味では、ぼくも...

というわけで、複数あるメッセージに対応するために、id を使わないよう変更してみました。
変更内容はたいしたことありませんが、ちょこちょこいじってます。
<head> の辺りのコード。

</script>
<!-- ここから -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
@{[ '
$(function() {
    $(".expand-button").click(function() {
        if (! $(this).attr("expanded")) {
            $(this).text("▲たたむ");
            var e = $(this).next();
            e.css("height", "auto");
            $(this).attr("expanded", "Yes");
        } else {
            $(this).text("▼続きを読む");
            var e = $(this).next();
            e.css("height", "");
            $(this).attr("expanded", null);
        }
    });
});
' ]}
</script>
<style>
.message {
    height: 2.4em;
    overflow-y: hidden;
}
.container {
    border: 2px inset gray;
    padding: 0.5ex;
}
</style>
<!-- ここまでを追加 -->

</head>
<body><a name=top></a>

メッセージを表示する辺り。

<tr id=log-3>
	<td>$Slog[6]</td>
</tr>

のところを、

<tr id=log-3>
	<td>
<!-- ここから -->
<div class="container">
    <a href="#" class="expand-button">▼続きを読む</a>
    <div class="message">
	$Slog[6]
    </div>
</div>
<!-- ここまで -->
	</td>
</tr>

うまくいかなかった場合に備えて、jsFiddle でも確認してます。
http://jsfiddle.net/hKbLJ/1/embedded/result/

他15件のコメントを見る
id:a-kuma3

jQueryというのはJavaScriptですよね。もしかしたらJavaScripはソースの上位1番目しか反応しない仕様なのでしょうか?

いや、そんなことないですよ。書き方次第です。
最初に書いたコードは、id という属性を利用してて、HTML のタグに振るときにユニークになるように振っていくものなので、同じ値を使ってしまうと、気持ち悪いことになります。
一旦動いた後に書きなおしたのは、class 属性を使ってて、スタイルの指定で使われるものですが、元々、同じ値が複数のタグに付けられるのが前提になってます。

んで、こっちは、きちんと動きますか?
http://jsfiddle.net/hKbLJ/1/embedded/result/

二回目の追記は、# → . や、id → class と、ちょこちょこいじってるので、元の kt.html にあらためて適用してみてください。

こんなに長いこと付き合わせてしまって、すみません。。。

気にしない、気にしない :-)

2012/11/29 01:26:17
id:pen2648

うおおおおおおおおお 動きましたああああ!!!!!!!

感動ものです!!凄すぎる!!!
いくつ並べてもそれぞれ独立して動きました。

本当に本当にありがとうございます。
perlに触らずに軽いスプリクトで動かすのが素晴らしい。

遅い時間まで本当にありがとうございました。
あなたはMrパーフェクトです!

2012/11/29 02:05:51

その他の回答(1件)

id:a-kuma3 No.1

a-kuma3回答回数4546ベストアンサー獲得回数18962012/11/28 09:06:31ここでベストアンサー

ポイント300pt

紹介文を持っている要素に対して、以下のようなスタイルを設定しておきます。

  • height で高さを指定する
  • overflow-y を hidden にする

紹介文を広げたり、折りたたむときには、その要素の height を "auto" と "" (空文字列) で切り替えます。

ざっと、こんな感じのソースになります(jQuery 使ってます)。

<!-- 以下の1行を追記しました -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script>
$(function() {
    $("#expand-button").click(function() {
        if (! $(this).attr("expanded")) {
            $(this).text("▲たたむ");
            var e = $("#message");
            e.css("height", "auto");
            $(this).attr("expanded", "Yes");
        } else {
            $(this).text("▼続きを読む");
            var e = $("#message");
            e.css("height", "");
            $(this).attr("expanded", null);
        }
    });
});
</script>
<style>
#message {
    height: 2.4em;
    overflow-y: hidden;
}
#container {
    border: 2px inset gray;
    padding: 0.5ex;
}
</style>

<div id="container">
    <a href="#" id="expand-button">▼続きを読む</a>
    <div id="message">
        紹介文
        紹介文
        紹介文
        紹介文
        紹介文
        紹介文
    </div>
</div>


jsFiddle で試したのがこちらです。
http://jsfiddle.net/zsmMW/



追記です(書き直しました)。

ソースを見てみました。行番号は、template/kt.html がベースです。
343行目付近の $Slog[6] を表示している辺りを変更します。

<tr id=log-3>
	<td>$Slog[6]</td>
</tr>

のところを、

<tr id=log-3>
	<td>
<!-- ここから -->
<div id="container">
    <a href="#" id="expand-button">▼続きを読む</a>
    <div id="message">
	$Slog[6]
    </div>
</div>
<!-- ここまで -->
	</td>
</tr>

のように変更して、33行目くらいの </head> 辺りを、以下のようにすれば大丈夫じゃないでしょうか。

</script>
<!-- ここから -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
    $("#expand-button").click(function() {
        if (! $(this).attr("expanded")) {
            $(this).text("▲たたむ");
            var e = $("#message");
            e.css("height", "auto");
            $(this).attr("expanded", "Yes");
        } else {
            $(this).text("▼続きを読む");
            var e = $("#message");
            e.css("height", "");
            $(this).attr("expanded", null);
        }
    });
});
</script>
<style>
#message {
    height: 2.4em;
    overflow-y: hidden;
}
#container {
    border: 2px inset gray;
    padding: 0.5ex;
}
</style>
<!-- ここまでを追加 -->

</head>
<body><a name=top></a>



さらに、追記です。

今、稼働させていて気付いたのですが、紹介サイトが一つの場合はいいのですが、検索結果で複数になった場合は2番目以降のものは稼動しないようです。
これは修正可能でしょうか?
何度もすみません。。

何度も、という意味では、ぼくも...

というわけで、複数あるメッセージに対応するために、id を使わないよう変更してみました。
変更内容はたいしたことありませんが、ちょこちょこいじってます。
<head> の辺りのコード。

</script>
<!-- ここから -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
@{[ '
$(function() {
    $(".expand-button").click(function() {
        if (! $(this).attr("expanded")) {
            $(this).text("▲たたむ");
            var e = $(this).next();
            e.css("height", "auto");
            $(this).attr("expanded", "Yes");
        } else {
            $(this).text("▼続きを読む");
            var e = $(this).next();
            e.css("height", "");
            $(this).attr("expanded", null);
        }
    });
});
' ]}
</script>
<style>
.message {
    height: 2.4em;
    overflow-y: hidden;
}
.container {
    border: 2px inset gray;
    padding: 0.5ex;
}
</style>
<!-- ここまでを追加 -->

</head>
<body><a name=top></a>

メッセージを表示する辺り。

<tr id=log-3>
	<td>$Slog[6]</td>
</tr>

のところを、

<tr id=log-3>
	<td>
<!-- ここから -->
<div class="container">
    <a href="#" class="expand-button">▼続きを読む</a>
    <div class="message">
	$Slog[6]
    </div>
</div>
<!-- ここまで -->
	</td>
</tr>

うまくいかなかった場合に備えて、jsFiddle でも確認してます。
http://jsfiddle.net/hKbLJ/1/embedded/result/

他15件のコメントを見る
id:a-kuma3

jQueryというのはJavaScriptですよね。もしかしたらJavaScripはソースの上位1番目しか反応しない仕様なのでしょうか?

いや、そんなことないですよ。書き方次第です。
最初に書いたコードは、id という属性を利用してて、HTML のタグに振るときにユニークになるように振っていくものなので、同じ値を使ってしまうと、気持ち悪いことになります。
一旦動いた後に書きなおしたのは、class 属性を使ってて、スタイルの指定で使われるものですが、元々、同じ値が複数のタグに付けられるのが前提になってます。

んで、こっちは、きちんと動きますか?
http://jsfiddle.net/hKbLJ/1/embedded/result/

二回目の追記は、# → . や、id → class と、ちょこちょこいじってるので、元の kt.html にあらためて適用してみてください。

こんなに長いこと付き合わせてしまって、すみません。。。

気にしない、気にしない :-)

2012/11/29 01:26:17
id:pen2648

うおおおおおおおおお 動きましたああああ!!!!!!!

感動ものです!!凄すぎる!!!
いくつ並べてもそれぞれ独立して動きました。

本当に本当にありがとうございます。
perlに触らずに軽いスプリクトで動かすのが素晴らしい。

遅い時間まで本当にありがとうございました。
あなたはMrパーフェクトです!

2012/11/29 02:05:51
id:oil999 No.2

oil999回答回数1728ベストアンサー獲得回数3202012/11/28 19:37:43

記事を折りたたむ JavaScript のソースコード

http://www.cmehappy.jp/websitetips/expander.html

id:pen2648

これは最初から出来ています。
私が知りたいのは、多人数から投稿されるテキスト($Slogという変数で渡される)を頭数行残して“自動”で折りたたむ方法です。
ページ数が多いので、すべてのページに自分でソースを書きこむことはできません。

2012/11/28 21:23:38

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません