「24時間で最初のユーザーを獲得する」
という企画の一部として12時間で設計～リリースをしろと無理難題を突き付けられたので瞑想を交えつつ作った
企画の全容は私に当企画を提案してきたディレクターが記事として公開します。公開されましたら当記事を更新しておきます。
先に作ったサービスへのURLを記載しておきますのでお気軽にお試しください。
作ったもの
東大生(卒も含む)と話せるチャット的なやつ
サービス利用者も話し相手(東大生)も匿名
登録不要で気軽に使える
チャットとは言うもののリアルタイムの素早いやり取りは想定しない(掲示板くらいの速度感。最悪メール並み。。。)
話し相手となる東大生は現状２人しか用意できていないが、とりあえずこの体制で。
渡されたもの
- 画面デザイン(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消費)
-
スレッドページ
- 初期表示(2h消費)
スレッド内のすべてのメッセージを取得して表示 - コメント追加(4h消費)
- 画面入力値をDBに登録し、スレッドページを更新
- 初期表示(2h消費)
-
共通
- トップページへ移動(0h消費)
アイコンをクリックでトップページへ遷移
- トップページへ移動(0h消費)
ドメインを独自のものに変更
こちらの記事を参考に、取得した独自ドメインを設定(1h消費)
Firebaseとムームードメインで独自ドメインでhttps
まとめ
12時間で作れと言われていたのに15時間かかってしまったこと以外は満足しています。
時間がかかってしまった原因はfirestoreのせい。使ったことないんだもん。
個人情報などをうっかり書き込まないように。こちら側に筒抜けです。
もう一度サービスのURL書いておきます。暇があったら使ってみてください。
二人で回しているため、返信がなかったり遅くても怒りのメールは勘弁して。。。
つかれた。ねむい。サハスラーラ
【追記】
企画の全容が記事として公開されました。
こちら
あまりにも説明不足かつUIとUXが良くないので改良対応中です。。。。