Archive for jqMobi

jqMobiのサンプルを調べ尽くす その3

ようやくサンプル文のbodyに入れます!
今回は初期に表示される画面の構成を書きます。

前回はこちら
#そんなに詳しくない人が頑張って解読してますので、間違ってる内容とかあったらぜひともコメントくださいませ。

102
<div id="header">

</div>

headerは何にも入ってない。

106
<div id="content">
	<div title='Welcome' id="main" class="panel" selected="true">
</div>

contentです。
アプリ面の構成は、
content : ヘッドの部分(タイトルとか戻るボタンがあるバー)+タッチできるメイン画面
navbar : 下に不動で出続けるメニュー
という作りみたいですね。
(footerは無いみたい。headerは何のために??)

titleは最初にアプリ起動したときにヘッドバーに表示される名前なので、
アプリ名でも入れておけば良いと思います。

でも、ヘッドバーの文字はなんだか中央より左にずれていて気持ち悪いです。

109
	<h2 class='expanded' onclick='showHide(this,"main_info");'>Welcome</h2>
		<p id='main_info'>Welcome to the kitchen sink demo for jqMobi.  Here you will find samples of how to use the jqMobi libraries.  Please select an option from below.</p>
		<ul>
		 <li><a href="#jqm" >jqMobi</a></li>
		 <li><a href="#jqmui" >jqUi</a></li>
		 <li><a href="#jqmweb" >jqPlugins</a></li>
		</ul>

	</div>

はい。初期表示画面の中身ですね。

onclick='showHide(this,"main_info");

これを設定しておけば、ポチット押すと表示されたり非表示したりします。
「main_info」 はidの指定ですね。

<p id='main_info'>

この内容を表示・非表示できます。

<ul>
		 <li><a href="#jqm" >jqMobi</a></li>
		 <li><a href="#jqmui" >jqUi</a></li>
		 <li><a href="#jqmweb" >jqPlugins</a></li>
</ul>

これは分かりやすい。スマホっぽいUIに勝手になります。
これは多用しそう。

ちょっとだいぶ下の方になりますが、

1159
<!-- ------------------------------------------ -->
<!-- navbar -->
<div id="navbar">
	<div class="horzRule"></div>
    <a href="#main" class='navbar_home' ontouchstart="">home</a>
    <a href="#jqm" class="navbar_js" ontouchstart="">selectors</a>
    <a href="#jqmui"  class="navbar_ui" ontouchstart="">ui</a>
	<a href="#jqmweb"  class="navbar_plugins" ontouchstart="">plugins</a>
</div>
	
<!-- ------------------------------------------ -->

ここが下に表示されるメニューの部分ですね。
初期表示は#mainです。117行目で、id=”main”ってdivに指定してましたが、
ボタンを押すと、その内容が表示されます。
同様に、#jqmならば、id=”jqm”で指定された箇所だけを表示します。

その4に続く

このエントリーをはてなブックマークに追加
はてなブックマーク - jqMobiのサンプルを調べ尽くす その3
Share on Facebook
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`tweetmeme` not found]
[`grow` not found]

jqMobiのサンプルを調べ尽くす その2

前回の続きです。
#そんなに詳しくない人が頑張って解読してますので、間違ってる内容とかあったらぜひともコメントくださいませ。

59行目のスクリプトは、
This function runs once the page is loaded, but appMobi is not yet active
「この関数は、一度ページが読み込まれて実行されますが、appMobiはまだアクティブではありません」by Google先生
中に書いてあるのは、

var webRoot="./kitchensink/";

webRootの設定。

63行目
    var init = function(){
	   $.ui.backButtonText="back";  
    };

ヘッダの左に表示されるバックボタンの表示名を指定できる。
日本語ならbackを戻るに変えればOK。

66
    window.addEventListener("load",init,false);  

windowロード時にセット

68
    /* This code prevents users from dragging the page */
    var preventDefaultScroll = function(event) {
        event.preventDefault();
        window.scroll(0,0);
        return false;
    };
    document.addEventListener('touchmove', preventDefaultScroll, false);

タッチによるスクロールの挙動を制御。初期位置を決めてるんでしょうか。

76
    /* This code is used to run as soon as appMobi activates */
    var onDeviceReady=function(){
		AppMobi.device.setRotateOrientation("portrait");
        AppMobi.device.setAutoRotate(false);
		webRoot=AppMobi.webRoot+"kitchensink/";
	    //hide splash screen
	    AppMobi.device.hideSplashScreen();	
		
    };
    document.addEventListener("appMobi.device.ready",onDeviceReady,false);    
	function showHide(obj,objToHide){
		var el=$("#"+objToHide)[0];
		if(obj.className=="expanded"){
			obj.className="collapsed";
		}
		else{
			obj.className="expanded";
		}
		$(el).toggle();
		
	}

いたるところにappMobiが出てきますが、AppMobi社のライブラリを読みにいくんでしょうか。
そういえば、jqMobiはAppMobi社の作ったオープンプラットフォームです。
AppMobiはChromeのエクステンションで、iPhoneやAndroidアプリが作れる
クラウドプラットフォームです。
http://www.lexues.co.jp/appmobi/
詳細はこちら。

とりあえずREADME読む限り、AppMobiを何度も見に行く様に作られてるみたいです。

その3に続く。

このエントリーをはてなブックマークに追加
はてなブックマーク - jqMobiのサンプルを調べ尽くす その2
Share on Facebook
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`tweetmeme` not found]
[`grow` not found]

jqMobiのサンプルを調べ尽くす その1

全何回になるか分からんですが、1/18に出たばっかりのjqMobiのサンプルを調べ尽くしていこうと思います。

とりあえずスピード重視につらつらと!
#そんなに詳しくない人が頑張って解読してますので、間違ってる内容とかあったらぜひともコメントくださいませ。

http://jqmobi.com/
こちらからダウンロード。
10時間前にリリースされた最新版を触ってみます。世界でまだ56ダウンロードくらい。

【 release_0.9.1a.zip — jQ.Mobi -0.91a release 】です。

サンプルの動作はすべて、index.htmlに記載されているようです。
スライドとかで画面が変わりますが、全部index.htmlに入っているものが出てます。

40行目
<script type="text/javascript" charset="utf-8" src="./jq.mobi.js"></script>

コアライブラリはコレですね。

41行目
<script type="text/javascript" charset="utf-8" src="./plugins/jq.swipe.js"></script> 
<script type="text/javascript" charset="utf-8" src="./plugins/jq.template.js"></script> 
<script type="text/javascript" charset="utf-8" src="./plugins/jq.carousel.js"></script> 
<script type="text/javascript" charset="utf-8" src="./plugins/jq.css3animate.js"></script> 
<script type="text/javascript" charset="utf-8" src="./plugins/jq.drawer.js"></script> 
<script type="text/javascript" charset="utf-8" src="./plugins/jq.passwordBox.js"></script> 
<script type="text/javascript" charset="utf-8" src="./plugins/jq.scroller.js"></script> 
<script type="text/javascript" charset="utf-8" src="./plugins/jq.shake.js"></script> 
<script type="text/javascript" charset="utf-8" src="./plugins/jq.selectBox.js"></script> 

その他たくさん参照してますが、なんとなく名前で役割が分かります。
使わないやつは消しちゃっていいのかな?(いいよね)

51行目
<script type="text/javascript" charset="utf-8" src="./ui/jq.ui.js"></script>

これ、中身を見てみると、A User Interface library for creating jqMobi applicationsって書いてあります。
アニメーション系の動作とか、すべてここに入ってるみたいです。
jq.ui.min.jsもあるので、そちらに指定するともっと軽くなりますなー。

52行目
<script>
if(!((window.DocumentTouch&&document instanceof DocumentTouch)||'ontouchstart' in window)){
var script=document.createElement("script");
script.src="touch.js";
var tag=$("head").append(script);
}
</script>

画面をタッチしたときだけtouch.jsを呼び出す様にされてます。
PCとかだと、touch.jsを呼ばない様に制御されてるんですなー。

次回に続きます!

このエントリーをはてなブックマークに追加
はてなブックマーク - jqMobiのサンプルを調べ尽くす その1
Share on Facebook
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`tweetmeme` not found]
[`grow` not found]

jQueryMobileを超えた!jQMobiの良いところ

スマホの普及は目を見張るものが有りますが、様々なサイトはスマホ化への対応を急がれていて大変です。

モバイル版、PC版、スマホ版と…
デバイスが増えるごとに特別に表示を変えていては、管理が大変。
純粋にサイトが3つに増えたイメージです。

スマホ化を簡単にする方法として、jQueryMobileが有名ですよね。

最近、そのjQueryMobileのほかに、jqMobiが誕生しました。

http://www.readwriteweb.com/mobile/2012/01/jqmobi-is-a-mobile-optimized-h.php
こちらに書かれている内容を信じると、コード量は9分の1くらい(JS Engineで)。

超早いです。

実際に使ってみたところ、jQueryMobile特有のイライラするロードも無く、超快適です。

フォームのデザインなど、まだまだと感じる箇所も有りますが、今からスマホ化される方は使ってみてはいかがでしょう。

jqMobiはこちらからダウンロードできます!
http://jqmobi.com/

※追記
★jqMobiのサンプルを調べつくす記事も書きました!
jqMobiのサンプルを調べ尽くす その1
jqMobiのサンプルを調べ尽くす その2
jqMobiのサンプルを調べ尽くす その3

このエントリーをはてなブックマークに追加
はてなブックマーク - jQueryMobileを超えた!jQMobiの良いところ
Share on Facebook
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`tweetmeme` not found]
[`grow` not found]