SQLの窓

2014年11月28日


CENTER 要素内での position:absolute で、位置指定されていない場合の振る舞い

CENTER 要素は、HTML 4 (及び XHTML)で非推奨要素に指定され、HTML5 で完全に廃止されていますが、間違って使われてしまった場合、Google Chrome( と Firefox は同じ ) と IE11 では全く表示が異なる場合があります。

DIV 要素を position:relative でラッパーにして、内部に position:absolute を指定しますが、DIV 要素は CENTER 要素によって中央に表示されるのですが、中の要素の位置が、Google Chrome と Firefox では、中央の軸が左端になって表示されます。これに関しては、IE11 の、DIV の左端に表示されるのが正しいと思うのですが、そもそも CENTER 要素を使う事が間違っているのでなんとも言えません。( 本来は、ラッパーに対して margin:auto を指定して、ラッパーの親要素の幅に対して中央位置に配置する )

Google Chrome と Firefox



IE11


<center>
<div style='position:relative;width:400px;height:350px;border:solid 1px #ccc;'>
<img src="https://lh3.googleusercontent.com/-CWeNDTCMQRI/VF4sSgumWgI/AAAAAAAAXdQ/Ug4sBf9sB_I/s300/_img.png" style="position:absolute;border: solid 1px #000000">
</div>
</center>
▼ CENTER で表示
<div style='position:relative;width:400px;height:350px;border:solid 1px #ccc;margin:auto'>
<img src="https://lh3.googleusercontent.com/-CWeNDTCMQRI/VF4sSgumWgI/AAAAAAAAXdQ/Ug4sBf9sB_I/s300/_img.png" style="position:absolute;border: solid 1px #000000">
</div>

▼ margin:auto で表示
※ IE11 ではどちらも同じ表示になります


posted by lightbox at 2014-11-28 03:39 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2014年11月26日


さくらインターネットの CRON の設定で、標準エラー出力を postmaster に送らない

設定ページに、標準出力を postmaster に送らない設定についてはサーバーコントロールパネルの実行コマンド欄に書いてありますが、そのままでは 標準エラー出力には出力されてしまいます。よって以下のように指定します。
cd /home/winofsql/www/lightbox/mail ; /usr/local/bin/php mailtest.php 1> /dev/null 2>&1
1> /dev/null 2>&1 で、1が標準出力、2が標準エラー出力。2を1 の結果に出力する書き方です。( /dev/null は null デバイスと呼ばれるものです )

※ さくらインターネットの CRON では、スクリプトのあるディレクトリに移動してから、処理を実行するのが通常です( PHP 以外では必ずしもそうではありませんが、カレントディレクトリに対して書き込み権限等あるという前提で処理する事が多いのでそのほうが問題が起きないことになります )





関連するさくらインターネットの『よくある質問』

CRONや.mailfilterに記述したプログラムが動作しません。

CRONが動作しません。



posted by lightbox at 2014-11-26 16:19 | 記録 | このブログの読者になる | 更新情報をチェックする

jQuery.selection(プラグイン) : テキストエリア内のカーソル位置や選択範囲に対して文字列を追加したり置き換えたりする。

2014/11/26 : jQuery.selection(プラグイン) のバグ対応。現在、Google Chrome のみ、選択後テキストエリアの最後までスクロールされています。中身を見ると、結局 Firefox でしか必要の無い処理の影響でした。以下の部分が変更内容です。
        setPos: function(element, toRange, caret) {
            caret = this._caretMode(caret);

            if (caret === 'start') {
                toRange.end = toRange.start;
            } else if (caret === 'end') {
                toRange.start = toRange.end;
            }

            var userAgent = window.navigator.userAgent.toLowerCase();
            if (userAgent.indexOf("firefox") > -1) {
                element.focus();
            }
            try {
                if (element.createTextRange) {
                    var range = element.createTextRange();

                    if (win.navigator.userAgent.toLowerCase().indexOf("msie") >= 0) {
                        toRange.start = element.value.substr(0, toRange.start).replace(/\r/g, '').length;
                        toRange.end = element.value.substr(0, toRange.end).replace(/\r/g, '').length;
                    }

                    range.collapse(true);
                    range.moveStart('character', toRange.start);
                    range.moveEnd('character', toRange.end - toRange.start);

                    range.select();
                } else if (element.setSelectionRange) {
                    element.setSelectionRange(toRange.start, toRange.end);
                }
            } catch (e) {
                /* give up */
            }
        },



テキストエリアで使う事が最も便利で有効ですが、通常の1行の入力フィールドでもかまいません。

使用可能なメソッドは 5つ

1) getPos
2) setPos
3) insert
4) replace
5) get

get は、一応メソッドとしての名前ですが、1〜4 以外の文字列を指定すると全て get となります。getPos と setPos は、選択位置の情報の取得と反映です。

insert では、サブメソッドがあって、before か after を使用し、最後のカーソルモードとして、keep か start か end を選べます。

ページ全体で使用可能 selection メソッド

こちらは、text か html かで選択部分の情報を取得します
ここを選択して html 取り出しすると

▼ テキストエリア内限定 ▼ ページ全体に対しての処理

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/jquery/jquery.selection.js"></script>
<script type="text/javascript">

$(function(){

	$("#text")
		.css({
			float: "left",
			width: "400px",
			height: "200px"
		});

	$("#insert1")
		.attr("type", "button")
		.val("前へ挿入")
		.css({
			display: "block"
		})
		.click(function(){
			$("#text").selection("insert",{ text: "文字列", mode: "before", caret: "keep" })
		});

	$("#insert2")
		.attr("type", "button")
		.val("後へ挿入")
		.css({
			display: "block"
		})
		.click(function(){
			$("#text").selection("insert",{ text: "文字列", mode: "after", caret: "keep" })
		});

	$("#replace")
		.attr("type", "button")
		.val("置き換え")
		.css({
			display: "block"
		})
		.click(function(){
			$("#text").selection("replace",{ text: "文字列", caret: "keep" })
		});

	$("#get")
		.attr("type", "button")
		.val("取り出し")
		.css({
			display: "block"
		})
		.click(function(){
			alert( $("#text").selection("get") )
		});

	$("#get_text")
		.attr("type", "button")
		.val("選択部分の text 取り出し")
		.css({
			display: "block"
		})
		.click(function(){
			alert( $.selection("text") )
		});

	$("#get_html")
		.attr("type", "button")
		.val("選択部分の html 取り出し")
		.css({
			display: "block"
		})
		.click(function(){
			alert( $.selection("html") )
		});

});

</script>
<b>ここを選択して <span>html</span> 取り出しすると</b><br><br>

<textarea id="text">aaa
bbb
ccc</textarea>
▼ テキストエリア内限定
<input id="insert1">
<input id="insert2">
<input id="replace">
<input id="get">
▼ ページ全体に対しての処理
<input id="get_text">
<input id="get_html">



IE11 のエミューレートテストでは、IE8 を含むそれより前は、.attr("type", "button") が動作せず、jQuery も 1.11.0 以前である必要があります( IE8 には addEventListener が無いので )

関連する記事

ノーマル JavaScript と比較。jQuery でクリックしたテキスト( SPAN 要素 と INPUT またはテキストエリア ) を選択状態にする


posted by lightbox at 2014-11-26 15:25 | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする

2014年11月24日


jQuery UI の Accordion Widget(アコーディオン)で、タイトルとコンテンツの指定方法

タイトルとコンテンツ

指定方法は3種類ありますが、基本はアコーディオンを指定したブロックの子要素の偶数番号がタイトルになり、その直後の要素がコンテンツになります。
Content panels must be the sibling immediately after their associated headers.

コンテンツパネルは、ヘッダの直後の兄弟要素でなければなりません。
但し例外があって、子要素の中に LI 要素が並ぶ場合( 通常親要素は UL )は、LI 内の最初の子要素がタイトルになり、それに続く要素がコンテンツになります。( セレクタ : > li > :first-child ) もう一つ、header オプションでタイトルとする要素を指定する事ができます。これは、無条件に偶数をタイトルにすると、非表示要素が対象になってしまいます。そのような事を避ける為に header オプションがあります コンテンツはブロック要素で heightStyle というオプション( 規定値は auto )があり、fill、auto、content が指定できます。いずれも、正しく表示する為にコンテンツの高さが必要になってくるので、コンテンツ部分はブロック要素で指定します。 注意するのは、fill の場合で、アコーディオンを指定した親要素の高さいっぱいに広がるようになります。レイアウトが変化しては困る場合に親要素の指定は有用ですが、その為に親要素を正しくレイアウトする必要があります。 auto は、複数コンテンツがある場合、そのコンテンツの中で一番高さが大きいものにあわせられます。順に内容を読んで行くようなコンテンツに適しています。 content は、コンテンツ毎の高さで表示されるので、オプション表示等に向いています
  • 最初の要素が li の場合、li の child の最初の要素がタイトルとなります
    コンテンツは高さのコントロールがあるので、
    ブロック要素が望ましいようです
  • heightStyle が fill の場合は
    親要素の高さいっぱいに広がります
  • ヘッダは通常は偶数で、コンテンツは奇数です
    header オプションで要素を指定も可能です
  • ▲ いっぱいいっぱいまで使用しているので、親要素の bottom と重なっています
    active オプションで最初に開くコンテンツを指定できます
    この内容を localStorage に保存しておけば、次回に開く処理を実装できます
    heightStyle が auto の場合は
    コンテンツの中で
    一番大きな高さにあわせます
    このアコーディオンのヘッダは
    偶数要素が使われています
    ▼ ヘッダ部分の輪郭のスタイルが違うのは、このブログ内の H3 に対するスタイルです

    ヘッダを強制的に指定しています

    コンテンツはその次のみで、複数が続くと、2つ目以降は正しく表示されません

    heightStyle が content の場合は

    コンテンツのの
    高さにあわせます

    UI の基本スタイルを変更したい場合は

    新しいクラスを定義し、追加して上書きします
    
    
    
    ▼ ソースコードサンプル
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
    <script>
    $(function(){
    	$( ".wrap" ).css( { height: "250px", border: "solid 2px #000", "margin-bottom": "20px" } );
    	$( "#accordion1" ).accordion({
    		heightStyle: "fill"
    	});
    
    	$( "#accordion2" ).accordion({
    		heightStyle: "auto",
    		active: 1
    	});
    
    	$( "#accordion3" ).accordion({
    		heightStyle: "content",
    		header: "h3"
    	})
    	.addClass( "accordion3_style" );
    
    });
    </script>
    <style type="text/css">
    .accordion3_style {
    	font-size: 14px;
    	font-family: "メイリオ","MS ゴシック";
    }
    </style>
    <div class="wrap">
    <div id="accordion1">
    	<li><span>最初の要素が li の場合、li の child の最初の要素がタイトルとなります</span><div>コンテンツは高さのコントロールがあるので、<br>ブロック要素が望ましいようです</div></li>
    	<li><span>heightStyle が fill の場合は</span><div>親要素の高さいっぱいに広がります</div></li>
    	<li><span>ヘッダは通常は偶数で、コンテンツは奇数です</span><div>header オプションで要素を指定も可能です</div></li>
    </div>
    </div>
    
    <div class="wrap">
    <div id="accordion2">
    	<span>active オプションで最初に開くコンテンツを指定できます</span>
    	<div>この内容を localStorage に保存しておけば、次回に開く処理を実装できます</div>
    
    	<b>heightStyle が auto の場合は</b>
    	<div>コンテンツの中で<br>一番大きな高さにあわせます</div>
    
    	<div>このアコーディオンのヘッダは</div>
    	<div>偶数要素が使われています</div>
    </div>
    </div>
    
    <div class="wrap">
    <div id="accordion3">
    	<h3>ヘッダを強制的に指定しています</h3>
    	<div>コンテンツはその次のみで、複数が続くと、2つ目以降は正しく表示されません</div>
    
    	<h3>heightStyle が content の場合は</h3>
    	<div>コンテンツのの<br>高さにあわせます</div>
    
    	<h3>UI の基本スタイルを変更したい場合は</h3>
    	<div>新しいクラスを定義し、追加して上書きします</div>
    </div>
    </div>
    
    
    
    
    
    posted by lightbox at 2014-11-24 12:51 | jQuery UI | このブログの読者になる | 更新情報をチェックする

    2014年11月21日


    INPUT type="number" の振る舞いをブラウザ間で調整する jQuery プラグイン

    INPUT type="number" の振る舞いをブラウザ間で調整する でテストした結果を元に、jQuery のプラグインを作成しました。
    
    対応するに値するのは、Chrome と Firefox と IE11(10) だけです
    
    ブラウザは、Google Chrome と Firefox と IE だけです。さらに、Google Chrome のスピンボタンを非表示にする為に、INPUT 要素には id が必須となっています。その場合は、後から表示するような実装はしていません。IE の場合は、スピンボタンが最初から無いので、JQuery UI の spinner を使うようにしています。ただ、IE の入力チェックが type="number" に対して他のブラウザのように動作しないので、type="text" に変更した上で、pattern 属性でチェックさせている為、0〜9 の文字しか入らない実装になっています。
    
    ※ IE9 以前で、autoNumber.js を実装するようにしました。
    
    Opera と Safari for Windows をテストしました
    
    どちらも問題あるので、結局 IE9 以前と同じ対応になっています。
    ( Safari for Windows は Apple で長い間バージョンアップされていません )
    
    
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
    <script type="text/javascript">
    $.fn.extend({ 
    	type_number: function(option){
    
    		// オプションが省略された場合の対応
    		option = option || {};
    		// INPUT 要素のみ対象
    		if ( $(this).prop("tagName").toUpperCase() != 'INPUT' ) {
    			return;
    		}
    
    		var userAgent = window.navigator.userAgent.toLowerCase();
    		var appVersion = window.navigator.appVersion.toLowerCase();
    
    		if ( userAgent.indexOf("msie") > -1 ) {
    			if (appVersion.indexOf("msie 10.0") > -1) {
    				// 'on' と 'jquery', で spinner を使う, それ以外はスピンボタン無し
    				if ( option.spin == 'on' || option.spin == 'jquery' ) {
    					$(this).spinner(option);
    					$(this).attr( "type", "text" );
    					$(this).attr( "pattern", "^[0-9]+$" );
    				}
    				else {
    					$(this).attr( "type", "text" );
    					$(this).attr( "pattern", "^[0-9]+$" );
    				}
    			}
    			else {
    				// IE9 以前で autoNumeric で数値以外を入力不可にする
    				var el = this;
    				var s = document.createElement("script");
    				s.src="http://winofsql.jp/jquery/plugins/number/autoNumeric.js";
    				if(s.addEventListener) {
    					s.addEventListener("load",callback,false);
    				} 
    				else if(s.readyState) {
    					s.onreadystatechange = callback;
    				}
    				document.body.appendChild(s);
    				function callback() { 
    					$(el).autoNumeric('init', {aSep:'',mDec:'0'});
    				}
    				if ( option.spin == 'on' || option.spin == 'jquery' ) {
    					$(this).spinner(option);
    				}
    			}
    		}
    		else {
    			if ( userAgent.indexOf("trident/7.0") > -1 ) {
    				// ※ IE11
    				// 'on' と 'jquery', で spinner を使う, それ以外はスピンボタン無し
    				if ( option.spin == 'on' || option.spin == 'jquery' ) {
    					$(this).spinner(option);
    					$(this).attr( "type", "text" );
    					$(this).attr( "pattern", "^[0-9]+$" );
    				}
    				else {
    					$(this).attr( "type", "text" );
    					$(this).attr( "pattern", "^[0-9]+$" );
    				}
    
    			}
    			else if (userAgent.indexOf("firefox") > -1) {
    				// 標準スピンボタンは 'on', spinner を使う場合は 'jquery', それ以外はスピンボタン無し
    				if ( option.spin != 'on' ) {
    					// spinner を使う
    					if ( option.spin == 'jquery' ) {
    						$(this).each(function(){
    							if ( $(this).prop("type").toUpperCase() == 'NUMBER' ) {
    								$(this).css({ "-moz-appearance": "textfield" });
    								$(this).spinner(option);
    							}
    						});
    					}
    					else {
    						$(this).css({ "-moz-appearance": "textfield" });
    					}
    				}
    
    			}
    			else if (userAgent.indexOf("opera") > -1) {
    				// スピンボタンが表示されますが、消す方法が見つからないので
    				// IE と同じく jQuery で対応したほうがよさそうです。また、
    				// FORM の送信で数字以外の文字のチェックがされないので、
    				// 数字のみ入力させるプラグインをさらに実装する必要があります
    				// ※ autoNumeric.js は type="text" でのみ有効です
    				$(this).attr( "type", "text" );
    
    				var el = this;
    				var s = document.createElement("script");
    				s.src="http://winofsql.jp/jquery/plugins/number/autoNumeric.js";
    				if(s.addEventListener) {
    					s.addEventListener("load",callback,false);
    				} 
    				else if(s.readyState) {
    					s.onreadystatechange = callback;
    				}
    				document.body.appendChild(s);
    				function callback() { 
    					$(el).autoNumeric('init', {aSep:'',mDec:'0'});
    				}
    
    				if ( option.spin == 'on' || option.spin == 'jquery' ) {
    					$(this).spinner(option);
    				}
    			}
    			else if (userAgent.indexOf("chrome") > -1) {
    				// 標準スピンボタンは 'on', spinner を使う場合は 'jquery', それ以外はスピンボタン無し
    				if ( option.spin != 'on' ) {
    					// spinner を使う
    					if ( option.spin == 'jquery' ) {
    						$(this).each(function(){
    							if ( $(this).prop("type").toUpperCase() == 'NUMBER' ) {
    								$('head').append('<style>#'+$(this).attr('id')+'::-webkit-outer-spin-button,#'+$(this).attr('id')+'::-webkit-inner-spin-button{-webkit-appearance:none;}</style>');
    								$(this).spinner(option);
    							}
    						});
    					}
    					// スピンボタンを非表示にする為に、スタイル要素を追加
    					// ( id があるという前提と、後から表示に切り替える事は考えていない )
    					else {
    						$(this).each(function(){
    							if ( $(this).prop("type").toUpperCase() == 'NUMBER' ) {
    								$('head').append('<style>#'+$(this).attr('id')+'::-webkit-outer-spin-button,#'+$(this).attr('id')+'::-webkit-inner-spin-button{-webkit-appearance:none;}</style>');
    							}
    						});
    					}
    				}
    			}
    			else if (userAgent.indexOf("safari") > -1) {
    				// Google Chrome の劣化版でした。そもそも最近に
    				// バージョンアップされていない気がします。コード
    				// 自体は Google Chrome と同じで見た目は同様の
    				// 結果になりますが、FORM の送信で数字以外の文字
    				// のチェックがされないので、数字のみ入力させる
    				// プラグインをさらに実装する必要がありますが、
    				// autoNumeric.js は type="text" でのみ有効なの
    				// で、Opera と同じコードになります
    
    				$(this).attr( "type", "text" );
    
    				var el = this;
    				var s = document.createElement("script");
    				s.src="http://winofsql.jp/jquery/plugins/number/autoNumeric.js";
    				if(s.addEventListener) {
    					s.addEventListener("load",callback,false);
    				} 
    				else if(s.readyState) {
    					s.onreadystatechange = callback;
    				}
    				document.body.appendChild(s);
    				function callback() { 
    					$(el).autoNumeric('init', {aSep:'',mDec:'0'});
    				}
    
    				if ( option.spin == 'on' || option.spin == 'jquery' ) {
    					$(this).spinner(option);
    				}
    
    			}
    			else {
    			}
    		}
    
    	}
    });
    
    $(function(){
    	$("#num1").type_number( { spin: "off" } );
    	$("#num2").type_number( { spin: "on" } );
    	$("#num3").type_number( { spin: "jquery" } );
    });
    
    </script>
    
    <style type="text/css">
    * {
    	font-family: "メイリオ", Meiryo, "MS Pゴシック";
    	font-size: 16px;
    }
    
    </style>
    <form 
    	method="get" 
    	id="target_form" 
    	target="my_ferame" 
    	action="http://winofsql.jp/php_get.php" 
    	accept-charset="utf-8">
    <pre>
    <input 
    	id="send_check" 
    	class="num"
    	type="submit" 
    	name="send" 
    	value="送信">
    ▼ type="number" でスピンボタンなし
    <input
    	id="num1"
    	class="num"
    	type="number" 
    	name="num[]">
    
    ▼ type="number" でスピンボタンあり
    <input 
    	id="num2"
    	class="num" 
    	type="number" 
    	id="ie9" name="num[]">
    
    ▼ jQuery spinner
    <input 
    	id="num3"
    	class="num" 
    	type="number" 
    	id="ie9" name="num[]">
    </pre>
    </form>
    <iframe name="my_ferame" frameborder="1" scrolling="yes" width="400" height="200"></iframe>
    
    
    以下の3種類の実行でそれぞれの表現が変化します。( spinner へのオプションが必要な場合は、追加で設定します。
    
    $(function(){
    	$("#num1").type_number( { spin: "off" } );
    	$("#num2").type_number( { spin: "on" } );
    	$("#num3").type_number( { spin: "jquery" } );
    });
    
    
    
    
    
    posted by lightbox at 2014-11-21 11:33 | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする

    2014年11月20日


    INPUT type="number" の振る舞いをブラウザ間で調整する

    Google Chrome と Firefox ではスピンボタンが実装されていますが、IE では何もありません。この違いは、jQuery の spinner で吸収するのですが、IE のバージョンによって input[type=number] というセレクタが使え無いので、バージョン毎の対応が必要でした。
    
    さらに、IE で HTML5 による入力チェックが働くのは、IE10 以降なのですが、type="number" で 数字以外を入力すると、チェックされずに空文字列がサーバーに送られてしまいます。ですから、type="text" で pattern 属性で同様の対応をしています。
    
    また、逆にスピンボタンを必要としない場合は、Google Chrome と Firefox で非表示にする必要がありますが、その場合は CSS で、ブラウザ毎に対応します。
    
    Google Chrome : -webkit-appearance: none;
    Firefox : -moz-appearance: textfield;
    
    
    
    ▼ デモページの表示イメージ
    
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
    <script type="text/javascript">
    var userAgent = window.navigator.userAgent.toLowerCase();
    var appVersion = window.navigator.appVersion.toLowerCase();
    $(function(){
    
    	var target = null;
    
    	if ( userAgent.indexOf("msie") > -1 ) {
    		if (appVersion.indexOf("msie 10.0") > -1) {
    			target = $( "input[type=number].num_b" ).spinner()
    			target.attr( "type", "text" );
    			target.attr( "pattern", "^[0-9]+$" );
    			target = $( "input[type=number].num_a" )
    			target.attr( "type", "text" );
    			target.attr( "pattern", "^[0-9]+$" );
    			$("#title").text("今ブラウザは IE 10です");
    		}
    		else {
    			target = $( "#ie9" ).spinner()
    			$("#title").text("今ブラウザは IE 9 以前です");
    		}
    	}
    	else {
    		if ( userAgent.indexOf("trident/7.0") > -1 ) {
    			target = $( "input[type=number].num_b" ).spinner()
    			target.attr( "type", "text" );
    			target.attr( "pattern", "^[0-9]+$" );
    			target = $( "input[type=number].num_a" )
    			target.attr( "type", "text" );
    			target.attr( "pattern", "^[0-9]+$" );
    
    			$("#title").text("今ブラウザは IE 11です");
    		}
    		else if (userAgent.indexOf("firefox") > -1) {
    			$("#title").text("今ブラウザは Firefox です");
    		}
    		else if (userAgent.indexOf("opera") > -1) {
    			$("#title").text("今ブラウザは Opera です");
    		}
    		else if (userAgent.indexOf("chrome") > -1) {
    			$("#title").text("今ブラウザは Google Chrome です");
    		}
    		else if (userAgent.indexOf("safari") > -1) {
    			$("#title").text("今ブラウザは Safari です");
    		}
    		else {
    			$("#title").text("今ブラウザは 不明なブラウザ です");
    		}
    	}
    
    	if ( target != null ) {
    		target.css({"width":"300px" });
    	}
    
    });
    
    </script>
    
    <style type="text/css">
    input[type="number"].num_a::-webkit-outer-spin-button, 
    input[type="number"].num_a::-webkit-inner-spin-button {
    	-webkit-appearance: none;
    }
    
    input[type=number].num_a {
    	-moz-appearance: textfield;
    }
    
    * {
    	font-family: "メイリオ", Meiryo, "MS Pゴシック";
    	font-size: 16px;
    }
    
    </style>
    <h3 id="title" style='margin-bottom:-10px;'></h3>
    <form 
    	method="get" 
    	id="target_form" 
    	target="my_ferame" 
    	action="http://winofsql.jp/php_get.php" 
    	accept-charset="utf-8">
    <pre>
    <input 
    	type="submit" 
    	name="send" 
    	id="send_check" 
    	value="送信">
    ▼ type="number" でスピンボタンなし
    <input
    	class="num_a"
    	type="number" 
    	name="num[]">
    
    ▼ type="number" でスピンボタンあり
    <input 
    	class="num_b" 
    	type="number" 
    	id="ie9" name="num[]">
    </pre>
    </form>
    <iframe name="my_ferame" frameborder="1" scrolling="yes" width="400" height="200"></iframe>
    
    
    関連する記事
    
    INPUT type="number" の振る舞いをブラウザ間で調整する jQuery プラグイン
    
    参考
    
    Styling new Chrome number input (spin box) - Stack Overflow
    
    ※ 参考ページでは、スピンボタンのカスタマイズについて書かれています(自前のスピンボタンの使用)
    
    
    
    posted by lightbox at 2014-11-20 16:21 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

    2014年11月19日


    JavaScript : ブックマークレット雛型を使ったサンプル( そのページを1回転させる )

    
    ページを1回転させる
    
    
    jQuery を使っているので、ブックマークレットが呼び出す外部 JavaScript のソース内で jQuery を組み込んでいますが、既に組み込まれている場合は jQuery で回転させるだけです。 
    
    IE は IE9 以上で回転します
    
    if (!window.lightbox_f) {
    	(function() {
    		window.lightbox_f = 
    		{
    			// プロパティ
    			version: 1.01
    			,
    			// メソッド
    			init : function( ) {
    				/* ここに処理を書きます */
    				if ( !window.jQuery ) {
    					s = document.createElement("script");
    					s.src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js";
    					if(s.addEventListener) {
    						s.addEventListener("load",callback,false);
    					} 
    					else if(s.readyState) {
    						s.onreadystatechange = callback;
    					}
    					document.body.appendChild(s);
    				}
    				else {
    					callback();
    				}
    				function callback() { 
    					$({kakudo: 0}).animate(
    						{kakudo: 360},
    						{
    							duration: 3000,
    							easing: "swing",
    							step: function(now) {
    								$(parent.document.body).css({
    									transform: 'rotate(' + now + 'deg)'
    								});
    							}
    						}
    					);
    				}
    			}
    		};
    	})();
    }
    
    
    関連する Microsoft ドキュメント
    
    script 要素とイベントの実行
    
    
    
    posted by lightbox at 2014-11-19 17:50 | ブックマークレット | このブログの読者になる | 更新情報をチェックする

    2014年11月17日


    ページ内で IFRAME を使ってオプションウインドウを開く場合は、開いた時だけ URL をロードするようにします

    処理はいたって簡単ですが、IFRAME を使う場合最初から src 属性で設定してしまうと、ページを表示する時に非表示であってもロードされるので、そのオプションを使用しない場合は無駄になってしまうので、このようにしておくと、後からいくつオプションウインドウを追加してもいい環境になります。
    
    IFRAME は、オプション毎に一つ一つ作成しておきます。使いまわしすると、結局無駄なアクセスが発生してしまいます。オプション毎に IFRAME を用意しておくと、二度目以降は高速に表示可能です。
    
    if ( $("#iframe_target")[0].src+'' == '' ) {
    
    このような、判断方法を取っているのは、IE の古いバージョンで以下が動作しない為です
    if ( typeof( $("#iframe_target").attr("src") ) == 'undefined' ) {
    
    +'' == '' としていますが、直接 == '' で良いとは重うのですが、いろいろなプラットホームではこのようにしておいたほうが経験上安全だと感じているからです。



    <script type="text/javascript">
    if ( !window.jQuery ) {
    	document.write("<"+"script type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js\"></"+"script>");
    }
    </script>
    <script type="text/javascript">
    $(function(){
    
    	$("#my_button").click(function(){
    		if ( $("#iframe_target")[0].src+'' == '' ) {
    			$("#iframe_target")
    				.attr("src", "http://winofsql.jp/2ktai_mail2.php" )
    				.css( "display", "" )
    			;
    		}
    		else {
    			$("#iframe_target")
    				.css( "display", "" )
    			;
    		}
    	});
    
    	$("#my_button_close").click(function(){
    		$("#iframe_target")
    			.css( "display", "none" )
    		;
    	});
    });
    </script>
    <input type="button" id="my_button" value="表示する"> <input type="button" id="my_button_close" value="閉じる"><br>
    <iframe
    	id="iframe_target"
    	name="myframe"
    	frameborder="0"
    	scrolling="no"
    	width="300"
    	height="175"
    	style="display:none;"
    ></iframe>
    
    
    
    
    
    
    posted by lightbox at 2014-11-17 21:37 | jQuery | このブログの読者になる | 更新情報をチェックする

    IE のポップアップブロックの設定を最強にすると、_blank のリンクは CTRLとALT キーを押しながらクリックする必要があります

    
    
    
    
    Microsoft のその手のドキュメントをいろいろ読んでいると、気になったので試してみたのですが、制限を解除した事はあっても、逆に強化した事は無かったので少しびっくりしました。
    
    既定の設定では、Web サイト上のリンクやボタンをクリックしたときに開くポップアップはブロックされません
    
    結局画像のように設定すると、以下のような表示が出てウインドウを開くただのリンクは動作しません。
    
    
    ( ※ ▲クリックすると大きく表示します )
    
    Windows XP のころは全くなにも反応が無かった覚えがありますが、今はこういうメッセージがブラウザ下部に表示されます。Windows XP のころは、CTRL キーを押しながらクリックすると動作していました。今でも CTRL キーで動作はするのですが、フォーカスがそのタブへ移動しないので、 CTRL+ALT キーを押しながらクリックする事になっているようです。( CTRLキーを押しながらの動作は通常時でも使用でき、SHIFTキーを押しながらですと、ウインドウを新たに開きます )
    
    IE のセキュリティ設定は、解除できますが解りにくい表現をしている事が多く、バージョンによってコロコロ仕様が変わった来たという経緯もあり、結構わけがわかりません。以下のリンク先のような表がある事自体それを裏付けています。
    
    バージョン別セキュリティ既定値一覧表
    
    
    
    頭がクラクラしそうになる、大量の表です。作った人はさぞ大変だだろうと思われます。
    
    PDF で見たほうがバージョンが綺麗に横に全部並んでいます
    
    
    
    
    
    
    
    
    posted by lightbox at 2014-11-17 19:13 | IE | このブログの読者になる | 更新情報をチェックする

    2014年11月14日


    Windows で、MySQL を使っているので phpMyAdmin で参照しようとして、AN HTTPD だと setup が動かなかったので Apache を入れようとしたらいろいろルールがあったお話

    
    
    重要な手順部分は、NAVER にまとめました。
    
    そもそも、USB でもサーバ移動できる AN HTTPD を授業で使用しており、卒業進級制作の課題内容を WEB と ローカルで同じ環境を作るよう指示した手前、自分でテストしていて起きた内容のまとめです。
    ( ちなみに、AN HTTPD は管理者権限で起動する必要があります )
    
    phpMyAdmin
    
    インストーラとか特にありません。定義ファイルは実運用で必要ですが、すぐテストしたいだけなら全てデフォルトで動作します。DB のユーザとパスワードでログインして操作可能です。
    
    ですが、setup フォルダがあるので気になって使ってみると、config.inc.php という定義ファイルを作成する為のもので、サーバを何通りも追加して定義ファイルをダウンロードしたり表示したりできるツールでした。
    さらに、config フォルダを作成して、そこに書き込み権限を与えると作成されますが、本体を実行する際にその confog フォルダが残っていると、早く消せと警告されます。つまり、あまり推奨するようなものでもなさそうです。
    
    config.sample.inc.php をコピーして十分使えます。特に、保存領域の機能を追加するにしても、examples の中にある create_tables.sql を実行した後、/* Storage database and tables */ に関する設定のコメントを外すと、DB のテーブル内に表示しておきたいデータベースの一覧を保存できるようになり、運用が楽になります。
    
    setup は、実際問題、あまり役には立ちそうに無かったのですが、AN HTTPD で動作しなかったので、Apache のテストをする事になってしまいました
    
    Apache Lounge
    
    さくらインターネットのレンタルサーバで動いたので、AN HTTPD のせいだと思い、Windows に Apache をインストールしようと思ったのですが、この時 Apache の配布に二種類ある事に気がつきませんでした。
    
    Apache
    Please use the Apache builds provided by Apache Lounge. They also provide VC11 builds of Apache for x86 and x64. We use their binaries to build the Apache SAPIs.
    
    If you are using PHP with Apache 1 or Apache2 from apache.org (not recommended) 
    
    PHP の Windows バイナリを配布するところにこのように書かれているのですが、最初 apache.org からダウンロードしてしまって、インストーラでインンストールした後、Apache から PHP を使うという所で止まってしまい、Apache Lounge の存在に気がつきました。 Apache Lounge は、完全な実行環境が書庫化されており、bin ディレクトリの httpd.exe をコマンドプロンプトから実行するだけで開始されます。サービスに登録したい場合は、httpd.exe -k install を実行するようにと、ReadMe.txt に書かれていました。
    Install
    -------
    
    
    - Unzip the Apache24 folder to c:/Apache24 (that is the ServerRoot in the config).
      Default folder for your your webpages is DocumentRoot "c:/Apache24/htdocs"
    
      When you unzip to an other location, change ServerRoot in the httpd.conf,
      and change in httpd.conf the Documenroot, Directories, ScriptAlias,
      also when you use the extra folder config file(s) change to your location there. 
    
    Start apache in a DOS box:
    
    >httpd.exe
    
    Install as a service:
    
    >httpd.exe -k install
    
    ApacheMonitor:
    
    Double click ApacheMonitor.exe, or put it in your Startup folder.
    
    スレッドセーフ
    
    AN HTTPD では、ノンスレッドセーフを使用しています。つまり、既存の PHP 内に Apache 用の dll は入っていません。なので PHP を新たにダウンロードして、Apache のバージョンとも一致させる事になりました。
    
    最新では、php5apache2_4.dll が入っていたので、Apache は 2.4 が必要です。ここで注意するのは、古いバージョンでなんとかしようとする場合は、対応する Apache の dll を Apache Lounge からダウンロードする事が必要な場合があります。Apache Lounge では、VC9 に関していくつか PHP のバージョンにあわせて配布されています。また、VC11 用のランタイム無いと動かないので、ランタイムを現在のものを使用したい場合は、同様のバージョンあわせとダウンロードが必要になります。
    
    MSVCR110.dll
    
    最新は、VC11 でビルドされているので、ランタイムをインストールしても良いという場合は、以下からダウンロードできます。
    
    Visual Studio 2012 更新プログラム 4 の Visual C++ 再頒布可能パッケージ
    
    でも、Microsoft の余計なインストールはできれば避けたいので、VC9 でなんとかしたい人も多いと思います
    
    
    ※ phpMyAdmin の setup は、結局 Windows の Apache で動作しました。
    
    
    
    posted by lightbox at 2014-11-14 21:10 | PHP | このブログの読者になる | 更新情報をチェックする
    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 終わり