ノーコードClickで一覧、詳細機能を作ってみよう

今回は、無料から使用することができるノーコードツールである『Click』の使い方のご紹介の一つとして一覧、詳細機能を作っていきたいと思います。
一応、当ブログでは初登場のノーコードツールである「Click」なので、まずは簡単に「Click」についての紹介ができればと思います！

▼ノーコードツール「Click」とは？

まず、ざっくりお伝えすると、「Click」は、ノーコードツール「Adalo」の日本語バージョンという捉え方で問題ないかと思います。
「【ノーコードAdaloとは？】ネイティブアプリを簡単に作れる「Adalo（アダロ）」を徹底解説！」はこちらから
「【2022年07月29日現在】Adalo（アダロ）のプラン・価格変更について」はこちらから
「Click」も「Adalo」と同様に、主にモバイルアプリ・スマホアプリを開発するためのノーコードツールの一つであり、ネイティブアプリやWebアプリの開発もすることができます。
まるでパワーポイントでプレゼンテーションの資料を作るかのように直感的に、ドラッグ＆ドロップでコンポーネントを組み合わせ、アプリの開発を進めることができます。
「Click」の1番のポイントは、「日本語対応」であることでしょう。
その他のノーコードツール（BubbleやAdalo、Glideなど）は英語対応のため、「とっかかりづらい」と思われていた方も多いかと思いますが、「Click」は日本語に対応しているため、その分ストレスなく学習やアプリの開発を進行できるのかと思います。
LINEログイン機能がある点も日本産のありがたいところですね。
stripe決済（単発およびサブスク）やUnivaPayなどの決済機能もありがたいです。
「ノーコードであっという間にWebアプリを作る３つの方法（Bubble、Adalo、Glide）」はこちらから
「【ノーコード比較】AdaloとBubbleどっちがいいの？ アプリ・Webを作りたい方必見！」はこちらから
また、そのこともあってその他のノーコードツールよりも比較的学習コストや難易度が低くとも言えるので
・これから個人でアプリ開発をしてみたい方
・ノーコードの学習をしていきたいけど、その他のノーコードツールは若干ハードルが高いと感じている方（ノーコード初心者・未経験の方）
・副業で月に数万円を稼ぎたい方
などなどにおすすめなのかと思います。
ノーコードツール『Click』の料金体制に関しては、以下の通りです。
Adaloより若干安いというのが印象ですかね。
また、無料からの使用も可能になります。
引用元：https://click.dev/plan-price/
こんなところで、「Click」の紹介は終わりにして、今回の本題の一覧、詳細機能の作成に入っていきます！
ノーコードツールClickの使用は以下から
↓
https://click.dev/

▼実装の作成

今回は、写真（コンテンツ）が一覧で表示されているスクリーンとその写真（コンテンツ）の詳細スクリーンを作っていきます。
まず、デバイスの選択とアプリ名を決定していきます。
するとこんな感じでアプリの編集画面に遷移するかと思います。
まず、データベースを用意したいので、赤い部分をクリックします。
「テーブルを追加」をクリックします。
投稿のデータベースを作りたいので、「投稿」としておきます。
「投稿」のテーブルの項目を編集していきたいので、わかりやすいように、デフォルトで設定されている「Name」を「説明」にしておきます。
「投稿」の説明ということです。
さらに、投稿には写真も含めたいので「項目を追加」をクリックし、「画像」を選択します。
この項目を投稿の写真にしたいので、名称を「投稿写真」としておきます。
「投稿の投稿者は誰なのか」ということを表示させたいので、「投稿」のデータベースと、「Users」のデータベースでリレーション設定をしていきます。
「項目の追加」→「データの紐付け」→「Users」を選択します。
リレーション設定を選択するのですが、今回は「投稿は１人にユーザーに帰属し、ユーザは複数の投稿を持つことができる」という関係にしたいため、一番上を選択します。
この名称を「投稿者」としておきます。
これで、今回作成する機能のデータベースは用意できました。
続いては、UIの作成を進めたいと思います。
下記をクリックします。
投稿一覧を表示させるスクリーンを作成したいので、ホームスクリーンに「カスタムリスト」を配置します。
このリストには「投稿」を表示させたいので、「データベースの選択」を「投稿」にします。
先ほど配置したカスタムリスト（投稿リスト）を以下のような感じに調節し、UIを整えていきます。
画像エレメントは左からドラッグ＆ドロップで配置することができます。
続いて、「リストの中のコンポーネントに何を表示させるか」ということの設定をしていきます。
まず、配置した画像には投稿の画像を表示させたいので、以下のように「画像ソース」を設定していきます。
データベース ＞ Current 投稿 ＞ 投稿写真 と選択していきます。
続いて投稿の説明を表示させるため、以下のように、「Tittle」という文言をマジックテキストで置き換えていきます。
Current 投稿 ＞ 説明 と選択していきいます。
また、投稿者も表示させたいので、「テキスト」を投稿のリストにドラッグ＆ドロップで配置します。
Current 投稿 ＞ 投稿者 ＞ Usernameをとってあげます。
これで投稿の一覧表示は作成できたので、次に詳細スクリーンを作っていきます。
「ページ」からスクリーンを追加します。
画像とテキストのエレメントを配置します。
「投稿」をタップした際に、「ホーム」スクリーンから「投稿詳細」スクリーンに遷移させたいので、先ほど作成したリストに「ClickFlow」を作っていきます。
「投稿詳細」スクリーンには、「ホーム」スクリーンにてタップした投稿を表示させたいので、「投稿詳細」スクリーンに配置した３つエレメントの表示設定をしていきます。
こんな感じですね。
あと、「ホーム」スクリーンに戻るためのボタンもあったほうがいいかと思うので、エレメントの「トップ」を配置します。
「トップ」のエレメントにもClickFlowを設定します。
「ページ移動」 ＜ 「戻る」ですね。
これで「一覧、詳細機能」の構築はできたかと思うので、アプリを動かしてみたいと思います。
右上の動画再生っぽいボタンからアプリは動かせます。
まだ、データを入れていないので、何も出てきません。
データを追加してみたいと思います。
「レコードの追加」から投稿のデータを追加してみたいと思います。
こんな感じでデータを追加してみます。
もう一度、アプリを動かしてみると、先ほど作成した投稿が反映されていますね。
また、投稿をクリックすると、投稿詳細スクリーンに遷移することができました。
データうまく反映できているようです。

▼まとめ

今回は、ノーコードClickで一覧、詳細機能を作ってみました。
やっぱり日本語対応なのは、ストレスなくいいですね。
「ノーコードには興味あるけど、いきなりBubbleやAdaloはハードルが高い」という方には特におすすめかなと思います。
今回Clickで作成したような機能をAdaloで作っている動画もあるので、ご興味ある方は以下からご覧いただければと思います。
https://www.youtube.com/watch?v=aSc4rxUZOJc
最後までご覧いただき、ありがとうございました！