# デッキスワイパー

*スキルレベル: 中級*

## 開始前に

* [データベース](/ja/database.md)、[画面とコンポーネント](/ja/component-basics.md)、および[アクション](/ja/action-basics/action-basics.md)について知っていること
* [コンポーネントマーケットプレースからコンポーネントを追加する方法](/ja/component-basics/marketplace-components/how-to-add-components-from-the-marketplace.md)を知っていること
* [マジックテキスト](/ja/glossary.md#magic-text)について知っていること
* このコンポーネントは、第三者開発者である[Minimum Studio](https://minimum.studio/)によって作成および管理されています
* この機能を使用するには有料のAdaloプランは必要ありません

## 手順

**1.)** デッキスワイパーを動作させるためには、デッキスワイパーが表示するアイテムのコレクションをデータベースに設定する必要があります。Adaloビルダーの左メニューでデータベースタブ<img src="/files/C1CSOJEwPPWggcc05HQ2" alt="" data-size="line">をクリックし、**+コレクションを追加**<img src="/files/iu3A9PN4nOdVI86m5QbW" alt="" data-size="line">をクリックして、「Posts」などの名前を付けます。

**2.)** 今度は、デッキスワイパーが表示するための画像プロパティが必要です。新しい**Posts**コレクション内で\*\*+プロパティを追加\*\*![](/files/y1pxuxwtIi4fCUmW5xSc)をクリックします。次に**Image**を選択し、「Post Image」などの名前を付けます。

**3.)** 今度は、Usersコレクションに1対多の関係プロパティを追加して、各投稿の作成者を知る必要があります。**+プロパティを追加**![](/files/y1pxuxwtIi4fCUmW5xSc)をクリックし、**Relationship > Users**を選択します。

**4.)** 各投稿には1人の作成者しかいないため、最初のオプションを選択し、右下の**Done**をクリックします。ここでプロパティの名前を\*\*"Creator"**に変更し、またUsersコレクション内の自動作成された**Posts**フィールドを**"Created Posts"\*\*に変更することを忘れないでください。

**5.)** これで、[コンポーネントをインストール](/ja/component-basics/marketplace-components/how-to-add-components-from-the-marketplace.md)して、希望の画面に配置することができます。デッキスワイパーの設定はリストの設定と非常に似ています。デッキスワイパーをクリックし、**これは何のデッキですか？ドロップダウンでPosts**（またはコレクションに名前を付けたもの）を選択します。コレクションにフィルタリングを追加して、特定の投稿のみを表示することもできます。

**6.)** コンポーネントの**Card**セクションのドロップダウンでは、カードの外観や表示内容に関する多くのオプションがあります。画像プロパティが設定されていることを確認しましょう。**Image**ドロップダウンをクリックし、**Database > Current Post > Image**を選択します。

**7.)** 投稿の名前はデフォルトで[マジックテキスト](/ja/component-basics/inserting-dynamic-text.md)として入力されますが、これを変更して好きなマジックテキストに置き換えるか、空白のままにして何も表示しないようにすることもできます。 **8.)** ポストカードを表示してスワイプすることは素晴らしいですが、スワイプしても実際にお気に入りにしたり保存したり、投票したりしないと役に立ちません。Postsコレクションに戻り、Usersコレクションに多対多の**関係**プロパティを追加しましょう。+Add Propertyをクリックして、**Relationship > Users**を選択します。

**9.)** 各ユーザーが複数の投稿を気に入り、各投稿が複数のユーザーに気に入られる可能性があるため、3番目のオプションを選択し、右下の**Done**をクリックします。プロパティ名を\*\*"Favoriting Users"**などに変更し、Usersコレクション内の自動作成されたPostsフィールドを**"Favorited Posts"\*\*に変更するのを忘れないでください。

**10.)** 今度は、ユーザーが実際に投稿をお気に入りに追加しているスワイプアクションを追加しましょう。デッキスワイパーコンポーネントをクリックし、**Actions**セクションのドロップダウンをクリックします。

**11.)** デフォルトでは、右にスワイプすることが投稿を「お気に入り」にすることとラベル付けされています（これは**Right Swipe**セクションのドロップダウンで変更できます）。したがって、**Right Swipe Actions**エリアにアクションを追加します。**+Add Action**ボタンをクリックし、**Update > Logged In User**を選択します。

**12.)** 新しいUpdateアクションの\*\*"Favorited Posts"\*\*プロパティ（ステップ9から）をクリックし、**Add > Current Post**を選択します。これにより、ユーザーがカードを右にスワイプすると、その投稿がお気に入りに追加されます。

**13.)** これがデッキスワイパーの基本機能です！他のオプションを確認するために、コンポーネントの**Card**、**Left Swipe**、**End of Deck**、**Right Swipe**セクションのドロップダウンに戻って、以下を変更できます：

* スワイプラベル
* 色
* カードの角丸
* デッキ内の最後のカードに到達したときに発生するアクション
* フォントの太さと色
* アイコン
* プレースホルダー画像
* 右スワイプ、左スワイプ、カードクリック時のアクション

\*\*1.)\*\* デッキスワイパーを動作させるために、データベースにデッキスワイパーで表示したいアイテムのコレクションを設定する必要があります。Adaloエディターの左メニューでデータベースタブ<img src="/files/C1CSOJEwPPWggcc05HQ2" alt="" data-size="line">をクリックし、\*\*+Add Collection\*\*<img src="/files/iu3A9PN4nOdVI86m5QbW" alt="" data-size="line">をクリックして、「Posts」などの名前を付けます。

![](/files/Z3KElaT9RG82jHrvpx7B)

**2.)** 今度は、デッキスワイパーで表示するための画像プロパティが必要です。新しい**Posts**コレクション内で\*\*+Add Property**をクリックします。次に**Image\*\*を選択し、「Post Image」などの名前を付けます。

![](/files/4KP31lkOqlMmHeG3aN6U)

**3.)** 今度は、各投稿の作成者が誰かを知るために、Usersコレクションに1対多の関係プロパティを追加しましょう。**+Add Property**をクリックし、**Relationship > Users**を選択します。 **4.)** 各投稿には1人の作成者しかいないため、最初のオプションを選択し、右下の**Done**をクリックします。ここでプロパティの名前を\*\*"Creator"**に変更し、Usersコレクション内の自動作成された**Posts**フィールドを**"Created Posts"\*\*に変更することを忘れないでください。

**5.)** これで、[コンポーネントをインストール](/ja/component-basics/marketplace-components/how-to-add-components-from-the-marketplace.md)して、希望する画面に配置することができます。デッキスワイパーのセットアップはリストの設定と非常に似ています。デッキスワイパーをクリックし、**What is this a deck of?ドロップダウンでPosts**（またはコレクションに名前を付けたもの）を選択します。コレクションにフィルタリングを追加して、特定の投稿のみ表示することもできます。

**6.)** コンポーネントの**Card**セクションのドロップダウンでは、カードの外観や表示内容に関するさまざまなオプションがあります。画像プロパティが設定されていることを確認しましょう。**Image**ドロップダウンをクリックし、**Database > Current Post > Image**を選択します。

**7.)** 投稿の名前はデフォルトで[マジックテキスト](/ja/component-basics/inserting-dynamic-text.md)として入力されますが、これを変更して好きなマジックテキストに置き換えるか、空白のままにして何も表示しないようにすることができます。

**13.)** これがデッキスワイパーの基本的な機能です！**Card**、**Left Swipe**、**End of Deck**、**Right Swipe**のセクションのドロップダウンで他のオプションを確認して、以下を変更できます：

* スワイプラベル
* 色
* カードの角丸
* デッキ内の最後のカードに到達したときに発生するアクション
* フォントの太さと色
* アイコン
* プレースホルダ画像
* 右スワイプ、左スワイプ、カードクリック時のアクション

## 例

この解説を作成するために使用したアプリを見たいですか？[こちらをクリックして](https://previewer.adalo.com/0b9562a5-5890-4e47-a528-5ea80cbc6275)、例のアプリを使用またはクローンしてください。アプリをクローンする方法がわからない場合は、[こちら](/ja/settings/copying-vs-cloning-your-app/how-to-clone-an-app.md)で学ぶことができます。

## もっと詳しく知る

* このコンポーネントは[Minimum Studio](https://minimum.studio/)によって作成および管理されています。バグレポートや機能リクエストに関しては、彼らにお問い合わせください。
* デッキスワイパーはクイズを作成するための素晴らしい方法でもあります！左右のスワイプアクションを使用してスコアリングシステムを設定したり、「デッキの最後」アクションを使用してクイズを評価したりすることができます。
* ユーザーが同じカードを再度見るのを防ぎたい場合は、「お気に入り」タイプのセットアップを適用することができます。左スワイプで投稿を「嫌い」にする関係を作成し、カードをフィルタリングして、ログインユーザーが投稿の「嫌いなユーザー」プロパティに含まれていないカードのみを表示します。

## ヘルプ

この記事に関する追加のヘルプが必要な場合は、いつでも[コミュニティフォーラム](https://forum.adalo.com/)で質問してください！投稿にこの記事へのリンクも貼っておくことを忘れないでください！

チュートリアルやヘルプドキュメントのリクエストがありますか？[お知らせください！](https://ideas.adalo.com/tutorial-requests)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.adalo.com/ja/component-basics/marketplace-components/deck-swiper.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
