Main Content

jQueryMobileで作ったテンプレートサイトはクライアントの欲求を満たすことができるのか

jQueryMobile

【追記 11/05/30】
jQueryMobileの組み方について有益なコメントを頂きました!
本文にて「デザインのカスタマイズが超しにくいんですけど!」という趣旨の文を掲げておりましたが、CSSに関してはCDNをそのまま使うのではなく個別に用意するのが普通みたいです。勉強不足なのに調子に乗ってdisってしまってjQueryの中の人すいません!出直してきます。

シロ様より教えていただきました!jQueryMobileのギャラリーサイトです。
http://www.jqmgallery.com/
————–

こんにちは。

そろそろ僕もスマートフォン用のコンテンツ製作の波に乗っかりたいと思っていたところ、
「これからjQueryMobileが来るよ!」と周りから煽られましたので、まずは手始めに、スマートフォン用のサイト製作に便利らしいという『jQuery Mobile』を触ってみることにしました。

サンプルページを作る過程で、いろいろと気付いたことなどがありましたのでまとめてみました。

時間が無い人向けに結論を先に書いておくと、
「モックはすぐできそうだけど、クライアントはこのテンプレートサイトで満足すんのかな?」です。
僕の勉強不足で生意気言っていたらすみません。
でも、「jQueryMobile万歳!」なエントリーが並ぶ中でこういう意見もあっていいんじゃないかと思って書きました。

jQuery Mobile って何ですか?

jQuery Mobile というのは、jQueryのプラグインのひとつで、「スマートフォン向けのサイトが手軽に作れる」と今話題になっているものです。

わかりやすい動作サンプルについては下記のサイト様を見てくださいませ。

サンプルページ『HELLO, SAKOTSU!』

で、出来たのが下記のテストページです。
(多分そのうち上書き更新されていくと思います)

トップからページ遷移してBackボタンで戻ってきた時に、Headerが吹っ飛ぶんですけれど、
jQuery Mobileは現時点ではまだアルファ版(テスト段階)であることから、バグのせいにしているんですが、
僕の組み方が悪いのかもしれませんw

ページ遷移の内部処理を理解する

jQuery Mobileには、横にページをスライドさせたり画面がくるんとひっくり返ったりするページ遷移エフェクトが設定できます。

このページ遷移エフェクトを実現するにはAjax通信が伴うので、遷移後のアドレスが[ index.html#menu ]とか[ /#hoge/index.html ]に置き換わったりします。これは、ページ単位の切り替えではなく、同一ページ内でコンテンツを置き換えているからです。

このあたりの処理の説明はややこしいのでわかりやすい下記のサイト様をみてくださいませ。

つまりページ遷移エフェクトとページ単位の切り替えの両立は難しいので、ページ遷移するコンテンツは同一のhtmlに全部まとめて書くのが吉なのかなーと思います。
(ページ単位で管理したい人にはなんだか気持ち悪いかもしれないけれど、、)

製作メモ

この通りですね、jQueryMobileページのコーディングは、通常のHTMLコーディングではなく、jQueryMobile用のコーディング記述で書く必要がある、と思っていた方がいいです。

以下には、作業中にメモっていたつぶやきを列記しておきますね。
jQueryMobileがバージョンアップすることで結果も変わるかもしれませんが念のため。

CSS読み込み記述について。全CSSを内包したimport.cssひとつを一括でlinkするのではなく、順番に分けてlinkした方が良いぽい。一括だと読み込みが追いつかずに描画がバグった。参考: http://bit.ly/lh57nV

お手軽簡単にUIを実装できる反面、ページ背景色を変えたいなど細かいカスタマイズには不向き。cssファイルに設定していても上書き無効化される。ただし、タグにstyle属性を直書きすれば反映される。ひゃーすごい原始的な書き方に!

これは、jQueryMobile用のCSSが優先されることから起こる現象です。
例えば、「<div data-role="content">で囲むと自動で余白に囲まれる」といったことから、僕は余白無しの画像を置きたい場合に、<div data-role="content">の外に記述しました。
(でもHeaderはこれのせいで吹っ飛んだのかな?)

<a>タグで見た目が勝手にボタン化されてしまう場合は<div>タグで囲むなどする

<a>タグで自動的にボタン化してくれて便利なんですが、画像をボタンにしたい場合は無理矢理<div>で囲んだりしました。
ただ、ゴリ押しの実装になってしまうので、結局画像ボタンは諦めました。

結論・まとめ

JavascriptやCSSを書けなくたってお手軽簡単にUIを実装できるのは大変素晴らしいのですが、
カスタマイズがしにくいという点でどうしてもテンプレートサイトのような造りになってしまいがちなので、そのあたりでクライアントが満足してくれるかどうかが怪しいところです。。

もちろん僕の勉強不足で、まだjQueryMobileさんのチカラを引き出しきれてないところも多々あるとは思いますが、
それならば、通常のHTML5サイトをスマートフォンサイズに最適化して作った方が見栄えも良くてウケもいいんじゃないかな、、と思ってしまいました。

ただ、まだ正式版のリリースではないので、そのあたりも期待しながらjQueryMobileを見守っていきます^^

今回、参考にしたサイト様達の紹介

モバイル開発についての勉強会の告知

teraco40_

もー、わからないことがいっぱいあるので、
6/19に大阪てら子で、モバイル開発についてあれこれ情報共有しようぜの会をやります。

もう人数がオーバーしてしまいましたが、、好評でしたら同じようなテーマで続けていこうかと思っています。

当日はUstreamで放送するかもしれませんので(未定)、気になる方は@teraco_osakaアカウントで動向を
チェックしてみてくださいませ。

Comments

  1. Commented on
    Comment by シロ

    こんにちは。リンクアリガトウ御座います。かちびと.netというブログを運営しています(´▽`)

    >クライアントはこのテンプレートサイトで満足すんのかな?
    もちろん満足は出来ませんよね。。なので、cssのCDNは使わないのが基本かなと思っています。cssやjsはセットでGitHubでも公開されているのでDLして変更して、という感じですね。諸外国でも実践ではCDNは使っていないようです。以下はJQM専門のギャラリーになります。

    http://www.jqmgallery.com/

    この点、フレームワークならではの煩わしさはありますけど、デザインだけなら割と工夫できるのでそういう意味では現状でも楽しめる気がしますが、やはり重いというのが、個人的には実用段階ではない理由として考えています。

    仰るとおり、まだアルファなので僕も現状は生暖かく見守る感じですねw

    貴重な記事をありがとうございましたー!長文失礼しました!

  2. Commented on
    Comment by シナチク

    シロ様

    お返事ありがとうございます!管理人のsakotsuと申します。

    > cssのCDNは使わないのが基本かなと思っています

    そうだったんですか、みなさんどうされているのか不思議だったんですが教えていただいて謎が解けました。

    jQuery Mobile Gallery、拝見しました。
    ここまで出来るもんなんですね!
    何も知らずjQueryMobileを駄目扱いしてしまって、お恥ずかしいw
    さっそく追記させて頂きますm( )m

    有益な情報ありがとうございました!

Compose Comment