TECH Matari

Titanium Mobile非公式BBSに気になるPOSTがあったので調べて返信してみた

tableViewの一部のセルをクリック不可にする « Titanium BBS(JP unofficial)

たしかに、TableViewのセルは、イベントハンドラがなくても、クリックすると青反転します。まぁ、別にいいんじゃね？と思っていたのですが、どうもこの動作のままだとマズいらしい。具体的には、Reject Database for iPhone:detailにあるように、セルが動作するかのように見えるが、何もないのは、リジェクト対象とのこと。なるほど〜

ということで、選択できないセルにするには、

1
2
3
4
5

var row = Ti.UI.createTableViewRow({
    title: 'Disabled Row',
    touchEnabled : false,
    selectionStyle : Titanium.UI.iPhone.TableViewCellSelectionStyle.NONE
});

で、OKです。

実際には、上記コードは、クリック不可というより、クリックしてもイベントを受け取らない、かつ、青反転しない、というコードとなります。なので、青反転しなくても、クリックイベントを受け取ることは可能です（確かめてないけど）

TItanium Moible関係のエントリー

• Titanium Mobile開発のTipsまとめ – NAVER まとめ
• Titanium MobileのWebViewで電話番号・郵便番号の自動リンクを抑制する方法
• webkitのCSSグラデーションをTitanium Mobileの書式に変換するツール作った
• [Titanium Mobile] WebViewのリソースHTMLが難儀な感じ
• Dreamweaver(DW)でTitanium Mobileのコード補完

Popularity: 4% [?]

written by ANN

自分のメモ目的も踏まえ、NAVERまとめを使って、Titanium Mobile開発のTipsまとめを作りました。

Titanium Mobile開発のTipsまとめ

NAVERまとめって、けっこう面白いね。良くできてる。

あと、増井さんが作ってる非公式Titanium掲示板に投稿された質問で、僕が分かるものについては返信してます。プロフィール欄から、投稿確認できます。

Popularity: 3% [?]

written by ANN \\ tags: NAVER, Titanium

またニッチな記事ですみませんねぇ。Titanium Studioがあるというのに、Dreamweaver使ってTitanium Mobileの開発してます。

Titanium Mobileには、HTMLにおけるCSSファイルに似た感じで、JSS(Javascript Style Sheet)ファイルを作って、UIのデザイン部分を外部ファイル化することができます。

拡張子が.jssというのと、まぁ、プロパティも若干違いますが、共通する部分も多いため、dreamweaverで、.jssファイルを開いたときにcssファイルと同じようにコード補完というか、プロパティ候補が出たりすると大変便利です。今回はその方法です。

基本的にはAdobe Dreamweaver CS5 * ドキュメント拡張子とファイルタイプの追加および変更に書いてる通りですけどね。

.jssが、CSSドキュメントとして処理されるよう設定する。

Mac/Dreamweaver CS5の場合、

1

/Applications/Adobe\ Dreamweaver\ CS5/Configuration/DocumentTypes/MMDocumentTypes.xml

を開きます。

DWとうか、Adobeのプロダクトは、コンフィギュレーションファイルが複数あり、設置場所により優先度があり、その内容が反映されたり、しなかったりするので、人によっては上記場所のファイルではなく、ja_JP配下だったり、ユーザーディレクトリのLibrary配下だったりするかもしれないので、適宜置き換えてください。

MMDocumentTypes.xml中のcssのエントリ部分を下記のように修正します。

1
2
3
4
5
6
7
8

	<documenttype id="CSS" internaltype="Text" winfileextension="css,jss" macfileextension="css,jss" file="Default.css" writebyteordermark="false" mimetype="text/css" >
		<TITLE>
			<MMString:loadString id="mmdocumenttypes_30" />
		</TITLE>
		<description>
			<MMString:loadString id="mmdocumenttypes_31" />
		</description>
	</documenttype>

winfileextensionと、macfileextensionに、”,jss”を追加しています。

ファイル＞開くのダイアログでjssファイルを選択可能にする

これも、設定ファイルの場所は、適宜変更して処理してください。こちらの環境では、

1

/Users/(ユーザアカウント名　)/Library/Application\ Support/Adobe/Dreamweaver\ CS5/ja_JP/Configuration/Extensions.txt

でした。このファイル中のCSSの行のあたりを、

1
2

CSS:Style Sheets
JSS:Titanium Javascript Style Sheets

みたいな感じで修正します。修正後は、DWを再起動してください。すると、以降ファイルオープンダイアログに
という感じでJSSを選択できるようにします。というか、Finder上で、.jssファイルのデフォルトアプリケーションをDreamweaverにしておけばOKですけど。

結果は…

という感じで、無事.jssファイルをcssファイルのようにコード補完・プロパティ候補が出るようになりました。といっても、jssとcssで共通のプロパティってあんま無いな…と、思ったけど、まぁいいや。カラーリングされるだけでも。

ニッチすぎて誰の役に立つのかわからないけど、誰かの参考になったらいいな。

TItanium Moible関係のエントリー

• Titanium MobileのWebViewで電話番号・郵便番号の自動リンクを抑制する方法
• webkitのCSSグラデーションをTitanium Mobileの書式に変換するツール作った
• [Titanium Mobile] WebViewのリソースHTMLが難儀な感じ
• Dreamweaver(DW)でTitanium Mobileのコード補完

Popularity: 3% [?]

written by ANN \\ tags: Dreamweaver, Titanium

細かいレイアウトをViewやLabelで再現するのはむちゃくちゃ骨が折れるので、そういう場合はWebViewでHTMLを表示させると見た目の調整が楽。WebViewの中身は、まちがいなくMobile Safariと同じだろうから、Mobile Safariで出来ることなら、できるんじゃないかな…と思っていました。

Mobile Safariの機能のひとつして、数字＋ハイフンの文字列を自動的に電話番号と認識して、タップすると電話がかかるようになる。当然、Titanium MobileのWebViewで読み込まれるHTMLでも同じ動作となる。

Mobile Safariの場合は、metaに、

1
2

<meta name = "format-detection" content = "telephone=no">
</meta>

と記述すれば、自動リンクを抑制できる。ところがどっこい！ Titanium MobileのWebViewは、このmeta記述を無視するため、電話番号はおろか、Safariの中の人が、815-0033など、郵便番号も勝手に電話番号として認識してリンク処理してしまう為、アバウトページとかで、「郵便番号＋会社名＋電話番号」といった情報を載せる際、郵便番号も勝手に電話番号としてリンクされ、クライアントからつっこみうけること受け合いです！………ﾊｧﾊｧ､ﾊｧﾊｧ

…最初、対処法が分からなくて、郵便番号部分のみ、動的に生成したり、spanタグで無意味に分割したりしてみたが…ダメでした。

ということで、これに対処する方法です。

>>>>>続きを読む

Popularity: 6% [?]

written by ANN \\ tags: Safari, Titanium, WebView

Titanium MobileのWindowやViewの背景に利用できるbackgroundGradientというプロパティがあるのだが、この記述方式が、これまでのCSSの記述方法とも微妙に違っていて、記述が面倒。CSSのグラデーションをジェネレートするサイトとかは結構あるので、それを利用できないかと考えて、webkit のcolor-stopで記述されたグラデーションをコピーすると、TItanium Mobileのグラデーションに変換するページ作りました。

webkit2titanium gradient

例えば、Ultimate CSS Gradient Generator – ColorZilla.comを利用すると、mozilla 系,webkit系,ie系とグラデーションを生成できます。この文字列をコピーして、webkit2titanium gradientの左枠にペースとして”convert”ボタンを押す。すると、右枠に、Titanium Mobile形式のbackgroundGradientの書式が生成されます。

ちなみに、上記iPhoneのキャプチャは、上記ツールで変換したグラデーションを用いてつくってみました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

var win = Ti.UI.createWindow();
 
win.backgroundColor = "white";
win.layout = "vertical";
 
win.add(
	Ti.UI.createView({
		top : 10,
		width : 200,
		height : 50,
		borderRadius : 5,
		backgroundGradient:{
    type:'linear',
    	colors:[
        {position:0.00,color:'#feccb1'},
        {position:0.50,color:'#f17432'},
        {position:0.51,color:'#ea5507'},
        {position:1.00,color:'#fb955e'}
       ]
    }
  })
);
 
win.add(
	Ti.UI.createView({
		top : 10,
		width : 200,
		height : 50,
		borderRadius : 5,
		backgroundGradient:{
    type:'linear',
    colors:[
        {position:0.00,color:'#d0e4f7'},
        {position:0.24,color:'#73b1e7'},
        {position:0.50,color:'#0a77d5'},
        {position:0.79,color:'#539fe1'},
        {position:1.00,color:'#87bcea'}
      ]
     }
  })
);
 
win.add(
	Ti.UI.createView({
		top : 10,
		width : 200,
		height : 50,
		borderRadius : 5,
		backgroundGradient:{
    type:'linear',
    colors:[
        {position:0.00,color:'#f6f8f9'},
        {position:0.50,color:'#e5ebee'},
        {position:0.51,color:'#d7dee3'},
        {position:1.00,color:'#f5f7f9'}
	]
    }
  })
);
win.open();

…あれ？なんかソースのインデントが変だけど、まぁ適宜解釈してください。

不具合や要望があれば、本記事にコメントいただくか、Twitter:annnews23 までご連絡を。

時間＆要望があれば、

• mozilla系、ie系のCSS表記にも対応
• 予めよく使うグラデーションを掲載し、１クリックでTitanium Mobile形式を表示
• liner以外のタイプにも対応
• borderWidthやborderRadiusにも対応

とか、対応するかもしれません。個人的にはグラデの記述が一番面倒なので、それ以外は手動でいいと思いますけど。

その他、ここ１ヶ月くらい地味にTitaniumで開発やっていて、細々ノウハウも溜まったので、本ブログで公開していきます。

TItanium Moible関係のエントリー

• Titanium MobileのWebViewで電話番号・郵便番号の自動リンクを抑制する方法
• webkitのCSSグラデーションをTitanium Mobileの書式に変換するツール作った
• [Titanium Mobile] WebViewのリソースHTMLが難儀な感じ
• Dreamweaver(DW)でTitanium Mobileのコード補完

Popularity: 5% [?]

written by ANN \\ tags: CSS, Titanium

Titanium Mobileには、webサイトをそのまま表示できるWebView というUIがある。jQTouchやjQuery Mobileで作ったWEBサイトをそのままTitanium Mobileでアプリ化できれば、さらに開発効率が上がるし、自由度も上がる…と思ったが、そうはイカのほにゃらら。

WebViewでローカルのHTML（リソースHTML?）を読み込んだ場合、Titanium の WebView で HTML をホスト | アカベコマイリにも書いてあるように、ドキュメント内でhistoryが処理されないらしく、jQTouchや、jQuery MobileのWebView.goBack()やgoForward()等も効かない。

じゃぁということで、ページ毎にfireEventして、履歴をTitanium側で管理したら…と、テストコードを書いてみる。

単純に、index.htmlをWebViewで表示して、index.html => index2.html => index3.htmlとリンク（ローカル）してるだけ。

app.js

1
2
3
4
5
6
7
8
9

var webview = Ti.UI.createWebView({url:'index.html'});
var window = Ti.UI.createWindow();
 
Ti.App.addEventListener("webViewEvent",function webViewStack(e){
	Ti.API.info("fire catch!");
});
 
window.add(webview);
window.open();

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
alert("index.html");
Ti.API.info("index => webViewEvent"); // OK
Ti.App.fireEvent("webViewEvent",{
	"url" : "index.html"	// OK
});
</script>
<title>index</title>
</head>
<body>
 
goto <a href="index2.html" >index2.html</a>
 
</body>
</html>

index2.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
alert("index2.html");
Ti.API.info("index2 => webViewEvent");// not work
Ti.App.fireEvent("webViewEvent",{	// not work
	"url" : "index2.html"
});
</script>
<title>index2</title>
</head>
<body>
 
goto <a href="index3.html">index3.html</a>
 
</body>
</html>

index3.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
alert("index3.html");	// OK
Ti.API.info("index3 => webViewEvent"); // not work
Ti.App.fireEvent("webViewEvent",{ // not work
	"url" : "index3.html"
});
</script>
<title>index3</title>
</head>
<body>
 
goto <a href="index.html">index.html</a>
 
</body>
</html>

…結果は、index.html中のfireEventのみ実行され、index.htmlからindex2.htmlに遷移しても、index2.html中のfireEventやAPI.info()も実行されない。alert()はすべて実行されてます。

ローカル(リソース)HTMLを用いたWebViewには、どうもかなり問題がある模様。具体的には、

1. ページ遷移しても、historyが記録されない　→ jQTouchや、jQuery Mobile等、historyを用いて戻るボタン等を処理するライブラリが動作しない。
2. 当然、WebView.goBack()や、goFoward()も動作しない。canGoBack()とかあるけど・・意味ナイっしょ。
3. ２ページ目以降のTi.APIやTi.App等が、うまく動いてない（仕様？バグ？）

これはかなり絶望的。ﾉｿﾞﾐｶﾞﾀﾀﾚﾀｰ状態。

ここがクリアされると、今の１０倍は開発効率が上がると思うし、javascriptのライブラリを多様できて、すばらしいんだけどなー。PhoneGap試してみるかなー

WebViewは、ほんとに、単純にリモートサイトを表示するためにしか使えないのかなー。ローカル（リソース）HTMLを表示できると、デザインが格段に楽なんだけどなー。くやしーなー

参考サイト:Titanium の WebView で HTML をホスト | アカベコマイリ

Popularity: 7% [?]

written by ANN

個人的に、Titanium Mobileでのコード開発にDreamweaverを使ってます。買収したaptanaを使うのが定石なんでしょうけど、aptanaの動作が重いのと、コード補完機能の動作がどうもしっくりこなかったり、その他ウェブ製作にはDWが必須だったり、独自スニペットを使ったりするので、Dreamweaverで開発してます。

そうなると、Dreamweaver(以下、DW)でもTitanium Mobileのコードを補完したいのが、人情ってもんです。

Dreamweaver CS5には、コード固有のコードヒントっていうのがあり、WordPressやその他CMSのコードヒントが出せるので、これが使えないかなーとおもったら、これはPHP限定の機能だった…（ホゲー

しょうがないから、自分でコードヒント用のXMLをちまちま作るかーと思ったけど、ぐぐったら出てきた。

http://code.google.com/p/dreamweaver-titanium/updates/list

DreamweaverのExtension形式なので、ExtensionManager経由でインストールしてやれば、あっさりとコード補完ができるようになります。ありがたや。

個人的には、Titanium.xxxではなく、Ti.xxxで書いてるので、Ti.でも補完できるようにしました。その方法は、

1. (ユーザ名)/Library/Application\ Support/Adobe/Dreamweaver\ CS5/ja_JP/Configuration/CodeHints/TitaniumCodeHints.xmlを、同ディレクトリにコピーして、TiCodeHints.xmlを作成する。
2. TiCodeHints.xmlをひらいて、中の”Titanium”という文字を”Ti”に一括置換。
3. DWを再起動すればOK

↓Dreamweaverでコード補完されました。

DreamweaverでTitanium Mobileのコード補完

Popularity: 4% [?]

written by ANN

iPhone/iPadでしか確認してないが、意外というか盲点というか、当たり前といわれれば、あたりまえ…か？

よくWebサイトで、お知らせの領域にdivタグを使い、高さを指定して、はみ出た分は自動的にスクロールバーが出て…という手法はよく使うのだけれど、これが、iPhone/iPadではダメ。

まず、スクロールーバーがでない。iframeの場合は、スクロールーバーがでず、領域が拡張されるのでまだいいけど、divの場合、本来スクロールバーがでるところにはなにもなく、したがってコンテンツがばっさり切れる形になる。

その場合、二本指を使うとそのエリアをスクロールできるのだが、はたして、いったい何人が知ってるだろうか。

ん～、ならば、、と、JavaScriptを使ったカスタムスクロールバーはどうだろうかと試してみるが、

Custom Scroll bar

jScroll Pane

んー。やっぱりダメ。反応せず。二本指でもダメ。画面をタッチしてスクロールする都合上、スクロールーバーが併用できないのは良いとしても、両端のアロー（矢印）は表示して、タップできるようにしないのはなぜ？

iPhone/iPadとしての仕様なのか、単なるMobile Safariの仕様なのかよくわからけど、ちゃんとやってよね。Appleさんよぉ。

参考URL:メモ: iPad（iPhone）の困った仕様

Popularity: 9% [?]

written by ANN

iOS 4.2になり、AirPrint機能が使えるようになったらしいのだが、要するにプリンタ側も無線に対応したものじゃないと印刷できないらしい。

アップル正式サポートのプリンタは、

とのこと。いったい世の中にこのプリンタを持ってる人がどれくらいの割合でいるんだろうか。Appleの、既存ユーザーを蔑ろにする姿勢はいま始まったことじゃないけど、もうちょっとなんとかならんのかねぇ。

ということで、AirPrint非対応のプリンタでも印刷できないか調べたら、あった。

CANONやEPSONのプリンタで AirPrint を使って iPhone/iPad から印刷する方法 | paraches lifestyle lab.

AirPrint Hacktivator ＋Macの標準のプリンタ共有を使えばOKらしい。早速、自分の仕事場でもやってみると…できた。

Brother MFC-7820N-1というのは、普通にLANにつないでる複合機のプリンタです。共有設定して、AirPrint Hacktivatorを”ON”にすると、

Safariから、プリンタを選択して、印刷できた。

基本的に、DropboxやEvernoteでPC/Macとも共有してるものがほとんどなので、あえてiPhone/iPadから直接印刷するニーズは少ないと思うけど（印刷の細かい設定とかもできないし）、どうしてもという時は、上記方法をとれば印刷できる。

というか、Appleが最初から（ｒｙ

Popularity: 35% [?]

written by ANN

Sencha Touch 1.0が正式リリース（しかも無料）され、スマートフォン向け開発がしやすくなりそうです。

Sencha Touch demo (PC/MacでもSafariならばまぁ、動く。Firefoxでは動かない)

JavaScriptベースで開発する環境としては、ネイティブアプリを作れるTitaniumがあるのだけれど、WEB用とネイティブアプリとソースを共通化できたらいいんだけどね。Sencha Touchからネイティブアプリへの変換、またはTitaniumから、そのままWEBへ転用。現時点(2010/11/16)では、多分できないんだよねー。

そもそもじゃぁ、WEBサイトとネイティブアプリでどう違うのか。

他思いついたら追記する。

2010/12/23 iPhone/Safariのセンサー（位置情報・モーション）について、追記しました。

Popularity: 5% [?]

written by ANN