考える力を身につけるをコンセプトにした思考整理サービスのQ&Qをリリースしました。
Q&Aでは答えは”与えられるもの”でしたが、社会に出ると答えのない問題ばかり。
それらの問題の要因を分解して課題にして、実行できるように取り組む力は誰も教えてくれません。
Q&Qは質問に質問を返すことで、質問オーナーが自分で自分の問いに向き合っていくサービスです。
今回は、このサービスと技術まわりを紹介したいと思います。
個人開発やチーム開発される方の参考になればと思います。
#Q&Qとは
問いQを立てると質問Qを返される鬼畜サービスです
自分の悩み・課題の答えを他人からもらうQ&Aの概念ってよく考えるとおかしくないですか。
普通に考えると、自分の悩みや課題は、最終的に自分で答えを導くべきですよね。
そう考えると質問に答えを提示するQ&Aよりも、質問に質問で返すQ&Qの方がしっくり来たので作ってみました。
これは、大企業の経営層が高い費用を払って受けているコーチングと同じ思想です。あくまでも問題解決するのはあなたで、周囲のコーチはあなたに質問を投げかけ、あらたな視点や問題を整理するきっかけをくれます。
##サービスTOP
Q&Qが新しい概念で伝わりにくいので、スライドアニメーションにしています。
- 質問オーナが問いを立てる
- 閲覧者がその問いに質問する
- 質問オーナが回答する
- 閲覧者が新たな質問をして、ツリーが構成されていく
という流れです。
Vue.jsのtransition機能を使うとスライドアニメーションもサクッと実装できてしまいます。便利な時代ですね。
##検索ページ
問いのスレッドタイトルが並ぶデザインにしています。
タイトルだけだと中のコンテンツがわからないので、最新の質問をタイトルの下枠に表示しています。
bulmaという汎用cssのcardのlayoutをベースとして使用しています。
##ツリーページ
ツリーページは
・質問Qの付箋がツリー上に並ぶグラフUI
・質問・回答のテキストが並ぶスレッドUI
で構成されます。
イメージとしてはグーグルマップと同じです。
地図を俯瞰するように付箋のグラフUIで質問全体をみて、特定の質問をクリックするとその付箋番号の質問のテキストスレッドが表示されます。
ここが一番デザインで苦労したところで特許出願済ですが、未だに模索中な部分でもあります。
開発初期はグラフをcytoscapeで実装していましたが、canvasを作る関係上iOS上でのメモリオーバフロー問題に苦しみ、cssで実装する独自開発に切り替えました。
##サービスへの思い
世の中には正解のあるものと正解のないものが存在します。
正解のあるものは論理・科学・歴史などの定義・再現性や実データが存在する過去のものです。小学校から大学まで15年ほどの長い時間をかけて、私達はこの正解のある領域を勉強します。
しかし、残念ながらこの領域は、正解があるが故にググれば秒で答えが出てくる誰もが簡単にアクセスできる分野です。ホリエモンらが学校教育不要論を唱えてるのもこれが一因でしょう。
正解のないものは、その時代の価値観などの流動する未来のものです。
企業活動とはお客様に価値を提供する活動ですから、求められるのは”正解のない領域”で答えを見つけていく能力になります。しかし、”正解は与えられるもの”を前提に教育を受けてきた我々には無理ゲーです。レベル0でいきなり、魔王と戦うようなものです。
Q&Qでは、そんな我々が正解のない問題に立ち向かう手段を提供しようと思います。
起業家たちが頭の中でやっている、自らの問いに問いを重ねて、未来の正解を導いていくプロセスをサービスによって実現します！
使い方： https://qnqtree.com/tree/l8MQMziLF9DYP7Ryyvfm
#実装について
ここからは技術について説明します
##Q&Qの実装環境 -- すべて無料枠
・ Vue.js
・ Bulma.css + original css
・ Firebase （本番x1, テストx1)
・ Authentication (認証・認可）
・ Cloud Firestore （Data保存）
・ Storage (OGP, Profile保存）
・ Functions (OGP用URL）
・ Google Analytics (解析用)
・ GitHub
・ Miro (UI検討用)
・ Slack (会話用)
・ Confluence (仕様整理用)
・ Google Hangout (web会議)
・ JIRA (Issue管理用 ※途中から使わず）
外部ライブラリ
・ browser-image-compression:画像圧縮
・ html2canvas:画像生成
・ link-prevue:httpからプレビュー画像URL取得
・ vue-infinite-loading:ロードのアイコン生成
・ vue-youtube":Youtubeの埋め込み
・ vue2-editor":editorの埋め込み
##vue.jsの所感
日本語のユーザガイドがしっかりしていて非常に使いやすいです。外部ライブラリも充実しています。
Web開発する上では不満なしでしたが、将来的にAndroid/iOSのAppをそのまま作りたいって場合には、Vue Nativeはまだ貧弱そうなのでReactの方が良いかもしれません。
Vueで唯一はハマったポイントは、リアクティブでした。
プロパティの定義の仕方や計算に仕方によって、値の変更をリアルタイムに検知してくれなくなってしまいハマることがあります。
参考：https://jp.vuejs.org/v2/guide/reactivity.html
##Bulma cssの所感
bootstrapはみんなが使っていて、bootstrap感がでてしまうので嫌だなぁと思ってbulmaのフレームワークを使いました。
jQuery等の依存関係にないPureなCssフレームワークなので使いやすかったです。
特にハマるポイントもまったくなかったです。
##開発シンク
###仕様整理
Miro
デザイン検討やアイデアのブレスト段階ではMiroを使いました。キャンパスを縦横無尽に使えるので初期は非常に助かりました。
Confluence
ある程度仕様が固まってきてからは無料枠が用意されたConfluenceに移行しました。
３名で休日非同期で開発してたので意外とありがたかったです。
###ISSUE管理
JIRA
初期は無料枠ができたJIRAを使う予定でしたが、３名の休日非同期開発にはtoo rich過ぎて使いこなせずでした。
GitHub
最終的には開発リポジトリを上げてるGitHubのIssue管理をそのまま使う方法が身の丈にあっていて、ちょうど良かったです。Slackと連携してIssueを飛ばすとわかりやすくて更に良かったです。
###進捗確認
SLACK
基本的にはSlackで会話しながらやってました。
必要があればGoogle Hangoutで会話していました。
初期はアジャイルやスクラムを取り入れようとしましたが、
別会社のサラリーマンの３名が休日に非同期で開発していると開発タイミングや週に使えるリソースがまちまちすぎて機能しませんでした。
##チーム開発の感想
別会社のサラリーマンの３名体制（大学の同期）で、休日に非同期で半年程度ちまちま開発しました。
個人開発x3みたいな体制で、コロナもありF2F会議の回数は1~2回程度。Web会議は週1回やる程度でした。
私が担当したのは、主に企画・デザイン・フロントエンドです。
実は過去に３回程度サービスをリリースして挫折しており、今回の開発では自分が継続して使える課題をテーマにして開発をしました。
考える力と発信する力を身に着けたいなと普段から思っていたのですが、
・ QiitaやBlogは1記事書くのにかかるパワーが大きすぎてなかなか手をつけられない
・ Twitterは逆に1ツイートにかかるパワーが引くすぎて思考力が上がらない
というところで、今回はQ&Qという思考と発信のバランスが取れたサービスを実現できたつもりです。
他人が質問Qしてくれなくても自問自答することで一人でも使えます。
###良かった点
・良い仲間に恵まれた点
時間のないサラリーマンが休日を潰して開発するのって結構つらいものです。そんな中でも、一緒に開発しリリースまでこぎつける事ができました。
・新しいサービスが作れた点
Q&Aに対して、Q&Qという新しい概念のサービスが作れました。UI・技術特許も出願できました。需要があるかはこれからですが、新しい価値観を問えるサービスを世に出せたのは嬉しいです。
・技術が身についた点
私は本業はHWの設計開発のため、SW開発についての知識や開発スタイルが身につきました。Firebaseでバックエンド開発の知識も一通り学ぶことができました。
・実際に使っている点
生煮えのUXや開発議論にもQ&Qを使って検討したりしていてワークしているところが良いです。
参考1：QQのUXを考える、スーパマリオの確固たる哲学は「右に進む」だといいますけれど
参考2：QQのいいね機能って何？
参考3: クローズドクエステョンはよくないみたいに言うけど、QQやってたらそうでもなくない？
参考4: QQしてると、Qしやすいやつとしづらいやつがあるんだけれど、何が違うんだろう？
###つらかった点・改善点
・仲間が離れていく
３名以外にも社内にサポートしてくれるメンバーがいましたが、コロナでリモートワーク勤務になったこともあり自然と離れていきました。忙しいサラリーマンの休日のリモート活動だけでプロジェクトを続けていく難しいです。
・課題を解決しているか不安になる
過去にない新しいサービスが作れたと言いましたが、逆に言うと需要がないから過去に生み出されなかった可能性もあります。サービスの改善活動はこれからも続けていくことになります。
・業務に関係ないスキル
私の本業はHW設計開発のため活動で身につけられるスキルが本業とは直接関係ありません。上手くいかなくても、会社でスキルが役に立つからいいやといった考え方はできない立ち位置でモチベーションを維持する必要がありました。
・仲間に甘えない
SW開発の知識がないからとメンバーに甘えると破綻すると思います。人はある程度サービスの形が見えないとやる気は出ないものです。まずは言い出しっぺの自分が手を動かし、可能性のみえるところまで一人でコーディングする気概がないと続かないと思います。
##開発モチベーション維持
私の場合は、本業の商品開発に対するやり方の不満・怒りをモチベーションにしていました。このモチベーションは毎日仕事をするだけでエネルギーをガンガン貯められるのでオススメです。
私の会社のものづくりは、お客様の課題や体験を考えず、他社とのスペック比較・他社にたいする技術優位性で商品を定義していきます。
「薄い・軽い・高品質」という昭和初期に誰かが決めた価値観を普遍の真理と決めつけて、その正解にいかに近づけていくかという義務教育的なアプローチです。
このやり方に嫌悪感を覚えて、新しい価値軸を探すアプローチ手法を模索している中で、Q&Qにたどり着きました。
社会人は時間も暇もあまりないので、休日開発のモチベーションを続ける方法は
・会社の怒りを開発にぶつける
or
・会社でも役に立つスキルを開発する
という方法が、持続可能性がありそうかなと思います。
社会人で個人開発・チーム開発する人の参考になればと思います！
ありがとうございました。