プログラミングなし！簡単メニューアプリ作成（⑤スライドイメージ編）｜初心者のアプリ開発｜Adalo

こんにちは！ゆかゆかです。

Adaloを使って作成中のメニューアプリにスライドイメージを設定してみます！

画面の上部分に画像を表示してみます。

ポイント！ 

• Image Slider コンポーネントで簡単に設定可能
• 表示する画像はデータコレクションに保存
• 画像のイメージは画面サイズによって拡大・縮小されます

画面設定

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

1. ＋ボタンを選択
2. ADD COMPONENT を選択
3. EXPLORE MARKETPLACE を選択

1. Image Slider をインストール

1. Installed > Image Slider を好きな位置に配置

画像の表示にはデータコレクションがいるようだったので、用意します

データコレクションの用意

画像を保存するためのデータコレクションを用意していきます。

1. Database Collections > + ADD COLLECTION を選択

こんな感じでデータコレクションを用意していました。

用意したデータコレクションに画像を保存しました。

イメージスライダーの詳細設定

それでは細かく設定して行きます。

1. What images shoud be displayed? でデータコンポーネント名を選択
2. 必要に応じてフィルターや並び順などを設定して行きます

Slide Indicator は画像下の点々です。

表示・非表示を設定できます。

Arrowsは画像の左右の矢印です。

こちらも、表示・非表示を設定できます。

クリックした時のアクションも選択できるようですね。

Autoplayを選択すると自動的に画像が切り替わります。

プレビュー

設定ができたので動かしてみます！

おぉー！良い感じにスライドで画像が出てきました。

問題発生

しかし、iPadでプレビューしてみると・・・

画像の上下が切れている・・・

どうも、コンポーネントのタテ幅が固定のようですね・・・

良い方法があれば、教えていただきたいです。

まとめ

今日はスライドするイメージを設定してみました。

データコレクションの用意は必要でしたが、設定自体は簡単でした。

ただ、用意した画像が切れて表示されてしまうので、

用意する画像を工夫するなど対策が必要でした。

メニューアプリの作り方は回数を分けてご紹介しているので、

よければご覧ください。

yuka-edu.hatenablog.com

♡･･*･･♡･･*･･♡･･*･･♡･･*･･♡･･*

▼無料でも意外と使える Nocode開発ツール Adalo

www.adalo.com