Chrome拡張をスマホ対応するには？
- Chrome拡張対応モバイルブラウザを使う
- タッチ操作に対応させる
- 画面が狭くても困らないように調整する
Chrome拡張対応モバイルブラウザを使う
スマホ版Chromeで拡張機能が使えれば良いのですが、あいにく使えません。
スマホでChrome拡張が使えるブラウザは、以下の様です。
- Android
- Kiwiブラウザ
- Yandexブラウザ
- iPhone
- Orionブラウザ
まずはこの内どれかをインストールして、目的のChrome拡張が動作するかどうかを見ることになります。ただし、パソコンとスマホで色々違うため、期待通り動かない場合があります。自作拡張機能であれば、動かない原因を一つ一つ修正して、対応させることになります。
タッチ操作に対応させる
タッチ操作対応には2つの側面があります。
マウスイベントではなくタッチイベントを適切に処理する
Androidの場合、タッチデバイスでも、ある程度のマウスイベントを同時に発生させてくれるので、意外と動くことが多いです。もちろん、mousemoveイベントなどはタッチデバイスでは原則発生しないため、これらに過度に依存しすぎない様に調整を入れれば良いでしょう。
マウスほど細かいポイントができないことに注意する
イベント自体は処理できても、指によるタッチでは細かい範囲をクリックしたりが困難です。このため、マウスクリックに比べて余裕を持ったボタンなどの配置をする必要があります。
画面が狭くても困らないように調整する
スマホは携帯してナンボなので、パソコンより画面が小さいです。特に普通に縦持ちすると、横幅が非常に狭いです。パソコンでテーブルなど行列で表現した形式そのままだと、操作性が悪くなりがちです。実際に自作Chrome拡張で試してみて、閲覧はまだしも、入力欄が狭いと非常に操作しにくくなりました。
この課題は、入力時に一時的に入力欄を横幅いっぱいに拡大する事で解消できました。
この解決法以外にも、様々な工夫があるので、合うものを取り入れれば良いでしょう。