第4章 フォームのテーマの作成

概要

このチュートリアルでは、以下の実行方法を説明します。

  • Drag & Drop Apps テーマの作成

デザイナーはテーマを使ってフォームの外観をカスタマイズできます。

要件

  • App Studio アカウント

4.1. チュートリアル

4.1.1. テーマのゼロからの作成

  1. 認証情報を使って Studio にログインします。
  2. Forms タブをクリックしてサブナビゲーションから Themes を選択します。
    テーマが作成されていないか、現行ユーザーにすでに作成されたテーマを参照するための十分な権限がない場合に、テーマの一覧は空白で表示されます。すでに作成されたテーマがある場合には、テーマの一覧にデータが事前に設定されます。一覧表示されるのは、テーマの名前、最終変更日、テーマを作成したユーザー、およびこのテーマを現在使用しているプロジェクトです。
  3. 新規テーマを作成するには、新規テーマボタンをクリックします。
    テーマ作成画面が表示されます。テンプレートを選択するためのオプションが表示されます。テーマをゼロから作成するには、いずれのテンプレートも選択しないでください。
  4. テーマの名前を入力します。
    テーマの説明を入力することもできますが、これは必須ではありません。

  5. Create をクリックします。

    注記

    名前フィールドを空白のままにすると、エラーが表示されます。すべてのテーマには名前が必要です。

  6. 新規に作成されたテーマを一覧から選択します。
    テーマのプレビューが自動的に読み込まれます。ここには、使用されるロゴ、フォント、色などのテーマ設定の各種の要素が表示されます。

4.1.2. テンプレートからのテーマの作成

テーマを作成する際には、ユーザーはテーマをゼロから作成することも、既存テンプレートからテーマを選択することも選択できます。テーマをゼロから作るよりも既存テーマを変更する方がはるかに時間を短縮できるため、開発者にとって既存テーマは役立ちます。

  1. テンプレートを使用するには、Forms タブをクリックしてからサブナビゲーションで Themes を選択します。
  2. 新規テーマを選択します。
    テーマ作成画面が表示されます。ここから、テーマをゼロから作成することも、テンプレートの一覧からテーマを選択することもできます。テンプレートを選択すると、テーマのプレビューが表示されます。ここでは、カラースキーム、ロゴ、文字の体裁などのカスタマイズ設定を確認できます。
  3. テンプレートを選択します。
  4. テーマ名を入力し、オプションでテーマの説明を入力します。
  5. Create Theme を選択します。

これで、テーマが既存テンプレートに基づいて正常に作成され、アプリと関連付けることができるようになりました。

4.2. テーマの編集

サイドバーから 編集 を選択します。これにより同様の画面が生成されますが、ここではテーマの各種セクションの値を変更することができます。

ロゴ

ユーザーは、ロゴ (Logo) セクションのファイルアップロードのオプションを使って独自のロゴをアップロードできます。ロゴとして使用されるイメージは jpeg 形式でなければなりません。

背景

背景 (Background) のセクションでは、テーマの異なるセクションの背景色を変更することができます。セクション名の上にある色の付いた四角をクリックし、ピッカーから色を選択することで変更ができます。色のピッカーを閉じると、更新されます。

文字の体裁

文字の体裁 (Typography) のセクションでは、フォントサイズとテキスト装飾をカスタマイズできます。選択したフィールドの色も、セクションタイトルの横にある色の付いた四角をクリックすると変更できます。四角をクリックすると、色のピッカーが表示されます。

境界線

ここではテーマの境界線 (Border) セクションのカスタマイズを実行できます。色、罫線のタイプ、罫線の幅に基づいてカスタマイズを実行できます。

注記

各セクションでの変更でテーマがどのようになったかをプレビュー表示するには、ドロップダウンメニューからフォームを選択し、これをシミュレーターでプレビューします。

テーマのカスタマイズを確認できたら、画面の下部にある Save ボタンをクリックします。これによりテーマが保存され、テーマのページにもどります 。