GravatarImageSource

Gravatar ("グローバルに認識されるアバター") は、複数の Web サイトでアバター、つまり自分を表す画像として使用できる画像です。 たとえば、Gravatar によってフォーラムの投稿やブログのコメントなどで人物を識別できます。 (http://www.gravatar.com/ にある Gravatar Web サイトで自分自身の Gravatar を登録できます。)人の名前またはメール アドレスの横に画像を表示したい場合は、GravatarImageSource を使用できます。

構文

XAML 名前空間を含める

XAML でこのツールキットを使用するには、次の xmlns をページまたはビューに追加する必要があります。

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

したがって、以下のコードは、

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</ContentPage>

次のように、xmlns を含むように変更されます。

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

</ContentPage>

GravatarImageSource の使用

次の例は、GravatarImageSource を使用する方法を示しています。

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    <VerticalStackLayout>
        <Image>
            <Image.Source>
                <toolkit:GravatarImageSource
                    CacheValidity="1"
                    CachingEnabled="True"
                    Email="youremail@here.com"
                    Image="MysteryPerson" />
            </Image.Source>
        </Image>
    </VerticalStackLayout>
</ContentPage>

同等の C# コードを次に示します。

using CommunityToolkit.Maui.ImageSources;

partial class MyPage : ContentPage
{
	public MyPage()
	{
        Image myImage = new()
        {
            Source = new GravatarImageSource()
            {
                CacheValidity = TimeSpan.FromDays(1),
                CachingEnabled = true,
                Email = "youremail@here.com",
                Image= DefaultImage.MysteryPerson
            },
        };
		Content = myImage;
	}
}

Properties

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらはデータ バインディングの対象することができ、スタイルを設定できます。

キャッシュの有効期間を設定する

CacheValidity プロパティは、画像がローカルに保存される期間を指定する TimeSpan です。

次の例では、GravatarImageSource のキャッシュの有効期間を設定しています。

<Image>
    <Image.Source>
        <toolkit:GravatarImageSource CacheValidity="1" />
    </Image.Source>
</Image>

同等の C# コードを次に示します。

Image myImage = new()
{
    Source = new GravatarImageSource()
    {
        CacheValidity = TimeSpan.FromDays(1),
    },
};

キャッシュの有効性を設定する

CachingEnabled プロパティは、画像キャッシュを有効にするかどうかを定義する bool です。

次の例では、GravatarImageSource のキャッシュを有効に設定しています。

<Image>
    <Image.Source>
        <toolkit:GravatarImageSource CachingEnabled="True" />
    </Image.Source>
</Image>

同等の C# コードを次に示します。

Image myImage = new()
{
    Source = new GravatarImageSource()
    {
        CachingEnabled = true,
    },
};

メールを設定する

Email プロパティは Null 許容の string です。 このプロパティが null または空の場合、既定の Gravatar 画像がレンダリングされます。 メール アドレスに一致する Gravatar 画像がない場合は、Image プロパティの画像がレンダリングされます。

次の例では、一致する Gravatar 画像を持つメール アドレスを設定しています。

<Image>
    <Image.Source>
        <toolkit:GravatarImageSource Email="dsiegel@avantipoint.com" />
    </Image.Source>
</Image>

同等の C# コードを次に示します。

Image myImage = new()
{
    Source = new GravatarImageSource()
    {
        Email = "dsiegel@avantipoint.com",
    },
};

次の例では、メール アドレスを設定していないため、既定の Gravatar 画像が表示されます。

<Image>
    <Image.Source>
        <toolkit:GravatarImageSource />
    </Image.Source>
</Image>

同等の C# コードを次に示します。

Image myImage = new()
{
    Source = new GravatarImageSource(),
};

次の例では、一致する Gravatar 画像がないメール アドレスを設定しているため、既定の Image の画像が表示されます。

<Image>
    <Image.Source>
        <toolkit:GravatarImageSource Email="notregistered@emailongravitar.com" />
    </Image.Source>
</Image>

同等の C# コードを次に示します。

Image myImage = new()
{
    Source = new GravatarImageSource()
    {
        Email = "notregistered@emailongravitar.com",
    },
};

既定の画像を設定する

Image プロパティは、email アドレスに一致する Gravatar 画像がない場合の既定の画像を指定するために使用される列挙型です。 使用可能なオプションは次のとおりです。

• MysteryPerson (既定値) - 人物のシンプルな漫画スタイルのシルエットのアウトライン (メール ハッシュによって異なることはありません)
• FileNotFound - メール ハッシュに関連付けられているものがない場合は画像を読み込まず、代わりに HTTP 404 (File Not Found) 応答を返します。
• Identicon - メール ハッシュに基づく幾何学的パターン。
• MonsterId - 異なる色、顔などを持つように生成された 'モンスター'。
• Wavatar - 特徴と背景が異なるように生成された顔。
• Retro - 上手く生成された 8 ビットのアーケードスタイルのピクセル形式の顔。
• Robohash - 異なる色、顔などを持つように生成されたロボット。
• Blank - 透明な PNG 画像。

次の例では、GravatarImageSource の既定の画像を設定しています。

<Image>
    <Image.Source>
        <toolkit:GravatarImageSource Email="notregistered@emailongravitar.com" Image="Retro" />
    </Image.Source>
</Image>

同等の C# コードを次に示します。

Image myImage = new()
{
    Source = new GravatarImageSource()
    {
        Email = "notregistered@emailongravitar.com",
        Image = DefaultImage.Retro
    },
};

画像サイズを設定する

既定では、GravatarImageSource 画像は縦 80px 横 80px で表示されます。 画像サイズは "1px から 2048px" までの間で指定でき、親のビュー サイズ プロパティから取得されます。 Gravatar 画像は正方形であり、定義されたサイズ プロパティの大きい方が採用されます。

次の例では、画像コントロールのサイズを設定しているため、要求される Gravatar 画像のサイズは 73px になります。

<Image WidthRequest="72" HeightRequest="73">
    <Image.Source>
        <toolkit:GravatarImageSource Email="dsiegel@avantipoint.com" />
    </Image.Source>
</Image>

同等の C# コードを次に示します。

Image myImage = new()
{
    Source = new GravatarImageSource()
    {
        Email = "dsiegel@avantipoint.com",
    },
    HeightRequest = 72,
    HeightRequest = 73,
};

例

このコントロールの動作例は、「.NET MAUI Community Toolkit サンプル アプリケーション」で確認できます。

API

GravatarImageSource のソース コードは、.NET MAUI Community Toolkit の GitHub リポジトリにあります。