カエルの脳みそ

28 1 月, 2012

jqMobiのサンプルを調べ尽くす　その３
Posted by: pagnum.jp In: jqMobi| 開発

ようやくサンプル文の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”で指定された箇所だけを表示します。

その４に続く

No Comments

28 1 月, 2012

jqMobiのサンプルを調べ尽くす　その２
Posted by: pagnum.jp In: jqMobi| 開発

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

５９行目のスクリプトは、
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を何度も見に行く様に作られてるみたいです。

その３に続く。

1 Comment

28 1 月, 2012

jqMobiのサンプルを調べ尽くす　その１
Posted by: pagnum.jp In: jqMobi| 開発

全何回になるか分からんですが、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を呼ばない様に制御されてるんですなー。

次回に続きます！

1 Comment

28 1 月, 2012