こんにちは！
てつごろう（@Te256g）です。
これまで当ブログでは「Adaloでできること」と題して以下のようにシンプルなアプリの作り方を解説してきました。
今回は、カルーセル（画像のスライダー）の作り方を解説します。
プラグインを使えば10分もかからずに完成するので、ぜひこの記事を読んで試してみてください！
Adaloのプラグインを使えばいろいろな機能が簡単に実装できるんだよ。
筆者について
てつごろう｜@Te256g
【Adaloでできること】カルーセル（画像のスライダー）の作り方
今回はAdaloでカルーセル（画像のスライダー）の作り方を解説していきます。
また、画像をクリックしたら、モーダル（画面の上に重なって表示）ウインドウを表示して拡大できるような仕組みにもします。
完成のアプリはこちらからご覧ください。
ここからの作業の流れは以下の通りです。
- コンポーネントImage Sliderをインストールする
- コンポーネントを追加する
- コレクション（データベース）を作る
- コンポーネントとコレクションをリンクさせる
- カルーセルを拡大表示するページを作る
5-1. モーダルウインドウを追加する
5-2. モーダルにイメージコンポーネントを追加する
5-3. Homeのカルーセルとモーダルをリンクさせる
5-4. モーダルのイメージと、カルーセルのイメージをリンクさせる
5-5. 拡大画像をタップしたらモーダルを閉じる仕組みを作る - プレビューで動作を確認する
1. コンポーネントImage Sliderをインストールする
※Adaloでアプリ開発の始め方や操作方法がわからない方は「NoCodeツールAdaloでアプリを作る方法【基本操作を習得できます】」の2章を参考にしてください。
※この記事に掲載している画像は、Native Mobile Appのものです。
まずはカルーセルを実装するための外部コンポーネントを追加しましょう。
画面左にあるLeft ToolbarのADD COMPONENTから、「EXPLORE MARKETPLACE」ボタンをクリックしてMarketplaceを開きます。
「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を選びます。
「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のコンポーネントを追加します。
5-3. Homeのカルーセルとモーダルをリンクさせる
Home画面のカルーセルをタップしたらモーダルを表示させる手順です。
カルーセルを選択した状態でADD ACTION→Link→Big Image（モーダル）の順にクリックしてください。
5-4. モーダルのイメージと、カルーセルのイメージをリンクさせる
モーダルのイメージと、カルーセルのイメージをリンクさせましょう。
モーダルウインドウに追加したImageコンポーネントを選択した状態で、Image SourceのSlectからDatabase→Current Image→Photoの順に選択してください。
参考に、写真の名前を表示させる方法も解説しておきます。
ADD COMPONENTからモーダルウインドウにTextを追加し、「T」ボタンからCurrent Image→Nameの順にクリックしてください。
Textコンポーネントを追加した時にデフォルトで入っている文字「Enter Text」は不要なので削除します。
モーダルに表示した時に、文字が読めるようにするため、スタイルを以下のように変更しておきましょう。
参考までに、僕が設定しているスタイルをご紹介します。
- Size：24
- Color：#FFFFFF（白）
- Alignment：中央揃え
- Auto-width：幅を自動調整
5-5. 拡大画像をタップしたらモーダルを閉じる仕組みを作る
モーダルを表示した後、画像をタップしたらモーダルを閉じる処理を入れておきましょう。
Imageコンポーネントを選択し、ADD ACTION→Link→Backの順にクリックしてください。
これで作業はすべて完了です！
データベースの概念でつまづいてしまう方は、アプリ開発を学ぶという方法もあり
プログラムの仕組みやデータベースの操作、概念につまづいてしまう方もいるかもしれません。
NoCode開発の説明をしておきながらなんですが、そういった場合はアプリ開発を学ぶのもいいと思います。
ただ、正直なところプログラミングスクールは高額です。いきなり講座に申し込むのはハードルが高いので、例えばTechAcademyの無料体験などで試してみるのもありですね。
今やIT人材は引く手数多な時代です。学んでおいて損はないので、気になった方は本講座もおすすめします。
≫ UI/UXデザインコース
≫ Webアプリケーションコース
≫ iPhoneアプリコース
≫ Androidアプリコース
≫ TechAcademyの無料体験
6. プレビューで動作を確認する
最後に、作成したアプリの動作をプレビューで確認しましょう。
Top BarにあるPREVIEWボタンをクリックしてプレビューしてみてください。
プレビューをすると最初はサインアップ画面が表示されます。メールアドレス、パスワード、名前を入力してサインアップしてください。
※メールアドレス、パスワード、名前は適当で構いませんが、メールアドレスは形式が正しくないとサインアップできませんのでご注意ください。
まとめ
今回は「Adaloでできること」と題して、カルーセル（スライダー）の作り方を解説しました。
過去の記事では他にもいろいろな簡易機能の作り方を解説していますので、ぜひ合わせてご覧いただければ嬉しいです。
今後もAdaloをはじめとするNoCodeツールの関連記事を作っていきますので、ぜひご期待ください！
NoCodeを学ぶ方法
2021年8月26日最新情報！！
動画のオンライン学習サイトで取り扱われるようになっていました！（2021年8月時点）
「世界最大級のオンライン学習プラットフォーム」と呼ばれるUdemy
は、動画で学べるのでおすすめ。
BubbleやAdalo、Glide、AppSheet、Webflowなど、当ブログでもご紹介しているNoCodeプラットフォームも動画講座が用意されています。
一部、無料の講座も公開されているので（2021年8月26日時点）、気になる方はとりあえず登録してみては？
もちろん、日本語の講座はたくさん公開されています。
「Glide」「Adalo」「Bubble」を学べる日本語の専門書もあります。
日本語でまとまっている参考サイトや書籍はまだまだ少ないので、このような本を購入して学ぶのが効率的ですね。
NoCodeの基礎から、NoCodeツールの中でも特に人気のある3つのプラットフォームの使い方まで網羅的に学習できます。
コメント
いつもわかりやすいAdaloの解説記事、ありがとうございます。
先日リリースした自分のAndroidアプリに、画像スライダーの箇所があったので、
モーダル表示機能を試しに追加してみたのですが、モーダル表示後、
元の画面に戻ると、スライダーの表示画像が1番目に戻ってしまう
（ドットは、表示させた画像の箇所のままな）点が、ユーザー的に
わかりにくい・操作しにくい感じなのが残念＆実装は保留にしました。
↓公式Forumでも指摘されていて、要望箇所へのリンクがあったので、
改善要望を出してみました。
https://forum.adalo.com/t/problem-with-modal-resets-image-slider/3360
warafuni様
初めまして。運営者のてつごろうです。
同様の事象を確認しました。
私の確認不足で、読者の方に不利益を与えてしまい兼ねない内容でした。
ご指摘いただき、ありがとうございます。
当該箇所には訂正を入れておきます。
改善要望の件についても、貴重な情報を共有していただき、ありがとうございました。
私も今後の動きに注視します。
今後は、内容に不備がないかをより慎重に確認しながら記事配信を心掛けてまいります。
今後とも、よろしくお願いいたします。