おすすめ記事

おすすめ記事一覧

Adalo Resource・モーダル/ポップアップウィンドウの作成方法、お気に入りボタンの作成方法、App Barに画像を追加する方法

Adalo - Build Your Own No Code App

みなさんこんにちは。いかがお過ごしでしょうか。4月に入り、新天地で新生活を送られている方も多いのかなと思います。気持ちをリフレッシュして頑張ってくださいね。さてこの記事ではノーコードツールAdaloのAdalo Resourceをもとにチュートリアルセクションの「モーダル/ポップアップウィンドウの作成方法、お気に入りボタンの作成方法、App Barに画像を追加する方法」を日本語で解説します。それでは早速いってみましょう!

モーダル/ポップアップウィンドウの作成方法

ポップアップウィンドウを作ってみませんか?ページリンクとアクションを利用してモーダルを作成します。

モーダル / ポップアップ

1, 新規に画面を作成する際、「Blank Screen」テンプレートを使用する代わりに、「Misc」カテゴリーにスクロールダウンし、「Modal」画面テンプレートを選択する

2, モーダル画面にリンクさせたいコンポーネントにリンクアクションを作成し、遷移先として「モーダル」を選択する

お気に入りボタンの作成方法

アプリの中で ユーザーがアイテムをお気に入りに登録できるような機能 を作りたい場合があります。このチュートリアルでは、以下の内容を説明します。

1) リストにお気に入りのトグルを追加する
2)詳細画面への「お気に入り」トグルの追加
3) ユーザーのお気に入りのリストを表示する
4) 条件付き可視性を使ってお気に入りボタンを使う

データベースの設定

・お気に入りの場所 “のコレクションを作成し、”名前”(Textプロパティ)と “画像”(Imageプロパティ)を追加した後、”お気に入りの場所 “コレクションと、Adaloが自動的に作成する “ユーザー “コレクションの間にリレーションシップを作成します。

・この関係は「多対多」の関係になるので、 複数のユーザーが複数の旅行を支持したり、複数のユーザーが複数の旅行を支持したりすることが可能 になります。

・次に、先ほど追加した「お気に入りの場所」のリレーションシップ・プロパティを「Favorited By」に更新します。これにより、どのユーザーがどの場所をお気に入りにしたかがデータベース上で明確になります。

リストのある項目をお気に入りに登録する

・お気に入りリストの新画面を作ります。

・そして、カスタムリストにドラッグして、好きなようにカスタマイズします。

・作成したリストを「お気に入りの場所」に登録します。

・リストのカスタマイズが完了したら、コンポーネントパネルに移動し、トグルボタンをドラッグします。

・ 左側のパネルの「このトグルは何をするのか」で、「現在のお気に入りの場所 – お気に入りの人 – ログインしているユーザーを含む」に接続するトグルを選択します。これにより、お気に入りのアイテムがログインしているユーザーに接続されます

・”アクティブ “にはFavorite、”非アクティブなアイコン “にはFavorite_Borderと、アイコンをカスタマイズすることができます。

プレビューをして、リスト内のアイテムをお気に入りに登録できるようになっていることを確認してください

詳細画面でのアイテムのお気に入り登録

・詳細画面の新規作成をします。

・画面を好きなようにカスタマイズします。

・画面のカスタマイズが完了したら、ComponentsパネルでApp BarにToggleボタンをドラッグインします。

・ 左側のパネルの「このトグルは何をするのか」で、「現在のお気に入りの場所 – お気に入りの人 – ログインしているユーザーを含む」に接続するトグルを選択します。これにより、お気に入りのアイテムがログインしているユーザーに接続されます

・”アクティブ “にはFavorite、”非アクティブなアイコン “にはFavorite_Borderと、アイコンをカスタマイズすることができます。
 プロからのアドバイス:デフォルトの色がApp Barと同じ場合、「アクティブ」の色をデフォルト以外の色に変更すると、両者が混ざり合うのを防ぐことができます。 

・App Barを選択してShiftキーを押し、さらに「お気に入り」アイコンを選択します。

・左側のパネルで “Make Group “を選択します。

・次に、「スタイルの編集」で「固定」の「上部」を選択します(これにより、App Barが画面の上部に固定されます)。

プレビューして、詳細画面でお気に入り登録ができるようになっていることを確認してください

お気に入りアイテムの絞り込み

・フィルター付きお気に入り画面の新規作成をします。

・コンポーネントパネルから、シンプルなリストを追加します。

・単純リストを「お気に入りの場所」のコレクションにバインドします。

・To Filterを選択し、Logged In User – Favorite Places – Allにフィルタを設定します。

プレビューして、詳細画面でお気に入り登録ができるようになっていることを確認してください

条件付き可視化を利用したお気に入りボタンの作成

・お気に入りボタンを配置する画面を新規に作成します。

・画面にボタンを追加し、それを複製します。

・ボタンを横に並べるか、真上(または真下)に配置します。

・ボタンにスタイルを設定します(ここでは、「お気に入り」と「Favorited」を選択)。

・お気に入りとして表示されるボタンを選択します。

・左側のパネルで、ボタン名の横にある3つの点をクリックします。

・選択して、可視性を以下の3つにいじります。

1, Sometimes Visible – Current Favorite Place – Favorite Places – All
2, Does not contain
3, Logged in user

・「お気に入り」として表示されるボタンを以下の3つに選択してください。

1, Sometimes Visible – Current Favorite Place – Favorite Places – All
2, Contains
3, Logged in user

・お気に入りボタンに、現在のお気に入りの場所を更新するアクションを追加します。

・お気に入りの場所へのアクションの中で、下にスクロールして「ログインしているユーザーを追加」します。

・今度は逆に「お気に入り」ボタンにアクションを追加します。お気に入りボタンにアクションを追加して、現在のお気に入りの場所を更新します。

・お気に入りの場所へのアクション内でスクロールダウンして「ログインしたユーザーを削除」します。

プレビューで、条件付き可視性を使ってFavoriteとFavoritedを表示できるようになったことを確認してください

App Barに画像を追加する方法

会社やアプリのロゴなどの画像をアプリバー(特にホーム画面)に追加したい場合の説明になります。

1, アプリバーで、「タイトル」のテキストが空白になっていることを確認します。
2, 左ツールバーのプラスボタンをクリックして、追加パネルを開きます。
3, 画像をクリックして画面にドラッグします。
4, 左側のパネルで「アップロードされた画像」を選択し、画像の設定を開始します。
5, 画像の選択をクリックします。
6, 画像の背景部分が透明になるように、.png形式の画像ファイルを選択してください。
7, 画像の切り抜きを “Show Full Image (Don’t Crop) “に設定します。
8, 「スタイルの編集」をクリックします。
9, “Fixed Top “を選択します。
10, 画像のサイズをAppバーに収まるように変更し、正しい位置までドラッグします。

まとめ

いかがだったでしょうか。お気に入りボタンの作成方法は本文を読んで理解するのに比較的時間がかかったかと思いますが、それ以外は前回同様にそこまで大変ではなかったのかなと感じています。今後もチュートリアルを特集した記事が続きますので、内容を忘れてしまったという方は過去の記事を何度も見返していただければ幸いです。それではまた別の記事でお会いしましょう。See You Soon!

 

 

Katsu

Katsu

高校まで日本で育ち、大学からアメリカ・ニューヨークへ。マスメディア、ジャーナリズム、インターネットメディア戦略を専門に修学。コロナ禍でオンライン主体になりつつある世の中で、記事が何かの手助けになれば幸いです。







関連記事

  1. SaaSロゴ

    Panther(Jungleworks)

  2. 記事作成

    Bubble・ユーザータイプ・OAuth(オーオース):X を用いたログイン

  3. SaaSロゴ

    Husky(Jungleworks)

  4. 記事作成

    Bubble・APIの使用例

  5. 記事作成

    Bubbleの条件付き処理とスタイルの使用を解説!!

  6. SaaSロゴ

    Yappli

  7. 記事作成

    Bubbleアプリの公開・非公開の仕組みに迫る!!

  8. Adalo Resource・マーケットプレイスペイメント前編(Stripe)(スクリーンとコンポー…

  9. 記事作成

    Bubble・データベースクエリに関する説明、タイプとタイプを結びつける

人気記事

  1. topimage
  2. 記事画像
  3. 特集記事
  4. top_image

おすすめ記事一覧

  1. Productivity
  2. Bubble
  3. タスク
  4. 記事画像
  5. 記事画像
PAGE TOP