質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

1586閲覧

投稿文の開閉設定の変数がうまいこと作用しない。

s.k

総合スコア423

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/10/31 07:46

編集2016/11/01 03:57

今ある求人広告サイトに紹介されているバイト内容があまりにもブラックボックスで想像ができないため、自分でSNS型求人広告サイトを作ろうとしています。

###前提・実現したいこと
コメントの開閉後に表示されるはずの文が表示されません。

各投稿文末にもっと読む(ここではmore)のように投稿文の開閉機能をjqueryで実装したいです。

(例)========================

【投稿文が閉じている場合】
test1test1test1test1...もっと読む

【投稿文が開いている場合】
test1test1test1test1test1test1test1test1 閉じる

==========================

###発生している問題・エラーメッセージ

上の例が理想状態なのですが、エラーが2つ発生しています。

①投稿文が閉じている状態で、表示される文字が<script>内で指定している文字数と一致しない。

<script>内では25文字以降を表示しないように設定している。】

イメージ説明

→実際表示されるのは14文字…(testtesttestの部分)

②moreを押して、投稿文を開いても隠されている文字が表示されない。

イメージ説明

後、数文字表示される予定なのですが…

ご教示ください。お願いします。

###<情報追加>

==================================

・通常の投稿の文字数
イメージ説明

・script記述後
イメージ説明

==================================

【エラー当初の出力内容】----------------------------------------------------

イメージ説明


投稿内容にたどり着きました

イメージ説明

【123456789abcdefghijklmnopqrstuvwxyzと投稿した場合】
イメージ説明

イメージ説明

投稿文までたどり着きました。

イメージ説明


###追加の追加

_micropost.html.erbでは開閉は機能しませんでしたが、
show.html.erbでは機能しました。

_micropost.html.erbはshow.html.erbのパーシャルですので、
コード内容には差がないのですが…

【moreを押す前】
イメージ説明

【moreを押した後】
イメージ説明

###ソースコード

kei344さんへ

【index.html.erb】

<div class="col-md-8"> <h3>Micropost Feed</h3> <%= render 'shared/feed' %> </div>


【_feed.html.erb】

<% if @feed_items.any? %> <ol class="microposts"> <%= render @feed_items %> </ol> <%= will_paginate @feed_items %> <% end %>


【_micropost.html.erb】

////省略////

###解決できたコード

【_feed.html.erb】

<% if @feed_items.any? %> <ol class="microposts"> <%= render @feed_items %> </ol> <%= will_paginate @feed_items %> <% end %> <script> $(document).ready(function() { var showChar = 25; var ellipsestext = "..."; var moretext = "more"; var lesstext = "less"; $('.more').each(function() { var content = $.trim($(this).html()); if(content.length > showChar) { var c = content.substr(0, showChar); var h = content.substr(showChar, content.length - showChar); var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>'; $(this).html(html); } }); $(".morelink").click(function(){ if($(this).hasClass("less")) { $(this).removeClass("less"); $(this).html(moretext); } else { $(this).addClass("less"); $(this).html(lesstext); } $(this).parent().prev().toggle(); $(this).prev().toggle(); return false; }); }); </script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

手元で適当なテキストを書いて試してみたところでは特に問題無いように見えますが、

Ruby

1<div class="more"> 2 <%= micropost.content %> 3</div>

ここは最終的に、どのようなHTMLが出力されるのでしょうか?むしろそちらのほうが重要です。Rubyは門外漢なので的外れかもしれませんが、

JavaScript

1var content = $(this).html();

ここでテキストではなくHTMLで取得しているのが気になっています。

もし展開される文字列にタグや実体参照など、単体の文字ではない形で解釈されるべきモノが含まれていると、その途中で切り離されて、テキストとして露出する可能性があります。

HTML

1<div class="more"> 2<a href="http://www.google.co.jp/">Google</a> 3</div>

超適当ですが例えばこんな展開だったとすると、25文字目はhref属性のURLの途中ですので、タグが途中で切り離されます。結果として、処理後のHTML構造も破綻しますので、意図しない文字列が現れるなどの不具合が出るでしょう。

HTML

1<div class="more"> 2<a href="http://www.goog&lt;span class=" moreellipses"="">...&nbsp;<span class="morecontent"><span>le.co.jp/"&gt;Google</span></span></a> 3&nbsp;&nbsp;<a href="" class="morelink">more</a></div>

言い表せないくらいひどいことになっていました。

投稿2016/10/31 09:11

編集2016/10/31 09:13
sii_side

総合スコア849

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sii_side

2016/10/31 09:17

<div class="more"> <%= micropost.content %> </div> それと、改行やスペースも1文字は1文字です。描画では無視してくれていても、スクリプトではカウントの対象となりますので、$.trimしたほうが良いかもしれません。
s.k

2016/10/31 09:28

sii_sideさん お返事ありがとうございます! すいません。素人なもので、 どのようなHTMLが出力されるのでしょうか? というご質問に対してどういった情報を提示すればいいのかがよくわかりませんでした。。。 提供できる情報は全て出したいので、もし違っていましたらご指摘お願いします。 一応、質問内容に該当するhtmlファイルを追記しました((+_+))
sii_side

2016/10/31 09:35

知りたいのは、Rubyのソースがどのようになっているのかではなく、最終的にブラウザが受け取るHTMLがどのようになっているかです。実際の画面で「ソースを表示」とか開発者ツールから得られるソースです。描画するのも、スクリプトを実行するのも、CSSを充てるのもみんなブラウザですので。
s.k

2016/10/31 09:51

追記しました!
s.k

2016/10/31 10:10

すいません。デベロッパーツールでってことですよね。。。 追記したので、みていただけますでしょうか?
sii_side

2016/10/31 10:27

んんんんん?? あ、いえ、元々はどちらか一方で良いという意味だったのですが、これは開発者ツールのスクリーンショットを出してもらってよかった…。何か何重にもspanがネストした形になっていますが、これが問題なような気がします。 https://jsfiddle.net/sii_side/51zxznzu/ こんな感じで、シンプルにdiv.moreが並ぶ構造に作り変えてみてください。ついでに$.trimも入れてありますので、文字列の前に付くスペースなども無視できます。
s.k

2016/10/31 10:54

sii-sideさん 試してみましたが、できませんでした((+_+)) 詳細は追記してあります! 今から、div付近のコードも追記します!
sii_side

2016/10/31 11:17

うーん…何をどうしたらそんなspan地獄になるんでしょうか…。さっぱりわかりません。現物を見たい…。 とりあえずですが、.moreの中に.moreを入れたりはしていませんか?もしそうなら、それは必ず避けてください。 あと、当初からタグの構造が破綻している可能性もあるかもしれません。 Validator.nu (X)HTML5 Validator https://html5.validator.nu/ 一度Validatorも通して、エラーがあるなら全て解消してください。
s.k

2016/10/31 13:15

sii_sideさん ご丁寧にありがとうございます! 現物を見ていただきたいのは山々ですが、 おんぶにだっこするわけにはいかないので自分でもう少し取り組んでみますね。 何個か試してみたい施策があります。 アドバイスを受ける中で思いついたものです。 それと、先ほどのファイル(micropost.html.erb)ではうまく表示されなかったのですが、 そのファイルを部分テンプレートで呼び出しているファイルはうまく機能していました。 何が違うのかを比較・検証し改善できるようにコードを書き直してみます。 ちなみに追記しておきました! 今日、できなかったら違う質問として再度投稿してみようかとも思います。 .moreの中に確認したところ.moreはありませんでした! validator試しました。 ただ、rubyの<%%>が入っているので違う結果になるのかなと思いました。 がんばります!
sii_side

2016/10/31 18:40

ValidatorにかけるべきはRubyのソースではなく、ブラウザが受け取った処理後のソースです。
s.k

2016/10/31 23:17

わかりました!
s.k

2016/10/31 23:23

500 Internal Server Error html5.validatorを通しましたらこのような結果がでてきました。 問題ないということなんでしょうか…
think49

2016/11/01 02:18

500 Internal Server Errorはサーバの内部エラーで正しく実行できていません。 時間をおいてもう一度試してみてください。
s.k

2016/11/01 02:19

thinkさん ありがとうございます! かしこまりました!
s.k

2016/11/01 02:20

think49さん
think49

2016/11/01 02:41

コメントは編集することが出来ます。 コメントの名前がある行にマウスカーソルを合わせると右上に [V] ボタンが出てくるのでそれをクリックし、[編集] を選択してください。 以前は [編集] とか分かりやすいボタンが配置されていた気がするのですが、いつの間にかわかる人にしかわからないUIになってしまってますね…。
s.k

2016/11/01 02:49 編集

think49さん そんな機能があったんですね! 今、試したらできました! そうですね… ちょっと、その件、teratailさんに相談してみます! ↓ 意見伝えて置きました。
guest

0

自己解決

自己解決欄で投稿していますが、kei344さんに解決していただきました。

<%= render @feed_items %>

このコードが_micropost.html.erbパーシャルを呼び出します。
そして、@micropostsがhtmlで出力されます。

この時、jsのコードを_micropost.html.erbパーシャル内に書いてしまうことで、
jsのコードも一緒に何度も呼び出されることが、<span>の多重構造を引き起こし、
「もっと読む」機能の妨げになっていました。

そこで、jsコードを

<%= render @feed_items %>

このコードが書かれているファイル内に記載します。
すると、解決できました。

kei344さん、そしてみなさんありがとうございます!

投稿2016/11/01 02:14

編集2016/11/01 05:21
s.k

総合スコア423

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/11/01 02:28

> view内にjsを書くこと。 > そのjs内でdocumentを使用することがエラーの原因になっていたものと思われます… そこが本当に問題なのであれば、JavaScriptを外部化してみればいいのでは? Rubyであれブラウザに来た時点ではただのHTMLです。そこのUIをJavaScriptで操作することは普通だと思いますよ。
s.k

2016/11/01 02:44

kei344さん 返信ありがとうございます! javascriptの外部化とはファイルを別で分けasset/javascriptに置く。 <%= javascript_include_tag %>などで読み込むといった作業のことでしょうか? 一応、あちらの回答者には、ajaxとform_buildingを使ってみてはどうか? という提案を受けました。 正直、どれが最善の手段かわからないのと、手段を選んだとして具体的にどうやるのかわからないという点で困惑しております(´;ω;`) jsとrailsの組み合わせは経験がなくこの有様です…
kei344

2016/11/01 02:53

文字を隠す程度のことでAjaxは不要だと思いますよ。 HTMLの出力がおかしいと、JavaScriptも思い通りに動かない場合があります。 「<li id="micropost-」2つ分くらいの「出力されたHTML(ブラウザで「ページのソースを表示」)」を質問文に追記してください。デベロッパーツールでの表示でもRubyのコードでもなく「ページのソースを表示」で得たコードです。 そのコードで問題が無ければ別の箇所で崩れている可能性が高いです。
s.k

2016/11/01 03:08 編集

kei344さん 【「ページのソースを表示」で得たコード】を追記しました。 質問したときのコードに戻しましたので、<script>はview内に書かれています。 それと「名前なので伏せます」というのは個人を特定できる情報でしたので、このような表示にさせていただきました! 追記した内容とkei344さんが求めたものが違っていればご指摘ください。
kei344

2016/11/01 03:24

<script>$(document).ready(function() {/*略*/}<script>はループの中に入れないでください。それを解消すれば問題は解決すると思います。
s.k

2016/11/01 03:37

すいません。 「ループの中に入れない」の意味を確認させてください… ①外部ファイル化する ②<li id="micropost-13"></li>の中に<script>~</script>を入れない のどちらでしょうか?また、どちらでもないのでしょうか? ②であれば、すでに<li></li>の中ではないので、おそらく①の方なのかなと思ったのですが…((+_+))
kei344

2016/11/01 03:40

Rubyはわかりませんが、繰り返し要素を出力する部分のことを「ループ」と表現しました。 li要素の後ではなく、</body>の直前に、ページに1箇所だけ<script>$(document).ready(function() {/*略*/}<script>を入れてください。
s.k

2016/11/01 03:55

わかりました! 今、追記したのですが、ループ処理をしているのは【_feed.html.erb】の中の@feed_itemsですので、その外側に作ります! 今から試しますね!
s.k

2016/11/01 03:55

できました!!!!!!!!!!!!!
kei344

2016/11/01 05:05

よかったね。
s.k

2016/11/01 05:14

ありがとうございます!
guest

0

.moreの幅や高さをCSSで指定していませんか?

投稿2016/10/31 08:17

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

s.k

2016/10/31 08:28

kei344さん お返事ありがとうございます! ただいま、.moreがcssで指定されていないか確認をしてきましたが、 指定はされていませんでした。。。
gin

2016/10/31 08:49 編集

25文字を指定しているのに14文字しか出ないもの不思議ですね。 あ、質問に書いてた…
gin

2016/10/31 08:51

Rubyさっぱりですけど、「<%= micropost.content %>」で出てきたときにすでに14文字しか出てきてないのでは?<そこで制限かかってる?
s.k

2016/10/31 08:56

scriptをとり、投稿を通常表示で数えたところ16文字でした!
s.k

2016/10/31 09:02

cssコード全体を質問に載せてみました。
kei344

2016/10/31 09:38

出力されたHTML(ブラウザで「ページのソースを表示」)を質問文に追記ください。
s.k

2016/10/31 09:52

kei344さん 追記しました!
kei344

2016/10/31 09:55

JavaScript のエラーなどありますか? 【開発者ツールを使おう! カスタマイズするphpファイルを探す-その1 | RYUS blog】 http://ryus.co.jp/blog/customize-php-search-1/ 【Chrome デベロッパーツールの使い方概要 | Web Tips】 http://weback.net/utility/1410/ あと、Testではなくどこからどこまでが切れたかわかるように数字やアルファベットで確認してみてください。 123456789abcdefghijklmnopqrstuvwxyz
s.k

2016/10/31 10:00

kei344さん エラーはありませんでした! ありがとうございます! 今、試します!
s.k

2016/10/31 10:10

すいません。 javascriptですが、詳しくみたらよくわからないことになっていました。。。 追記しました。
kei344

2016/10/31 10:12

spanが多重になっていますね。出力方法にそもそも問題があるようです。 ついでですが、spanの中にdivを入れる構造にされていますが、文法的には間違っています。
s.k

2016/10/31 10:14

なるほど… spanの件、承知しました!( ゚Д゚)
s.k

2016/10/31 10:21

123456789abcdefghijklmnopqrstuvwxyz ですが、 123456789abcde までしか表示されませんでした。 追記してあります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問