(※この記事はJS初級〜中級の方向けの記事です)

chat_market.png

チャットとか、ボットとか、
「何に使うんじゃい!」
...いやいや、今後使われるらしいですよ?

2021年にチャットボット市場は31.7億ドルまでになる予想があります。

国内での関連情報「AI市場、年73%増の急成長続く」では、
「システム市場規模をユーザー支出額ベースで158億8400万円と推定」と言っています。(※国内コグニティブAIに関する市場規模)

もう目的なんかなくても、とりあえず作り方マスターしましょう!

そんなわけで、業務で使えるレベルの本格的なチャットの作り方を、連載でまとめたいと思います。

わたくし仕事でWebチャット部品を作ってきた者ですが、
会社のみんなに「フロント側なら公開していいよー」て言ってもらえたので公開します。

この記事の概要

サンプル程度のレベルではなく、本番のサービスで組み込めるレベルのWebチャットが開発できるようになる記事(にしたい)

※なおFirebaseは使います。

必要となる知識

  • HTML/CSS
  • Javascript
  • JQuery

得られるモノ

  • チームで開発するレベルの基本的なJavascriptの使い方(オブジェクト思考やMVCなど)
  • 業務で使えるレベルのWebチャットのソースコード

作るものの最終的なイメージはこの様な感じです。
goal_image.gif

機能としてはこんな感じです

  • リアルタイムなメッセージ送受信
  • 機能追加が可能なメニューUI
  • ステータス表示
  • 書き込み中アニメーション
  • 既読表示
  • 日付の区切れの表示

実はまだ途中なので、全部書き切れるか不明ですが、
僕が飽きなければ全部書き切れると思います!


↑いまこの辺までしか書いてない

  • 7コマ目: Javascriptで書き込み中アニメーションを作ってみた
  • 8コマ目: textareaの高さを動的に変更する
  • 9コマ目: チャットの既読表示や日付表示(Web)

おぉ...目次にしてみたら、かなりの量の記事になる気がする...

それでは次回「1コマ目: 無料でカンタンにWebサイトを作る方法(2018)」からやっていきたいと思いますー

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.