Help us understand the problem. What is going on with this article?

firebaseを使って12時間で設計~リリースした話

More than 1 year has passed since last update.

「24時間で最初のユーザーを獲得する」
という企画の一部として12時間で設計~リリースをしろと無理難題を突き付けられたので瞑想を交えつつ作った:eye:
企画の全容は私に当企画を提案してきたディレクターが記事として公開します。公開されましたら当記事を更新しておきます。

先に作ったサービスへのURLを記載しておきますのでお気軽にお試しください。

東大生と暇つぶし

作ったもの

東大生(卒も含む)と話せるチャット的なやつ
  • サービス利用者も話し相手(東大生)も匿名

  • 登録不要で気軽に使える

  • チャットとは言うもののリアルタイムの素早いやり取りは想定しない(掲示板くらいの速度感。最悪メール並み。。。)

話し相手となる東大生は現状2人しか用意できていないが、とりあえずこの体制で。

渡されたもの

  • 画面デザイン(html, css, js)

使うもの

  • Firebase Hosting

  • Cloud Firestore

  • Cloud Functions

おおまかな仕組み

だいたいのリクエストは以下の仕組みで動かしている。

①ブラウザからCloud Functionsのfunctionを叩く

渡された画面デザインとして貰ったjsをちょこちょこいじくり、ajaxでCloud Functionsのfunctionを呼ぶサンプル

    $.ajax({
      url: 'https://xxxxx.cloudfunctions.net/xxxxx',
      type: 'get',
      dataType: 'text',
      success: function(result) {
        // cloud functionsからの返却値でごにょごにょ
      }
    });

②functionに渡された値を元に、Cloud Firestore内のデータを参照、登録、更新する

 GETパラメーターとして画面入力値などを取得するサンプル

exports.xxxxx = functions.https.onRequest((request, response) => {
  var userName = request.query.userName;
  var threadTitle = request.query.threadTitle;
  var comment = request.query.comment;
  .....
  .....
}

③function実行後の戻り値を元に画面を操作する

 functionから返ってきた情報を画面に反映させるサンプル

    $.ajax({
      url: 'https://xxxxx.cloudfunctions.net/xxxxx',
      type: 'get',
      dataType: 'json',
      data: {"hogeId": id},
      success: function(result) {
        $("#show-thread-title").text(result.threadTitle);
        showChat(result.messages); // messagesを表示する何らかの関数
      }
    });

画面と画面内でのアクション

  • トップページ

    • 初期表示(2h消費)
      個人を識別し、ユーザーに紐づくスレッドを表示
    • スレッド作成(4h消費)
      画面入力値をDBに登録し、スレッドページへ遷移
    • スレッドへ移動(2h消費)
      画面で選択したスレッドのスレッドページへ遷移
  • スレッドページ

    • 初期表示(2h消費)
      スレッド内のすべてのメッセージを取得して表示
    • コメント追加(4h消費)
    • 画面入力値をDBに登録し、スレッドページを更新
  • 共通

    • トップページへ移動(0h消費)
      アイコンをクリックでトップページへ遷移

ドメインを独自のものに変更

こちらの記事を参考に、取得した独自ドメインを設定(1h消費)

Firebaseとムームードメインで独自ドメインでhttps

まとめ

12時間で作れと言われていたのに15時間かかってしまったこと以外は満足しています。

時間がかかってしまった原因はfirestoreのせい。使ったことないんだもん。

個人情報などをうっかり書き込まないように。こちら側に筒抜けです。

もう一度サービスのURL書いておきます。暇があったら使ってみてください。

東大生と暇つぶし

二人で回しているため、返信がなかったり遅くても怒りのメールは勘弁して。。。
つかれた。ねむい。サハスラーラ:eye:

【追記】
企画の全容が記事として公開されました。
こちら

あまりにも説明不足かつUIとUXが良くないので改良対応中です。。。。

gusaku
Application Developer in Java, Python and so on.
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした