【パワスロ:Tips】ハンバーガーメニューの作り方

はじめに

パチスロアプリでも使用している、ハンバーガーメニューの作り方を記事にしました。
使用頻度が低めのメニューや設定関連のメニューはクリック時に表示すると画面を広く使えます。
特にモバイルで効果的ですね。

ぴーたくん

よく使うのは表示されていたほうが嬉しいけど、あんまり使わないやつはメニューで表示されるほうが画面がすっきりするよねー♪

パワスロシリーズの記事はこちらから

サンプル動画

以下のようにPC版、モバイル版の右上の部分です。
クリックするとメニューが表示され、メニュー選択でその内容を実行します。他のエリアをクリックするとキャンセルして閉じます。

実装

PC版もモバイル版も基本同じなのでモバイル版で解説します。

TIPS以下はあくまでパワスロアプリで使ったサンプルなので細かい部分はお好みで調整されるのが良いと思います。
今回はギャラリーを使っていますが、固定で数件のメニューの場合はサクッとボタンやアイコンを並べて実装するなどでも良いかと思います。個人的にはメニュー系はギャラリーを使った方が後々調整しやすいかとは思います。

メニューアイコンを追加

まずメニューアイコンを作り任意の位置に配置します。主な手順は以下です。

1. 普通のコンテナーを追加する
2. その中にハンバーガーメニューアイコンを入れる（ワッフルなど別のアイコンでもOK）
3. 好みでドロップシャドウや余白を入れる

サンプルでは以下のように設定しています。アイコンの幅はコンテナーと同じにして、
余白で大きさを調整しています。

OnSelect
メニュー表示用の変数をTrueにする処理を追加します。
※例ではUpdateContextを使っていますがSet関数でも別に大丈夫です。

Code//アイコンのOnSelect
UpdateContext({menushow:true});

メニューエリアの追加

続いて表示されるメニューのエリアです。コンテナーを使って実装しています。
主には以下の流れです。順に解説します。

1. 普通のコンテナーを追加して画面一杯に広げる （透明の大枠）
2. 中に垂直ギャラリーを入れ、アイコンとボタン（ラベルでもOK）を入れる
3. ギャラリーの処理を実装する
4. メニューの表示非表示を調整する
5. 最背面に四角形を入れる（他エリアクリック時キャンセル用）

① コンテナーの設定

コンテナーは以下のように画面幅一杯にします。背景（Fill）は透明のままです。
位置は他のコントロールより上に来るように調整します。（下にあると上被せされないので）

Code//コンテナーの幅と高さは親と同じにしておく。
Width ：Parent.Width
Height：Parent.Height

② ギャラリーの設定

ギャラリーは以下のように幅や配置、テンプレートサイズを設定しています。
この辺りは実装に合わせて調整ください。

Itemsにはテーブル関数で、IDとアイコンとテキストを使用する分定義します。
※この部分はApp.OnStartなどにコレクション作って使うでもよいです。サンプルでは直接定義しています。

Code//ギャラリーのItemsプロパティに直接メニューを定義している
Table(
{icon:Icon.Save,Text:”一時保存”,ID:2},{icon:Icon.Tools,Text:”保存して終了”,ID:3},{icon:Icon.Mobile,Text:”PCモード”,ID:4},{icon:Icon.Tools,Text:”開発者モード”,ID:5})

※上記サンプルだとID1を後で使わなくなったので2空になっていますが、普通はID：1からですね。

ギャラリーの高さの自動調整（テンプレートHeight）
ギャラリーの高さはレコード数に応じて調整するようにしています。
このようにしておけばItemsへ追加する場合や削除する場合にも自動で調整されるので手間が省けます。

Code//ギャラリーのHeightプロパティ　→テンプレートサイズとテンプレートパディングを足した高さ×レコード数。微調整で＋２している
(Self.TemplateHeight + Self.TemplatePadding) * Self.AllItemsCount + 2

アイコンとテキスト
アイコンとテキストをギャラリーに入れてそれぞれの値をItemsで定義したアイコンとテキストになるように
以下のように調整します。
あわせてOnSelectは親（ギャラリー）をSelectにしておきます。

ラベル（またはボタン）のTextプロパティ

Code//アイコンのIconプロパティ
ThisItem.icon
// ラベルのTextプロパティ
ThisItem.Text
// アイコンとラベルのOnSelectプロパティ
Select(Parent)

③ ギャラリーの処理

続いて、ギャラリー上のアイコンやボタンをクリックした際の処理を実装します。
サンプルでは以下のように実装し選択されたレコードのIDに応じて処理を切り分けています。
このようにすれば一つ一つ用意しなくても選択したレコードに応じた処理を行うことが出来ます。
その後に共通してメニュー表示用変数をfalseにして非表示にしています。

TIPSあくまでサンプルなので、各メニューレコードに応じてやりたい処理に調整すればOKです。
例では別のボタンの処理をSelectしてセーブ機能を実行したり、モバイルモードを切り替えて、PC画面にNavigateする処理などを行っています。
※とりあえずダミーの処理を入れておくなどで後々調整するでもOKです。

Code//ギャラリーのOnSelectプロパティ レコードのIDで処理を切りわけ
With({id:GalleryMenu_1.Selected.ID},
If(
id=2,Select(FunkSave_1);
,id=3,Select(FunkSave_1);
,id=4,Set(MobileMode,false);Navigate(ScreenPC);
,id=5,UpdateContext({DebugShow:!DebugShow})
);
UpdateContext({menushow:false});
)

④ メニューの表示・非表示を設定

この段階まで出来たら、表示非表示の設定をやって動きを見てみます。
メニュー用のコンテナーのVisibleプロパティにメニュー表示用変数を指定します。
プレビューで動作確認し、アイコンクリックでメニューが表示され、メニューを選択したら非表示になることを確認します。

TIPSコンテナーを非表示にすると配下のコントロールすべてが非表示になってくれます。表示も同様です。
以前はグループを使ってグループ化していましたが、コンテナーの方がコンテナーのみ設定すればいいし、要素の追加や削除も楽です。（グループは要素追加するにはいったん解除が必要）

⑤ キャンセル処理用の図形を背面に入れる

次にキャンセル処理用にコンテナーの最背面に透明の四角形（またはラベルでも可）を追加します。
幅と高さはコンテナーと同じにして色は透明にします。クリック時やホバー時もすべて透明にしておきます。
（お好みでオーバーレイしてもOKです）
OnSelectに表示用変数をfalseにする処理を設定します。以下画面ショット参考ください。

上記の図形と処理を入れることで、他のエリアをクリックした際にキャンセル扱いでメニューを閉じることが出来ます。

TIPS上記で他エリアクリックでキャンセルする実装が楽にできますので自分は良く取り入れています。
この処理を入れない場合、以下のようにメニューアイコンを再度クリックした際に非表示となるようにも調整は可能です。
//アイコンのOnSelect →否定形で更新すればON,OFFはスマートに書ける
UpdateContext({menushow:!menushow});

アイコンのホバー調整

最後にホバー時の動作をカスタムします。
サンプルではアイコンとテキスト部を同じように変えたかったので、アイコンの幅をレコードと同じ幅まで広げてパディングで左側に来るように位置を調整しています。
背景を通常透明にしておき、テキストを見れるようにしています。ホバー時にはオーバーレイ（半透明で色付け）をしています。

このあたりもサンプルをご参考にお好みで調整されるのが良いと思います。

TIPS上記のようにアイコンの幅をテキストの上まで伸ばさない場合はテキストはラベルよりボタンのほうがカーソルが指アイコンになり押せるのが分かりやすいのでお勧めです。

パワ谷さん

押せるところはカーソルが変わってくれないとわかりずらいので、
ユーザービリティ向上のために調整した方がいいと思うぞ。

おわりに

今回はパワスロアプリで実装したハンバーガーメニューをベースに作り方を記事にしました。
メニューの作り方はやり方色々あるので、ボタン並べたシンプルなメニューをサクッと作るでも良いと思います。

ゲームアプリでの実装ですが業務アプリで丸々使える内容なので、サンプルをご参考にお好みで調整したメニューを作成ください。それでは。