無料ブログ「rentafree.net」の管理人ブログ

モバイルブラウザでのブログエディター

Firefox Beta34で確認した際にマウスイベント時のselectionの破損バグが無くなっていると判断していたので、
touchイベントとrange状態を判別した上でコンテキストメニューの表示と非表示を切り替えることで対応させようとしたのですが、
Firefox Beta35で試したところ、修正されていると思っていたselectionの破損バグが存在したようで、contextmenuイベント時にrangeの取得が出来なかったので諦めました・・・

以前からタッチパネル端末へのブログエディター対応が最大の課題だと考えていますが、相変わらず厳しいです。

ブログエディターでは、テキストの特定範囲を選択して選択範囲へ処理を行う機能が搭載されていますが、
PCではコマンドをマウス右クリックのコンテキストメニューから選択するようになっていますが、
タッチパネル用のブラウザでは、
  • テキスト選択 → テキスト長押し
  • コンテキストメニュー → テキスト長押し
と、コンテキストメニューとテキスト選択が同じ操作なのでブラウザがコンテキストメニュー機能に完全に対応出来ていません。

range状態を判別して、こちらでコンテキストメニューの有効・無効を切り替えれば実用的なレベルで対応できそうなのですが、
  1. マウスイベント時にrangeを取得しようとするとエラーが発生する。
  2. oncontextmenuイベント時にイベント伝達を停止するとコンテキストメニューが表示されない。
というバグを把握しています。
2に関してはセキュリティーを犠牲にすれば対応できるのですが、
1に関してタッチに対応させようとすると見た目の選択範囲と処理範囲に食い違いが生じてしまう可能性があるので避けたいです。

通常の方法ではマウスイベント時にrangeに対して処理が行えないので、エディター上部メニューからの処理も行えません。


Google Chromeの場合はバージョンによって挙動が変わる気もしますが、テキスト上で長押しすると選択が優先されてコンテキストメニュー(Firefox以外では擬似コンテキストメニュー)が表示されないようです。
こちらはコンテキストメニュー自体が非対応なので仕様に問題があるとは思いますが、
バグは無さそうなので、テキスト選択をした上でエディター上部メニューから処理を行うことは可能です。


現状ではタッチパネル端末でブログエディターを利用する場合は、Google Chromeの方をおすすめしますが、機能に制限がある状態です。
Firefox以外のブラウザはコアがBlink又はWebKitですので、Firefox以外のブラウザはほぼ全てChrome互換です。