【使い方簡単レビュー】ノーコードツール「Click」

おはこんばんちわ、hirokiです。

ノーコード開発という言葉がだいぶ浸透してきたのではないかと思います。しかし、IT関連の方やエンジニアの方には馴染みがありますが、なんのことやらという方も多いはずです。

☑ノーコード開発ツールclick(クリック)について知りたい

 

今回は、Click(クリック)に焦点を当てて解説していこうと思います。ちなみに私は非エンジニアです。

それでは、どおぞ!

 

【使い方簡単レビュー】ノーコードツール「Click」

ノーコードツールClickを使ってみたので、レビューと具体的に使い方を解説していきます。

Click(クリック)とは?

ノーコードClick

Click(クリック)公式

2021年1月18日にプレスリリースをしていますので、新しいノーコードツールですね。

リリースされたばかりなので、Web上にあまり情報が少ないです。NoCode Forumがありますので、こちらが参考になります。ただ返答はDMや回答までに時間がかかるといったものもまだ多い印象です。

特徴
無料プランあり
・5つまでアプリ作成可能
・500MBまでデータベース使用可能
・アプリのシェア
日本語対応

HPでは、デザインは「パワーポイント」のように、データベースは「エクセル」のようにと謳っていますね。つまり、直感的に使いやすいということですね。

Click(クリック)を使う手順

Click(クリック)を使う手順を登録から行っていきます。日本語訳がまだまだおかしいので、その点注意ですw

Step1:登録

サイトの右上にある「新規登録」ボタンをおして、メールアドレスとパスワードを入力して、おそらく{OK」ボタンを押します。

メールが来ますので、「Clickアカウントを有効にする」ボタンをおして、アクティベートします。
Clickアクティベート

完了するとログインできます。最初にログインするとチュートリアルがでてきますが、正直わかりづらいので私は見ていません。見なくてもなんとなく操作できます。
Clickチュートリアル

Step2:アプリを作成

新規登録

ログインして画面中央の上に、デフォルト「お問い合わせ」があります。ここでプルダウンで下にメニューがでてきますので、「+到来る」をクリックすると、チュートリアルと同じ画面がでてきますので、「メニュー名」を入力し「作成」ボタンをおすと新しいアプリを作るためのベースが作られます。

わかりやすく、「タスク共有」というアプリにしました。

設定画面

どこに「タスク共有」とでてくるかと言うと、左上に歯車の「設定」があります。こちらをクリックすると上図のウィンドウがでてきます。こちらで、アプリの紹介やアイコンなども設定できます。

Step3:タスクをためていくデータベースを作成

ページを作る

画面左上の「データベース」をクリックします。

データベース

最初はデフォルトで左の「ユーザー」だけが表示されています。左下の「+想いを」をクリックしますと作りたいテーブルを作成することができます。「テーブル」と表示されているものが私が作ったものです。

「+想像をする」をクリックしますとデータのカラムを作ることができます。今回はタスク管理なので「テキスト」だけで上記のようにカラムを作成しています。

「続きレコード」をクリックして図のようなレコードを作成しています。

Step4:ページを作る

ページを作る

画面左上の「層」がページと思っていただいて大丈夫です。「到来る」ボタンをおすと新たなページを作成することができます。ページ右の縦3点をクリックすると「ページに(飛ぶ)」「ページを(削除)」「ページをコピー」とでてきますので、間違えて作成しても簡単に削除ができます。

Step5:画面のレイアウトを作っていく

ページは4つ作成をしています。

・サインイン
・ホーム
・タスク登録
・タスク削除

サインイン

デフォルトで最初から作られていますので、ここで行うことは2点です。

・表示させる文言の修正
・サインインしたあとのホーム画面への遷移

ホーム画面への遷移は、右側の「ClickFlow」から「ホーム」を選択するだけです。

ホーム

「ホーム」画面では、タスクの一覧を表示させて、その一覧から任意のタスクを選ぶと「タスク削除」にとんで削除をし、「タスク登録」画面では新規タスクの登録をするという構成にしたいと思います。

画面の「ラウンジ」に、構成用のパーツがあります。

ホーム画面

「ホーム」画面では、リストの「ベーシック」、メニューの「トップ」と「ボトム」選んでいます。

メニューの「トップ」はただ設置するだけ。リストの「ベーシック」では、設置したあとに、右側メニューの「データ」よりStep3で作ったテーブルを選択します。あと「タイトル」や「サブタイトル」でタグを設定します。データより「テーブル」を選択していると、そこで作成したカラムがタグとして設定することができます。

メニューの「ボトム」も基本設置するだですが、タスク管理のページは一つしかないので、リンクも1つとします。

タスク管理リンク

ボトムの「タスク登録」から遷移させるために、右側の「clickFlow」よりタスク管理のページを選択します。

タスク登録

作り方はホームと一緒でラウンジから必要なものを選択して組み合わせていきます。ラウンジからは倍の「フォーム」、メニューの「トップ」と「ボトム」選んでいます。

「フォーム」ではStep3で作った「テーブル」を選択します。「ボトム」ではホームボタンへ戻るリンクを設定しています。出来上がりますと以下の図のようになります。

タスク登録

タスク削除

最後に、作ったタスクを削除するページも作りましょう。

ホームでつくったフォーム「タスクリスト」から右側の「ClickFlow」より「タスク削除」ページへリンクさせます。ラウンジではボタンの中の「ボタン」を選択し、削除用のボタンを作成します。

タスク削除

ClickFlowの「+ClickFlowの」より、上から4つ目の「現在のテーブル」を選択します。日本語がめちゃくちゃわかりずらいです。。2番目が作成、3番目が更新、4番目が削除となっています。

Step6:プレビュー

画面右上にある「プレビュー」ボタンで動作確認をしましょう。

最終的な構成は以下のようになります。(小さくて見辛いですが)

構成全体像

共有

アプリ共有

Email:test1@test.com
Password:test1

もしよければログインしてみてみてください。テストアプリですので登録や削除など操作していただいた問題ありません。

デメリット

☑日本語がややこしい
☑キャンパスでの操作がマウスによるドラッグできないので、使いづらい
☑フリーなのに「公開」ボタンがおせない

要件を満たしているのに「公開」ボタンがおせない理由がわからないですね。まずはどんなものか使ってみたかったので、だいたいはつかめたと思います。

 

まとめ:Click(ノーコード)は使いやすいが導入はもう少し先

今回、ノーコードツール「Click(クリック)」について解説をしてきました。

かなり多くのノーコードツールがでてきましたので、今後も色々使ってみて自分なりに使いやすいツールを探していこうと思います。最初はちょっと日本語や構成がわからず苦戦しましたが、1時間くらい集中して使ってみるとあとはなんなく使えるようになりました。

↓ノーコードとはどういったものか?というのをまとめた記事になります。

関連記事

おはこんばんちわ、hirokiです。最近、プログラミングの勉強をし始めたところ、調べていると「NoCode(ノーコード)」という言葉を目にするようになりました。言葉の通り、コードなしでWebサイトやアプリが作れるという手法です。[…]

以上、最後までお読みいただきありがとうございました。

では。

スポンサーリンク
最新情報をチェックしよう!