Menstagram

最近よく「NoCode」ってキーワードを耳にすることが多く、mofmof inc.では新規事業のプロダクト開発を専門としているので、プロトタイプ開発に使えるのではないかと気になっていた。

どの程度のものを作れるのか、実際にいじって試してみる。

NoCodeのSaaS

NoCodeで開発出来るサービスは既にいくつか選択肢がある。主に海外製が多いみたい。

Glide

https://www.glideapps.com/

Bubble

https://bubble.io/

Adalo

https://www.adalo.com/

ARCADIER - マーケットプレイスに特化したサービスぽい

https://www.arcadier.com/

今回はGoogleスプレッドシートをバックエンドのDBとして利用するGlideというサービスを試してみます。

以前からプロトタイプレベルで何か作るとき、バックエンドにデータベースとか使うのはちょっとオーバーだと思っていて、 GoogleスプレッドシートがDBとして使えたらいいのになと思っていたので、そんな特徴のあるGlideが気になりました。

ラーメンアプリを作ってみる

個人的な趣味で、Instagramのラーメン版であるMenstagramというアプリを作っているので、これに似た感じのラーメンアプリを作ってみます。

https://apps.apple.com/jp/app/menstagram-メンスタグラム/id1441240425

雑に仕様を定義

  • DBにあるラーメン一覧を表示する
    • 画像
    • コメント
    • 店名
  • 3カラムレイアウトにする
  • ユーザー認証
  • 他の人のラーメン画像も見える
  • ラーメンにいいね出来る
  • ユーザーごとのラーメンをみる

作ってみる

まずテンプレートから作っていきます。たくさん種類があるので自分が作りたいアプリに似ているものを選択すれば良い。

テンプレート一覧

Instagramで検索したらやはりあった。

テンプレート インスタグラム

Use This Templateすると、すぐにテンプレのアプリが出来上がる。

テンプレート新規

Edit sheetからRamensシートを追加して適当にデータを登録する。

ラーメン一覧データ

続いてComponents -> Inline List -> SOURCE -> ValuesにRamensシートを選択。なんと、これだけでそれっぽい形になった!!ちょっと感動。

ラーメン一覧1カラム

テンプレートに元々あるので、画像をタップすると詳細画面が開く。

ラーメン詳細

サインインの仕組みも標準でついている。しかし、メアド認証を消せないのと、OAuthはGoogleだけ対応していて、FacebookやTwitterは出来ないぽい。この辺はきっとそのうち対応されるのかな。

サインイン

次はラーメン画像にLike出来るようにする。ComponentにFavoriteというものがあるので、これを追加してカラム名をしてすれば出来上がり。

Like

このようにTrue/Falseで保存される。

Likeデータ

なぜかチャットタブが消せない、と思ったらHIDDEN TABSに移動したら消せた。ラーメンとユーザーのみ残して他のタブも削除しておいた。

タブ設定

続いてプロフィール画面から、当該ユーザーのラーメン一覧を表示したい。ここでリレーションという概念が必要になってくる。

Public ProfilesとRamensをAll User’s Ramensというフィールドでリレーションさせる。

Public Profilesからりレーション

リレーションさせると、Inline List -> SOURCE -> ValuesにAll User’s Ramensを選択出来るようになる。選択するとユーザーに紐づくラーメン一覧が表示された!

InlineListにユーザーのラーメン一覧を設定

実機で動かしてみる

SHAREボタンを押すとQRコードが出てくるので、これを読み取ってスマートフォンで表示出来る。

実機で動かす

実機でサインインする。

実機でサインイン

ラーメン一覧が表示される。

実機でラーメン一覧

まとめ

ここまでコードを書かないで出来るのは素直にすごいなあと思った。が、やはり自由度はそこまで高くなくて、あくまでも型に沿ったアプリしか作れないという印象はある。プロトタイプ〜MVP検証くらいのフェーズが限界で、それ以降はやはりコードを書いて開発する必要はありそう。

またリレーションさせる部分は少々わかりにくく実現するのに時間がかかってしまった。NoCodeとは言えツールを使いこなせるようになる必要はある。

あとは、PWAにしか出来ないようで、ネイティブアプリとしてストアに公開は難しいのかも。ストアに公開するには、iOSならガワネイティブ、AndroidならTWAかと思うが、どちらも対応していなそう(詳しく調べていないけど)。そういう意味でもやはりプロトタイプ、なんとか頑張ってもMVP検証くらいになると思う。