SkyVisualEditorで作成した画面をタブレット端末で使いやすくする

この記事では、タブレット端末で操作をし易くするために、SkyVisualEditorの標準機能では設定が難しい
ボタンアイコンを拡大表示する設定方法を紹介します。

SkyVisualEditorをご利用のお客様で、タブレット端末をご活用されているお客様も沢山いらっしゃいますが
「操作がし難い」という声も頂戴します。

特にボタンアイコンサイズついては、SkyVisualEdiorの設定変更で簡単に解決ができないため
我慢してご利用しているお客様もいらっしゃるのではないでしょうか？

実際タブレット端末でSkyVisualEditorの画面を開いてみます。（写真は、iPad4を使用しています。）
確かに標準サイズの画面表示では、ピンチイン（拡大表示）操作が必要と言えると思います。
（指が太すぎる訳ではありません。。たぶん）

この記事を読み進めると、こんな感じのカスタマイズができます。

カスタマイズにはjQueryを使います。
カスタマイズの対象は、タブレットでの操作が難しいと思われる以下を対象にします。

• 参照項目の虫眼鏡アイコン
• チェックボックス
• 改ページボタンアイコン

大まかな作業の流れはjQueryで対象の要素に対し、スタイルを変更するコードを書き
SkyVisualEditorのページスクリプトに登録しデプロイして完了です。

【準備】

カスタマイズ対象の要素を調べます。
SkyVisualEditorで作成した（デプロイ後）画面をPCブラウザで開きます。
ブラウザの開発ツールをオンにして対象の要素を調べます。（画像はMozilla Firefoxを使用しています。）

例：参照項目の虫眼鏡アイコン

同様に、「チェックボックス」、「改ページボタンアイコン」についても調べます。

【コーディング】

要素を調べた結果で、jQueryを記述します。
記述内容の具体的な意味はjQueryのリファレンスを見てください。

jQuery(function () {
  // 参照項目の虫眼鏡アイコン
  jQuery("img.lookupIcon").css({
      "cssText": "width: 50px !important; height: 50px !important;",
      "background-size": "cover"
  });
  // 先頭ページアイコン
  jQuery("img.first").css({
      "cssText": "width: 50px !important; height: 50px !important;",
      "background-size": "cover"
  });
  // 前ページアイコン
  jQuery("img.prev").css({
      "cssText": "width: 50px !important; height: 50px !important;",
      "background-size": "cover"
  });
  // 次ページアイコン
  jQuery("img.next").css({
      "cssText": "width: 50px !important; height: 50px !important;",
      "background-size": "cover"
  });
  // 最終ページアイコン
  jQuery("img.last").css({
      "cssText": "width: 50px !important; height: 50px !important;",
      "background-size": "cover"
  });
  // チェックボックス
  jQuery(":checkbox").css({
      "cssText": "width: 35px !important; height: 35px !important;",
      "background-size": "cover"
  });
});

【登録】

最後にSkyVisualEditorで、「ページスクリプト編集」を選択し、開いたダイアログに上記のコードを記述し
デプロイして完了です。

最後に出来上がりイメージ

SkyVisualEditorは、新しい機能追加や、お客様のご要望に応えるためバージョンアップを進めています。
お客様のご要望が標準機能で満たされていなくても、弊社エンジニアならお客様の課題を解決する手助けができます。
また、次期バージョンアップで解決できる場合もありますので、まずはご要望、お問い合わせを気軽にご連絡ください。