みなさん、こんにちは。
今回は、第4回目のチュートリアルということで「Clickのエレメントについて」を紹介していきたいと思います。
本記事を読むことによって、Clickに用意されている各エレメントの使い方について理解できるようになりますので、ぜひご一読いただけますと幸いです。
また今回の記事も「Clickを学ぶ上で覚えておくべき用語集」と同様、完璧に理解する必要はありません。なにかClickの操作でつまづいたときに辞書のような形でご使用ください。
エレメントとは？
エレメントとは「Clickで用意されている機能のパーツのこと」になります。
Clickでは、これらのエレメントを組み合わせることによってアプリケーションを作っていきます。
では、エレメントの詳細について上から順に解説していきます。
ページのエレメント一覧
ページとは「Webサイトの1ページのこと」を言います。
Clickの編集画面では以下の画像の赤枠の部分になります。
そして左のエレメント一覧の場所からページを選択すると、3つのパターンからページの種類を選ぶことができます。
白紙のページ
白紙のページとは、その名前の通り「なにもエレメントが置かれていないページ」になります。
そのため、0から自分の好きなようにカスタマイズすることが可能になります。
ページを追加するときの多くの場合は「白紙のページ」を使うことになると考えられます。
詳細ページ
詳細ページとは「クリックした内容の詳細を記載したページ」にを作る際に使い、NEWSアプリを作る場合などによく使われます。
以下の画像のようなNEWSアプリが詳細ページを使った一例です。
1枚目の画像にはNEWSの一覧、そして赤枠のNEWSの内容をクリックすると、2枚目の画像のようなNEWSの詳細ページに移動します。
このように「とある情報をさらに詳しく記載する必要がある」という場合に便利なページになっています。
モーダル
モーダルとは「モーダルウインドウ」の略で、元のウインドウ(ページ)の上に別枠で表示されるウインドウのことです。
ウィンドウ内で表示された操作を完了する、あるいはキャンセルをしなければ、ウィンドウの外をクリックしても戻れないという動作をします。
ボタンのエレメント一覧
ボタンとは「ユーザーがクリックすることによって動作を起こさせるためのパーツ」になります。
Clickには様々なボタンがありますが、それらを状況によって使いこなすことによって、より便利なアプリケーションを作成することができますのでぜひ使い分けてみてください。
スイッチ
スイッチとは「iPhoneに使われるようなON,OFFを切り替えるスイッチ」のことを言います。
このスイッチを使うことによってiPhoneの設定に使われる以下のような機能を実装することができます。
トグル
トグルとは「クリックするたびにON,OFFの状態が入れ替わるチェックマークのスイッチ」になります。
先程紹介した「スイッチ」との違いは主に「見た目」です。これらを使い分けることによってUI.UXの向上を見込むことができます。
「利用規約に同意しますか？」のときにチェックマークによく使われたりするエレメントです(以下の赤枠の部分)。
ActionButton
ActionButtonとは「右下に固定して配置するボタン」のことを言います。スマホアプリのTwitterの右下にあるボタンがActionButtonになります。
このエレメントはどこにドラッグ&ドロップをしても右下に固定して配置され、中身のアイコンはあらかじめClickで用意されたアイコンに自由に編集することができます。
ボタン
ボタンはその名の通りボタンを意味しています。
このボタンを使うことによって、ページの移動やデータの登録など様々な動作を行うことができます。
アイコン
アイコンでは、アイコンを配置させることができる機能です。
Clickには数十種類のアイコンが用意されているので、ある程度自由にアイコンを使用することができます。
リストのエレメント一覧
リストとは「データベースに格納されている情報を表示するもの」のことを言います。
データベースを使いこなすには必須の機能になるので、ぜひ3つのパターンから使い分けてみてください。
タイムラインリスト
タイムラインリストは「SNSのタイムラインのようなアプリを作る場合に使うリスト」になります。初めからタイムラインに必要なエレメントが備え付けられているため、だれでも簡単にSNSのアプリケーションを作ることができます。
カスタムリスト
カスタムリストは「自分でカスタマイズして自由な形式で扱う場合に使うリスト」になります。最初から決められている部分が少ないので、希望に沿ったリストを作成することができます。
またカスタムリストを編集によって選択したとき、分かりやすくするために余白の部分赤が枠で表示されるようになっています。
ベーシックリスト
ベーシックリストは「一般的な表などに使われるリスト」になります。
カスタムリストに比べて「データごとの余白を調整できない」などの違いがあります。
そのためシンプルな表を作りたいといった場合によく使うのがベーシックリストになります。
カード
カードとは「写真をメインにしたリスト」になります。
このリストはブログなどによく使われ弊社のNoCodeJapan NEWSも同じようにカード型のリストが使われています。
よく使うエレメントの一覧
マップ
マップとは「Googleマップと連携して位置情報を使うことができるエレメント」になります。
このエレメントは「飲食店検索アプリ」や「避難所マップアプリ」など様々な使い方で重宝するようなエレメントです。位置情報を使うようなアプリでは必須なのでぜひその際は使ってみてください。
注意ですが、このエレメントを使う際はGoogleマップのAPIキーを取得しなければいけません。APIキー取得の際はこちらに従って取得してみてください。
シェイプ
シェイプとは、Clickでは「長方形のエレメント」になります。
特にシェイプを使うことによって機能が増えるわけではありませんが、上手く使いこなせばデザインを良くすることができUIの向上を見込むことができます。
画像
画像では「アプリケーションに画像を貼り付けること」ができる機能になります。
画像の使用方法は
- 自分で画像ファイルをアップロードする方法
- データベースから引用する方法
- URLを貼ることによってインターネットから引用する方法
の3つがあります。
- アイコンのように、ずっと固定で表示させるものであれば「自分で画像ファイルをアップロードする方法」
- カードのリストなどを使う場合は「データベースから引用する方法」
- インターネットの画像を使いたい場合は「URLを貼ることによってインターネットから引用する方法」
というように使い方によって使用方法を変えていけばより扱いやすくなります。
テキスト
テキストを使うことによって「文章を記載すること」ができます。
エディターに「Single-Line」と「Multi-Line」がありますが、
- Single-Lineでは「1行の文章」を書くことのみが可能に
- Multi-Lineでは「複数行の文章」を書くことが可能に
なります。
Webview
Wecviewでは、URLを貼り付けることによって「貼り付けたURLのWebサイト」を表示することができます。
例えば、NoCodeJapan NEWSのURLを貼り付けると、NoCodeJapan NEWSのWebサイトをアプリ上で表示させることができます。
しかし、この機能はAPIを使わずに外部のWebサイトと連携するような形になるので、多くのURLではセキュリティがかかっており、以下のような画面が出てくることになります(例はYouTubeのURLを貼った場合)。
YouTube
YouTubeではURLを貼ることによって「YouTubeの動画をアプリ上で再生させること」が可能になります。
オプションによって自動再生のオンオフも切り替えることができます。
データ入力のエレメント一覧
データ入力のエレメントとは「開発したアプリを使うユーザー側の人がデータを入力する際に使うエレメント」になります。
例えば、LINEのプロフィール画像を決めるときユーザー側が画像ファイルをアップロードしますよね？そのようにユーザー側がデータを入力する場合に使えるようなエレメントをここでは紹介していきます。
そしてClickでは多くの場合にエレメント単体ではなく「フォーム」を使って実装する場合がほとんどです。そのためこの一覧の最後に紹介する「フォーム」と合わせて使用してみてください。
プルダウン
プルダウンとは以下の画像のようなデータ入力方法になります。個人情報の入力にてよく使われるエレメントになります。
ブルダウンを扱う場合は、リストのようにあらかじめデータベースに選択肢を格納して、そこから引用して使うことになります。
画像入力
画像入力とは、LINEのプロフィール画像をアップロードする際に使われるような機能になります。
画像入力エレメントをアプリケーションの中に配置すると、ユーザーがそのエレメントをクリックした際に画像をアップロードできるようになります。
画像エレメントと画像入力エレメントでは、
- アプリ開発者側が画像をアップロードするのか
- アプリを使うユーザー側が画像をアップロードするのか
という点において違いがあります。
インプット
インプットでは「ユーザーが文字を入力することができるエレメント」になります。
エディターでは文章以外に、
- 初期値(最初から入力されている値)
- プレースホルダー(初めに薄く表示されている文字、例では「Enter Text」がこれに該当する)
- アイコンの有無
の編集を行うこともできます。
日付入力
日付入力では「日付から日時までの入力」を行うことができます。
このエレメントをクリックすると、以下のように日付を入力する赤枠の部分が出てくるので、ユーザーはそれによって日付から日時までの入力を行います。
1つ注意点ですが、Clickはスマホアプリに特化したノーコードツールであるため、パソコンで扱う場合はすこしUXが悪い部分があります。そのためこの機能を使う場合はスマホアプリのユーザーを見込んで作ることをおすすめします。
また、エディターでは「初期設定日」と「フォーマット」を決めることができます。
- 初期設定日では、最初に設定される時刻の決定
- フォーマットでは、最初に表示される時刻の決定
を行うことができます。
フォーム
フォームでは「データ入力のエレメントを用いてデータベースと連携させることができるエレメント」になります。アンケートの機能などを実装したい場合はこのフォーム機能を使うことになります。
この機能を使う場合は、エディターから連携するデータベースを選択する必要があります。データベースを選択したら、そのデータベースのタイプに応じてデータ入力のエレメントが自動で生成されます。
そして次に、その下の動作を選択します。
この動作には
- 入力されたデータを新たにデータベースに追加する「Create new 〇〇」
- 入力されたデータに更新を行う「Update Current 〇〇」
の2つがあります。これを選択することによってフォーム機能を使うことができるようになります。
メニュー
このメニューのエレメントでは「スマホの画面上の一番上・一番下にあるエレメント」を編集することができます。
このエレメントはスマホのUX・UIに一番影響を与えるといっても過言ではありません。そのため、このメニューのエレメントはアプリを作成する際はしっかりと作り込むことが重要になります。
しかし、操作方法さえ覚えてしまえば難しいことはないので、説明を見てしっかり扱えるようにしてみてください。
トップ
トップとは「スマホ画面の1番上に表示されるエレメント」になります。以下の画像の赤枠の部分になります。
トップのエレメントのエディターからは「タイトル」に加えて「アイコンの数」,「アイコンの種類」を変更することができます。アイコンの数は最大で3つまで選択することが可能です。
ボトム
ボトムとは「スマホ画面の1番下に表示されるエレメント」になります。以下の画像の赤枠の部分になります。TwitterやInstagramなどで見かけるメニューですね。
ボトムのエレメントのエディターからは「タブ(ボトムメニューの中のボタン)の数」,「タブのタイトル」,「タブのアイコン」を編集することができます。「タブの数」は5つまで選択することができます。
そして、ボトムのエディターの「スタイル」からは「アクティブタブ」,「アクティブ時の色」,「非アクティブ時の色」,「塗りつぶし」の色を選択することができます。
- アクティブタブでは、現在のページのタブを選択することができます。上記の画像を例にすると、いいねしたものが表示されるようなページに現在いる場合にアクティブタブは「Favorite」になります。
- アクティブ時の色では、アクティブタブの色をカラーコードで指定することができます。
- 非アクティブ時の色では、アクティブタブ以外のタブの色をカラーコードで指定することができます。
- 塗りつぶしでは、ボトムの背景の色を変更することができます。
終わりに
いかがでしたでしょうか。
Clickで用意されているエレメントの機能を理解しておくと、どのようなアプリケーションを作成できるのかイメージできるようになります。そのため、余裕があればぜひこれらの機能を覚えてみてください。
NoCodeJapan株式会社では今後もClickの使用方法に関して発信していきます。
