Category Archives: JavaScript

Gunma.web #12 で喋って来ました『NuukJam』 #gunmaweb

 2013/02/09 のGunma.web #12にて、『NuukJam』というLTを行ってきました。
 いつものかんじです。

Gunmaweb#12 nuuk jam from ivoryworks .

 「こういうのつくったよ」系。

 今回は小さくて邪悪なプログラムを書きました。

NuukJam
http://nuukjam.ivoryworks.com/

 ヌークジャム。
 Googleの短縮URL APIを用いて、URLにデータを埋め込むWebアプリです。

これね。
URL Shortener API

 テキストだけでなく、画像データもイケます。大きめのデータは、複数の短縮URLとして保存してます。

 今回のアイデアはオリジナルのつもりでしたが、このエントリ書いてる間に調べてみたら、もっと昔に同じ事してる人が沢山いました。

URL短縮サービスを利用したオンラインストレージ

 こちらは大きなデータを僕とは別の方法で保存しています。

 ”URL Shortener base64″とかで検索すると色々出てくるから
 海外でも書いてる人沢山いそうですぬ。
 わたしまけましたわ。

 さて、GitHubにソースおきました。

ivoryworks/nuukjam

今回のアプリ、Gunma.web用の書き下ろしなので、しばらく触る予定ありません。
現在動いてるのがそのまま載ってます。

APIキーもベタ書きしたままコミットしてあります。

ちなみに、というか、実は、このURL ShortenerのAPIは、1日の利用制限数が少なくなりますが、APIキーなくても使えます(後で知った)。

カラーコードの輝度を操作する(YCbCr値変換)

 カラーコード(#000000)の輝度を操作する処理を書きました(JavaScript)。
 カラーコードをYCbCr値に変換して輝度(Y)を操作することで実現しています。

 これはコトバパレットの実装の一部で、任意の色をを明るくしたり暗くしたりする必要があり、元々PHPで実装していました。
 今回のバージョンアップでクライアント側でも必要となり(Canvas)、JavaScriptで書き直しました。

function ctrlBrightness(cCode, value)
/* カラーコードと輝度の増減値を渡し、変換後のカラーコードを得ます */

function setBrightness(cCode, value)
/* カラーコードと輝度を渡し、変換後のカラーコードを得ます */

 また、以下の処理を関数化し、カラーコード、RGB値、YCbCr値の相互変換が行えるようにしています。

・カラーコード→RGB値
・カラーコード→YCbCr値
・RGB値→カラーコード
・RGB値→YCbCr値
・YCbCr値→カラーコード
・YCbCr値→RGB値

 なお、カラーコードには、6桁表記(#000000)と3桁表記(#000)がありますが双方に対応しています。
 但し、戻り値のカラーコードは全て6桁表記に統一されます。
 カラーネームとrgb値には対応していません。

 実装にあたり以下を参考にしました。

色空間 – Wikipedia
http://ja.wikipedia.org/wiki/色空間

RGB→YCbCr・YCbCr→RGB
http://eseuta.mine.nu/colorspace.html

 短いので貼り付けますが、GitHubにも置いてあります。
https://github.com/ivoryworks/colorcode-brightness.js

[cc lang=”JavaScript”]
/*
* Control brightness to ColorCode
*
* @param string cCode ColorCode(CSS format #000000 or #000)
* @param float value Brightness offset value
* @return string ColorCode(CSS format #000000)
*/
function ctrlBrightness(cCode, value) {
var ycbcr = colorCode2Ycbcr(formatColorCode(cCode));
ycbcr[0] = roundOff(ycbcr[0]+value, 255, -255);
return ycbcr2ColorCode(ycbcr);
}

/**
* Brightness set to ColorCode
*
* @param string cCode ColorCode(CSS format #000000 or #000)
* @param float value Brightness value(0 to 255)
* @return string ColorCode(CSS format #000000)
*/
function setBrightness(cCode, value) {
var ycbcr = colorCode2Ycbcr(formatColorCode(cCode));
ycbcr[0] = roundOff(value);
return ycbcr2ColorCode(ycbcr);
}

/**
* Convert ColorCode to YCbCr value
*
* @param string cCode ColorCode(CSS format #000000 or #000)
* @return array YCbCr value([0]==Y, [1]==Cb, [2]==Cr)
*/
function colorCode2Ycbcr(cCode) {
var rgb = colorCode2Rgb(formatColorCode(cCode));
return rgb2Ycbcr(rgb);
}

/**
* Convert YCbCr value to ColorCode
*
* @param array YCbCr value([0]==Y, [1]==Cb, [2]==Cr)
* @return string ColorCode(CSS format #000000)
*/
function ycbcr2ColorCode(ycbcr) {
var rgb = ycbcr2Rgb(ycbcr);
return rgb2ColorCode(rgb);
}

/**
* Convert RGB value to YCbCr value
*
* @param array RGB value([0]==R, [1]==G, [2]==B)
* @return array YCbCr value([0]==Y, [1]==Cb, [2]==Cr)
*/
function rgb2Ycbcr(rgb) {
var y = 0.298912 * rgb[0] + 0.586611 * rgb[1] + 0.114477 * rgb[2];
var cb = -0.16877709556951089920871620499976 * rgb[0] – 0.33122290443048910079128379500024 * rgb[1] + 0.5 * rgb[2];
var cr = 0.5 * rgb[0] – 0.41835760988634807613309598795016 * rgb[1] – 0.081642390113651923866904012049843 * rgb[2];
return new Array(y, cb, cr);
}

/**
* Convert YCbCr value to RGB value
*
* @param array YCbCr value([0]==Y, [1]==Cb, [2]==Cr)
* @return array RGB value([0]==R, [1]==G, [2]==B)
*/
function ycbcr2Rgb(ycbcr) {
var r = ycbcr[0] + 1.402176 * ycbcr[2];
var g = ycbcr[0] – 0.71448921433795138515984187135938 * ycbcr[2] – 0.34561921433795138515984187135938 * ycbcr[1];
var b = ycbcr[0] + 1.771046 * ycbcr[1];
return new Array(roundOff(r), roundOff(g), roundOff(b));
}

/**
* Convert ColorCode to RGB value
*
* @param string cCode ColorCode(CSS format #000000 or #000)
* @return array RGB value([0]==R, [1]==G, [2]==B)
*/
function colorCode2Rgb(cCode) {
cCode = formatColorCode(cCode);
return new Array(
parseInt(cCode[1]+cCode[2], 16)
,parseInt(cCode[3]+cCode[4], 16)
,parseInt(cCode[5]+cCode[6], 16)
);
}

/**
* Convert RGB value to ColorCode
*
* @param array RGB value([0]==R, [1]==G, [2]==B)
* @return string cCode ColorCode(CSS format #000000)
*/
function rgb2ColorCode(rgb) {
return ‘#’+(‘0’+rgb[0].toString(16).toUpperCase()).slice(-2)
+(‘0’+rgb[1].toString(16).toUpperCase()).slice(-2)
+(‘0’+rgb[2].toString(16).toUpperCase()).slice(-2);
}

/**
* Round off value(0 – 255)
*
* @param int value integer value
* @return int integer value(0…255)
*/
function roundOff(value, high, low) {
if (high == undefined) { high = 255; }
if (low == undefined) { low = 0; }
if (value > high) {
return high;
} else if (value < low) { return low; } return Math.floor(value); } /** * ColorCode formatting * * @param string cCode ColorCode(CSS format #000000 or #000) * @return string cCode ColorCode(CSS format #000000) */ function formatColorCode(cCode) { if (cCode.match(/^#[0-9A-F]{6}/i)) { return cCode; } else if (cCode.match(/^#[0-9A-F]{3}/i)) { return '#'+cCode[1]+cCode[1]+cCode[2]+cCode[2]+cCode[3]+cCode[3]; } else { return '#000000'; } } [/cc]