2
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

ノーコードでTODOアプリを作ってみた

はじめに

IT業界にいる方なら、ニュースやQiita、書籍、または企業のIT部門が発信しているブログなどから、技術やトレンドをインプットしていると思います。

こうしたインプットの中から、少しでもアウトプットをしていかなければと思い、その月の気になった記事やニュース、技術などをピックアップして、なにか書いてみようと思いました。

9月編はこちら

今月の気になること

今月の気になることは、「ノーコード」です。
少し前からよく聞くけど、それってどうなの?なんだかんだ言って、自分で書いたほうが品質もいいし、早いんじゃない?と思っていました(フラグ)
試さずにディスるのは良くないので、今回試してみようと思います。

ノーコードでアプリを作ってみた

作るもの

チュートリアルの王道(だと思っている)TODOアプリを作ってみようと思います。
凝ったものではなく、TODOとDue Dateが書いてあって、あとはチェックボックスでDONEにできるくらいのシンプルなものにしようと思います。

ツール選定

こちらの記事を参考に、Adaloを使ってみることにします。

用意されているパーツを視覚的に組み立てたり、必要なテキストを入力したりといった簡単な操作でアプリ開発ができる、ノーコード開発ツールです。

わくわく。

とりあえずはじめてみる

プラットフォームの選択

ユーザー登録して、アプリの新規作成をおすと...

スクリーンショット 2020-11-02 9.15.26.png

モバイルかWebが選べるんですね。今回はモバイルを選択します。

テンプレートを選択

スクリーンショット 2020-11-02 9.15.44.png

なるほど、よく作るようなアプリはテンプレートが用意されているんですね...
ってTODOアプリあるじゃん!!!

...テンプレートを使ってもつまらないので、Blankを選択しました。

仕上げ

スクリーンショット 2020-11-02 9.16.24.png

アプリ名と、Primary/Secondary Colorを入力して、CREATE!
すると、Overviewが出てきたので、見ました。

スクリーンショット 2020-11-02 9.16.34.png

プロトタイピングツールにそっくりな見た目

ダイアログを消すと、編集画面がお目見えします。

スクリーンショット 2020-11-02 9.18.48.png

すでに、SignUp画面とLogin画面はAdaloが作ってくれています。
某プロトタイピングツールにそっくりな見た目で使いやすそうです。

TODOリストの見た目を作る

見た目を作っていきましょう。

コンポーネントからリストを選択する

Adaloでは、ナビゲーションやフォームなど、基本的なコンポーネントセットが用意されているので、その中から、自分のイメージに近いものを配置して、必要であればアレンジしていくという形で見た目を作っていくことができます。

私の場合は、TODOのリストを作りたいので、リスト表示系のコンポーネントの中から、Custom Listを選択し、Home画面にぐぐぐっと引っ張って配置します。

スクリーンショット 2020-11-02 9.21.22.png

スクリーンショット 2020-11-02 9.21.29.png

配置するときはガイドラインが表示されます。

スクリーンショット 2020-11-02 10.15.12.png

配置されました。

基本のコンポーネントをアレンジする

まずはチェックボックスを追加していきます。
Listコンポーネントを選択した状態で、ADD COMPONENTを選択します。
スクリーンショット 2020-11-02 10.17.14.png

Buttonコンポーネントの中から、Toggleを選択し、任意の場所まで引っ張って配置します。
スクリーンショット 2020-11-02 10.19.01.png

チェックボックスが配置されました。
スクリーンショット 2020-11-02 10.21.20.png

あとは、TitileとSubTitleとなっているところに、それぞれTODOとDueDateを入れたいので、名前を変えておきます。(後々、この作業は不要だと気づくのですが、そのデータがどこに表示されるか明確にしておきたいので、手順に入れておきます。)

Listコンポーネントを選択し、Componentsの中から、Titleを選択します。

スクリーンショット 2020-11-02 10.25.26.png

Titleという文字を、TODOに変えると、コンポーネントでの表示が変わりました。
スクリーンショット 2020-11-02 10.26.57.png

同様にSubtitleをDueDateに変えました。
スクリーンショット 2020-11-02 10.29.07.png

データベースを作る

データベースを作ります。
このツールを触って一番の驚きだったのが、この機能です。

コレクションを作成する

左側のタブの、ドキュメントのアイコンをクリックすると、データベースの設定?画面が表示されます。

スクリーンショット 2020-11-02 10.46.01.png

サインアップ画面で使うUsersコレクションはすでに作られていました。
ドキュメントタイプのNoSQLかと思います。

ここにTodosコレクションを追加していきます。ADD COLLECTIONを押します。
スクリーンショット 2020-11-02 10.49.39.png

コレクション名を入力して、ADDを押すと、コレクションが作成されます。
スクリーンショット 2020-11-02 10.50.26.png

デフォルトでNameというプロパティが入っているのですが、そちらに加えて、以下の2つのプロパティを追加します。
- DueDate
- IsDone

DueDateから追加していきます。
ADD PROPERTYをクリックすると、データ型が選択できます。(すごい...)
スクリーンショット 2020-11-02 11.00.08.png

プロパティ名を入力してSAVEしたら完了です。
スクリーンショット 2020-11-02 11.00.53.png

同様に、IsDoneも追加します。
スクリーンショット 2020-11-02 11.02.37.png

コレクションにデータを追加する

できあがったTodosコレクションにデータを追加していきます。

Todosコレクションの横の0Recoedsをクリックすると、
スクリーンショット 2020-11-02 11.03.25.png

このようなダイアログが表示されます。ADD TODOからデータの追加をします。(CSVでもアップロードできそうですね)
スクリーンショット 2020-11-02 11.05.27.png

追加しました。
スクリーンショット 2020-11-02 11.07.17.png

見た目とデータを連携する

できあがったコレクションと、Home画面を連携します。

リストとコレクションの連携

リストとコレクションの連携を連携します。
リストコンポーネントを選択し、プルダウンからTodosコレクションを選択します。

スクリーンショット 2020-11-02 11.10.00.png

リストに表示するデータにフィルターをかけたり、上位に表示する条件などが入力できます。
今回は、DONEになったものを下に表示するような設定をしてみます。
ADD STRONGから、希望する条件を選択します。
スクリーンショット 2020-11-02 11.14.08.png

リスト内のコンポーネントとデータを連携する

リスト内のコンポーネント(TODOのName/DueDate/IsDone)をデータと連携していきます。

リストコンポーネントを選択し、Componentsの中からデータを連携したいコンポーネントを選択します。(まずはNameから)
スクリーンショット 2020-11-02 11.16.00.png

連携したいコレクションのプロパティを選択します。
スクリーンショット 2020-11-02 11.18.56.png

連携されました。
スクリーンショット 2020-11-02 11.21.06.png

TODOという文字列+TodosのNameになってしまっているので、文字列は削除します。
右側のリストコンポーネントをみると、表示が変わっているのが確認できます。
スクリーンショット 2020-11-02 11.21.31.png

この作業を、DueDateとIsDoneにも行います。

できた!

プレビュー機能で試してみます。画面右上のPREVIEWボタンを押します。
スクリーンショット 2020-11-02 11.25.26.png

動かしてみると...
Aezgif-6-40025350249f.gif

感想

15分くらいできれいな?ネイティブのTODOアプリが完成しました。
これをコードで書けといわれたら、今の自分では確実に不可能です。

Adaloでは、マンスリープランを契約すると、Apple StoreやGoogle Playでアプリを公開できたり、外部のAPIからデータを取得できるみたいです。(2020年11月2日時点)
スクリーンショット 2020-11-02 11.36.39.png

プロトタイピングツールよりはるかに使いやすかったので、プロトタイプの作成に使っても良いかなとも感じました。

一方で、ノーコードは開発者では無ない人でもアプリが作れるのが魅力だと思っていたのですが、多少の知識が無いと難しいのではないかと感じました。(データベースを作って...の下りなど)

以上!
10月編なのに、投稿日が11月なのはつっこまないでください

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
2
Help us understand the problem. What are the problem?