Web SDK - Mobile は、ユーザーインターフェース (UI) スタイルのカスタマイズをサポートしています。ガイドページ、証明書収集ページ、OCR 結果編集ページ、生体検知ページのアイコン、ボタンの色、背景色などのスタイルをカスタマイズできます。
Web SDK - Mobile の UI カスタマイズは、モバイル統合モードでのみ利用できます。PC のカスタマイズについては、「Web SDK - PC UI カスタム構成手順」をご参照ください。
構成方法
UI をカスタマイズするには、構成テンプレートを使用してカスタムスタイルの JSON 文字列を Initialize API の StyleConfig フィールドに渡して初期化します。
特定の項目の構成を渡さない場合、デフォルトのスタイルが使用されます。初期化リクエストのサイズを小さくするために、変更する必要がある設定項目のみを渡すことをお勧めします。
JSON 文字列には、正規表現で使用される特殊文字を含めることはできません。
構成テンプレート
const styleConfig = {
guidePage: {
backgroundColor: "white", // CSS の色の値
btnBgColor: "#fb5d01", // CSS の色の値
btnTextColor: "white", // CSS の色の値
btnShadow: "0 16px 32px 0 rgba(251, 115, 38, 0.3)", // CSS の box-shadow
circle1Img: "", // イメージ URL
circle2Img: "", // イメージ URL
leftBorderImg: "", // イメージ URL
faceImg: "", // イメージ URL
ocrImg: "", // イメージ URL
shelterFromImg: "", // イメージ URL
lightImg: "", // イメージ URL
phoneImg: "" // イメージ URL
},
ocrPage: {
// OCR ページの背景色と不透明度
ocrBgColor: "rgba(2, 2, 2, 0.8)", // CSS の rgba
tipColor: "white", // CSS の色の値
maskColor: "rgba(2, 2, 2, 0.7)", // CSS の rgba
backIconImg: "", // イメージ URL
submitIconImg: "", // イメージ URL
ocrPhotoBorderImg: "", // イメージ URL
albumIconImg: "" // イメージ URL
},
ocrResultPage: {
backgroundColor: "white", // CSS の色の値
topTipBgColor: "white", // CSS の色の値
topTipTextColor: "black", // CSS の色の値
ocrTextColor: "#333333", // CSS の色の値
inputBgColor: "#f7f7f7", // CSS の色の値
btnBgColor: "#fb5d01", // CSS の色の値
btnTextColor: "white", // CSS の色の値
maskColor: "rgba(2, 2, 2, 0.7)", // CSS の rgba
backIconImg: "" // イメージ URL
},
facePage: {
backgroundColor: 'white', // CSS の色の値
topTipColor: "#333333", // CSS の色の値
processBarColor: ['#FFA500', '#FF8C00', 'rgba(237,119,49,1)'], // CSS の色の値の配列。長さは 3 です。値は、プログレスバーの色に、明るい色から暗い色の順に対応します。
maskColor: 'rgba(0, 0, 0, 0.6)', // CSS の rgba
maskTipColor: "white", // CSS の色の値
backIconImg: "" // イメージ URL
}
};{
"guidePage": {
"backgroundColor": "white",
"btnBagColor": "#fb5d01",
"btnTextColor": "white",
"btnShadow": "0 16px 32px 0 rgba(251, 115, 38, 0.3)",
"circle1Img": "",
"circle2Img": "",
"leftBorderImg": "",
"faceImg": "",
"ocrImg": "",
"shelterFromImg": "",
"lightImg": "",
"phoneImg": ""
},
"ocrPage": {
"ocrBgColor": "rgba(2, 2, 2, 0.8)",
"tipColor": "white",
"backIconImg": "",
"maskColor": "rgba(2, 2, 2, 0.7)",
"ocrPhotoBorderImg": "",
"albumIconImg": "",
"submitIconImg": ""
},
"ocrResultPage": {
"backgroundColor": "white",
"topTipBgColor": "white",
"topTipTextColor": "black",
"ocrTextColor": "#333333",
"inputBgColor": "#f7f7f7",
"btnBgColor": "#fb5d01",
"btnTextColor": "white",
"maskColor": "rgba(2, 2, 2, 0.7)",
"backIconImg": ""
},
"facePage": {
"backgroundColor": "white",
"topTipColor": "#333333",
"processBarColor": [
"#FFA500",
"#FF8C00",
"rgba(237,119,49,1)"
],
"maskColor": "rgba(0, 0, 0, 0.6)",
"maskTipColor": "white",
"backIconImg": ""
}
}設定項目
カスタムページの色設定: UI コンポーネントにさまざまな色の値を渡して、デフォルトの色を置き換えることができます。
カスタムアイコン: さまざまなアイコンやイメージリソースを渡して、デフォルトのものを置き換えることができます。アイコンのサイズと位置は変更されません。
カスタムフレームスタイル: さまざまなリソースファイルを渡して、デフォルトのフレームスタイルを置き換えることができます。フレームのサイズと位置は変更されません。
モジュールページ | 要素 | 説明 | 設定項目 | 設定項目の説明 |
ガイドページ (Web SDK のみ) | ページの背景色 | なし。 | guidePage: { backgroundColor: "", } | backgroundColor: CSS の色の値。 |
サンプルイメージ | サンプルイメージを置き換えることができます。 | guidePage: { circle1Img: "", circle2Img: "", leftBorderImg: "", faceImg: "", ocrImg: "", shelterFromImg: "", lightImg: "", phoneImg: "", } |
| |
ボタンの背景色、ボタンのフォントの色、ボタンの下部の網掛けの色 | なし。 | guidePage: { btnBgColor: "", btnTextColor: "", btnShadow: "", } |
| |
証明書収集ページ | ページの背景色 | なし。 | ocrPage: { ocrBgColor: "", } | ocrBgColor: CSS の色の値。 |
証明書ビューファインダーの色 | リソースを置き換えて、ID カードやパスポートのさまざまな形状や色に適応させます。 | ocrPage: { ocrPhotoBorderImg: "", } |
| |
証明書ビューファインダーのスタイル | ||||
アルバムアイコン | リソースを置き換えて、スタイルと色を変更します。 | ocrPage: { albumIconImg: "", } |
| |
マスクの色と不透明度 | なし。 | ocrPage: { maskColor: "", } | maskColor: CSS の rgba の値。 | |
マスク上のテキストの色 | なし。 | ocrPage: { tipColor: "", } | tipColor: CSS の色の値。 | |
終了アイコン | リソースを置き換えて、スタイルと色を変更します。 | ocrPage: { backIconImg: "", } |
| |
送信アイコン | リソースを置き換えて、スタイルと色を変更します。 | ocrPage: { submitIconImg: "", } |
| |
OCR 結果編集ページ | ページの背景色 | なし。 | ocrResultPage: { backgroundColor: "", } | backgroundColor: CSS の色の値。 |
上部のヒントの背景色とテキストの色 | なし。 | ocrResultPage: { topTipBgColor: "", topTipTextColor: "", } | topTipBgColor と topTipTextColor: CSS の色の値。 | |
OCR 情報項目のテキストの色 | なし。 | ocrResultPage: { ocrTextColor: "", } | ocrTextColor: CSS の色の値。 | |
入力フィールドの背景色 | なし。 | ocrResultPage: { inputBgColor: "", } | inputBgColor: CSS の色の値。 | |
マスクの色と不透明度 | なし。 | ocrResultPage: { maskColor: "", } | maskColor: CSS の rgba の値。 | |
終了アイコン | リソースを置き換えて、スタイルと色を変更します。 | ocrResultPage: { backIconImg: "", } |
| |
ボタンの背景色とフォントの色 | なし。 | ocrResultPage: { btnBgColor: "", btnTextColor: "", } | btnBgColor と btnTextColor: CSS の rgba の値。 | |
生体検知ページ | ページの背景色 | なし。 | facePage: { backgroundColor: "", } | backgroundColor: CSS の色の値。 |
「携帯電話を手に取り、まばたきしてください」というタイトルのフォントの色 | なし。 | facePage: { topTipColor: "", } | topTipColor: CSS の色の値。 | |
ビューファインダーの周りのプログレスバーの色 | なし。 | facePage: { processBarColor: ['', '', ''], } | processBarColor: 3 つの CSS の色の値の配列。値は、プログレスバーの色に、明るい色から暗い色の順に対応します。 | |
マスクの色と不透明度 | なし。 | facePage: { maskColor: "", } | maskColor: CSS の rgba の値。 | |
マスク上のテキストの色 | なし。 | facePage: { maskTipColor: "", } | maskTipColor: CSS の色の値。 | |
終了アイコン | リソースを置き換えて、スタイルと色を変更します。 | facePage: { backIconImg: "", } |
|