＊重要＊

Angularのアップデートで、内容の一部が非推奨項目になっています。

[Angular] Angular v20 の変更点まとめ

https://qiita.com/ksh-fthr/items/0027538156c663b5342f

それに合わせた内容を、新しく書く予定ですが、この連載は停止とさせていただきます。

------------------------------------

この投稿には、以下の内容があります。

・動的なデザイン変更

・CSS変数の宣言

・ngClassの紹介

・javascript（TypeScript)での利用

・javascript（TypeScript)でのCSS変数使用

・設定値(プロパティ)の注意点

１．動的なデザイン変更

HTMLとjavascriptで作成するWebアプリは、データ(例えば名前や所属など)と見え方(デザイン)に大別できますが、ionicとAngularによる開発はかなり簡単に、例えば、何らかのタイミングで背景を虹色にするなどの動的なデザイン変更ができます。

この目的のために知る必要があるものは

①変更したいHTML要素のid(複数のHTML要素に異なるデザイン適用ケース)

②変更したいCSSプロパティ(例えばbackground-image)

③変更したい条件(javascriptの変数の値)

になります。

２．CSS変数の宣言

CSS変数は、CSSクラス内で値を変更する目的で使います。

例えば、以下のようにcolorプロパティに対して--primary-colorと言うCSS変数を設定しておけば、--primary-colorの値を変更する事で文字色の変更ができたりします。

.sample{

color: var(--primary-color);

}

ionicにおいては、以下のファイルの:root{　}内でCSS変数の宣言をします。

src\theme\variables.scss

３．ngClassの紹介

Angularは、プログラミング部分とHTML部分を強力に結びつける事によりプログラム開発を容易にします。

ngClassもその機能の一つで、あるHTML要素に対して、条件次第で各CSSクラスを有効にしたり無効にしたりすることができます。

例

<div [ngClass]="{bg_white:flgWhite, bg_black:!flgWhite}">・・・</div>

上の例では、flgWhiteがtrueならば"bg_white"と言うCSSクラスが使用され、そうでないならば"bg_black"と言うCSSクラスが使用されます。

４．javascript（TypeScript)での利用

さて３．の例はhtml上にゴリゴリと色々なCSSクラスや条件を書き込むことになりますが、htmlと言う言語はそういう目的には向いていません。

そういう作業にこそjavascript（TypeScript)を使用するべきです。

そういう視点で見ると、[ngClass]の等号の右側はJSON形式である事に気が付きます。

ですので、例えば”fnRtnClass()”と言う関数を用意して

{

cssClass1:true;

cssClass2:true;

以下続く

}

と言うJSONデータを返すようにすれば

<div [ngClass]="fnRtnClass()">・・・</div>

と簡略化できます。

fnRtnClass()の内容をおおざっぱに書くと

function fnRtnClass(){

let objCSS={};

objCss["cssClass1"]=true;

objCss["cssClass2"]=true;

return objCSS;

}

といった感じになるかと思います。

５．javascript（TypeScript)でのCSS変数使用

上の方法では、CSS変数は使っていませんが当然ながら使いたくなる場合も出てきます。

例えば、色見本の各ボタンに色名とその色が表示されるようにしてみましょう。

色見本データ例

eachcolorsample:[

{'name':'indianred','val':'#cd5c5c'},

{'name':'lightcoral','val':'#f08080'},

{'name':'salmon','val':'#fa8072'},

{'name':'darksalmon','val':'#e9967a'},

{'name':'lightsalmon','val':'#ffa07a'},

{'name':'crimson','val':'#dc143c'},

{'name':'red','val':'#ff0000'},

以下略

]

HTML例

<div>

<ion-button

*ngFor="let each_color of eachcolorsample; index as iColor" id="color{{iColor}}"

class="font_transform_none"

[ngClass]="fnSetCSS('color'+iColor,each_color ['val'])">

{{each_color['name']}}

</ion-button>

</div>

CSS例

//ボタンのテキストカラーと背景色を別々にセット

.buttoncolor_var{

color:var(--color_var2);--ion-text-color:var(--color_var2);--color:var(--color_var2);

background-color:var(--color_var1);--background:var(--color_var1);

}

javascript例

function fnSetCSS(elID="", value=""){

objCss["buttoncolor_var"]=true;

//css変数(背景色)

const el = document.getElementById(elID) as HTMLElement;

el.style.setProperty('--color_var1', value);

//明度により文字色を設定

const arrNumbe=[parseInt(value.substring(1, 3),16),parseInt(value.substring(3, 5),16),parseInt(value.substring(5, 7),16)]

const maxColor=Math.max.apply(null, arrNumbe);

const minColor=Math.min.apply(null, arrNumbe);

const V=parseFloat(String(maxColor+minColor))/(2*255)

if(V<0.408){ //いろいろ試してこれ位と判断

el.style.setProperty('--color_var2', "#ffffff");

}else{

el.style.setProperty('--color_var2', "#000000");

}

return objCss;

}

６．設定値(プロパティ)の注意点

上の例では特にイレギュラーなケースもありませんが、様々なCSSプロパティを様々な方法でセットすると色々な問題が起こりましたので、その紹介です。

①プロパティ値を直接入力するときに末尾に”；”があるとうまくいかない

例:

うまく行かない

background-size: 10px 10px;

反映する

background-size: 10px 10px

②正しい変更値を入力した場合は問題ないが、正しくない変更値を入力した場合、javascript側で、正しいか正しくないかの判断は現時点では出来ないと考えるべきなので、変更前の値の削除を行ってから新しい値のセットを行う。(将来的にはほとんどのブラウザで可能になるとは思うが)

これは無効の値の入力時に、入力していない状態にするか、あるいは有効な最新の状態にするかで対応は分かれるが、個人的には入力していない状態にすべきと考える。

コード例

objCss["border_radius"]=true;

//まず削除（新しい値が無効の場合、前のクラスプロパティが残るのを防ぐ)

el.style.removeProperty('--border-radius');

el.style.setProperty('--border-radius', this.NewRadius);

③opacityの扱い

例えば、以下のようなCSSはうまく動く。

.sample{

background-color: #e5e5f7;

opacity: 0.8;

background-image: linear-gradient(135deg, #444cf7 25%, transparent 25%), linear-gradient(225deg, #444cf7 25%, transparent 25%), linear-gradient(45deg, #444cf7 25%, transparent 25%), linear-gradient(315deg, #444cf7 25%, #e5e5f7 25%);

background-position: 10px 0, 10px 0, 0 0, 0 0;

background-size: 10px 10px;

background-repeat: repeat;

}

しかし、この各プロパティをCSS変数として動的セットを試みるとopacity(透過度)がうまく解釈されない。

具体的には、background-color: #e5e5f7;を無視して、その下のHTML要素の色に対するopacityになる。

正直バグだと思うので、今後、修正される可能性(もしかしたら最新版では修正されている？）もあると思うが、変更したい要素の下に別な要素を配置してこちらでbackground-colorの設定を行うのが良いと思われる。