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