Archive for 開発

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]

mixiアプリの外部サーバー連携(PHPの場合)

mixiアプリを作っていて、外部サーバーとの連携で嵌ったのでメモ。

署名についてよく分からなかった。
結局はOAuth.phpを使って、呼び出し先のphpに
署名を入れておけばいいだけの話だったが。

mixiアプリと外部サーバーとの関係図
e6a78be68890

1.mixiアプリ(javascript)から、
OpenSocialの外部連携用APIを用いて接続を試みる。

ソース

var callback = function(res) {
 // ★コールバック用の処理★
};
var url = "★Pathを入れてください★";
var postData = {param2: "value2"};
var params = {};
params[gadgets.io.RequestParameters.REFRESH_INTERVAL] = 0;
params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.POST;
params[gadgets.io.RequestParameters.POST_DATA] = gadgets.io.encodeValues(postData);
// ★書名付きには、下記1行が必要★
params[gadgets.io.RequestParameters.AUTHORIZATION] = gadgets.io.AuthorizationType.SIGNED;
gadgets.io.makeRequest(url, callback, params);

2.呼び出されるサーバサイド(php)に署名付きリクエストの検証を行う内容を載せる

ソース

require_once("OAuth.php");

class MixiSignatureMethod extends OAuthSignatureMethod_RSA_SHA1 {
  protected function fetch_public_cert(&$request) {
  return <<< EOD
-----BEGIN CERTIFICATE-----
MIICdzCCAeCgAwIBAgIJANCWpLIspxwbMA0GCSqGSIb3DQEBBQUAMDIxCzAJBgNV
BAYTAkpQMREwDwYDVQQKEwhtaXhpIEluYzEQMA4GA1UEAxMHbWl4aS5qcDAeFw0x
MDAzMjMwODE1NTlaFw0xMjAzMjIwODE1NTlaMDIxCzAJBgNVBAYTAkpQMREwDwYD
VQQKEwhtaXhpIEluYzEQMA4GA1UEAxMHbWl4aS5qcDCBnzANBgkqhkiG9w0BAQEF
AAOBjQAwgYkCgYEAtbq5Rns5IEktXldZ+37Fjlavnuc4JuwrD4F+4NQwVwVtR5yw
Vg10EanXWSGIAbUFx6hlppYOb0x/3PBMG80643LmXSJmvv4ViRUBl2Ys9Ie2L/D9
KVQXDWgJjxBGqo5MO6rA/Ip78kbiNbIQJUIJtbuJZWL3LMVe6mpIO2SUi1UCAwEA
AaOBlDCBkTAdBgNVHQ4EFgQU8bp8/6lmt5L8em6dZyoGciUUmuUwYgYDVR0jBFsw
WYAU8bp8/6lmt5L8em6dZyoGciUUmuWhNqQ0MDIxCzAJBgNVBAYTAkpQMREwDwYD
VQQKEwhtaXhpIEluYzEQMA4GA1UEAxMHbWl4aS5qcIIJANCWpLIspxwbMAwGA1Ud
EwQFMAMBAf8wDQYJKoZIhvcNAQEFBQADgYEApalbBgXxnLJW8fM6W7E7GAE4QZbE
lvYqvtQSxwacGYoqF2FW1zrBkmTB12LTddFU01pqDaeels3Ru5TNOnTIJemFWW0D
viKtu9GqsrOye6AZR+XA5Iy/vq3EV1TCGuDNmhJaHAiLeYuLbEqmvH7/l9xNsafH
IpqnsHwF1pm0bTY=
-----END CERTIFICATE-----
EOD;
  }
}

//Build a request object from the current request
$request = OAuthRequest::from_request(null, null, array_merge($_GET, $_POST));

//Initialize the new signature method
$signature_method = new MixiSignatureMethod();

//Check the request signature
@$signature_valid = $signature_method->check_signature($request, null, null, $_GET["oauth_signature"]);

//Build the output object
$payload = array();
if ($signature_valid == true) {
  $payload["validated"] = "Success! The data was validated";
} else {
  $payload["validated"] = "This request was spoofed";
}

//Add extra parameters to help debugging
$payload["query"] = array_merge($_GET, $_POST);
$payload["rawpost"] = file_get_contents("php://input");

//Return the response as JSON
print(json_encode($payload));

OAuthのコードは下記からDL
http://oauth.googlecode.com/svn-history/r526/code/php/OAuth.php

詳しくは、下記
http://developer.mixi.co.jp/appli/pc/lets_enjoy_making_mixiapp/require_servers

このエントリーをはてなブックマークに追加
はてなブックマーク - mixiアプリの外部サーバー連携(PHPの場合)
Share on Facebook
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`tweetmeme` not found]
[`grow` not found]