ノーコード開発プラットホームAdaloでドロップダウンメニューを作る時の注意点

サバ漢(@sabakan_umashi)です🐟

先日のことですが、ブックマークを自分の好きなように管理したい方、お洒落な自分なりのブックマークリストを作りたい方にオススメのノーコードアプリを作りました📱

以下のURLから見てみて下さい😊

previewer.adalo.com

アプリの内容については以下の記事で解説しています!

【ブックマークを好きにお洒落に管理】プログラミング未経験者がノーコードAdaloでアプリ開発 - サバ漢の遊び場兼踏み台


Lin庫ではドロップダウンメニューを活用して自分の好きなカテゴリーだけ一覧表示できますが、そのドロップダウンメニューを作る際に実は結構苦戦してました😓


原因はあることに気付かなかっただけなのですが、「他の人も意外と気付きにくいかも!」とふと思いましたので、この記事ではAdaloでドロップダウンメニューを作る時の注意点を説明しようと思います。

「これからAdaloでアプリを作ってみる!」「自分もドロップダウンメニューを作ろうとしてるけどうまく機能しない・・・」という方の参考になればと思います。

【見落としがち!?】Adaloでドロップダウンメニューを作る時の注意点

f:id:nukoshogun:20210222105941j:plain

下の画像のように、Lin庫ではドロップダウンメニューを活用してHome画面に表示するブックマークリストを特定のカテゴリーのみに絞ることができます。

f:id:nukoshogun:20210222111004p:plain
上の赤枠がドロップダウンメニューで、下の赤枠がブックマークリストです。

極めてシンプルな機能なのですが、ドロップダウンメニューで苦戦したのはあることに気付かなかったからです。そのあることというのが、Adaloの「Cumstom Filter」でした。


Adaloで使えるパーツ(Components)の中には「Filter設定」をできるものがあります。その中に「Custom Filter」もあります。

f:id:nukoshogun:20210222112338p:plain
ドロップダウンメニューやリストなど、表示に関するComponentsに多いようです。

ドロップダウンメニューに苦戦したのは、全然大した理由でもなかったのですが、Custom Filterの設定をリスト側でしていなかったからだったのです(;'∀')

f:id:nukoshogun:20210222114259p:plain
ドロップダウンメニューだけでなく、リスト側でも設定しないといけなかった。。。


「Custom Filterはドロップダウンメニューだけ設定すれば良い」となぜか勘違いをしていましたが、実際の表示に関わるリストでも設定が必要だったのですね(;'∀')

ちなみにドロップダウンメニュー側でもリスト側でも、「カテゴリーは現在選択されているカテゴリーのみ表示する」というCustom Filterの設定をしています。


f:id:nukoshogun:20210222114259p:plain

プログラミング未経験者がAdaloでアプリを作る時のポイント解説

以上が、ドロップダウンメニューを作る際の注意点です。意外と気付かない人が居るかもしれないので解説しました。


実はこのブログでは、他にもAdaloでアプリを作る時のポイントを解説した記事を載せていますので参考にしてみてください。


【Adaloの使い方_データベース編】ノーコードアプリを事例に簡単解説 - サバ漢の遊び場兼踏み台


【Adaloの使い方_構成編1】ノーコードで開発したニュースアプリの構成を紹介 - サバ漢の遊び場兼踏み台


【Adaloの使い方_構成編2】ノーコードで開発したニュースアプリの構成を紹介 - サバ漢の遊び場兼踏み台


プログラミングの知識がゼロでもアプリを楽しく作れるノーコード、是非暇つぶしのお試しにいかがでしょう?(*^^)v

下のリンク先の公式サイトからSign Up(新規登録)することで、あなたもすぐにアプリ開発が出来ます。

www.adalo.com

自分の好きなアプリを作るのではなく、まずは特定のテンプレートを選んで自分好みのデザインにしてみることから始めてみるのも良いかもしれません🤔


【サバ漢が作った、ブックマークを自分の好きなようにお洒落に管理するアプリ】
previewer.adalo.com


【サバ漢が作った、好きなニュースだけ持ち歩くアプリ】
previewer.adalo.com


【サバ漢のTwitter】
こちらからフォロー⇒サバ漢@ゲーム諸々ごった煮 (@sabakan_umashi) | Twitter