では、CSSのbackground-imageの画像も、２倍のサイズの画像を1/2にすることができるのか。CSS3から増えたbackground-sizeというプロパティを使えば背景画像のリサイズが可能になりました。repeatする小さい画像でも２倍サイズで作り、iPhone4、iPhone4以下でも綺麗に表示することができます。

ところがこのbackground-sizeでサイズ指定した背景画像が、XPERIAで指定することができませんでした。Android OS 1.6というのも原因なのか。Galaxy Android OS 2.2では正しくサイズ指定して表示することが出来ました。

そして端末依存かOS依存の問題かと思いましたが、プロパティの書き方に-webkit-を追加すれば、XPELIAでもサイズ指定できる事がわかりました。多くの参考サイトがbackground-sizeのままでしたが、本当は、-webkit-background-sizeと書いたほうがよさそうですね。もちろんCSS3なのでモダンブラウザしか対応してませんのであしからず。

/* 間違ったプロパティ */
selector{
background-size: 100px 100px;
}

/* 正しいプロパティ */
selector{
-webkit-background-size: 100px 100px;
-moz-background-size: 100px 100px;
}

JSのイメージは、
１．scriptタグの記述をStringで書いて、
２．それをjQueryの＄を使ってタグを生成、
３．bodyタグへappendする流れです。

NGソース

$('body').append($('<script>alert("アラート");</script>'));

純粋に書くと上記のような記述になるとおもいます。ところがこれを実行すると、

')); } })();

↑このようなscriptの途中の括弧だけが出てきてしまいます。これの原因は、「/」スラッシュが特殊な状態で認識してしまうみたいです。jQueryで普通に閉じタグを作るときに「/」をつかっても何も起きませんが、どうやらscriptの閉じタグだけ、うまく認識してくれないっぽい？です。調べてないのでたしかなことはわかりませんけどね。。

回避するOKソース

$('body').append($('<script>alert("アラート");<\/script>'));
//スラッシュの手前に、バックスラッシュ（￥でもOK）を置く。

「/script」という文字列がダメなら、「/」スラッシュの手前に、バックシュラッシュ（￥マーク）を置くと、変な挙動は回避され、上記のソースではちゃんとalert();が実行されます。正規表現の時と同じ、特殊文字に特殊な意味を持たせない。ということですね。

僕はこうします。

$('body').append($('<scr'+'ipt>alert("アラート");<\/scr'+'ipt>'));
 //「scr」と「ipt」という文字で連結

こうする必要はないかもしれませんが、scriptタグの記述が変な挙動を呼び起こしてしまうなら、いっそのこと「scr」と「ipt」という文字で連結させてしまおう！っておもいました。そもそもこんなことを書くこと自体マレかもしれませんが参考までに。

var ua = navigator.userAgent;
if(ua.match(/iPhone|iPod/) ){ //←iPod⇒iPod touchのUA
	//iOSのSafariから見ている判定。
} else {
	//それ以外。
}

matchで( )括弧の中の文字列があるか調べます。含まれていると戻り値が１以上ならtrueで、含まれてなければfalseなのでelse以降に移ります。

Linuxのことはよくわかりませんが、コマンドもviも動くみたいです。JavaScriptってすごいですね！

＞＞Javascript PC Emulator

Google にホスティングされたFrameworkのパスを1クリックでコピーできるサイトです。このサイトの面白いところは、クリックされた数がカウントされていきます。クリップボードにコピーってどうやってやるんですかね。。。

ホスティングされているFramework一覧。
・jQuery
・jQuery UI
・chrome frame
・swfobject
　＞＞具体的な使い方はこちら。
・mootools
・Ext JS
・YUI（Yahoo UI）
・Prototype
・script.aculo.us
・DOJO

＞＞http://scriptsrc.net

fl.controls.ComboBox;はTextFormatを継承しているので、テキストのスタイルの設定は基本的な書き方でOKです。あとは、ComboBoxにTextFormatを適応させる方法が２つあります。cb.textField.setStyle(“textFormat”, tf);でメニューのところのテキストフォーマットで、cb.dropdown.setRendererStyle(“textFormat”, tf);でドロップメニュー内のテキストフォーマットの設定になるみたいです。

package {
	import fl.controls.ComboBox;
	public class Main extends MovieClip {
		private var cb:ComboBox;
		private var tf:TextFormat;
		public function Main() {
			init();
		}
		private function init():void {
			cb = new ComboBox();
			tf = new TextFormat();
			tf.size=12;
			cb.textField.setStyle("textFormat", tf);
			cb.dropdown.setRendererStyle("textFormat", tf);
			cb.addItem( { label: "ラベル１", data:1 } );
			cb.addItem( { label: "ラベル２", data:2 } );
			cb.addItem( { label: "ラベル３", data:3 } );
			addChild(cb);
		}
	}
}

CSS3のtext-shadowとfilter:dropshadowで、わりと強引かもしれませんがテキストの縁を表現できるジェネレータを紹介します。

細かく設定はできませんが、縁の太さを入力してから「適用」ボタンを押すと、CSSのプロパティが生成されます。赤色から変更する場合は、「red」と書かれている場所を「#000000」などに変更すれば色を変えることができます。

IE6でもなんとか表現できてはいますが、影の位置が若干ずれていたりしてしまってますね。

SafariやGoogleChromeはWebKitが使われてますので、テキストの縁用にCSSが用意されています。

/*ふちの太さ*/
-webkit-text-stroke-width:3px;
-webkit-text-stroke-color:#FF0000;
-webkit-text-fill-color:#FFFFFF;

Firefoxではうまく動きませんでしたが、実際に表示してみたところ問題なく表示されました。

画像をなるべく使わない。ページ速度もSEOの評価対象といわれていますので、表現の幅をきかせるのであれば、こういったテキストを使うといいとおもいます。
※検証に使ったブラウザは全て最新のバージョンです。

CSS3は古いブラウザで表示が崩れたりするので、すべてCSS3でコーディングされたWebサイトはなかなかありませんが、iPhoneのSafariやAndroidのChromeではWebKitが採用されているので、スマートフォン用のWebサイトにはCSS3の表現が使われています。今まで画像を使って表現するしかなかったグラデーションやテキストのドロップシャドウなど、画像を使わないことによってページ全体の容量を軽減することができますので、スマートフォン用のWebサイトではどんどんCSS3を活用していったほうがいいですね。

グラデーションやドロップシャドウをCSS3で書くのはちょっとだけ文字数が多く、ちょっと微調整にめんどくさいところがあります。今回は微調整しながら表示確認ができ、CSS3のソースを生成してくれるジェネレータの紹介です。
＞＞CSS3プロパティジェネレーター | CSS-EBLOG
＞＞http://css-eblog.com/eblog_sample/0912/css3-generator/

設定が終わったらページ右上の「ソースを生成」ボタンを押すとライトボックス風にソースが出てきます。-webkit　-moz　-ms と書かれているところはそれぞれのブラウザのレンダリングエンジンに対しての命令なので、スマートフォン用など限定して使う場合はとっちゃっていいとおもいます。

「-webkit」はSafari、GoogleChomeに使われているWebKitを指してます。「-moz」はMozilla系のGeckoエンジン、Firefoxなどを指してます。「-ms」はCSS3が使えるIE9のTridentエンジンを指してます。

Googleが提供しているAPIを、元素の周期表スタイルで表現しているページです。オシャレー！

Google APIs & Developer Products – January 2011

http://code.google.com/intl/ja/more/table/

body {
	-webkit-text-size-adjust: none;
}

縦向き横向きにしたらクルクルかわるiPhoneのSafariブラウザ。上記のWebkitスタイルをbodyに適応すれば、iPhoneの向きが変わったときにフォントサイズの大きさが変わるのを防ぐことができます。