Yappli Tech Blog

株式会社ヤプリの開発メンバーによるブログです。最新の技術情報からチーム・働き方に関するテーマまで、日々の熱い想いを持って発信していきます。

ノーコードツールAdaloの衝撃

この記事はヤプリ #1 Advent Calendar 2022の21日目の投稿になります。

こんにちは。開発企画部の北村です。 ヤプリでは、「Yappli」というアプリ制作・運用プラットフォームの開発に関わるプロダクトマネージャーのような仕事をしています。普段は他社プロダクトの調査や情報整理、インタビューによる課題の吸い上げ、仕様・社内オペレーションの検討などプロダクトに関わる業務を行わせてもらっています。おかげさまで、今年はECやセキュリティ関連機能など、複数の機能開発を担当することができ、続々とデリバリーされています。

実はその傍ら、もう一つの責務を担っておりまして、それが「ノーコード総研所長」というものになります。そもそもノーコード総研とは、企業内のノーコードツールの活用状況や、国内外の事例調査を通じて、ノーコードの可能性をみなさんにお伝えする活動です。その活動を支える役割を今年の春に拝命しまして、これまで取材、大型展示会での登壇、記事の執筆など各種発信をさせて頂きました。入社以来、日々の業務の傍らコツコツとノーコードツールを調査してきた結果、広報チームから目をつけてもらった形です。今回のカレンダー記事では、そもそもノーコードツールを真っ当に調査しようと思ったきっかけとなるAdaloというツールをご紹介しようと思います。

ノーコードツールとの出会い

同僚からの紹介

私はヤプリに2019年10月に入社し、2022年は4年目の年となります。それまでWebやアプリからは少し遠い仕事をしていたため、必要な知識を身に付けなければいけないと思い、入社直後にいくつか勉強を始めました。その一つにノーコードツールの調査がありました。現在は同じチームに所属している同僚が、海外ではアプリに特化したノーコードツールが以前から存在している、と教えてくれたのがきっかけとなります。

調査発表会の実施

WixなどWebページ制作のツールは知名度が高いため把握していたものの、アプリ特化のツールはよくわかっておらず、次の日に1日調査を行いました。すると、ソフトウェアの比較サイトではノーコードや業務改革というカテゴリが存在しており、多数のツールをそこで知ることになります。また、個人のブログで発信する人が増え出したのも丁度そのころだったため多くの情報を仕入れることができました。ちなみに、その際特に調査したツールはShoutem, Good barberといったもので、Yappliにはない魅力的な機能やUI/UXを備えており、貴重な参考情報となりました。調査は3, 4ヶ月継続して社内で調査発表会を行いました。社内ではこれまでに、国内で営業上競合する企業の調査は行われていたものの、ノーコードに特化したグローバルでの調査は行われていなかったため、私の発表はそれなりの評価を得ることができました。概ね調査結果に満足した私は、その後ツールの調査をストップし、一旦通常業務に専念する時期が数ヶ月続きます。

ノーコードツールAdaloの衝撃

ノーコードサロンとの出会い

一定期間調査はストップしていたものの、何か情報を収集するきっかけがないかと思い、複数の「ノーコーダー」をTwitterでフォローしていました。その方達を追っていて知ることになったのが、NoCodeCampというノーコードに特化したオンラインサロンでした。NoCodeCampは、普段ITからは離れたお仕事をされている方や起業家、エンジニア系Youtuberなど様々なバックグラウンドをお持ちの方が参加されているノーコード特化のコミュニティです。そこでは、日々世界中のノーコードの最新情報が集約、共有され、皆さんが切磋琢磨しながらノーコードを学んでおられます。中には世界的なノーコードツールの提供企業からエキスパート認定を受けている方や、ノーコードの世界大会で上位に入った方もいらっしゃるため、間違いなく国内で最も熱いサロンです。このサロンでは、定期的にサロン内外の講師が勉強会を開いてくださっており、そこで衝撃を受けたのがAdaloでした。

Adaloとの出会い

上述したように、それなりの期間調査を行い調べ上げたつもりだったものの、Adaloのことを開発色のかなり強いツールだと勘違いし、意図的に調査対象から外していました。そのため、初めて勉強会でAdaloの簡易さ、驚くべき機能性を知った時は大きな衝撃を受けました。後述しますが、Adaloはノーコードツールではあるものの、デザインツールや開発ツールとしての側面を兼ね備えており、高機能なモバイルアプリを開発することができます。データベースやAPI接続機能、ロジックを組むこともできることから、ノーコード=制限が多いというステレオタイプは当てはまりません。 次の章からは、このAdaloというツールがいかに強力かをご紹介したいと思います。

Adalo基本編

ここからは、2021年にtimes_yappli_radioで収録したノーコード座談会の動画を元に、ご紹介をしていきます (「#times_yappli_radio」とは株式会社ヤプリの開発チームで提供しているYouTubeチャンネルです。)。2本分の収録となっており少し長いため、サマリも載せておきたいと思います。

www.youtube.com

ツールの基本情報

まずは一本目をご覧ください。 Adaloは2018年に創業して間もない会社が提供しているツールで、本社はアメリカのミズーリ州です。まだまだ国内では知名度が低いものの、グローバルでコミュニティが育っており、国内においても界隈では最も人気のあるツールの一つとなっています。

特にBtoC向けのモバイルアプリが得意で、一つのツールからAndroid, iOS両方のアプリを開発することができます。動画内ではBtoCのマーケティング支援ツールとして分類しているものの、基本的にはどのようなカテゴリのツールでも作れてしまうのがAdaloの柔軟性の高さといえます。ただし、ECなどバックエンドの作り込みがユーザーの体験や機能に大きく影響するカテゴリについては、他のツールが向いていると言って良さそうです。 プロダクトとしては、登録後にすぐ使える無料枠、契約してから使える有料枠に分けられています。無料枠でも、アプリを作るために必要となるほとんどの機能を利用することができるため、登録直後から一通りのアプリの開発が可能です。プレビュー用にURLを発行したり、仲間に共有する機能まで備わっています。モバイルアプリの場合、ビルドしてストアに申請する作業が必須となるのですが、その前段として実施するビルド機能までも管理画面から辿ることが可能です。ただし、ストア公開を見越した機能となるため、ビルドするタイミングで契約が必須となります。他にもAPI連携機能など、より高度な機能を作る場合には有償化が必要です。

アプリの制作手順

制作手順は次の4つのステップとなります。

①UI/UX設定

②データベース設定

③UI/UXとデータベースの接続

④動作確認

上記ステップを細かく説明していきましょう。

まずはデザインツールのような管理画面で、スクリーンや、スクリーンに載せる部品を選択肢し、UI/UXを作成していきます。部品を組合わせていくだけで制作が可能です。

続いてデータベースの設定に入ります。ここでは、データベース内のテーブルを自身で定義することが可能です。テーブル名、カラム名、他テーブルのカラムの参照設定などを行うのですが、ここではある程度テーブル設計を行った経験が必要となります。ただ、EXCELシートのような直感的なインターフェースのため、ソフトウェアエンジニアでなくとも十分対応可能な範囲と言えます。

続いて、UI/UXとデータを関連づけます。ステップ①で行ったUI/UX設定では、データを関連づける前提の部品があるため、そこに対してどのテーブルのどのカラムかを指定してあげます。さらに、複数のデータを表示する部品に対しては、例えば並び順を指定することも可能です。

最後に自身のスマートフォンでプレビューし、デザインや機能の確認を手元で行い、微調整していきます。全て作り終えた後のテストにもプレビュー機能は使えるかと思います。なお、Adaloではすぐに別アプリを立ち上げることが可能なため、使い方にしっかり慣れるまでは何度も作り直すのが良いかもしれません。

Adalo応用編

ここからは、Adaloのもう少し細かな設定方法や、API接続、エキスパート制度など、応用に入っていきます。

www.youtube.com

UI/UXとデータベースの接続

こちらの動画ではまず、基本編でお伝えした「③UI/UXとデータベースの接続」についての詳細・応用をご紹介しています。

私の動画の中ではInstagramのクローンを作っており、まず、投稿画像を表示する画面において説明を行っています。ここでは投稿画像を表示・いいねを行う部品を設定しており、データとの紐付けを行います。今回は、Postsという投稿内容を保存するテーブルを作成したため、そのテーブルとの接続設定を行いました。Filter機能によって「All posts=全ての投稿」を指定していることから、デフォルトでは全ての画像が表示されます。ただ、アプリ上の検索窓に入力した文字列(inputという変数に対応)によって検索をかけると、説明文にその文字列を含む投稿内容に対応する画像のみが表示されます。また、降順・昇順など並び方も好みに合わせることが可能です。

ここでは画像表示の部品を紹介しましたが、他にも様々な部品が揃っており、部品ごとに設定項目が異なるため、機能を作り込むことが出来ます。

API接続

もう一点お伝えしておきたいのは、有料プランでのみ利用可能なAPIの接続機能です。通常API接続には、Requestするための設定が必要となり、それらの設定はある程度の慣れが必要となります。そのため、Webやモバイルアプリ開発に携わった経験のある方の方が取り組みやすいかもしれません。基本的には、ボタンをタップするなど何らかのアクションにひもづいており、アクションが発火するとAPIが叩かれる仕組みになっています。設定としては、次のようなものがあります。

  • HTTP method
  • ベースのURL設定
  • header
  • クエリパラメーター
  • body

一般的なAPIの疎通と何ら変わらない設定ではあるものの、これをノーコードで実現しているのは開発者としてかなり助かると思います。なお、他のノーコードツールでもこのようにAPI接続を設定する機能は備わっていることが多く、業界ではスタンダードと言っても過言ではありません。SIerが担当するような規模の大きなサービスを作るノー/ローコードツールも例外ではありません。このような仕組みが普及した背景としては、複数のツールを組み合わせることでサービスを成立させることがソフトウェア開発では一般的であること、また、昨今のSaaSの勃興によりAPIでSaaSどうしを接続することが頻繁に行われるようになったことが挙げられるかと思います。

Adaloでは、APIから返却された値をテーブルに保存、または表示するなどの設定ももちろん可能となっています。 このように、Adaloは若干難しい設定を含むものの、この設定を乗り越えることで、高機能なモバイルアプリを開発できるのが最大の特徴と言えます。

開発支援

とはいうものの、初めてAdaloを使ってモバイルアプリを作るのはハードルがかなり高いと思います。

例えば、アプリのデザイン、テーブルの設計、どの部品を使うべきなのか、等々悩みは尽きません。こういったユーザーの悩みを手助けするために、彼らはエキスパート制度を設けています。全て開発を委託する、デザインについて助言をもらうなど、活用の仕方は様々のようです(詳しくはこちら)。

また、私が参加しているサロンで有識者へ質問することもできますし、意外と国内でも学習の土壌が整ってきています。特にモバイルアプリ開発に関わったことのない方は、ストアへの申請が大きなハードルになるかもしれません。申請後、特にiOSの場合は却下されることも多く、その理由は英語の文面に綴られてメールで送られてくるだけです。そのため、多方面でのサポートは欠かせません。

まとめ

今回はAdaloについてご紹介をしました。実は最近スタートアップのMVPとして使われることも増え始め、事例としてはこちらのモバイルオーダーアプリが界隈では有名です。このアプリの驚くべきところは、ユーザー側、レストラン側、管理側の3つのアプリを1ヶ月半という超短期間で作ったという点です。そのくらいAdaloは効率的に幅広いアプリを作ることができる優れものです。最近では、データの読み書きに対するパフォーマンス改善なども行っており、MVPツールとしてのある種レッテルを打ち破るべく開発を推進しているようです。

みなさんも、Adaloでアイデアを形にしてはいかがでしょうか! では、次回はノーコード総研でお会いしましょう!