シェア:
){kind=small}
フレンドリーな技術教育者、家族思い、多様性チャンピオン、たぶんちょっと議論しすぎ。元バックエンドエンジニア。JavaScript（フロントエンドまたはバックエンド）、素晴らしいVue.js、DevOps、DevSecOps、JamStackのことなら何でも。DEV.toのライター
BootstrapでシンプルなメッセージングUIを作る
所要時間：17 分
ブートストラップもともとはTwitter Blueprintという名前だった。 マーク・オットー(マーク・オットー）と ファット(Jacob Thornton）によって開発されました。今では、世界で最も人気のあるフロントエンド・フレームワークであり、オープンソースプロジェクトである。いまだに多くのフロントエンド開発者からは近道と見なされているが、一貫性のあるフレンドリーなユーザーエクスペリエンスを世界中のすべての開発者の手に届けるという重要な役割を担っている。
デザインウェブにはメッセージングUIの様々な例が溢れていますが、開発者には、メッセージングUIを素早く簡単に実装できるフレームワークの選択肢がありません。 ブートストラップのような簡単なものに依存し、カスタムCSSやJavaScriptを多用しないメッセージングUIを提供するフレームワークの選択肢がない。あなたは あなたはメッセージングUIは のためのメッセージングUIを見つけることができます。のシンプルな標準コンポーネントを使うことで、使いやすくしているようです。 Bootstrapライブラリにある単純な標準コンポーネントを使うことで、使いやすくしているようです。
このガイドでは、既存のチャットアプリケーションを Bootstrap 4を使って、既存のチャットアプリケーションを拡張します。
その デモアプリケーションと 完成例は現在GitHubで見ることができる。
始めるには、NodeとNPMをインストールする必要があります。このガイドではNode 8とNPM 6を使用します。これらがインストールされ、最新であることを確認してください。
NodeとNPMの両方が正しいバージョンでインストールされている必要があります。nodejs.orgにアクセスして、正しいバージョンをインストールしてください。
アプリケーションをセットアップするには、Vonage CLIをインストールする必要があります。ターミナルでNPMを使ってインストールする。
To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.
This tutorial also uses a virtual phone number. To purchase one, go to Numbers > Buy Numbers and search for one that meets your needs.
無料のVonageアカウントにサインアップします。ダッシュボードにあるAPIキーとシークレットを使ってVonage CLIをセットアップします。
Vonage CLIにはプラグインがあり、インストールすると追加機能を提供します。このチュートリアルではConversationsを扱うので、そのプラグインをインストールするコマンドを以下に示します：
gitを使って デモ・アプリケーションをGitHubからクローンできます。
gitコマンドが苦手な方もご安心ください。このガイドには、プロジェクトをZIPファイルとしてダウンロードする手順が含まれています。
この を参照してください。.
デモ・アプリケーションは、以下の基本的な実装にすぎません。 VonageのConversation Client SDKの基本的な実装です。チャットの基本的な実装であり、WebRTCを迅速かつ簡単に実装するためのJavaScriptライブラリです。
このガイドをわかりやすくするために、デモ・アプリケーションをGitHubから直接クローンしてください。
gitコマンドに不慣れな方は、以下をご利用ください。 デモ・アプリケーションをzipファイルとしてダウンロードしをダウンロードしてローカルで解凍してください。
クローンまたは解凍したら、新しいデモ・アプリケーション・ディレクトリに移動します。
npmの依存関係をインストールします。
環境ファイルを使ってアプリケーション・ポートを設定する。サンプル・ファイルをコピーしてください：
次に、環境ファイル .envを編集し、ポートを3000に設定する。
前回のコマンドでインストールされた他のパッケージの中に nodemonというパッケージがある。
標準的な方法でアプリケーションを起動するには、以下を実行する：
nodemonの代わりにアプリケーションを起動するには、以下を実行する：
ヒントこのチュートリアルの続きで
nodemonでアプリケーションを実行している場合、私がアプリケーションの再起動を勧めるたびに、その必要はありません。nodemonがやってくれるからです。しかし、アプリケーションの再認証が必要な場合、セッション情報はメモリに保存され、他のストレージを使用するように設定されていないため、再認証を行う必要があります。
どの方法でアプリケーションを実行するにしても、一度実行すれば、お気に入りのブラウザーで試すことができ、ローカルで実行されているアプリケーションを見つけることができるはずです： http://localhost:3000.
A blank, broken Chat application
ブラウザのコンソールを見ると、VonageのAPIエラーが表示される。
Vonageに接続し、サービスからメッセージを送受信するには、デモ・アプリケーションを設定する必要があります。
まず、RTC（リアルタイム通信）機能を持つVonageアプリケーションを作成します。イベントURLは、Vonageサービス上で発生したイベントのライブログとなります。例えば、ユーザーの参加/退出、メッセージの送信、オーディオの有効化（有効化したい場合）などです。
次に、Vonage Conversationを作成します。Vonage Conversationはチャットルームのような役割を果たします。または、メッセージやイベントのコンテナ。
次に、自分用のユーザーを作成する。
注意このデモでは、2人のユーザー間でのチャットは行いません。他のガイドでは、複数のユーザー間で会話を作成する方法を紹介しています。このガイドでは、シンプルかつ魅力的な方法でメッセージ UI をスタイリングすることに重点を置いています。
次に、新しいユーザーを会話に追加します。ユーザーはアプリケーションのメンバーでも構いませんが、会話に参加する必要があります。
最後に、新しいユーザーにトークンを生成します。このトークンは、アプリケーションにアクセスするときのユーザーを表します。このアクセストークンはユーザーを識別するため、このトークンを使用する人は正しいユーザーであるとみなされます。
実際には、このトークンを使ってアプリケーションを設定します。本番環境では、トークンは厳重に管理され、秘密にされ、クライアント・アプリケーションに公開されるとしても非常に注意深くされるべきです。
必要なパーツをすべて生成したら views/layout.hbsファイルを編集し、ここに示すJavaScriptを見つける：
<script>
var userName = '';
var displayName = '';
var conversationId = '';
var clientToken = '';
</script>上記のコマンドで生成した値でコンフィグを編集する。
<script>
var userName = 'luke'; // <USER_NAME>
var displayName = 'Luke Oliff'; // <DISPLAY_NAME>
var conversationId = 'CON-123...y6346'; // <CONVERSATION_ID>
var clientToken = 'eyJhbG9.eyJzdWIiO.Sfl5c'; // this will be much much longer
</script>これで設定完了です。アプリケーションを再起動します。 同じアプリケーションのURL.
最初に気づくのは、あなたがユーザーとの会話に参加したというセリフです。
An almost blank, working Chat application
その後、フォームを使ってメッセージを送ることができる。
Sending some messages to our working Chat application
基本的なアプリケーションが完成したら、次はBootstrapを使ってアプリケーションをスタイリングしましょう。
このガイドの各ステップは、個別に 完成した example ブランチにコミットされています。そのため、作業中にエラーが発生した場合は、いつでも コミットそのものを参照してください。.各ステージの関連コミットへのリンクもあります。
まずは views/layout.hbsファイルを編集し、Bootstrap CSS と JavaScript リソースを含めるために、アプリケーションのメインデザインを修正することから始めます。
に続く ブートストラップ入門ガイドに従って <link>タグを <head>の中にこのタグを追加します。以下の <link>タグは一例です。 コミットを参照するか、Bootstrap入門ガイドの <link>タグを使用することができます。
<!-- views/layout.hbs -->
<!DOCTYPE html>
<html>
<head>
<!-- //... -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/..." integrity="..." crossorigin="anonymous">
<!-- //... -->
</head>
<!-- //... -->
さらに、推奨されるBootstrapとJavaScriptのライブラリも必要です。これらは、おそらくここでは必要ありません。しかし、Bootstrapコンポーネントの多くは、適切に機能するためにJavaScriptの使用を必要とし、Popper.jsとjQueryにも依存しています。ここでも コミットを参照するか、または <script>タグを参照してください。
<!-- views/layout.hbs -->
<!-- //... -->
<!-- //... -->
<!-- //... -->
<script src="https://code.jquery.com/..." integrity="..." crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js..." integrity="..." crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/..." integrity="..." crossorigin="anonymous"></script>
</body>
</html>
アプリケーションを再起動して もう一度見てみましょう.これらの変更の影響が最小限であることがわかります。
Styled the working Chat application with Bootstrap
アプリケーションにBootstrapが含まれるようになったので、メイン・レイアウトに <nav>とコンテナをメインレイアウトに追加できます。
まだ編集中 views/layout.hbs次のコードを追加して、既存の {{{body}}}式をラップします。
<!-- views/layout.hbs -->
<!-- //... -->
<!-- //... -->
<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">{{title}}</a>
</nav>
<div class="container-fluid">
<div class="row">
<main role="main" class="col-md-12">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Bootstrap Chat</h1>
</div>
{{{body}}}
</main>
</div>
</div>
<!-- //... -->
<!-- //... -->ファイルの正確な変更点を見たい場合は コミット.
ナビバーは追加されましたが、チャットはスタイルなしのままです。アプリケーションを再起動して を再起動してください。.
Added navbar and container to Chat application
メッセージングUIはメッセージのリストなので、意味的にリスト要素を使うことになります。 <ul>を使うことになります。
編集 views/index.hbsを編集し <div id="messageFeed">を順序なし（箇条書き）リスト要素に変更する。 <ul>に変更します。この list-unstyledクラスはBootstrapクラスで、ネイティブのリスト・スタイリングから箇条書きとインデントを削除します。
<ul class="list-unstyled" id="messageFeed">
</ul>リストに適切なセマンティックマークアップを使うことで、テキストブラウザやスクリーンリーダーで情報が正しく表示されるという利点があります。あなたのメッセージも最終的にはリストアイテム <li>要素にもなります。
編集中 views/index.hbsを編集している間に、以下の置換を行ってもよい。この2つの <input>要素を見つける。
<input type="text" id="messageTextarea">
<input type="button" id="send" value="Send" />
このマークアップには、Bootstrapボタングループ、スタイル付きテキストエリア、送信ボタンが含まれています。
<div class="input-group mb-3">
<input type="text" class="form-control" id="messageTextarea">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="send">Send</button>
</div>
</div>コミット コミットをご覧ください。
アプリケーションを再起動して もう一度見てみましょう.メッセージが追加される方法は変わりましたが、スタイリングはあまり変わっていません。しかし、少なくともフォームはメッセージングUIに期待されるものに近づきました。
Chat application now using list items and chat-style inputs
マークアップの変更が終わり、レイアウトで奇妙なことが起こっている。
これら3つのCSSの変更は コミットから public/stylesheets/style.css.
最初のCSS変更は、メインコンテンツコンテナに padding-topをメインコンテンツコンテナに追加し、ナビバーの高さ（40px）とBootstrapのデフォルトスタイル（8px）に基づく適切な空白を許容することです。
/* ... */
[role="main"] {
padding-top: 48px; /* space for fixed navbar (40px) and margin (8px) */
}アプリケーションを再起動して 試す.
Fixed header margins in chat application
この変更により messageFeedを変更することで、アウトメッセージを含む要素の高さが、ビューポートの高さからナビバー（48px）、メインタイトルバー（71px）、フッター（まだスタイリングされていませんが、53px）の高さを引いた値の100%になるように修正されます。
/* ... */
#messageFeed {
height: calc(100vh - 172px); /* space for fixed navbar (48px), "main" title (71px), footer (53px) */
overflow-y: scroll; /* vertical scroll for the message feed */
}アプリケーションを再起動して 試す.のオーバーフロースクロールを見るには messageFeedのオーバーフローのスクロールを見るには、もう少しメッセージを送る必要があります。
Chat application message feed now scrollable
この最後のCSS変更は <footer>に対するものです。これらをウィンドウの一番下、全幅に固定します。高さ（53px）を設定し、背景色を指定し、Bootstrapテーマで定義されている標準のエッジマージンを追加します。
/* ... */
#messages footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%; /* 100% of page width */
padding: 0 15px 15px 15px; /* standard edge margin (15px) */
height: 53px; /* space for input height (38px) + bottom padding (15px) */
background-color: #fff;
}アプリケーションを再起動して 試す.
Chat application inputs now fixed to footer
デモ・アプリケーションに加える最後の変更は、デモに付属するJavaScriptです。これらの変更はすべて public/javascripts/chat.jsファイルで行います。
ファイルを編集して memberJoined関数を見つける。以下のように、リスト・アイテム <li>要素を返すように変更してください。
// public/javascripts/chat.js
//...
memberJoined(member, event) {
const date = new Date(Date.parse(event.timestamp));
return `<li class="my-2 text-center">` +
`<p>${member.display_name} joined the conversation <small>@ ${date.toLocaleString('en-GB')}</small></p>` +
`</li>`;
}
//...JavaScript関数がどのように変更されたかを見るには、以下をご覧ください。 コミット.
アプリケーションを再起動し、再度 アプリケーションのURL.これで、ユーザーが参加したメッセージがメッセージフィードの中央にきれいに表示されていることがわかります。
Chat application events now using line items
同じファイルで senderMessage関数を見つける。を返すように編集する。 <li>要素を返すように メディア・オブジェクト.メディア・オブジェクトはメッセージに似ていて、タイトル（作者とメタデータ）、コンテンツ（メッセージ）、そしてオプションで画像を持ちます。
この例では、出力を決定する条件がある：
現在の
user.nameがメッセージuser.name- From-Me.テキストを右寄せにしたMediaオブジェクト。
user.nameがメッセージuser.name- To-Me.
// public/javascripts/chat.js
//...
senderMessage(user, sender, message) {
const date = new Date(Date.parse(message.timestamp))
var output = '';
if (user.name === sender.user.name) {
output = `<li class="media my-3">` +
`<div class="media-body">` +
`<h5 class="mt-0 mb-1">${sender.display_name} <small>@ ${date.toLocaleString('en-GB')}</small></h5>` +
message.body.text +
`</div>` +
`</li>`;
} else {
output = `<li class="media my-3">` +
`<div class="media-body text-right">` +
`<h5 class="mt-0 mb-1">${sender.display_name} <small>@ ${date.toLocaleString('en-GB')}</small></h5>` +
message.body.text +
`</div>` +
`</li>`;
}
return output;
}
//...このJavaScript関数がどのように変更されたかを見るには、以下をご覧ください。 コミット.
アプリケーションを再起動し、デフォルトのURLを使ってもう一度試してください： http://localhost:3000.これで、メッセージがきれいにスタイリングされていることがわかります。
Now using from-me and to-me message style in chat application
ユーザープロフィールがないアプリケーションでは、アバターがないため、少し空虚な印象を与えます。そこで、Mediaオブジェクトの外観を完成させ、現代のチャットアプリケーションのような効果を与えるために、次のようなプレースホルダーアバターサービスを使うことができます。 adorable.ioのようなアバターサービスを使うことができます。
AdorableはURLの一部として任意の文字列を受け取る、 https://api.adorable.io/avatars/64/my-string-here.pngという文字列を受け取り、変な顔を返します。ユーザー間で変わるプレースホルダ画像を追加するのに最適な方法です。
そこで、同じファイルを編集したまま、もう一度 senderMessage関数に戻り、冒頭の行項目 <li>要素の後ろに次の行を追加します。 フロムミー.
// public/javascripts/chat.js
//...
`<img src="https://api.adorable.io/avatars/64/${btoa(sender.display_name)}.png" class="mr-3" alt="" />` +
//...
そして、次の行を この行を側の行を追加する。 </li>要素を追加する。
// public/javascripts/chat.js
//...
`<img src="https://api.adorable.io/avatars/64/${btoa(sender.display_name)}.png" class="ml-3" alt="" />` +
//...
これらの路線の決定的な違いは、一方には mr-3クラスがあり、一方は ml-3クラスを持っていることです。一方は右側に余白のある左揃えの画像用。もう一方は、左側に余白のある右寄せの画像です。これらを混同すると、少し奇妙に見えるかもしれない。そこで このコミットを見てください。
変更に満足したら、再起動してください。 アプリケーションを見てみましょう.
Adorable.io avatars in chat application
従来のメッセージングUIでは、最新のメッセージが下に表示され、古いメッセージを見るには上にスクロールする。デモ・アプリケーションもこのようにメッセージとイベントを順序付けます。そこで、正しいコンテンツに集中するために、次のコードを追加します。このコードは、メッセージ・フィードがすでに一番下にあった場合に限り、新しいメッセージが来たときに自動的にメッセージ・フィードを一番下にスクロールします。そうすれば、古いメッセージを見るために上にスクロールしても、何もしません。
つの新しい関数を chat.jsファイルに追加する。最初の関数は messageFeedを返す。もうひとつは messageFeedする。
// public/javascripts/chat.js
//...
isFeedAtBottom() {
return (this.messageFeed.offsetHeight+this.messageFeed.scrollTop)===this.messageFeed.scrollHeight;
}
scrollFeedToBottom() {
this.messageFeed.scrollTop = this.messageFeed.scrollHeight;
}
//...次に、新しいメッセージが送信されたときと、会話に新しいメンバーが追加されたときのイベントリスナーを変更します。どちらの場合も、行を追加する前にメッセージフィードのスクロール位置を記録します。そして、変更前のコンテキストに基づいてスクロールします（またはスクロールしません）。
// public/javascripts/chat.js
//...
setupConversationEvents(conversation, user) {
//...
conversation.on('text', (sender, message) => {
var feedAtBottom = this.isFeedAtBottom();
// ...
if (feedAtBottom) {
this.scrollFeedToBottom();
}
})
conversation.on("member:joined", (member, event) => {
var feedAtBottom = this.isFeedAtBottom();
// ...
if (feedAtBottom) {
this.scrollFeedToBottom();
}
})
//...
}
//...
デモ・アプリの最後の変更は、ページが読み込まれたときにメッセージ・フィードを一番下までスクロールさせることです。そこで、メッセージフィードに eventsHistoryを追加した行の後ろにthis.messageFeed.innerHTML = eventsHistory + this.messageFeed.innerHTML)を追加します。 this.scrollFeedToBottom();.
// public/javascripts/chat.js
//...
showConversationHistory(conversation, user) {
// ...
// ...
this.messageFeed.innerHTML = eventsHistory + this.messageFeed.innerHTML;
this.scrollFeedToBottom();
// ...
// ...
}
//...この変更を正しく適用したことを確認するには、次のようにします。 コミットを見る.
変更に満足したら、再起動してください。 アプリケーションを見てみましょう.
Chat application message feed now scrolls to bottom
もし Iチャット・アプリケーションを作るとしたら 私がこのようにしたい。
メッセージングUIを構築するためのこのガイドがあなたの役に立つことを願っている。このガイドには From-meと To-meのアライメント、下への自動スクロール、ユーザーアバターのプレースホルダなどの基本的なことが含まれています。
これらの UI テクニックは、次のような Vonage Conversation Client SDK チュートリアルに応用できます。 既存のチャットアプリケーションに音声機能を追加する, Typeformでチャットに登録するおよび JavaScript Client SDKの概要.
他のガイドの中には、複数のユーザー間でメッセージを送信するものもあります！見栄えの良いメッセージングUIを使って、複数のユーザーがお互いにメッセージを送り合い、進捗状況を共有することに挑戦してみよう。
Chat application using multiple users
また、より広いコミュニティと共有したい質問、アドバイス、アイデアがあれば、遠慮なく私たちの コミュニティ・スラックワークスペースに飛び込んでくるか、下記👇に返信してください。