tande lab.

Archive
2013年4月 Monthly archive

と思って調べてみた。
Twitter のソースコード眺めてたら見つけたので気になりました。

文書全体の書字方向を指定できるプロパティらしい。
世界的に利用されるサービスだと、ローカライズ対応で記述が必要になるんでしょうね。

html タグに指定してコンテンツ全体に指定することもできるし、div タグなど一部のコンテンツに対して指定することもできます。

左から右へ "ltr"

左から右へ記述する場合 ltr を指定する。
ex. 日本語や英語など

<html dir="ltr">

右から左へ "rtl"

右から左へ記述する場合 rtl を指定する。
ex. アラビア語やヘブライ語など

</html><html dir="rtl">

へー、知らなかった。
勉強になった。

Read More

ボタンにデフォルトでフォーカスが当たってしまうので、フォーカスを消したいと思って

$("#btn").blur();

ってやるけど、フォーカスが消えない。

なんでだ〜と思って色々調べたら、Chrome では input 要素にデフォルトで outline 装飾が設定されてしまうので、フォーカスが当たっているように見えてしまうようです。

なので、

$("#btn").css("outline","none");

とすると期待通りの動きになりました。

フォーカスが当たっていることと、アウトライン装飾がつくということは、別なんですね。
Chrome 以外にも Safari でも同様の挙動になるみたいです。

Read More

背景色に応じて、見やすいように文字色を白または黒に振り分けるサンプルコード。
Chrome Extension “Color Thief – 色泥棒” で利用したコードのメモです。

やってることは単純で、RGB それぞれの値を以下の計算式に当てはめます。

Y = 0.3*R + 0.6*G + 0.1*B

で Y > 127 なら黒、それ以外なら白、と振り分けています。

<script>
	var checkTxtColor = function(cR,cG,cB){

		// 最高値は 255 なので、約半分の数値 127 を堺目にして白/黒の判別する
		var cY = 0.3*cR + 0.6*cG + 0.1*cB;
		
		if(cY > 127){
			return "#000000"; // 黒に設定
		}
		return "#FFFFFF"; // 白に設定
	}

	// 関数 checkTxtColor を実行
	console.log(checkTxtColor(200,200,100));

	// 実行結果
	// #000000
</script>
Read More

jQuery で指定できるメソッドには、コールバック関数を引数にとるものがあります。

良く使いそうな例だと

fadeTo(speed, opacity, [callback]) – jQuery 日本語リファレンス

とか

animate(params, [duration], [easing], [callback]) – jQuery 日本語リファレンス

あたり、です。

このコールバック関数、ひとつじゃ足りないよ!って思うことがしばしば。
そんなときは、以下のように

Read More

jQuery 少し使わないだけで、色々と忘れてしまうのでメモ。
せっかく使えるようになっても自分の言葉で記録に残さないとほんとすぐ忘れる。

以下、jQuery の基礎やらセレクタの指定方法の整理。

Read More

Chrome Extension の開発に便利なローカルストレージ機能。
JavaScript のデータをブラウザに保存でき、ブラウザを閉じても保持される、というもの。

なのでユーザが任意に設定した値を保存しておく、といったような用途に利用できます。

HTML5 の機能 Web Storage の一種で、クッキーの代替になるもののようです。

Web Storage とか 対応ブラウザなどの話は、
連載:人気順に説明する初めてのHTML5開発:ブラウザでストレージ? Web Storageを使いこなそう (1/3) – @IT
のサイトが詳しいです。

以下、使い方です。

Read More

サイトで使われている色をワンクリックで一覧&コピーできる
Chrome 拡張機能 “Color Thief – 色泥棒” を少しだけ更新しました。

0.4.1 新機能

前回選択した色の表示形式 (RGB値 or HEX値) を保存するようにしました。
保存された表示形式は、青いボタンで表示されます。

https://lh6.googleusercontent.com/-6zKGgzqu2sA/UXQVbHwlb_I/AAAAAAABSaY/jI0p5KUCzYQ/s800/130422-0002.png

Read More

Android SDK Manager で Package を インストールする際、インストールできる Package の一覧が表示されず、インストールできないことがあります。

前記事 – [Android] Android SDK をインストールしてみた

  • 3. Android SDK Manager を起動する
  • 4. インストールするパッケージを選択

あたりでつまづいた場合、まずは Proxy を疑います。
Proxy 設定を Android SDK Manager の環境設定で登録してやるとうまくいくかもしれません。

Read More

Android アプリのデザインをしているといつも混乱する px と dp の関係。

Android には数種類の解像度があってそれぞれ比率が決まっています。
代表的な解像度4種類の比率を比較してみると

mdpi : hdpi : xhdpi : xxhdpi = 1 : 1.5 : 2 : 3

Photoshop でデザインする時はこの比率を常に意識します。
どの解像度でも px 換算で、小数点がでないように気をつけるんですが、ほんっと面倒くさい!!

それを解決してくれる iPhone アプリがあったー!

Read More

例えば、こんな感じの四角の集合体、

座標値を微妙にランダムにずらすだけで、
なんとなく可愛らしいというか有機的なアニメーションに仕上がる。

以下、サンプルコードです。

Read More