TECH Matari

現在、MODxを導入し、いろいろカスタマイズ中。なかなか自由度の高いCMSである。

WordPressやMovableTypeと比べて何が違うかというと、なかなか比較は難しいけど、使ってみると実に面白いCMSです。

なにより、最近のWordPressはなんか動作が重くて、高速化プラグインを入れたり、チューニングしないとなかなかストレス無く使うのが難しいと感じていたのと、あとは配布されているテンプレートやプラグインは便利なんだけれど、クオリティがばらばらだし、特定バージョンに依存するものもおおいので、なんというか、年々使いづらくなってる感もある。

うーん。どういうサイトを構築するかによもるけど、コーポレートサイトは、WordPressやMovableTypeより、MODxのほうがいいような気がする。自分は今度はそうするつもり。

ただいかんせん、MODxはドキュメントが散乱しており、まとまって情報（ノウハウ）を見られるサイトが少ない。とくにAPI周りは本当に少ない。 で、MODxにはスニペットという機能があり、PHPで書いた処理をテンプレート側から簡単に呼び出せるのだが、呼び出し側で複数の処理を入れ子にして呼び出すこともでき、地味に便利。しかし、書式通り書いてもなかなか動かない…。

与えるパラメータの値として、動的に変化するスニペットコールの出力を入れ子で指定したい場合は、一番外側のスニペットコール書式をキャッシュ無効の形式としてください。このようにしないと正しくパースされません。 ※MODX Revolutionではこの問題は解決されています。http://modx.jp/docs/tags/snippet.html

これに気づくまで結構時間掛かった…というか、

それにしても、やっぱりリッチテキストエディタとIEの相性悪いな～。勘弁してほしい。

こうなったらMODxのまとめサイトでも作るかな。需要ないかー。うーん。

参考サイト：

• http://mock-turtle.appspot.com/MODx/
• http://d.hatena.ne.jp/hikidas_ikeda/
• http://wiki.modxcms.com/index.php/Main_Page
• http://modx.jp/docs.html
• http://modx.liolion.net/
• http://cmsbox.jp/blog/archives/1985

基本情報は上記サイトで分かるけど、ちょっとしたノウハウというか、ひっかりポイントだけでもまとめるかなー

Popularity: 1% [?]

written by ANN

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

Windows でID/PASSを管理するのにとても重宝しているID・パスワード管理ツール ID Managerというソフトがあります。

WindowsとMacの両方にリリースされているID/PASS管理ソフトもあるのだけれど、ID Managerはもう何年も使っていて、登録されているID/PASSも100を超えており、他のアプリに移行するのは骨が折れます。

なんとかMacで、見るだけ（参照するだけ）でもいいから、使えないかなーと思っていて、デスクトップのMacには、VMware Fusionをいれていて、IEの表示確認なんかに使ってるので、そこでID Managerも使えるのだけれど、最近買ったMac Book Airでも見たい。しかし、さらにVMwareやWindows OSを買うのもなーと思ってたら、たまたま発見したのが、MikuInstaller. Wineを拡張したアプリ。

結果、ID ManagerをMac上で動かせたので、その方法など紹介してみます。

1. まず、MikuInstallerをダウンロード。dmg ファイルをひらいてディスクをマウントし、アプリをインストール。
2. 次に、ID Manager をダウンロード。インストーラなしZIP 形式でOKです。展開後はこんな感じ。
3. Windowsで使っているID managerのデータファイルをMac上に持ってきておきます。hogehoge.idmファイルです。Dropboxとかで持ってくると便利です。※Dropbox上のidmを直接使ってもいいけど、念のためMac上に複製して、それを使ったほうが安全だと思います。
4. MikuInstallerを起動。ちなみに、MikuInstallerを使うには、Intel CPUと、Apple X11 (10.4) または XQuartz (10.5)が必要です。
5. MikuInstaller自体はすぐ起動するので、プロセスメニューから実行で、IDM.exeを開きます。なんかいろいろ処理が始まります。初回は数分かかるので、焦らず待ちましょう。
6. 数分まつと…はい、無事起動しました！
7. あとは、Windowsと同じです。まず、設定から、Windowsから持ってきた*.idmファイルの入ったディレクトリを指定します。自分の場合は、Mac上では、ユーザのホームディレクトリにいれてます。Macのユーザーホームディレクトリが、MikuInstaller(Wine)上で,My Documentとして割り当てられます。
8. ちゃんとデータ見ることができました！これは便利。

注意点としては、

• タスクバーに常駐するようにしないほうがよい
• ID,PASSのボタンによるコピペ機能は動作しない
• ブラウザも起動しない

です。アプリ内ボタンによるコピペ等の機能を使うと、アプリがフリーズしました。ただし、選択して、Cmd +C,CMD+Vなど、キーボードによるコピー＆ペーストは可能です。VM ware Fusionのユニティ機能とかつかえば、このあたりは使えるかもしれないけど、今回はVMware Fusion+Windows がない場合ということで、これだけでも相当便利だと思います。

MikuInstallerの作者およびにID Managerの作者さん、ありがとう！

ID Managerと互換のiPhoneアプリ作りたいけど、データファイルをどうやってやりとりしたらいいのか、いいアイデアが浮かばないのよねー。XML形式でコピペしてもらうとかしかないのかなー。うーん。

Popularity: 3% [?]

written by ANN \\ tags: ID Manager, MikuInstaller, Wine

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