エンジニア全般
連絡がすぐに取れるアプリを作りたいけど、うまく作れるか不安。リアルタイムチャットのアプリを開発のやり方もわからないし、失敗もしたくない。
この記事では、リアルタイムチャットについて基本から解説し、導入によるメリットとデメリットについて解説しています。
この記事を読めば、Socket.io、Firebaseでリアルタイムチャットアプリの作り方を知ることができます。
コンピュータの専門学校がプログラミング及び、コンピュータの基礎を学び、その後、日本電気の子会社で働きました。その後、いくつかの開発の仕事を経て,コンピュータの専門学校の講師兼担任を経験し、その後はフリーにてシステムエンジニアやプログラマーの開発の仕事を担当、そのかたわらプログラミングスクールや職業訓練所、企業の新人教育などを担当しました。 25年以上のシステムエンジニア、プログラマーの仕事の経験があります。
リアルタイムチャットとは？
リアルタイムチャットとは、どのような機能があるのでしょうか。簡単に解説します。
リアルタイムチャットとは
リアルタイムチャットとは、コンピュータネットワーク上でリアルタイムで送信される仕組みを構築しているシステムのことを指します。
リアルタイムチャットは、LINEやChatworkなどのスマホアプリもあり、プライベートだけでなくビジネスでも活用されます。また、1対1だけでなく複数人と同時に連絡できるため、さまざまなビジネスシーンで利用できるため、注目を集めています。
リアルタイムチャットは、伝えたいことがリアルタイムで相手に表示される仕組みになっており、対面でコミュニケーションをするようにスムーズにやり取りができます。
メールに比べて、定型文が不要になったり相手を簡単に指定したりできるため、メール業務を効率化したい人や素早い情報交換をする際に利用されます。
また、使用するアプリによっては、送信したメッセージの既読を確認したり、メッセージの削除が可能なアプリがあるため、操作性にも優れていることも特徴です。
リアルタイム通信の仕組み
リアルタイムチャットなどのリアルタイムでコミュニケーションが取れるチャットは、メッセージを送信すると、受信者に即座に表示される仕組みを持つコミュニケーションシステムです。
リアルタイムでチャットをするために、ユーザーが送受信するためのチャットのクライアントと、ユーザーのメッセージを送受信するためのチャットサーバーの２つを作成します。
チャットのクライアントだけでは、ユーザー同士がつながっていないため、チャットサーバーを作ることが必要です。
ユーザーからメッセージが送信されると初めにチャットサーバーに送信されます。その後、複数のサーバーで効率的に処理が行われ、すぐにメッセージが届くようなシステムになっています。
システムの処理が高速化されることで、複数人でのチャットを利用したコミュニケーションでも、スムーズな情報交換が実現できるようになりました。
リアルタイムでのやり取りを応用して、チャットボットを利用して簡単な問い合わせに自動で回答するなど、業務効率化できることが特徴です。
リアルタイムチャットアプリの作成方法
実際にリアルチャットアプリを作るには以下のような方法があります。
- ノーコードを活用して作成する
- プログラミング言語を使用する
- 開発会社に依頼する
ここでは上記について詳しく説明していきます。
ノーコードを活用して作成する
ノーコードでということはプログラムの必要がないよいうことです。プログラムがいらないので、自社でプログラムのスキルのある社員がいなくても自社でチャットアプリを構築できるということで、コストを抑えることができます。
ここでは代表的なノーコードのツールを３つ紹介します。
bubble
bubble 世界の中で利用者がもっとも多いと評判なノーコードツールです。多数のテンプレートがあり、自由に作成ができるので自社向けの独自アプリが作りやすいです。しかし、逆に言うとテンプレートが多いので、開発するには操作方法の習得が少し時間が必要です、 「コレモ」や「LIBRIS」などのアプリが開発されています。
Adalo
Adalo MicrosoftのPowerPointを使ったことのある方はわかるとおもいますが、このツールは、スライドを操作する要領でアプリケーションを開発することができます。Android・iPhoneのアプリ両方とも作成することができ、有料のユーザーではストアへの公開も自動で行ってくれます。 「Tavolo」などのアプリが知られています。
Glide
Glide ノーコードツールの中では、特にわかりやすい操作性なので、初心者向きです。ワンクリックで様々な操作が可能（基本的）な上、レイアウト・配色などをアプリが自動的に最適化してくれます。一番の特徴としてはGoogleのスプレッドシートをデータベースとして使えるということです。そのことにより、データの管理や更新がやりやすくなります。また、逆にEXCELのシートやGoogleのワークシートをもとにアプリの作成することも出来ます。Glideで作成されたアプリにレストラン情報共有アプリ「まいどるグルメコンシェルジュ」などがあります。
プログラミング言語を使用する
プログラム言語でチャットアプリを作成することは可能です。使用する言語は、Python、Java、JavaScript、GO、PHPなど多様な言語を使うことができますが、作成するにはプログラム言語自体の習得だけでなく、フレームワークやライブラリを活用方法の習得や、ユーザー認証、メッセージの保存、通知機能など多岐に渡っての実装が必要です。
フレームワークやライブラリ、またプラットフォームを使わずに0からプログラミングするのは、相当な労力が必要となりますので、通常はそれらを使用してプログラミングします。
しかし、ネットワークの通信は、うまくいかないことも多く、ネットワークの知識もかなりの習熟度が必要です。ただ、ノーコードのアプリ開発よりも独自性のあるものが作成できるメリットはあります。
実際にプログラムする方法は後程、JavaScriptとライブライリのSocket.ioを使う方法と、Firebase（Googleが提供するWEBアプリのプラットフォーム）を使う方法について説明します。
開発会社に依頼する
チャットアプリの作成は、プログラムを習得して、諸々の知ってはおかないといけない知識までも学習しないといけないので、自社に経験のある開発者がいない場合はとてもではないが無理です。
自分が技術者の人は、将来のために経験を積むために学んでみることは大切ですが、自社でチャットアプリを作って仕事に生かしたい場合は、経験がある別会社に頼むことが1番よい方法です。
その時には要望をきちんと聞いてくれて、それを実現できる技術をもっている会社を選ぶことが大切です。 チャットアプリに関する質問や相談を含め、アプリ開発やシステム開発でお困りのことがあれば、弊社にお気軽にお問い合わせください。 jitara
言語を使用したリアルタイムチャットの作成手順
前の章で説明しましたが、リアルタイムチャットアプリを作成するのは、いろいろなプログラミング言語を使うことができますが、一般的には、JavaScriptを使うことが多いです。
しかし、JavaScriptはフロントエンド用なので、コンピュータの内部のシステムにアクセスしたり、サーバー的に使うことができません。 そこで、Node.jsというJavaScriptの動く実行環境を使うことが必要となります。
また、チャットアプリでは、WebSocketは広くサポートされていますが、Socket.ioはWebSocketを使いやすくするライブラリであり、さまざまなフォールバックメカニズムを提供して、環境に依存せずに双方向通信を実現します。
なので、JavaScriptでチャットアプリを開発するには、Node.jsとSocket.ioをインストールして使うことが必要になります。
また、別の方法として、webアプリケーションを作成する際にいろいろな機能が使えるGoogleが提供しているプラットフォームであるFirebaseを使うという手もあります。
ここでは、Socket.ioでの作成方法、Firebaseを利用した作成方法をご紹介いたします。
Socket.ioを使ったリアルタイムチャットアプリの作成方法
Socket.ioとは、WebSocket技術によるデータの双方向通信を安定かつ簡潔にサポートしてくれるサービスです。
Socket.ioは、ブラウザの種類やPC環境などによる影響を受けにくく、プログラミング初心者でも安定したリアルタイムチャットアプリを作成することができます。
それでは、Socket.ioを使用したリアルタイムチャットアプリの構築方法をご紹介いたします。
Node.jsをインストールする。
まずは最初にNode.jsをインストールします。 
1. Node.jsのダウンロード まず、Node.jsの公式サイトにアクセスします。以下のリンクからダウンロードページに移動できます。
Nde.js公式サイト 
2. インストーラーのダウンロード ダウンロードページで、インストーラーを選択します。「Prebuilt Installer」をクリックします。 3. インストーラーの実行 ダウンロードしたインストーラー（例: `node-v20.15.0-x64.msi`）を実行します。以下の手順に従ってインストールを進めます。
A. 「Next」をクリックします。 
B. 使用許諾契約に同意して「Next」をクリックします。 
C. インストールフォルダを確認して「Next」をクリックします。 
D. 「Install」をクリックしてインストールを開始します。 
E. インストールの完了 インストールが完了したら、「Finish」をクリックします。 
F. バージョン確認 コマンドプロンプトを開き、以下のコマンドを実行してNode.jsとnpmのバージョンを確認します。
※npm(Node Package Manage)というのは、サービスなどをインストールするのに必要なものです。
これでNode.jsのインストールが完了
プロジェクトのセットアップ
Node.jsプロジェクトをセットアップします。
1. 新しいディレクトリを作成し、そこに移動します。
2. npmでプロジェクトを初期化します。
3. 必要なパッケージをインストールします。
サーバーのセットアップ `server.js`ファイルを作成し、以下のように設定します。
// server.js
const express = require(‘express’);
const http = require(‘http’);
const socketIo = require(‘socket.io’);
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
app.use(express.static(‘public’));
io.on(‘connection’, (socket) => {
console.log(‘a user connected’);
socket.on(‘chat message’, (msg) => {
io.emit(‘chat message’, msg);
});
socket.on(‘disconnect’, () => {
console.log(‘user disconnected’);
});
});
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
クライアントのセットアップ
public`ディレクトリを作成し、その中に`index.html`ファイルを作成します。 
<div class=”code-block”>
<!– public/index.html –>
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
/* 簡単なスタイル */
ul { list-style-type: none; margin: 0; padding: 0; }
li { padding: 8px; margin-bottom: 2px; background: #f3f3f3; }
input { padding: 10px; width: 90%; margin-right: .5%; }
button { width: 9%; background: #007BFF; color: white; border: none; padding: 10px; }
</style>
<ul id=”messages”></ul>
<form id=”form” action=””>
<input id=”input” autocomplete=”off” type=”text” /><button>Send</button>
</form>
<script src=”/socket.io/socket.io.js”></script>
<script>
var socket = io();
var form = document.getElementById(‘form’);
var input = document.getElementById(‘input’);
form.addEventListener(‘submit’, function(e) {
e.preventDefault();
if (input.value) {
socket.emit(‘chat message’, input.value);
input.value = ”;
}
});
socket.on(‘chat message’, function(msg) {
var item = document.createElement(‘li’);
item.textContent = msg;
document.getElementById(‘messages’).appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
</script>
アプリケーションの実行
サーバーを起動します。
ブラウザで `http://localhost:3000` にアクセスすると、チャットアプリが動作していることを確認できます。 
こちらも参照してください。 Socket.io公式ドキュメント Express公式ドキュメント
FirebaseのRealtime Databaseを使用したリアルタイムチャットアプリの作成方法
Firebaseとは、Googleが提供するクラウドサービスで、モバイルアプリケーションのサーバー側で使用されるロジックを提供します。
モバイルアプリの開発に特化しており、JavaScriptやKotlinなど複数の言語での開発が可能です。
それでは、FirebaseとRealtime Databaseを使用したリアルタイムチャットアプリの作成方法を紹介します。
※少し長くなるので、画面は一部、省略しています。ご了承ください。
ステップ1：データベースの作成
Firebaseにアクセスし、プロジェクトを作成します。次に、Databaseを選択し、Realtime Databaseを作成します。
プロジェクトの作成を選び、名前をいれます。ここではCHAT-TESTとしました。 
Googleアナリティクスは、今回は使わないので無効にしておきます。 
作成されました。 
プロジェクトができたらアプリにFirebaseを追加します。 </>のアイコンをクリックしてでてくるスクリプトをコピーします。 
※スクリプトは後でつくるindex.htmlに貼り付けます。
データベースを作成するため、Realtime Databaseを選択します。
データベース作成を選びます。
テストモードで作成します。
Realtime Databaseのルールの「read」を「true」に、「write」を「true」に変更します。直接、trueに書き換えて公開を押します。
ステップ2：ファイルの作成
次にHTML、CSS、JavaScriptの3つのファイルを作成します。
HTMLファイルは、以下のように作成します。名前はindex.htmlにします。
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Chat App</title>
<!– ここにアプリのscriptタグを貼り付けます。 –>
<link rel=”stylesheet” href=”./style.css”>
</head>
<body>
<h1>リアルタイムチャット</h1>
<div>
<div>
Name<br><input type=”text” id=”name”>
</div>
<br>
<div>
Message<br><textarea id=”message” row=”10″></textarea><br><br>
<button id=”send”>send</button>
</div>
<hr>
<div id=”output”></div>
</div>
<script src=”./index.js”></script>
</body>
</html>
CSSファイルは、以下のように作成します。名前はstyle.cssにします。
body {
background-color: gainsboro;
}
h1 {
color: coral;
text-align: center;
}
div {
text-align: center;
}
textarea {
vertical-align:top;
}
#output {
background-color: skyblue;
}
JavaScriptファイルは、以下のように作成します。名前はindex.jsにします。
var database = firebase.database();
let room = “chat_room”;
const send = document.getElementById(“send”);
const name = document.getElementById(“name”);
const message = document.getElementById(“message”);
const output = document.getElementById(“output”);
//送信処理
send.addEventListener(‘click’, function() {
var now = new Date();
database.ref(room).push({
name: name.value,
message: message.value,
date: now.getFullYear() + ‘年’ + now.getMonth()+1 + ‘月’ + now.getDate() + ‘日’ + now.getHours() + ‘時’ + now.getMinutes() +’分’
});
message.value=””;
name.value=””;
});
//受信処理
database.ref(room).on(“child_added”, function(data) {
const v = data.val();
const k = data.key;
let str = “”;
str += ‘<div class=”name”>名前：’+v.name+'</div>’;
str += ‘<div class=”text”>日時：’+v.date+'</div>’;
str += ‘<div class=”text”>メッセージ：’+v.message+'</div><hr>’;
output.innerHTML += str;
});
次に上記の作成したプログラムのファイルをデブロイします。Node.jsを使います。※Node.jsのインストールについては前章で説明しています。
パソコンのどこかにdeployフォルダを作成して、ndsのコマンドプロンプトでそのフォルダを指定してプロジェクトの初期化をします。詳しくは、前の章で説明しています。
cd deploy
npm init -y
ndsのコマンドプロンプトで、firebase関係のライブラリをインストールします。
npm innstall firebase
npm install -g firebase-tools
Googleのアカウントを聞いてきます。設定してください。
成功したら、下記の画面のように成功したメッセージがでます。WEBブラウザにも成功した表示がでてきます。
firebaseの初期化をします。質問には適宜、回答します。
Hostingを選ぶ（スペースキーを押してXにして、Enterします。
成功しました。
パソコンのどこかにdeployフォルダの中にpublicというフォルダを作ります。そこへ前につくったプログラムファイルを入れます。
デブロイします。
※ちなみにデブロイしたものを削除するには以下のコマンドを使います。プログラムを修正した場合は削除して、デブロイしなおします。
firebaseに戻って、作成しているアプリを選択します。
Hostigという文字を押すと、以下の画面が表示されます。
ドメインと書かれた部分にあるURLを押すと画面が起動してチャットアプリが動きます。
※環境などの要因でうまく動かない場合もあります。その環境を実際に確認しないとわからないこともあるので、以下の公式サイトを参照してご自分で調整してください。
リアルタイムチャットアプリを作成する際に知っておきたいこと
リアルタイムチャットアプリを作成する際に知っておきたいことには以下の点があります。
- 作成するのに必要なスキル
- 作成するのにかかる時間
- 作成するのにかかる費用
ここでは上記の点について詳しく説明していきます。
リアルタイムチャットアプリを作成するのに必要なスキル
リアルタイムチャットアプリを作成するためには、いくつかのスキルが必要です。規模によって必要なスキルが異なりますが、以下に基本的なスキルを示します。
小規模アプリ（個人プロジェクトや小規模ビジネス向け）
- プログラミング言語: JavaScript (Node.js) や Python などの言語の習得、特にサーバーサイド側とフロントエンド（HTML, CSS, JavaScript を使って基本的なWebページを作成できる。）両方の知識と経験が必要
- Webフレームワーク: Express.js や Flask などのWebフレームワークを使ってサーバーサイドを構築の経験
- データベース: Firebase Realtime Database や SQLite などのデータベースを操作できる知識
中規模アプリ（中小企業や一般的なビジネス向け）
- セキュリティ: セキュリティの基本原則を理解し、認証やデータの暗号化を実装の経験
- スケーリング: アプリケーションのスケーリングに関する知識。クラウドプロバイダ（AWS, GCP, Azure）を使ったスケーリング戦略を理解
- ユーザーエクスペリエンス: ユーザビリティやUI/UXデザインの基本を理解
大規模アプリ（大企業や高トラフィック向け）
- アーキテクチャ: マイクロサービスアーキテクチャやコンテナ化技術（Docker, Kubernetes）を多数の経験。
- モバイルアプリ: モバイルアプリの開発経験（React Native, Flutter, Swift, Kotlin）があると有利
- ネットワーキング: WebSocketやREST APIの設計と実装に関する知識
リアルタイムチャットアプリを作成するには上記のスキルが基本的には必要ですが、作成するプロジェクトによってはまた別のスキルが必要となる可能性はあります。
リアルタイムチャットアプリを作成するのにかかる時間
リアルタイムチャットアプリの作成にかかる時間は、規模によって異なりますが、以下に一般的な目安を示します。
小規模アプリ
- 個人プロジェクトや小規模ビジネス向けのアプリは、数週間から数ヶ月で作成できることがあります。基本的な機能を実装するだけなら、1ヶ月程度で完成させることができるでしょう。
中規模アプリ
- 中小企業や一般的なビジネス向けのアプリは、3ヶ月から半年程度の時間がかかることがあります。セキュリティやスケーリングなどの要件を考慮するため、開発に時間がかかります。
大規模アプリ
- 大企業や高トラフィック向けのアプリは、1年以上の時間がかかることがあります。アーキテクチャの設計やモバイルアプリの開発、ネットワーキングの最適化など、多くの要素を考慮する必要があります。 ただし、これはあくまで一般的な目安であり、プロジェクトの複雑さやチームのスキルによって異なります。
リアルタイムチャットアプリを作成するのにかかる費用
リアルタイムチャットアプリの作成にかかる費用は、規模によって異なりますが、以下に一般的な目安を示します。
小規模アプリ
当たり前のようですが、個人プロジェクトや小規模ビジネス向けのアプリは、比較的低いコストで作成できます。主な費用は以下の通りです。</
- 開発者の給与: プロジェクトの規模と要件に応じて、開発者の給与がかかります。
- クラウドホスティング: アプリケーションをホストするためのクラウドサーバーの料金が発生します。ある程度の規模のものですと、有料プランが必要となります。
中規模アプリ
中小企業や一般的なビジネス向けのアプリは、中程度のコストがかかります。主な費用は以下の通りです。
- 開発者の給与:複雑な機能やセキュリティ対策を実装するため、開発者の給与が増加します。
- クラウドホスティング: トラフィックの増加に備えてスケーリングしたクラウドサーバーを使用するため、料金が上昇します。
大規模アプリ
大企業や高トラフィック向けのアプリは、高いコストがかかります。主な費用は以下の通りです。
- 開発者の給与: 多くの開発者や専門家が関与するため、給与が大幅に増加します。
- インフラストラクチャ: クラウドプロバイダの料金、データベースの使用料、ネットワークの最適化などが含まれます。
上記は一般的な目安であり、具体的なプロジェクトによって異なります。プロジェクトの要件と予算に合わせて計画することが大事です。
まとめ：リアルタイムチャットでコミュニケーションを強化
リアルタイムチャットを利用することで、迅速に情報共有ができるようになります。リアルタイムチャットアプリを使用する際は、自社の人数や用途に適したアプリを利用することで、業務の改善に役立ちます。また、コミュニケーションをとる方法が増えることで、働き方の多様化にもつながるでしょう。
リアルタイムチャットを導入する際は、自社に最適なツールを導入することで最大限の効果を得ることができます。
株式会社Jiteraでは、貴社に最適なリアルタイムチャットについてアドバイスを提供できるので、検討段階でぜひ一度ご相談ください。
