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

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

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

Meteorは、クライアント又はサーバーサイドのアプリケーションをJavaScriptで開発するためのプラットフォームです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

2036閲覧

【meteor】【チャットツール】コメントを送信した時のコメント表示順と表示位置を指定したい

ThugumiIshimaru

総合スコア10

Meteor

Meteorは、クライアント又はサーバーサイドのアプリケーションをJavaScriptで開発するためのプラットフォームです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2017/03/30 04:54

動作環境

PC:Mac
フレームワーク:Meteor
データベース:MongoDB

やりたいこと

現状の挙動は、コメントを送信した際に、
コメントが表示されるdivの上から下に送信したコメントが増えていくのですが、
理想としては、slackのように
コメントを送信したら、コメントを送信するフォームの上に最新のコメントが
表示されるようにしたいです。

参考キャプチャ

現状
あああが最古で、
おうおうおうおうおうおうおうおうおが最新のコメントです。

これの表示位置を、
理想
にしたいのです。

課題

考えとしましては、
HTMLのdiv内に表示されるコメントの順を上からではなく、
下からsort順にしたら良いかもしれないと思ったのですが、
自分の考えは合っているのか、書き方が分からない...

といった状況です。

みなさまの知見を、ご教授いただけると幸いです。
よろしくお願いいたします。

以下にjQueryとHTMLのソースを添付いたします。

ソース

body.js

1/* コメント投稿 */ 2Template.body.helpers({ 3 comments() { 4 5 return Comments.find({}, { sort: { createdAt: -1 }}); 6 }, 7}); 8 9Template.body.events({ 10 'submit form'(event) { 11 event.preventDefault(); 12 13 var moment = require("moment"); 14 const comment = $('.post-comment').val(); 15 const tag = comment.match(/Q\./) ? 'question' : ''; 16 17 // Insert a comment into the collection 18 if (comment.length > 0) { 19 Comments.insert({ 20 comment, 21 tag, 22 createdAt: moment.utc("YYYY/MM/DD HH:mm:ss").add("HH",9).format(), // current time 23 }); 24 // Clear form 25 $('.post-comment').val(''); 26 console.log(comment); 27 28 } 29 }, 30});

body.html

1<body> 2 <div class="wrapper"> 3 <div class="info-area"> 4 <span class="header">#chat-app</span> 5 <span class="header-comment">- 質問あったら<strong>「Q.」</strong>をつけてね! -</span> 6 </div> 7 8 <div class="show-comment-area"> 9 {{ #each comments }} 10 {{ > comment }} 11 {{ /each }} 12 </div> 13 14 <div class="post-comment-area"> 15 <form> 16 <input class="post-comment" placeholder="Message send to #chat-app" /> 17 <button class="btn" type="submit" value="send">Send</button> 18 </form> 19 </div> 20 </div> 21</body> 22 23<template name="comment"> 24 <section class="section-comment"> 25 <p class="{{ tag }}">{{ comment }}</p> 26 <p class="text-muted small">{{ createdAt }}</p> 27 </section> 28</template>

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

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

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

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

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

guest

回答1

0

{{ createdAt }}の表示部分にInvalid dateと表示されているので、データベースに登録する際の
moment.utc("YYYY/MM/DD HH:mm:ss").add("HH",9).format(), // current time
のところを調べてみてはどうでしょうか。ここが正しく設定されていれば、
return Comments.find({}, { sort: { createdAt: -1 }});
でソートされると思います。

投稿2017/04/03 02:45

november

総合スコア39

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問