Nuxt.js + Firebaseで (最高の)ToDoリストを作った話

Transcript

1. Nuxt.js + Firebaseで (最高の)ToDoリストを作った話 Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 Chiaki Uehira https://uhck.in
2. 大阪を中心にウェブクリエイターとして活動していま す。デザインからシステム開発まで一貫してやっていま す。合同会社ピクセルグラムの代表。 Chiaki Uehira Web Creator https://uhck.in https://pixelgram.jp https://twitter.com/_uhck Nuxt.js + Firebaseで(最高の)ToDoリストを作った話
3. 訂正 Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 Nuxt.js + Firebaseで(最高の)ToDoリストを作ってる話 Nuxt.js + Firebaseで(最高の)ToDoリストを作った話
4. 作りたいもの SNS + ToDoリスト Nuxt.js + Firebaseで(最高の)ToDoリストを作った話
5. 概要 共有に特化したToDoリスト (タスク管理ツール) Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 相互的にタスクがみれる
6. Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 User_01 User_02 相互的にタスクがみれる 仕事 やること 某システム案件 読むべき本 仕事 某システム案件 共有 プライベートにできる
7. Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 プラットフォーム Webアプリケーション / PWA Desktop URLでの共有のため Electronなどで簡単にできるなら iOS / Android プッシュ通知などの利便性
8. なぜ作りたいのか モチベーション Nuxt.js + Firebaseで(最高の)ToDoリストを作った話
9. ❶ピクセルグラムの働き方 Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 個人(フリーランス)が集まった組織 なぜ作りたいのか ピクセルグラム ウェブクリエイター プランナー フォトグラファー イラストレーター
10. 案件に人の出入りが多くタスクの共有が難しい Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 フリーランスでの働き方では、従来のサービスでは難しい ピクセルグラムの課題
11. ❷そのひとが忙しいのか確認したい Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 特にプロマネとかやってると気になる。 なぜ作りたいのか
12. Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 ❸タスクをオープンにする世界線にしたい すごい人がどんなことをやったり、 どんなものに関心があるか、 オープンにしたい。 なぜ作りたいのか
13. Trello, asana, Backlog, Google Tasks, ToDoist Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 組織向けが多い。個人が主体になってプロジェクト単位の共有できるものが少ない。 従来のタスク管理ツールでは難しい
14. サービス開発の理想 → ペルソナは俺「オレソナ」 Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 自分が欲しいものを作ればいい。 無いなら作れるのがエンジニア
15. 爆速であること Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 サクサク動くこと。めんどくさいアプローチがないこと。 ToDoリストに求めるもの 共有性 Slackなどで共有が可能なこと。URLが発行されていること。 マルチプラットフォーム どんなデバイスでも使えること。
16. Webアプリケーション / PWA Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 プロトタイプ → ドックフーディング 進捗
17. Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 Nuxt.js Nuxt.js は Vue.js アプリケーションの開発を楽しくするために必要なすべての設定が揃ってるもの。 技術構成 Firebase Firebase は Google が提供しているモバイルおよび Web アプリケーションのバックエンドサービスです。
18. Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 Nuxt.js 慣れてるから。 技術構成 （理由） Firebase (Auth, Firestore) とりあえずプロトタイプを作るためのセットが揃っているから。
19. まだ公開できない Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 共有はなしでお願いします。 とりあえずDEMO
20. Nuxt.js Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 Nuxt.js は Vue.js アプリケーションの開発を 楽しくするために必要なすべての設定が揃ってるもの。 使ったもの
21. Vuetify Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 コンポーネントライブラリ 使ったもの
22. Nuxt PWA Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 PWA対応するモジュール 使ったもの
23. Firestore Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 NoSQLのデータベース 使ったもの
24. Firebase Authentication Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 ユーザー認証のためのサービス 使ったもの
25. Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 勉強になったことを共有します。 勉強になったところ
26. 認証状態の検証にnuxtServerInitを使おうと思ったけど動かない Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 SPAモードではnuxtServerInitが動かない nuxtClientInitを作ろうみたいな動きがある
27. plugins/init.js を作る Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 解決策 nuxt.config.jsに登録すると一度だけ読まれる。
28. FireStoreのdocumentが変更されたタイミングが検知できない？ Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 VuexFireが微妙だった VuexFireを使わないで自分で書いたらよかったかも。 知ってる人がいるとおしえて欲しい。
29. 登壇者から参加者に質問する時間 Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 僕が悩んだことを解決してください。 質問コーナ
30. SubCollectionかReferenceか Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 Firestoreに詳しいひと教えてください！ 質問コーナ
31. マルチプラットフォームの場合、 Cloud Functionsで共通関数を作るべきか Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 Firestoreに詳しいひと教えてください！ 質問コーナ
32. Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 開発メンバー募集 Webアプリケーション / PWA Desktop 僕だけ。 まだだれもいない。 iOS / Android まだだれもいない。
33. Nuxt.js + Firebaseで(最高の)ToDoリストを作った話 まとめ プロトタイプはNuxt.jsで作ったけど、Flutterとか使っても面白いかも。 まだまだFirebaseでわからないことは多い。