496
168

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2018-12-14

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

[2021/04/02] チャット廃止しましたので試せません

こんにちは
ゴリラです。

仲間が欲しくてチャット作りました。
人間の方々の役に立たないです。すみません。

チャットはこんな感じになっています。
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だけなので、静的コンテンツを無料でデプロイしてくれる機能を使用しました。

参考情報

作る上で参考にした記事たちです。
先人様様です。
ありがとうございます。

496
168
10

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
496
168

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?