ノーコードでアプリ作成に挑戦してみた！

こんにちは！小売企業に勤めているKa4128です:raised_hand:
<br>

デジタルで業務効率化を目指していくという事で、
前回まで2回ほど記事を書かせていただきました。
<br>
そこで感じたのは、ユーザーが1番アクセスしやすいツールって何だろうという事。

<br>
WEBブラウザやLINEなど様々なアクセス方法がありますが、
店舗が多い私の会社では使用率が多いタブレットを想定するのが良さそうです。

<br>
<br>

入り口として、**アプリ**を自前で作れれば良いのになぁとも考えていました。

<br>

そこで、**Adalo**というノーコードツールを使用し、
アプリの作成にチャレンジしてみました。

<br>
ちなみに今回は、業務効率化ツールを作る上でのパーツ(武器)を増やすことが目的のため、
直接業務改善に必要不可欠なアプリは作成してはおりません。

個人的に欲しかったToDoアプリを作成してみました。


## 完成品

<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">スマホで動くアプリ(ToDoリスト)を作成してみました。うまく動いてくれてよかった！<a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://twitter.com/hashtag/%E3%82%A2%E3%83%97%E3%83%AA?src=hash&amp;ref_src=twsrc%5Etfw">#アプリ</a> <a href="https://twitter.com/hashtag/Adalo?src=hash&amp;ref_src=twsrc%5Etfw">#Adalo</a> <a href="https://twitter.com/hashtag/ToDo?src=hash&amp;ref_src=twsrc%5Etfw">#ToDo</a> <a href="https://t.co/Ncf8xQRLCE">pic.twitter.com/Ncf8xQRLCE</a></p>&mdash; Ka4128 (@Ka4128_1) <a href="https://twitter.com/Ka4128_1/status/1731342039768514966?ref_src=twsrc%5Etfw">December 3, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### 完成品の構成
![スクリーンショット (137).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/ca4b7bb9-d057-0da0-fe40-ba867af02b03.png)
1．アカウント作成画面　(新規アカウントを作成する)
2．ログイン画面　(自分のアカウントでログインする)
3．タスク一覧　(ToDoを管理する)　※完成品動画の内容

## 使用したツール

- [Adalo](https://ja.adalo.com/?via=ad&gclid=Cj0KCQiA67CrBhC1ARIsACKAa8SQgNrgkviKt0KgQ76okF4C7YcPSHR_t1nt669WfxiSEvNB9ZJgKncaAtJdEALw_wcB)





Adaloはネイティブアプリ作成に対応しているノーコードツールです。
ドラッグアンドドロップで直感的に開発を進めることができます。
</details>



## 作成手順
### １、元となるフォームを選ぶ
![スクリーンショット (143).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/1ddbe559-8052-9d5c-bd34-31dd70b3a5e1.png)

Adaloは自分が作りたいものに合わせて選べるよう、いくつかの元となるフォームが
用意されています。選んだフォームから編集をおこなっていきます。
(今回はBlankを選択)

### 2、基本のフォームを編集
#### 1、編集方法
![スクリーンショット (141).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/98f3fb77-7549-86df-b944-c057a86e8459.png)

①編集したい箇所にカーソルを合わせると②編集用バーが出現します。
以下、編集をおこなっていきます。

#### 2、ToDoリストのデータベースを追加する
![スクリーンショット (144).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/f5757be2-00fb-0687-d6ef-afa20fb989aa.png)

[Database Collections] を設定する事で、アプリ画面にToDoリストの枠が作成されます。
こちらは未完了タスクとします。

#### 3、追加したToDoリストに要素を追加していく
![スクリーンショット (145).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/9408aab1-e176-4bee-12a3-7f89f14041be.png)

2で追加したToDoリストにカーソルを合わせ、
表示名やチェックボタンや取消ボタンの表示を追加していきます。

#### 4、作成したToDoリストをコピーし、その下に新たにToDoリストを貼り付けする
![スクリーンショット (126).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/e47cad2f-f938-cbc2-9769-85ce52dd9349.png)
こちらを完了タスクとします。未完了の要素を完了のToDoリストに合わせ変更します。

#### 5、検索BOXを追加
![スクリーンショット (126).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/e4b0c32c-1cc0-ccb9-175f-c6f75269237e.png)
作成後、検索BOXを左に寄せます。

#### 6、追加ボタンを作成
![スクリーンショット (128).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/725f53ae-a489-46fd-e496-54aaea90d80f.png)

#### 7、[検索BOX]入力 ⇒ [追加ボタン]を押下 ⇒ 未完了タスクに追加、を可能に
![スクリーンショット (126).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/d5e66a1b-7205-4fa1-6019-458f0da6fc16.png)

#### 8、削除アイコンを設置
![スクリーンショット (126).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/72ac66f7-dcce-cc87-6ac2-377659d14292.png)
追加した未完了タスクの右側にアイコンを設置します。

#### 9、削除アイコン押下⇒タスクが削除、されるよう設定
![スクリーンショット (127).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/331a6890-1fdc-af84-f0f9-0e5ad7f91fc7.png)
完了タスクにも同様の設定をおこないます。

#### 10、タスクを「未完了」⇒「完了」へ移動できるよう設定
![スクリーンショット (132).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/74fc4633-fe4a-8a74-03c0-becb86c761b2.png)
「未完了」のタスクをやり終えたら、「完了」タスクへ移動できるようにします。
(「未完了」のタスクの☑を押下すると、「完了」タスクへ移ります。)

<br>

あとは、各項目の名称や色の変更や、配置場所の調整をしてToDoアプリの完成です。
(サインイン画面やログイン画面も同様に変更しました。)

※アプリをGoogle Playなどに公開することは、有料版でしかできなかったため、
　今回はしていません。


# 参考にしたもの
https://nocodedb.world/archives/5011

https://nocodo.net/media/media-4553/

https://www.youtube.com/watch?v=PFpcgTEOOug&list=WL&index=2

https://www.youtube.com/watch?v=DUBedpHNoaU&list=WL&index=1



# 作成してみた感想

まず、「Adaloすごい・・・。」と率直に思いました。
ある程度、構成をしっかり学べば、なんとなくの感覚でも
正直動かせてしまいます。(英語が少し苦労しましたが:joy:)

<br>

アプリなんて自分が作成できるなんて思ってもいませんでしたが、
ノープログラミングでここまでできるなんて。
楽しくて色々作ってしまいそうです。

<br>

社内デジタルツールを作っていくために、ユーザーの入り口となる
ツールを探し作ってみる、という目標は達成できたと思います。

<br>
まだ基本的なものしか作れていませんが、
他のツールもどんどん探し触れてみることで、
様々なツールを組み合わせ、効率化に向けたデジタルツールを作っていければと思います！


<br>