jQueryMobileでスマートフォンサイトを作ろう ITかあさん

ITかあさん

目次:jQueryMobileでスマートフォンサイトを作ろう

jQueryMobileはJavascriptのライブラリで有名なjQueryベースで作られたスマートフォンサイト制作用のフレームワークのことです。
最大の特徴はAjax、Javascriptの知識がほとんど無くても、HTMLさえ理解できれば誰でもカッコイイスマートフォンサイトが作れるところ!
そんな魅力たっぷりなjQueryMobileをインストール時の注意点から細かく解説していきます。
今すぐあなたもjQueryMobileでスマートフォンサイトを作ってみましょう!

jQueryMobileでブラウザ戻るを使うとバグが発生する

jQueryMobileでブラウザボタンを使うと、なぞのlodingが始まる件

jQuerymobile ブラウザ戻るボタンのバグ

久々にjQueryMobileの話題。jQueryMobileのバグっぽい症例として

iPhoneのブラウザ戻るボタンを使うと、勝手にlodingが始まり、
前のページに戻ってしまう

と、いう問題。

jQueryMobileのlodingでページが読み込みされるのはAjaxページ遷移なわけで、
このAjaxページ遷移を切ったらうまくいくだろうと容易に想像つきます。

ただAjax遷移を切るだけじゃダメよ

この問題はAjax遷移を切るだけではだめなようです。

今回のバグに関する回避の記述例

$(document).bind('mobileinit', function(){
  $.mobile.ajaxEnabled = false;//Ajaxを切る
  $.mobile.ajaxLinksEnabled = false;//Ajaxページ遷移を切る
  $.mobile.ajaxFormsEnabled = false;//フォーム使用時もAjaxを切る
  $.mobile.hashListeningEnabled = false;//これが大事!!!!
});

$.mobile.hashListeningEnabledって?

location.hash の変更がないかチェックして、制御するみたいです。

jQueryMobile独自の、あの『loding』してページ遷移する機能がありますが、あの機能を利用するとURLにハッシュが付与されます。
今回のケースはそれに関わるバグなんじゃないか、ということですね。

PhoneGap利用したiPhoneアプリ開発時は気にしなくていいよ!

今回はブラウザの戻るボタンを利用した際のバグらしいので、

ブラウザの戻るボタンに依存しない PhoneGapなどを利用したJavascriptベースのiPhoneアプリをjQueryMobileで作った場合

は 気にしなくてよいみたいです

参考サイト

jQuery Mobileで確認画面付のフォームでSessionが消える問題

今日もSessionと戦っています。(このところSessionに関する問題が多いな・・)

相変わらずCakePHPですが、今回は404エラーも一切なく、セキュリティーレベルの問題も問題なく、むしろform内でのみSessionが切れる問題です。

唯一今までと違ったのはCakePHP×jQuerymobileを使った、確認画面付メールフォームということでした。

確認画面で切れるSession

通常確認画面付のメールフォームはどう作るでしょう?

Sessionに確認画面で代入しますが、今回はそれがうまくいきませんでした。
どうもformのaction先でSession保存されたように見えて、確認画面などで更新ボタンを押すとSessionが壊れるばかりか、フォームの確認画面で更新ボタンを押した時に、
フォームの再送信もされないようでした。

フォームでお馴染みのこのダイアログも出ない

jQuerymobileのJavascriptを一度外すと正常に処理されるので、jQuerymobile側の問題と断定は出来きました

formのAjaxを外してもダメ

試しにAjax遷移を外してダメでした。

 $(document).bind("mobileinit", function() {
		$.mobile.loadingMessage = '読み込み中です';
		$.mobile.pageLoadErrorMessage = '読み込みに失敗しました';
		$.mobile.page.prototype.options.backBtnText = "戻る";
		$.mobile.ajaxEnabled = false;
		$.mobile.ajaxFormsEnabled = false;
    });

解決方法

すごく考えたんですが、結局分かりませんでいた!

jQuerymobileが問題でSessionが切れることに気がついたのもかなり時間が経過したのですが、どうしたらjQuerymobileでページをまたいでSessionを維持するのかまではうまく実装できませんでした

ページをまたいで$_POSTを$_SESSIONに代入しない

いつも確認画面など、次のページのaction先でSessionに入れていたのですが、その処理を諦めました。

ページをまたいでからSessionに代入しなければ問題なく処理されたので、

formのaction先を自分自身にし、$_POSTが渡ってきたら$_SESSIONに代入して、確認画面にリダイレクトする

この方法で対応しました。

処理としては、悩んだわりにすごくシンプルですね。
Sessionに代入してから、確認画面にリダイレクトです。

if($_POST){
$_SESSION = $_POST;
$this->redirect('/individuals/chk/'.$district);//情報をPOSTしてからの画面遷
}

あまり釈然としないモヤモヤ感ですが、ページをまたがずにSession化してから次のページにいけば、問題なく実装できたので めでたしめでたしとします。

.htaccessでPCサイトとスマートフォンサイト切り替え

.htaccessでスマートフォンサイトへリダイレクト

jQuerymobileでサイトを作って公開したら、スマートフォンサイトでPCサイトにアクセスしてきたら
PC版サイトのフォルダ直下に以下のコードを.htaccessとして設置します。
ここではhttp://smp.example.com/をスマートフォンサイトURLと仮定して、
スマートフォンがPCサイトへアクセスしてきた場合、スマートフォン版のURLへリダイレクトする方法です。

RewriteEngine On
RewriteCond %{REQUEST_URI} !^smp.*$
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android|BlackBerry|Windows.Phone) [NC]
#ipadはPC版に。
RewriteCond %{HTTP_USER_AGENT} !iPad [NC]
RewriteRule ^$ http:\/\/smp.example.com\/ [R=301,L]

.htaccessでスマートフォンサイトからPCサイトへの切り替えリンク

ただし、上記の場合だとスマートフォンサイトからPCサイトを閲覧したい場合も問答無用でリダイレクトされてしまうので、
PCサイトへの切り替えリンクのURLには以下のようにパラメータを付与してあげます。

http://smp.example.com/?viewmode=pc

viewmode=pcのパラメータを持っていた場合はリダイレクトを行わないという.htaccessの記述を加えればOKです。

RewriteEngine On
RewriteCond %{REQUEST_URI} !^smp.*$
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android|BlackBerry|Windows.Phone) [NC]
#ipadはPC版に。
RewriteCond %{HTTP_USER_AGENT} !iPad [NC]
#viewmode=pc パラメータ持っていた場合はリダイレクトしない
RewriteCond %{HTTP_COOKIE} !viewmode=pc
RewriteCond %{QUERY_STRING} !viewmode=pc

RewriteRule ^$ http:\/\/smp.example.com\/ [R=301,L]

jQuerymobile×WordPressでスマートフォンテーマを作ろう!

jQuerymobileでWordpressテーマを作る

さて、ここまでの仕上げとしてjQuerymobile×Wordpressテーマを作ることにしましょう。今回は今までのおさらいでまだPHPのタグは入れずに静的なページ遷移を作っておきます。Wordpressのテーマタグはのちほど入れていきます。
あらかじめ作っておくページは

・トップページ
・カテゴリー内記事一覧ページ
・記事ページ

正確には3つ以外にも404ページや検索結果ページなどたくさんあるのですが、記事ページのレイアウトを利用することにして、ざっと作っておくことにします。
jQuerymobileの基本ファイルは前回の記事を参考にして基本ファイルを作って下さい。
以下の記事を参考にすると、jQuerymobileのCSSやJavascript、オリジナルカラーも一緒にダウンロードすることが出来ます。

まずはトップページ

まずはトップの見た目から。

このレイアウトのやり方は以前のこちらの記事を参考にして下さい。

ソースコード

トップページのソースコードです。

<!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQueryMobileでスマートフォンサイトを作ろう</title>
  
  <!--jQueryMobileThemeRollerで作ったオリジナルカラー-->
  <link rel="stylesheet" href="themes/kaasan.min.css" />
  
  <!--jQueryMobileのCSS-->
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile.structure-1.0.1.min.css" />
  
  <!--jquery-->
  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  
  <!--戻るボタンの設置-->
  <script>
  $(document).bind("mobileinit", function() {
  $.mobile.page.prototype.options.addBackBtn = true;
  });
  </script>
  
<!--jquery.mobileのJavascript-->
  <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
  
  <!--さらに独自でCSSを記入したい場合は一番最後に-->
  <link rel="stylesheet" href="./themes/common.css" />
  </head>
  <body>
  
  <!--div data-role="page"で表示部分全体を囲う-->
  <div data-role="page" data-theme="a">
  <header data-role="header" data-position="inline"><h1>ITかあさん</h1>
  </header>
<!--div data-role="content" コンテンツ部分ここから sectionタグでもよい。-->
  <div data-role="content" data-theme="a">
  
  <!--リストっぽい表示にさせたい-->
  <ul data-role="listview">  
  <li>
  <a href="archives.html">
  <img src="./images/cakephp.gif" alt="cakephp" width="50" height="50"class="ui-li-ico"/>
  CakePHP入門<br>
  <span class="small">Cakephp入門を世界で一番優しく 余計なくらい丁寧に解説するをモットーに、現在執筆中</span>
  <span class="ui-li-count">3</span>
  </a>
  </li>
  <li>
  <a href="archives.html">
  <img src="./images/jquery.gif" alt="cakephp" width="50" height="50"class="ui-li-ico"/>
  jQuery<br>
  <span class="small">jQueryがとにかく好きです。そんな私のJquery雑記帳です。 </span>
  <span class="ui-li-count">3</span>
  </a>
  </li>
  <li>
  <a href="archives.html">
  <img src="./images/php.gif" alt="cakephp" width="50" height="50"class="ui-li-ico"/>
  PHP雑記帳<br>
  <span class="small">Cakephp入門を世界で一番優しく 余計なくらい丁寧に解説するをモットーに、現在執筆中</span>
  <span class="ui-li-count">3</span>
  </a>
  </li>
  <li>
  <a href="archives.html">
  <img src="./images/html.gif" alt="cakephp" width="50" height="50"class="ui-li-ico"/>
  WEBテクニック<br>
  <span class="small">WEBデザイナーとしての顔も持つITかあさんのコーディングを中心としたテクニックを公開します。</span>
  <span class="ui-li-count">3</span>
  </a>
  </li>
  </ul>
  </div>
  
<footer data-role="footer" data-position="inline">
<!--ui-gridで、boxに分割。今回は2分割に-->
  <div class="ui-grid-a">
  <div class="ui-block-a">
  <form method="get" action="act.html"> 
  <input type="search" name="search" id="search-basic" value="" /> 
  </form>
</div>
<div class="ui-block-b"><a title="ITかあさん" href="http://www.kaasan.info">ITかあさん</a></div>
</div> 
</footer>
  </div>
  </body>
  </html>

カテゴリー内記事一覧

カテゴリー内に記事を一覧で表示するページです。シンプルなリスト表示になっている他は、ヘッダー内にホームに戻るボタンが設置されている点です。

ソースコード

<!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQueryMobileでスマートフォンサイトを作ろう</title>
  <link rel="stylesheet" href="themes/kaasan.min.css" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile.structure-1.0.1.min.css" />
  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script>
  $(document).bind("mobileinit", function() {
  $.mobile.page.prototype.options.addBackBtn = true;
  });
  </script>
  <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
  <link rel="stylesheet" href="./themes/common.css" />
  </head>
  <body>
  
  <div data-role="page" data-theme="a">
  <header data-role="header" data-position="inline"><h1>jQueryMobileでスマートフォンサイトを作ろう</h1>
  <!--ヘッダー内にhomeボタンを追加する-->  <a href="index.html" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
  </header>
<div data-role="content" data-theme="a">
  <!--シンプルなリスト表示-->
  <ul data-role="listview">
  <li><a href="single.html">jQueryMobileのダウンロードと設置</a></li>
  <li><a href="single.html">jQueryMobile リンク、ページ遷移について</a></li>
  <li><a href="single.html">jQueryMobile スマートフォンっぽいリスト表示</a></li>
  <li><a href="single.html">jQueryMobile リスト表示をアレンジ</a></li>
  <li><a href="single.html">jQueryMobile ナビゲーション表示</a></li>
  <li><a href="single.html">jQueryMobile ラジオボタン、チェックボックス</a></li>
  <li><a href="single.html">jQueryMobile toggle</a></li>
  <li><a href="single.html">jQuerymobile カラムのレイアウト調整</a></li>
  <li><a href="single.html">jQueryMobile にオリジナルjavascriptを記述する方法</a></li>
  <li><a href="single.html">Google アナリティクスをjQuerymobile内で使う</a></li>
<li><a href="single.html">jQuery Mobile ThemeRollerを使ってスマートフォンオリジナルテーマを作ろう!</a></li>
</ul>
  </div>
  
  <footer data-role="footer" data-position="inline">
<div class="ui-grid-a">
  <div class="ui-block-a">
  <form method="get" action="act.html"> 
  <input type="search" name="search" id="search-basic" value="" /> 
  </form>
  </div>
<div class="ui-block-b"><a title="ITかあさん" href="http://www.kaasan.info">ITかあさん</a></div>
  </div> 
</footer>
    
  </div>
  </body>
  </html>

記事ページ

記事ページは特に開設する部分がないので飛ばします。

ダウンロード

今回の記事の内容をzipファイルに固めました。必要に応じて利用してください。

まとめと注意事項

今回は今までの復習となります。
基本はコピペでいけます。
特に注意したいのがjQuerymobileのパッケージのファイルの読み込みの順番です。
また、このコーナーを書き始めたのが去年の秋だったのですが、そこからjQuerymobileも進化を遂げ、テーマローラが出来たり、xss系の脆弱性もだいぶ改善されたようです。
このコーナーのイチバン最初の記事でスマートフォンで表示させたときにすごく小さい表示になってしまうバグの修正方法を上げさせて頂きましたがテーマローラでダウンロードしたところそのような不具合は見られませんでした。
より、楽しく使いやすくなりましたね。

さらにjQuerymobileはCS5からDreamweverでもサポートされるようになり、今後の発展にますます期待が高まりますね。

次回はjQuerymobileの話から少しそれますがWordpressのタグの入れ込みをして、スマートフォンテーマとして利用する方法を紹介したいと思います。

jQuery Mobile ThemeRollerを使ってスマートフォンオリジナルテーマを作ろう!

jQuery Mobile ThemeRollerを使ってオリジナルテーマを作ろう!


jQuerymobileを使って基本的なレイアウトの方法が分かったところで自分でテーマを自分で作っていきましょう。
そこで便利なのがjQuery Mobile ThemeRoller!
ヘッダーやフッター、ボタンなどのアイテムのカラーやフォントを自由に変更することが出来ます。これでぐっとデザインの時間短縮が出来ることでしょう。
自分で作ったテーマはjQuery Mobileの基本ファイルが全てパッケージ化されてダウンロードすることが出来、すぐに動かすことが出来ます!ぜひみなさんも試してみてください。

Google アナリティクスをjQuerymobile内で使う

Google アナリティクスをjQuerymobile内で使う

jQuerymobile内部でGoogleアナリティクスを使うにはちょっと工夫が必要のようです。
散々jQuerymobileで独自にJavascriptを書こうとして痛い目見ましたからおそらく普通と書き方違うことは対応する前から気がついていましたが・・・

jQuerymobile専用Google アナリティクスコード

以下がjQuerymobile専用のGoogle アナリティクスコードです。自分のトラッキング IDを入れるを入れてコピペで利用してください。

//set
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxx-x']);//自分のトラッキング IDを入れる
//async
(function () {
var ga = document.createElement('script'); ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//data-role='page'が表示されたら
$('[data-role="page"]').live('pageshow', function(){
var u = location.hash.replace('#', '');
u ? _gaq.push(['_trackPageview', u]) : _gaq.push(['_trackPageview']);
});

注意点

一応コピペで使えるのですが、以下の点に注意してjQuerymobile専用のGoogle アナリティクスコードを使って下さい

・jQuery本体と、jquery.mobile.min.jsの間に記述する
・全てのページに書く(どこのページからユーザーは読みにいくか分からないため)

これでAjax遷移しているjQuerymobileサイト内でも正しくカウントを取ることが出来ます。

ネタ元

jQueryMobile にオリジナルjavascriptを記述する方法

jQueryMobile にオリジナルjavascriptを記述する方法

jQueryMobileの記事は久々ですね。
jQueryMobileを使ってスマートフォンサイトを作り始めると、独自でjavascriptを書くケースが出てきます。これは普通のPCサイト作っていたって書くので当然のことですね。

jQueryMobile $(document).ready()が動かない

jQueryプラグインの多くは、もしくは独自で記述をしようとすると$(document).ready()を利用すると思います。。つまり、全てのDOM要素(HTMLとか)が読み込まれてから、指定されたjavascriptを実行するというものです。
ところがどっこい、jQueryMobileは$(document).ready()が動きません。

どのような動きになるか検証してみる

簡単なalertの出力で、実際にどのような動きになるのか検証してみましょう。
スマホでも、PCからでもどちらでも同じ挙動を示すのでお好きなほうで見て下さい。
遷移先と、遷移前、どちらのhead内にalertのjavascriptが入っています。


サンプルイメージ

jQuerymobileでの$(document).ready()
動きませんね。先にあげた通り、<head>の内容は再読込されないため、遷移先のhtmlにjavaScriptを記述しても実行されません。

jQueryMobileでJavascriptを書くときのポイント

jQueryMobileの落とし穴とも言うべき2つのポイントです。これを踏まえてJavascriptを書いてあげる必要があります。

・head内はページ内リンクしても再読み込みされない
・ページ遷移後の実行はjQueryMobile pagecreateイベントを使う

jQueryMobile pagecreateイベントを使う

ページがDOMに挿入されて、表示されたときに発動します。まさにページ遷移した後にJavascriptを発動したい時にぴったりですね

サンプルコード

これを遷移前と、遷移後、2つのhead内にjavascriptの外部ファイルとして遷移前と遷移後、両方で』読み込んであげます。
$("div[data-role*=’page’]")とは、表示領域全体のことです。jQueryMobileを利用すると、表示領域全体が自働でそのようなrole属性で囲われます。
以下のコードをalert.jsというファイルにして、遷移前、遷移後、どちらにも読み込んであげます。


先に言ったとおり、jQueryMobileはhead内が再読み込みされないので、どのページから読み込まれても大丈夫なように対象のheadタグ内に記述してあげる必要があります。

サンプルイメージ

pagecreateイベントでalert()
pagecreateイベントをうまく使えば、より素敵なスマホサイトが作れそうですね。

jQuerymobile カラムのレイアウト調整

jQuery Mobileレイアウト調整

jQueryはシングルカラムの場合、特に何もしなくてもあらかじめpaddingが取られているため非常に収まりがよい。
実は2カラムや3カラムでもとっても簡単で、もちろんスマートフォンの横向きにも対応。

CSS3では画面サイズによってwidthを可変するプロパティが追加されたから可能なんですね。
jQuerymobileは横にも対応
では実際にマークアップしてみましょう。

カラムの分割方法

カラムの分割をするには、分割をするブロックそのブロック全体を囲うブロック要素がそれぞれ必要で、分割するブロックの数によって 付与するクラスが違います。

シングルカラム 2カラム 3カラム 4カラム
特になし ui-grid-a ui-grid-b ui-grid-c
特になし ui-block-a
ui-block-b
ui-block-a
ui-block-b
ui-block-c
ui-block-d
ui-block-a
ui-block-b
ui-block-c
ui-block-d

2カラムならブロックを囲う方のクラスはui-grid-aとなり、実際に分割している方はui-block-a,ui-block-baとなります。

分割するブロックが増えるにつれて、囲う方のクラスはui-grid-aui-grid-bui-grid-cとアルファベット順に増えて行き、分割しているブロックも同じようにui-block-aui-block-bui-block-cと増えて行く。

最大5カラムまで指定が可能です。

2カラムのソースコード

<div class="ui-grid-a">
<div class="ui-block-a"><p>ui-block-a<br/>
ああ
</p></div>
<div class="ui-block-b"><p>ui-block-b<br/>
ああ
</p></div>
</div>

3カラムのソースコード

<div class="ui-grid-b">
<div class="ui-block-a"><p>ui-block-a<br/>
ああ
</p></div>
<div class="ui-block-b"><p>ui-block-b<br/>
ああ
</p></div>
<div class="ui-block-c"><p>ui-block-c<br/>
ああ
</p></div>
</div>

jQuerymobile カラムのレイアウト変更

DEMO

こちらにデモを公開します。ui-gridは最大ui-grid-eまで設定が可能で、こちらのデモは最大のui-grid-eまでやってみました。4カラムや5カラムに挑戦したい場合は下記デモページよりソースコードをコピーして使って下さい。

次回の予定

次回はjQuerymobileの総まとめ!何とjQueryMobile使ってITかあさんのブログ スマートフォン版を作りたいと思います。
Wordpress × jQuerymobileでスマートフォンサイトを作りたいと思います。

jQueryMobile formまとめ

jQueryMobile テキストフォーム

前回ちらっとtoggleについて触れましたが、jQueryMobileのテキスト系のformについてまとめていきたいと思います。

フォームを色々試してみた

今回つかってみたフォームのパーツは下記表の通りです。

コード


実行結果

Opera

オペラは最もHTML5 に対応しているブラウザで、HTML5から新規導入された属性もほぼ網羅しています

iphoneで見た場合

iphoneのブラウザはsafariですね。HTML5はフォーム関連で追加も多いのですが、全てに対応しているわけではないようです。
なお、フォームで対応していない属性については画像の通りただのテキストフォームになってしまいます。
ある程度のブラウザのシェアを考えると、HTML5のフォームはrangeまでに留めておいたほうがよさそうです

jQueryMobile toggle

jQueryMobile toggleを表示

;

jQueryMobileではtoggleも用意されています。上記はtoggleで渡された情報を取得するスクリプトです。
selectタグとdata-role=”slider”を組み合わせることで、スマートフォンサイトUIっぽいtoggleの実装が出来ます。
『どちらか必ず選ぶ』という意味ではradioが妥当な気もするのですが、レイアウトが崩れてしまうようで、selectのみ実装可能なようです。

Toggleを作ってみよう

現在選択中のvalueの値を取得します