いつもお世話になっております。
先日、Vuforia Studioを使ってビューア（Vuforia View）で表示するARエクスペリエンスを作成する機会を頂きました。
試してみるといろいろとできたので、今後のヒントになればと思いメモを残します。
はじめに
使った環境は以下です。
- Vuforia Studio : Version 8.4.7 (8.4.7.4459)
- Vuforia View : Version 8.4.60(1729)
- iPad Pro (10.5 inch)
わかったこと
Vuforia StudioのMobile向けのARコンテンツではIonic framework 1.3.3の機能を使って装飾を変更できました。
例えば、ボタンのTextを文字ではなくアイコンで表現したいといった場合は、Ionicons CheatsheetにあるClassnameをClassに記述するだけでOKでした。
-
Vuforia Studio標準のボタンを配置した状態
※デフォルトのボタンをそのまま使うとこんな感じです。 -
文字の代わりにIonicのアイコンを使う
※ion-beerを追加することでジョッキが表示され、iconBtnではフォントサイズを指定してます。 -
Ionicでボタンの色や表現を装飾する
※ビールは黒よりラガーが好きな人もいるので色も変えてみます。
ここではIonicで用意されているbutton-energizedで色を、button-outlineでアウトライン型のボタンスタイルを適用しました。
まとめ
色とかならCSSを自分で書いても変更できますが、Ionicで定義されている内容をClassに指定するだけで変更できるなら楽です。
後述のリンクからIonic frameworkのCSS Componentsを参照すると、利用できるサンプルが詳しく説明されているのでわかりやすいです。
準備されているアイコンに気に入るものがない場合、Image Widgetを使ってアイコン画像を指定するという手もあります。
その場合は以下のをSTYLES > Applicationに記述し、Image WidgetのClassにimgButtonを記述すればボタンのような動きをつけることができます。
/* 画像をホバーした /'
.imgButton:hover{
/ 透明度を上げることで、画像の色を薄く見せる。/
opacity:0.5;
/ リンクをホバーしたときのカーソルにする。/
cursor: pointer;
}
/ 画像をクリックした瞬間 /
.imgButton:active{
/ 要素を若干下に下げることで、押した感じを出す。/
/ 今いる位置から相対的に3px下に配置する。*/
position: relative;
top: 3px;
}
リンク
Ionic frameworkのドキュメントへのリンク
https://ionicframework.com/docs/v1/overview/#css-sass
Ionicon Cheatsheetへのリンク
https://ionicons.com/v1/cheatsheet.html