読者です 読者をやめる 読者になる 読者になる

あのにのに

僕の雑記

1日でリアルタイムチャットを作る。

作ります。後から加筆していく。

10:30 Start!

まずは大まかな要件

  • チャンネルの概念がある(slackのような)
  • 1チャンネル1000ポストまで(2chのような)
  • 匿名で投稿
  • 無限ふぁぼ( 超重要!

11:00

スーパーでネギトロを買ってネギトロ丼を食べる。 アニメを見る。 "ユーリ!!! on ICE"と"ガーリッシュナンバー"。よい。

11:30

少し細かく

firebaseのリアルタイムDB使う

  • channel_indexes:Array
    • (name):String
  • channels:Array
    • (channel):Object
      • id
      • message:Text
      • posted_at:Datetime
      • fabo:Integer こんなもんで良さそう

ルーティングとか

/chennel_name#messageID

UIコンポーネント

www.material-ui.com

これ使う。

12:00

プロジェクトを作り始める プロジェクト名はもちろんtimes-nakajima Nekojimaで。

github.com

やるぞ。 firebaseのほうのプロジェクトも作る。

DBを軽くつくっておく。

{
  "rules": {
    ".read": "true",
    ".write": "true"
  }
}

ルールは一旦これでいいや。 f:id:anoChick:20161203122359p:plain

DBもこんなもんで。

frameworkもいれる

github.com

これつかう。

12:30

とりあえず何かしらが公開されている状態にする。 FirebaseのHostingを使う。 react-boilerplateでビルドした後の静的ファイルを公開する形にする想定。 でもいったんてきとーに内容書いてデプロイ。 あとはカスタムドメインを通す。

React.js Boilerplate

f:id:anoChick:20161203124717p:plain もちっと時間がかかる。

boilerplateの初期設定

$ npm run setup
$ npm run clean

これで初期化される。

あとは試しにビルドしてみる

$ npm run build

出来たけど/buildに吐き出された。 firebaseのデプロイ対象ディレクトリは/publicなので、これを変える。

{
  ...
  "hosting": {
    "public": "build"
  }
}

サイドdeployする。

f:id:anoChick:20161203125620p:plain

よしよし。 そんなこんなでSSL通ったぞ。 DNSレコード書き換えて... レコード設定ミスっていたのでもう少し時間がかかりそう。30分ぐらい?

13:00

UIframeworkと、firabaseを差し込んでいく。 <MuiThemeProvider>を全体に適応させる。 f:id:anoChick:20161203132802p:plain

はいった。

$ npm install reactfire firebase react-mixin@2 --save  

firebaseとreactfireをいれる。 react-mixinはReactコンポーネントにfirebaseリアルタイムDBとのバインディング機能をアドオンするために使う。

つながってるか確認するためのデータをRealtime Databaseに入れる。 f:id:anoChick:20161203134833p:plain

フロント側も適当な場所で

    var ref = firebase.database().ref("home_message");
    this.bindAsObject(ref, "homeMessage");

とかする。 f:id:anoChick:20161203134921p:plain ほいきた!

とかやってたらドメイン設定完了したっぽい ビルド&デプロイしよう。

React.js Boilerplate

できt.. てない!反映されない!Nannde!

14:00

デプロイで躓く わからん!反映に時間かかるのかな。 ちょっと休憩しよう。

16:00

この時点でもう結構色んな問題が起こっていることに気づいた。 少しづつ直していく。

17:45

materialUIがうまく扱えなくてどうしよう。一旦寝るという選択肢。

19:00

起きた。 github.com

寝たらすぐに解決した。よかった。

20:30

再開 チャンネル切り替えと追加の機能をつける。

だめでしたー!!!!

思いの外バグ踏んだのと、firebaseの扱いがうまくいかなかったので未完。 とりあえずURLだけ貼っておきます。

https://nekoijma.anochick.com