Firebaseで1時間で簡単なWebチャットアプリが作れるハンズオン - Qiita
経緯 私Google系はド素人だったのでハンズオン勉強会に参加した所短時間でスムーズにざっくり理解できた気がするので自分なりに整理するために記事にしました。（開催元には許可頂いてます） 参加した勉強会 こちらの勉強会に参加しました。案内のとおり、若手エンジニアが多く私浮いてた気がしますが全く気にしてないです。若い世代のエンジニアと交流すると私もがんばらなきゃという気になります。 ハンズオンスライドがとてもわかりやすかったです。このスライドの手順さえあれば1時間で簡単に作れます。 こういうの作るの大変だけど自分自身勉強になるんだよね。 おそらく、Googleが提供しているここのFirebaseWebCodelabのチュートリアルから翻訳とカスタマイズして作成したんだと思います。 完成イメージ こんなのが作成できます。Google認証も簡単に実装できちゃう。 アプリの構成 作成するチャットアプ
『React』 +『Redux』 + 『Firebase』でLINE風のChat機能を作ろう！ 【準備編】 - Qiita
『React』 +『Redux』 + 『Firebase』でLINE風のChat機能を作ろう！ 【準備編】FirebaseReactreduxmaterial-ui はじめに 前回の記事では『電卓』の実装をしました。 その後以下の面白い記事と動画を見つけたので、早速参考にしてLINE風のChat機能の一部分を実装してみました！ React & Firebaseで簡単なChatアプリを作ってみた Firebaseあればサーバーサイドエンジニア要らない説 一気に全部書くとすごく長くなりそうなので【準備編】、【Component編】、【状態管理編】の３部構成にして記事を書きたいと思います。今回は【準備編】です！ 前回の記事 『React』+『Redux』でiPhoneに入ってるような電卓を作ってみよう！ 次回の記事 『React』 +『Redux』 + 『Firebase』でLINE風のChat
VueとFirebaseで爆速でチャットサービスを作ろう - Qiita
こんにちは、ネコチャ運営者の炉田謙(@ToshioAkaneya)です。 3日で作成したチャットサービスネコチャが好評をいただき、Twitter上で多数のつぶやきをいただきました。 ##どんなサービスか ネコチャは、とくめいチャットをすることが出来るサービスです。 仕組みは質問箱(Peingなど)と似ていて、自分のリンクをSNSで共有することでフォロワーがそのリンクから匿名でメッセージを送ることが出来るというものです。 質問箱と違うのは、会話を続けることが出来る点です。 話しかける側を匿名にすることでコミュケーションのハードルを下げることが可能になっています。 ネコチャトップページ 開発の経緯 2018年に流行ったとくめいチャットアプリのNYAGOがありました。 急激なユーザーの増加に対し、開発体制が整っておらずやむなく一時停止を発表しました。 匿名チャットアプリ「NYAGO」が一時停止を
Firebase + Vue.jsで認証付き簡易チャットアプリ作成 - Qiita
github https://github.com/ebatetsu/firebase_vue_chat Firebaseプロジェクト作成 https://console.firebase.google.com/?hl=ja ここからプロジェクトを作成 Vue.jsの開発環境構築 Vue CLIを使用するのでインストール $ npm install -g vue-cli 任意のディレクトリでプロジェクトフォルダ作成 $ vue init webpack [project_name] とりあえず全部EnterでOKです。 ディレクトリ移動 $ cd [project_name] パッケージをインストールする $ npm install sassで書きたかったら $ npm install sass-loader node-sass --save-dev ローカルサーバー起動 $ npm ru
vue.js+firebase+vuefireで作るチャット - Qiita
仕様 vue.js 2.5.13 firebase 2.3.2 vuefire 1.4.4 rails 5.1.4 ruby 2.3.0p0 (2015-12-25 revision 53290) でチャットアプリを作る。webでサーバの設定とかを気にせずチャットを作りたいなと思い、firebaseを用いることにした。 vuefireについて vuefireはvue.jsのdataとfirebaseをバインディングしてくれるもの。 やったこと vue.jsの導入 npm、webpackerを用いて導入。packフォルダ内にてjavascriptを記入していく。vue.jsは対象のidのものが先に読み込まれていないと発火しないのでbody閉じタグ前にjavascriptを記載する必要がある。 firebaseの導入 <!--firebaseのライブラリ読み込み--> <script src=
バックエンドがFirebaseだけでiOSアプリは作れるのか？ - Qiita
Firebaseのイベントでクックパッドの某サービス様が、「うちはエンジニアはiOSエンジニアだけで、APIも3本くらいです」とおっしゃっており、「これが時代か」と感動して、いつか触ろうと思っていて、年始で時間もあるし調べて考察。 2018-01-04 追記 コメント、Twitterで返信いただき誠にありがとうございます！懸念部分はfirebaseの既存の仕組み+GAE/GCPである程度解決できそうです。また記事書きますー！ よくあるチャットアプリを例にする ログインしてチャットができるアプリを作ってみる 必要な画面 ログイン画面 ログイン チャットルーム一覧画面 チャット一覧表示 最新の更新ルームを取得して、自動更新 チャット詳細画面 チャット一覧表示 チャットが来たら更新 チャット送信 もし普通にサーバ立ててやるなら API [POST] /login [POST] /logout [
Angular + RxJS + WebSocket で チャットアプリを作る – Subject 利用サンプル | DevelopersIO
以前、別の記事でAkka製のチャットサーバを作ったのでシンプルなクライアントアプリも作りました。 バージョン情報 パッケージ名 バージョン WebSocketとSubjectの連携イメージ RxJSの部品は、今回 Subject を使います。Subjectは、定義したバックエンドのデータソースを Subscribe することができ、なおかつバックエンドに対して next によりデータを送出する能力をもっています。一方でWebSocketはコネクションが成立した後、 onmessage イベントに対するハンドラを登録してデータ受信時のアクションを定め、 send によってデータを送信します。この時点で Subject と WebSocketは相性が良いのではないかと考えました。実際この考えを実装した先人がいます。 WebSockets with Angular2 and RxJS – Łuk
チャットメッセージの即時反映を支える技術 - KAYAC engineers' blog
Lobiチームの長田です。 今回はLobiの根幹であるチャットサービスの、Streaming APIについて紹介します。 多くのチャットサービスがそうであるように、 Lobiでも新しいチャットメッセージが画面リロードの必要なく表示されるようになっています。 チャットメッセージをデータストリームとしてクライアントに送信するためのAPIがStreaming APIです。 LobiのチャットサービスはiOS・Android・Webブラウザで利用することができ、 これら全てでStreaming APIを使ったチャット画面の自動更新を実現しています。 即時反映の実装方法としては Polling Long Polling Web Socket など複数の方法が挙げられますが、LobiではHTTPリクエストのLong Pollingをベースにした 独自のフォーマットを使用しています。 仕組み app -
オープンソースなリアルタイムチャットシステム "respass" を3週間で作った - Sketchglass Blog
WebSocketを用いたオープンソースなリアルタイムチャットシステムrespassをリリースしました。 TL; DR 無職2人が3週間で https://respass.sketch-glass.io/ を作りました。 ソースコードはGitHub上で公開されています。 github.com 自己紹介 @minamorl 無職 Pythonエンジニア GitHub @seanchas_t 無職 C++/TypeScriptエンジニア GitHub はじめに この記事は主に技術者に向けて書かれていますが、そうでない方にも読めるような表現を重視しています。難解な用語にはなるべく注釈をいれました。技術的な話よりも「無職2人がいかにして3週間で作り上げたのか？」という開発フローの話に重きをおいたので、非技術者の方にも楽しく読んでいただけると思います。 なぜ作ったか オープンソースなチャット 近年、
ABテストで「女の子クリエイティブ」の神話崩壊。まったく出会えないチャットアプリ「ひまチャット」が教える、意外だったABテスト事例4 | アプリマーケティング研究所
ABテストで「女の子クリエイティブ」の神話崩壊。まったく出会えないチャットアプリ「ひまチャット」が教える、意外だったABテスト事例4 まったく出会えないチャットアプリ「ひまチャット」さんにお話を伺いました。 ※ALTR THINK株式会社 CEO 森口拓也さん（左）、森岡さん（右） 「ひまチャット」について 「ひまチャット」について教えてください。 森口： 「ひまチャット」は出会わない系のチャットアプリです。「ども！」というボタンから、日本中のいろんなヒマな人たち（匿名）に話しかけて、ヒマつぶしをすることが出来ます。 いまどのくらいのユーザーがつかっていますか？ 森口： いまのところ、登録ユーザー（≒ダウンロード数）が約100万人、MAUがざっくり20万人です。男女比としては半々くらいですね。 メッセージ数でいうと、全体で月に6,000万メッセージ（累計でいうと10億メッセージ）くらい、や
サーバーサイドエンジニア視点でLobiというサービスを紹介します - KAYAC engineers' blog
Lobiチームインフラ担当の長田です。 今年は弊社で運用しているLobiというサービスについて、 サーバーサイドエンジニアの視点から、月いちくらいのペースで紹介していきます。 今回は「Lobiとはなんぞや？」というところを書こうと思います。 サービスの概要 Lobiはゲームを中心としたコミュニティサービスです。 Lobi Chat & Game Community 2010年のサービス開始当初はナカマップという位置情報を絡めたチャットサービスでした。 2013年にスマホゲームに特化するとともにLobiという名前に改名し、様々な機能追加の末に今に至ります。 様々な機能とは・・・ グループチャット スマホゲームのプレイ動画録画・投稿・閲覧(Rec SDK) マルチプラットフォームなスコアランキング(Ranking SDK) スマホアプリへのグループチャット機能提供(Chat SDK) ゲームに
WebRTCによるビデオチャットサービスの開発 - Qiita
はじめに Webで使えるビデオチャットサービスを開発しましたので、システム構成や使用したフレームワークやサービス、開発のポイントなどまとめてみました。 (去年にはQiitaの投稿を作っていたのですが、下書き保存したまま忘れて今頃の投稿になってしました。。) 月々のランニングコストは1000円以内、開発工数は1人月以内で作成しています。 WebRTCが出てきたおかげで、かなり容易にビデオチャットサービスが開発できるようになっていますので、よければ参考にしてください。 開発のポイント、コードだけでなく、開発の動機から、システム構成を決める為、開発前後に行ったビデオチャット関連の技術調査なども載せています。必要最小限の事だけ把握したい方はその辺りは読み飛ばしてください。 開発ビデオチャットサービス: ビデオチャッターズ (http://videochatters.net/) 開発動機 5～6年ぐ
gRPCを試してみる(OSX + Node.js) - Qiita
gRPCの勉強がてら、簡単なチャットアプリのサーバ側とクライアント側を実装してみました。 Pushも試したかったので、サーバからクライアント側へのPushも実装してみました。 環境の準備 homebrewとnodeを導入済みであることが前提です。 ローカルで試せない場合も https://io2015codelabs.appspot.com/codelabs/gRPC#2 を参考にGCEにインスタンスを立ててしまえばそこで同じことが試せるはずです。 Proto3 Proto3がGAになるまでは https://github.com/grpc/homebrew-grpc のスクリプトを利用すると良いようです。
LINE DEVELOPER DAY 2016 開催のお知らせ « LINE Engineers' Blog
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog saegusa2017-04-16Yoshihiro was a network engineer at LINE, responsible for all levels of LINE's infrastructure. Since being named Infra Platform Department manager, he is finding ways to apply LINE's technology and business goals to the platform. こんにちは。LINEでネットワークやデータセンターを担当している三枝です。2017年1月にJANOG39で登壇する機会を頂きましたので、今回
橋本商会 » React+Fluxxor+socket.ioでfluxなチャットを作った
fluxxorとsocket.ioを使ってチャットを作った。大変ミニマムな感じの実装を心がけてて、今後何かWebアプリを作る時はこれを少し組み替えて作るぞというのを意識してる。ようするに低機能最低限でしょぼい。サーバー側はexpressとmongodb。 https://github.com/shokai/node-flux-boilerplate herokuでも動く https://node-flux-boilerplate.herokuapp.com/ クライアントはこんな実装 Fluxアーキテクチャ Reactはなんとなくわかってfluxをやるか、と思ったらflux npmの中がdispatcherしかなかった。 flux.DispatcherのwaitForの実装 まずこのへんを読んでフムフムなるほど（わかったようなわからないような）となる。 Flux | Application
【CoffeeScript編】Node + Socket.IO で簡単なチャットアプリの作成 | DevelopersIO
こんにちは、うえじゅんです。 今回は前回作成したチャットアプリを「CoffeeScript」で置き換えてみます。 CoffeeScriptについては「はじめるCoffeeScript」シリーズを見ていただけると嬉しいです。 「はじめるCoffeeScript その1」 「はじめるCoffeeScript その2」 「はじめるCoffeeScript その3」 CoffeeScriptのインストール まず「CoffeeScript」インストールします。 ターミナルで以下のコマンドを実行してください。 (エラーが出る場合は、「sudo」をつけてみてください。) 「CoffeeScript」 npm install -g coffee-script インストールが終わったらこちらもバージョンを確認しておきましょう。 「coffee -v」で「CoffeeScript version 1.4.0」
Node + Socket.IO で簡単なチャットアプリの作成 | DevelopersIO
こんにちは、うえじゅんです。 今回はタイトル通りNodeとSocket.IOを使って簡単なチャットアプリを作ってみたいと思います。 「Node」のインストール インストールはとても簡単です。 公式サイトからダウンロードしてインストールするだけです。 (確認した環境はMacです) インストールが完了したらターミナルで「node -v」と入力して「v0.8.12」と表示されていれば無事成功です。 ついでに「Express」もインストールします 。 ターミナルで以下のコマンドを実行してください。 (エラーが出る場合は、「sudo」をつけてみてください。) 「Express」 npm install -g express インストールが終わったらこちらもバージョンを確認しておきましょう。 「express -V」で「3.0.0rc5」と表示されたら成功です。 プロジェクトの作成 ターミナルで「ex
チャットワーク開発の裏側 - EC studio 技術ブログ
大変ご無沙汰な技術ブログ更新となってしまいました。 振り返ってみると、前回の記事がもう約2年前！ ブログ記事を楽しみにしていただいていた方には申し訳ない限りです。 この2年間、何をやってたかというと、 「チャットワーク」というサービスの開発に全社を挙げて取り組んでいました。 チャットワークはおかげさまで2011年3月1日のリリース以来、 1年で6万ユーザーを突破し現在も順調に成長を続けています。 そして今年の4月1日に、創業から12年使用し続けてきた 「株式会社EC studio」という社名を「ChatWork株式会社」へと 変更することを発表しました。 （※エイプリルフールに発表しましたが、本当です＾＾； 変更の実施は6月ごろを予定） それなりに親しんでいただけていた EC studio という社名を 変更するのは勇気のいることでしたが、チャットワークというサービスには それだけの可能性
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FirebaseでWebチャットアプリをデプロイするまで（1時間コース）