【Adaloでできること】カルーセル(画像のスライダー)の作り方

Adaloでカルーセルの作り方NoCode

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

これまで当ブログでは「Adaloでできること」と題して以下のようにシンプルなアプリの作り方を解説してきました。

今回は、カルーセル(画像のスライダー)の作り方を解説します。

プラグインを使えば10分もかからずに完成するので、ぜひこの記事を読んで試してみてください!

てつごろう
てつごろう

Adaloのプラグインを使えばいろいろな機能が簡単に実装できるんだよ。


 筆者について

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

てつごろう|@Te256g


スポンサーリンク

【Adaloでできること】カルーセル(画像のスライダー)の作り方

今回はAdaloでカルーセル(画像のスライダー)の作り方を解説していきます。

また、画像をクリックしたら、モーダル(画面の上に重なって表示)ウインドウを表示して拡大できるような仕組みにもします。

完成のアプリはこちらからご覧ください。

ここからの作業の流れは以下の通りです。

作業の流れ
  1. コンポーネントImage Sliderをインストールする
  2. コンポーネントを追加する
  3. コレクション(データベース)を作る
  4. コンポーネントとコレクションをリンクさせる
  5. カルーセルを拡大表示するページを作る
    5-1. モーダルウインドウを追加する
    5-2. モーダルにイメージコンポーネントを追加する
    5-3. Homeのカルーセルとモーダルをリンクさせる
    5-4. モーダルのイメージと、カルーセルのイメージをリンクさせる
    5-5. 拡大画像をタップしたらモーダルを閉じる仕組みを作る
  6. プレビューで動作を確認する

作業の流れ
作業の流れ

1. コンポーネントImage Sliderをインストールする

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

※この記事に掲載している画像は、Native Mobile Appのものです。

まずはカルーセルを実装するための外部コンポーネントを追加しましょう。

画面左にあるLeft ToolbarのADD COMPONENTから、「EXPLORE MARKETPLACE」ボタンをクリックしてMarketplaceを開きます。

Market Place
Market Place

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

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

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

2. コンポーネントを追加してスタイルを変更する

カルーセルを追加して、見た目を整えていきましょう。

2-1. カルーセルのコンポーネントを追加する

ADD COMPONENTから、Home画面にImage Sliderを追加しましょう。

2-2. カルーセルのスタイルを変更する

カルーセルに矢印を表示したり、ドットの色などを変更することができます。

2-2-1. カルーセルに矢印を表示する

カルーセルに矢印やドットを表示する方法を解説します。

Arrowsの右のボタンをクリックしてONにすると、画像の左右に矢印が表示されます。

矢印をタップすると画像を切り替えることができるようになります。

その他の設定は以下の通りです。

  • Left Icon:矢印のアイコンを変更
  • Right Icon:矢印のアイコンを変更
  • Icon Color:アイコンの色を変更
  • Icon Size:アイコンの大きさを変更
  • Enable Background:アイコンの背景に色を付ける
矢印を追加

2-2-2. ドットのスタイルを変更する

ドット(画像の下にある点)についても、色や位置を変更できます。

  • Active Color:アクティブ(写真が表示されている)状態でのの色を変更
  • Inactive Color:非アクティブ(写真が表示されていない)状態での色を変更
  • Position:ドットの表示位置を変更(写真の内側か外側)
ドットのスタイルを変更
ドットのスタイルを変更

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

写真を保存するためのコレクション(データベース)を作る手順です。

Database→ADD COLLECTIONの順にクリックしてください。

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

Collection Nameを入力(例:Images)してADDボタンをクリック。

コレクション名を入力して追加

これで写真を保存するためのコレクションができました。

続いて写真を登録するためのプロパティを追加しましょう。

ADD PROPERTYからImageを選びます。

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

「Photo」などの名前をつけたらSAVEで保存します。

名前をつけて保存
名前をつけて保存

続いてImagesコレクションに、レコード(写真と名前)を追加していきます。

「0 Records」と書かれているボタンをクリックして、コレクションを開きましょう。

レコードを登録
レコードを登録

「ADD IMAGE」ボタンをクリックします。

レコードを追加
レコードを追加

写真の名前を入力し、「Choose Image」から写真をアップロードしてSAVEをクリック。

イメージを追加
イメージを追加

同様に2枚以上の写真をレコードとして追加すれば、コレクションの完成です。

DONEで画面を閉じてください。

コレクションが完成
コレクションが完成
スポンサーリンク

4. コンポーネントとコレクションをリンクさせる

コレクションに登録した写真を、カルーセルに表示させる手順を解説します。

そのためには先ほど作ったコレクションを、Image Sliderコンポーネントにリンクさせる必要があります。

下図の通り、Image Sliderコンポーネントをクリックして選択したら、Data Sourceの中からImagesを選んでください。

コンポーネントとコレクションがつながりました。

これで、カルーセルにコレクションの中の写真が表示されます。

コンポーネントとコレクションをリンク
コンポーネントとコレクションをリンク

5. カルーセルを拡大表示するページを作る

モーダル動作の一部不具合について

warafuni様からのご指摘で、モーダルの動作の一部に不具合があることが分かりました。
モーダルで画像を拡大した後、前のページに戻ると、カルーセルの画像が1枚目に戻ってしまいます。さらに、カルーセルの下のドットの位置と合わないという現象が確認されています。
下記の手順を実施される場合は、その点をご了承いただいた上で実装してくださいますよう、よろしくお願いいたします。

カルーセルの写真をクリック(タップ)したら拡大表示する仕組みを作りましょう。

  • モーダルウインドウを追加する
  • モーダルにイメージコンポーネントを追加する
  • Homeのカルーセルとモーダルをリンクさせる
  • モーダルのイメージと、カルーセルのイメージをリンクさせる
  • 拡大画像をタップしたらモーダルを閉じる仕組みを作る

5-1. モーダルウインドウを追加する

まずはカルーセルをクリック(タップ)した時に、モーダル(ページを覆うように新しいページを開く仕組み)を表示させる手順です。

ADD SCREENタブからMiscのメニューを開き「Modal」をクリックしてモーダルウインドウを追加します。

ページ名はここでは「Big Image」とします。

モーダルを追加
モーダルを追加

5-2. モーダルにイメージコンポーネントを追加する

続いてモーダルにImageのコンポーネントを追加します。

モーダルにImageを追加
モーダルにImageを追加

5-3. Homeのカルーセルとモーダルをリンクさせる

Home画面のカルーセルをタップしたらモーダルを表示させる手順です。

カルーセルを選択した状態でADD ACTION→Link→Big Image(モーダル)の順にクリックしてください。

カルーセルとモーダルをリンク
カルーセルとモーダルをリンク

5-4. モーダルのイメージと、カルーセルのイメージをリンクさせる

モーダルのイメージと、カルーセルのイメージをリンクさせましょう。

モーダルウインドウに追加したImageコンポーネントを選択した状態で、Image SourceのSlectからDatabase→Current Image→Photoの順に選択してください。

モーダルにImageをリンク
モーダルにImageをリンク
写真の名前を表示させるには

参考に、写真の名前を表示させる方法も解説しておきます。

ADD COMPONENTからモーダルウインドウにTextを追加し、「T」ボタンからCurrent Image→Nameの順にクリックしてください。

写真の名前を表示させる
写真の名前を表示させる

Textコンポーネントを追加した時にデフォルトで入っている文字「Enter Text」は不要なので削除します。

不要な文字を削除
不要な文字を削除

モーダルに表示した時に、文字が読めるようにするため、スタイルを以下のように変更しておきましょう。

参考までに、僕が設定しているスタイルをご紹介します。

  • Size:24
  • Color:#FFFFFF(白)
  • Alignment:中央揃え
  • Auto-width:幅を自動調整
テキストのスタイルを変更
テキストのスタイルを変更

5-5. 拡大画像をタップしたらモーダルを閉じる仕組みを作る

モーダルを表示した後、画像をタップしたらモーダルを閉じる処理を入れておきましょう。

Imageコンポーネントを選択し、ADD ACTION→Link→Backの順にクリックしてください。

画像をタップしたら前のページに戻す
画像をタップしたら前のページに戻す

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

6. プレビューで動作を確認する

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

Top BarにあるPREVIEWボタンをクリックしてプレビューしてみてください。

初めてプレビューする時はサインアップが必要です

プレビューをすると最初はサインアップ画面が表示されます。メールアドレス、パスワード、名前を入力してサインアップしてください。
※メールアドレス、パスワード、名前は適当で構いませんが、メールアドレスは形式が正しくないとサインアップできませんのでご注意ください。

まとめ

今回は「Adaloでできること」と題して、カルーセル(スライダー)の作り方を解説しました。

過去の記事では他にもいろいろな簡易機能の作り方を解説していますので、ぜひ合わせてご覧いただければ嬉しいです。

今後もAdaloをはじめとするNoCodeツールの関連記事を作っていきますので、ぜひご期待ください!

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

コメント

  1. warafuni より:

    いつもわかりやすいAdaloの解説記事、ありがとうございます。

    先日リリースした自分のAndroidアプリに、画像スライダーの箇所があったので、
    モーダル表示機能を試しに追加してみたのですが、モーダル表示後、
    元の画面に戻ると、スライダーの表示画像が1番目に戻ってしまう
    (ドットは、表示させた画像の箇所のままな)点が、ユーザー的に
    わかりにくい・操作しにくい感じなのが残念&実装は保留にしました。

    ↓公式Forumでも指摘されていて、要望箇所へのリンクがあったので、
    改善要望を出してみました。

    https://forum.adalo.com/t/problem-with-modal-resets-image-slider/3360

    • warafuni様

      初めまして。運営者のてつごろうです。

      同様の事象を確認しました。
      私の確認不足で、読者の方に不利益を与えてしまい兼ねない内容でした。

      ご指摘いただき、ありがとうございます。
      当該箇所には訂正を入れておきます。

      改善要望の件についても、貴重な情報を共有していただき、ありがとうございました。
      私も今後の動きに注視します。

      今後は、内容に不備がないかをより慎重に確認しながら記事配信を心掛けてまいります。
      今後とも、よろしくお願いいたします。

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