TECH Matari

細かいレイアウトを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

時間の処理には、trick7さんのTeraClockを使わせてもらいました。

キモは、

(TextArea).verticalScrollPosition = (TextArea).maxVerticalScrollPosition

だけです。

デバッグ用に、TextAreaに変数とかを表示させたいときに、スクロールバーが付いてこないと非常に見づらいので、上の１行を追加すると便利です。

[as]
package
{
	import fl.controls.Button;
	import fl.controls.TextArea;
	import flash.display.MovieClip;
	import flash.events.*;

	import com.trick7.utils.TeraClock;
	/**
	 * ...
	 * @author IRONHEARTS
	 */
	public class Main extends MovieClip
	{
		private var _ta1:TextArea;
		private var _ta2:TextArea;
		private var _reset:Button;
		private var _tc:TeraClock;

		public function Main():void
		{
			addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private function init(e:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);

			_ta1 = TextArea(getChildByName("ta1"));
			_ta2 = TextArea(getChildByName("ta2"));
			_reset = Button(getChildByName("reset"));

			_reset.addEventListener(MouseEvent.CLICK, resetHandler);

			_tc = new TeraClock;

			_tc.addEventListener(TeraClock.SECONDS_CHANGED, secListener);

		}
		private function resetHandler(e:MouseEvent):void
		{
			_ta1.text = _ta2.text = "";
		}
		private function secListener(e:Event):void
		{
			var s:String = _tc.hours2 + ":" + _tc.minutes2 + ":" + _tc.seconds;

			_ta1.text += s + "\n";
			_ta2.text += s + "\n";

			_ta2.verticalScrollPosition = _ta2.maxVerticalScrollPosition;
		}
	}
}
[/as]

ソース必要な人はドウゾつtascroll.fla,Main.as

Popularity: 9% [?]

written by ANN

リスト並び替えのインターフェースを、ドラッグ＆ドロップでやりたいと思ったので、jQuery UI Sortableを使って練習してみる。

ただ、リストが大量にある場合や、初心者には、このオペレーションは難しいような気がする。だから、最終的には、それぞれのリストの↑↓のアイコンを付けて、直前・直後に移動できるようにしたい…が、まだそのやり方はよく分からない。

とりあえず普通にドラッグして入れ替えるサンプル。

簡単にできて面白いね。

Popularity: 7% [?]

written by ANN

日付・時刻の整合性をチェックしたい

とあるサイトにて、日付・時刻の値をチェックする処理が必要となる。日付・時刻の入力には、先のエントリーの実務で使える・使ったjQueryプラグイン5選にも書いた、DatePickerとClockPickを使っている。

これらのインターフェースを用いて値を入力する場合、必ず正しい日付が入るので、極端なところ、値の整合性をチェックする必要はない。しかし、このインターフェースと同時に、手動による入力を認めている場合、入力ミス等でおかしな値を入力される場合がある。たとえば…

• ２００９，７，３０ → 全角文字
• 2009–10-23 → ハイフンが多い
• 2009-2-29 → 閏年じゃないから29日は無い
• 10/2 → 西暦が足りない
• 2009-13-1 → 13月は無い

などなど。

そこでまず、既存のプラグイン等で、日付の整合性をチェックするものが無いか探したのだが・・日付単体でチェックするものを見つけることができなかった。そこで…

>>>>>続きを読む

Popularity: 28% [?]

written by ANN

phpにはstrip_tagsという、タグを取り除く関数があるが、特定のタグに挟まれた部分をごっそり削除したい場合、これは該当しない。PEARを探してみたけど、それっぽいのを発見できず。しょうがないので正規表現で書いてみる。（むしろ備忘録）

具体的にどういう時に使うかというと、PHPからの出力時に、

• <style>～</style>タグの中身を全部削除したい
• <script>～</script>タグの中身を全部削除したい
• コメント用の独自タグを、出力時にタグの中身もろとも削除したい。

などなど。テンプレートHTMLの編集時には必要だけど、最終的な出力時にはいらないタグとか。
また、RSSなど、出力先によっては、本文中に含まれるscriptタグが不要な場合などに。

>>>>>続きを読む

Popularity: 19% [?]

written by ANN

最近のとある案件で実際に使ってみたjQueryプラグインを５つ紹介します。
それぞれに主観で「実用性」「楽しさ」「難易度」を評点（５点満点）してみたので、参考までにドウゾ。

それぞれにサンプルを付けています。
サンプルのソースを見たい方は、該当部分のiframeからソースを見てください。

>>>>>続きを読む

Popularity: 37% [?]

written by ANN

phpで画像処理する定番といえば、組み込みのGD(PHP: GD – Manual)が定番なのだけれど、どうも処理元の画像が大きいと、非常に処理が重たい気がする。

とある画像データベースサイトでは、デジカメで撮影した画像を大量にアップロード・リサイズする必要があり、GDで処理していたのだが、最近のデジカメは１ファイルが12～15Mバイトもめずらしくなく、コレを何十枚と処理していくと、結局、apacheさんの負荷およびCPUの負荷がハンパなく、すぐにLoad avgが急上昇してしまう。

なんとか改善できないかと考えて、サーバがMac(OS X)だから、sipsコマンド【Scriptable Image Processing System（スクリプト可能イメージ処理システム）】が使えないかと考えた。変換処理をコマンドに任せることでapache(httpd)の負荷も減らせるかもしれないし。

- sips 公式テクニカルノート Technical Note TN2035: ColorSync on Mac OS X
- SIPS コマンド – 画像をコマンドラインで – その１ （リサイズ / 回転 / 反転 など） — — 脳みその中身-

試しにいくつかリサイズしてみたところ、体感的にはPHP/GDのリサイズより早い気がした。

気がしただけでは面白くないので、実際に簡単なサンプルを作ってベンチマークをとってみた。
つまり、SIPS vs GDである。

>>>>>続きを読む

Popularity: 13% [?]

written by ANN

PHPでプログラムの処理速度を調べたりするのに、xdebugを使ったりするのもよいけど、手軽で簡単なのものに、PEARのbenchmarkというのがあります。

benchmarkそのものが入ってない場合は、

$ pear install Benchmark

でOK.（必要に応じてsudoで）

使い方はググればすぐサンプルがでるが、だいたいこんな感じ。

require_once 'Benchmark/Timer.php';

$t = new Benchmark_Timer();
$t->start ();
$t->setMarker( 't1' );
for($i=0;$i<10000;$i++){
    // 処理
}
$t->setMarker('m2');
$t->stop();
$t->display ();

これを、ブラウザ上から実行すると、HTMLのtableにフォーマットされた結果が表示される。
↓こんな感じ

で、今日のTipsとして、普通にBenchmark_Timer::display()を使うと、画面上に結果が表示されてしまうので、結果を表示せずに取得する方法。

簡単。Benchmark_Timer::getOutput()もしくは、Benchmark_Timer::getProfiling()を、displayの替わりに使えばOK。

getOutput()は、上記tableと同様のHTMLコードを取得できる。
getProfiling()は、上記tableと同様のデータを連想配列として取得できる。
↓こんな感じ

Array
(
    [0] => Array
        (
            [name] => Start
            [time] => 1239674550.91492500
            [diff] => -
            [total] => -
        )
    [1] => Array
        (
            [name] => m1
            [time] => 1239674550.91499700
            [diff] => 0.000072
            [total] => 0.000072
        )
    [2] => Array
        (
            [name] => m2
            [time] => 1239674550.92797600
            [diff] => 0.012979
            [total] => 0.013051
        )
    [3] => Array
        (
            [name] => Stop
            [time] => 1239674550.92806900
            [diff] => 0.000093
            [total] => 0.013144
        )
)

なぜかPear/Benchmarkにはドキュメントが無くて、ソースを読むしかないので、Benchmark使えなねー！と思ってる人がいるかもしれないので書いてみました。

…と思ったら、結構getOutput,getProfilingの解説してるページがあった(///
重複してるだけでなく、こちらにはそれ以上の情報が無いのが辛いが、せっかくなので公開。

• コードの最適化に役立つPHPスクリプトのベンチマーク：CodeZine
• レッツPHP!

Popularity: 12% [?]

written by ANN

今回も結構レアなケースだろうから、あんまり役には立たないかもしれないけど、小規模・低予算のサイトの場合、案外ありそうな気もするのと、備忘録として。

前書き

ウェブサイトを構築する場合、最近はほとんどUTFを使う場合が多い。jQueryその他マッシュアップAPI、OSSなどを用いる場合、UTFのほうが便利。（むしろUTF前提で作られてるものが多い）

新規に構築する場合で、MySQL4.1～であれば、何も考えずにHTML,PHP側もUTFにしておけば混乱は少ない。

しかし、MySQL3.xの頃から稼働しているサイトの場合、DBやHTML,PHPがEUCであることも多く、コレをすべてUTFに移行するのは、恐ろしく手間が掛かる。（ハイリスク・ローリターン）

しかし、MySQL3.0,4.0系から、4.1～へアップグレードすると、ほぼ間違いなく文字化けするようになり、この文字化けが回避できず、せっかくMySQLが複数エンコーディングをサポートしているにも関わらず、サーバ側・クライアント側をEUCガチガチに固定して運用してしまうケースも多々あると思う。(恥ずかしながら僕がそうです）

だがそれでは前述のAjaxや最新のOSS(WordPressとか)などUTF8を前提としている機能が使えないというデメリットがある。

１つのホスト内でのVirtualHostで、あるサイトはEUCを、あるサイトはUTF8を使うようにMySQLで設定できないか、というのが今回のテーマである。

>>>>>続きを読む

Popularity: 15% [?]

written by ANN