チュートリアル 3: アプリのスタイルを設定する

ボタン ウィジェット App Maker の基本スキル~中級スキル

約 30 分

作成するアプリの概要

プロジェクト トラッキング アプリの一部を作成します。目標は、完全に機能するアプリを完成させることではなく、アプリのスタイル設定について学ぶことです。アプリのユーザーは次のことができます。

  • 新しいプロジェクト レコードを作成してデータを入力する
  • プロジェクト レコードを編集する
  • レコード間を移動する

ラボの内容

このチュートリアルでは、次の方法について説明します。

  • カスケーディング スタイルシート(CSS)を使用することなく、App Maker エディタでアプリのスタイルを設定します。全体的なスタイルのテーマを選び、ウィジェット用にあらかじめ用意された App Maker のスタイル バリエーションから選択します。
  • スタイル エディタで CSS 言語を使って記述することで、アプリのスタイルを設定します。必要に応じて、外部のスタイルシートを使用します。CSS を使えば、アプリのデザインのすべてを管理できます。

準備

スタイルを設定するプロジェクト トラッキング アプリの一部を作成します。

アプリを作成する

  1. 雇用主や学校から提供される G Suite アカウントにログインします。
  2. App Maker を開きます。
  3. 空のアプリを作成します。
    • App Maker に開始時のダイアログが表示されたら、[Create New App] をクリックします。
    • それ以外の場合は、[Menu] [New] [Blank Application] をクリックします。
  4. アプリの名前を変更します。デフォルト名の「Untitled App」を削除して「Style Your App」と入力します。

データモデルを作成する

  1. [Data] にカーソルを合わせ、[] をクリックしてモデルを追加します。
  2. Google Cloud SQL データモデルを作成します。データモデルに「ProjectData」と名前を付けます。

データモデルにフィールドを追加する

  1. [ProjectData] データモデルのタブツールバーで、[Fields] タブをクリックします。
  2. これらのフィールドを [ProjectData] データモデルに追加します。

    フィールド名 フィールド タイプ
    Project 文字列
    Owner 文字列
    DueDate 日付

UI のページ名を変更してデータソースを選択する

  1. [NewPage] の名前を「Projects」に変更します。
  2. プロパティ エディタで、[Projects] ページの [datasource] プロパティを「ProjectData」に設定します。

編集フォームとテーブルを追加する

  1. ウィジェット をクリックして、フォーム フォーム ウィジェット をページにドラッグします。[Edit form] を選択します。
  2. ウィジェット 、テーブル テーブル ウィジェット をページの編集フォームの下にドラッグします。編集フォームとテーブルの水平方向の位置を左端で揃えます。
  3. [Close] をクリックして、ウィジェットを閉じます。

アプリをプレビューする

アプリのスタイルを設定する前に、プレビューします。この時点では、マテリアル テーマのデフォルトのスタイル バリエーションがウィジェットに使用されています。

  1. 右上隅にある [Preview] をクリックし、新しいブラウザタブでアプリを実行します。
  2. [Allow] をクリックし、アプリに特定の情報の使用を許可します。

CSS を使わずにアプリのスタイルを設定する

App Maker を使用すると、CSS 言語で記述することなくアプリのスタイルが設定できます。次のような設定が可能です。

  • テーマ(アプリのすべてのウィジェットを対象にあらかじめ用意されているスタイル)の選択
  • 複数のバリエーション(ウィジェット タイプごとのスタイルのバリエーション)からの選択。デフォルトのテーマであるマテリアルには、多くのバリエーションが用意されています。たとえば、ボタンであれば、さまざまな背景色を持ったスタイルから選択でき、ラベルであれば、さまざまなフォントサイズから選択できます。すべてのウィジェットにはデフォルトのバリエーションがあります。

テーマを選択する

App Maker には、次のテーマがあります。

  • マテリアル - シンプルかつエレガントなスタイルです。ウィジェットの種類ごとに複数のスタイル バリエーションから選択できます。マテリアル テーマをそのまま使用することも、さらにカスタマイズすることもできます。
  • プレーン - 非常にシンプルなスタイルですが、スタイル バリエーションの選択肢はあまり多くありません。CSS に精通しており、CSS を使用してすべてのウィジェットに独自のスタイルを作成したい場合に使用できます。

アプリのテーマの変更方法:

  1. 左側のサイドバーで、[Projects] ページをクリックします。
  2. プロパティ エディタの上のタブバーで、[Style Editor] を選択します。
  3. [Theme] プルダウンから [Plain] を選択します。フォームとテーブルで使用されているスタイルがよりシンプルなものであることを確認してください。ラベルとボタンのどちらにも、用意されたバリエーションが 1 つしかありません。
  4. 今回のチュートリアルでは、マテリアル テーマを使用します。[Theme] プルダウン リストから [Material] を選択します。

特定のウィジェットを対象にスタイル バリエーションを選択する

スタイル バリエーションを選択して効果を確認します。

  1. 左下隅にある [Show outline] をクリックして、ウィジェットの外枠が表示されます。白いテキスト ボックスが白いパネル上にあるときなど、選択したバリエーションによっては、ウィジェットが見えなくなることがあります。外枠を表示させることで、ウィジェットが見つけやすくなります。
  2. [Edit Projects] フォームをクリックします。フォーム全体が選択されていることを確認します。青い選択ボックスがフォーム全体を囲んでいる必要があります。[Outline] タブで [Panel: Form1] が選択されているか確認してください。
  3. 左上隅の [Variant] プルダウン リストで [Paper] が選択されていることを確認します。
  4. [Variant] プルダウン リストから [Primary] を選択します。フォーム全体が青色になり、[Edit Project] ラベルが自動的に白色になるはずです。ただ、この自動変更の際にも、ラベルのバリエーションは変更されません。[Project]、[Owner]、[Target Date] ウィジェットも自動的には変更されません([Dark] バリエーションを選択すると各ウィジェットを白色にできますが、ここでは行わないでください)。
  5. [Edit Projects] ラベルをクリックします。
  6. [Variant] プルダウン リストから [DisplayOne] を選択します。これにより、[Edit Projects] ラベルのサイズが大きくなります。
  7. [Create] ボタンをクリックします。これは [Edit Projects] ラベルの右端にあるウィジェットです。青色のテキストが青色の背景にあるため、見えなくなっています。ボタンを選択した状態では、パンくずリストの最後のアイテムが Button: Form1CreateButton になります。
  8. [Variant] プルダウン リストで、ボタンに選択されているバリエーションをスクロールしていきます。一部のバリエーションには、マテリアルのアイコンが使用されています。[IconDark] のバリエーションを選択します。
  9. アプリをプレビューします。
  10. バリエーションを元に戻すには、[Undo] を 3 回クリックします。

CSS を使ってアプリのスタイルを設定する

ここでは、CSS を使用したアプリのスタイル設定について学びます。アプリのスタイルを設定する際に CSS のルールセットを記述しますが、ウェブアプリの開発の場合は、通常、ルールセットのセレクタで HTML 要素を参照します。App Maker の場合には、セレクタでウィジェットを参照するか、styleClasses プロパティを使用してルールセットをウィジェットに適用します。

CSS について

CSS は主に、「ルールセット」と呼ばれる言語単位で構成されており、スタイルを適用する場所と適用するスタイルを定義します。

ルールセットの例は、次のとおりです。

.app-Projects-Form1CreateButton {
      background-color: #B2FF59;
      color: #03A9F4;
    }
    

ルールセットでは:

  • 1 つ以上のセレクタで、スタイルを適用する場所を定義します。上記の例では、.app-Projects-Form1CreateButton がセレクタです。App Maker で、Projects ページの Form1CreateButton ボタンにスタイルを適用するように指定しています。
  • 宣言で、適用するスタイルを定義します。上の例では、背景色と色について、宣言で設定しています。

スタイルシートは、次の 3 つの方法でカスケードされます。

  • App Maker は、外部の CSS ファイルとスタイル エディタのコンテンツの両方について、ルールセットを上から下へ評価します。複数のセレクタが特定のウィジェットに同じ宣言を指定している場合、ルールセット内の宣言で CSS ファイルの下位に位置するものが、上位のものをオーバーライドします。

    たとえば、以下の 2 つのルールセットでは、最初にすべてのボタンを水色に指定し、次に Form1CreateButton ボタンをオレンジ色に指定しています。そのため、Form1CreateButton button はオレンジ色になります。すべてのボタンのテキストの色はダークグレーになります。この色は、Form1CreateButton ボタンによって上書きされることはありません。

    .app-Button {
          background-color: #A1C2FA;
          color: #212121;
         }
        .app-Projects-Form1CreateButton {
          background-color: #FFB74D;
        }
        
  • App Maker は、外部の CSS ファイルを [General Settings] で追加した順に評価します。

  • App Maker は、外部の CSS ファイルを評価した後、最後にスタイル エディタのコンテンツを評価します。

スタイル バリエーションをカスタマイズする

ウィジェットの種類ごとにスタイル バリエーションをカスタマイズして、ボタンやパネルの外観などを変えることができます。カスタム バリエーションを定めたあとに、[Variant] プルダウン リストから選択します。

カスタム バリエーションのクラスセレクタの構文は次のとおりです。

    .app-widget_type--widget_style
    

ハイフンが二重になっている点に注意してください。これは、後に続くものがバリエーションの名前であることを App Maker に示す記号になります。

例:

app-Button--Orange

ウィジェットの種類ごとにスタイル バリエーションを作成する方法:

  1. プロパティ エディタの上のタブバーで、[Style Editor] を選択して、スタイル エディタを開きます。ここで、アプリのスタイルを設定する CSS スタイルシートが作成できます。場合によっては、入力中にコードの補完機能が表示されます。[Ctrl + Space] を押して、コードの補完機能を表示させることもできます。

  2. ボタンにオレンジ色のバリエーションを追加します。次のコードをコピーしてスタイル エディタに貼り付けます。

    .app-Button--Orange {
          background-color: #FFB74D;
        }
        
  3. アプリで、[Create] ボタンをクリックします。

  4. [Variant] プルダウン リストから、[Orange] のバリエーションを選択します。[Create] ボタンがオレンジ色に変わります。

  5. [Variant] プルダウン リストから、[FlatColor] のバリエーションを選択します。

    ヒント: カスタム バリエーションを作成する代わりに、既存のバリエーションを上書きすることもできます。たとえばボタンの場合であれば、セレクタ .app-Button--Icon を使用してルールセットを追加し、別の背景色(シアンなど)を指定します。

    .app-Button--Icon {
          background-color: #4DD0E1;
        }
        

    [variant] アイコンを選択したすべてのボタンの背景色がシアンになります。

スタイル プロパティを使って特定のウィジェットのスタイルを設定する

ウィジェットの [styles] プロパティにより、特定のウィジェットに 1 つ以上のスタイルを簡単に適用できます。[styles] プロパティの [value] では、CSS のルールセットをクラス名で参照します。スタイル エディタ、外部のスタイルシート、もしくはその両方でスタイルを定義できます。

  1. スタイル エディタで、スタイルのルールセットを追加します。スタイルのクラス名をつける際には、アプリのスタイルを直接設定しないようにします(つまり、参照の指定時に app- を付けないようにします)。たとえば、次のように CSS ルールセットを追加します。

    .Green {
          background-color: #0F9D58;
          border-style: double;
          border-width: 4px;
          border-color: #000000;
          border-radius: 7px;
        }
        .Border {
          border: 4px solid #000000;
          box-shadow: 5px 5px 10px #BDBDBD;
          margin: 15px;
        }
        
  2. スタイルを設定するウィジェットを選択します。編集フォームで、[Create] ボタンをクリックします。

  3. [styles] プロパティの値として、適用するスタイルのクラス名をスペースで区切って入力します。

    1. プロパティ エディタ で、[Display] セクションを展開します。プルダウン リスト アイコン の横で、値 がすでに選択されているはずです。
    2. [styles] プロパティに、クラス名「Green」と「Border」を入力します。

外部のスタイルシートを使用する

外部のスタイルシートを使用して、ウィジェットのスタイルを設定できます。スタイル エディタの場合と同様に、外部スタイルシートには CSS ルールセットを含める必要があります。CSS ルールセットを使って、ウィジェットへのスタイルの適用や、ウィジェットの [styleClasses] プロパティを使用した適用を行います。外部スタイルシートで HTML 要素にスタイルを適用してルールセットを定めている場合は、App Maker のウィジェットのスタイルは設定できません

外部スタイルシートは、Google Cloud の App Maker がアクセスできる URL に配置する必要があります。URL は [General Settings] で入力します。たとえば、次のようにして、Google フォント用の CSS ファイルの URL を指定できます。

https://fonts.googleapis.com/css?family=Roboto+Condensed:regular,bold

Google Cloud の URL にスタイルシートを配置する

Google Cloud にまだ CSS ファイルがない場合は、App Maker で簡単に配置できます。

  1. ファイル マネージャーで、CSS ファイルを見つけます。
  2. App Maker で、[Settings] [Resources] をクリックします。
  3. テキスト ファイルを [Add] 領域にドラッグします。
  4. [Copy resource URL] をクリックします。
  5. [Settings] [General settings] をクリックします。
  6. [CSS URL] で、リソースの URL を貼り付け、[Add CSS] をクリックします。
  7. 他の CSS ファイルについては、手順 2〜6 を繰り返します。

アプリからスタイルシートへの参照を追加する

Google Cloud の URL にある外部スタイルシートを使用するには:

  1. CSS ファイルのリソース URL を取得します。
  2. [Settings] [General settings] をクリックします。
  3. [CSS URL] で、リソースの URL を貼り付け、[Add CSS] をクリックします。
  4. 他の CSS ファイルについては、手順 1〜3 を繰り返します。

次のステップ