UnityでContentfulを使いたいなら

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/947f27f5-9c82-9673-e9ac-71afe23ee243.png)

UnityでContentfulを使う方法をいろいろ試してみました！



# Contentfulとは？

Contentfulとは、ヘッドレスCMSとしておそらくもっとも有名なサービスです。

ヘッドレスCMSとは、コンテンツを管理することに特化したクラウドサービスです。

Webのフロントエンド側からは、WebAPIを介して利用できます。



たとえば、弊社の `STYLY Studio` というサイトには、以下のように `STYLYアセット` というもののリストを閲覧できるページがあります。

これらの

- サムネイル
- タイトル（`Change Texture Torus` と記載されている箇所）
- 説明文（`You can change the image, ...` と記載されている箇所）

といった情報をContentfulで集中管理しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/fd28a2d4-2d8b-9e1c-726f-7d34d735888d.png)



# Windowsアプリなら `contentful.net` が便利

Unityに限らず、Windowsアプリを開発する際には、公式にNuGetパッケージが公開されているので、これを利用しましょう！

[Contentful.net - Contentful .NET Library](https://github.com/contentful/contentful.net)

このライブラリには、クライアントとして必要なクラス・メソッドがすべて定義されていてとても便利です！

ただし、 `contentful.net` はUnity用ライブラリではありませんので、Unityで使えるようにするには一手間加える必要があります。



# UnityのWindowsビルドから `contentful.net` を使う

`contentful.net` はNuGetパッケージですので、これをUnityで使えるようにするには準備があります。

まず、NuGetから `contentful.csharp` を入手してください。

次に、Visual Studioで `Contentful.Core.dll` を生成してください。

最後に、 `Contentful.Core.dll` をUnityの `Plugins` フォルダー配下に設置します。
これで、Unity側のC#から `Contentful.Core` という名前空間へアクセスできるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/c4e81d91-deb0-a662-3848-be7770d22582.png)

NuGetパッケージをUnityに導入する詳しい方法は、以下がわかりやすかったので、よくわからなければ、合わせてご参照ください。

[【Unity】AngleSharpをUnityに導入してみた](https://www.hanachiru-blog.com/entry/2019/06/27/100236)



たとえば、エントリー（Contentful内のコンテンツ単位）の一覧を取得する時のコードはこんな感じです。（サンプルコードなので、細かいエラーハンドリング等はしておりません。）

```c#
using Contentful.Core;
using Contentful.Core.Configuration;
using System.Collections.Generic;
using System.Net.Http;

public class HogeDownloader
{
    private readonly string deliveryApiKey;
    private readonly string spaceId;
    private readonly string environment;
    
    public HogeDownloader(string deliveryApiKey, string spaceId, string environment)
    {
        this.deliveryApiKey = deliveryApiKey;
        this.spaceId = spaceId;
        this.environment = environment;
    }
    
	private List<Hoge> DownloadEntries()
    {
        var httpClient = new HttpClient();
        var options = new ContentfulOptions
        {
            DeliveryApiKey = deliveryApiKey,
            SpaceId = spaceId,
            Environment = environment
        };
        
        var client = new ContentfulClient(httpClient, options);
        var entries = await client.GetEntriesByType<Hoge>("hoge");
        return entries.Items.ToList();
    }
}
```

これで、Windowsアプリでは問題なく動作します。

**しかし、この方法だと、WebGLアプリでは動きません！**



なぜなら、 `contentful.net` が `System.Threading.Tasks.Task` というマルチスレッド機能を利用しており、WebGLはこれに対応していないためです。



# UnityのWebGLビルドならREST API直叩きしよう

UnityでWebGLアプリを開発する場合、いまのところ対応したContentfulライブラリはありませんので、ContentfulのREST APIを直に叩くのが無難です。



ContentfulのREST APIは以下の3種類ありますが、それぞれできることできないことがあります。

| REST API 種別          | Publishデータ閲覧  | Draftデータ閲覧    | データ書き込み     |
| ---------------------- | ------------------ | ------------------ | ------------------ |
| [Content Delivery API](https://www.contentful.com/developers/docs/references/content-delivery-api/)   | :heavy_check_mark: | :x:                | :x:                |
| [Content Preview API](https://www.contentful.com/developers/docs/references/content-preview-api/)    | :heavy_check_mark: | :heavy_check_mark:​ | :x:                |
| [Content Management API](https://www.contentful.com/developers/docs/references/content-management-api/) | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |

Publish（入稿）データを表示するだけなら、 `Content Delivery API` を利用しましょう！一般的なViewerアプリなら、これで十分です。

もし、Draft（下書き）データもアプリに表示したい場合は、 `Content Preview API` を利用しましょう！

たとえば、運営向けのアプリで、データ書き込みもするのであれば、 `Content Management API` を利用しましょう！



たとえば、エントリー（Contentful内のコンテンツ単位）の一覧を取得するためのURLを作成するコードはこんな感じです！

```c#
public class HogeDownloader
{
    private static readonly string apiBaseUrl = "https://cdn.contentful.com";
    private readonly string deliveryApiKey;
    private readonly string spaceId;
    private readonly string environment;
    
    public HogeDownloader(string deliveryApiKey, string spaceId, string environment)
    {
        this.deliveryApiKey = deliveryApiKey;
        this.spaceId = spaceId;
        this.environment = environment;
    }
    
    /// <summary>
    /// ダウンロードURL作成
    /// </summary>
    /// <returns>ダウンロードURL</returns>
    private string MakeDownloadUrl()
    {
        var url = $"{apiBaseUrl}/spaces/{spaceId}/environments/{environment}/entries?content_type=hoge";
        return url;
    }
}
```

上記のように生成したURLに対し、以下のようにアクセスすれば、エントリー一覧を取得できます。

```c#
var request = UnityWebRequest.Get(url);
request.SetRequestHeader("Authorization", $"Bearer {deliveryApiKey}");

yield return request.SendWebRequest();
```



# Unity無関係のブラウザアプリなら `contentful.js` を使おう

Unity無関係のシンプルなWebサイトの場合、公式にnpmパッケージが公開されているので、これを利用しましょう！

[contentful.js - Contentful JavaScript Content Delivery Library](https://github.com/contentful/contentful.js)

`contentful.js` を利用した場合のコードは、記事が数多くありますので、説明を省かせていただきます。



# さいごに

本記事作成にあたり、以下のサイトを参考にさせていただきました。ありがとうございました！

- [contentful.net - Contentful .NET Library](https://github.com/contentful/contentful.net)
- [contentful.js - Contentful JavaScript Content Delivery Library](https://github.com/contentful/contentful.js)
- [Content Delivery API](https://www.contentful.com/developers/docs/references/content-delivery-api/)
- [Content Preview API](https://www.contentful.com/developers/docs/references/content-preview-api/)
- [Content Management API](https://www.contentful.com/developers/docs/references/content-management-api/)

- [【Unity】AngleSharpをUnityに導入してみた](https://www.hanachiru-blog.com/entry/2019/06/27/100236)