ゴリラチャット作りました

クソアプリ2 Advent Calendar 2018 15日目の記事です。

こんにちは

ゴリラです。

仲間が欲しくてチャット作りました。

人間の方々の役に立たないです。すみません。

チャットはこんな感じになっています。

image.png


使ってみる

アカウント不要なのでこちらにアクセスしてください。

最初いくつか画像を用意してあるので、画像を選択してください。

image.png

選択してからチャットが表示されるので、あとはメッセージを書き込むだけです。

特に発言内容を制限していないのですが、

他の方が不快になるような発言や誹謗中傷はしないください。

至って常識範囲内のことですが一応念の為…


モード

左上にスイッチがありますが、こちらを押すとモードが変わります。

image.png


  • ゴリラモード

    デフォルトはこちらのモードです。

    すべてがゴリラ語で表示されます。

    読めない方はゴリラではないので素直に人間モードにしましょう。


  • 人間モード

    ゴリラ語を日本語に訳して表示してくれます。

    ゴリラじゃない方はこちらのモードをお勧めします。

    ※ゴリラ語を解読する事をおすすめしません。



ほんの少しだけ技術の話


frontend


  • vue.js

  • elementui

フロントは久しぶりにvue.jsを使ってみましたが、やはり便利ですね。

モードの切り替えによるメッセージ動的変更はvue.jsを使えばサクッとできるので、

特に細かいロジックを書いていません。

仮想DOMのおかげで、サクッと変更できるのはやっぱり良いですね。

あまり話すこともないので、ソースを見てみたい方は開発ツールを使って覗いてください。

手を抜けるところは手を抜きまくっているので、あまり参考にならないと思います…


backend

チャットの様に、リアルタイムの情報をやり取りするのに、サーバーの実装が結構めんどくさいので、

最近Twitterでよく見かけるfirebaseというサービスを使ってみました。

firebaseで使用したのはrealtime databasefirebase hostingです。

realtime databaseを使用することで、dbが更新されるとすべてのクライアントのローカル情報を更新してくれるので、

サーバー側の実装は一切していません。

firebase hostingは静的コンテンツのデプロイサービスです。

今回のチャットはhtml、css、jsだけなので、静的コンテンツを無料でデプロイしてくれる機能を使用しました。


参考情報

作る上で参考にした記事たちです。

先人様様です。

ありがとうございます。