数あるノーコード開発ツールの中でも、比較的学習時間が少なくリリースまでスピーディーに行えると言われているものが Adalo です。
筆者はエンジニアとして働いていた経験はあるものの、かなりのブランクがあるので現在は「非エンジニア」といえるスキル感です。そんな筆者が店舗アプリを作成してみたのですが、「非エンジニアが戸惑うかもしれないポイント」と「開発に慣れていてもハマるかもしれないポイント」がありました。
そこで本記事では、Adalo で作ってみて良かったこと・メリットになりそうなことと、上記の二種類の問題についてまとめました。Adalo を独学で学ぼうとしている方や、スモールスタートで自社アプリ開発を考えている企業にとって役立つ記事になれば幸いです。
なお、こちらはかなり初歩的な内容なので、これから Adalo などのノーコードツールを試してみたいという事業部門の方や非エンジニアの方向けの記事となっています。
1. Adalo とは
Adalo は、アメリカの Apto Labs 社が 2018 年に提供開始しました。ノーコード開発ツールであり、プログラムを書くことなく GUI 操作 (ドラッグアンドドロップなど) により、パワーポイントを作るかのような感覚で実装することが可能です。
無料で試すこともできますが、アプリストアへの公開およびプッシュ通知や Google Map 連携など重要な機能は有料プラン限定なので、実際に店舗などで運用する場合は課金（月 65 USD～）が必須といえます。
Adalo を選定するメリット
iOS/Android の両方に対応しており、スマホアプリ・ネイティブアプリ・PWA の開発も可能です。
良かった点としては、
- コーディングのための環境構築がほとんど必要ない
プログラミング言語を用いて開発を進める場合、まずは開発環境を構築する必要があります。 Adalo の場合は、独自の環境開発を構築する必要がなく、非エンジニアでも容易に開発に取り組むことができます。
- 実装した結果をすぐに確認できる
「VIEW APP」ボタンを押すと、実装したレイアウトや機能をすぐに確認できます。逐一コンパイルやビルドをしなくても UI 部分は編集内容が確認できるので、開発期間を短縮できます。
- デザイン性の高いテンプレートを利用できる
新しい画面を作成する際にテンプレートを利用できるため、テンプレートに則ったデザインで簡単に開発を進めることができます。画面遷移やボタンのアクション、表示非表示の条件方法もある程度覚えてしまえば開発の幅も広がるでしょう。
低コストかつ短期間でアプリを構築できるため、総じて MVP 開発（最小限の機能だけでアプリを開発すること）には適しています。
ただ、実際は「非エンジニアでもアプリを作れるツール」というよりは、「非アプリのエンジニアが、Java/Kotlin/Swift/Object-C を習得しなくてもネイティブアプリを作れるツール」という面のほうが強いといえます。
2. 今回作ったもの
PICs 合同会社の Youtube 動画を参考に店舗アプリを制作いたしました。機能としては以下のとおりです。
- 新着情報掲載画面(新しい商品紹介)
- クーポン画面
- 店舗情報一覧画面(店舗写真・店舗名・所在地・電話番号・営業時間・定休日を表示)
- 料理のメニュー画面(肉料理と魚料理、ドリンクメニューを分けて表示)
- デジタルスタンプ獲得機能(指定のパスワードに合致した場合、ポイント付与)
エンジニアではない筆者でも確かに簡単にモバイルアプリを作れたのですが、ハマったポイントも多々ありました。
3. ノーコード開発ツールを初めて触った人がハマりそうなポイント
まず、初めて Adalo のようなノーコード開発ツールを触った非エンジニアの方がつまづくと予想されるポイントを挙げていきます。
true/false や if の概念は知ってないといけない
非エンジニアでも開発可能と言われておりますが、やはり他のノーコードツールと同様、true or false や if 文の考え方は必須でした。
Excel / Google Spread Sheet などで関数を触ったことがない人がいきなり Adalo で条件文などを利用するのはハードルが高いのではと感じました。
（例）クーポン画面のフラグ処理
- 初期値は false (DB で設定する)
- 「使用する」ボタンを押した際に used フラグが true となる＝ 該当のクーポンを使用済ステータスにする
- 未使用のクーポン (used フラグ = false) が 0 個の時、「使用できるクーポンはありません」と表示する
- 0 以外の場合はクーポンを表示する
より高度な実装をしたい場合は、外部 API との連携が必要となる
今回はスタンプを取得できた場合、スタンプの数をカウントする処理を実装しました。
もしスタンプが 10 個獲得できたらクーポンを付与してスタンプを 0 に戻すという繰り返し利用の処理をしたい場合、 Adalo では DB を更新するための「Custom Action」が必要となります。
Custom Action は有料プランのみの機能で、外部 API を呼び出したり、GUI ではできない処理ができるようになるものです。つまり、GUI で完結しない機能・要件を非エンジニアが実装したい場合はかなりハードルが高くなります。
余談ですが、アプリ界隈では Flutter 開発において、「やりたいことが実現できない場合はネイティブのコードを書く必要がある」という点が最大のデメリットの一つとなっています。「最速で MVP を構築できる」という点では Adalo・Flutter ともに優れていますが、フレームワーク内で完結できるかという点が技術選定のポイントになりそうです。
関連記事
Flutterとは？メリット・できないこと・事例と、自社アプリ開発で検討する際の考慮点
編集画面とプレビュー・実機で表示が異なる → レイアウト崩れ
新着情報・クーポン・メニューページでテンプレートのリストを使用しています。リストのサイズは数値で調整できますが、リストの配置やサイズはマウス操作で決めています。
スマホアプリは実機検証が大変なので（特に Android 端末）仕方ないとはいえ、すんなりとレイアウト作成が終わるわけではないと感じました。
また、一度綺麗に配置できたレイアウトを再度変更すると崩れる可能性があるので、開発に慣れていない方や私のようにブランクがある方であれば、できるだけ動かしたくないと感じるかもしれません。
マニュアルやレクチャー動画と現在の UI が異なっている
SaaS 全般でよくある問題ですが、解説動画やレクチャー動画を参考にしていざエディタをインストールして実装しようとした際、UI がアップデートされていてボタンやツールの配置が変わっている、ということが Adalo でもありました。
Adalo の場合は英語がベースのツールであり、コミュニティも英語がメインのため、問題解決や情報収集することが容易ではありません。手早く解決したい場合は有料のノーコード開発コミュニティに属することをお勧めします。
4. Adalo で店舗アプリを作っていて個人的に一番ハマったところ
どの開発ツールを利用する際にも言えることですが、仕様を把握するまでに苦労する箇所があります。
今回はスタンプカード機能で、Text Field にパスワードの '1234' を入力して合致した場合のみスタンプが付与される処理を組み込みました。OK ボタン押下時、「input」の入力値を参照するのですが、Other Componentsの input が 2つ表示されていました。※下図の左の状態
さらに、上の input (水色の枠)を指定した場合、例え入力したパスワードが '1234' であっても Stamp Error の処理が走り、「パスワードが間違っています」の画面に遷移してしまう事象が発生しました。
原因
Other Componentsの input が 2個表示されてしまうのは、Text Field をコピーしたことで 2 個とも Text Field の名前が input になっていたことが原因でした。
- 既存のテンプレートをベースにしているため、ゼロから実装していない
- 操作ミスによって、綺麗に Text Field が二つ重なっていた
- Text Field に同じ名前が付いていてもエラーが表示されない
ため、バグの原因を把握するのに時間がかかりました。
Java / JavaScript を書いた経験がある筆者からすると、「この引数はどこからもってきているのか分からない」「型も変数名も同じならエラーを出して教えてほしい」といった感覚になりました。
WordPress などの Web 制作ツールでも「他人が作ったテンプレの中身を解読するのが面倒（なのでゼロから作るほうがむしろ速い）」というのはよくある話ですが、「既存のテンプレートを解読しながら拡張する」パターンと「ゼロから自分で作っていく」パターンで最終的な工数とクオリティがどうなるかは気になるところです。
[補足] 全体的に GUI にはクセがある
全体的にクセがあるため、ある程度の工数をかけて Adalo での開発自体に慣れる必要がありそうです。社内メンバーに話したところ「Tumblr カスタマイズして Web 作ってた時代を思い出すね」と言われました。
地味に面倒な点としては、「予測変換機能がない」「日本語が打てない」といったものもあります。
Text Field や DB のプロパティ名を指定する際は、予測変換がないため手入力しなければなりません。たとえば VSCode では div + Tabキーと入力すると "< div >< /div >" が 表示されますが、Adalo には 自動補完されるような機能がないため、手打ち入力による打ち間違えのリスクを感じました。
さらに、テキストコンポーネントに日本語で「コンポーネント」と手入力した場合、「ｋおおｎｎｎｎ」などと表示されてしまい正しく入力できません。一度 VSCode などに日本語文字を入力後、コピーしてテキストコンポーネントに張り付ける必要があります。
5. [まとめ] Adalo で自社アプリを作るメリット・デメリットをおさらい
Java・JavaScript しか経験がなく、さらにブランクが長い筆者でも最低限の機能のアプリは作れたことを考えると、「とっつきやすさ」は最大のメリットだと思います。
デメリット・懸念点としては、
- 非エンジニアが Adalo で作りこんでいって、工数に見合う品質のアプリが出来上がるかはわからない
- Adalo の GUI できないことはエンジニアの協力が必要
- そもそも Adalo のカスタムアクションでも実現できない場合は諦めるしかない
- アプリ自体を作り直す場合、ネイティブにしても Flutter/React Native にしてもゼロからの開発になる（資産として持ち越せない）
- 社内で Adalo のエキスパートが生まれても、退職する際に引き継ぎが難しい
といったところが考えられます。引き継ぎ面以外はノーコードパッケージ全般に共通する内容です。
当社では、自社のテンプレートをクライアントごとにカスタムして独自のアプリを作っていく、ローコードアプリ開発プラットフォーム「Pasta」を展開しています。「やりたいことがあっても実現できない」というノーコードの弱点を解消しつつ、プッシュ配信やページの更新をプログラミングなどのスキル不要で誰でも行えるという長所は踏襲しています。
「格安」とまではいきませんが、フルスクラッチ開発や内製に比べて初期費用をかなり抑えることが可能ですので、まずはスモールスタートで自社アプリに挑戦してみたいという企業様はぜひ一度お気軽にご相談ください。
- 「自社アプリを考えているが、初期投資を抑えてまずは試してみたい」
- 「LINE からの PUSH 配信で顧客と継続的に接点は作れているが、費用対効果が見合わなくなってきた」
- 「安すぎるシステムだと動作速度や拡張性などが不安」
といったお悩みを抱えている企業様に向けて、ノーコードでアプリを開発するサービス「PASTA」を展開しています。