ユーザー用のパブリックプロフィール画面を設定する方法

このチュートリアルでは、ユーザープロフィールページの設定とリンク方法について説明します。以下の例では、コメントのリストからおよびコメントの詳細画面からこれを行う方法について説明しています。

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

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

以下のチュートリアルでは、フォーラムでトピックを選択し、特定のトピックのコメントリストを表示し、個々のコメントの詳細を表示できるアプリを紹介します。コメントリストとコメントの詳細画面の両方に、コメントの著者がリストされており、クリックするとプロフィール画面にリンクされます。

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

1. コンポーネント追加ボタンを選択します。

2. リスト ドロップダウンを選択します。

3. カスタムリスト を選択します。

4. コンポーネントを画面に配置します。

5. カスタムリストを選択した状態で、コメントのリストであることを指定します。

6. コメントのリストを選択した状態で、別のフィルタを追加 を選択します。

7. カスタムフィルタ の下で、列を選択 を選択し、Current Comment > Forum > Name に設定します。

8. デフォルト値の is equal to を保持します。

9. フィルタの最後の値で、Empty と表示されている箇所で、ドロップダウンを選択し、Current Forum > Name に設定します。

2) コメントコンテンツを設定する

1. さきほど設定したコメントリストを選択します。

2. 左のツールバーで コンポーネント セクションを展開します。

3. 現在 タイトル として設定されているテキストフィールドを選択します。

4. 左のツールバーには Text が Title として2回表示されます。マウスで上の部分にホバーして、鉛筆/編集アイコンを選択します。

5. 空の名前フィールドを選択し、Comment Content に名前を変更します。

6. Done を選択します。

7. Title と表示されている下のテキストフィールドを選択します。

8. テキスト Title を削除します。

9. Magic Text ボタンを選択します。

10. Current Comment > Content に設定します。

3) ユーザー名をユーザーのリストとして設定する

1. コメントリストを選択します。

2. 左のツールバーで コンポーネント セクションを展開します。

3. 現在 サブタイトル として設定されているテキストフィールドを選択します。

4. テキストフィールドをグループに変更します。

   * コンポーネントをクリックすると新しい画面が開くアクションを持たせます。*

   - MAC OS では、画面上のコンポーネントを選択して、[CMD] + [G] を押すことで実行できます。 - Windows では、画面上のコンポーネントを選択して、[CTRL] + [G] を押すことで実行できます。

5. グループを選択した状態で、オーバーフローメニューを選択します。

6. リストを作成 を選択します。

7. 左のツールバーには、List というタイトルが表示されます。タイトルは Group # となります（設定したグループの数によって異なります）。マウスでホバーして、鉛筆/編集アイコンを選択します。

8. Name フィールドを選択し、List of Users に名前を変更します。

9. 完了 を選択します。

10. 左側のツールバーに これは何のリストですか？ が表示されます。ドロップダウンを選択します。

11. Users を選択します。

4) List of Users リストをフィルタリングする

1. List of users リストを選択します。

2. 別のフィルターを追加 を選択します。

3. カスタムフィルター の下で、列を選択 を選択し、Email に設定します。

4. デフォルト値の is equal to を保持します。

5. フィルターの最後の値について、Empty と表示されている箇所で、ドロップダウンを選択し、Current Comment > User > Email に設定します。

5) ユーザープロフィールページへのリンク設定

1. List of Users リストを選択し、左側のツールバーで リスト セクションを展開します。

2. 下にスクロールして Click Actions セクションまで移動し、+ ADD ACTION を選択します。

3. マウスを Link の上に置いて、リンクを貼りたいページを展開します。

4. ユーザー名をリンクさせたいページを選択します。この例では、リンクさせたいページは View User Profile と呼ばれています。

5. 完了 を選択します。

6) ユーザー名の表示テキストの設定

1. List of Users リストを選択し、左側のツールバーで Components セクションを展開します。

2. 現在 Subtitle として設定されているテキストフィールドを選択します。

3. 左側のツールバーには Text が2回 Subtitle と表示されます。上の方の Subtitle の上にマウスを置いて、鉛筆/編集アイコンを選択します。

4. 名前フィールドを選択し、Full Name に名前を変更します。

5. 完了 を選択します。

6. Subtitle と表示されているテキストフィールドを選択します。

7. テキスト Subtitle. を削除します。

8. Magic Text ボタンを選択します。

9. Current Comment > User > Full Name に設定します。

7) コメント詳細ページへのリンク設定

この手順では、ユーザーのコメントの詳細を表示するページを設定する方法を示しています。コメント詳細ページを設定する場合は、この手順が必要です。コメント詳細ページを設定しない場合は、ステップ8にスキップできます。

1. Comments リストを選択します。

2. 左側のツールバーで Components セクションを展開します。

3. Comment Content として設定されているテキストフィールドを選択します。

4. + ADD ACTION を選択します。

5. マウスを Link の上に置いて、リンクを貼りたいページを展開します。

6. コメントの内容をリンクさせたいページを選択します。この例では、リンクさせたいページは Comment Details と呼ばれています。

7. 完了 を選択します。

8) コメント詳細ページでのコメント内容と作成日の設定

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

1. コンポーネント追加ボタンを選択します。

2. Text を選択します。

3. テキストを画面に配置します。

4. 左側のツールバーで、Enter Text. と書かれた灰色のボックスにカーソルを置きます。

5. テキストを削除します。

6. Magic Text ボタンを選択します。

7. Current Comment. の上にマウスを重ねます。

8. Created Date. を選択します。

9. コンポーネント追加ボタンを選択します。

10. Text を選択します。

11. テキストを画面に配置します。

12. Enter Text. と書かれた灰色のボックスにカーソルを置きます。

13. テキストを削除します。

14. Magic Text ボタンを選択します。

15. Current Comment. の上にマウスを重ねます。

16. Content. を選択します。

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

1. 左側のツールバーで、コンポーネント追加ボタンを選択します。

2. Text を選択します。

3. テキストを画面に配置します。

4. テキストフィールドをグループに変更します。

   * コンポーネントに新しい画面を開くアクションを持たせます。*

   - MAC OS では、画面上のコンポーネントを選択し、[CMD] + [G] を押すことで実行できます。 - Windows では、画面上のコンポーネントを選択し、[CTRL] + [G] を押すことで実行できます。

5. グループを選択した状態で、オーバーフローメニューを選択します。

6. Make List を選択します。

7. 左側のツールバーに What is this a list of? が表示されますので、ドロップダウンを選択します。

8. Users. を選択します。

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

1. ステップ9で作成したユーザーリストを選択します。

2. ADD ANOTHER FILTER. を選択します。

3. Custom Filter の下で、Select Column を選択し、Email. に設定します。

4. デフォルト値の is equal to を保持します。

5. フィルターの最後の値で、Empty. と書かれている箇所を選択し、ドロップダウンから Current Comment > User > Email. に設定します。

11) 著者のための Magic Text を設定する

1. ステップ9で作成したユーザーリストを選択します。

2. 左側のツールバーで Components セクションを展開します。

3. テキストコンポーネントを選択します。

4. Text と書かれた灰色のボックスにカーソルを置き、Enter Text. と書かれたテキストを削除します。

5. Magic Text ボタンを選択します。

6. Current Comment. の上にマウスを重ねます。

7. User. の上にマウスを重ねます。

8. Full Name. を選択します。

12) 著者をユーザープロフィールページにリンクする

1. ユーザーリストを選択します。

2. 画面下部の Components Section をスクロールして展開します。

3. テキストコンポーネントを選択します。

4. Click Actions セクションまでスクロールし、+ ADD ACTION. を選択します。

5. マウスを Link の上に重ねてページを展開します。

6. ユーザー名をリンクさせたいページを選択します。この例では、リンクさせたいページは View User Profile と呼ばれています。

7. Done. を選択します。

13) ユーザープロフィールページの設定

1. アプリバーの画面タイトルを変更します

   1. アプリバーを選択します。

   2. 左側のツールバーで Title セクションを展開します。

   3. 灰色のテキストフィールドを選択してテキストを削除します。

2. テキストの下にある灰色のボックスにカーソルを置き、Enter Text と表示されている場所にカーソルを合わせます。

3. テキストを削除します。

4. Magic Text ボタンを選択します。

5. Current User の上にマウスを重ねます。

6. Full Name を選択します。

7. ユーザーの写真を追加します。

   1. コンポーネント追加ボタンを選択します。

   2. 画像を選択します。

   3. 画像を画面に追加します。

   4. 左側のツールバーで Edit Styles を選択します。

   5. 幅と高さが同じになるようにサイズを変更します。

   6. Rounding を 105 に設定します。

   7. 左側のツールバーで、画像ソースの下にあるドロップダウンを選択します。

8. ユーザーの情報を画面に追加します。

   1. 左側のツールバーでコンポーネント追加ボタンを選択します。

   2. Text を選択します。

   3. テキストを画面に配置します。

   4. テキストの下にある灰色のボックスにカーソルを置き、Enter Text と表示されている場所にカーソルを合わせます。

   5. テキストを削除します。

   6. Magic Text ボタンを選択します。

   7. Current User の上にマウスを重ねます。

   8. Info を選択します。

異なる画面からユーザーを View User Profile 画面に移動させるリンクが2つ作成されました。Forum と Comment Details 画面のユーザーリストを使用して、Current User データを View User Profile 画面にリンクさせました。これにより、View User Profile Screen で同じデータからマジックテキストと画像を使用できるようになりました。