最近よく「NoCode」ってキーワードを耳にすることが多く、mofmof inc.では新規事業のプロダクト開発を専門としているので、プロトタイプ開発に使えるのではないかと気になっていた。
どの程度のものを作れるのか、実際にいじって試してみる。
NoCodeのSaaS
NoCodeで開発出来るサービスは既にいくつか選択肢がある。主に海外製が多いみたい。
Glide
Bubble
Adalo
ARCADIER - マーケットプレイスに特化したサービスぽい
今回はGoogleスプレッドシートをバックエンドのDBとして利用するGlideというサービスを試してみます。
以前からプロトタイプレベルで何か作るとき、バックエンドにデータベースとか使うのはちょっとオーバーだと思っていて、 GoogleスプレッドシートがDBとして使えたらいいのになと思っていたので、そんな特徴のあるGlideが気になりました。
ラーメンアプリを作ってみる
個人的な趣味で、Instagramのラーメン版であるMenstagramというアプリを作っているので、これに似た感じのラーメンアプリを作ってみます。
雑に仕様を定義
- DBにあるラーメン一覧を表示する
- 画像
- コメント
- 店名
- 3カラムレイアウトにする
- ユーザー認証
- 他の人のラーメン画像も見える
- ラーメンにいいね出来る
- ユーザーごとのラーメンをみる
作ってみる
まずテンプレートから作っていきます。たくさん種類があるので自分が作りたいアプリに似ているものを選択すれば良い。
Instagramで検索したらやはりあった。
Use This Templateすると、すぐにテンプレのアプリが出来上がる。
Edit sheetからRamensシートを追加して適当にデータを登録する。
続いてComponents -> Inline List -> SOURCE -> ValuesにRamensシートを選択。なんと、これだけでそれっぽい形になった！！ちょっと感動。
テンプレートに元々あるので、画像をタップすると詳細画面が開く。
サインインの仕組みも標準でついている。しかし、メアド認証を消せないのと、OAuthはGoogleだけ対応していて、FacebookやTwitterは出来ないぽい。この辺はきっとそのうち対応されるのかな。
次はラーメン画像にLike出来るようにする。ComponentにFavoriteというものがあるので、これを追加してカラム名をしてすれば出来上がり。
このようにTrue/Falseで保存される。
なぜかチャットタブが消せない、と思ったらHIDDEN TABSに移動したら消せた。ラーメンとユーザーのみ残して他のタブも削除しておいた。
続いてプロフィール画面から、当該ユーザーのラーメン一覧を表示したい。ここでリレーションという概念が必要になってくる。
Public ProfilesとRamensをAll User's Ramensというフィールドでリレーションさせる。
リレーションさせると、Inline List -> SOURCE -> ValuesにAll User's Ramensを選択出来るようになる。選択するとユーザーに紐づくラーメン一覧が表示された！
実機で動かしてみる
SHAREボタンを押すとQRコードが出てくるので、これを読み取ってスマートフォンで表示出来る。
実機でサインインする。
ラーメン一覧が表示される。
まとめ
ここまでコードを書かないで出来るのは素直にすごいなあと思った。が、やはり自由度はそこまで高くなくて、あくまでも型に沿ったアプリしか作れないという印象はある。プロトタイプ〜MVP検証くらいのフェーズが限界で、それ以降はやはりコードを書いて開発する必要はありそう。
またリレーションさせる部分は少々わかりにくく実現するのに時間がかかってしまった。NoCodeとは言えツールを使いこなせるようになる必要はある。
あとは、PWAにしか出来ないようで、ネイティブアプリとしてストアに公開は難しいのかも。ストアに公開するには、iOSならガワネイティブ、AndroidならTWAかと思うが、どちらも対応していなそう(詳しく調べていないけど)。そういう意味でもやはりプロトタイプ、なんとか頑張ってもMVP検証くらいになると思う。
