Vuforia Studio CSS備忘録：ボタンウィジェットのスタイルを変更する

#はじめに

Vuforia Studioでは、よく使うウィジェットに、ボタンウィジェットがある。そのボタンウィジェットのスタイルの変更例を備忘録としておく。

#前提

Vuforia Studioで、ARコンテンツを独力で作成できる人が対象。

#ボタンを配置する

ボタンウィジェットをドラッグ＆ドロップで 2Dキャンパスの中央パネルに配置する。スタイル確認用に2つ配置しておく。

#すべてのボタンのスタイルを一括変更する

ボタンウィジェットのスタイルは、button クラスに設定すると一括変更できる。

###色を変更する

画面左の「アプリケーション」をクリックしてスタイル編集を開き、以下のコードを追加する。

// ボタンウィジェット全体へのスタイル設定
.button {
  border-color: navy;      // 枠線色
  background: royalblue;   // 背景色
  color: white;            // 文字色
  margin: 1px;             // 枠の外の余白
}

プロジェクトを保存すると、表示に反映され、下図のようになった。一括で変更されている。

#個々のボタンのスタイルを変更する

button クラスとしていた設定を、button-1 クラスに変更する。

// ボタンウィジェットのスタイル設定
.button-1 {
  border-color: navy;      // 枠線色
  background: royalblue;   // 背景色
  color: white;            // 文字色
  margin: 1px;             // 枠の外の余白
}

そして、ボタンウィジェット（ID: bottun-2）のクラスに、「button-1」を入力する。保存して表示に反映すると、以下のようになった。

###ボタンの高さを変更する

height を指定してみる。まずは大きくしてみる。

// ボタンウィジェットのスタイル設定
.button-1 {
  border-color: navy;      // 枠線色
  background: royalblue;   // 背景色
  color: white;            // 文字色
  margin: 1px;             // 枠の外の余白
  height: 100px;           // ボタンの高さ
}

大きくなった。

この結果で比較すると、左のボタンのデフォルトの高さは、100pxの半分近くのようだ。そこで、デフォルトの高さよりも小さくなるように、height: 25px; と小さくしてみる。
ところが、デフォルトよりも高さは小さくならない。

これは、min-height: 47px; と、line-height: 42px; という設定があるからのようだ。ボタンが小さくなると押しにくくなることを考慮して、これらの設定があるものと思われる。ただ、例えばスマホ画面やウェアラブルデバイス画面のように画面サイズがそれほど大きくない場合は、高さをさらに小さくしたい場合がある。そこで、高さを小さくする設定を試す。

// ボタンウィジェットのスタイル設定
.button-1 {
  border-color: navy;      // 枠線色
  background: royalblue;   // 背景色
  color: white;            // 文字色
  margin: 1px;             // 枠の外の余白
  height: 25px;            // ボタンの高さ
  min-height: 25px;        // ボタンの高さ最小値（デフォルトは 47px）
  line-height: 23px;       // 文字の行の高さ（デフォルトは 42px）
}

おぉ、ボタンの高さが小さくなった！

###ボタンの横幅を変更する（ボタン上の文字を基準に）

width: 100px; を追加してみる。横幅が大きくなった。

次に、横幅を小さくするにあたりボタン表示をよく見てみると、枠内で文字の左右に余白がそこそこある。これは、paddingによる文字の左右余白 12px の設定があるからのようだ。width: 100px; を削除して、 padding: 0 1px; を追加してみる（左の 0 は文字の上と下の分、右の 1px は文字の左と右の分）。「ボタンB」の４文字が窮屈だが表示された小さいボタンになった。

今度は、ボタンウィジェットのテキストの「ボタンB」を「B」だけにしてみる。文字の左右にまた余白が現れた。

これは、 min-width: 52px; の設定があるためのようだ。min-widh: 25px; を追加してみる。

// ボタンウィジェットのスタイル設定
.button-1 {
  border-color: navy;      // 枠線色
  background: royalblue;   // 背景色
  margin: 1px;             // 枠の外の余白
  color: white;            // 文字色
  height: 25px;            // ボタンの高さ
  min-height: 25px;        // ボタンの高さ最小値、デフォルトは 47px）
  line-height: 23px;       // 文字の行の高さ（デフォルトは 42px）
  padding: 0 1px;          // 枠内余白（デフォルトは、上下 0、左右 12px）
  min-width: 25px;         // ボタンの横幅最小値、デフォルトは 52px）
}

これで、縦 25px、横 25px のボタンになった。

この小ささで実用的か？ は実際の使用時の検討に任せるとして、ともかく、ボタン上の文字の周囲の余白をなるべく小さくするボタンにすることが可能であることはわかった。

###ボタンの横幅を変更する（配置先レイアウトに応じた横幅にする）

今度は、ボタンの横幅を、配置先のレイアウトの横幅に応じた自動設定にする。そのようなスタイル設定が Vuforia Studio には用意されている。
各ボタンを選択して、画面右のクラスに、「button-block」を追加する。


編集画面上ではこの設定は反映されていないが、プレビューを見ると、配置先の中央パネルの幅に応じたボタン横幅になっている。スタイルに width 設定があっても、それよりもこちらの自動設定が優先されるようだ。

###文字のフォントスタイルを変更する

font-size: 24px; // 文字サイズ
font-weight: bold; // 文字の太さ

などで、デフォルトのフォントサイズ 16px ではない他のフォントスタイルに変更できる。尚、これらを変更すると、height、min-height、line-height、width, min-width, padding、などと大きさの整合確認が必要な場合がある。
また、font-family でフォントの指定もできるが、プロジェクトを実際に実行するデバイスがそのフォントを利用できるかに依存する点に注意が必要と思われる。

###ボタンとフォントの大きさを簡単に変更する

Vuforia Studio では、button-small と、button-large の２つのクラスが用意されている。
ボタンB のクラスに button-small を入力してみる。フォントサイズは 12px とのこと。

ボタンB のクラスに button-large を入力してみる。フォントサイズは 20px とのこと。

尚、フォントだけでなく、幅と高さも相応に変更される。

###ボタンの配色を簡単に変更する

Vuforia Studio では、ボタンの配色例が用意されている。

上図の上から順に、ボタンのクラス欄に「button button-dark」「button button-positive」「button button-balanced」「button button-assertive」を入力している。何を用意してあるかは、画面左上の「テーマ」をクリックして表示し確認できる。

###配色を簡単に変更する＋フォントサイズを変更する

例えば、button-balanced で背景色を緑にしつつ、フォントサイズを変える場合、ボタンのクラスに、button button-balanced button-large と入力することで組合せての設定ができる。

button-largeだと、ボタンサイズも大きくなってしまう。フォントサイズだけ大きくしたいのであれば、フォントサイズを指定するクラス名（下記の例では font-20）を、button-large の代わりに入力すればよい。

// 文字サイズ設定
.font-20 {
  font-size: 20px;         // 文字サイズ
}

###配色を簡単に変更する＋ボタンの大きさを変更する

例えば、以下では、ボタンの大きさを button-2 クラスで定義して、ボタンウィジェットのクラスには、button button-balanced button-2 を設定している。

// ボタンウィジェットのスタイル設定
.button-2 {
  margin: 1px;             // 枠の外の余白
  height: 30px;            // ボタンの高さ
  min-height: 25px;        // ボタンの高さ最小値、デフォルトは 47px）
  line-height: 23px;       // 文字の行の高さ（デフォルトは 42px）
  padding: 0 4px;          // 枠内余白（デフォルトは、上下 0、左右 12px）
  min-width: 25px;         // ボタンの横幅最小値、デフォルトは 52px）
}

###ボタンの背景を(半)透明にする

上記の簡単配色の場合は、クラス欄にさらに、 button-outline を追加することで、背景を透明にできる。

または、スタイルの設定にて、background: rgba(65, 105, 225, 0.7); とすることで、背景色を(半)透明にできる。（0.7 を 0 にすれば透明にできる）

opacity: 0.7; などを追加してボタン全体を半透明にできる。

###ボタン全体を透明にする

ボタンのクラス欄に、button-clear を追加すると、押すことが可能なボタンを非表示にできる。ボタンの表示プロパティをオフにするとボタンは押せなくなってしまう点が、同じ非表示でも異なる。写真やイラストとの重ね合わせで写真やイラストに複数のボタンを埋め込んだり、ウェアラブルデバイスでボタンは見えないがボイスコマンドを使えるようにする、などの応用が考えられる。

プレビューや Vuforia View での再生時は非表示になるが、押して JavaScriptファンクションを実行できる。

尚、opacity: 0.01; でも、同様に透明なボタンにできる。

#ボタンの構成要素

ボタン表示は、以下のような CSSボックスモデルの要素から構成されているとのこと。Vuforia Studioの場合、ボタンサイズを小さくしたい場合には、min-height（heightの最小値）と line-height がデフォルトで設定されていることで高さの制限があり、min-width（widthの最小値）と padding がデフォルトで設定されていることで横幅の制限がある点に注意が必要だった。

#ボタンにイメージを使う

これまでは、文字を表示するボタンについて記してきた。次は、ボタン上にイメージを表示する方法について記す。

###イメージボタンにする（イメージを登録して使う）

・CSS を使用したイメージボタンの作成 @Vuforia Studioヘルプ
に、作成例が記載されている。これを参考に、試してみる。以下のクラスを追加する。

// イメージを背景に使う設定
.image-1, .image-1.activated {
  background-image: url(#{$resources}/Uploaded/btn_1_sm.png); // 背景イメージ
  background-repeat: no-repeat;  // 背景イメージは繰り返しなしで拡大
  background-position: center;   // 背景イメージの位置
}

// クリック時にイメージ背景を暗くする設定
.image-1.activated {
  	-webkit-filter: opacity(30%) drop-shadow(1px 1px 0px gray);
}

この例では、 btn_1_sm.png というファイル名のイメージを使う。そこで、画面左下のリソースに緑の＋ボタンをクリックしてファイル選択してアップロードする。

ボタンウィジェットのクラスに、上記の image-1 を入力して指定する。すると、ボタンの背景として登録したイメージが表示された。この方法では、ボタンウィジェットのテキストに表示文字を指定すれば、イメージと文字の組合せボタンを作成できる。

プレビューしてみる。クリックすると、暗くする設定の通りに暗くなった。

###アイコンボタンにする（Ionicアイコンを使う）

・ 【AR】Vuforia Studioで作った画面を少し飾り付けたい by PentagonJrさん
では、Ionic framework の CSS Components を使い、文字ボタンでなくアイコンボタンに変更する方法が記載されている。こちらも是非ご一読を。

###ボタンウィジェットでなく、切り替えボタンウィジェットを使う

実は、この切り替えボタンウィジェットを使う方法が一番簡単な方法だと思う。
切り替えボタンウィジェットをドラッグ＆ドロップで配置後、ボタンを押したときのイメージ、ボタンを押していないときのイメージ、背景色、ボタンを押したときの背景色、幅、高さ、などを指定すればよい。押しているときと押していないときの値を同じにして、イベントのクリックの JS に実行する JavaScriptのファンクションを指定すれば、ボタンと同様に機能する。

#おわりに

コンテンツの作成工数を考えると、デフォルトのボタンのままで使えるのであれば、それが最もよい。しかし、画面サイズの制約、色合いの関係、半透明にして背後も見えるようにする、などでボタンのスタイルの変更が必要な場面はある。スタイルの変更には、この備忘録が必ず役に立つはず。色、サイズ、透明化など用意済のクラスを指定することで簡単に変更できればよし。どうしても詳細なスタイル設定が必要となれば、この備忘録を参考に設定できるだろう。

#参考

・ボタン @Vuforia Studioヘルプ

・CSS を使用したイメージボタンの作成 @Vuforia Studioヘルプ

・ 【AR】Vuforia Studioで作った画面を少し飾り付けたい by PentagonJrさん

・Vuforia Studio で作成できるAR例～タブレットAR例、3D形状の特徴で実物にARを重畳（モデルターゲット）、2D画面上の表示や操作を組合せ