モバイルアプリケーションによって、タイトルバーのスタイル、ボタンのスタイルなど、さまざまなデザインスタイルがあります。アプリケーションのスタイルにより良く適合させるために、ZOLOZ は、指定されたコンポーネントの色とコピーに関して、シンプルな UI カスタマイズをサポートしています。

タスクについて

このタスクでは、App SDKモードで適用されるZOLOZ プロダクトのUIをカスタマイズする方法を示します。

手順

1. ZOLOZ ポータルで UI を構成する

ユーザー名とパスワードを使用して、ZOLOZ ポータルにログインします。
UI 構成ページに移動し、このページで提供されている構成ツールを使用して、カスタマイズされたコンテンツを構成します。
構成が完了したら、[エクスポート] をクリックし、構成ファイルをローカルワークスペースに保存します。

2. 構成ファイルで SDK を起動する

手順 1 で生成された構成ファイルは、ZOLOZ SDK と統合する必要があります。 Android と iOS の両方のオペレーティングシステムがサポートされています。次のセクションでは、2 つのオペレーティングシステムの構成ファイルで SDK を起動する方法を示します。

注: クライアント開発者でない場合は、構成ファイルをクライアント開発者に送信してください。

a. 構成ファイルをプロジェクトに配置する

構成ファイルは、アプリケーションの実行時にアクセスできるプロジェクトディレクトリに配置します。通常、Android アプリケーションの場合は assets ディレクトリに、iOS アプリケーションの場合は MainBundle に配置します。構成ファイルを CDN サーバーに配置し、ZOLOZ SDK を起動する前にダウンロードすることもできます。

b. ZLZRequest で構成ファイルのパスを設定する

構成ファイルを使用して ZOLOZ SDK を起動するには、ZLZRequest オブジェクトで構成ファイルのパス情報を指定します。 Android アプリケーションの場合は、CHAMELEON_CONFIG_PATH パラメーターの構成ファイルパスを指定します。 iOS アプリケーションの場合は、kZLZChameleonConfigKey パラメーターの構成ファイルパスを指定します。

次の 2 つのサンプルは、Android アプリケーションと iOS アプリケーションの ZLZRequest オブジェクトに UIConfig.zip という名前の構成ファイルを追加する方法をそれぞれ示しています。

サンプル 1: Android アプリケーションの場合

ZLZRequest request = new ZLZRequest();
request.bizConfig = new HashMap<>();
// 他の構成は省略
// bizConfig に構成ファイルのパスを追加します。
request.bizConfig.put(ZLZConstants.CHAMELEON_CONFIG_PATH, "UIConfig.zip");
return request;

サンプル 2: iOS アプリケーションの場合

NSMutableDictionary *bizConfig = [NSMutableDictionary dictionary];
// 他の構成は省略
// bizConfig に構成ファイルのパスを追加します。
NSString* path = [[NSBundle mainBundle] pathForResource:@"UIConfig" ofType:@"zip"];
[bizConfig setObject:path forKey:kZLZChameleonConfigKey]
ZLZRequest *request = [[ZLZRequest alloc] initWithzlzConfig:clientConfig bizConfig:bizConfig];

ZLZRequest オブジェクトを構築する方法の詳細については、「App SDKモードの統合」をご参照ください。

c. (オプション) 多言語コピーを構成する

UI 構成ページでは、多言語コピーも構成できます。 ZOLOZ SDK が起動時に構成済みの言語のいずれかのコピーを使用できるようにするには、ZLZRequest オブジェクトの関連パラメーターに言語情報を指定します。 ZOLOZ SDK は、指定された言語のコピーの構成ファイルを読み取り、アプリケーションでレンダリングします。

たとえば、UI 構成ページで 中国語 (簡体字) (zh-CN) という言語を追加し、Android アプリケーションで SDK がこの言語のコピーを使用できるようにするには、サンプル 3 に示すように、LOCALE パラメーターの値を "zh-CN" に指定する必要があります。 iOS アプリケーションを開発する場合は、サンプル 4 に示すように、kZLZLocaleKey パラメーターの値を指定します。

LOCALE/kZLZLocaleKey パラメーターの値は、language-Country の形式である必要があります。 UI 構成ページで提供される各言語オプションの値の設定方法については、「ロケール関連パラメーター値の形式」をご参照ください。

注:

LOCALE/kZLZLocaleKey パラメーターを構成しない場合、ZOLOZ SDK はシステム言語を使用して、UI 構成ページで構成された言語と照合します。
LOCALE/kZLZLocaleKey パラメーターに指定された言語もシステム言語も UI 構成ページで構成された言語と一致しない場合、ZOLOZ SDK は組み込みのコピーを直接使用します。

サンプル 3: Android アプリケーションの場合

ZLZRequest request = new ZLZRequest();
request.bizConfig = new HashMap<>();
// 他の構成は省略
// bizConfig に LOCALE を追加します。
request.bizConfig.put(ZLZConstants.LOCALE, "zh-CN");
return request;

サンプル 4: iOS アプリケーションの場合

NSMutableDictionary *bizConfig = [NSMutableDictionary dictionary];
// 他の構成は省略
// bizConfig に LOCALE を追加します。
[bizConfig setObject:@"zh-CN" forKey:kZLZLocaleKey]
ZLZRequest *request = [[ZLZRequest alloc] initWithzlzConfig:clientConfig bizConfig:bizConfig];