SQLの窓

2011年05月29日


CSS3 : 絶対位置指定(absolute)を使用して簡単にアニメーション。しかも、適用するのは、JavaScript

※ IE では動作しません
ボタンを押すと、単純に移動アニメーションになります

最初の transition 指定のみ CSS で指定していますが、後の動作は
JavaScript で適用していいます。その際注意するのは、ブラウザに
よって、プロパティが違うところです( 最初が小文字で無いのもある )

こういう指定が面倒だと思われる場合は、CSS で クラスを作成して、
エレメントにクラスを追加指定すればいいと思います。
※ 今のクラス文字列を取得して、" クラス名" を追加して設定。
<style type="text/css">
.place_holder {
	position:relative;
	width:600px;
	height:400px;
	border:solid 1px #000;
}
#my_box1 {
	position:absolute;
	left:0px;
	top:0px;
	width:30px;
	height:30px;
	background:url("http://winofsql.jp/favicon.ico");
	-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:1px #000 solid;
}
</style>
<script type="text/javascript">
var tf_flg1 = false;
function my_action1() {
//	alert("テスト開始");
	// 移動
	if ( tf_flg1 = !tf_flg1 ) {
		document.getElementById("my_box1").style.left = "600px";
		document.getElementById("my_box1").style.top = "400px";
	}
	else {
		document.getElementById("my_box1").style.left = "0px";
		document.getElementById("my_box1").style.top = "0px";
	}
}

function my_action2() {
	// 移動
	var tf = document.getElementById("my_box1");

	if ( tf_flg1 = !tf_flg1 ) {
		tf.style.left = "600px";
		tf.style.top = "400px";
		tf.style.transform = "rotate(360deg)";
		tf.style.webkitTransform = "rotate(360deg)";
		tf.style.MozTransform = "rotate(360deg)";
		tf.style.OTransform = "rotate(360deg)";
		tf.style.msTransform = "rotate(360deg)";
	}
	else {
		tf.style.left = "100px";
		tf.style.top = "300px";
		tf.style.transform = "rotate(0deg)";
		tf.style.webkitTransform = "rotate(0deg)";
		tf.style.MozTransform = "rotate(0deg)";
		tf.style.OTransform = "rotate(0deg)";
		tf.style.msTransform = "rotate(0deg)";
	}
	// 回転
	
}
</script>

<input type="button" value="実行1" onclick="my_action1();">
<input type="button" value="実行2" onclick="my_action2();">
<div class="place_holder">
<div id="my_box1"></div>
</div>
関連する Microsoft ドキュメント

msTransform Property
 (CSSStyleDeclaration, currentStyle, style, ...)

関連する記事
WEB フォントを使った「フェードイン、フェードアウト」



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

2011年05月28日


Canvas : 角丸の DIV を CSS3 では無く Canvas で表現すると、こうなります。( IEは 9以上 )

CSS で実装するほうがはるかに簡単ですが、JavaScript でベタな描画する方法です。まず最初に線幅と角丸の半径を使って、上下左右の直線を引いた後、円弧を4隅に描画しています。( 角丸の無い場合でも、円弧の描画は必要です )
★ 角丸の DIV を CSS3 で実装せずに、Canvas で実装

この文章の下側で、角丸BOX が描かれています
<div style='position:relative;height:200px;'>
	<div id="target" style='position:absolute;left:0;top:0'></div>
	<div style='position:absolute;left:0;top:0;padding:15px'>
		<b style='color:#ff0000'>★ 角丸の DIV を CSS3 で実装せずに、Canvas で実装</b><br><br>
		<b style='color:#0000ff'>この文章の下側で、角丸BOX が描かれています</b>
	</div>
</div>
<script type="text/javascript">

// CANVAS を作成
var canvas = document.createElement("canvas");
// 幅と高さを設定
canvas.setAttribute("width", "500");
canvas.setAttribute("height", "200");
// 初期化
if ( ! canvas || ! canvas.getContext ) {
	G_vmlCanvasManager.initElement(canvas);
}
// CANVAS を ターゲットの Child として追加
document.getElementById("target").appendChild(canvas)

// 2D 処理の準備
var ctx = canvas.getContext('2d');

box( ctx, 0, 0, 500, 200, 5, 15 )

function box( c, x, y, w, h, lw, sz ) {

	// c : コンテキスト
	// x : 基準位置
	// y : 基準位置
	// w : 幅
	// h : 高さ
	// lw : 線の太さ
	// sz : 角丸半径

	// ライン用ストローク開始
	c.beginPath();
	// 開始位置へ移動
	c.moveTo(x+(lw/2)+sz, y+(lw/2));	// 左上直線開始部分
	c.lineTo(x-(lw/2)+w-sz, y+(lw/2));	// 上部分の直線( 右上に向けて )
	c.moveTo(x-(lw/2)+w, y+(lw/2)+sz);	// 右上直線開始部分
	c.lineTo(x-(lw/2)+w, y-(lw/2)+h-sz);	// 右部分の直線( 右下に向けて )
	c.moveTo(x-(lw/2)+w-sz, y-(lw/2)+h);	// 右下直線開始部分
	c.lineTo(x+(lw/2)+sz, y-(lw/2)+h);	// 下部分の直線( 左下に向けて )

	// 左下直線開始部分
	if ( sz == 0 ) {
		c.moveTo(x+(lw/2), y+h-sz);
	}
	else {
		c.moveTo(x+(lw/2), y-(lw/2)+h-sz);
	}
	// 左部分の直線( 左上に向けて )
	c.lineTo(x+(lw/2), y+(lw/2)+sz);

	// 四隅の角丸
	c.arc(x+(lw/2)+sz, y+(lw/2)+sz, sz, 180*Math.PI/180, 270*Math.PI/180, false );
	c.arc(x-(lw/2)+w-sz, y+(lw/2)+sz, sz, 270*Math.PI/180, 360*Math.PI/180, false );
	c.arc(x-(lw/2)+w-sz, y-(lw/2)+h-sz, sz, 0*Math.PI/180, 90*Math.PI/180, false );
	c.arc(x+(lw/2)+sz, y-(lw/2)+h-sz, sz, 90*Math.PI/180, 180*Math.PI/180, false );

	// 線幅で全て描画
	c.lineWidth = lw;
	c.stroke();
}

</script>



posted by lightbox at 2011-05-28 09:00 | HTML5 | このブログの読者になる | 更新情報をチェックする

Canvas : IE8も 角丸で BOX の内側を指定の太さで線を引く

ExplorerCanvas を使用しています。動的にエレメントを作成する為に G_vmlCanvasManager.initElement を使用しています。

※ ExplorerCanvas は、古い IE 用のライブラリなので、今後使う事はあまり発生しないと思います。

<!--[if lte IE 8]><script type="text/javascript" src="http://lightbox.on.coocan.jp/js/excanvas.js"></script><![endif]-->
<div id="target"><input type="button" value="IE8も BOX の内側を指定の太さで線を引く(角丸)" onclick='drawMyBox()'><br></div>
<script type="text/javascript">
function drawMyBox() {
	var canvas = document.createElement("canvas");
	canvas.setAttribute("width", "200");
	canvas.setAttribute("height", "300");
	if ( ! canvas || ! canvas.getContext ) {
		G_vmlCanvasManager.initElement(canvas);
	}
	document.getElementById("target").appendChild(canvas)
	var ctx = canvas.getContext('2d');

	box( ctx, 0, 0, 200, 300, 20, 10 )

	function box(c,x,y,w,h,lw,sz) {

		c.beginPath();
		c.moveTo(x+(lw/2)+sz, y+(lw/2));
		c.lineTo(x-(lw/2)+w-sz, y+(lw/2));
		c.moveTo(x-(lw/2)+w, y+(lw/2)+sz);
		c.lineTo(x-(lw/2)+w, y-(lw/2)+h-sz);
		c.moveTo(x-(lw/2)+w-sz, y-(lw/2)+h);
		c.lineTo(x+(lw/2)+sz, y-(lw/2)+h);
		if ( sz == 0 ) {
			c.moveTo(x+(lw/2), y+h-sz);
		}
		else {
			c.moveTo(x+(lw/2), y-(lw/2)+h-sz);
		}
		c.lineTo(x+(lw/2), y+(lw/2)+sz);

		c.arc(x+(lw/2)+sz, y+(lw/2)+sz, sz, 180*Math.PI/180, 270*Math.PI/180, false );
		c.arc(x-(lw/2)+w-sz, y+(lw/2)+sz, sz, 270*Math.PI/180, 360*Math.PI/180, false );
		c.arc(x-(lw/2)+w-sz, y-(lw/2)+h-sz, sz, 0*Math.PI/180, 90*Math.PI/180, false );
		c.arc(x+(lw/2)+sz, y-(lw/2)+h-sz, sz, 90*Math.PI/180, 180*Math.PI/180, false );

		c.lineWidth = lw;
		c.stroke();
	}

}
</script>

関連する記事

CSS3 の角丸を IE8以前でも使うには( ブログで使うには )


posted by lightbox at 2011-05-28 08:09 | HTML5 | このブログの読者になる | 更新情報をチェックする

2011年05月27日


Canvas : 角丸で、指定サイズ BOX の内側を指定の太さで線を引く

単純に、Canvas : 指定サイズ BOX の内側を指定の太さで線を引く 
を発展させたものです。線の太さを考慮して座標を移動しつつ、直線と
円弧を交互に引いています。

※ 最後の引数は、角丸の半径ですが、0 にすると長方形が描かれます。
※ 本来は、arc を実行しないようにするべきですが、拡張の可能性を
※ 考えてそのままにしています


<div id="target"><input type="button" value="BOX の内側を指定の太さで線を引く(角丸)" onclick='drawMyBox()'><br></div>
<script type="text/javascript">
function drawMyBox() {
	var canvas = document.createElement("canvas");
	if ( ! canvas || ! canvas.getContext ) {
		return false; 
	}
	else {
		canvas.setAttribute("width", "200");
		canvas.setAttribute("height", "300");
	}
	document.getElementById("target").appendChild(canvas)
	var ctx = canvas.getContext('2d');

	box( ctx, 0, 0, 200, 300, 20, 40 )

	function box(c,x,y,w,h,lw,sz) {

		c.beginPath();
		c.moveTo(x+(lw/2)+sz, y+(lw/2));
		c.lineTo(x-(lw/2)+w-sz, y+(lw/2));
		c.moveTo(x-(lw/2)+w, y+(lw/2)+sz);
		c.lineTo(x-(lw/2)+w, y-(lw/2)+h-sz);
		c.moveTo(x-(lw/2)+w-sz, y-(lw/2)+h);
		c.lineTo(x+(lw/2)+sz, y-(lw/2)+h);
		if ( sz == 0 ) {
			c.moveTo(x+(lw/2), y+h-sz);
		}
		else {
			c.moveTo(x+(lw/2), y-(lw/2)+h-sz);
		}
		c.lineTo(x+(lw/2), y+(lw/2)+sz);

		c.arc(x+(lw/2)+sz, y+(lw/2)+sz, sz, 180*Math.PI/180, 270*Math.PI/180, false );
		c.arc(x-(lw/2)+w-sz, y+(lw/2)+sz, sz, 270*Math.PI/180, 360*Math.PI/180, false );
		c.arc(x-(lw/2)+w-sz, y-(lw/2)+h-sz, sz, 0*Math.PI/180, 90*Math.PI/180, false );
		c.arc(x+(lw/2)+sz, y-(lw/2)+h-sz, sz, 90*Math.PI/180, 180*Math.PI/180, false );

		c.lineWidth = lw;
		c.stroke();
	}

}
</script>


posted by lightbox at 2011-05-27 22:30 | HTML5 | このブログの読者になる | 更新情報をチェックする

2011年05月26日


Word2007 : 太字や斜体や下線を解除( リボンのフォント )



Word や Excel でリボンの最初にある「フォント」に対する装飾ですが、
( この画像は Word です )

特定の装飾を「解除」するのには、その装飾を設定した時の逆を実行する
必要があります。でも、Wordを勉強する為のテキスト等では、どんどん機
能が増えて行くのに、「解除」方法を頭の中で整理するのは結構大変です。

フォントは比較的簡単です。多くの装飾がありますが、たいていリボンの
ホームの一番左で設定および解除ができます。しかし、ダイアログを表示
してから設定や解除する方法も、多くの機能を使いこなすにはとても重要
になります。

これ以外にも、「ミニツールバー」を使ったり、右クリックで表示される
メニューを使う事も作業効率からは重要です。

でも、まずはリボンの「フォント」から





posted by lightbox at 2011-05-26 09:30 | Microsoft Office | このブログの読者になる | 更新情報をチェックする

2011年05月25日


IME2007 の言語バーにプロパティダイアログを表示するボタンを表示する



いざと言う時のプロパティダイアログ。すぐ表示できるように「プロパティ」にチェックしておきます。

このメニューの表示は、言語バーの右下の小さな ▼ をクリックします


--------------------------------------------------------------
アプリケーションによってメニューの形は違うかもしれませんが、漢字入力可能な状態でCTRL+変換すると以下のようなメニューを表示させてから「プロパティ」を選択する事によってプロパティダイアログを表示する方法もあります





タグ:IME
posted by lightbox at 2011-05-25 18:18 | Microsoft Office | このブログの読者になる | 更新情報をチェックする

2011年05月22日


Firefox4 専用。XMLHttpRequest を使用した複数ファイルのアップロード

元は、Using files from web applications - MDC Docs にあるサンプルの
★ Handling the upload process for a file を使用していますが、できる
限りシンプルになるように変更しています。PHP 側は POST の生データを受
け取ってファイル化するだけですが、ファイル名を渡す為に URL に付加して
$_GET を使えるようにしています

これと組み合わして、Firefox4 : ローカルPCからファイルをドラッグドロップして
ファイルの中身を使用する事ができます を使うと、ドラッグドロップでファイルを簡
単にアップロードする事も可能です
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
</head>
<body>

<input
	type="file"
	id="fileElem"
	multiple="true"
	accept="image/*"
	style="display:none"
	onchange="handleFiles(this.files)"
>  
<a href="#" id="fileSelect">複数ファイルの選択</a>

<script type="text/javascript">
// ファイル選択呼び出し用のリンク
var fileSelect = document.getElementById("fileSelect");
// クリックイベントの登録
fileSelect.addEventListener("click", function(e) {
	if (fileElem) {
		fileElem.click();
	}
	e.preventDefault(); // "#" での動きをキャンセルする
}, false);

// 非表示のファイル選択フィールド
var fileElem = document.getElementById("fileElem");

// 選択時のイベント
function handleFiles(files) {

	// アップロード用
	var xhr = new XMLHttpRequest();

	var fileList = files;

	// Firebug で表示
	for( var i = 0; i < fileList.length; i++ ) {
		// コードを簡単にする為に、同期処理
		xhr.open("POST", "upload.php?fn="+fileList[i].fileName, false);
	    xhr.sendAsBinary(fileList[i].getAsBinary());

		console.log(xhr.responseText);
	}

}
</script>


</body>
</html>


upload.php
<?
session_start();
if ( $_SESSION['cnt'] == '' ) {
	$_SESSION['cnt'] = 0;
}
$_SESSION['cnt']++;
$file_cnt = "upload".$_SESSION['cnt'];

// hp://input は、POST の生データの読み込みを 許可します。
// enctype="multipart/form-data" に対しては 使用できません。 
$fp = fopen( "php://input", "rb" );
$wfp = fopen( $_GET['fn'], "wb" );

while( $ret = fread( $fp, 4096 ) ) {

	fwrite( $wfp, $ret );

}

fclose($wfp);
fclose($fp);


print $_GET['fn'] ."($file_cnt)\n";
?>
で画像が保存されました



posted by lightbox at 2011-05-22 10:41 | Firefox | このブログの読者になる | 更新情報をチェックする

Firefox4 : 複数選択ファイルアップロードの準備

Using files from web applications - MDC Docs の最初の
★ Using hidden file input elements using the click() method
に沿って、ファイルアップロード用の複数選択のファイルフィールド
を作成して、選択結果を console.log で表示しています。

※ Google Chrome での動作を確認しました
( 但し、Google Chrome の場合非表示ではダイアログが出ません )
<input
	type="file"
	id="fileElem"
	multiple="true"
	accept="image/*"
	style="display:none"
	onchange="handleFiles(this.files)"
>  
<a href="#" id="fileSelect">複数ファイルの選択</a>

<script type="text/javascript">
// ファイル選択呼び出し用のリンク
var fileSelect = document.getElementById("fileSelect");
// クリックイベントの登録
fileSelect.addEventListener("click", function(e) {
	if (fileElem) {
		fileElem.click();
	}
	e.preventDefault(); // "#" での動きをキャンセルする
}, false);

// 非表示のファイル選択フィールド
var fileElem = document.getElementById("fileElem");

// 選択時のイベント
function handleFiles(files) {
	var fileList = files;

	// Firebug で表示
	for( var i = 0; i < fileList.length; i++ ) {
		console.log(fileList[i].fileName);
	}
}
</script>


posted by lightbox at 2011-05-22 09:27 | Firefox | このブログの読者になる | 更新情報をチェックする

Canvas : 指定サイズ BOX の内側を指定の太さで線を引く

普通に BOX を Line で描こうとすると、その位置を中心として線の太さを
使うので、始点が欠けてしまいます。また、エリアいっぱいいっぱいに引こ
うとすると、線が細くなってしまうので、補正しています。

※ 指定 BOX エリアの内側を指定した太さで線を描画しています

<div id="target"><input type="button" value="指定サイズ BOX の内側を指定の太さで線を引く" onclick='drawMyBox()'><br></div>
<script type="text/javascript">
function drawMyBox() {
	var canvas = document.createElement("canvas");
	if ( ! canvas || ! canvas.getContext ) {
		return false; 
	}
	else {
		canvas.setAttribute("width", "300");
		canvas.setAttribute("height", "300");
	}
	document.getElementById("target").appendChild(canvas)
	var ctx = canvas.getContext('2d');

	box( ctx, 0, 0, 200, 300, 10 )

	function box(c,x,y,w,h,lw) {

		c.beginPath();
		c.moveTo(x+(lw/2), y+(lw/2));
		c.lineTo(x-(lw/2)+w, y+(lw/2));
		c.lineTo(x-(lw/2)+w, y-(lw/2)+h);
		c.lineTo(x+(lw/2), y-(lw/2)+h);
		c.lineTo(x+(lw/2), y);

		c.lineWidth = lw;
		c.stroke();
	}

}
</script>
関連する記事 Canvas : 角丸で、指定サイズ BOX の内側を指定の太さで線を引く
posted by lightbox at 2011-05-22 01:12 | HTML5 | このブログの読者になる | 更新情報をチェックする

2011年05月20日


IME2007 のプロパティを表示するスクリプト




Set obj = CreateObject("Shell.Application")
Set objFolder = obj.NameSpace( &h26 )
strPath = objFolder.Self.Path&"\Common Files\Microsoft Shared\IME12\IMEJP\IMJPUEX.EXE"
obj.ShellExecute(strPath)
Set obj = Nothing

他にも、システム辞書の利用オプションをチェックできるコマンドライン
アプリケーションもあります。
>IMJPUEXC ADDSYSDICT HELP
Microsoft Office IME 2007 Property Command Line Tool (12.0.6415.1000)
Copyright  (C)  2006 Microsoft Corporation.  All rights reserved.

Usage: IMJPUEXC ADDSYSDICT <Full Path to System Dictioanry File> <Option>

Option: 0       Used in none of conversion modes
Option: 1       Used in all of conversion modes


タグ:VBScript
posted by lightbox at 2011-05-20 10:55 | Microsoft Office | このブログの読者になる | 更新情報をチェックする
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 ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり