FlexアプリケーションでMacのマウスホイールに対応させる

久しぶりに Flex の話題。Flash は一般的に Mac 環境のブラウザでマウスホイールが効きません。そのため Flex では DataGrid や ComboBox などスクロールバーを利用するものは、Mac 環境で使い勝手が多少落ちてしまいます。

対処方法として、 Flash 単独では Mac のマウスホイールに対応できないので、JavaScript と連動させる仕組みを実装します。やや難しい実装方法となるため、少数派のユーザーのために大きな労力をかける必要がありました。そのため対応するところに開発者の良心のようなものが見えるというコメントがあるほどです。

前置きが長くなりましたが、最近では複数環境のマウスホールイベントに対応した SWFWheel ライブラリを使用することで簡単に解決できます。Flex アプリケーションもしかりで、SWFWheel を使う事で mx.controls.scrollClasses.ScrollBar を Mac のマウスホイール対応にできます。まずはデモでチェックしてみます。

Macのマウスホイールのデモ

Windowsの方はどちらのデモも変わらず動作すると思いますが、Mac環境では通常の Flex デモはマウスホイールが動作しません。

• 通常のFlexアプリケーション
• SWFWheelを使用したFlexアプリケーション

※List に表示している情報は 萌店ＡＰＩを使用させて頂きました。おかげさまで花のない当ブログが鮮やかになりました（＾ー＾）

• デモのソースはこちら(FlashDevelopプロジェクト、MXML、zip)

実装方法

SWFWheel – Spark project からライブラリを入手。

メインアプリの applicationComplete イベントハンドラーに次の一行を記述するだけです。これで Mac 環境のブラウザにおいても全てのコンポーネントのマウスホイールが動作するようになります。

[source:javascript]
SWFWheel.initialize(stage);
[/source]
ポイントとしてcreationCompleteのタイミングではstageを参照できないことがあるので、applicationCompleteのタイミングを使う事です。

参考

• [Flex]初期化系イベントめも – l4l

HTML側はエンベッド時の属性を追加してあげるだけでOKです(以下のページを参照ください)。特にJavaScriptファイルを用意する必要はありません(ActionScript内に含められているため)

参考

• SWFWheel – Spark project
• feb19.jp blog – SWFWheelを使う

ついでに

ついでに Flex フレームワーク(MXML)で作った当ブログの Flash Lab ページも Mac のマウスホイールに対応させてみました。

http://clockmaker.jp/labs/