Konyでwidgetにマウスカーソルを設定する方法

目次

1. はじめに
2. 実装方法
3. まとめ

はじめに

パソコンでウェブブラウザのリンク等マウスカーソル（マウスポインタ）を乗せると、指の形に変化するのをみたことあるかと思います。
該当箇所にマウスカーソルを乗せる事をHover（ホバー）といいます。
KonyにもHover時のSkinを設定することでマウスカーソルの設定を行うことができます。

この記事ではwidgetにマウスカーソルを設定する方法をご紹介したいと思います。

実装方法

①画面の作成

このような画面を作成してみました。

FlexContainer:flxTestを配置しています。
右にある Properties > Skin > Normal Skinにはこのように設定しております。
(色は赤色 #ff0000を指定しています。）

②Hover Skinの設定

マウスカーソルを設定する箇所はHover Skinのみとなっております。
まずは、Hover Skinを作成します。

STEP1
FlexContainer:flxTestをクリックします。
右にある Properties > Skin > Hover Skinをクリックします。
Enableにチェックを入れます。
Nameは sknFlxDemeHoverとしています。
(色は赤色 #ff0000を指定しています。）

STEP2
Platformの右にある**...**をクリックします。

STEP3
ポップアップが表示されます。
HTML5 SPAにチェックを入れ、OKをクリックします。

STEP4
Properties > Skinの中にCursor Typeが表示されるようになりました。
Cursor Typeをクリックし、目的に合ったものを選択してください。
今回はPointerを選択しました。

参考：マウスカーソルの値一覧と表示について
https://saruwakakun.com/html-css/basic/cursor

ここまでで、マウスカーソルを設定する方法が完了しました。
実際にどうなるかみていきましょう！

④実装の確認

FlexContainer:flxTestの上にカーソルを持っていくと、カーソルが変わっていることが分かりますね！

まとめ

今回は、Konyでwidgetにマウスカーソルを設定する方法を説明しました。
目的に適したカーソルを設定することで、ユーザにとっても分かりやすいWeb作りができるのでは無いかなと思います。
またGUIだけで設定できるのもいいですね！
ぜひ試してみてください

参考

カーソルの値一覧と表示について：
https://saruwakakun.com/html-css/basic/cursor