SQLの窓

2010年12月31日


HR 作成ユニット

HR を スタイル指定する場合には、ブラウザによって多少違いますし、結構設定が面倒だったりするので、作成ユニットを作りました。
以下のコードで設置可能です。
<iframe
	src="http://lightbox.on.coocan.jp/tool_unit_hr.htm"
	frameborder="0"
	scrolling="1"
	style='width:520px;height:380px;margin-left:10px;margin-top:6px;border:solid 1px #C0C0C0;'
></iframe>


タグ:ツール
posted by lightbox at 2010-12-31 22:18 | WEBサービス | このブログの読者になる | 更新情報をチェックする

2010年12月24日


PHP : MySQLリモートカウンタ

使い方はいろいろですが、ローカルの PC から HTTP で呼び出して使う
事もできますし、別のサイトから呼びだして使ってもいいわけです。

※ Ruby でデータベース処理書くのが面倒なのでこうして使っています。
FieldTypeNullKeyDefaultExtra
1ページvarchar(25)PRI
2カウンタint(11)YES0
3備考varchar(100)YES
<?
// *********************************************************
// データベース接続情報
// *********************************************************
$server = 'xxxxxxxx';
$db_name = 'xxxxxxxx';
$user = 'xxxxxxxx';
$password = 'xxxxxxxx';

// *********************************************************
// ヘッダ
// *********************************************************
header( "Content-Type: text/html; Charset=euc-jp" );
header( "pragma: no-cache" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "Cache-control: no-cache" );

// *********************************************************
// 内部初期処理
// *********************************************************
foreach( $_GET as $Key => $Value ) {
	$_POST[$Key] = $_GET[$Key];
}
foreach( $_POST as $Key => $Value ) {
	$_POST[$Key] = str_replace("\\\\", "\\", $Value );
	$_POST[$Key] = str_replace("\\'", "'", $_POST[$Key] );
	$_POST[$Key] = str_replace("\\\"", "\"", $_POST[$Key] );
}
mb_language( "ja" );
mb_internal_encoding("EUC-JP");


// *********************************************************
// 接続
// *********************************************************
$connect = @mysql_connect( $server, $user, $password );
if ( !$connect ) {
	print "接続エラーです";
	exit();
}

// *********************************************************
// DB選択
// *********************************************************
mysql_select_db( $db_name, $connect );

// *********************************************************
// クエリ( カウントアップ )
// *********************************************************
$query = "update `カウンタ表示` set `カウンタ` = `カウンタ` + 1";
$query .= " where ページ = '_cron'";
mysql_query($query, $connect);

// *********************************************************
// クエリ( カウント取得 )
// *********************************************************
$query = "select `カウンタ` from `カウンタ表示`";
$query .= " where ページ = '_cron'";
$result = mysql_query($query, $connect);
$row = mysql_fetch_row($result);

// *********************************************************
// 現在のカウンタ
// *********************************************************
print $row[0];

// *********************************************************
// カウンタのリセット( 1001 を 0 )
// *********************************************************
if ( ($row[0]+0) > 1000 ) {
	$query = "update `カウンタ表示` set `カウンタ` = 0";
	$query .= " where ページ = '_cron'";
	mysql_query($query, $connect);
}

// *********************************************************
// メモリを開放ですが、通常は必要ありません
// *********************************************************
mysql_free_result($result);

// *********************************************************
// 接続解除
// *********************************************************
mysql_close($connect);

?>



posted by lightbox at 2010-12-24 23:35 | PHP + データベース | このブログの読者になる | 更新情報をチェックする

2010年12月20日


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

▼ 以下は古い記事です


CSS3 support in Internet Explorer 6, 7, and 8 より ie-css3.htc
をダウンロードして、WEB 上のどこかに設置して、その同一ドメイン下で、HTML を作成してブログで IFRAME で読み込みます。

セキュリティの仕様の為、同一ドメインでしか動作しないので、ブログではファイルがアップロード可能な Seesaa、忍者ブログ、FC2、ココログを使っておれば、レンタルのWEB スペースは必要無いですが、変更が面倒なので FTPでアップロードできる WEB スペースは持っていたほうが便利です。

※ ココログはユーザースペースがサブドメインでは無く、ディレクトリなので、そのまま設置可能
他の CSS3 効果

DIV 角丸(画像の角を丸く)
テキストのドロップシャドウ
YouTube の埋め込みにドロップシャドウ


タグ:CSS3
posted by lightbox at 2010-12-20 13:34 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2010年12月16日


google.load で Yahoo UI のメニューを使う

fonts は見栄えをサンプルと同じにする為に必要です。サンプルでは、body 要素にyui-skin-sam クラスが設定されていましたが、親要素に設定します。
<script	type="text/javascript" src="http://www.google.com/jsapi" charset="utf-8"></script>
<script	type="text/javascript">
google.load("yui", "2.8.2");
</script>
<script type="text/javascript">
new YAHOO.util.YUILoader({
	require: ['menu','fonts'],
	onSuccess: function() {
		YAHOO.util.Event.onContentReady("basicmenu", function () {
		var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true });
			document.getElementById("basicmenu").style.display = '';
			oMenu.render();
			YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
		});
	}
}).insert();
</script>

</head>
<body>
<input type='button' value="メニュー表示" id="menutoggle">

<div class="yui-skin-sam" >
<div id="basicmenu" class="yuimenu" style='display:none'>
 <div class="bd">
  <ul class="first-of-type">
   <li class="yuimenuitem"><a target="_blank" class="yuimenuitemlabel" href="http://winofsql.jp">SQLの窓</a></li>
   <li class="yuimenuitem"><a target="_blank" class="yuimenuitemlabel" href="http://www.google.co.jp/">Google</a></li>
   <li class="yuimenuitem"><a target="_blank" class="yuimenuitemlabel" href="http://developer.yahoo.com/yui/yuiloader/">YUI Loader</a></li>
   <li class="yuimenuitem"><a target="_blank" class="yuimenuitemlabel" href="http://twitter.com/">Twitter</a></li>
  </ul>
 </div>
</div>
</div>



タグ:YUI google
posted by lightbox at 2010-12-16 17:24 | JavaScript ライブラリ | このブログの読者になる | 更新情報をチェックする

2010年12月15日


Textt サービスに JavaScript を書いて、投稿エリアを改造します

<script type="text/javascript" src="http://textt.net/sworc/20101215134010.txt"></script>
元々の目的は、JUGEM ブログに埋め込まれるニュースの位置を変更するのが目的でしたが、時期的にたまたま Textt のテストもしていたのですが、うまくいきました。

記事内にダミーの div を書きこんで、そこから相対位置で上位の div に対して変更処理を行います。
(function() {
	var host = (location.host).replace(/\./g,"_");
	if ( !window[host] ) {
		window[host] = {};
		window[host].counter = 0;
	}
	window[host].counter++;
	document.write("<div style='display:none' id="+host+window[host].counter+"></div>");
	var str="";
	str+="<"+"script type=\"text/javascript\"> \n";
	str+="(document.getElementById('"+host+window[host].counter+"')).parentNode.style.backgroundColor='#E0E0E0'; \n";
	str+="(document.getElementById('"+host+window[host].counter+"')).parentNode.style.padding='10px'; \n";
	str+="</"+"script> ";
	document.write(str);
})();

名前空間として、そのページのドメイン部分を使って、. を _ に変えた文字列にして、どこででもユニークな id を持つ div を作る為に使っています。内容としてはカウンターの定義のみですが、グローバルをできるだけ汚さないように無名関数による実行内でのみ変数の定義をしています


タグ:javascript Textt
posted by lightbox at 2010-12-15 23:34 | WEBサービス | このブログの読者になる | 更新情報をチェックする

2010年12月14日


Opera の window.open のバグ

▼ 以下は古い記事です


window.open だけで言えば、開いた元のウインドウの click イベントで、window.open で開いたウインドウにフォーカスを移せないです。IE、Firefox、Chrome では正常に動きます。

そもそも、Opera だけが showModalDialog に対応しておらず、その代替え策としてのコードを書いてテストしたら見事に裏切られました。

実行したのは以下のようなコードで、window.open されたほうから opener に半透明な div で使用不可能にして、その div をクリックしたら、フォーカス移動しています。
var win = window.opener;

// ページ全体を覆う DIV の作成
win.ds = win.document.createElement('div');
win.ds.setAttribute('id','ds')
win.ds.style.position='absolute';
win.ds.style.width='100%';
win.ds.style.height=win.document.getElementsByTagName("HTML")[0].scrollHeight+200+'px';
win.ds.style.left='0px';
win.ds.style.top='0px';

// IE8 までは、opacity プロパティが使えないようです
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf("msie") > -1) {
	win.ds.style.display = 'none';
	win.ds.style.backgroundColor = '#000000';
	win.ds.style.filter='alpha(opacity=50)';
}
else {
	win.ds.style.backgroundColor = '#000000';
	win.ds.style.opacity=.5;
}

// ページの最後に追加
win.document.body.appendChild(win.ds);

// IEのみ後表示
if (userAgent.indexOf("msie") > -1) {
	win.ds.style.display = '';
}

win.ds.onclick= function(){try{window.focus();}catch(e){}}

しかし、問題はそれだけでは無く、Opera で window.open したほうのwindow を先に閉じると、開かれたウインドウが最後のウインドウになってしまって、次からそのウインドウでしか Opera が開きません。

Opera_x

そうすると、一般ユーザではどうにもできない状態になってしまうわけで・・・

正しい修復方法はそもそも解りませんが、operaprefs.ini を保存しておいて、Opera を終了させているあいだに operaprefs.ini を削除してやると、次の起動で Opera は初期化されます。

で、既存の保存していた設定を再び operaprefs.ini に上書きすると元に戻ります



タグ:Opera バグ
posted by lightbox at 2010-12-14 12:23 | WEBブラウザ | このブログの読者になる | 更新情報をチェックする

2010年12月13日


Textt サービスを使って、外部 JavaScript として利用可能です。JavaScript で書くのなら、外部 CSS としても利用できます。

http://textt.net/

Textt

元々は、Twitter 用のメモ帳という発想なんでしょうけれど、自分も試してみるまでは気が付かなかったのですが、SCRIPT 要素の src 属性のファイルは .txt でも可能というか、特に mime のチェックは行っていないようで、普通に使えました。

Textt2


CSS はさすがにチェックされているので無理でしたが、JavaScript から書きこむのであれば可能です。

Textt3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=shift_jis">
<script type="text/javascript" src="http://textt.net/sworc/20101212164510.txt" charset="utf-8"></script>
<script type="text/javascript" src="http://textt.net/sworc/20101213054143.txt" charset="utf-8"></script>
</head>
<body>
<input type="button" value="実行" onclick='scriptTest();'>
</body>
</html>



タグ:Textt javascript
posted by lightbox at 2010-12-13 15:42 | WEBサービス | このブログの読者になる | 更新情報をチェックする
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 終わり