Skip to main content

 

アプリケーションの開発

 

 

OutSystems

テーマエディタを使用してアプリの外観をカスタマイズする

アプリでデフォルトのOutSystems UIテーマを使用している場合、テーマエディタを使用してアプリの全体的なスタイルをカスタマイズすることができ、そのままService Studioでカスタマイズされたテーマをプレビュー表示することができます。

テーマエディタを開くには、画面を開き、ワークスペースのツールバーにある[Theme Editor...]アイコンをクリックします。

テーマエディタを開く

画面とUI要素のデフォルト色をカスタマイズする

18種類のデフォルトカラーパレットから1つを選択するか、会社のロゴなどの画像のメインカラーに基づくカスタムパレットを使用します。

カラーパレットを選択すると、テーマエディタによって初期色、ヘッダー色、背景色が設定されます。他に提案される3色から1つを選択するかカスタム色を定義して、これらの各デフォルト色を変更できます。

テーマの色

Get palette from an image
画像(.png、.jpeg)のメインカラーに基づくカスタムカラーパレットを作成します。会社のロゴを選択して、ブランドが反映されたカラーパレットを作成します。
カラーパレット
18種類のデフォルトカラーパレットから1つを選択します。各デフォルトパレットには厳選された配色が用意されており、アプリのスタイルの基礎となります。
Primary
ウィジェットとOutSystems UIパターンの色を変更します。この色がアプリの画面全体のドミナントカラーとなります。
Background
画面の背景色を変更します。ただし、デフォルトのログイン画面とスプラッシュ画面は変更しません。暗い背景色を選択すると、テキストを読みやすくするためにフォント色が白色に変更されます。
ヘッダー
ヘッダーの背景色を変更します。

デフォルトフォントをカスタマイズする

6種類のフォントタイプから1つを選択し、フォントの基本サイズを変更します。

テーマのフォント

Font
アプリで使用するフォントタイプを変更します。
フォントサイズ:
アプリで使用するフォントの基本サイズを変更します。

構造と形をカスタマイズする

リアクテイブWebモジュールと従来のWebモジュールでのみ使用できます。

スペース、ヘッダーサイズ、枠線の形、枠線の影のスタイルを選択して、画面とUI要素の一般的な構造を変更します。

テーマの構造

Spacing
UI要素間のスペースを変更します。
Header size
ヘッダーの高さを40px~100pxで変更します。
ボーダー
UI要素の枠線の形を変更します。
Shadow
UI要素の枠線の影の効果を切り替えます。

ログイン画面の背景をカスタマイズする

ログイン画面の背景を単色、グラデーション、または画像に変更します。Common UIフロー内の[Login]画面を開き、スタイルが変更されたことを確認します。モバイルアプリでは、スプラッシュ画面の背景も変更されます。

ログイン画面

Background color
ログイン画面の背景色を変更します。
Background color gradient
ログイン画面の背景色に適用するグラデーションのタイプを変更します。このグラデーションは、背景画像には適用されません。
背景画像
ログイン画面の背景として使用する画像を選択します。背景画像に透明な領域が含まれる場合

単一のスタイルまたはネイティブスタイルを選択する

モバイルモジュールでのみ使用できます。

モバイルデバイスによってモバイルアプリの外観を変更するか、一貫したスタイルを維持します。

ネイティブスタイル

OutSystems UI look and feel
OSにかかわらずすべてのモバイルデバイスで単一のスタイルを使用します。
Native look and feel
AndroidデバイスとiOSデバイスで、各OSの一般的な外観に合わせた異なるスタイルを使用します。

テーマエディタのカスタマイズをリセットする

テーマエディタを使用して作成したすべてのスタイル変更を削除するには、[Reset Theme Editor]を押します。

テーマエディタによるカスタマイズをリセットする