SlideShare a Scribd company logo
1 of 28
Download to read offline
HTMLとJSだけで
チャットが実装できちゃった話
$ whoami
知花 司
ちばな つかさ
!
twitter: @chibana_555
#スバヲタではありません
!
癖: なんでもhogehoge
!
苦手: 日本語
※お断り:この資料は私個人の偏見の集大成であり、私が所属する会社とは一切関係ございませんw
JSでチャット
(な∼んだnodejsの話しか)
Firebaseのお話です
知ってる人∼
違いま∼す!
残念でした∼
デモ
これ、AWSのS3
で動いてます
※ S3: AWSが提供しているストレージサービス
(ただのファイルサーバー)
は? 何がすごいの?
チャットって
メッセージ送信
チャットって
他のユーザーに
通知しないといけない
チャットって
ぬるぽ!
チャットって
ぬるぽ?
ぬるぽ?ぬるぽ?
ぬるぽ?
ぬるぽ?
チャットって
ガッ
ガッガッ
ガッ
ガッ
チャットって
他のユーザーに
通知しないといけない
これを実現するには
双方向通信
プロトコル
サーバーサイドAP
フロントエンドAP
これを実現するには
冗長化
※意外にめんどくさい
Firebaseの何が嬉しいか
さっきのデモの構成はどうだったか?
さっきのデモ
Google Platform
チャットの実装
メッセージ表示してるところ
メッセージ取得してるところ
Factory
Controller
データが更新される都度
呼ばれる
チャットの実装
メッセージ送信してるところ さっきのコレクションに
追加してるだけ
チャットの実装
メッセージ送信してるところ
送信時に認証処理してる
単なるデータ同期だけでなく
こういうSSOの実装
まともにやると地味にめんどくさい
SSO選択のところ
controller
service
facebook とか twitter
とかの識別子
利用するSSOの識別子を
渡すだけ
単なるデータ同期だけでなく
数行で実装可能!
宗教上の理由でng使いましたが
※サイト転載はちゃんと許可とってます
主要FW向けにいろいろ提供されてます
しかもiOS, Android対応
※サイト転載はちゃんと許可とってます
実はHostingも提供
※サイト転載はちゃんと許可とってます
独自ドメイン使わなければ
無料の範囲内でも使えます
ちょっと試したくなりました?
一応今回のデモGitHubに置いてます
https://github.com/hogehoge-banana/firebaseDemo
!
・・・が、公式のチュートリアルがものすごく充実してる
のでそちらをご利用くださいw
https://www.firebase.com/tutorial/#gettingstarted
とまぁ、
Firebaseゴリ押しなんですが
※私はgoogleの回し者
ではありませんのであしからず・・・
知ってるわ!
ご清聴ありがとうございました

More Related Content

Viewers also liked

使った気になれるFirebase
使った気になれるFirebase使った気になれるFirebase
使った気になれるFirebaseFukase Motohiko
 
Unlimited Frameworks
Unlimited FrameworksUnlimited Frameworks
Unlimited FrameworksTerui Masashi
 
AngularJSを浅めに紹介します
AngularJSを浅めに紹介しますAngularJSを浅めに紹介します
AngularJSを浅めに紹介しますnkazuki
 
20分でおさらいするサーバレスアーキテクチャ 「サーバレスの薄い本ダイジェスト」 #serverlesstokyo
20分でおさらいするサーバレスアーキテクチャ 「サーバレスの薄い本ダイジェスト」 #serverlesstokyo20分でおさらいするサーバレスアーキテクチャ 「サーバレスの薄い本ダイジェスト」 #serverlesstokyo
20分でおさらいするサーバレスアーキテクチャ 「サーバレスの薄い本ダイジェスト」 #serverlesstokyoMasahiro NAKAYAMA
 
サーバレスアーキテクチャにしてみた【デブサミ2017 17-E-2】
サーバレスアーキテクチャにしてみた【デブサミ2017 17-E-2】サーバレスアーキテクチャにしてみた【デブサミ2017 17-E-2】
サーバレスアーキテクチャにしてみた【デブサミ2017 17-E-2】dreamarts_pr
 
Building Serverless Machine Learning models in the Cloud
Building Serverless Machine Learning models in the CloudBuilding Serverless Machine Learning models in the Cloud
Building Serverless Machine Learning models in the CloudAlex Casalboni
 
サーバーレスで ガチ本番運用までやってるお話し
サーバーレスで ガチ本番運用までやってるお話しサーバーレスで ガチ本番運用までやってるお話し
サーバーレスで ガチ本番運用までやってるお話しAkira Nagata
 

Viewers also liked (7)

使った気になれるFirebase
使った気になれるFirebase使った気になれるFirebase
使った気になれるFirebase
 
Unlimited Frameworks
Unlimited FrameworksUnlimited Frameworks
Unlimited Frameworks
 
AngularJSを浅めに紹介します
AngularJSを浅めに紹介しますAngularJSを浅めに紹介します
AngularJSを浅めに紹介します
 
20分でおさらいするサーバレスアーキテクチャ 「サーバレスの薄い本ダイジェスト」 #serverlesstokyo
20分でおさらいするサーバレスアーキテクチャ 「サーバレスの薄い本ダイジェスト」 #serverlesstokyo20分でおさらいするサーバレスアーキテクチャ 「サーバレスの薄い本ダイジェスト」 #serverlesstokyo
20分でおさらいするサーバレスアーキテクチャ 「サーバレスの薄い本ダイジェスト」 #serverlesstokyo
 
サーバレスアーキテクチャにしてみた【デブサミ2017 17-E-2】
サーバレスアーキテクチャにしてみた【デブサミ2017 17-E-2】サーバレスアーキテクチャにしてみた【デブサミ2017 17-E-2】
サーバレスアーキテクチャにしてみた【デブサミ2017 17-E-2】
 
Building Serverless Machine Learning models in the Cloud
Building Serverless Machine Learning models in the CloudBuilding Serverless Machine Learning models in the Cloud
Building Serverless Machine Learning models in the Cloud
 
サーバーレスで ガチ本番運用までやってるお話し
サーバーレスで ガチ本番運用までやってるお話しサーバーレスで ガチ本番運用までやってるお話し
サーバーレスで ガチ本番運用までやってるお話し
 

Recently uploaded

Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Danieldanielhu54
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略Ryo Sasaki
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムsugiuralab
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directoryosamut
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000Shota Ito
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxAtomu Hidaka
 
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdfUPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdffurutsuka
 

Recently uploaded (9)

Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
 
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
 
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdfUPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdf
 

htmlとjsだけでチャットが実装できちゃった話