App Makerでウィジェットのスタイルを変更するいくつかの方法をまとめて紹介します


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

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

前回はコチラ。

App MakerのスタイルエディタでCSSを記述してスタイルを変更する方法
初心者向けにApp Makerのチュートリアルをお送りしています。今回はApp Makerのスタイルエディタを使って、CSSを記述することにより、ウィジェットのスタイルを変更する方法についてお伝えします。

スタイルエディタでCSSを記述してスタイルを設定する方法についてお伝えしました。

さて、App Makerのスタイルの設定の方法なのですが、実は他にもいろいろな方法があります。

具体的には

  • 独自のカスタムバリアントを作成して使用する
  • 既存のバリアントを上書きして変更する
  • ウィジェットのstylesプロパティで特定のスタイルを設定する

という方法です。

ということで、今回はこれらの方法をまとめて紹介します。

App Makerでウィジェットのスタイルを変更するための色々な方法です。

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

題材とするアプリについて

今回も、引き続き「プロジェクト管理」アプリが題材となります。
以下のように、フォームウィジェットとテーブルウィジェットを持つアプリです。

App Makerで作成したプロジェクト管理アプリ

テーマは「Material」ですよ~。

カスタムバリアントを作る

では、まずカスタムバリアントを作る方法です。

つまり、独自のバリアントを作って、「バリアント」ドロップダウンリストの選択項目として追加することができます。

スタイルエディタに以下のセレクタでCSSを記述すれば、そのウィジェットタイプについてのカスタムバリアントになります。

.app-ウィジェットタイプ--バリアント名
  1. 左サイドバーから「スタイルエディタ」タブを選択
  2. Page styleかGlobal styleに下記CSSを入力
  3. 任意のボタンをクリックして選択
  4. 「バリアント」ドロップダウンリストを開いてカスタムバリアントが追加されていることを確認
  5. カスタムバリアントを選択する

App Makerでカスタムバリアントを作成する

すると、カスタムバリアントを選択したボタンは、CSSで指定した通りのスタイルが適用され、オレンジ色になります。

既存のバリアントの上書き

すでに登録されている既存のバリアントを上書きすることもできます。

カスタムバリアントと同様のセレクタの記述を使い

.app-ウィジェットタイプ--バリアント名

このバリアント名を、上書きしたいバリアント名にすればOKです。

試しにやってみましょう。

  1. 左サイドバーから「スタイルエディタ」タブを選択
  2. Page styleかGlobal styleに下記CSSを入力
  3. 「CREATE」ボタンをクリックして選択
  4. 「バリアント」ドロップダウンリストから「Icon」を選択する

App Makerで既存のバリアントを上書きする

すると、もともとボタンに割り当てられていたバリアント「Icon」が、青い丸のアイコンに変更されます。

stylesプロパティを用いて特定のウィジェットをスタイルする

続いて、stlyesプロパティを使ってウィジェットごとにスタイルを設定する方法です。

この方法は、スタイルエディタで「Green」とか「Border」とか単純なクラスをセレクタとしたCSSの宣言をしておいて、各ウィジェットのstylesプロパティにそのセレクタを設定して反映させる方法です。

スタイルエディタでCSSを入力

まず、スタイルエディタで以下のCSSを入力します。

セレクタには、これまで紹介したような「app」や「ウィジェットタイプ」などの記述はせずに、シンプルにクラス名だけを指定します。

App Makerでstylesプロパティ用のCSSを入力する

プロパティエディタでstylesプロパティを設定

次に、右サイドバーを「プロパティエディタ」タブに切り替えます。任意のボタンを選択して、「Display」というセクションを開くと「styles」プロパティの欄がありますので、そこをクリックします。

App Makerでプロパティエディタのstylesプロパティをクリック

すると、「List Editor」というダイアログが開きますので、入力欄に「Green」と入力して「ADD」をクリックします。

「Green」がリストに追加されますので、同様に「Border」も「ADD」して「DONE」をクリックします。

App MakerでstylesプロパティのList Editorを入力

これで、stylesプロパティの値は「Green, Border」となり、ボタンのスタイルとしてstylesプロパティの設定が適用されます。

App MakerでstylesプロパティのCSSで適用された

まとめ

以上、App Makerでウィジェットのスタイルを変更するための3つの方法をお伝えしました。

これまでの記事で紹介した方法もまとめると、ウィジェットごとのスタイルを変更するには

  1. 既存のバリアントを選択する
  2. スタイルエディタで特定のウィジェットをセレクタにしたCSSを入力する
  3. スタイルエディタでグローバルクラスを使ってウィジェット種類ごとにCSSを設定する
  4. カスタムバリアントを作成して、バリアントとして適用する
  5. 既存のバリアントを上書きして適用する
  6. スタイルエディタで記述したCSSを、プロパティエディタのstylesプロパティで設定する

といった方法があるわけです。

いっぱいありますね…目的に応じて使い分ける必要がありますが、通常使う方法としてはいくつかに絞っておいたほうが良いかもですね。

個人的には1~4をメインで使うことになるかなと思っています。

では次回ですが、スタイルを外部CSSファイルで指定する方法をお伝えします。

App Makerで外部CSSファイルでスタイルを設定する方法と適用の優先順位
初心者向けの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ファイルでスタイルを設定する方法と適用の優先順位

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

コメント