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日


PHP : 初心者用スケルトンセット : SQL、メール、Twitter




▼ ソースコード
PHP : 初心者用フォームスケルトン : SQL、メール、Twitter

php.php は、そのままではエラーが表示されない、WEB サーバーで実行する為に利用しています。Toypark や ラクーカンはそのようになっていると思いますが、その必要の無いさくらインターネットでも動作確認しています。

PHP をテストする為の初心者用フォーム にもう少し手を加えて、同じページのIFRAME に表示するようにしています。

コンボボックスで目的のアプリを切り替える為の JavaScript の記述も加わっています。

このフォームから実行できる PHP のサンプルとして、MySQL の実行と、メール送信( sendmail )と、Twitter の投稿を添付しました。メソッドは GET で実行している為、あまり長い文は使用できませんが、実用的なアプリの初期サンプルとしては、POST より GET のほうが良いと思います。

※ セキュリティ上の配慮は行っていません。


関連する記事

PHP : Twitter への投稿 : バージョン1


posted by lightbox at 2011-04-23 23:28 | PHP + WEBアプリ | このブログの読者になる | 更新情報をチェックする

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月16日


PHP : Twitter への投稿 : バージョン1

Twitter のアカウントが必要です。New Twitter Application | dev.twitter.com よりアプリケーションを登録します。


※ アプリケーションのWEBサイトは適当に自分゛管理する URLをセットします
( 省略できません )
※ この時点で、コールバックは必要ありません

登録されたアプリケーションの情報を元に、自分でアクセスします( 実行すると、連携アプリとして登録されます )。この情報は本来ログインで一時的に取得できるものが含まれていますが、自分のアプリケーションには登録時に一つ用意されています。それを使うのでログインは必要ありません。( 連携アプリを削除すると My Access Token はリセットされます )

以下のサンプルでは、$text に投稿データを UTF-8 でセットするようになっています。FORM の テキストエリアから投稿したい場合は、データをセットし直して下さい。

関連する記事

PHP をテストする為の初心者用フォーム
<?php
// **********************************************************
// Twitter への投稿 : バージョン1
// **********************************************************
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" );

// **********************************************************
// AOuth 用の urlencode 関数
// **********************************************************
function urle( $str ) {
	// php 5.3.x 〜 ではこの変換は必要無い
	return str_replace('%7E', '~', rawurlencode($str));
}

// **********************************************************
// API
// **********************************************************
$twitter_url = 'http://api.twitter.com/1/statuses/update.json';

// **********************************************************
// 認証データ
// **********************************************************
$oauth_consumer_key = "アプリケーションページより取得";
$oauth_consumer_secret = "アプリケーションページより取得";
$oauth_token = "My Access Token ページより取得";
$oauth_secret = "My Access Token ページより取得";

// 毎回変化するランダムな文字列
$mt = microtime();
$rand = mt_rand();
$oauth_nonce = md5($mt . $rand);

$oauth_signature_method = "HMAC-SHA1";
$oauth_timestamp = mktime();
$oauth_version = "1.0";


// *********************************************************
// シグネチャ用ベース文字列作成
/*
  httpMethod + "&" +
  url_encode(  base_uri ) + "&" +
  sorted_query_params.each  { | k, v |
      url_encode ( k ) + "%3D" +
      url_encode ( v )
  }.join("%26")
*/
// *********************************************************
$base_string = "POST";
$base_string .= "&" . urle($twitter_url);
$base_string .= "&";

$base_string .= urle("oauth_consumer_key")."%3D".urle($oauth_consumer_key)."%26";
$base_string .= urle("oauth_nonce")."%3D".urle($oauth_nonce)."%26";
$base_string .= urle("oauth_signature_method")."%3D".urle($oauth_signature_method)."%26";
$base_string .= urle("oauth_timestamp")."%3D".urle($oauth_timestamp)."%26";
$base_string .= urle("oauth_token")."%3D".urle($oauth_token)."%26";
$base_string .= urle("oauth_version")."%3D".urle($oauth_version);

// **********************************************************
// 投稿データ
// **********************************************************
// POST データは2度 urlencode する
$text = "Twitter への投稿 : バージョン1 : nonce=" . $oauth_nonce;
$text .= " : timestamp=" . $oauth_timestamp;
$base_string .= "%26status" . "%3D" . urle(urle($text));

// *********************************************************
// シグネチャ作成
/*
url_encode( consumer_secret ) + "&" +
url_encode( oauth_token_secret || nil )
*/
// *********************************************************
$oauth_signature = 
base64_encode( hash_hmac(
	"sha1",
	$base_string,
	$oauth_consumer_secret . "&" . $oauth_secret,
	true
));

// *********************************************************
// curl 処理
// *********************************************************
$curl = curl_init();
curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, 30);
curl_setopt($curl, CURLOPT_HEADER, false);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_BINARYTRANSFER, true);
curl_setopt($curl, CURLOPT_URL, $twitter_url);
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, "status=" . urle($text));

// *********************************************************
// http ヘッダ作成
// *********************************************************
$header = array();
$header[] = 'Expect:';

$header[] = "Authorization: OAuth ".
urle("oauth_consumer_key")."="".urle($oauth_consumer_key)."",".
urle("oauth_token")."="".urle($oauth_token)."",".
urle("oauth_nonce")."="".urle($oauth_nonce)."",".
urle("oauth_timestamp")."="".urle($oauth_timestamp)."",".
urle("oauth_signature_method")."="".urle($oauth_signature_method)."",".
urle("oauth_version")."="".urle($oauth_version)."",".
urle("oauth_signature")."="".urle($oauth_signature).""";

curl_setopt($curl, CURLOPT_HTTPHEADER, $header);

// *********************************************************
// https 用 ( https://api.twitter.co 利用時に必要 )
// *********************************************************
//curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
//curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 1);

// *********************************************************
// 戻された http ヘッダの出力
// *********************************************************
$handle = fopen("./header.txt", "w");
curl_setopt($curl, CURLOPT_WRITEHEADER, $handle);

// *********************************************************
// 送信
// *********************************************************
$result = curl_exec($curl);


// *********************************************************
// 結果
// *********************************************************
print "<br>";

if($result === false) {
	print '送信処理にエラーが発生しました: ' . curl_error($curl);
}
else {
	print '送信処理は正常に終了しました';
}
curl_close($curl);

// *********************************************************
// 結果表示
// *********************************************************
print "<br>";

$result = json_decode( $result );

print "<pre>";
print_r( $result );
print "</pre>";

?>


アプリケーション一覧ページ
※ 上のページでアプリケーションのアイコンをクリックすると個別のアプリケーションページです
※ そのページの右サイドのメニューに My Access Token へのリンクがあります



posted by lightbox at 2011-04-16 14:54 | PHP + Twitter | このブログの読者になる | 更新情報をチェックする
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 終わり