端末ごとに開発する現状何とかならないの？

こんばんは、
しょこたんです。

最近スマートフォンアプリを見て、
なんで端末ごとに(正しくはOS毎かな)
開発しなければならないのだろう。。

一つ開発すれば終わりにできればいいのに。

なんて考えていました。

そんな時、
アプリではないにしても、
■スマートフォンアプリ並の見栄え、
■縦横の動きに連動。
■HTML,JavaScript書くだけで複数端末対応完了。
そんなライブラリが登場しました。

JQuery-Mobileです。

スマフォ対応への一歩を歩む。

JQuery-Mobileは、
ライブラリを読み込み、metaタグを入れ込むだけで、
スマートフォン対応になる夢のライブラリ。

やり方は簡単。
1.JQuery1.6.2を取得し、読み込む。

<script type="text/javascript"
	src="<JQueryへのpath>/jquery-1.6.2.min.js">

2.JQuery-Mobileを取得し、読み込む。

<script type="text/javascript"
	src="<JQuery-MobileへのPath>/jquery.mobile-1.0b2.min.js">

3.画面サイズに追随する設定を入れる。

<meta name="viewport" content="width=device-width, initial-scale=1">

を追加。

そうすることで見た目がスマフォ風に変わります。

これは普通。
下がスマフォ対応画面。

headerとかfooterが付き、背景が、
スマフォ風に変わりました。

たったこれだけで、
複数のOSに関して、同じ画面を提供できるのは、
素晴らしい。
ちなみに、PCでアクセスしても画面の大きさに追随して、
表示されます。

とはいえ、まだ読み込んでみただけなので、
これだとあまりお得さを実感できないですね。

実際にスマフォっぽい画面を作って、
紹介します。

画面構成も思いのまま。

JQuery-Mobileの特徴は、
コードを書かずにHTMLだけで、
スマフォ風の画面表示を実現することができる事です。

たとえば画面の基本構成となる、
・header
・contents
・footer
の3つの生成方法を見てみましょう。

この3つの構成も、JQuery-Mobileでは、
それぞれ以下のように記述すれば、
JQuery-Mobile側が勝手に作ってくれるのですね。

※ちなみに今回は、SAStruts×JQuery-Mobileの組み合わせで、説明を行います。

<div data-role="page">
	<div data-role="header">
		<tiles:insert page="header.jsp" />
	</div>
	<div data-role="content">	
		<tiles:insert attribute="content" />
	</div>
	<div data-role="footer">
		<tiles:insert page="footer.jsp" />
	</div>
</div>

このような記述で、
以下のようにコンテンツが分けられます。

ジャン。

また、上記画面を見るとわかるように、
headerにアイコン付きメニューも表示できます。

これらもdivタグを書き込むだけで実現できるのですね。

実際のコードはこちら。

	<h1 aria-level="1" role="heading" tabindex="0" class="ui-title">XXXシステム</h1>
	<ul class="ui-grid-b">
		<li class="ui-block-a"><a class="ui-btn ui-btn-up-a" data-theme="a" href="#" rel="external" data-icon="plus"><span 

class="ui-btn-inner"><span class="ui-btn-text">登録</span></span></a></li>
		<li class="ui-block-b"><a class="ui-btn ui-btn-up-a" data-theme="a" href="#" rel="external" data-

icon="search"><span class="ui-btn-inner"><span class="ui-btn-text">変更</span></span></a></li>
		<li class="ui-block-c"><a class="ui-btn ui-btn-up-a" data-theme="a" href="#" rel="external" data-icon="check"><span 

class="ui-btn-inner"><span class="ui-btn-text">承認</span></span></a></li>
</c:if>
		<li class="ui-block-d"><a class="ui-btn ui-btn-up-a" data-theme="a" href="#" rel="external"  data-icon="grid"><span 

class="ui-btn-inner"><span class="ui-btn-text">レポート出力</span></span></a></li>
		<li class="ui-block-e"><a class="ui-btn ui-btn-up-a" data-theme="a" href="#" rel="external"  data-icon="back"><span 

class="ui-btn-inner"><span class="ui-btn-text">ログアウト</span></span></a></li>
	</ul>

アイコン表示は、
data-icon="search"
の部分で行うことができます。

ある一定の記述ルールをするだけで、
簡単にスマフォっぽい画面を作れるってお得ですね。

通信時に勝手にAjax通信をする！？SAStruts×JQuery-Mobileのはまりどころメモ。

今回は、SAStruts×JQuery-Mobileを使い、
フレームワークとの融合を試みたのだが、
これがなかなかうまくいかないです。

それは、
JQuery-Mobileを使った場合、
submitボタン押下及びaタグをクリックした際の
画面遷移時のデータのやり取りがすべて
Ajax通信に変化するからでした。

ただのPOST通信を行う記述を書いたのに、
強制的にAjax通信をされるので、
こちらの思ったように動かないです。

たとえば遷移後の初期化表示がうまくできない。

画面自体は遷移できるものの、
Javascript等の実行は明示的に処理をたたかないと
動きません。

すでにページがロードされた後なので、
$(document).ready(......
の記述が呼び出されないのです。

なので、フレームワークと一緒に使うには、
これらのオプションをOFFにする必要があります。

それは、JQueryライブラリの読み込みと、
JQuery-Mobileのライブラリ読み込みの
間に以下の文を入れることで回避可能です。

<script type="text/javascript">
$(document).bind("mobileinit", function(){
	$.extend(  $.mobile , {
		ajaxFormsEnabled : false,
		ajaxEnabled : false,
		ajaxLinksEnabled : false
	});
});
</script>