SQLの窓

2011年07月29日


JavaScript と VBScript のカラーコード(#RRGGBB)の文字列と数値間の相互変換

とても短いコードですが、「ええ・・・と」となりそうな内容なので。

JavaScript
var color_code = "#123456";

alert(parseInt(color_code.replace("#","0x")))

var color_num = 1193046;

alert("#"+color_num.toString(16));
VBScript
color_code = "#123456"

MsgBox Clng(Replace(color_code,"#", "&H") )

color_num = 1193046

MsgBox("#" & Hex(color_num))
CLng 関数


posted by lightbox at 2011-07-29 13:30 | JavaScript | このブログの読者になる | 更新情報をチェックする

アマゾンの API 情報を使って、「カートに入れる(カートに追加する商品をご確認する)」ボタンを作成

アマゾンProduct Advertising APIの仕様変更について の裏付けを
する為に、「AssociateTag」の説明を Amazon のサイト内で探して
したら見つけたので使ってみました。

商品リンクは、Amazon で普通に取得したものに、target="_blank"
を追加して、FORM 内のコードは見やすいように整形しています。

※ いきなりカートに入るのでは無く、その前の確認ページに移動します。

※ AssociateTag は、このページの内容でのみ、xxxxxxxxx-22 のアソシエイトID
※ である事が明示される不思議なキーワードではあります。
Amazon アソシエイト(アフィリエイト) - ヘルプ
<div style='margin-bottom:10px;'>
<a 
	target="_blank"
	href="http://www.amazon.co.jp/gp/product/B0057UCZ9W/ref=as_li_tf_il?ie=UTF8&tag=argusobnurd-22&linkCode=as2&camp=247&creative=1211&creativeASIN=B0057UCZ9W"
><img
	border="0"
	src="http://ws.assoc-amazon.jp/widgets/q?_encoding=UTF8&Format=_SL160_&ASIN=B0057UCZ9W&MarketPlace=JP&ID=AsinImage&WS=1&tag=argusobnurd-22&ServiceVersion=20070822" 
></a><img
	src="http://www.assoc-amazon.jp/e/ir?t=argusobnurd-22&l=as2&o=9&a=B0057UCZ9W"
	width="1"
	height="1"
	border="0"
	alt=""
	style="border:none !important; margin:0px !important;" 
/>
</div>
<form
	method="post"
	action="http://www.amazon.co.jp/gp/aws/cart/add.html"
	target="_blank"
> <input
	type="hidden"
	name="ASIN.1"
	value="B0057UCZ9W"
> <input
	type="hidden"
	name="Quantity.1"
	value="1"
> <input
	type="hidden"
	name="AssociateTag"
	value="argusobnurd-22"
> <input
	type="hidden"
	name="SubscriptionId"
	value="168P7RR9AR9M79PKR4G2"
> <input
	type="image"
	name="submit.add-to-cart"
	src="http://rcm-images.amazon.com/images/G/09/extranet/associates/buttons/remote-buy-jp1.gif"
	alt="amazon.co.jp で買う"
></form>
SubscriptionId は、昔は表に出すとまずかったですが、今はそれ
だけでは API が使え無いので、少なくとも 2010-09-01 以降に使
えるようになったのだと思います。


タグ:API : Amazon
posted by lightbox at 2011-07-29 00:05 | API | このブログの読者になる | 更新情報をチェックする

2011年07月28日


アマゾンProduct Advertising APIの仕様変更について

メールで通知が来ました。
全てのAPIへのリクエストにおいて、AssociateTagが必須パラメータとなり、
リクエスト処理時の確認対象となります。
つまり、Amazon としては、API を使っている開発者のリンクに AssociateTag が含まれていない事が多々あるので、無い場合は紹介料が払えない(心苦しい)とい うような意味のようなのですが、そういえば付けて無かったので、付けてみました。 すると、IFRAME 内のレビューページのリンクにも全て AssociateTag が付加され ました。自分が使っているコードは以下の二つなので、単純に追加しただけです。 (PHP)Amazon アソシエイト Web サービスの名称変更および署名認証の期限が近づいて来たので (Perl)Amazon署名認証をPerlでやる必要のある人向け簡単なサンプルと配置方法
$req =
	"http://webservices.amazon.co.jp/onca/xml?" .
	"Service=AWSECommerceService&" .
	"AWSAccessKeyId=$SubscriptionId&" .
	"Version=2010-09-01&" . 
	"Operation=ItemLookup&" .
	"ResponseGroup=Large&" .
	"AssociateTag=argusobnurd-22&" .
	"ItemId={$_GET['code']}";

my %pkv;
$pkv{'Service'} = 'AWSECommerceService';
$pkv{'SubscriptionId'} = $SubscriptionId;
$pkv{'Operation'} = 'ItemLookup';
$pkv{'Version'} = '2010-09-01';
$pkv{'ResponseGroup'} = 'Large';
$pkv{'ItemId'} = $_POST{'ISBN'};
$pkv{"Timestamp"} = strftime("%Y-%m-%dT%H:%M:%SZ", gmtime);
$pkv{'AssociateTag'} = 'argusobnurd-22';

Product Advertising API

メールには上記リンクで詳細を確認して下さいとのこと。

要約すると。

★ 2011年10月26日に適用される。
★ 全てのAPIへのリクエストにおいて、有効なAssociate Tagが必須
★ ellerLookup,SellerListingLookup,SellerListingSearch オペレーションは廃止。
★ ItemSearch オペレーションにおいて、ItemPage パラメータの最大値は従来の400から10に変更。
★ ItemAttributes レスポンスグループ: 一部のItemAttributes 要素は廃止。
★ Offers: オファー要素は、最も頻繁に使用されるケースに集約されます。

です。

関連仕様ページ

共通のリクエストパラメータ


タグ:API : Amazon
posted by lightbox at 2011-07-28 22:59 | API | このブログの読者になる | 更新情報をチェックする

2011年07月24日


CSS3 の borderRadius で、四角から円へのモーフィング

400 x 400 の四角形なので、200 で円になると思ったら、太さのぶんを
指定した値から引いて半径にしているような感じです。

IE9 でまだテストできていません。
Opera はアニメーションしませんでした。
▼ このコードをソースコードから実行してみる
<style type="text/css">
#my_box_radius {
	width:400px;
	height:400px;

	-webkit-transition: all 5s ease;
	-moz-transition: all 5s ease;
	-o-transition: all 5s ease;
	-ms-transition: all 5s ease;
	transition: all 5s ease;

	border:40px #000 solid;
}
</style>
<script type="text/javascript">
function my_action_radius() {

	var obj = document.getElementById("my_box_radius");
	obj.style.borderRadius = "240px";
}
</script>

<input type="button" value="実行" onclick="my_action_radius();">
<div id="my_box_radius"></div>

以下は、margin に対して指定してみたのですが、効果は太さと色に対して
現れますが、スタイルはすぐ変更されます。ただ、サイズが変更されるに従
って、点線が動く事になります。
Firefox と Chrome で点線の動き方が違います。
※ Firefox のほうが望ましい動きをします


posted by lightbox at 2011-07-24 01:24 | CSS3 | このブログの読者になる | 更新情報をチェックする

jQuery のイベント登録。.bind() で総合的に基本路線

オブジェクトで複数のイベントを一度に登録していますが、一つづつ登録
しても同じ事です。ただ、大は小を兼ねるのでこの方法をまず最初に頭に
入れておくといいと思います。また、関数内で必ずしも jQuery のオブジ
ェクトを使う必要も無いので、this を直接使用しています


▼ このコードをソースコードから実行してみる
<script type="text/javascript" src="jquery-1.6.2.min.js"></script> 
<div id="jq_test_dev1" style='width:100px;height:100px;border:solid 1px #000'></div>
<script type="text/javascript">
$('#jq_test_dev1').bind( 
	{
		click: function() {
			alert("click");
		},
		mouseenter: function() {
			this.style.backgroundColor = '#555';
			this.style.cursor = 'pointer';
		},
		mouseleave: function() {
			this.style.backgroundColor = '#AAA';
			this.style.cursor = 'arrow';
		}
	}
);
</script>


posted by lightbox at 2011-07-24 00:27 | jQuery メソッド | このブログの読者になる | 更新情報をチェックする

2011年07月22日


jQuery の .text('値') と .html() で HTMLエンティティに変換

jQuery の .text や .html は動作としては、.val と同じですが、.text も .html も
開始タグから終了タグまでの内容を取りだしたり設定したりします。

ただ、それぞれ用途が違うので注意が必要ですが、text('値') で、HTML 上で表示したい
 HTML のコードを設定して、.html() で取り出すと、文字列としては特殊文字として取得
する事ができます。

ですから、それを再度 .text('値') で設定すれば、HTMLエンティティを表示する事ができ
ます

※ 逆に、.html('値') で HTML のソースコードを設定して、.text() で取り出すと、HTML
※ 部分が取り除かれた文字列になります。
<script type="text/javascript">
// < > & を &lt; &gt; &amp; に変換
function action3() {

	$('#cnv').text('<b>強調</b> a <= 1 &&');
	$('#result').val( $('#cnv').html() );

// textarea は、val でも text でも良い。
//	$('#result').text( $('#cnv').html() );

}
</script>
<input type="button" value="実行" onclick='action3();' />
<br />
<div id="cnv" style='display:none'></div>
<textarea id="result" style='width:300px;height:100px;'></textarea>
<input type='button' value='BODY文字列を取得' onclick='alert($("body").text());'/>




posted by lightbox at 2011-07-22 20:06 | jQuery メソッド | このブログの読者になる | 更新情報をチェックする

2011年07月20日


jQuery の easing の追加

デフォルトでは swing と linear ですが、jQuery Easing Plugin でたくさん使えるようになります。但し、swing は jswing に名前が変更されて、swing は書けるようですが、jQuery.easing.def を変更すると out of memory のエラーが
出たりするので、デフォルトである easeOutQuad は、swingと殆ど同じなのであまり気にせずに使うといいと思います。

※ しかし、どうも out of memory の挙動(IE8ですが)がたまにあるので、無理に
※ プラグインしない、という選択肢もあります。

その効果をグラフで示しておられるのが jQuery Easing - jQuery 日本語リファレンスで、その意味かよく解るようになっています。このページの jQuery は、jquery-1.3.min.js でしたが、1.6.2 でも動いています。
( そもそも、easing はプラグインなので、影響無いように作られています )
テフォルトの easing
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
</script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>

<input type="button" value="アニメーション" onclick='jqAction()'>
 テフォルトの easing <input id="def" type="text" />
<div style='position:relative;height:150px;'>
<img
	id="target"
	src="http://lightbox.on.coocan.jp/image/webtoolbox_gb.png"
	width="442"
 	height="121"
	style='
		position: absolute;
		left: 10px;
	'
/>
</div>
<script type="text/javascript">
// デフォルトは easeOutQuad
// ※ swing とほぼ同じ効果
$('#def').val(jQuery.easing.def);
function jqAction() {
	$('#target').animate(
		{
			// あるものを 0 にしたり、無いものを元に戻します
			// ( いったん見えなくなります )
			opacity: ['toggle', 'easeInCubic'],
			width: ['-=200', 'easeInElastic']
		},
		1000,
		function() {
			// 見えなくなった後、元へ戻します
			$('#target').animate(
				{
					opacity: 'show',
					width: '+=200'
				},
				1000,
				function() {
					// 一番最後に表示
					$('#def').val(jQuery.easing.def);
				}
			);
		}
	);

}
</script>




posted by lightbox at 2011-07-20 14:38 | jQuery | このブログの読者になる | 更新情報をチェックする

2011年07月18日


jQuery : onload の処理を $( function(){} ) で記述する

対象となるエレメントの定義が済んでおれば、それより以降の位置で SCRIPT 要素で処理を書く事によって「初期値設定」が可能ですが、どうしてもエレメントの定義前に初期値設定の記述をしたい場合は、onload イベントを使う事になるのですが、自分で書くと結構面倒です。

そこで、jQuery では $( 関数 ); と書けるのですが、関数を事前定義するのも面倒なので、無名関数で処理を書いてしまいます。
指定率 :
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
if ( window[window.location.hostname+'.loadjQueryUI'] !== true ) {
	window[window.location.hostname+'.loadjQueryUI'] = true;
	document.write("<"+"link rel=\"stylesheet\" href=\"//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css\">");
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js\"></"+"script>");
}
</script>
<script type="text/javascript">
// 初回の値
$( function() {
	$( "#amount" ).val( $( "#slider-range-min" ).slider( "value" ) + "%" )
   }
);
</script>

<div style='margin: 0 0 5px 0;'>指定率 :
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</div>
<div style='height:50px;'>
<div id="slider-range-min" style='width:200px;'></div>
</div>
<script type="text/javascript">
$( "#slider-range-min" ).slider({
	range: "min",
	value: 60,
	min: 0,
	max: 100,
	slide: function( event, ui ) {
		$( "#amount" ).val( ui.value + "%" );
	}
});
</script>




posted by lightbox at 2011-07-18 19:42 | jQuery | このブログの読者になる | 更新情報をチェックする

2011年07月17日


jQuery : animation メソッド

jQuery の英文マニュアル : .animate() – jQuery API ページのサンプル
(Basic Usage)をもう少し解りやすく変更したものです。

All animated properties should be animated to a single numeric value,
プロパティは数値である事。

width, height, or left can be animated but background-color cannot be.
幅や高さや位置情報はアニメーションできるが、背景色は不可

Property values are treated as a number of pixels unless otherwise
specified. The units em and % can be specified where applicable.
通常は、ピクセルが利用されるが、em や % も利用可能 

In addition to style properties, some non-style properties such as 
scrollTop and scrollLeft, as well as custom properties, can be animated.
CSS で無い scrollTop と scrollLeft は動作します

Shorthand CSS properties (e.g. margin, background, border) are not supported. 
margin, background, border のような一度に複数指定できるものは サポート外

In addition to numeric values, each property can take the strings 'show', 
'hide', and 'toggle'. These shortcuts allow for custom hiding and showing
 animations that take into account the display type of the element.
数値プロパティでは、show、hide、toggle が利用可能。

Animated properties can also be relative. If a value is supplied
with a leading += or -= sequence of characters
+= と -= で現在の値よりの相対指定が可能
と、だいたいを読んで以下のサンプルで試しています。100% 使うと、DIV 枠に 適合するようなサイズになったりします
二つ以上の効果を同時実行( 数値プロパティに対して )
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></"+"script>");
}
</script>
<input type="button" value="アニメーション" onclick='jqAction()'>
二つ以上の効果を同時実行( 数値プパティに対して )
<div style='position:relative;height:150px;'>
<img
	id="target"
	src="http://lightbox.on.coocan.jp/image/webtoolbox_gb.png"
	width="442"
 	height="121"
	style='
		position: absolute;
		left: 10px;
	'
/>
</div>
<script type="text/javascript">
function jqAction() {
	$('#target').animate(
		{
			// あるものを 0 にしたり、無いものを元に戻します
			// ( いったん見えなくなります )
			opacity: 'toggle',
			width: '-=200'
		},
		2000,
		function() {
			// 見えなくなった後、元へ戻します
			$('#target').animate(
				{
					opacity: 'show',
					width: '+=200'
				},
				2000
			);
		}
	);

}
</script>

<input type="button" value="フェードアウト/フェードイン" onclick='jqAction2()'>
<div style='position:relative;height:150px;'>
<img
	id="target2"
	src="http://lightbox.on.coocan.jp/image/webtoolbox_gb.png"
	width="442"
 	height="121"
	style='
		position: absolute;
		left: 10px;
		visibility: "visible"
	'
/>
</div>
<script type="text/javascript">
function jqAction2() {
	// 見えなくなくなります
	$('#target2').fadeOut(
		2000,
		function() {
			// 見えなくなった後、元へ戻します
			$('#target2').fadeIn(2000);
		}
	);

}
</script>


If the easing argument is not defined, the default swing function is used.
easing は、アニメーションのパターンですが、通常ライブラリでは、swing と linear のみのようで、増やしたい場合は プラグインを使用する必要があるみたいです。デフォルトは、swing になり、animation ではプロパティ毎に配列で easing を指定できると書いてあります。

width: ['toggle', 'swing']

こんな感じですね

関連する記事

jQuery の easing の追加



posted by lightbox at 2011-07-17 22:56 | jQuery メソッド | このブログの読者になる | 更新情報をチェックする

2011年07月15日


Google のURL短縮 API の簡単な実装例

フリーフォントで簡単ロゴ作成に実装した内容です。

このサービスでは、設定パラメータを URL に保存するので相当 URL が長くなります。ですから、リンクの href に使うには少し不便なので、IFRAME で以下のページを埋め込みました。XMLHttpRequest で呼び出しても良かったのですが、本体の画面構成がいっぱいいっぱいだったので、埋め込みにしています。

IFRAME を開くと同時に、URL を転送して、IFRAME 内で変換してもらうようにしています。このほうが、URLの内容を再度確認できます。



JSON で内容が返って来るので、json_decode を使ったほうが簡単になるのですが、サンプルとして他の JSON の内容も JavaScript で直接全て使えるサンプルとしてまずテストしました。
<?
header( "Content-Type: text/html; Charset=utf-8" );
header( "pragma: no-cache" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "Cache-control: no-cache" );

?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>URL短縮</title>
<style type="text/css">

* {
	font-size:14px
}

</style>
<script type="text/javascript">
function setData() {

	if ( document.getElementById("url").value == '' ) {
		alert("URLが指定されていません   ");
		return false;
	}

	return true;

}
</script>
</head>
<body>
<div style='padding:10px;'>
<input type="button" value="閉じる" style='float:right' onclick='parent.document.getElementById("ggurl").style.display="none"'>
<br>
<form
	id="frm"
	method="post"
	style='display:inline;'
	onsubmit='return setData();'
>
	<table>
	<tr>
	<td>URL</td>
	<td><textarea readonly id="url" name="url" style='width:390px;height:200px;'><?= $_POST['url'] ?></textarea></td>
	<tr>
	<td colspan=2>
	<input
		type="submit"
		value="URL短縮"
	/>
	</td>
	<tr>
	<td>短縮後</td>
	<td>
		<input
			readonly
			type="text"
			id="text"
			name="text"
			style='width:390px;'
			onclick='this.select();'
		>
	</td>
	<tr>
	</table>

</form>

<?
if ( strtoupper( $_SERVER['REQUEST_METHOD'] ) == 'POST' ) {

	$url = googleShorten( $_POST['url'] );
	$url = str_replace( "\n", "", $url );
	$url = str_replace( "'", "\\'", $url );

?>
<script type="text/javascript">
var shorten = eval("(" + '<?=$url?>' + ")" );
document.getElementById("text").value = shorten.id;
</script>
<? } ?>

</div>
</body>
</html>
<?
function googleShorten( $url ) {

	// *********************************************************
	// curl 処理
	// *********************************************************
	$curl = curl_init();
	// *********************************************************
	// https 用
	// *********************************************************
	curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
	curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 1);

	curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, 30);
	curl_setopt($curl, CURLOPT_HEADER, false);
	curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($curl, CURLOPT_BINARYTRANSFER, true);
	$api_url = "https://www.googleapis.com/urlshortener/v1/url";
	$api_url .= "?key=APIキー";
	curl_setopt($curl, CURLOPT_URL, $api_url );
	curl_setopt($curl, CURLOPT_POST, 1);
	curl_setopt($curl, CURLOPT_POSTFIELDS, "{\"longUrl\": \"{$url}\"}" );

	$header = array();
	$header[] = 'Content-Type: application/json';
	curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
//	$handle = fopen("./header.txt", "w");
//	curl_setopt($curl, CURLOPT_WRITEHEADER, $handle);

	$result = curl_exec($curl);
	curl_close($curl);

	return( $result );

}
?>
PHP : Google のURL短縮APIを呼び出す関数
Google URL Shortener API


posted by lightbox at 2011-07-15 14:21 | Google | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します


Windows
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり