今回は、前回に引き続き、無料から使用することができるノーコードツールである『Click』の使い方のご紹介の一つとして一覧、登録・編集機能を作っていきたいと思います。
前回の記事をまだご覧になっていない方は、そちらをご覧いただいてからの方がわかりやすいかと思います。
参考）ノーコード Click（クリック）：機能・メリット・他ツールとの徹底比較
参考）ノーコードアプリ開発: 無料で始められるおすすめツール６選
ノーコードツール『Click』とは、簡単におさらいすると、『Adalo』の日本語バージョンという認識で問題ないかと思います。
日本語対応なのがやはり嬉しいですね。
「【ノーコードAdaloとは？】ネイティブアプリを簡単に作れる「Adalo（アダロ）」を徹底解説！」はこちらから
Clickについてより詳しく知りたい方は、以下の記事を参考にしてみてください。
【ノーコード】Adalo（アダロ）とClick（クリック）を徹底比較！料金から機能面まで細かく解説
それでは早速、本題の一覧、登録・編集機能の作成に入っていきます！
ノーコードツールClickの使用は以下から
↓
▼実装の作成
前回はこんな感じで終わっていたかと思いますので、続きから進行していければと思います。
まずは登録機能から作成していきたいので、スクリーンから作っていきます。
エレメントの「フォーム」を作成したスクリーンに配置します。
エレメントの「トップ」も配置しておきます。
配置したフォームのアクションを作っていきます。
今回のこのフォームでは、「投稿」を作成したいので、アクション設定で
作成 ＞ 投稿 とします。
フォームのエレメントの設定をします。
データは「投稿」を選択します。
自動入力項目に、「Logged In User」を設定しておきます。
一応、投稿するボタンのUIも「作成する」にしておきます。
投稿作成後は、ホームに戻るようにしたいので、リンク設定もしておきます。
エレメントの「トップ」の設定もしておきます。
左アイコンで一つ前の戻れるように、また、右アイコンは削除しておきます。
ホームスクリーンから投稿作成スクリーンに遷移させたいので、ホームスクリーンにアクションボタンを配置し、リンク設定もしておきます。
これで登録機能は完成です。
次に、編集機能を作成していきます。
編集機能もあらかた登録機能と同じ流れになります。
まずはスクリーンから作っていきます。
「トップ」は先ほどの投稿作成スクリーンと同じにしておきます。
ホームスクリーンに「アイコン」を配置します。（今回は、UIの綺麗さなどは無視します。）
アイコンにリンク設定をし、投稿編集スクリーンに遷移できるようにしておきます。
このアイコンは、「投稿者」＝「Logged In User」であった場合にのみ表示させたいので（自分が投稿した投稿のみを修正できるような実装にするため）、Visibility設定もしておきます。
投稿編集スクリーンにてフォームを配置し、「動作」を「データの更新」にしておきます。
「送信ボタン」も一応、「編集する」に変えておきます。
編集後は、ホームスクリーンに戻るようにリンク設定もしておきます。
これで、今回の一覧、登録・編集機能の実装は作成できたかと思います。
▼実装の確認
編集アイコンに設定したVisivility設定がうまく機能しているかを確認するために、Userを追加しておきます。
一旦ログアウトし、先ほど追加した新たなユーザーでログインします。
右下のボタンより、投稿を作成します。
編集アイコンのVisibility設定もうまく機能しているようです。
編集機能もうまく機能しているようです。
▼まとめ
今回は、ノーコードClickで一覧、登録・編集機能を作ってみました。
自分もClickを頻繁に使用しているわけではないのですが、Adaloを使用していると無意識的にClickも使用できる体感なので、Adaloを触れる方は問題なくClickも触れるのかなと感じました。
今回Clickで作成したような機能をAdaloで作っている動画もあるので、ご興味ある方は以下からご覧いただければと思います。
最後までご覧いただき、ありがとうございました！
アプリ・Webサービスの開発の無料相談はこちら
Adalo、bubble、STUDIOなどのノーコードを使うことで、リスクを抑えてスピーディにビジネスアイデアを形にすることができます。
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。