Titanium Mobile 2.0ローンチイベントについて
Titanium Mobile 2.0ローンチイベントレポート – Titanium News
Titanium Mobile 2.0 ローンチ記念イベントに行ってきた « kwLog
Titanium 2.0 ローンチイベントに参加して LT もしてきました | imthinker.net
ローンチイベントに参加された方のリンクを貼っておきます。

こちらのまとめも良かったです。
Titanium Mobile 2.0 対応など – Naoya’s Hatena Diary
とても参考になりました！

まずは、appceleratorのRelease Notesを転載。
http://docs.appcelerator.com/titanium/release-notes/?version=2.0.1.GA

New in This Relase
・Layout System Updates
・Support for Appcelerator Cloud Services (formerly CocoaFish)
・Mobile Web Platform Release Candidate
・Android Geolocation Enhancements
・Defined Module APIs for Android and iOS

書いてあるままですが、
UIまわりの変更が自分的には大きかったです。
1.8系で作っていたアプリも、2.0にしてから、
レイアウト崩れが発生しました。

レイアウトに関する変更点をRelease Notesから転載。

The major changes to the layout system involve:
１）Improved handling for automatic sizing of views
２）Batch layout updates for improved performance
３）Post-layout event generated when layout is complete
４）New precedence order for layout parameters

それぞれ説明します。

１）自動サイジングの精度向上
　Ti.UI.FILL（指定された領域でなるべく大きく配置）
　Ti.UI.SIZE（指定された領域でなるべく小さく配置）
　の新規定数が用意されました。
　画面サイズの違うAndroidには多用されそう。

２）バッチレイアウト
レイアウトでバッチ処理が可能に。
コンポーネントで以下の様に複数のプロパティを設定すると、設定毎に再描画が走っていた。

myView.startLayout();
myView.top = 50;
myView.left = 50;
myView.width = 200;
myView.finishLayout();

それが、

myView.updateLayout({
top: 50,
left: 50,
width: 200
});

の様にまとめて描画処理ができる。
（まとめて今まで書いてたけど、描画は別々だったってこと？）

３）レイアウト変更完了を検知するイベントが出来ました。

View.postLayout　ですね。

var postLayoutCallback = function(e) {
Ti.API.info(String.format(“Layout done, left: %f, width: %f”, myView.rect.x, myView.rect.width));
myView.removeEventListener(‘postlayout’, postLayoutCallback);
}
myView.addEventListener(‘postlayout’, postLayoutCallback);
myView.updateLayout({
left: ’25%’,
width: ’25%’
});

こんな感じで、位置変更後のタイミングでpostLayoutイベントが発行されます。

４）レイアウトパラメータの優先規則が変わった様です。

変更点は公式のここに詳しく書いてました。
https://wiki.appcelerator.org/display/guides/Titanium+2.0+Layout+Changes

・Any UI component with the width property defined as “auto” can safely define its width parameter as Ti.UI.SIZE to return to 1.8 behavior.
・Any UI component with the width property undefined and with less than 2 positioning pins defined can safely define its width parameter as Ti.UI.FILL to return to 1.8 behavior.

とあるので、
・1.8系でautoを指定してた場所には、2.0ではTi.UI.SIZEを
・1.8系で何も指定していなかった場合は、2.0ではTi.UI.FILLを
指定すれば互換するとのこと。

実際に、width:Ti.UI.FILLなどを指定して、画面の崩れは無くなりました。

・アプリアイコン（3G、4、iPad）
appicon.png 　　　　　57×57
appicon@2x.png 　　　114×114
appicon-72.png 　　　　72×72

こちらから引用。他にもたくさん書いてあります。
http://www.sawadaru.com/blog/?p=293

こちらも参考になりました。
http://blog.syuhari.jp/archives/2194

とか、



とかです。

それぞれの入手方法を掲載します。

■App Store

Marketing Resources
http://developer.apple.com/iphone/appstore/marketing.html

※アカウントが必要ですよ。

■Google Play

Build a Google Play button
http://developer.android.com/guide/publishing/publishing.html#BuildaButton

AppStoreとは違い、リンクをジェネレートできます。

公式のボタンを設置できると、なんだか安心感増しますね。

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

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”で指定された箇所だけを表示します。

その４に続く

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

その３に続く。

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

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を呼ばない様に制御されてるんですなー。

次回に続きます！

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

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

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

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

超早いです。

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

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

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

※追記
★jqMobiのサンプルを調べつくす記事も書きました！
jqMobiのサンプルを調べ尽くす　その１
jqMobiのサンプルを調べ尽くす　その２
jqMobiのサンプルを調べ尽くす　その３

こちらのブログが分かりやすかった。

http://d.hatena.ne.jp/mystandardcojp/20110523/1306118355

html5.jsのダウンロードはこちら

http://remysharp.com/2009/01/07/html5-enabling-script/

http://www.seotemplate.biz/free-seo/2111/

＜meta name="robots" content="noodp,noydir" /＞

これで自動的なカテゴリ登録でユーザを惑わす事はなくなる。

1. 著作物を引用する必然性があり、また、引用の範囲にも必然性があること。引用先が創作性をもった著作物であることが必要。「次のような文章がある」として、あとは丸写しにしたようなものは、引用には当たらない。
2. 質的にも量的にも、引用先が「主」、引用部分が「従」という関係にあること。
3. 本文と引用部分が明らかに区別できること。
4. 引用元が公表された著作物であること。
5. 出所を明示すること。

（著作権法第四十八条）

引用とは（wiki）

http://ja.wikipedia.org/wiki/%E5%BC%95%E7%94%A8

著作権について

http://www.cric.or.jp/db/article/a1.html