SIRIUS(シリウス)のiPhone(スマホ)サイトに横からぬるっと出てくるドロワーを実装する?…という話

Tips_機能の拡張 Tips_プチ裏ワザ Tips_iPhone Tips_その他 購入者特典 購入者専用ページ

iPhoneサイトに横からぬるっと出てくるドロワーを実装する?…という話

サンプル画像

 

お読みになる時期によっては記事内容と実際のサイト表記が異なってる場合もあります。

実装したものの、サイトの構造次第で構築方法がいちいち変わるのととても面倒くさいのとHTMLとCSSの知識をフル稼働させないといけないので、やり方は載せてません。ご了承ください。

 

シリウスで作成されるiPhone(スマホ)サイトは
サイドメニューの内容がず~と下の方に表示される仕様になっています。

 

まぁこれはよくある仕様なんでそれはいいんですが、
第1階層しか表示されない仕様ってのがちょっと不満なんです。

(PCでは調節可能ですネ)

 

第1階層って通常はカテゴリー名が表示されますでしょ。
そうするとそのカテゴリー内に存在する記事を探そうと思ったら
第1階層のカテゴリー名をタップして
第2階層にある記事一覧リストを表示させる必要があります。

 

ただでさえ下の方に置かれて目立たないのに
さらにひと手間ふた手間かかるとなると、、、
別の記事を見に行く人はほとんどいないんじゃないかと思うんですよ。

 

システム上、仕方がないんでしょうが、
これがどうにかならんかとず~と考えておりましたです。

 

やっぱり”ハンバーガー”が一番?

PCサイトのように一目でサイドメニューの内容がわかるようにするには……
いろいろ考えたあげくたどり着いたのが
あのハンバーガーボタン式ドロワーメニュー

 

Googleのトップページで使われているアレですよ。

 

最上部に 3本線のアイコンがありますでしょ?
(ハンバーガーに似ているからそう呼ばれてるみたいです。。。)

 

こんな↓ヤツです。

 

キャプチャ画像

 

ドロワーっていうのは文字通り「引き出し」のことで、よく見かけるのが
『ハンバーガーの形をした三本線のアイコンをタップすると左(右)からぬるっとサイドメニューが引き出しのようにせり出してくる』やつですネ。

 

スタンダードにもなりつつあります。

 

レスポンシブテンプレートには標準で装備されてますが、あれはグローバルメニューのリストが表示されるのであってサイドメニューのリストは表示されません。

 

あれをシリウスのiPhoneサイトに実装できれば、
サイト訪問者のストレスもだいぶ軽減できると思うんですよ。

 

結果として、他の記事をみてもらえる確率も高くなり
サイト滞在時間も長くなって……SEO効果もかなり高いかと。。。

 

ハンバーガーボタンの認識度もかなり浸透してきているでしょうから
実装するならこれかなぁという結論に至ったわけです。

 

このサイトに組み込んでみました

実際のところ、実装方法はいくつものパターンがあります。

 

ただクセのあるシリウスに組み込もうとするとどれも”帯に短したすきに長し”で、
もう数ヵ月もああでもないこうでもないとやっておりました。(-_-;)。

 

そんな中「これならなんとか実用レベルか?」と思えるものを
ようやく実装できました。

 

デモはこのサイトです。iPhone(スマホ)でご覧下さいな。

 

いちいちiPhoneで見てらんねぇ~よという方のために
キャプチャ画像も用意しておきました。

 

キャプチャ画像

 

キャプチャ画像

 

一番上の三本線をタップすると左側からサイドメニューがぬるっと出てきます。
サイドメニュー内の項目もするするっとスクロールします。

 

これなら目的の記事を 1発で開くことができます。

 

メニューを閉じるときは右側の本文エリアをタップするか左にスワイプするだけです。

 

実装に当たっての最低条件

ドロワーメニューのシリウスへの実装に際しては
以下の4つを最低条件として設定してみました。

  1. プログラムがあまり複雑でない
  2. ボタンもしくはテキストをタップすると「ぬるっ」とサイドメニューが出てくる
    (カクカクした動きは生理的にNGなので)
  3. サイドメニュー内の項目もするするとスクロールする
  4. シリウスが自動で作り上げるサイドメニューの項目をそのまま流用可能

 

ところがですよ、
この4点をクリア可能なスクリプトライブラリ(プログラムライブラリ)って
なかなかないんですよね。

 

1.は最低条件でした。

複雑なのはダメです。メンテナンスが面倒くさいのは実用的ぢゃぁないです。
トラブルも多くなるし、実装方法を伝えるのも大変だし...。

 

2.に関してはPC上ではぬるっと動いてもスマホに搭載するとカクカクするのもあったりで、
これは実際に試してみないとわからない部分も多かったです。

 

3.も2.と同じくPC上ではするするっと動いても
スマホに搭載するとカクカクしたりスクロールができなかったりで散々でした。

 

4.これが一番の難所でした。
というか最終的にはクリアできず、妥協せざるをえませんでした。

 

試したライブラリのダメだったところ

実装にあたってはこれまでいろいろライブラリを試したんですが、
何がダメだったのか、いくつか抜粋してご紹介しておきます。

(割と有名なヤツだけですが)

 

【Sidr】

かなり有名な jQueryライブラリです。ただどうやっても挙動がイマイチなんです。

 

具体的にどこって言いにくいんですが、
たとえばメニューがすんなりと閉じてくれなかったりとか…他にもいろいろ。

 

【jSlideMenu】

ぬるぬるの動きはこれが一番よかったです。

 

ただしHTML がちょっと複雑すぎるのと、
メニューの感度が良すぎてちょっと触れただけで勝手にスクロールしたり
開く予定のない記事が開いてしまったりと安定性に欠けてました。

(しばらくはコレ使ってたんですけど、やっぱり使いにくいので外しました)

 

それと”ontouch”という(スマホ専用?の)手法を使うため(詳しくは知りません)
PCでの動作確認ができないという面倒さもありました。

 

【jQuery Mobile】

実装方法やぬるぬるの動き、カスタマイズ性という意味ではスマホに特化したこのスクリプトが最高でしたが、、、レイアウトデザインが強制的にガラっと変わっちゃうんで却下しました。

 

採用したライブラリ

【Drawer Slide Menu】

最終的に採用させてもらったのがこのjQueryライブラリです。

(そのままコピーペーストでは使えないのでシリウス用に若干カスタマイズしてます)

 

このプラグインの良かった点は、

  • プログラムがさほど複雑ではない
  • ぬるぬるした動きが心地よい
  • メニュー部分をスクロールしても本文エリアは固定で動かない→メニューを閉じても常にページの最上部エリアが表示されている(これができるライブラリって少なかったです)
  • メニューを閉じるとき、本文エリアのどこをタップしても閉じることが可能
    (いちいちハンバーガーボタンを探すのは面倒です)
  • デフォルトの設定だとメニューリストのスクロールがするするっとは動かないんだけど、少し手をかけてあげれば問題なく動作可能
  • サイドメニューのリスト項目をフッター近くに置くことができる→あまり重要でないリスト項目をHTML最後尾におけるので検索エンジンにも優しい構造化

 

けっこういいこと尽くめのようですが、最大のデメリットが存在します。それが、
『シリウスが自動で構造化してくれるサイドメニュー項目をそのまま使えない!』こと。

 

ドロワーメニューを搭載しサイドメニューの内容を表示させるには、
当然のことながらメニューに表示させるリスト項目を別途用意する必要があります。

 

そしてシリウスにはサイドメニューを自動作成してくれる
「<% siteMenu %>」という独自タグがあります。

 

つまりはその独自タグを加えるだけでメニューリスト一覧を自動で作成してくれるのであればこんなラクなことはありません。
新たに書く必要はないんですから。

 

ところがこれがなかなかどうして、、、
どうやってもうまくいかないんですわ。(T_T)

 

シリウス独特の変則的なサイドメニュー構造が邪魔をしちゃうんです。

(関数を使ってカスタマイズもしてみたんですが構造的にどうしても変えられない部分が足を引っ張って……)

 

これは他のライブラリでも同様でした。

 

もしかしたらできるのかもしれませんが、
いまの私のスキルではちょっと無理です。

 

そんなわけで、どうしても
『ドロワーメニュー用に新たにサイドメニューを作る』必要があります。

 

ただしこの作業、
たとえばカテゴリーだけしか作ってないのか他の情報も載せてるのかとか、
ラベルを使っている・いないだとか、
フリースペースの有無などによっても書き方が微妙に異なってきます。

 

サイドメニューの構築の仕方によっては
作り方が何通りにもふくれあがってしまうんです。(>_<)

 

<% siteMenu %>(もしくは関数を入れ込んでの...)って書くだけで解決できれば
実装方法をお伝えできるんですが、、、
とても書ききれないことがわかり、諦めました。

 

あと、このライブラリ特有の挙動かもしれませんが、
「iPhoneサイト設定」→「詳細設定」→「記事中の画像」
『縮小変換して表示(中央揃え)』にしてるとうまく作動しません。

 

『縮小変換して表示』なら問題ないんですけど。(原因はわかってます)

 

なんか中途半端な記事になってしまい、ホントにスミマセンです。

 

最初にひな形さえ作っちゃえば、あとは記事が増えるごとに
記事タイトルとURLをその都度コピーペーストするだけでいいので、
作り上げてしまえばなんてことはないんですけどね。

 

ここまでのお付き合い、ありがとうございました。

 

購入ページへ


てっぺん