LoginSignup
170
235

More than 5 years have passed since last update.

31億市場!?  チャットの作り方 [1日コース]

Last updated at Posted at 2018-01-08

(※この記事は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)」からやっていきたいと思いますー

170
235
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
170
235