おすすめ記事

おすすめ記事一覧

Adalo Resource・決済機能付きショッピングカートの設定方法、ユーザーの公開プロフィール画面の設定方法

Adalo - Build Your Own No Code App

みなさんこんにちは。いかがお過ごしでしょうか。4月に入り、学校や職場が変わり、新天地での新たな生活を送られている方も多いかと思います。新型コロナの影響はまだまだ長引きそうですが、ぜひ気持ちをリフレッシュして頑張っていきましょう。さて、この記事では前回に引き続いてノーコードツールAdaloのAdalo Resourceよりチュートリアルセクション内の「決済機能付きショッピングカートの設定方法、ユーザーの公開プロフィール画面の設定方法」を日本語で解説します。後半部分は説明が長めになりますが、ぜひ一気に読了していただければと存じます。それではいってみましょう!

決済機能付きショッピングカートの設定方法

ユーザーの公開プロフィール画面の設定方法

このチュートリアルでは、 ユーザーのプロフィールページへのリンクを設定する方法 について説明します。以下の例では、コメントの一覧やコメントの詳細画面からリンクする方法を説明します。

多くのアプリでは、ユーザーが他のユーザーのプロフィールを見ることができる画面があります。 多くの場合、ユーザーのリストからこの画面に移動したり、コメントを見て作者の名前をクリックしたりと、さまざまな方法で移動することができます。

これが機能するためには、プロフィール画面への各リンクが「現在のユーザー」に関するデータを送信する必要があります。 しかし、コメントの投稿者のように、たった一人のユーザーからのリンクの場合はどうなるのでしょうか?

以下のチュートリアルでは、ユーザーがフォーラムのトピックを選択し、特定のトピックに対するコメントのリストを表示し、個々のコメントの詳細を表示するアプリを説明します。 コメントの一覧画面とコメントの詳細画面には、コメントの作成者が表示され、クリックするとプロフィール画面にリンクします。

1, コメントのリストを設定し、リストをフィルタリングする

1, コンポーネントの追加ボタンを選択します。
2, リスト “ドロップダウンを選択します。
3, 「カスタムリスト」を選択します。
4, コンポーネントを画面上に配置します。
5, カスタムリストを選択した状態で、コメントのリストであることを指定します。
6, コメントのリストを選択した状態で、ADD ANOTHER FILTERを選択します。
7, カスタムフィルタの下にあるSelect Columnを選択し、Current Comment > Forum > Nameに設定します。
8, is equal to のデフォルト値のままにしておきます。
9, フィルタの最後の値、Emptyと書かれているところで、ドロップダウン矢印を選択し、Current Forum > Nameに設定します。

2, コメント内容を設定する

1, 先ほど設定したコメントリストを選択します。
2, 左のツールバーで「コンポーネント」セクションを展開します。
3, 現在「タイトル」として設定されているテキストフィールドを選択します。
4, 左ツールバーには、「テキスト」が「タイトル」に2回設定されていることが表示されます。一番上のものにマウスを合わせて、鉛筆/編集アイコンを選択します。
5, 空の名前欄を選択し、「Comment Content」に名前を変更します。
6, Doneを選択します。
7, タイトルと書かれた下のテキストフィールドを選択します。
8, 「タイトル」というテキストを削除します。
9, Magic Textボタンを選択します。
10, 現在のコメント>コンテンツと設定します。

3, ユーザーの名前を「ユーザー」のリストとして設定する

1, 「コメント」リストを選択します。
2, 左のツールバーで「コンポーネント」セクションを展開します。
3, 現在「サブタイトル」として設定されているテキストフィールドを選択します。
4, テキストフィールドをグループに変えます。
* 新しい画面を開くコンポーネントにアクションを起こさせます。
– MAC OSでは、画面上のコンポーネントを選択し、[CMD] + [G]を押すことで実行できます。
– Windowsの場合は、画面上のコンポーネントを選択して[CMD] + [G]を押すことで行うことができます。[CTRL] + [G]を押します。
5, グループを選択した状態で、オーバーフローメニューを選択します。
6, [リストの作成]を選択します。
7, 左のツールバーに「リスト」が表示され、「グループ番号」というタイトルが表示されます。グループ番号は、設定したグループの数によって異なります)。マウスでその上にカーソルを置き、鉛筆/編集アイコンを選択します。
8, 「名前」欄を選択し、「ユーザーの一覧」に名前を変更します。
9, 「完了」を選択します。
10, 左のツールバーに「What is this a list of? と表示されるので、ドロップダウンを選択します。
11, 「ユーザー」を選択します。

4, ユーザーリストのフィルタリングする

1, List of users Listを選択します。
2, ADD ANOTHER FILTER」を選択します。
3, 「カスタムフィルター」で「Select Column」を選択し、「Email」に設定する。
4, デフォルトの「is equal to」のままにしておきます。
5, フィルターの最後の値、Emptyと書かれているところで、ドロップダウン矢印を選択し、Current Comment > User > Emailに設定します。

5, ユーザープロフィール閲覧ページへのリンクを設定する

1, 「ユーザーのリスト」を選択した状態で、左ツールバーの「リスト」セクションを展開します。
2, 「クリックアクション」セクションまでスクロールダウンし、「+ ADD ACTION」を選択します。
3, 「リンク」にマウスを合わせると、リンク先のページが展開されます。
4, Usernameにリンクさせたいページを選択します。この例では、「View User Profile(ユーザープロフィールを見る)」というページにリンクしたいと思います。
5, 「Done」を選択します。

6, ユーザー名の表示テキストを設定する

1, ユーザーのリストが選択されている状態で、左のツールバーで「コンポーネント」セクションを展開します。
2, 現在「字幕」として設定されているテキストフィールドを選択します。
3, 左ツールバーには、「テキスト」が「字幕」に2回設定されていることが表示されます。一番上のものにマウスを合わせて、鉛筆/編集アイコンを選択してください。
4, 名前欄を選択し、Full Nameに名前を変更します。
5, Doneを選択します。
6, Subtitleと書かれた下のテキストフィールドを選択し
7, Subtitleというテキストを削除します。
8, Magic Textボタンを選択します。
9, 現在のコメント>ユーザー>フルネームと設定します。

7, コメント詳細ページへのリンクを設定する

このステップでは、ユーザーのコメントの詳細を表示するページを設定する方法を説明します。 コメントの詳細ページを設ける場合は、8の手順の前にこの手順が必要です。コメントの詳細ページを設けない場合は、ステップ13に進んでください。 

1, Comments “リストを選択します。
2, 左のツールバーで「コンポーネント」セクションを展開します。
3, コメントコンテンツとして設定されているテキストフィールドを選択します。
4, 「+ ADD ACTION」を選択します。
5, Linkにマウスを合わせると、リンク先のページが展開されます。
6, コメントのコンテンツにリンクさせたいページを選択します。今回の例では、「Comment Details」というページにリンクさせたいと思います。
7, Doneを選択します。

8, コメントの詳細ページで、コメント内容や作成日を設定する

このセクションでは、 コメントのリンクデータを使用するコメント詳細ページのテキストフィールドを設定する方法 を説明します。すでに画面に表示されているフィールドは、フォントサイズと色を変更した標準的なテキストフィールドです。

1, コンポーネントの追加ボタンを選択します。
2, 「テキスト」を選択します。
3, 画面上にテキストを配置します。
4, 左側のツールバーで、「テキストを入力」と書かれた下のグレーのボックスにカーソルを置きます。
5, テキストを削除します。
6, 「Magic Text」ボタンを選択します。
7, 「現在のコメント」の上にマウスを置きます。
8, Created Date(作成日)を選択します。
9, コンポーネントの追加ボタンを選択します。
10, テキストを選択します。
11, 画面上にテキストを配置します。
12, 「テキストを入力してください」と表示されている下のグレーのボックスにカーソルを置きます。
13, テキストを削除します。
14, Magic Text “ボタンを選択します。
15, 現在のコメントの上にマウスを置きます。
16, 「コンテンツ」を選択します。

9, 著者をユーザーのリストとして設定する

1, 左のツールバーで「コンポーネントの追加」ボタンを選択します。
2, 「テキスト」を選択します。
3, 画面上にテキストを配置します。
4, テキストフィールドをグループ化します。
* 新しい画面を開くコンポーネントのアクションを設定します。
– MAC OSでは、画面上のコンポーネントを選択し、[CMD] + [G]を押すことで実行できます。CMD] + [G] の操作で可能です。
– Windowsでは、画面上のコンポーネントを選択して
押すことで行うことができます。[CTRL] + [G]を押します。
5, グループを選択した状態で、オーバーフローメニューを選択します。
6, 「リストの作成」を選択します。
7, 左のツールバーに「これは何のリストですか」と表示されるので、ドロップダウンを選択します。
8, Usersを選択します。

10, ユーザーのリストをフィルタリングする

1, 手順9で作成したばかりのユーザーのリストを選択します。
2, 「ADD ANOTHER FILTER」を選択します。
3, 「カスタムフィルタ」で「列を選択」を選択し、「メール」に設定します。
4, デフォルトの「is equal to」のままにしておきます。
5, フィルターの最後の値、Emptyと書かれているところで、ドロップダウン矢印を選択し、Current Comment > User > Emailと設定します。

11, 作者のマジックテキストを設定する

1, 手順9で作成したユーザーのリストを選択します。
2, 左のツールバーで「コンポーネント」セクションを展開します。
3, テキストコンポーネントを選択します。
4, 「テキスト」の下にある「テキストを入力」と書かれた灰色のボックスにカーソルを置きます。
5, テキストを削除します。
6, 「Magic Text」ボタンを選択します。
7, 「現在のコメント」にマウスを合わせます。
8, Userにマウスを置きます。
9, Full Name を選択します。

12, 著者を「ユーザープロフィールの表示」ページにリンクさせる

1, ユーザーのリストを選択します。
2, コンポーネントセクションまでスクロールダウンし、展開します。
3, テキストコンポーネントを選択します。
4, 「クリックアクション」セクションまでスクロールダウンし、「+ ADD ACTION」を選択します。
5, Linkにマウスカーソルを合わせると、リンク先のページが展開されます。
6, Usernameのリンク先にしたいページを選択します。この例では、「View User Profile」というページにリンクしたいと思います。
7, 「Done」を選択します。

13, 「ユーザープロファイルの表示」ページを設定する

1, アプリバーで画面のタイトルを変更する
・アプリバーを選択します。
・左側のツールバーで、「タイトル」セクションを展開します。
・グレーのテキストフィールドを選択し、テキストを削除します。
・「テキスト」の下にある「テキストを入力」と書かれたグレーのボックスにカーソルを置きます。
・テキストを削除します。
・Magic Text ボタンを選択します。
・Current User(現在のユーザー)の上にマウスを置きます。
・Full Name(フルネーム)を選択します。

2, User’s pictureを追加する
・コンポーネントの追加ボタンを選択します。
・Imageを選択します。
・Imageに画像を追加します。
・左ツールバーの「スタイルの編集」を選択します。
・「サイズ」を変更し、幅と高さが同じになるようにします。
・「Rounding」を105に設定します。
・左ツールバーの「画像ソース」の下にあるドロップダウンを選択します。

3, ユーザーの情報を画面上に追加する
・左のツールバーで「Add component」ボタンを選択します。
・「テキスト」を選択します。
・画面上にテキストを配置します。
・「テキスト」の下にある「テキストを入力」と書かれたグレーのボックスにカーソルを置きます。
・テキストを削除します。
・「Magic Text」ボタンを選択します。
・Current User にマウスを合わせます。
・Infoを選択します。

これで、 異なる画面から2つのリンクで「ユーザープロフィールの表示」画面に移動できる ようになりました。「フォーラム」や「コメント詳細」画面のユーザーリストを使って、「現在のユーザー」のデータを「ユーザープロフィールを見る」画面にリンクしました。これにより、 「ユーザープロフィールを見る」画面で、同じデータのマジックテキストと画像を使用すること が可能になりました。

まとめ

いかがだったでしょうか。後半部分は説明が長くなってしまったので、読むのに時間がかかったかもしれません。ぜひ何度か読んでいただいて理解を深めて欲しいと思います。それではまた別の記事でお会いしましょう。See You Soon!

 

Katsu

Katsu

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







関連記事

  1. Adalo Resource・キーボードショートカットの使い方、動画や音声の埋め込み方法(YouTu…

  2. 記事作成

    Bubble・APIの使用例

  3. Adalo Resource・Appleを使ってサインイン(スクリーンとコンポーネントセクション)に…

  4. Adalo Resource・とりあえず始めてみる

  5. 記事作成

    Bubbleのプラグイン特別編を解説してみた!!

  6. SaaSロゴ

    Tiger(Jungleworks)

  7. 記事作成

    Bubbleのプラグイン基礎を徹底解説!!

  8. Adalo Resource・画面とコンポーネントベーシック

  9. 記事作成

    BubbleのSlugと再利用可能な要素について解明してみた!!

人気記事

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

おすすめ記事一覧

  1. top_image
  2. タスク
  3. 飲食店 会計
  4. 記事画像
  5. 記事画像
PAGE TOP