人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

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

1354036065
●拡大する


●質問者: raiden
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● a-kuma3
●300ポイント ベストアンサー

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

紹介文を広げたり、折りたたむときには、その要素の 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/


a-kuma3さんのコメント
この回答へのコメントが削除されてますが、大丈夫でしょうか? jQuery を使っているので、以下の行も組み込んであげる必要があります。 >|html| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> ||< 回答のソースコードにも追記しました。

raidenさんのコメント
はやい回答をありがとうございました。ソースまで書いて頂いて感激です。 早速追加してみたところ、長文の紹介文が2行ほどになりました。 ただ「続きを読む」を押しても展開しなかったのですが、どのような理由が考えられますでしょうか? 元のソースから紹介文をHTMLに落とし込んでいる部分を抜粋しますと以下になります。 ------------------------------ Print<<"<!--HTML-->"; <tr id=log-3> <td>$Slog[6]</td> </tr> <!--HTML--> ※文字化け防止のため、頭文字だけ大文字にしています。 --------------------------------- テキストデータは$Slog[6]という変数で渡されます。 そこで書いて頂いたソースの紹介文のところに単純に$Slog[6]を当てはめてみました。 --------------------------------- <div id="container"> <a href="#" id="expand-button">▼続きを読む</a> <div id="message"> $Slog[6] </div> </div> ------------------------------------ この書き方がまずいのでしょうか? 引き続きお力を貸して戴けたらと思います。 もし元のソースが必要な場合は「Yomi-Search」はこちらでフリー配布しています。 http://yomi.pekori.to/

a-kuma3さんのコメント
コメントの順番が入れ違っちゃいました (^^ゞ 回答に、ちょっと追記したので、確認してみてください。

raidenさんのコメント
すみませんバタバタしてしまって、間違ってコメント削除してしまいました・・。 ソースも落としてもらったみたいで本当にありがとうございます。 見ているファイルはtemplate/kt.htmlです。追加のソースコードも入れてみましたが、う?ん動きません・・・。 もしかしたらsearch.htmlなのかと思い、こちらも組み込んでみたんですがダメでした。

a-kuma3さんのコメント
とりあえず、環境の問題なのか、組み込み方の問題なのか、切り分けたいので、以下の URL のページで、きちんと動くかどうか試してみてもらえますか? http://jsfiddle.net/zsmMW/embedded/result/ kt.html も見てみます。返事は、夜中になっちゃうかもしれません <tt>m(_ _)m</tt>

raidenさんのコメント
本当にありがとうございます。 ずっと悪戦苦闘してたので、知識のある人に見てもらえると心強いばかりです。 上のページは問題なく動きました。

a-kuma3さんのコメント
ぼくが追記した部分を、よく見たらタイプミスをしてて、 http: が抜けてました。 動かないのは、それが原因かも。 >|html| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> ||< 何度も、済みません。

raidenさんのコメント
http:追加してみました。 ダメでした・・・。 なぜなんでしょうね??

a-kuma3さんのコメント
>> なぜなんでしょうね?? << それは、ぼくが粗忽ものだから <tt>X-(</tt> 後半で、肝心の広げたり、折りたたんだりするコードのことを、すっかりわすれてます。 というわけで、回答の後半(「追記です」から後)を書き直しました。 今度は大丈夫だと思いますよ。 # ばたばたさせて、申し訳ないです

raidenさんのコメント
引き続き付き合ってもらってありがとうございます。 追記で試させてもらいました。がダメでした。 IEなんですが左下に「実行しましたが、ページでエラーが発生しました。」と出てしまいます。 行は短縮されていますが、クリックしても動かない状態です。

a-kuma3さんのコメント
>> IEなんですが左下に「実行しましたが、ページでエラーが発生しました。」と出てしまいます。 << むう。 jsFiddle のサンプルは動くのに、kt.html に組み込むとスクリプトエラーになってしまう、と。 あ、&lt;script&gt; の中の $ が、perl の変数展開の対象になっていて、コードが崩れてるのかも。 $ をいちいちエスケープするのもかったるいので、html の外部のスクリプトに逃がしちゃうか、先頭の方のヒアドキュメントをいくつかに刻んで、スクリプトのコードがあるところはシングルクォートにする。 もしくは、&lt;script&gt; の中身をリストコンテキスト(って言うんだったかな)でシングルクォートの評価をさせるという感じではどうでしょうか? 三番目のは、こんな感じになるのかな。 >|javascript| <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> ||<

a-kuma3さんのコメント
リストコンテキスト云々の辺りは、以下のようなところから拾ってます。 http://perldoc.jp/docs/perl/5.14.1/perlfaq4.pod#How32can32I32expand32variables32in32text32strings63 http://d.hatena.ne.jp/futora/20081222/p1 ヒアドキュメントを刻んで、スクリプトのコードがあるところをシングルクォートで、というのは、こんな感じ。 >|perl| print<<"<!--HTML-->"; <html> <head> ... </script> <!--HTML--> print<<'<!--HTML-->';# 追加部分は、シングルクォートのヒアドキュメント <!-- ここから --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> $(function() { $("#expand-button").click(function() { ... </style> <!-- ここまでを追加 --> <!--HTML--> print<<"<!--HTML-->";# ここからは、また、ダブルクォートでヒアドキュメント </head> <body><a name=top></a> ... <!-- ナビゲーションバー --> <a href="$EST{home}">ホーム</a> &gt; <!--HTML--> ||< # 実は、perl 苦手

raidenさんのコメント
ありがとうございます。すごいです!!動きました!! これは絶対に自分一人では無理でした。 と、お願いついでにもうひとつだけ、このプログラムに関することでお知恵を戴けないでしょうか? 今、稼働させていて気付いたのですが、紹介サイトが一つの場合はいいのですが、検索結果で複数になった場合は2番目以降のものは稼動しないようです。 これは修正可能でしょうか? 何度もすみません。。

a-kuma3さんのコメント
回答に追記しました。 動作を確認してて思ったのですけれど、動作をさせるリンクの文字数を合わせておいた方が使い勝手が良さそうです。 「続きを読む」と「折りたたむ」とか。

raidenさんのコメント
もしかして実際にYomi-Searchを動かしてくれているのですか? こんなに長いこと付き合わせてしまって、すみません。。。 文字数合わせもしてみました。動作に変わりはないようです。 jQueryというのはJavaScriptですよね。もしかしたらJavaScripはソースの上位1番目しか反応しない仕様なのでしょうか? なにかどこかでそんな記述を見たような気が・・?

a-kuma3さんのコメント
>> jQueryというのはJavaScriptですよね。もしかしたらJavaScripはソースの上位1番目しか反応しない仕様なのでしょうか? << いや、そんなことないですよ。書き方次第です。 最初に書いたコードは、id という属性を利用してて、HTML のタグに振るときにユニークになるように振っていくものなので、同じ値を使ってしまうと、気持ち悪いことになります。 一旦動いた後に書きなおしたのは、class 属性を使ってて、スタイルの指定で使われるものですが、元々、同じ値が複数のタグに付けられるのが前提になってます。 んで、こっちは、きちんと動きますか? http://jsfiddle.net/hKbLJ/1/embedded/result/ 二回目の追記は、# → . や、id → class と、ちょこちょこいじってるので、元の kt.html にあらためて適用してみてください。 >> こんなに長いこと付き合わせてしまって、すみません。。。 << 気にしない、気にしない <tt>:-)</tt>

raidenさんのコメント
うおおおおおおおおお 動きましたああああ!!!!!!! 感動ものです!!凄すぎる!!! いくつ並べてもそれぞれ独立して動きました。 本当に本当にありがとうございます。 perlに触らずに軽いスプリクトで動かすのが素晴らしい。 遅い時間まで本当にありがとうございました。 あなたはMrパーフェクトです!

2 ● oil999
●0ポイント

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

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


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

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ