App Makerのスタイルの基本とテーマを使って全体のスタイルを変更する方法


style

photo credit: wuestenigel White short Fur Background via photopin (license)

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

初心者向けApp Makerのチュートリアルをお送りしています。

前回はこちらの記事でした。

App Makerのウィジェットにデフォルトで仕込まれているバインディングとアクションが超ありがたい
初心者向けにApp Makerのチュートリアルをお送りしています。今回は、App Makerのウィジェットにデフォルトで仕込まれているバインディング、またはアクションという機能についてお知らせします。

ここまでが、モデルを作成とウィジェットを配置というアプリ作成の基本中の基本ですね。

今回からは、「スタイル」をテーマに進めていきます。

一般的なWebアプリはそのデザイン(スタイルといいます)を変更するのに「CSS」と呼ばれるもので、ページを構成するパーツごとに色、文字サイズ、フォント、配置その他いろいろについて設定をします。

ただ、CSSを触るには、それなりの知識が必要になります。

App MakerではCSSによりスタイルを設定する方法もありますが、CSSを書かずともウィジェットのスタイルを変更するためのいくつかの方法が用意されているのですよ。

まず、今回はApp Makerのスタイルについて、またテーマという機能を使って全体のスタイルを設定する方法についてお伝えします。

では、行ってみましょう!

ベースとなるアプリを作成する

まず、題材となるアプリ「プロジェクト管理」を作成していきましょう。

以下のような構成のシンプルなアプリです。

  • モデル:Google Drive Tableモデルで、フィールドとして「プロジェクト名」「オーナー」「期限」を持つ
  • ウィジェット:入力・編集用のフォームウィジェットと、表示用のテーブルウィジェット

これまでの記事の復習のようなポジションになりますので、思い出しながら進めてみてください。

新規アプリを作成する

まず、新規アプリを作成します。

手順は以下の通りです。

  1. App Makerを開く
  2. 「Create New App」を選択
  3. Select a templateから「Blank Application」を選択
  4. アプリ名をクリックし「プロジェクト管理」に編集

ここまで進めると以下のような状態になるはずです。

App Makerで新規アプリを作成する

モデルを作成する

続いて、データソースとなるモデルを作成します。

  1. DATAの「+」をクリック
  2. Create modelダイアログで「Google Drive Table」を選択して「NEXT」をクリック
  3. Create Drive Tables Modelダイアログで、Model nameに「ProjectData」と入力して「CREATE」をクリック
  4. 「ADD FIELD」から以下3つのフィールドを作成
Type Name Display Name
String Project プロジェクト
String Owner オーナー
Date DueDate 期限

ここまで進めると、以下のようなモデルを作成できているはずです。

App Makerでモデルを作成する

後日注記

2018年4月から本記事で紹介している「Google Data Tables」は、残念なことに使用できなくなりました。

現在は、「Google Cloud SQL」の使用が推奨されています。

Models Overview  |  App Maker  |  Google Developers

インスタンスの立ち上げが必要、かつ使用料も発生しますので、色々と導入のハードルが高くなってしまいました…。

Cloud SQL - MySQL および PostgreSQL リレーショナル データベース サービス  |  Cloud SQL  |  Google Cloud
Google Cloud SQL は、MySQL データベースや PostgreSQL データベースの設定、管理を簡単に行うことができる、フルマネージド リレーショナル データベース サービスです。

「Google Data Tables」または、導入のし易いデータモデルの追加を切に願います。

ページの設定

続いて、ページの設定です。すでに「NewPage」がありますので、そのリネームとデータソースの継承を設定します。

  1. NewPageのメニューから「Rename」をクリック
  2. 「Rename Page」ダイアログで「Projects」に変更
  3. Property Editorの「datasource」をクリック
  4. Choose datasourceから「ProjectData」を選択、ページにデータソースとして継承する

App Makerでページを設定する

ウィジェットの追加

設定したページにウィジェットを設置していきます。

まず、フォームウィジェットです。

  1. Widgetsアイコンをクリックして、Formウィジェットをドラッグ
  2. Choose datasourceは「inherited: ProjectData」のままで「NEXT」をクリック
  3. Choose form typeで「Edit」を選択して「NEXT」をクリック
  4. Choose from fieldsはデフォルトのままで「FINISH」をクリック

続いて、テーブルウィジェットです。

  1. Widgetsアイコンをクリックして、Tableウィジェットをドラッグ(フォームの下に左端を揃えて配置)
  2. Choose datasourceは「inherited: ProjectData」のままで「NEXT」をクリック
  3. Choose table columnsはデフォルトのままで「NEXT」をクリック
  4. More optionsはデフォルトのままで「FINISH」をクリック

これでアプリのベース部分は完成です。

App Makerでフォームとテーブルを配置する

プレビュー

では、プレビューして確認してみましょう。初回なので、各種認証が必要になります。

  1. 「PREVIEW」ボタンをクリック
  2. アカウントを選択して、Googleドライブへのアクセスを「許可」
  3. アプリ「プロジェクト管理」の「REVIEW PERMISSIONS」、アカウントを選択して、プロジェクト管理へのアクセスを「許可」

プレビューすると以下のような画面になります。

App Makerでプレビューする

現在は何のスタイルもしていないので、デフォルトの状態です。

これを、今から変更していきます。

スタイルを変更する

CSSを使わずにスタイルを設定する方法は二つあります。

  • テーマを変更して全体のスタイルを変更する
  • ウィジェットごとにバリアントを変更する

App Makerには以下の二つのテーマがあります。

  • Material:シンプルなスタイルのセット。各ウィジェットについて複数のバリアントを選択でき、さらにそれをカスタマイズすることもできる。
  • Plain:バリアントの選択肢がほとんどないプレーンなスタイルのセット。CSSを使用して独自のスタイルを設定するのに適している。

デフォルトの状態(前述のプレビューがそうです)では、テーマ「Material」が選択されています。

Materialを使用していれば、さらにウィジェットごとにバリアントを選択することで、例えばフォームウィジェットの背景色を変えたり、ラベルの文字色や文字サイズを変えたりといったことが可能になります。

今回は、テーマを変更する方法を確認していきます。(ウィジェットごとにバリアントを変更する方法は次回以降お伝えします。)

テーマを変更する

では、テーマを変更する方法を見ていきましょう。

ページが選択されている状態で、「Style Editor」タブ内で変更をすることができます。

手順はこちらです。

  1. 左サイドバーから「Projects」ページをクリック
  2. Property Editorのタブから「Style Editor」のアイコン(パレットのアイコン)をクリック
  3. Style Editorの右上、ドロップダウンリストが「MATERIAL」になっているはずですので、それをクリック
  4. ドロップダウンリストから「Plain」を選択

App Makerでテーマを選択する

変更すると、エディター上でもスタイルが変更されていることを確認できます。より、シンプルというか、装飾がない感じになりますね。

App MakerでテーマをPlainにした

まとめ

以上、App Makerでのスタイル変更について、またテーマにより全体のスタイルを変更する方法をお伝えしました。

テーマはMaterialとPlainしかありませんので、テーマだけ変更するという操作はあまりしないかもしれません。

なので、現時点では

  • Materialを選択して、ウィジェットごとにバリアントを変更して好みのスタイルにしていく
  • PlainまたはMaterialをベースに、CSSを使って好みのスタイルにしていく

このどちらかの方針で進めることになるのだと思います。

ですが、もしかしたら今後、新たなテーマが追加されるかも…なんともいえませんが、期待しちゃいますね。

さて、次回ですが、テーマMaterialをベースにウィジェット単位でバリアントを変更していく方法をお伝えします。

App Makerでウィジェットごとにバリアントを設定してスタイルを変更する方法
App Makerの初心者向けのチュートリアルを進めております。今回は、App Makerでバリアントを変更することで、CSSを使わずにウィジェットごとのスタイルを変更する方法についてお伝えします。

どうぞお楽しみ!

連載目次:はじめてのスタイル~AppMaker初心者向けチュートリアル

初心者向けチュートリアルの第3弾。このシリーズではApp Makerで作成したアプリのウィジェットに、好みのスタイルを設定する方法についてお伝えしていきます。
  1. App Makerのスタイルの基本とテーマを使って全体のスタイルを変更する方法
  2. App Makerでウィジェットごとにバリアントを設定してスタイルを変更する方法
  3. App MakerのスタイルエディタでCSSを記述してスタイルを変更する方法
  4. App Makerでウィジェットのスタイルを変更するいくつかの方法をまとめて紹介します
  5. App Makerで外部CSSファイルでスタイルを設定する方法と適用の優先順位

  投稿者プロフィール

タカハシノリアキ株式会社プランノーツ 代表取締役
株式会社プランノーツ代表、コミュニティ「ノンプロ研」主宰。1976年こどもの日生まれ。東京板橋区在住。「ITで日本の『働く』の価値を上げる!」をテーマに、VBA&GASの開発、講師、執筆などをしております。→詳しいプロフィールはコチラ
★ご依頼・ご相談はお気軽にどうぞ!→お問い合わせはコチラ
★フォロー頂ければ嬉しいです。

コメント