tande lab.

Archive
Chrome

出産予定日から逆算して、現在の妊娠週数をバッヂ上に常時表示する
Chrome 拡張機能 “Pregnancy Counter – 妊娠カウンター” をリリースしました。

作った人: @koeri

ダウンロードは Chromeウェブストア からドウゾ!

Pregnancy Counter - 妊娠カウンター

Read More

そろそろ IE ほんとに死滅してほしい…。
官公庁とか金融系のサイトに多いのですが、このご時世にもまだ IE でしか動きません!! というサイトに出会うと、とてもテンションが下がりますね。

そういうとき、ブラウザの基本機能で IE のフリしてアクセスできます。
どこぞの銀行のログインサイトとか、IE8しか対応してなくて困る!というときに便利。

Chrome と Safari での方法を紹介します。

Read More

http://bit.ly/MOski8

Ver. 0.4.1 更新内容

以下、3点の修正&機能追加を行いました。

1. 不具合の修正

2013年4月末に行われた、丸善・ジュンク堂のサイトリニューアルが原因で正常に動作しなくなっていた問題を修正しました。前記事 で対応予定時期についてお知らせしていた件です。

2. 本の取り置き依頼機能の追加

店舗名をクリックすると本の取り置きを依頼できる機能を追加しました。
あらかじめ、丸善・ジュンク堂のサイトで会員登録しログインしている必要があります。
https://lh4.googleusercontent.com/-wq0NU9UkxYg/UYPSpsq-2mI/AAAAAAABSpA/CnIyNXm10zc/s400/130504-0001.png

3. 細かい在庫状況(○△)と本棚の位置表示ツールチップの追加

細かい在庫状況(○△)と本棚の位置を表示するツールチップを追加しました。
https://lh4.googleusercontent.com/-QIt5E4Y1ADM/UYPQiPMAQZI/AAAAAAABSow/RX7LJYcQW_8/s400/130503-0014.png

Read More

Chrome 拡張機能 amaruzen を利用頂いている皆様へ。

4月末に行われたジュンク堂・丸善のサイトリニューアルに伴い、5月1日現在、amaruzen での在庫検索ができなくなっています。
現在修正の準備を進めており、5月6日までを目処に対応完了する予定です。

対応完了までしばらくお待ちください。
よろしくお願いいたします。

amaruzen のダウンロードは こちら から

2013.5.4 追記

修正&機能追加しました!

Ver. 0.4.1 – 2013.5.4
amaruzen 修正&機能追加 (Ver. 0.4.1)
丸善・ジュンク堂のサイトリニューアルが原因で正常に動作しなくなっていた問題を修正しました。
店舗名をクリックすると本の取り置きを依頼できる機能を追加しました。
細かい在庫状況(○△)と本棚の位置を表示するツールチップを追加しました。

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

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

インターネットやらブラウザやらの歴史を走馬灯のように振り返るセッションで面白かったので、個別メモです。
@koeri と @soranchu のメモを合体させてます。

全体概要とか、他セッションについては前記事を参照。
HTML5 Conference 2012 #html5j が熱かった!!

セッションの講演資料&動画も正式に公開されています。

Read More

テキストをクリップボードにコピーするときのメモ。

Chrome Extension “Color Thief – 色泥棒” を作ってる時に悩んだのですが、
任意のテキストをクリップボードへコピーするなら、

document.execCommand("copy");

これ書けばできるだろーと思ってたら、なんでだかできない。

色々調べたら、任意のテキストなんでもできるわけではなくて、
テキストフォーム上にあるテキストにしか機能しないようです。

Read More