初心者向け学習方法一覧はこちら
はじめに
これまでに学んできたjQueryとNode.jsを活用してチャットサポートアプリを作ってみましょう。 今回作成するチャットサポートアプリは、メッセージを送ると内容に対応した応答メッセージを自動で返答するアプリです。 応答内容は設定ファイルで管理します。 今回はアプリの見た目であるクライアントサイドの開発を行います。
jQueryについての解説はこちらの記事
Node.jsについての解説はこちらの記事
チャットサポートアプリのサンプルコードはGitHubにて公開しています。
クライアント・サーバーシステムとは？
クライアント・サーバーシステムとは、データや処理結果をリクエストするクライアントとリクエストを受けて結果を返すサーバーという2つの役割に分けてシステムを構築する仕組みのことです。
今回作成するチャットサポートアプリではクライアントをHTMLとjQueryで、サーバー側の処理をNode.jsで記述します。 アプリの完成イメージを示します。
アプリの動作の流れは下記のとおりです。
- アプリへのアクセス時
- メッセージ送信時
１．クライアントは、サーバーにURLでアクセスする。
２．サーバーは、クライアントにWebアプリのページを返却する。
３．クライアントは、サーバーにメッセージを送信する。
４．サーバーは、クライアントの送信メッセージに対応した返却メッセージを生成し、クライアントに返却する。
開発の準備を使用
ここからは開発の準備を進めていきます。 まずは「chat-support」フォルダを作成します。 その中に「public」フォルダを作成します。 「public」フォルダの中に「index.html」「index.css」「index.js」の3つのファイルを作成します。
次にチャットサポートのオペレーターのイメージ画像を準備します。 フリーアイコンサイトからダウンロードしましょう。 サンプルで使用したのはこちらのURLからダウンロードしました。
ダウンロードしたファイルの名称を「operator.png」に変更して、「public」フォルダ内に移動します。
作成したフォルダとファイルの内容はこのようになります。
アプリの型枠の作成と各ファイルの連携
index.htmlから作成していきます。 全体像はこのようになります。 「// TODO」とコメントを記載している箇所は、後ほど内容を作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
// TODO:ページの設定とスタイルシートの読み込み
</head>
<body>
// TODO:画面内容とスクリプトファイルの読み込み
</body>
</html>＜head＞タグの内容解説
headタグ内ではページの設定と、スタイルシートの読み込みをします。
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>チャットサポート</title>
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css" />
<link rel="stylesheet" href="index.css" />
</head>viewportはスマートフォンやタブレットなど機種によって画面サイズが異なるデバイスからアクセスした際に、デバイスのサイズに合わせて画面の横幅を調整するための設定です。 スタイルシートとして読み込んでいるress.cssはブラウザごとに設定されている独自のスタイル設定を初期化します。 この設定を読み込まないと左右にマージンが入るなど見た目が異なってきます。 ブラウザによらず均一なレイアウトを実現するために必要です。
この後作成するindex.cssも読み込みます。
＜body＞タグの内容解説
bodyタグ内では必要なクラスの定義と、スクリプトファイルの読み込みを行います。
<body>
<header class="header">
// TODO:アプリタイトル部
</header>
<section class="content">
// TODO:メッセージ表示部
</section>
<footer class="footer">
// TODO:メッセージ入力・送信部
</footer>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="index.js"></script>
</body>「header」「content」「footer」という3つのクラスは、それぞれ完成画面の上部、メッセージ表示部、メッセージ入力・送信部です。 画面上のそれぞれの配置はこの様になっています。
スクリプトファイルは2つ読み込みます。
1つ目はjQueryを使用するためのCDNの埋め込みリンクを貼り付けます。 CDNの埋め込みリンクを公開しているサイトからsrc属性のリンクをコピーしてきましょう。 https://releases.jquery.com/
jQueryのCDNの利用方法はこちらのページで詳しく説明しています。
2つ目は、この後内容を作成するindex.jsです。
HTML・JavaScriptの作成
「header」「content」「footer」クラスの内容を記述します。
headerの内容を作成
headerにはアプリの名称を<h1>タグで囲んで記述します。
<header class="header">
<h1>チャットサポート</h1>
</header>footerの内容を作成
footerにはメッセージ入力部と送信ボタンを配置します。
<footer class="footer">
<input
id="msg-send"
class="msg-input"
type="text"
placeholder="メッセージ（Shift+Enterで送信）"
/>
<button class="btn-submit" type="button" onclick="sendMessage()">
送信
</button>
</footer>メッセージ入力部のinputに何も入力されていない時に表示するメッセージ「メッセージ（Shift+Enterで送信）」を設定します。 後ほどJavaScript側でメッセージ送信をボタンクリックだけではなく、ShiftキーとEnterキーで送信可能にします。
送信ボタンをクリックしたらsendMessage関数を呼び出します。
contentの内容を作成
contentにはアプリにアクセスした際の初期画面表示を記述します。
<section class="content">
<ul id="chat-area">
<li>
<div class="balloon balloon-r">
<p class="say say-r">こんにちは</p>
</div>
</li>
<li>
<div class="balloon">
<img class="img-circle" src="operator.png" alt="image" />
<p class="say">なんでも聞いてください。</p>
</div>
</li>
</ul>
</section>ユーザー側の「こんにちは」というメッセージと、オペレーター側の「なんでも聞いてください」というメッセージを表示します。 メッセージに定義しているクラスのballoonとballoon-rはチャットボックスの見た目を表現するためのものです。 定義はindex.cssに記述します。
JavaScriptの内容を作成
index.jsの内容を記述します。 今回はクライアントサイドのみの作成ですので、メッセージの送信はできません。 sendMessage関数は一旦、alertでメッセージを表示する動作を記述することとし、実際のメッセージ送受信はサーバーサイドを作成する際に実装します。
function sendMessage() {
alert('送信ボタンが押されました');
}CSSの作成
index.cssの内容を画面上部、メッセージ表示部、メッセージ入力・送信部の順に記述します。 スタイルシートの全量はこのようになります。
/* 最上部のタイトル */
.header {
position: fixed;
top: 0;
z-index: 1;
width: 100%;
height: 50px;
font-size: 10px;
text-align: center;
line-height: 50px;
background-color: #484e63;
color: #ffffff;
}
/* メッセー表示部 */
.content {
width: 100%;
min-height: calc(100vh - 100px);
margin: 50px auto;
padding-top: 10px;
background-color: #7993be;
}
/* ID指定の先頭は「#」 */
#chat-area {
overflow: scroll;
padding: 10px;
list-style: none;
}
.balloon {
margin: 20px 0;
display: flex;
align-items: flex-start;
}
.balloon-r {
margin-right: 15px;
justify-content: flex-end;
}
.img-circle {
width: 50px;
height: 50px;
margin: 0 15px;
border-radius: 25px;
background-color: white;
}
.say {
max-width: 500px;
padding: 10px;
border-radius: 10px;
background: #ffffff;
}
.say-r {
background-color: #9ce060;
}
/* 最下部のメッセージ入力・送信部 */
.footer {
position: fixed;
z-index: 1;
bottom: 0;
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
}
.msg-input {
width: 70%;
margin-right: 10px;
padding: 5px 15px;
border: 1px solid #e9e9ed;
border-radius: 25px;
background-color: #f6f6f6;
}
.btn-submit {
padding: 6px;
border: none;
border-radius: 5px;
background-color: #3f84ef;
color: white;
}cssの一部のみ抜粋しますが、画面上部、メッセージ表示部、メッセージ入力・送信部の位置はスタイルシートで定義しています。 画面上部 、メッセージ表示・送信部はposition:fixedで固定しており、heightの値が50pxと位置もサイズも決まっています。 メッセージ表示部は画面サイズによって変化します。 画面サイズからheaderとfooterの高さを合わせた100pxを引いて高さを決めています。
/* 最上部のタイトル */
.header {
position: fixed;
height: 50px;
/* メッセージ表示部 */
.content {
min-height: calc(100vh - 100px);
/* 最下部のメッセージ入力・送信部 */
.footer {
position: fixed;
height: 50px;ここまでの動作確認
ここまで作成が完了したら動作確認をしましょう。 VSCodeでindex.htmlを選択した状態で右クリックのメニューから「Open with Live Server」を選択してブラウザで開きます。 「送信」ボタンをクリックしてアラートが表示されたら成功です。
動作確認のイメージはこのようになります。
右クリックのメニューに「Open with Live Server」がない場合は、VSCodeのプラグインLive Serverをインストールしましょう。 LiveServerは簡易的なローカルサーバーを立ち上げてリアルタイムに結果を確認できるプラグインです。
もし、見た目や動作が例示したものと異なっている場合はサンプルコードを参考に完成させてください。 サンプルコードはGitHubにて公開しています。
まとめ
今回はチャットサポートアプリのクライアントサイドの見た目を作成しました。 次回はサーバーサイドの処理を作成します。
今回解説したクライアントが完成してから次に進みましょう。
プログラミングスクールの選び方
転職を検討中の方向け
フリーランス・副業で活躍したい方向け
教養・キャリアアップしたい方向け
給付金について詳しく知りたい方向け
