Q.「ログイン機能何分で作れる？」A.「15秒」 - ノーコード「Adalo」を試した

# Prologue
世の中に当たり前のように広まってきたノーコード。
コードを書かずにアプリを作れる素敵な魔法。
一方、エンジニア界隈では使いものにならないという風潮を強く感じる。

触ってみないと分からないじゃないか！
そう思っていたところ、社内向けアプリ開発の依頼が舞い込んだ。
諸条件もノーコード向き。これは試すしかない。
ノーコードの可能性を信じて...

**諸条件**
・短納期
・低コスト
・まずはスモールスタートで様子見

# 目次
- [ノーコード「Adalo」について](#ノーコードadaloについて)
  - [Adaloの特徴](#adaloの特徴)
  - [便利だと感じた点](#便利だと感じた点)
  - [ツールとしての制約や課題に感じた点](#ツールとしての制約や課題に感じた点) 
 - [有効に活用できそうなシーン](#有効に活用できそうなシーン)
 - [結論](#結論)

※今回は外部連携等は行わず、Adalo単体での利用を前提として触ってみた見解をまとめる。

# ノーコード「Adalo」について

## Adaloの特徴
Adaloは、特にモバイルアプリに強みのあるノーコード開発のプラットフォーム。
ブラウザ上でドラッグ＆ドロップによる直感的なUI構築が可能。
そして、サーバーや内部データベースも備わっているため、別途インフラ環境を用意せずともスマホアプリやWebアプリを開発できる。
また、外部APIとの連携機能もあるため、データベースを他サービスや自前で用意することも可能となっている。

ノーコードゆえの制約はあるものの、React Nativeベースでコンポーネントを自作・アップロードすることで、ある程度の拡張性も持たせられる。

今回Adaloを選択した理由としても、
インフラさんに環境の用意を依頼したり、クリエイティブさんにデザインを依頼したりせずとも、そこそこのアプリを短期間で構築できると見込んだため。
（+ 最悪、カスタムコンポーネントを作ればなんとかできるだろうの精神）

## **便利だと感じた点**
**1. 豊富なテンプレートを利用した開発**
とにかく驚いたことはタイトルにある通り、ログイン機能。
Adaloでは、下記イメージのようにテンプレートを選択してアプリ開発をスタートすることができる。

　①プラットフォームを選択
   　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076627/a92053e0-5555-4415-b4b3-eadfbf851a75.png" width="680">

　②テンプレートを選択
   　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076627/4d39f723-1add-4831-84e4-6344c8579043.png" width="680">
    
　③アプリ名やカラーテーマを設定
    　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076627/1a32b404-f5ad-4885-9fb3-39e372f162bb.png" width="680">
　↓↓↓
　④ログインどころか、機能が一式揃った状態でスタート！
     　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076627/4a9f47e5-b70e-48bc-8e29-d9afccddcd49.png" width="680">
　
**※以降2～3の項目は一部、Adalo有料プランの利用が前提となる**
　

**2. カスタムコンポーネント開発での拡張性**
基本的には用意されたコンポーネントと呼ばれる要素を画面上で配置して開発を進めるが、欲しいコンポーネントが無いこともある。
そんな時に救いとなるのが、自作できるカスタムコンポ―ネント。
試しにいくつかのコンポーネントを作ってみた。
・生体認証ログイン
・日付のフォーマット表示（〇月〇日）
・日付の範囲指定入力 等々

長くなるので詳細は割愛するが、ざっくりと以下の手順でコンポーネント開発が可能。

前提条件
・Node.js（v10.2以上）がインストールされていること
・npmまたはyarnが使用可能であること
・Adalo有料プランのアカウントを保有していること

 - Adalo CLIのインストール
```
npm install -g @adalo/cli
```

 - コンポーネントの初期化
```
npx create-adalo-component my-component
cd my-component
```

 - Adaloアカウントへのログイン
※Adaloのアカウント情報（メールアドレス、パスワード）を入力
```
npx adalo login
```

 - コンポーネントの編集
 
 最低限、下記の3ファイルを編集する。

| ファイル名 | 内容 |
|--------------------------------------------|------|
| `manifest.json` | コンポーネントのサイズやpropsの定義など、Adaloエディタでの動作に関わる設定を記述 |
| `src/components/○○/index.js` | コンポーネントの処理やUIを記述 |
| `adalo.json` | ライブラリ全体のメタ情報（作者・説明・公開設定等）を記述 |

 - ビルド＆アップロード
 ```
 npx adalo publish
 ```
アップロード時、公開範囲を選択可能
・Public: マーケットプレイスで誰でも使えるようにする
・Private: 特定チームのみに配布（チーム設定が必要）

　
アップロード後、適用するとAdaloのエディタに表示されて利用可能となる。
下記イメージの「Private Components」欄に表示。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076627/30916baa-af4b-4da3-bfdf-caa27aafc781.png)

　
**3. アプリのビルドが簡単にできる**
Adaloでは、「Publish」という機能でアプリをweb公開、Android、iOS用にビルドを行う事ができる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076627/efccc46a-1a9a-4cae-9348-d0247c774aa2.png)

開発中はPreview機能で画面を確認しながら進めることができる。
      <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076627/63885068-5768-482e-93a9-a0091a258ddf.png" width="380">

Androidアプリのビルドも試しにやってみたが、驚くほど簡単。

「Publish」でAndroid Appを選択
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076627/6663686d-4a0d-4feb-bad2-30177f050318.png" width="480">

認証情報等を設定
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076627/3e9a8a57-9e8b-40c2-82d3-99b5244f7219.png" width="480">

表示名やアイコンを設定
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076627/3b2d342d-6f79-41bd-add6-1a5bf3e9297c.png" width="480">

バージョン番号を指定してビルド実行
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076627/c73e7048-d9c5-4ade-bf97-dbd32768c469.png" width="480">

ビルド成功すると、apkファイルをダウンロードできるようになった すごい
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076627/6a04d013-03d1-4c7a-8557-3e11651083b5.png" width="480">


## ツールとしての制約や課題に感じた点
**・少しでも複雑なビジネスロジックが必要となると詰む。**
　特にコレクション（RDBでいうところのテーブル）の扱いは不便な点が多く、癖も強い。
　複数のコレクションを跨いだ絞り込みや、JOIN的な操作は極めて限定的になる。
　一般的なDB設計の感覚で挑むとUI構築時に取得できないといった課題に直面し、
　都度テーブル定義を見直す羽目になりそう。（なった）
　
**・性能面で課題を感じた場合、改善の見込みが薄い。**
　Adalo側で環境や処理も用意されている分、工夫で改善できる幅はかなり限られる。
　※外部連携等も視野に入れた場合は大きな課題とならないのかもしれない。
　
**・分岐処理がとても書きづらい**
　下記イメージのように「Visibility」を設定すれば特定条件時のみの表示が可能となるが、
 　状態のパターン数分コンポーネントを重ねて配置＆設定する必要がある。
  　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076627/0b02e429-3eaf-4b1f-a067-825fe57cda6f.png" width="650">
　
　一覧表示内でフラグによって内容を変えたり色を分けたいといったシーンでは、
　コンポーネントが重なりすぎて人間の目では管理できない状態となり得る。
    　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4076627/d6d2b5a7-849d-490a-b726-d5b6a0f4d0fa.png" width="650">
　（4パターンでもこの状態）
　
**・日本語を直接入力できない**
　Adaloエディタでテキストの入力欄などに日本語入力すると文字がおかしくなるので、
　一度メモ帳などに書いてからコピペする必要がある。地味に大変。
　
**・予期せぬ不具合が起きる**
　ホスティングやビルド含めAdalo側で色々とやってもらえる反面、予期せぬ不具合が発生することもしばしば。
　数日触れた範囲でも、下記のような不具合に遭遇した。
　・公開したWebアプリにアクセスした際にエラーで画面表示できない。
 　　（数分後再度アクセスすると直ってる）
　・アプリをBuildすると一生「Queued」になったまま。もしくは「Failed」になる。 等
 　いずれも時間経過で解決はしたが、こちらで打てる手がAdaloへの問合せくらいしかない。

# 有効に活用できそうなシーン
・デザインや画面遷移のイメージを確かめられるものが欲しい
　→**インタラクティブなプロトタイプ**の開発はスピード感も質も向いているかもしれない。
 
・業務ロジックは不要でシンプルなアプリを低コストで開発したい

※バチバチのReactマスターがアプリ開発するといったケースでは、全く景色が異なるかもしれない。

# 結論
使ってみた結論としては、社内外問わず**業務で使う本格的なアプリを構築するには力不足。**
便利に感じる部分が多くありつつも、あと一歩足りない..で埋め尽くされている。

「こういうサービスもあるんだな～」と息抜きに触るには持ってこいだが、
エンジニアがアプリを構築する場合は選択肢に入れなくて良いと感じた。
~~コードを書いた方が早かったんじゃないかと何度考えたことか~~

とはいえ、あくまで"現時点では"という認識でおり、今後の発展も楽しみにしたい。
　
他のサービスも調べたところ、構築後にコードをexportできるノーコードもあるそうな。
新たな可能性を感じて、また確かめようとしてしまっている自分がいる。