Glideに（少しだけ）ゲーム感覚を取り入れよう【ノーコード・ツールGlide】

アプリに少しだけ、ゲーム的な要素を取り込みたくありませんか？具体的には、ランダムに画像を取り出して表示するとか😆。

前回記事で紹介した「Single Value Column」には、ランダムに値を選び出す機能があります。これを使って名簿のプロフィール画像として、任意に選び出したアバターを使ってみましょう！

少しアプリが楽しくなるかもしれませんよ！

前回記事はこちらです。このページからアクセスされた方は、まずはこちらからどうぞ。

動画は、こちらです。「Single Value Columns：基本的な使い方と意外な？使い方」です。

では、行ってみよ～。

プロフィール画像をランダムなアバターに変えたい

はい、今回も使用するのは従業員名簿アプリです。プロフィール画像が表示されてますね。

これらはもちろん一人一人固有な画像です。

でも実際のところどうでしょうか？プロフィール画像が全員分そろう事ってあまりないですよね。顔をアプリに載せたくないっていう人もいますし。

今回はプロフィール画像の代わりに、任意の画像を当てはめて表示させます。そうすれば、全員分の画像が揃って見た目としてもよくなります。

ユーザーにランダムに割り当てる画像を準備

ということで、ユーザーへランダムに割り当てる画像を準備します。前回記事で紹介した場合と同じように、独立した小さなテーブルを一つ作ります。例えば、下の通りです。

アバター列に、動物の画像が収まっています。

「これをユーザーに割り当てたらユーザーからクレーム来ませんかね？🤔」

来るかもしれないですね😅。無難なアプリにするなら、抽象的なアイコン画像とかの方がいいかもしれないです。

まぁそこはさておき、画像を格納したカラムを一個準備します。アバター番号というカラムも表示されていますが、こちらは不要です。

では、どうやってユーザーに、これらの画像を割り当てればいいんでしょう？登場するのは前回紹介したSingle Value Columnですよ。

カラムがランダムに画像を抽出する

それではユーザーのテーブルに戻ります。さっそくユーザーのテーブルにSingle Value Columnを追加しましょう！

そのカラムの設定のところで、抽出する値を「ランダム」に設定します。そんなこともできるんですねえ😄。データのソースは、先ほどの「アバター」カラムを指定してください。

そうすると、じゃじゃーん！各ユーザーにアバターが適当に、もとい、ランダムに割り振られました！

今さらですが、、、確かに「なんで俺はひよこなんだ」ってクレーム来そうですね。この機能を使うならやっぱり、動物は避けた方がいいかな😅。

プロフィール画像をアバターに変更する

では、リストが表示されている画面に戻ります。現在は、ユーザーのプロフィール画像が表示されています。

表示する画像データをアバター列に変更します。

はい、下のようにアバターが表示されました～！

アルパカが割り当てられた加藤さん、うれしいですかね！？

実際のところ、読み込むたびに割り当てられる画像が変わりますから、いつもアルパカというわけにはいきませんが。

再度アプリを開きなおすと、ほらね、アバターが変わっています。。。

だとすると、事前にアバター（やアイコン）を割り当てた方が無難ですか？より良い画像のランダム抽出の使い方について思いついた方は、是非教えてください！

今日は、このへんで！

まとめ

今回は、Single Value Columnを使って、ユーザーに任意のアバター画像を割り当てるということを試してみました！

アプリを楽しくするために、ゲーム的な要素を取り込めたらいいですね。それを実際にいろいろやってしまっている方が、Glide ExpertのRobert Petittoさんです。

完全に、Glideの標準機能の範囲を超えてますけどね😂。グライドを使い倒せば、ここまで出来るんだということが分かります。自分も少しは彼に近づけるかな～。。。

では、ビーダゼーン！

※私のやる気アップとブログの品質向上につながりますので、記事が気に入られた方は、「ポチっ」と好きボタンを押してくださったり、フォローいただけますと幸いです🙇。