こんばんは。声だけイケメンあきらです。
声だけって自分で書くのも覚悟はいりますが、リアルで言われたことがないということは、声もイケメンじゃないということでしょう。
ははっ！
さて、先日登壇した「コンポーネント祭」で見せたデモ内容でも載せまして、
ここに訪れた奇特な方に披露したいと思います。
実はあのデモすごいテキトーに作ったんです。
色とか大きさとかテキトーにも程がある。
ワイのデザインはあんなもんじゃない！
映像を見返して「ダセェ」の一言だったので作り直します。
ちなみにワイは「透明度」を巧みにつかっています。
作ったもの
作ったのは「コンポーネントでメニューボタンつくった！」ってやつです。
「えっ？わざわざコンポーネントで？ｗｗｗｗｗｗアホじゃんｗｗｗ」って思われる方いるかもしれませんが、
あなたがたが考えてるボタンとは違うんです。
私は1つボタン挿入するだけなんて満足しないんだから！
下のようなオシャレに見えるボタンを作りましたー
レイヤーで考えるとこんな感じですね。
1.フツーに作ると
普通に作る場合は
- ボタン作成
- ボタン複製してちょっとずらす
- 上の透明度を上げる
- label作成
- グループ化
- コピペ
で作成できます。
ボタン作成
まずオーサリングメニューからボタン作ります。
プロパティはこんなん。
ボタン複製してちょっとずらす
そのままですねー
複製してずらして、
下のボタンの色とフォントを設定する。
こんな感じです。無効時のFillを黒にして70％くらい。
モードを「無効」に。
上の透明度を上げる
透け感！ですね。
ガラスをイメージしてます。
高級感だしていく感じですね。
上のFillを60％くらいに。
label作成
スタイリッシュな感じで作ってきたので、
説明はきちんとつけなきゃね！ここ日本だし！筆記体読めないし！
グループ化
一個作れたらとりあえずグループ化しましょう。
コピペ
コピペしましょう。
スタンプみたいにペタペタはって、Labelとbuttonを編集しよー
で完成。
はい、メンドクサイでしょう？
ボタン1つつくればええやん！開発工数無駄にかけんなよボケェって思うでしょう？
3倍速でつくればいいんですよ。
2.Galleryで作る
さっきのやつGalleryでつくっちゃいましょう。
こうやって作ってる人あんまり見ないんだな。
ってことでかく！
Gallery作る
まずはGalleryつくります。今回は縦フォームで作ります。
さっきのパーツを1つ入れる
当然1つしか作れないですけど、とりあえずそんな感じで。
テーブルを直打ち
前の勉強会で知ったけど、直打ちしても作れること知らない人多いんですね。
テーブルを扱うときはブラケットと呼ばれる『 [ ] 』で配列全体を、カーリーブラケット『 ｛｝ 』で行全体を表します。
下のテーブルを
Items＝[
{
txt: "Today",
txtjp: "本日の" & Char(10) & "予約"
},
{
txt: "Customer",
txtjp: "顧客一覧" & Char(10) & "予約"
},
{
txt: "Karte",
txtjp: "カルテ"
}
]
これで下の表のようなテーブルが出来上がります。
この一行一行がレコードってやつですね。
Galleryに直打ちの場合だとThisitem.Value.「列名」
という風に呼び出すと反映されます。
3.コンポーネントで作る
そしてやっとコンポーネント！
やっときた！
Navigateプロパティとラベルの引数を指定するだけで出来上がる！
誰でもこのオシャレボタンを実装できる！
っていうコンポーネントを作っちゃいます。
作成
まずTemplateを新しく作成してさっき作ったGalleryをコピペします。
そしてコンポーネントをGalleryのサイズに合わせておきましょう。
「新しいカスタムプロパティ」をクリック
表示名、名前、説明を付けて、Data型をテーブルにします。
ほんで保存。
するとプロパティが出来上がります。
作成したカスタムプロパティに記述します。
型の記述なのでtext型はダブルコーテーションで作る。
Screen指定の場合はコンポーネント上で指定できる唯一のScreen名の「App.ActiveScreen」を使用
※Hiroさんに教えてもらいました！感謝！だいすき！
GalleryのItemsプロパティに「コンポーネント名. カスタムプロパティ名」を記述
上のボタンのプロパティに以下記述
Text＝ThisItem.Value.txt
OnSelect＝Navigate(ThisItem.Value.Navi,ScreenTransition.Fade)
labelのプロパティに以下記述
Text＝ThisItem.Value.txtjp
これで完成です。
反映
画面に戻って呼び出してみましょう。
オーサリングメニューからカスタム→先ほど作成したコンポーネント名を追加
するとTextが入っていない空のGalleryが出てきます。
プロパティに先ほど設定したカスタムプロパティが存在するので、
関数バーで編集しましょう。
次のようにカスタムプロパティにテーブルを記述すると、その内容が反映します。
Gallery_table＝
[
{
txt: "Today",
txtjp: "本日の" & Char(10) & "予約",
Navi:Screen1
},
{
txt: "Customer",
txtjp: "顧客一覧" & Char(10) & "予約",
Navi:Screen2
},
{
txt: "Karte",
txtjp: "カルテ",
Navi:Screen3
}
]
Navigateもきちんとテーブルの値の通りに反映され、画面移動しますのでScreen2とScreen3を作成して試してみてください。
おわりに
コンポーネントって機能の処女作だったので、身近なところでいきました。
実際そんな工程は効率化されてないけど、「デザインアイデアの保存」ができるというのがいい！
テーブル自体が初学者にはしんどいという話も聞くので汎用性はないかもしれませんが、
コンポーネント入門にはいいのではないでしょうか？
それではまた明日。
