一時的なユーザーアバターを作成する方法
ユーザーのプロフィール写真にプレースホルダー画像を使用する代わりに、ユーザーがサインアップするとすぐに個人用のアバターを生成してください。
Last updated
Was this helpful?
ユーザーのプロフィール写真にプレースホルダー画像を使用する代わりに、ユーザーがサインアップするとすぐに個人用のアバターを生成してください。
Last updated
Was this helpful?
スキルレベル: 中級
、、、およびの基本を知っていること
この実装では、Adaloデータベースの画像プロパティではなく、画像URLを参照する必要があります。プレースホルダーを表示したい場所では、データベースの画像プロパティではなくURLをソースとして使用する必要があります。
アプリにサインアップ画面、ログイン画面、ホーム画面、およびプロフィール画面があることを確認してください
この機能を実装するためには、有料のAdaloプランは必要ありません
この手順では、ユーザーごとに一意でパーソナライズされた一時的なアバターを設定します。高度なことのように聞こえますが、思っているよりも簡単にできます！
1.) まず、ユーザーコレクションに**"Profile Pic URL"というText**プロパティを追加しましょう。これを行う方法については、まずガイドを参照することをお勧めします。
2.) 次に、ユーザーコレクションに**"Profile Pic"というImage**プロパティを追加します。これにより、ユーザーが一時的なアバター画像を置き換えるために自分の写真をアップロードできるようになります。
3.) これで、画像情報を保持するためのプロパティがデータベースに追加されたので、ホーム画面にアクションを追加します。画面のワイヤーフレームの左上にある画面のラベルをクリックし、次にアクションセクションのドロップダウンをクリックします。
4.) クリックアクションセクションの下にある**+ アクションを追加をクリックし、次にUpdate > ログインユーザー**を選択します。
5.) 一時的なアバター画像を生成するために、という無料のサービスを使用して、作成した**"Profile Pic URL"フィールドに保存するリンクを生成します。生成するアバターの種類にはいくつかのオプションがあります（詳細は以下のセクションを参照）。ここではinitialsオプションを使用します。これを行うには、以下のURLを"Profile Pic URL"**フィールドにコピーして貼り付けるだけです。
6.) このリンクだけではまだ必要な画像を作成しません。この場合に使用するパーソナライズされたフレーズ、つまりユーザーのフルネームをリンクの末尾にLogged In User's > Full Nameと**.svg**と一緒に追加します。更新アクションは以下のようになります：
7.) 次に、このアクションがユーザーにプロフィール画像URLがまだない場合にのみ実行されるようにする必要があります。これを行うには、更新アクションでShow Advancedをクリックし、When does this happen?ドロップダウンをSometimesに設定します。 8.) 「これは、...の場合のみ発生します」 ドロップダウンで 「その他 > ログインユーザー > プロフィール写真のURL」 を選択してください。次に表示されるドロップダウンは 「等しい」 に設定し、最後のドロップダウンは 「空」 のままにしてください。これにより、ユーザーがプロフィール写真を持っていない場合にのみ一時的なプロフィール写真を提供することができます。
10.) 新しいフォームの設定で、フォームセクションのドロップダウンを選択していない場合は、「どのデータコレクション」 ドロップダウンを 「Users」 に設定してください。
11.) 次に、「フォームが行う操作」 ドロップダウンで 「ログインユーザーを更新」 を選択してください。
12.) フィールドセクションのドロップダウンで、「可視フィールド」 セクションから 「Email」、「Password」、「Profile Pic URL」 をそれぞれのプロパティの横にあるゴミ箱アイコンをクリックして削除してください。
13.) 送信ボタンセクションのドロップダウンをクリックし、「+ 別のアクションを追加」 をクリックして、送信ボタンに 「更新 > ログインユーザー」 をもう一度行うアクションを追加してください。
14.) アクションの設定で、マジックテキストを使用して 「プロフィール写真のURL」 を 「ログインユーザー」 > 「プロフィール写真」 > 「URL」 に設定しましょう。
15.) これで、ユーザーのプロフィール写真を表示したい場所では、ドロップダウンで 「画像ソース」 を 「URL」 に設定し、値には 「ログインユーザーの」 > 「プロフィール写真のURL」 と入力してください。 4.) Click Actions セクションの下で、+ Add Action をクリックし、次に Update > Logged In User を選択します。
6.) このリンクだけではまだ必要な画像を作成しません。ここには、この場合はユーザーのフルネームを使用するための個人用フレーズを追加する必要があります。リンクの末尾に Logged In User's > Full Name と .svg を追加しましょう。あなたの更新アクションは以下のようになります：
7.) 次に、このアクションがユーザーが既にプロフィール画像の URL を持っていない場合にのみ実行されるようにする必要があります。これを行うには、Update アクションで Show Advanced をクリックし、When does this happen? ドロップダウンを Sometimes に設定します。
8.) This action will only happen if... ドロップダウンで More > Logged In User > Profile Pic URL を選択します。次に表示されるドロップダウンが Equal to に設定されていることを確認し、最後のドロップダウンが Empty に設定されていることを確認します。これにより、ユーザーがプロフィール画像を持っていない場合にのみ、ユーザーに一時的なプロフィール画像を提供することができます。
10.) 新しいフォームの設定で、Form セクションのドロップダウンを選択し、Which Data Collection ドロップダウンを Users に設定します。次に、What do you want the form to do? ドロップダウンで Update Logged in User を選択します。
11.) Fields セクションのドロップダウンで、Visible Fields セクションから Email、Password、および Profile Pic URL をそれぞれのプロパティの横にあるゴミ箱アイコンをクリックして削除します。
13.) アクションの設定では、Magic Text を使用して "プロフィール写真のURL" を ログインユーザー > プロフィール写真 > URL に設定しましょう。
14.) これで、ユーザーのプロフィール写真を表示したい場所では、ドロップダウンで 画像ソース を URL に設定し、値には Magic Text ログインユーザーの > プロフィール写真のURL を入力してください。
アバターの外観は、リンクに Magic Text を入力する情報によって決まります。たとえば、ユーザーのフルネームをリンクに送信すると、例えばJohnny Testのように、返されるイニシャルはJTになります。
avataaars
big-ears
big-ears-neutral
big-smile
bottts
croodles
croodles-neutral
gridy
identicon
initials
jdenticon
micah
miniavs
open-peeps
personas
pixel-art
pixel-art-neutral
9.) 次に、ユーザーが自分の写真をアップロードした場合、「プロフィール写真のURL」 プロパティが新しいURLで更新されるようにする必要があります。アプリのプロフィール画面にフォームを追加するには、ビルダーの左上にある大きなプラス記号をクリックしてください。
5.) 一時的なアバター画像を生成するために、 という無料サービスを使用して、作成した "Profile Pic URL" フィールドに保存されるリンクを生成します。生成するアバターの種類にはいくつかのオプションがありますが、ここでは initials オプションを使用します。以下のURLを単純にコピーして、Update アクションの "Profile Pic URL" フィールドに貼り付けてください。
9.) 次に、ユーザーが自分で画像をアップロードした場合に、"Profile Pic URL" プロパティが新しい URL で更新されるようにする必要があります。エディターの左上にある大きなプラス記号 をクリックして、アプリのプロフィール画面にフォームを追加します。
12.) 提出ボタンセクションのドロップダウンをクリックし、+ 別のアクションを追加 をクリックして、再度 Update > ログインユーザー を提出ボタンに追加します。
これで、ユーザーはサインアップ時にすぐに一時的で動的かつ個人用のアバターをプロフィール写真として持つことができます。この手順書を作成するために使用されたアプリを表示または複製したい場合は、ください。
エンドポイントのオプションをイニシャルから表の他の値のいずれかに変更するだけで、作成されるアバターの種類をカスタマイズできます。Dicebearは各アバタータイプにいくつかのカスタマイズオプションも提供していますが、それはこのヘルプガイドの範囲外です。詳細については、をご覧ください。以下の表のタイプを使用するには、ステップ5 で使用されている initials を表の値に置き換えてください。
ほとんどのアバタータイプは無料で使用できますが、に注意して、アーティストにクレジットを与える必要がある場合はクレジットを表示することが重要です。
この記事に関する追加のヘルプが必要な場合は、いつでもで質問できます！投稿にはこの記事へのリンクも貼っておいてください！
チュートリアルやヘルプドキュメントのリクエストがありますか？
