冒頭
Sencha Advent Calendar2回目の投稿です、佐藤です。
もう12月も半ばにさしかかり今年も残すところわずかとなりましたね。
今年一年はとても早かったなと感じています。仕事もプライベートも忙しかったのであっとゆう間に過ぎ去りました。こんな感じでどんどん時間が過ぎ去っていくんだなと考えると何となく焦りを感じます。
やりたいことはあるけれどなかなか実現できていないのでそろそろ本腰を入れてやらないと思っているので来年は節目の一年になるのでなんとかしたいと思います。勝手な決意です。では、本題に入ります。
1回目はデスクトップとモバイルの統合を兼ねて今後使用する機会が増えるのではと感じたレスポンシブについて説明したので、2回目もデスクトップとモバイルの統合に関するExtJsの内部的な話をしたいと思います。
Sencha Touch
Sencha Touchはモバイル用のjavascriptフレームワークとして使われてきました。Sencha Touchが良かったと思う所は無料で使えたという所だと思っています。Ext JSはライセンスが必要になるので個人的な開発ではなかなか手が出ないと思いますが、Sencha Touchは無料なので誰でも簡単に触れることができました。
今のExtJsではサポートしていますが、これまでのExtJsではタッチデバイスのサポートはしていなかったため、
モバイル・タブレットに対応するにはSencha Touchを使うことになっていました。
現在ではExtJs6がリリースされ正式にSencha Touchは無くなりましたが、ではどのようにExt Jsでタッチデバイスのイベントを可能にしているのかという所を軽く説明します。
イベントの正規化
このイベントの正規化はExtJSで開発したアプリケーションをタブレット上で実行するために行われています。
Ext Jsでmousedownなどのマウスイベントをそれに相当するタッチイベントに変換し、タブレット上でのジェスチャーを可能にします。これによりタッチイベントの実現が可能になるという仕組みです。
一部ですがイベント変換例を表にした資料がありますのでこちらをご覧ください。
上記表には一部変換例が記載されていますがもちろんこれ以外のtap、swip、pinch、dragなどのイベントも使用できます。
代替えできないイベント
中には代替えできないイベントもあります。
mouseover/mouseout/mousenter/mouseleaveこれらのイベントは代替えできないため、このイベントをハンドラし処理を実行する必要のあるアプリケーションは、独自の対応が必要になります。
まとめ
ざっくりでしたが以上でSencha TouchとExtJSの統合による内部的な仕組みについての説明を終わります。
Sencha TouchとExtJSの統合は開発者もそうですがエンドユーザー様にとってもメリットのある事だと思います。今までですとPCとタブレットで開発する場合はExtJS、Sencha Touchをそれぞれ使っていたため、単純に開発コストが2倍かかっていたという計算になります。(厳密には2倍はないと思います)しかし、統合された事により開発者にとってはコードのメンテナンスが容易になりますし、開発費用も抑える事ができるようになりました。
今回説明したことはExtJS6のdocsに記載されていますのでそちらも見ていただけるとより理解して頂けるかと思います。
以上、佐藤でした。