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 | Windows7 | このブログの読者になる | 更新情報をチェックする

2011年04月25日


Flex4 : HTTPService で入力データを PHP に送る

▼ 実行時の表示のキャプチャ画像



Flex3 のころと比べて、多少記述方法が変わっており、そのまま移行しようとするとエラーになります。

<fx:Declarations>〜</fx:Declarations>を使って、 現在のクラスの非デフォルト、非ビジュアルプロパティを宣言します。

response.php のソースコード
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	xmlns:s="library://ns.adobe.com/flex/spark"
	initialize="initData()"
>
<!--
***************************************************
 Flex4 における 絶対位置指定
*********************************************** -->
<s:layout>
	<s:BasicLayout />
</s:layout>

<!--
***************************************************
 現在のクラスの非デフォルト、非ビジュアルプロパ
 ティ を宣言します。例えば、効果、バリデーター、
 およびフォ ーマッターを定義します。
*********************************************** -->
<fx:Declarations>
	<!--
	*****************************************
	 Flex4 における HTTP 通信定義
	************************************* -->
	<mx:HTTPService
		id="srv"
		showBusyCursor="true"
		result="resultHandler(event)"
		fault="faultHandler(event)"
	/>
</fx:Declarations>

<fx:Script>
<![CDATA[

	import mx.formatters.*;

	// HTTPService のイベント用
	import mx.rpc.events.*;
	// Alert 用
	import mx.controls.*;
	// CloseEvent
	import 	mx.events.*;

	// *********************************************************
	// ログ表示
	// *********************************************************
	private function log(data:Object):void {

		// 日付編集用
		var fmt:DateFormatter = new DateFormatter();

		fmt.formatString = "YYYY/MM/DD HH:NN:SS";
		var logdt:String = fmt.format( new Date );

		// JavaScript の呼び出し
		ExternalInterface.call(
			"console.log", logdt,
			" "+data
		);

	}

	// *********************************************************
	// アプリケーションの初期化
	// *********************************************************
	private function initData():void {

		// メッセージ
		log("initData() が実行されました" );

	}

	// *****************************************************
	// HTTPServiceを使用してHTTPリクエスト(GET)を行う
	// *****************************************************
	private function sendData(event:Event):void {

		log( event.target.label + " が押されました" );

		// ● リクエストするURLをセット
		srv.url = "response.php";

		srv.request.fld1 = scode.text;
		srv.request.fld2 = sname.text;

		// レスポンス結果のデータフォーマット
		srv.resultFormat = "text";
		srv.method = "GET";
		srv.send();

	}

	// *****************************************************
	// HTTPServiceが成功
	// *****************************************************
	private function resultHandler(e:ResultEvent):void {

		Alert.show(
			e.result.toString(),
			"結果表示",
			Alert.OK | Alert.CANCEL,
			null,
			function(e:CloseEvent):void {
				if ( e.detail == Alert.OK ) {
					log("OK");
				}
				if ( e.detail == Alert.CANCEL ) {
					log("CANCEL");
				}
			}
		);

		log( "Alert が閉じる前にここが実行されます" );

		// 1) 表示するテキスト
		// 2) タイトル文字列
		// 3) ボタンの種類
		// Alert.OK Alert.CANCEL Alert.YES Alert.NO を | で論理和で指定
		// 4) 親オブジェクト
		// 通常は null を指定します
		// 5) イベント
 
	}

	// *****************************************************
	// HTTPServiceでエラーが発生した
	// *****************************************************
	private function faultHandler(e:FaultEvent):void {

		Alert.show(e.fault.message);

	}

]]>
</fx:Script>

<!--
***************************************************
 Flex4 における 絶対位置指定の画面定義
*********************************************** -->

	<s:Label
		x="10" y="10"
		text="社員コード"
	/>
	<s:TextInput
		x="100" y="10"
		id="scode"
	/>

	<s:Label
		x="10" y="35"
		text="社員名"
	/>
	<s:TextInput
		x="100" y="35"
		id="sname"
	/>

	<s:Button
		x="10" y="80"
		label="送信"
		click="sendData(event);"
	/>

</s:Application>

ビルド方法に関する記事

Flex4 : バッチビルドキット (110417)


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

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