Firebase Startup #3 - Firepresso - Yet Another WordPress - Hackathon
2020年1月19日（日）に FJUG（Firebase Japan User Group）とシンギュラリティ・ソサエティのコラボ企画、Firebaseのイベントを開催しました。
会場は株式会社マネーフォワード 様にご提供いただきました✨
コンテンツ
今回のハッカソンは、FirebaseでWordPressのようなCMSを開発していただくという内容でした。Cloud Firestoreのラフなデータ構造を共有し、それに基づき Web / iOS/ Android / Flutter など、各人各々の得意な環境で実装を行っていきます。
WordPressとは
現在世界中で公開されているWebサイトの3割りは、WordPressというCMS（コンテンツ管理システム）で制作・運営されています。2003年に登場して以来、数十年たった今でも、最も利用されているCMSとして君臨しています。そんなWordPressは、最近目まぐるしい進歩を続けているサーバーレスとは違った2003年来からのアーキテクチャーで構成されています。また、WordPressを構築する場合、サーバーやRDB（リレーショナルデータベース）が必要で、サーバーの知識が必要だったり運用コストなどがかかります。
WordPressをFirebaseで
今回の企画は、FJUG村本氏の一言からはじまりました。
CMSをFirebaseで実装すれば、デプロイするだけでほぼ瞬時に、ほぼ無料で環境を作ることができます。 しかもスケーラブルです。
中島氏を巻き込んで、FirebaseでCMSを作ろうという企画がスタートしました。ソースはOSSにし、誰でも自由に開発できるスタイルで進めることにしました。一から作るのは大変なので、現在当サロンで開発中のサロンシステムの一部を切り出し、それをベースに進めることにしました。
Firepresso 解説 - 中島聡
今回ベースとなるCMSは、中島氏が Firepressoと名付け、当日ご本人より解説いただきました。
はじめに、WordPressの普及率がすごいこと、2003年からいまだに使われていること、調べるとよくできているということなど、WordPressへの感想や、今のWordPressに足りないもの、欲しいものについてお話しいただきました。次に Firepresso のアーキテクチャーやデータ構造、ルールズ、セキュリティについて解説いただき、最後に命名の由来なども教えていただきました。
中島氏のスライドはこちらから
LTタイム
発表者からは、Firebaseを使用した感想や知見などを共有していただきました。（記録がとりきれておらず、写真がないかたごめんなさい）
#1 onSnapshotを使ったリアルタイム反映
村田 拓也さん（@disco_neko）による Firestore の onSnapshot についてお話いただきました。
スライドはこちらから
#2 SlideLiveの近況報告
次の発表者は、小松 竜太さん（@ryotak3）。当イベントのシリーズ「Firebase Startup」発のWebサービスの近況についてお話しいただきました。
スライドはこちらから
#3 悩ましい、運営中のサイトのFirestoreのデータ構造の変更
次の発表は、水越 拓矢さん（@tammax）。Firestoreのデータ構造で苦労されたことについてお話しいただきました。
スライドはこちらから
#4 Cloud Functions for Firebase + Stripeを使って決済の仕組みを作ってみた
フジワラ ユウタさん（@Fujiyama_Yuta）。個人開発をしているWebサービスに課金サービス Stripe を導入したことについてお話しいただきました。
スライドはこちらから
LTの皆さま、知見をご共有いただき、ありがとうござました！
設計タイム
設計タイムについては事前の準備がまったくできておらず、LTタイムに到着された村本氏に設計タイムのハンドリングをいきなりお願いするというムチャぶりをしてしまいましたが、快く引き受けてくださいました。
設計タイムは、Googleのデザインスプリント手法を取り入れ、進められました。
まずは、ランチを食べながら Firepresso のリポジトリを fork、clone していただき、動かしていただきました。そこから Firepresso に足りないものや、こんな機能が欲しいなど、課題を付箋に書いてホワイトボードに貼っていきました。溜まった課題を仕分け・整理し、チームなり個人なりで自分が担当したい機能を作っていただくことになりました。
Firepressoは、亜種がたくさんできてもいいし、独自の進化を遂げてもいいし、本家にプルリクして合流してもいいし、なんでもありの方針です。
ライセンスについては
本イベントで作成されたものは、MITライセンスで配布することを条件とします。
ということになっています。
実装タイム
ここからは、ひたすらもくもくです。
結果発表！
時間ない中、皆さんがんばっていただきました。（記録がうまくとれず、チームによって記載している内容量が異なりますがご了承ください💦）
#1 SNSチーム（６人）による「投稿記事シェアボタンを追加」
いいね機能の実装を選んだ3人チーム。なんと、このチームは全員 React がはじめてとのこと、実装までがんばりました。
・SNSシェアボタン
・リアクションしたときにシェアする機能
・記事のところから、任意のSNSに投稿できるようにした（記事を投稿したらSNSへ自動連携することを考えたけれど、Firepresso は記事を投稿すると真っ白なページをシェアしてしまう）
・Qiita を真似してみた
・リンクを飛ばすところまで完成
#2 コメントチーム（4人）による「Firepressoへのコメント機能追加」
こちらもReactはじめてチーム。
・記事ページの下にコメントをつける機能をイメージ
・現状は、ログインしないと記事が開かないようになってる→コメント数が伸びないんじゃないか🤔
・ログインしなくても記事が見れるようにしようと思った
・作るとこまではできませんでした
＜イベントへ参加した感想＞
・こんなに時間が足りないのかと思った
・他の人と手を動かしたのがいい経験になった
・React初めて、勉強になった
・開発者じゃなかったけど、参考になった
#3 themeチーム（9人）「Firepressoのtheme機能（構想）」
CMSの外観をガラリと変えるテーマ（テンプレート）チームの発表です。テーマをどう選択させようかで意見が別れたそうです。
#4 カテゴリチーム（6人）「タグの追加」
記事ごとにタグを追加できるように進めたとのこと。タグの機能を実装するにあたり「タグの追加」「タグでの絞り込み検索」の実装を、チームをふたつに分けて実装しました。
＜タグの追加＞
タグのエディタを追加。
＜タグでの絞り込み検索＞
画面のヘッダのところにエディタと機能を追加。
・タグの記事がいっぱい見れるようにした
・ファンクションの絞り込みができるようにしたかった
・GitHub に issueを書きました
・コレクショングループを作ってやってみたけど、スナップショットが動かなかった → どなたか教えてください
#5 Flutterチーム（8人）による「FlutterでDragable UI（構想）」
Flutterチームです。betaの話題が出ていたので、Flutter for webで開発されたのでしょうか。ドラッガーUIを実装。
・Flutterの環境がないメンバーが多かったので、環境構築から行った
・ドラックアンドドロップを実装
・画像やテキストをドロップできたらいいなと思った
・Flutterのドラッガブル機能を使った
・ポジションを設定するのに、beta版だったため、うまく動きませんでした
#6 Vueチーム（4人）「Vue化」
Firepresso は React でできていますが、こちらのチームは Vue化に挑戦。
・Vue化しようとしたら動かず、ゼロから作成
・はじめに、担当決め。ログイン、アップロード、デザイン二人
・デザインは Vuetify.js を採用
・環境構築で一時間くらい使ってしまった
・残りの30分で、画像のアップロードとログイン、エディタ機能を追加
・時間がなかったけど面白かった
実装したもの
https://pdf-test-7a1fb.firebaseapp.com/#/cupload
#7 TS化チーム（5人）「FirepressoのTypeScript化」
こちらのチームは、TypeScriptの知見がなかったけれど、Firepresso のTypeScript化に挑戦。
・tsconfig.json を作った
・型チェックが厳しくて大変だった
・無理やりビルドをとおした
・tslintを入れた
・型方定義をインストールしないとならなかった
・ビルトとデプロイまでできた
スライドはこちらから
#8 Likeチーム（3人）による「Like機能の追加」
会場枠に参戦のマネーフォワード さまチーム。なんと！CTOの方もご参加くださいました。Firebaseは皆さん初心者とのこと。Slackにいち早くエントリーしていただいたのに、最後になってしまい、すみませんでした💦
・自分や他の人がいいねしたらリアルタイムで更新
・一覧でいいねした人、してくれた人が見れる
データ構造などについても解説いただきました！スライドはこちらから
総評
中島氏：大勢の人でオープンソースプログラミングをするのが初めてだったので勝手がわからなかったけれども、だいたいこんな感じというところは掴めました。やって良かったです。どうもありがとう。引き続き開発して、ぜひ追加したい機能や気に入らない機能がれば修正してプルリクエストください。
Firestore は、リレーショナルにしないで何でも中に詰め込む感じ。RDBでは絶対やらないだろうという設計になっています。それに慣れないと、なんで？ってなります。同じデータがダブって登録される。ユーザーネームのシンクをどうやるの？となるけど、シンクはしなくていいのです。それはバックエンドでやればいい。そこが Firebase の面白いところ。Firepresso は、はじめから TypeScript でやればよかったな、と思いました。TypeScript にしてぜひプルリクエストください。TypeScript化、あれは、細かい単位で変更できるのかな？（会場より：モードを変えるとできるそうです）。それはやったほうがいいと思います。
村本氏：今回のテーマの言い出しっぺは僕なんです。中島さんから良いのがあるからって提供してもらって。せっかくなのでハッカソンにして盛り上げてもらおうと思って、みんながこれ欲しいなと思った機能を実際に実装にしてもらいました。
Firestore、これはどうしたらいいんだろうって考える。RDBならJOINつかえるのに、これできないじゃん・・僕はまさにそこで詰まって欲しいです。詰まらないとわららない。そこで考えて、理解できる。このあと、この中途半になってる悶々感を家に持ち帰って、続けてもらえればと思います！
After Party
最後に歓談タイム。皆さん楽しんでいただけたようで、良かったです。
歓談中も、講義。。
開発に参加しよう！
Firepresso は以下のリポジトリに置いてあります。
https://github.com/SingularitySociety/firepresso
イベントに参加されなかった方も、ぜひ Forkして開発してみてください。そのままご利用いただいてもいいですし、本流に入れて欲しい機能を実装したら、ぜひプルリクしてみてください。CMSはコア機能以外にも、CMS本体のプラグイン構造、WYSIWYGエディター、画像エディター、など、様々なモジュールが必要です。Firebase で動く次世代の CMS をみんなで作っていきましょう！
次回のイベント
2/29（土）に「Firebase Startup #4 Flutter + Firebase」を企画しています！。【todo】
【todo】 コンパスのリンク
おわりに
中島氏と共に、総評・審査員をお受けくださいましたFJUG村本様、会場をご提供いただきましたマネーフォワード 様、会場をお貸しいただいたうえイベントのフォローまでしてくださいましたご担当者様、当日の運営にご協力いただきましたスタッフの皆様、ハッカソンに参加された皆様、ご協力本当にありがとうございました。心よりお礼申し上げます。
todo 小平さんの写真。クレジットわすれずに。
本イベントは以下の団体にスポンサーいただきました
Google https://about.google.com/
株式会社マネーフォワード https://corp.moneyforward.com/
未来技術推進協会 https://future-tech-association.org/
一般社団法人MA https://we-are-ma.jp/
Creww株式会社 https://creww.me/ja/
この記事が気に入ったらサポートをしてみませんか？