みなさん、こんにちは。
ノーコード初心者の方に向けて第3回目のチュートリアルということで「Clickの操作画面について」を解説していきたいと思います。
本記事を読むことによって、Clickの操作画面やどのような機能があるのかを理解することができますので、ぜひ最後までお読みください。
またまだClickの登録が完了していないという方は以下の記事からご登録ください。
また、この記事で分からない用語などがありましたら、以下の記事を辞書のようにして調べながらご覧ください。
キャンバスとは？
キャンバスとは「ユーザーの操作画面(Webサイトの見た目)を編集する場所」になります。Clickでは以下のようになっています。初めはこのキャンバスの操作方法について解説していきます。
新規アプリの作成と削除
新規アプリの作成
新規アプリの作成は、Clickの操作画面の一番上の中央にあるボタンを押して、一番下の「新規アプリ作成」をクリックすることによって作成できます。
すると、以下の画面が出てくるので、それに従ってアプリケーションの名前を入力すれば新たにアプリケーションを作成することができます。
また、そこからチュートリアルを行うことも可能です。
アプリの削除
アプリの削除は、左上の「設定」から行うことができます。
設定を開いた時に以下のような画面になり、左下のゴミ箱マークをクリックすると「このアプリを本当に削除しますか？」と出てくるので、そこで「削除」をクリックします。するとアプリの削除を行うことができます。
Clickは、無料プランでは5アプリまで、有料プランでは10アプリまでのみ保存することができるので、必要のないアプリケーションは随時削除していくことを推奨します。
初期のページ
Clickでは以下の画像のような1つの塊をページと呼びます。
このキャンバス画面では最初から「Sign Up」,「Sign In」,「Home」の3つのページが用意されています。
- 「Sign up」は、ユーザーがアプリにアカウント登録するための画面です。「Already have an account？(既にアカウントを持っていますか？)」のボタンを押すと「Sign In」のページに移動します。
- 「Sign In」は、アカウントを既に登録しているユーザーがアカウントにログインするためのページになります。ログインが完了すると「Home」に移動します。
- 「Home」は、ユーザーがログインした時に移るページになります。
Clickでは最初からこれらの機能が備えられているため、ログインなどの設定を編集する必要はありません。また、ログイン機能を必要としないアプリケーションであれば、「Sign Up」「Sign In」の2つのページを削除するだけでログイン機能を消すことができます。
ページを削除するには、ページの左上の名前の部分をクリックし「Delete」キーを押すことで削除できます。また、左上の部分を押したままドラッグ&ドロップを行うとページを移動して整理することができます。
操作画面の大きさや位置の変更
キャンバスでの操作画面を拡大・縮小する場合は、左下のプラスマーク・マイナスマークをクリックします。これによって操作画面を好みの大きさに調整することができます。
また、隣の「家のマーク」のボタンを押すと、操作画面の位置を最初の場所に持ってくることができます。
ページ・エレメントのエディター
ページ・エレメントのエディターとは、Clickのページ・エレメントを選択した時に右側にでてくる操作画面のことになります。ここでは基本的に「エレメント」,「スタイル」,「ClickFlow」の3つを編集することができます。
エレメント
エレメントでは、エレメントの機能やアイコンについて編集することができます。「Home」のページを例にすると、そこで「ページ名」,「エレメントの表示」,「ログイン時の開始ページ」,「未ログイン時の開始ページ」を編集することができます。
スタイル
スタイルでは、エレメントの大きさや色などのデザインの部分を主に編集することができます。ここでしっかりとデザインの設定を行うことでUIの向上を見込むことができます。
補足ですが「前面に配置」という部分では、エレメント同士が重なった時に「どちらを先頭に表示させるか」を決めることができます。
ClickFlow
ClickFlowでは、そのエレメントの動作を設定することができます。エレメントの動作は「ページ移動」,「データの追加」,「データの更新」,「データの削除」,「More…」と5つのパターンが用意されています。
- ページ移動では、エレメントを操作(主にボタンのクリック)を行うことによって、目的のページに移動させることができます。このような動作を「ページ遷移(せんい)」とも言います。
- データの追加では、既存のデータベースに新たなデータを追加することができます。フォームのエレメントには初期状態でもこの動作が付属しています。
- データの更新では、データベースに保存されている情報に対して新たな情報を上書きすることができます。
- データの削除では、データベースに保存されている情報を消すような処理を行うことができます。
- More…では、「Sign Up」,「Log In」,「Log Out」を選択してそれぞれの動作を行うことができます。「Sign Up」,「Log In」は初期ページで設定されているため、主に「Log Out」の用途で使われる場合が多い動作になっています。
エレメントとレイヤー
ここでは、キャンバスの一番左側にある「エレメント」と「レイヤー」について解説します。下記に表示されているエレメントの操作については、自分が使いたい機能を持ったエレメントをドラッグ&ドロップでページに追加するだけで操作を行うことができます。
次にレイヤーについてです。レイヤーとは「それぞれのページにあるエレメントを分かりやすく表示したもの」になります。この機能を使うことによってページがどのような構造になっているのか簡単に確認することができるため、アプリケーションが複雑になったときに非常に重宝する機能になっています。
補足ですが、レイヤとエレメントの右横にある矢印をクリックすると、その部分の幅を閉じることができます。
その他の機能
プロフィールやClickの設定の変更
画面右上にあるプロフィールのボタンをクリックすると設定を行うことができ、ここでは以下の設定を行うことができます。
- アカウント設定：「設定」を押すと編集することができ、「名前」,「メールアドレス」,「パスワード」,「プロフィール画像」を設定することができます。
- カード設定：「設定」を押すと編集することができ、有料プランを使用する際の決済に必要はクレジットカードを選択することができます。無料プランのみを扱う場合は設定する必要はありません。
- APIの利用設定：「設定」を押すと編集することができ、ここではAPIの利用状況を確認することができます。
- プランの設定：「プラン」を押すと編集することができ、無料プランと有料プランの切り替えを行うことができます。
- 言語設定：「言語設定」を押すと編集することができ、日本語と英語の切り替えを行うことができます。
- ログアウト：現在のログイン状況からログアウトします。
公開
公開は右上の「公開」というボタンを押すとできます。この機能はネイティブアプリを作る際に使用するため、有料プランに入る必要があります。
共有
共有も右上にある「共有」ボタンを押すことで、できるようになります。共有ボタンを押すと、以下のような画面になります。
そして「SHARE YOUR APP(あなたのアプリを共有する)」をクリックすると、そのページのURLがコピーされます。そのURLにスマホで移動すると、そのアプリケーションを使用することができます。
また、スマホからQRコードを読み取ることによってもアプリケーションを共有して使用することができます。
プレビュー
プレビューは、右上にある「プレビュー」のボタンをクリックすることによって行うことができ、現在作成中のアプリケーションの動作を確認することができます。プレビューをすると、以下のような画面になります。
NoCodeForum
NoCodeForumとは「Clickの質問を受け付けて回答する掲示板」となっており、以下の画像の右上の赤枠ののボタンを押すことによって、そのページに移動することができます。
NoCodeForumを開くと、以下のようなページに飛び様々な質問や回答が飛び交っています。NoCodeForumという名前の通りClick以外の質問も受け付けています。
終わりに
いかがでしたでしょうか。
Clickでキャンバスの操作方法をしっかり理解することによって、迅速にアプリ開発を行うことができるので、ぜひ覚えてみてください。
Clickのデータベースについては、実際にアプリを作っていく上で学ぶ方が分かりやすいと思いますので、そのときに操作方法を解説させていただきます。
NoCodeJapan株式会社では今後もClickの使用方法に関して発信していきます。
