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

More than 1 year has passed since last update.

posted at

updated at

Adaloで掲示板を作ってみた

はじめに

 ノーコードの初心者であるところのこの私がAdaloを使ってWebアプリをアジャイル開発するときに使う掲示板を作ってみました。
 プロのソフトウェアエンジニアはノーコードに手を出すのは良い打ち手では無いとのインフルエンサーさんのご意見もあるようです。しかし、私は「新しいモノ好き」なので、「試してみたい」衝動にはついに勝てませんでした。
 いくつか触ってみて最もとっつきやすかったのはシンプル&クールなAdaloです。この記事では私が実際に作成したWebアプリを紹介いたします。

作成環境

  • PC:macBook Pro
  • OS:macOS Catalina
  • ディスプレイ:32.5インチ4K
  • Webブラウザ:Google Chrome バージョン: 84.0.4147.135(Official Build) (64 ビット)

構想・設計

おおよそ2時間程度です。

事前調査

おおよそ3時間程度です。

  • Adaloの開発スタッフの方が作成したYouTube動画を次から次へと見まくりました
  • Adaloの公式ドキュメントにざっと目を通しました。

実装時間

おおよそ4時間程度です。

  • 機能がシンプルでGUIが優れているので、迷うことや詰まることはほとんどなかったです。

アプリケーション名

アプリ開発掲示板

URL

機能

  • 新規ユーザ登録
  • ログイン認証
  • 新規投稿
    • 投稿できる項目
      • 種類
      • 件名
      • 内容
  • 投稿内容更新
  • 回答

画面構成

スクリーンショット 2020-08-23 3.55.02.png

作成したデータベースコレクション

 データベースの各種メンテナンスも簡単に行うことが出来ます。あっけなさ過ぎます。
 複雑なリレーションを張ったり、ビューを作ったりは出来ません。しかし、1対多、多対1、多対多のコレクション間のリレーションは簡単に張れます。触ってビックリ玉手箱モノです。

  • ユーザ:Users

スクリーンショット 2020-08-23 4.10.33.png

スクリーンショット 2020-08-23 5.50.48.png

  • 情報:Info

スクリーンショット 2020-08-23 5.38.51.png

スクリーンショット 2020-08-23 5.51.27.png

  • 投稿内容:Reports

スクリーンショット 2020-08-24 22.53.33.png

スクリーンショット 2020-08-23 5.49.30.png

  • 投稿種類:Kinds

スクリーンショット 2020-08-23 4.13.17.png

スクリーンショット 2020-08-23 5.48.21.png

使ったコンポーネント

  • Text
  • Form
  • Card List
  • Button

操作

[ウェルカム]画面

スクリーンショット 2020-08-23 4.38.24.png

[ログイン]ボタンを押すとログイン画面に遷移します

 ユーザ登録が済んでいない場合には[新規ユーザ登録]ボタンを押します。[ユーザ登録]ボタンを押すと[ユーザ登録]画面に遷移します。
 すでにユーザ登録が済んでいる場合には登録メールアドレスとパスワードを入力し、[ログイン]ボタンを押します。

[ユーザ登録]画面

スクリーンショット 2020-08-23 4.45.02.png

 「メールアドレス」、「パスワード」、「氏名」を入力し、[ユーザ登録]ボタンを押すとトップページに遷移します

[ログイン]画面

スクリーンショット 2020-08-23 4.41.16.png

 すでにユーザ登録が済んでいる場合には登録メールアドレスとパスワードを入力し、[ログイン]ボタンを押します。[ログイン]ボタンを押すとトップページである「投稿内容リスト」画面に遷移します

[投稿内容リスト]画面

スクリーンショット 2020-08-24 22.55.47.png

  • タイトルバーの左横にある家型アイコンまたは右横にある電源アイコンを押すとウェルカム画面に戻ります
  • [新規投稿]ボタンを押すとレポート投稿画面に遷移します。
  • レポート内の左下の「更新する」を押すと、[投稿レポート更新]画面に遷移して、投稿内容を更新できます
    • 更新を投稿者だけにすることも簡単にできますが、ここではあえて、登録ユーザが誰でも更新出来るようにしています。
  • レポート内の左下の「回答する」を押すと、[投稿レポート回答]画面に遷移して、投稿内容に回答できます

[レポート投稿]画面

スクリーンショット 2020-08-23 4.52.59.png

  • 種類、件名、内容を入力して、[投稿する]ボタンを押すと投稿され、[投稿内容リスト]画面に投稿内容が表示されます
  • タイトルバー左横の左矢印アイコンまたは右横の家アイコンを押すと[投稿内容リスト]画面に戻ります

[投稿レポート更新]画面

スクリーンショット 2020-08-23 5.09.44.png

  • [投稿する]ボタンを押すと更新内容が投稿され、[投稿内容リスト]画面に遷移して、更新内容が確認できます
  • タイトルバー左横の左矢印アイコンまたは右横の家アイコンを押すと[投稿内容リスト]画面に戻ります

[投稿レポート回答]画面

スクリーンショット 2020-08-23 5.04.47.png

  • [回答する]ボタンを押すと回答内容が投稿され、[投稿内容リスト]画面に遷移して、回答内容が確認できます
  • タイトルバー左横の左矢印アイコンまたは右横の家アイコンを押すと[投稿内容リスト]画面に戻ります

TIPS

Textへのデータベースコレクションの各項目の当てはめ

  • 「キラキラ星が飛び出すT字棒」アイコンを押します
  • 当てはめたいデータベースコレクションの項目を選択します

スクリーンショット 2020-08-23 5.15.55.png

  • 必要な項目全てでこれを繰り返すと当てはめができます

スクリーンショット 2020-08-23 5.14.10.png

入力フォームへのデータベースコレクションの当てはめ

  • 画面を選択して、「ADD COMPONENT」を押して、「Froms & Field」から「Form」を選んで画面にドラッグ&ドロップします

スクリーンショット 2020-08-23 5.26.10.png

  • 「Form」を押して展開し、「Which data collection?」で、当てはめたいデータベースコレクションを選択します。

スクリーンショット 2020-08-23 5.29.17.png

  • 「Fields」を押して展開します
  • 不要な項目をゴミ箱アイコンを押して削除します
  • 必要な項目は項目名を押して展開し、ラベル、プレースホルダー、表示順、必須入力を適宜設定し、[DONE]ボタンを押します

スクリーンショット 2020-08-23 5.30.47.png

ノーコード初心者の感想

 最初は少しなめてかかっていたのですが、意外に細かく作り込めるモンだなあと思いました。モックアップとかプロトタイプとか、あるいは開発で使うツールはノーコードで作れそうです。Bubbleも使ってみたのですが、こいつはさらに細かな設定が出来るので、使える範囲は広そうな感じです。
 Webアプリ開発はフレームワークを使ってガリガリスクラッチでコードを実装する。そんな固定概念が少しだけ崩れました。データベースの操作もクエリーをガリガリスクラッチすることに快感を覚えていたのですが、基本的なことはあっけなくできてしまいます。
 Adaloの良いところはnode.jsでプラグインをコンポーネント開発して組み込めることろかなあとなんとなく思いました。あと、デザインがそこそこクールです。さらに、作成環境であるWebブラウザでそのまま公開が簡単に出来るもの良いなあと思いました。さらに、iOSとAndroidのネイティブアプリも簡単に作ることが出来るようです。 

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?