フロントエンドの地獄
cover image

タブで分けられるシンプルなメモ帳 tabmemo

制作:2019

タブで分けられる、iOS,Android,Web(PC及びiPad)の3プラットフォームで使えるシンプルなメモアプリです。プレーンテキストでメモが書けて、それぞれのデバイスでログインすると自動でデータ同期がされます。

tabmemo

タブで分けられるシンプルなメモ帳

tabmemo site iconhttps://tabmemo.com/
tabmemo site cover image
「tabmemo」のシステム構成図
「tabmemo」のシステム構成図

システム構成のポイント

アプリ版はReact Native Expo、Web版はReact.jsで開発しており、View部分は別ですがFirebaseへ認証&データ保存をしている部分はソースを共通化しています。

React NativeではOn The Airアップデートを使うことでストアを介さずにバグ修正などができます。Expoを利用するとそのソースを配布するサーバーも用意してくれているので管理が非常に楽です。

さらにそれを利用して、GitHubでPRを作成するとGitHub Actionsが起動 → Expo にpublish → PRを確認できるテストアプリのQRコードを発行してSlackに通知してくれますのでTestflightなどを通さずにすぐに両OSの実機で確認が出来ます。その際 expo-qr-notify というライブラリを利用しています。

LPとWeb版のホスティングはNetlifyを利用してデプロイしています。特に設定無しでリポジトリを指定するだけで自動でサイトが公開できるの非常に楽です。

tabmemo

タブで分けられるシンプルなメモ帳

tabmemo site iconhttps://tabmemo.com/
tabmemo site cover image