SQLの窓

2011年04月29日


WEB フォントを使った「フェードイン、フェードアウト」

IE8 以前で filter を使用すると、アンチエイリアスが無効になるバグがあったので
二つのエリアの切り替え方法を変更した IE8 以前専用の関数を追加しました。IE9 で
は必要無いと思いますが、ここでは IE の場合常にそちらを使用しています。

結果的に、IE8 以前用のコードのほうが使いやすくなっていますが、このような書き方
を CSS3 的に書こうとすると、コードが多くなってしまいますので、利用する時に考え
てどちらの方式を選ぶかどうか良く考えたほうがいいと思います。

a
A
いろいろ準備は必要ですが、いろいろな場面で使える可能性があります

WEB フォントの記述方法の考察
WEB フォントをクロスドメインで利用する
CSS3 + JavaScript(IEはFilter) : 「フェードイン、フェードアウト」制御
フリーフォント(WEBフォント)のダウンロード


<style media="screen" type="text/css">
@font-face {
	font-family:"tattooli";
	src: url("http://lightbox.on.coocan.jp/r205/font/tattooli.ttf") format("truetype");
}
</style>
<!--[if lte IE 9]>
<style type="text/css">
@font-face {
	font-family:"tattooli";
	src: url("http://lightbox.on.coocan.jp/r205/font/tattooli.eot");
}
</style>
<![endif]-->
<script type="text/javascript">
var a_counter = 3;
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf("msie") > -1) {
	a_counter = 2;
}
var font_chars = Array("",
"A","a","B","b","C","c","D","d","E","e",
"F","f","G","g","H","h","I","i","J","j",
"K","k","L","l","M","m","N","n","O","o",
"P","p","Q","q","R","r","S","s","T","t",
"U","u","V","v","W","w","X","x","Y","y",
"Z","z"
);
function a_start() {

	if (userAgent.indexOf("msie") > -1) {

		if ( a_counter % 2 == 1 ) {
			document.getElementById("a2").filters.blendTrans.Apply();
			document.getElementById("a2").style.visibility = "hidden";
			document.getElementById("a2").filters.blendTrans.Play();
		}
		else {
			document.getElementById("a2").filters.blendTrans.Apply();
			document.getElementById("a2").style.visibility = "visible";
			document.getElementById("a2").filters.blendTrans.Play();
		}

	}
	else {
		if ( a_counter % 2 == 1 ) {
			document.getElementById("a2").style.opacity = 0;
		}
		else {
			document.getElementById("a2").style.opacity = 100;
		}
	}

	setTimeout("a_next();", 7000 );
}
function a_next() {

	if ( a_counter % 2 == 1 ) {
		document.getElementById("a2").innerHTML = font_chars[a_counter];
	}
	else {
		document.getElementById("a1").innerHTML = font_chars[a_counter];
	}

	a_counter++;
	if ( a_counter > 52 ) {
		a_counter = 1;
	}

	a_start();
}

function a_start_ie8() {

	document.getElementById("a2").style.visibility = "visible";
	document.getElementById("a1").innerHTML = font_chars[a_counter];
	document.getElementById("a2").filters.blendTrans.Apply();
	document.getElementById("a2").style.visibility = "hidden";
	document.getElementById("a2").filters.blendTrans.Play();

	setTimeout("a_next_ie8();", 7000 );
}
function a_next_ie8() {

	document.getElementById("a2").innerHTML = font_chars[a_counter];

	a_counter++;
	if ( a_counter > 52 ) {
		a_counter = 1;
	}

	a_start_ie8();
}

</script>
<style type="text/css">
#base {
	position:relative;
	width:500px;
	height:300px;
}
#a1,#a2 {
	font-family: tattooli;
	width:100%;
	height:100%;
	background-color:#fff;
	font-size:300px;
	position:absolute;
	-webkit-transition: opacity 3s ease-in-out;
	-moz-transition: opacity 3s ease-in-out;
	-o-transition: opacity 3s ease-in-out;
	transition: opacity 3s ease-in-out;
	filter:blendTrans(duration=3);
}
</style>
<div id="base">
	<div id="a1" style='padding-left:80px'>a</div>
	<div id="a2" style='padding-left:100px'>A</div>
</div>
<script type="text/javascript">
if (userAgent.indexOf("msie") > -1) {
	setTimeout("a_start_ie8();", 7000 );
}
else {
	setTimeout("a_start();", 7000 );
}
</script>






posted by lightbox at 2011-04-29 00:27 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする

2011年04月28日


CSS3 + JavaScript(IEはFilter) : 「フェードイン、フェードアウト」制御

※ 古いコードから移行する時に、
document.all を変更し忘れていましたので修正しました。

※ IE8 以前のアンチエイリアスが無効になるバグに対応したコードを追加しました


IE は 4 の時から使える方法で実装しています。他のブラウザでは CSS3 の
transition が使えるようなので、CSS 側に定義して、処理そのものは、JavaScript
(タイマー)で実装しました。
このサンプルは、テキストですが、画像でも同じ事です。
※ setTimeout の時間が、トランジションの時間より大きくなる必要があります
2
1
<script type="text/javascript">
var a_counter = 3;
var userAgent = window.navigator.userAgent.toLowerCase();

function a_start() {

	if (userAgent.indexOf("msie") > -1) {

		if ( a_counter % 2 == 1 ) {
			document.getElementById("a2").filters.blendTrans.Apply();
			document.getElementById("a2").style.visibility = "hidden";
			document.getElementById("a2").filters.blendTrans.Play();
		}
		else {
			document.getElementById("a2").filters.blendTrans.Apply();
			document.getElementById("a2").style.visibility = "visible";
			document.getElementById("a2").filters.blendTrans.Play();
		}

	}
	else {
		if ( a_counter % 2 == 1 ) {
			document.getElementById("a2").style.opacity = 0;
		}
		else {
			document.getElementById("a2").style.opacity = 100;
		}
	}

	setTimeout("a_next();", 7000 );
}
function a_next() {

	if ( a_counter % 2 == 1 ) {
		document.getElementById("a2").innerHTML = a_counter.toString();
	}
	else {
		document.getElementById("a1").innerHTML = a_counter.toString();
	}

	a_counter++;
	if ( a_counter > 8 ) {
		a_counter = 1;
	}

	a_start();
}
</script>
<style type="text/css">
#base {
	position:relative;
	width:500px;
	height:300px;
}
#a1,#a2 {
	width:100%;
	height:100%;
	background-color:#fff;
	font-size:250px;
	position:absolute;
	-webkit-transition: opacity 3s ease-in-out;
	-moz-transition: opacity 3s ease-in-out;
	-o-transition: opacity 3s ease-in-out;
	transition: opacity 3s ease-in-out;
	filter:blendTrans(duration=3);
}
</style>
<div id="base">
	<div id="a1">2</div>
	<div id="a2">1</div>
</div>
<input
	value="go"
	type='button'
	onclick='a_start();this.style.visibility="hidden"'
/>


▼ 以下は、IE8 以前のアンチエイリアスが無効になるバグに対応したものです
<script type="text/javascript">
var a_counter = 2;

function a_start_ie8() {

	document.getElementById("a2").style.visibility = "visible";
	document.getElementById("a1").innerHTML = a_counter.toString();
	document.getElementById("a2").filters.blendTrans.Apply();
	document.getElementById("a2").style.visibility = "hidden";
	document.getElementById("a2").filters.blendTrans.Play();

	setTimeout("a_next_ie8();", 7000 );
}
function a_next_ie8() {

	document.getElementById("a2").innerHTML = a_counter.toString();

	a_counter++;
	if ( a_counter > 5 ) {
		a_counter = 1;
	}

	a_start_ie8();
}
</script>
<style type="text/css">
#base {
	position:relative;
	width:500px;
	height:300px;
}
#a1,#a2 {
	width:100%;
	height:100%;
	background-color:#fff;
	font-size:250px;
	position:absolute;
	-webkit-transition: opacity 3s ease-in-out;
	-moz-transition: opacity 3s ease-in-out;
	-o-transition: opacity 3s ease-in-out;
	transition: opacity 3s ease-in-out;
	filter:blendTrans(duration=3);
}
</style>
<div id="base">
	<div id="a1">2</div>
	<div id="a2">1</div>
</div>
<input
	value="go"
	type='button'
	onclick='a_start_ie8();this.style.visibility="hidden"'
/>
関連する記事

IE 兼用背景 Fade transition の実装



posted by lightbox at 2011-04-28 15:53 | 記録 | このブログの読者になる | 更新情報をチェックする

2011年04月26日


Windows7 : タスクスケージューラ設定での注意事項



仕様上は最低1分単位で繰り返し実行が可能ですが、コンボボックスは5分しか
ありません。直接入力して変更する事ができます。



※ 1分を指定すると表示が 00:01:00 のようになります。




開始オプションは、「作業ディレクトリ」を指定します。




「新しいインスタンスを並列で実行」にしないと、先に実行したタスクが終わっていない場合
次のタスクが実行されないので注意して下さい。



posted by lightbox at 2011-04-26 22:55 | Windows | このブログの読者になる | 更新情報をチェックする

2011年04月23日


WEB 上のファイルに使用できる文字と FileZilla



この画像は、FileZilla の設定ダイアログですが、赤い枠内が FileZilla が使え無い文字として定義している文字です。実際の仕様的な事は解りませんが、FTP クライアントが避けている以上使わないほうがいいでしょう。

\ / : * ? " < > |

さらに、+ がこの中にありませんが、ある FTP サーバーではエラーとなっています。( エラーとならないサーバーもあります )

パーセントエンコーディングも実際は以下のように違いが出ます。問題が出無いように注意する必要があります。

1) php 1 	: urlencode
2) php 2 	: rawurlencode : 5.2.x
3) php 3 	: rawurlencode : 5.3.x
4) JavaScript 	: encodeURI
5) JavaScript 	: encodeURIComponent
6) ASP 		: Server.URLEncode
7) PowerShell 	: [System.Web.HttpUtility]::UrlEncode
8) python 2.6.2
9) VS2010 Uri.EscapeDataString
10) VS2012 Uri.EscapeDataString (rfc3986)
11) VS2010 HttpUtility.UrlEncode( VS2012 も同じ )

※ ASP では、 ( Server.URLEncode(chr(I))で変換できない文字があります )
    php1 php2 php3 js1 js2 asp ps py fw4 fw4.5 fw
    1 2 3 4 5 6 7 8 9 10 11
0   %00 %00 %00 %00 %00   %00 %00 %00 %00 %00
32   + %20 %20 %20 %20 + + %20 %20 %20 +
33 【!】 %21 %21 %21 ! ! %21 ! %21 ! %21 !
34 【"】 %22 %22 %22 %22 %22 %22 %22 %22 %22 %22 %22
35 【#】 %23 %23 %23 # %23 %23 %23 %23 %23 %23 %23
36 【$】 %24 %24 %24 $ %24 %24 %24 %24 %24 %24 %24
37 【%】 %25 %25 %25 %25 %25 %25 %25 %25 %25 %25 %25
38 【&】 %26 %26 %26 & %26 %26 %26 %26 %26 %26 %26
39 【'】 %27 %27 %27 ' ' %27 ' %27 ' %27 %27
40 【(】 %28 %28 %28 ( ( %28 ( %28 ( %28 (
41 【)】 %29 %29 %29 ) ) %29 ) %29 ) %29 )
42 【*】 %2A %2A %2A * * %2A * %2A * %2A *
43 【+】 %2B %2B %2B + %2B %2B %2B %2B %2B %2B %2B
44 【,】 %2C %2C %2C , %2C %2C %2C %2C %2C %2C %2C
45 【-】 - - - - - %2D - - - - -
46 【.】 . . . . . %2E . . . . .
47 【/】 %2F %2F %2F / %2F %2F %2F / %2F %2F %2F
ここは、0から9の数字で変換されません
58 【:】 %3A %3A %3A : %3A %3A %3A %3A %3A %3A %3A
59 【;】 %3B %3B %3B ; %3B %3B %3B %3B %3B %3B %3B
60 【<】 %3C %3C %3C %3C %3C %3C %3C %3C %3C %3C %3C
61 【=】 %3D %3D %3D = %3D %3D %3D %3D %3D %3D %3D
62 【>】 %3E %3E %3E %3E %3E %3E %3E %3E %3E %3E %3E
63 【?】 %3F %3F %3F ? %3F %3F %3F %3F %3F %3F %3F
64 【@】 %40 %40 %40 @ %40 %40 %40 %40 %40 %40 %40
ここは、AからZのアルファベットで変換されません
91 【[】 %5B %5B %5B %5B %5B %5B %5B %5B %5B %5B %5B
92 【\】 %5C %5C %5C %5C %5C %5C %5C %5C %5C %5C %5C
93 【]】 %5D %5D %5D %5D %5D %5D %5D %5D %5D %5D %5D
94 【^】 %5E %5E %5E %5E %5E %5E %5E %5E %5E %5E %5E
95 【_】 _ _ _ _ _ %5F _ _ _ _ _
96 【`】 %60 %60 %60 %60 %60 %60 %60 %60 %60 %60 %60
ここは、aからzのアルファベット(小文字)で変換されません
123 【{】 %7B %7B %7B %7B %7B %7B %7B %7B %7B %7B %7B
124 【|】 %7C %7C %7C %7C %7C %7C %7C %7C %7C %7C %7C
125 【}】 %7D %7D %7D %7D %7D %7D %7D %7D %7D %7D %7D
126 【~】 %7E %7E ~ ~ ~ %7E %7E %7E ~ ~ %7E
127   %7F %7F %7F %7F %7F %7F %7F %7F %7F %7F %7F
%80 以降は全て同様に % エンコードされる(たぶん)ので省略しています。この中では、「php 3」 が OAuth で使われる rfc3986 のパーセントエンコーディングのようです


関連する記事

RFC 3986 に基づいた URL エンコード の簡単な理解




タグ:FileZilla
posted by lightbox at 2011-04-23 11:37 | 記録 | このブログの読者になる | 更新情報をチェックする

2011年04月15日


phpMyAdmin(2.11.11.3) のインストール



とても簡単になっていました。

Documentation.txt の Quick Install として、以下のような内容を config.inc.php の中に書くだけでその場所(index.php)にアクセスすると動作します。

blowfish_secret は、任意の英数字文字列であれば良いですが、一応手動でconfig.inc.php 作成する方法も書かれてあったので、そちらで作成された文字列を使っています。
<?php

$cfg['blowfish_secret'] = '4da7f82e7d0da9.94927655';

$i=0;
$i++;
$cfg['Servers'][$i]['auth_type']     = 'cookie';

?>

手動で作成する方法は、config ディレクトリを作成して、書き込み可能なように設定をしておいてから、scripts/setup.php にアクセスします。

まず、Server を追加して各所の設定値を変更してから Save で保存すると、config ディレクトリ内に書きこまれるので、それを index.php があるところへコピーして、config.inc.php の書き込み権限を解除します。

内容はすべて必要かどうかは、自分で判断して書き換えます。その時には、ドキュメントの、Documentation.html#cfg_PmaAbsoluteUri から下を読む必要があります
<?php
/*
 * Generated configuration file
 * Generated by: phpMyAdmin 2.11.11.3 setup script by Michal <michal@cihar.com>
 * Version: $Id$
 * Date: Fri, 15 Apr 2011 10:07:18 GMT
 */

/* Servers configuration */
$i = 0;

/* Server localhost (cookie) [1] */
$i++;
$cfg['Servers'][$i]['host'] = 'localhost';
$cfg['Servers'][$i]['extension'] = 'mysqli';
$cfg['Servers'][$i]['connect_type'] = 'tcp';
$cfg['Servers'][$i]['compress'] = false;
$cfg['Servers'][$i]['auth_type'] = 'cookie';

$cfg['Servers'][$i]['AllowDeny']['order'] = '';

$cfg['Servers'][$i]['AllowDeny']['rules'] = array();



/* End of servers configuration */

$cfg['AllowAnywhereRecoding'] = false;
$cfg['DefaultCharset'] = 'utf-8';
$cfg['RecodingEngine'] = 'iconv';
$cfg['IconvExtraParams'] = '//TRANSLIT';
$cfg['blowfish_secret'] = '4da817a9d83755.48807725';
?>




posted by lightbox at 2011-04-15 19:00 | フリーソフト | このブログの読者になる | 更新情報をチェックする

PHP をテストする為の初心者用フォーム



WEBアプリケーションでフォーム一つ作成するにしても、実際は多くのの情報が、通常は「暗黙」のもとに、常識のように省略されたりします。その辺を重点的に明示しています

■ HTML5 の標準モード指定( <!DOCTYPE html> )
■ キャラクタセットは失敗の無いように UTF-8 で統一
■ CSS を分離すると、解りにくくなるのでインラインで指定
■ 書いたままの表示イメージになるように、body に white-space:pre
■ FORM では method を明示
( 最初は引き渡すデータがアドレスバーで見えるように get を使用 )
■ FORM の記述で改行が増えないように display:inline
■ TEXTAREA のサイズは css で指定( 他のコンテンツとの調整が容易 )
■ アプリケーションの実行と画面を分離する為に、action で php を指定
■ Firefox や Chrome でテキストエリアのサイズを変更できないように resize:none
■ HTML の属性は読みやすいようにタブで揃える
■ HTML の要素も必要ならばタブでインデントする
■ style と イベントはシングルクォートで囲う
( 内部でダブルクォートを使えるように )
sql.htm
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SQL実行</title>
</head>
<body style='white-space:pre;'>
<form
	action="test_001.php"
	method="get"
	target="_blank"
	style='display:inline;'
>
	<span style='font-size:20px;'>初心者用フォームスケルトン</span>
	<textarea
		name="text"
		style='width:400px;height:300px;resize:none;'
	></textarea>
	<input
		type="submit"
		value="送信"
	/>
</form>
</body>
</html>

関連する記事

PHP で MySQLをテストする為のソースコード
PHP : メール送信(unix)
PHP : メール送信(windows+basp21)


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

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

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

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

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


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

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

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

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

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



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

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり