Lightning用新モバイルナビゲーション「VK Mobile Nav」が利用可能になりました

Lightning用のモバイルナビゲーションが新しくなりました。
従来のモバイルナビゲーションも当面は利用できますが、基本的にはサポートを終了し新ナビゲーション「VK Mobile Nav」での改善に移行します。

VK Mobile Nav の特徴

簡単な動作デモ動画がありますのでまずはご覧ください。
※設定には若干クセがありますので、ページ下部の設定方法を必ずご覧ください。

下階層が開閉式になりました

従来のモバイルメニューでは、下階層のメニューも全て表示されていたため、メニュー項目が多いと非常に長いメニューとなっていましたが、VK Mobile Navでは下階層の項目がある場合は自動的に畳まれ、右側のメニュー展開のアイコンをクリックすると表示されるようになります。
これは、更に下の階層の項目でも同じです。

メニュー上下のウィジェットエリアで自由なアピールが可能

モバイル用のメニューなので、メニュー項目は当然ありますが、その上下にウィジェットエリアがあります。
従来はモバイルメニューの上には検索が強制的に表示されていましたが、今回はウィジェットエリア化した事で、メニューの上下に好みに応じて要素を設置する事ができます。
主に検索ウィジェットや、お問い合わせのボタン、バナー、カスタムメニューを置く事を想定しています。
※カスタムメニューで設置した項目は過階層は開閉式にはなりません。

今後の拡張予定

現在最低限の機能としてリリースしましたが、有料スキン利用者など向けに以下の機能拡張を予定しています。

• メニューボタンの位置の左右切り替え機能
• モバイルメニューの背景色の変更機能（特定の有料スキン利用者向け）
• ページ下部固定のモバイルアイコンメニュー（何かしらの有料オプション）
• 画面幅の広いタブレットでの閲覧時にPC版に近いUIになるよう改善

※あくまで予定につき実装時期などは未定です。

新モバイルメニュー開発の背景

そもそも今回のメニュー開発においては、以下の理由によります。

メニュー構造の問題

システムが複雑すぎる

従来版のスライドメニューでは、モバイル時のメニューを特に何も設定しなくてもヘッダーメニューとして登録されたメニューが普通に表示されるようにするため、JavaScriptを用いた特殊な処理をしていました。
モバイルメニューを開閉する度にHTML要素が可変していたのですが、おかげで利用端末によって挙動が不安定になる事がし、構造が複雑な故に原因の特定・改善が困難でした。

ページ内リンクが設定出来なかった

従来のメニューシステム（横スライドメニュー）では、構造上の問題があり、メニューのカスタムリンクでページ内リンクを設定して、その項目をタップしても、メニューを閉じた瞬間にページトップに戻ってしまうという欠陥があり、１ページ内に複数のコンテンツを積み上げるタイプのページ需要が高い昨今では問題がありました。

モバイルメニューのカスタマイズが難しい

JavaScriptで複雑な制御をしていたために、余程スキルの高い人でない限りモバイル時のメニューのカスタマイズが非常に困難でした。それを今回はモバイルメニュー内にウィジェットエリアを設ける事で、ソースコードを特別触らなくても誰でも簡単にカスタマイズしやすくなっています。

ページ下部固定のアイコン表示のメニューの重要性

こちらはまだ実装していませんが、ハンバーガーメニューはそもそもタップされない事が多いため、お問い合わせやサービス紹介など主要なページへのリンクは、ページ下部にわかりやすいアイコンとともに常に固定で表示しておくユーザーインターフェイスの需要が非常に高くなっています。そういったものを実装するには、現状のナビゲーションとは根本的に異なる構造にした方が実装・テスト・利用者の移行がおこないやすかったという背景があります。

設定方法

1. Lightning Advanced Unit のバージョンアップ

新モバイルナビゲーション「VK Mobile Nav」は Lightning Advanced Unit に実装してあります。Lightning Advanced Unit を3.0.1 以上にバージョンアップしてください。
※拡張プラグイン Variety / JPNSTYLE / Origin Pro をご利用の方は各プラグインをバージョンアップをしてください。

2. VK Mobile Nav への切り替え

まずは「外観 > カスタマイズ」画面を開き、「Lightningデザイン設定」パネルを開きます。その中の「メニュータイプ（モバイル端末時）」の項目で「VK Mobile Nav」を選択してください。
この際、既に「VK Mobile Nav」が選択されていた方は、一度他のラジオボタンを選択した上でもう一度「VK Mobile Nav」を選択して、設定を保存してください。
そして、設定を保存したら、一度ブラウザの更新ボタンを押して画面を再読込してください。画面を再読込みしないとメニューは切り替わりません。

3. メニューの設定

メニュータイプを「VK Mobile Nav」に切り替えたら、モバイル用のメニューを設定する必要があります。
PC版のヘッダーメニューなど既存のメニューと同じで良い場合は、「外観 > カスタマイズ」画面の「メニュー」パネルの中の「メニューの位置」の「全ての位置を表示」からメニューを設定する事ができます。

4. ウィジェットの設定

メニューの上下のエリアにウィジェットを設定する事ができます。「外観 > カスタマイズ」画面の「ウィジェット」パネルの中の「モバイルナビ上部」「モバイルナビ下部」にお好みに応じてウィジェットを設定ください。