NoCodeツール「Adalo」で、Goodbeer STANDの本日のビールメニューアプリ（PWA）を作ってみた話
本記事は、ニードスタッフが業務や趣味について思うままに書き綴るアドベントカレンダー企画「nide.inc ライトニングトーク部 Advent Calendar」の第9日目です。
nide.inc ライトニングトーク部 Advent Calendar 2020
ppmチームのピンクの髪の毛の人、ディレクターのあずまです。
今年は仕事の合間を見て、「NoCode（ノーコード）」という開発手法を調べていたので、今日はその話を書きたいと思います。
タイトルがよくわからないのですが？
タイトルを読んで「なに言ってんのかぜんぜんわからん」という人も中にはいると思います。先生怒らないから正直に手を上げて！
まずは
・NoCode
・Adalo
・Goodbeer STAND
・PWA
このあたりの単語をさらりと説明したいと思います。
「NoCode」はプログラミングをせずにWebサイトやアプリ開発をする手法です。
1からコードを書かずに実装するので、すごいスピードで開発できるところが利点。
コードのエラーも起きないので、デバッグに死ぬほど時間がかかって泣くこともありません。（あれはあれでわかるとすごいスッキリするけども）
そんな「NoCode」のツール、いろいろ出てきています。
glide、Bubble、Honeycode、Yapliなどなど。
今回使った「Adalo（アダロ）」もそのひとつです。
レコード数やUIの自由度、無料・有料といった料金面などなど、各ツールごとに特色があるので、作りたいものにマッチしたものが選べます。
「PWA」はProgressive web apps＝プログレッシブウェブアプリの略で、中身はモバイル向けWebサイトだけど、見た目をアプリ化する技術、というとわかりやすいでしょうか。
一度見たページはオフラインでも見れたり、プッシュ通知してくれたり、スクラッチで作ると結構たいへんですが、NoCodeツールを使うとコードを書かなくてもできてしまいます。
最後に「Goodbeer STAND」。
弊社のビア・フード事業部が運営しているクラフトビールとグルメバーガーを楽しめるお店です。博多駅直結のKITTE博多にありますので、お近くにお立ち寄りの際はぜひ！おこしください。喫茶メニューもやってるよ。
というわけで、今回は
「Adalo」を使って、Goodbeer STANDの本日のビールが見れる、アプリっぽく見えるWebサイトをコードを書かずに作ってみた話
をこれからしようと思います！
前置きが長くなっちゃったので、本編はささささーと説明していきますね。
こんな感じで開発するんだなーと流れがお伝えできれば、ライトニングトーク的には成功です。
まずはツールを選定する
Goodbeer STANDの本日のビールの一覧はこんなデザインのPDFになってます。メニューが2〜3日に1回切り替わるので、更新もたいへんそうです。
これをPWA化しようと思います。
どのNoCodeのツールを使うかはけっこう肝なんですが、使ってみたAdaloの特長はこんな感じ。
・無料で使えるデータ量は50レコードまで（割と少ない）
・独自のデータベースを持っていて、入力フォームも自動で作られる
・UIデザインの自由度が高い
・既存テンプレートのデザインもステキ
Adalo使ってなんか作ってみたいなーが出発点だったので、合いそうな題材を選んだのが正直なところですが、Adaloで作ると良いかも、と思った理由は以下の点です。
・メニュー点数が30〜40点ぐらいなので、規模的にちょうどよかった
・ビールのカテゴリ別に詳細ページを表示させるぐらいで、複雑な出し分けをする必要がなかった
・飲食店舗だし、あまりに無骨すぎるUIにはしたくなかった
・1製品に対する情報が多いので、表示レイアウトの自由度が高いものを使いたかった
glideでもいいかなーと思って流し込んでみたものの、画面のレイアウトの自由があまりきかないので、なんか違うなと思ってやめました。
データさえあればフットワーク軽く試せるのもNoCodeのよいところかと。
ここからは「Adalo」を使った実際の制作方法のお話になりますが、本日はこちらを作っていこうと思います（お料理番組っぽく）。
データを作る
作り上げていく順番は人それぞれかなーと思うのですが、わたしはだいたい最初に表示するデータを整理しながらスプレッドシートに入れていきます。
途中まででも良いので、ある程度のボリュームのデータがあるとプレビューしながら組み上げていけて作業が早い気がします。
ディレクターをやってるとワイヤーフレームを作ることが多いので、表示するデータ整理して、それを見ながらこんな画面にしよっかなと想像する工程に慣れているというのも大きいかもです。
前述のPDFを見ながら入力したのがこんな感じのスプレッドシートです
表示方法を考えつつデータを入れていくのもポイントです。
・表示・非表示をする項目は、TRUE・FALSEで判定できるようにしています。
・ABV.は小数点以下が0の時にAdalo側でなかったことにされたので、数字形式からテキスト形式に変更しました。
・並び順は名前や金額でソートもできますが、好きなように並べたいときのために、カテゴリ毎に1、2、3、、、と順番を振れるようにしました。
ぶっちゃけ、このデータを作る時間が全行程の4割ぐらいしめているので、はなうたでも歌いながらがんばろう。
Adaloさん出番です
ここで「Adalo」さんにご登場願います。
あらかじめ無料プランでサインアップした「Adalo」にログインしてCREATE NEW APPします。
スマホかデスクトップかは後で変更できなさそうなので、ここで決めます。
Brandingと呼ばれるカラーリングは後でも変更できるので適当でもok。
今回はテンプレートを使わず、自由演技でいきます。
初めて使うのにチャレンジングなスタイル。
Blankを選んでもSign upとLogin、Homeの3ページが出てきましたが、会員機能は不要なので、ここもひるまずDeleteします。
はい、真っ白のHome画面ができました。
画面を設定していく
画面レイアウトが先か、データのアップロードが先か。
どちらからでも問題ないと思いますが、ここはメニュー順に従って画面レイアウトから先に作っていきます。
今回はHomeにビールのカテゴリを並べ、その下層にビールの詳細が一覧で並ぶようなページ構成を考えています。
Adaloでは
ページ＝Screen
ページを構成する要素＝Component
という名称になってます。
今回は真っ白なページから自由にレイアウトしていきたいので、[ADD COMPONENT]から好きなComponentを選んで、構成を作る感覚でガンガン積んでいきたいと思います。
（ページのテンプレートは[ADD SCREEN]から追加もできるので、わたしのように勢いよく消してしまっても復活できます。）
試しにさりげなくヘッダの色を変えてみた。
コンテンツエリアはビールの種類の説明と詳細ページへのリンクが主な機能なので、まずはそこを入れていきます。
Componentもいろいろ揃っていて、テキストのサイズや色、画像の大きさ、位置なども好きにできるし、あとで直せるのでラフな感じで積んじゃいましょう。
ここで問題発生。日本語がうまく入らない・・・。
キーボードから入力すると、母音と子音が別々に出てきちゃうよーー。
ただ、コピペはうまくできることがわかったので、日本語は全部コピペで対応することにしました。
データを先に作っておいてよかった。わたしグッジョブ。
はい。こんな感じになりました。
Adaloの便利だなーと思う機能に、Listという機能があります。
Componentを組み合わせて、パーツテンプレートが作れるんですよ。
ビールのカテゴリ名、画像、説明テキストをひとつのフォーマットとして7カテゴリ分積みたいので、3つのComponentをひとつのListにまとめます。
えい！自動で繰り返しになりました。おおーコピペ不要。
XDをお使いの方はリピートグリッドと同じ感じなんですが、XDは表示範囲を自分で指定しますが、Adaloはここにデータの個数だけ自動で表示するよーというエリアを作ってくれる感じです（リストだからね）。
ダッシュボードでプレビューされないので、この辺の見え方は慣れが必要かもしれません。
データを表示してみる
Adaloはダッシュボード上ではデータが展開されず、PREVIEWすることで実際の表示が確認できる仕様です。
早くどんな見た目になってるか見てみたいですよね。
というわけで、ここで作っておいたデータを流し込みます。ばーん。
AdaloのデータベースはCollectionという名称になってます。
ここにデータ項目＝Propertyを予め設定しておきます。
CSVでいうところのタイトル行の名称と、どんなデータなのかをポチポチ積んでいきます。
Homeに表示するビールのカテゴリ別メニューのCollectionはこんな感じ。
CollectionはHome表示用の「category」と、詳細ページ用の「beer」のふたつを用意。
「beer」の方は一番最初に作っておいたCSVデータをインポートしやす。
インポートしたいCollectionから[View / Edit Records]を選んで、[Import CSV]すると、CSVのどのデータをどのPropertyに入れるんだい？と聞いてくれます。親切だね。
CSVインポートしてみて気づいたところは以下の感じです。
うまいやり方がもしかしたらあるのかもしれませんが、もう少し改善されるとさらに使い勝手アップしてうれしいです。
困った点
・CSVでインポートしたら、チェックボックスが全部TRUEになってしまい、チェックボックスの意味・・・ってなった。
（いまだ直し方はわかりません。有識者の方からアドバイスお待ちしております。）
・CSVは上の行から流し込まれるので、Adaloで見ると逆に表示されてしまう。並び替えがあるといいんだが。
・画像はURLで設定できなかった。あとからひとつづつ画像を挿入しました。50レコード以下で良かった。
良い点
・1から入力するときは、入力フォームが出てくるので入れやすい
Collectionを作るとこんな感じの入力フォームが自動で作られます。ひとつひとつ入力するのは便利ですね。
これならお店のスタッフでも更新できそうです。
Databaseの設定が終わったら、さっき作ったListに表示方法を設定します。
どのエリアにどのデータを表示するか、ListとCollectionの項目を紐付け、さらにCategoryのCollectionをID順に表示してね、と設定すると・・・
できたー！
詳細画面の方も同様にレイアウトを設計して、繰り返し表示される部分はList化。
Collectionの項目と紐付け、表示順設定とやっていきます。
こんな感じで第2階層まで設定して、他にもなんやかんや入れたり整えたりしたダッシュボードがこちら。
最後にHomeのビールのカテゴリ部分から、詳細部分へのリンクを設定します。
Click Actionsの設定で、詳細ページにリンクして、同じカテゴリ名のレコードだけ表示してね、という設定をしたら完成です。
例えば急に「ビールのカテゴリでわけるんじゃなくて、国別にしたいんだよねー」なんていう変更があっても、Homeの構造を国別に変えて、ここの設定をカテゴリ→国に変更すればざーっと切り替わります。べんりー。
Adaloのダッシュボード的には2つのページだけで、全8ページのPWAが完成しました。
わーい！たーのしー！
できあがりがこちらです
まとめ
今回はめちゃくちゃかんたんなデータ構造のページを作成してみましたが、テンプレートにある通り、チャットやTO-DO、会員機能を持ったものなど高度なページも構築できます（ただし有料プラン）。
NoCodeツール、侮りがたし。
ここまで読んでうっすらと感じていただけたかと思うんですが、「NoCode」という開発手法は、コードを書かないからWebの知識のない人でもかんたんにできるよ！という意味とはちょっと違っていて、どういうUX/UIにするか、それを表現するためにどのように情報を整理するか、というWeb制作の根本を残し、コードはツールにおまかせすることでローンチまでの時間を短縮する手法です。
そういった意味で、どちらかというとわたしのようなディレクターやプロデューサーが考えながらNoCodeで組み上げていき、見た目のわかりやすさやステキさを整える部分をデザイナーに、複雑な動きの部分をエンジニアにと振り分けることで、開発時間を短縮した上で、精度の高いものが作れそうです！
時間をかけて考え抜きフルスクラッチで制作したサイトと、スピード重視でNoCodeで作ったサイト、どちらも存在することでグッとWebコンテンツの世界の幅が広がり、より便利に、そして自由になっていきますね。いやあ、楽しいなー！
※作ったアプリは2020年11月の時点のメニューで作っていますので、最新のメニューはtwitterからごらんいただいて、ぜひお店に遊びにきてください！
https://twitter.com/GoodbeerSTAND
この記事が気に入ったらサポートをしてみませんか？