レスポンシブWebデザイン導入計画（Parllet の場合 その２（スライドメニュー jQuery Mobile 篇）） [公開アプリ]
前回の続きです。
レスポンシブWebデザイン導入計画シリーズということで、前回と同じ挿絵です。（決して手抜きではありません。）
前回はドットインストールのレスポンシブなウェブサイトを作ろう に沿って作ってみて、相談役の妻の一言でFacebookやGoogle＋のようなスライドメニューの実装を思い立ったところまででした。
とりあえず "facebook メニュー スライド" のような感じで何度か検索してみたところ、結構いろんなプラグインがあるみたいです。
それぞれ特徴が違うでしょうから、違いを比べて決めたいと思っていたところ以下のページが目に留まりました。
スマートフォン向けページでサイドメニューを実装する方法比較 *1
- Sidr
- jPanelMenu
- jQuery Mobile
この３つを色々と比較してくれていて、Sidr と jPanelMenu に関しては
Android 2.3 では元々表示している本文よりもサイドメニューの方が縦に長かった場合スクロール出来ないという現象
が起こるということが分かりました。
私の場合、Parllet（個人で作成・公開しているアルファ版のWeb家計簿）のメニュー数はそれほど多くないので現時点では問題になりませんが、今後、縦幅までしかメニュー数を増やせないとなると、スライドメニューの魅力としては半減する気がします。
「それなら jQuery Mobile というやつがいいのかな？」
正直な話、私はこの時点で jQuery Mobile を初めて知ったのです。
jQuery Mobile ならではの各種書き換え等の副作用はありますが
なんてことも書いてあるけど、覚えていく中で対応できるんじゃなかろうかと思い、試してみることにしました。
今回はスライドメニューだけ作れればいいんですが、ドットインストールに jQuery Mobile入門 があったので、とりあえず全部やってみました。
正直な感想として、「jQuery Mobile ってスゴいな～。」と思いました。
簡単なコーディングだけで、いろんなことが出来ちゃうのもスゴいし、デザインなんかも適当にメニューとかボタンとか並べてるだけで、Parllet（パレット） はカッコ良さで負けてる気がしました・・。
何はともあれ組み込んでみようってことで、jquerymobile.com の Download ページ から以下をコピー。
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
Parllet（パレット） の<head>タグの中に貼り付けました。
すると・・・。
それだけで Parllet（パレット） のトップページがエラいことになりました。
背景色は変わり、隠していたタグも表示されていたり、cssのかなりの部分が無効というか強制変更された感じ。
見た目だけでなく動きの方も、aタグをクリックしても飛ばなくなったりしています。
こりゃあ・・、"ちょっと変わった" どころの騒ぎじゃありません。
私は "jQuery Mobile ならではの各種書き換え等の副作用" について、完っ全 に甘く見ていたんだということを理解しました。
「jQuery Mobile はスマホ向けのWeb開発を楽にしてくれるけど、PCでも全然いけるんじゃ？」って感覚で、ワンソースでスマホもPCもカバーしようと思っていたのですが・・・。
そう簡単なモノではないんですね～。
jQuery Mobile で作成するのは基本的にはスマホ用のサイトで、PC用のサイトは通常の作り方（jQuery Mobile を使わない）で別に用意して、どちらからアクセスされているかを判別して振り分けたりするもんなんですね、きっと。
まあ、jQuery Mobile に熟達した人が最初からワンソースで行くと決めて作り始めればできるのかもしれませんが、PCのWEBブラウザ向けに作られた Parllet（パレット） のようなWebアプリにスライドメニューの機能だけスムーズに取り込むって芸当は、少なくとも今の私には出来ないですね。
そんなこんなで、今日も勉強になりました。
振り出しに戻って Parllet（パレット） に組み込むスライドメニューをどうするか、決め直さなければなりません。
というようなことで、今回は進捗的にはいいとこ無しでしたが ここで切ります。
次回に続きます！
オマケ
「あんた、何でこんなレベルの低い失敗話とか自分の無知さ加減をわざわざブログに載せてんの？」 と思われる方も多いかと思います。
実際その通りなんですが、正直「レベルが低いからこそ載せている」 というところがあります。
レベルが低いなりに、上手くいったことだけ載せておけばいいという考えもあるでしょうが、もし私と同じぐらいのレベルの人がいた場合に、同様の失敗を避けることになるかもしれない。
また、長いスパンの話で言うと、万が一（本当に万が一でしょうが）私が今後大きく成長していったとしたら、「昔は sakashushu にもこんな時期があったんだ～。」と、誰かに勇気を与えることが出来るかも知れないと、臆面もなく思うからです。
今後も見苦しい部分を多々お見せすると思いますが、それでも頑張って体当たりしていく所存ですので、何卒よろしくお願いいたします。
*1 この注釈を見る前に気づいたあなたはすごい！この参考ページを見たことが、Github Pagesについての調査（ここ・ここ・ここの３部作）に繋がったのでありました～！
11/27 追記
続きを書きました。
コメント 0