BubbleでGmailアカウント風、ユーザー名の頭文字からアイコンを設定する方法

ノーコードツール「Bubble」でGmailアカウント風、ユーザー名の頭文字からユーザーのデフォルトアイコンを設定する方法を紹介します。

無料プラグイン「Alphabet Profile Images」を利用することで意外と簡単に実装できるので、ぜひお試しくださいませ。

動画解説バージョンはこちら！

また、本メディアを運営する「EPICs株式会社」では、ノーコードを活用したアプリ・システム開発を行っております。

従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。

• 開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
• 開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
• リリース後の改修スピードも早い → PDCAを早く回せる

日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。

ノーコード開発サービスについて詳しく知る

EPICs株式会社の特徴

• 日本最大級のノーコード開発実績 → 高度な開発もスピーディー
• 複数のノーコードツールに対応 → 最適なツール選びで開発費用・期間を最大限抑えられる
• マーケティングまで支援が可能

実装イメージ

ユーザーのアイコン（プロフィール画像）が登録されているときはデータベースに保存されている画像を表示し、逆に未登録の場合はデフォルトアイコンとしてユーザー名の頭文字からデフォルトアイコンを自動生成して設定してくれる、そんな機能を実装します。

今回はユーザー一覧での使用を想定しての解説になりますが、ユーザー詳細やチャット内でも応用して利用できると思います。

Elements treeは以下の通りです。

RepeatingGroupの中に、Groupとプラグイン「Alphabet Profile Images」のエレメントを設置するイメージ。

Gmailアカウント風のユーザーアイコンの実装手順

以下の手順で実装します。

プラグイン「Alphabet Profile Images」をインストール

まず、プラグイン「Alphabet Profile Images」をインストールします。

RepeatingGroupの中にAlphabet Imageエレメントを設置

次にユーザーを一覧表示するRepeatingGroup内に、Alphabet Imageのエレメントを設置して上記添付画像のように設定します。

ユーザーアイコンのConditionalで画像未登録時にAlphabet Imageをセット

最後に、RepeatingGroup内でユーザーアイコンを表示するImageエレメントのConditionalを設定します。

上の添付画像のように、ユーザーアイコンが空（未登録、empty）のときに「Image Source」のDynamic imageを、先程設置した「AlphabetImage’s current image」と設定すれば完了です！