tande lab.

Archive
JavaScript

背景色がダイナミックに変更になる箇所で、
その背景色によって表示するテキストの色を変更する Tips です。

以下のサイトの、gday さんの回答が参考になりました。

RGB値を引数にとった関数にしてみました。
return で 白(#FFF) または 黒(#000) を返します。

// 背景色によってテキスト色を白/黒どちらにするか判別する
// 参考式: Y=0.3R+0.6G+0.1B で Y>127なら黒、それ以外なら白
var checkTxtColor = function(cR,cG,cB){

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

RGB値自体の取得は、
前記事 – [JavaScript] 色表記の変換が簡単なライブラリ rgbcolor.js
で紹介したライブラリを利用すると簡単です。

Read More

色表記の変換が簡単になる JavaScript ライブラリの紹介です。

RGB color parser in JavaScript / Stoyan’s phpied.com
上記サイトで紹介されている rgbcolor.js を使うと

  • RGB表記 rgb(255,0,0)
  • 16進数表記 #FF0000
  • RGB各色を10進数で取得

が簡単にできます。

こちらでデモが見れます。
RGBColor test

Read More

[Chrome] Extensionつくり方 その1 – 基本機能の理解 の続きです。
“MyFirstChromeExtension” ていう Extension を作る想定で説明します。

この記事 では Browser Action で拡張機能を作る場合についてです。
https://lh4.googleusercontent.com/-yahQRzSy7Uc/T_hckbPOEwI/AAAAAAABFb8/l6pxmqYPgoU/s800/120708-0011-2.png
ツールバーに表示されるアイコン(19*19)と連動した機能を設定します。
このアイコンは Chrome 利用中は常時表示されているものになります。

Read More

JavaScript の勉強がてら、Chrome Extension について
dotinstall で勉強してみたので、そのメモ。

何回かに分けて記事化します。

必要となる知識

  • JavaScript (必須)
  • HTML / CSS (必須)
  • jQuery (あれば便利)

参考サイト

Google Chrome拡張の基礎 – ドットインストール
ここで、一連のつくり方を学ぶことができます。無料です。
dotinstall 最高!!

Google Chrome Extensions – Google Code
Google の公式ドキュメントサイト。

Read More

と思って、久しぶりに Apple Store に行ってきました。

イベント名 DTP Booster 035 – Illustratorで使うJavaScript、その基本と実践
日時 2012年6月21日28日(木) 19:00-20:00
会場 アップルストア銀座(3F)
主催 DTP Booster実行委員会

っていう、イベントに参加してきました。

主催者によるフォローアップ記事がアップされています。
DTP Booster 035が終了しました+フォローアップ – DTP Transit

個人的には Illustrator じゃなくて Photoshop のほうがよく使うけど
Adobe 製品なら Illustrator も Photoshop もそんなに変わらんべ。
と思って参加してきました。

どうやら周りは紙系デザイナーさんだらけで
普段のツールは Illustrator とか InDesign がメインの方が多かった様子。
プログラミングはサッパリです、という方がほとんどのようでした。

以下、参考になったこととか、URLとか。

Read More

友人結婚式で制作した余興映像 (詳しくは 前記事 – 結婚式余興 よちもち☆モチオネア) で、下記のように当日の寸劇の様子に合わせてテロップを重ね合わせた映像をスクリーンに流していました。演者の動きや進行に応じて、PC操作でテロップ内容や音声を切り替えるというものです。

当日披露宴で流した映像例

リアルタイムに映像ミキシングするなら QuartzComposer しか思いつかなかったのもあり、QuartzComposer の勉強がてら試行錯誤してみましたので、その記録です。

Read More