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

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

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

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

jQuery

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

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

1回答

2716閲覧

チャットアプリで、最新のメッセージを常に表示させたい

T_Furuta

総合スコア25

JavaScript

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

jQuery

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

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2020/04/10 06:06

編集2020/04/10 07:57

先日、mBaaSとPusherを使ったチャットアプリで、チャットの内容がすぐに反映されないと言うタイトルで下記質問をさせていただいた者です。
その後、開発を進めていったのですが、最新のメッセージを常に表示するように機能を追加したのですが、上手く動作しませんでした。

ソースコードとしては、下記となります。
chat.html

html

1<ons-page id="chat"> 2 <ons-toolbar> 3 <div class="left"><ons-back-button>Back</ons-back-button></div> 4 <div class="center"></div> 5 </ons-toolbar> 6 <input type="hidden" id="channelId" /> 7 <div id="your_container"> 8 <!-- チャットの外側部分① --> 9 <div id="bms_messages_container"> 10 11 <!-- タイムライン部分② --> 12 <div id="bms_messages"> 13 <div id="chats"></div> 14 </div> 15 16 <!-- テキストボックス、送信ボタン④ --> 17 <div class="send-area"> 18 <ons-input id="message" placeholder="メッセージ"></ons-input> 19 <ons-button onclick="send()" modifier="quiet">送信</ons-button> 20 <ons-button onclick="positiondata()" modifier="quiet">位置確認</ons-button> 21 </div> 22 </div> 23 </div> 24</ons-page>

style.css

CSS

1/**/ 2 3.send-area { 4 padding: 0 5px; 5 box-sizing: border-box; 6 line-height: 49px; 7 position: fixed; 8 bottom: 0px; 9 width: 100%; 10 border-top: solid 1px #ccc; 11 } 12 13 .send-area ons-input { 14 display: inline-block; 15 position: relative; 16 width: calc(100% - 60px); 17 } 18 19 .send-area input { 20 vertical-align: middle; 21 position: relative; 22 width: 98%; 23 } 24 25 #your_container{ 26 /* 高さや幅など、好きな様に設定 27 bms_messages_containerの方で、縦横いっぱいに広がってくれるので、 28 ここで充てた高さと横幅がそのままスタイルになる仕組み */ 29 30 height:80%;/*ここはご自由に*/ 31 width: 100%;/*ここはご自由に*/ 32} 33/* チャットの外側部分① */ 34#bms_messages_container{ 35 height: 100%;/*your_containerに対して100%になる */ 36 width: 100%;/*your_containerに対して100%になる */ 37 background-color: #eee; 38} 39 40/* タイムライン部分② */ 41#bms_messages { 42 overflow: auto;/* スクロールを効かせつつ、メッセージがタイムラインの外に出ないようにする */ 43 height:100%;/*テキストエリアが下に張り付く様にする*/ 44 border-right: 1px solid #ddd; 45 border-left: 1px solid #ddd; 46 background-color: #eee; 47} 48 /* メッセージ全般のスタイル */ 49 .bms_message { 50 margin: 0px; 51 padding: 0 14px;/*吹き出しがタイムラインの側面にひっつかない様に隙間を開ける*/ 52 font-size: 16px; 53 word-wrap: break-word;/* 吹き出し内で自動で改行 */ 54 white-space: normal;/*指定widthに合わせて、文字を自動的に改行*/ 55 } 56 .bms_message_box{ 57 margin-top: 20px;/*上下の吹き出しがひっつかない様に隙間を入れる*/ 58 max-width: 100%;/*文字が長くなった時に吹き出しがタイムラインからはみ出さない様にする*/ 59 font-size: 16px; 60 } 61 .bms_message_content{ 62 padding: 10px;/*文字や画像(コンテンツ)の外側に隙間を入れる*/ 63 } 64 /* メッセージ1(左側) */ 65 .bms_left { 66 float: left;/*吹き出しをbms_messagesに対して左寄せ*/ 67 line-height: 1.3em; 68 } 69 .bms_left .bms_message_box { 70 color: #fff;/*テキストを白にする*/ 71 background: rgb(0, 145, 197); 72 border: 2px solid rgb(0, 145, 197); 73 /* border-radius: 30px 30px 30px 0px; 左下だけ尖らせて吹き出し感を出す*/ 74 margin-right: 50px;/*左側の発言だとわかる様に、吹き出し右側に隙間を入れる*/ 75 } 76 /* メッセージ2(右側) */ 77 .bms_right { 78 float: right;/*吹き出しをbms_messagesに対して右寄せ*/ 79 line-height: 1.3em; 80 } 81 .bms_right .bms_message_box { 82 color: #fff;/*テキストを白にする*/ 83 background: rgb(0, 154, 87); 84 border: 2px solid rgb(0, 154, 87); 85 /*border-radius: 30px 30px 0px 30px;右下だけ尖らせて吹き出し感を出す*/ 86 margin-left: 50px;/*右側の発言だとわかる様に、吹き出し左側に隙間を入れる*/ 87 } 88 .bms_right .bms_message_time { 89 margin-left: 50px;/*右側の発言だとわかる様に、吹き出し左側に隙間を入れる*/ 90 } 91 /* 回り込みを解除 */ 92 .bms_clear { 93 clear: both; /* 左メッセージと右メッセージの回り込み(float)の効果の干渉を防ぐために必要(これが無いと、自分より下のメッセージにfloatが影響する) */ 94 } 95 96/* テキストエリア、送信ボタン④ */ 97#bms_send { 98 background-color:#eee;/*タイムラインの色と同じにする*/ 99 border-right: 1px solid #ddd; 100 border-left: 1px solid #ddd; 101 border-bottom: 1px solid #ddd; 102 height: 48px; 103 padding: 4px; 104} 105 #bms_send_message{ 106 width: calc(100% - 75px);/*常に送信ボタンの横幅を引いたサイズに動的に計算*/ 107 line-height: 16px; 108 height: 48px; 109 padding: 14px 6px 0px 6px;/*文字がテキストエリアの中心になる様に隙間調整*/ 110 border: 1px solid #ccc; 111 border-radius: 4px;/*角丸*/ 112 text-align: left;/*文字を左寄せ*/ 113 box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.2) inset;/*内側に影を入れてテキストエリアらしくした*/ 114 box-sizing: border-box;/*paddingとborderの要素の高さと幅の影響をなくす(要素に高さと幅を含める)*/ 115 116 } 117 #bms_send_btn { 118 width: 72px; 119 height: 48px; 120 font-size: 16px; 121 line-height: 3em; 122 float: right;/*bms_sendに対して右寄せ*/ 123 color: #fff; 124 font-weight: bold; 125 background: #bcbcbc; 126 text-align: center;/*文字をボタン中央に表示*/ 127 border: 1px solid #bbb; 128 border-radius: 4px;/*角丸*/ 129 box-sizing: border-box;/*paddingとborderの要素の高さと幅の影響をなくす(要素に高さと幅を含める)*/ 130 } 131 #bms_send_btn:hover { 132 background: #13178E; /*マウスポインタを当てた時にアクティブな色になる*/ 133 cursor: pointer;/*マウスポインタを当てた時に、カーソルが指の形になる*/ 134 } 135

app.js

function task1(data) { return new Promise(function (resolve, reject) { connectPusher(data.userName, data.chatId); loadChat(data.userName, data.chatId); console.log('task1 完了'); resolve('task完了'); }); }; // チャット画面を表示したときの処理 $(document).on('show', (event) => { if (event.target.id === 'chat') { const data = event.target.data; $('#channelId').val(data.chatId); Promise.resolve() .then(task1.bind(this, data)) .then(function() { return new Promise(function (resolve, reject) { // スクロール位置の取得 var scrollPos = $('#bms_messages').offset().top; console.log(scrollPos); $('#bms_messages').animate({scrollTop: scrollPos}); resolve('成功'); }); }); } }); const positiondata = () => { // スクロール位置の取得 var scrollPos = $('#bms_messages').scrollTop(); console.log(scrollPos); };

現在のつまずいている場所としては、app.jsの中の49行目
var scrollPos = $('#bms_messages').offset().top;
で、最新のメッセージがある位置(最下部)の値を取りたいのですが、ネットで調べてもよくわかりませんでした。
ちなみに、このscrollPosに、100と言ったリテラル値を入れると正常に動作します。
試しに、
var scrollPos = $('#bms_messages').offset().bottom;
var scrollPos = $('#bms_messages').weight();
と試して見たのですが、値がundefinedになってしまい、ほしい値が入ってきません。

もう一点確認したい点としては、同じくapp.jsの中の51行目
$('#bms_messages').animate({scrollTop: scrollPos});
で今は、animateを使用しているのですが、本当はスクロールする画面を見せず、始めから一番最新のメッセージ
が見れるようにしたいのですが、その方法が分かりませんでした。
こちらに関しては、ネットを検索してみても、解決方法が見つかりませんでした。

ご教授いただけると助かります。よろしくお願いします。

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

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

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

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

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

guest

回答1

0

自己解決

自己解決しました。

var scrollPos = $('#bms_messages').offset().top;
の部分に関してですが、メッセージを取得する時、メッセージ数×リテラル値(今回の場合は100としました)を予め保持しておき、その値をscrollPosに当てはめる事で最終の位置を取得するようにしました。

var scrollPos = msgcnt * 100;

また、
$('#bms_messages').animate({scrollTop: scrollPos});

に関しては、
$('#bms_messages').scrollTop(scrollPos );
と言う事が出来る事が分かったため、上記のように変更いたしました。
以上です。
ご助力ありがとうございました。

投稿2020/04/15 01:39

T_Furuta

総合スコア25

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問