【Adaloでできること】複数選択できるドロップダウンメニューの作り方

Adaloで複数選択できるドロップダウンメニューの作り方NoCode

こんにちは!
てつごろう(@Te256g)です。

プログラミングが不要でWeb開発ができるNoCode(ノーコード)が盛り上がりを見せています。

その中でも特に操作性が高く、人気のあるアプリ開発プラットフォームがAdaloです。

前回の記事では「Adaloでできること」と題して、QRコード生成するツールの作り方を解説しました。

今回は、複数選択できるドロップダウンメニューの作り方を解説します。

画像をたくさん使っているので、ぜひご自分でも試してみてください!

てつごろう
てつごろう

15分もあれば完成するんだよ。


 筆者について

大学時代に情報システム系学科でC、Java、VC++を学ぶ。IT企業ではハードウェアエンジニアとしてWindows/UNIX系システムの保守・運用を担当。現在は個人でWebサイト制作を請け負っています。NoCodeの可能性に惹かれ、Webサービス開発に向けて勉強中。

てつごろう|@Te256g


スポンサーリンク

【Adaloでできること】複数選択できるドロップダウンメニューの作り方

Adaloで、複数選択できるドロップダウンメニューの作り方を解説していきます。

完成したイメージはこちらです。

実際に僕が作ったアプリはこちらで確認することもできます。

完成イメージ
完成イメージ

ここでは転職サイトで希望勤務地を選ぶ時などに使われる、都道府県を複数選択できるドロップダウンメニューを作っていきます。

※アプリ開発の始め方や基本操作がわからない方は「NoCodeツールAdaloでアプリを作る方法【基本操作を習得できます】」の2-1を参考にしてください。

※Native Mobile Appで開発することを前提にしています。

ここからの作業の流れはこのようになっています。

作業の流れ

(1) MultiSelect Dropdownを追加する
(2) コンポーネントを追加する
(3) コレクション(データベース)を作る
(4) コレクションにデータを登録する
(5) MultiSelect Dropdownにコレクションを紐づける
(6) プレビューで動作確認

(1) MultiSelect Dropdownを追加する

まずは複数選択できるプルダウンメニューを実現するための外部コンポーネントを追加しましょう。

Left ToolbarのADD COMPONENTから、下の方にある「EXPLORE MARKETPLACE」ボタンをクリックします。

Market Place
Market Place

Marketplaceが開きます。

「Multiselect Dropdown」の右下にあるINSTALLボタンをクリックしてください。

コンポーネントをインストール
コンポーネントをインストール

INSTALLがINSTALLEDになったらDONEボタンで画面を閉じてください。

(2) コンポーネントを追加する

Home画面にコンポーネントを追加しましょう。

ADD COMPONENT→Installedの中から、Multiselect DropdownをHomeに追加してください。

コンポーネントをHomeに追加
コンポーネントをHomeに追加
てつごろう
てつごろう

必要なコンポーネントはこれだけなんだよ。

(3) コレクション(データベース)を作る

続いてデータを保管するコレクションを作る方法です。

※Adaloではデータベースのことをコレクションと呼びます。

Left ToolbarからDatabaseボタン→ADD COLLECTIONの順にクリックします。

コレクションを追加
コレクションを追加

Collection Nameの入力欄に「Work Place」と入力したら(Cityでも何でもOKです)、ADDボタンでコレクションを作成します。

Collection Nameを入力してADD
Collection Nameを入力してADD

次にNameプロパティのメニューを開き、値を「Location」に変更しておきます。

最後にSAVEで保存を忘れずに!

Nameプロパティを変更
Nameプロパティを変更

もう一つプロパティを作りましょう。

都道府県を北から順番に並べて表示するために、番号を格納するプロパティが必要です。

ADD PROPERTYからNumberをクリックしてください。

プロパティを追加
プロパティを追加

下図のようにNameをNumに変えて、SAVEで保存します。

Numberの名前をNumに変更
Numberの名前をNumに変更

後から追加したプロパティは下に追加されていきます。

データベースの構造を分かりやすくするため、NumをLocationの上に移動しておきましょう。

NumをドラッグしてLocationの上でドロップすると、順番が入れ替わります。

Numを先頭に移動する
Numを先頭に移動する

これで都道府県の情報を格納するためのコレクションの準備が完了しました。

Work Placeコレクションの中に、下図のようにNum、Locationプロパティが入っていればOKです。

ちなみに「0 Records」ボタンをクリックしてコレクションの中を見てみると、このように空のデータベースが作られていることが確認できます。

コレクションの中身
コレクションの中身

(4) コレクションにデータを登録する

今回は都道府県を選択するメニューを作りたいのですが、そのためには元のデータを用意する必要があります。

Microsoft Excelなどの表計算ソフトを使って、都道府県リストのCSVファイルを作る手順を解説していきます。

都道府県の一覧を用意したので、こちらをコピーして使ってください。

北海道
青森県
岩手県
宮城県
秋田県
山形県
福島県
茨城県
栃木県
群馬県
埼玉県
千葉県
東京都
神奈川県
新潟県
富山県
石川県
福井県
山梨県
長野県
岐阜県
静岡県
愛知県
三重県
滋賀県
京都府
大阪府
兵庫県
奈良県
和歌山県
鳥取県
島根県
岡山県
広島県
山口県
徳島県
香川県
愛媛県
高知県
福岡県
佐賀県
長崎県
熊本県
大分県
宮崎県
鹿児島県
沖縄県

引用)Start Pointさんのサイトを参考にさせていただきました。

表計算ソフトで、以下のようにCSVファイルを作ってください。

  • A列に1から番号を振り、先頭行に「Num」と入力
  • B列に都道府県名を貼り付け、先頭行に「Location」と入力
  • 書き出す時は「CSV UTF-8」を指定
CSVファイルの内容
CSVファイルの内容
CSV UTF-8(コンマ区切り)で保存
CSV UTF-8(コンマ区切り)で保存

これで元のデータが完成しました。

次はWork Placeコレクションに、このデータを登録していきます。

Work Placeの「0 Records」ボタンをクリック。

0 Recordsをクリック
0 Recordsをクリック

Work Placeコレクションの画面で、インポートのアイコンをクリックしてください。

データをインポート

このようにImport Work Places画面が開きますので、先ほど作成したCSVファイルをドラッグ&ドロップするか、SELECT A FILEボタンからファイルを選択して、データをインポートします。

CSVファイルをインポート
CSVファイルをインポート

このようにCSV Column(CSVファイルの項目名)とProperty(コレクションのプロパティ名)が一致していることを確認して、IMPORT DATAボタンをクリックしましょう。

もしPropertyの名前がCSV Columnと対応していない場合は、両者が一致するように変更してください。

項目名とプロパティを対応
項目名とプロパティを対応

インポートが正常に完了すると、このような画面が表示されますので、DONEボタンで閉じましょう。

データのインポートが完了
データのインポートが完了

これでインポート作業ができました!

コレクションのデータがこのように表示されていればOKです。

DONEボタンで閉じましょう。

データがインポートされた
データがインポートされた
文字化けしていたら…

データをインポートした時、このように都道府県名が文字化けしていた場合は、CSVファイルの文字コードがUTF-8になっていない可能性があります。

その時は一旦データを全て削除して、CSVファイルを作り直し、再度登録してみてください。

データを全て削除するには、コレクションの左上にあるチェックボックスをチェックして、左下にある「DELETE 47 RECORDS」をクリックしましょう。

文字化け
文字化け

(5) MultiSelect Dropdownにコレクションを紐づける

いよいよ最後の工程です!

MultiSelect Dropdownコンポーネントに、先ほど作成したコレクションを紐づける作業です。

Homeに追加したMultiSelect Dropdownコンポーネントをクリックし、Left Toolbarに表示されたメニューのItem Listの中からWork Placeを選択してください。

コンポーネントとコレクションを紐づける
コンポーネントとコレクションを紐づける

続いて、以下のように各項目を設定します。

設定
設定
  • Sorting:Num – Low to High(Numの順番に並べる)
  • Item Label:Work Place Location(Work PlaceコレクションのLocationを表示させる)
Item Labelの設定方法

Item Labelは、以下のように「T」ボタンをクリックして表示されるメニューからLocationを選んでください。

Item Label
Item Label

これで作業はすべて完了です!

スポンサーリンク

(6) プレビューで動作確認

最後に、作成したアプリの動作をプレビューで確認しましょう。

Top BarにあるPREVIEWボタンをクリックします。

プレビューボタン
プレビューボタン

プレビューをすると最初はサインアップ画面が表示されます。

メールアドレス、パスワード、名前を入力してサインアップしてください。

※メールアドレス、パスワード、名前は適当で構いませんが、メールアドレスは形式が正しくないとサインアップできませんのでご注意ください。

完成イメージはこちらです。

完成イメージ
完成イメージ

複数の項目にチェックを入れられることが確認できると思います。

また「Search」ボックスではデータを検索することも可能です。

まとめ

今回は「Adaloでできること」と題して、複数選択できるドロップダウンメニューの作り方を解説してきました。

CSVファイルを用意してコレクション(データベース)に登録する方法、そのデータをコンポーネントに紐づける方法などを理解いただけたと思います。

MARKETPLACEには今回ご紹介した以外にも様々な種類のコンポーネントがありますので、ぜひご自身でもいろいろと試してみてください。

今後も引き続きAdaloでできることを始め、関連する記事を作っていきますので、お楽しみに!

アプリ開発に必須のUI/UXデザインを学ぶ
アプリ開発には、ユーザビリティへの理解が重要です。iPhone・Androidアプリのデザインを学ぶなら、自宅で学べるオンラインスクール【TechAcademy】 UI/UXデザインコースがおすすめ。実務に近い環境で、学びながら手を動かして制作。社会に通用するスキルを習得できます。
NoCode
てつごろうをフォローする
てつごろぐ

コメント

タイトルとURLをコピーしました