SQLの窓

2017年03月13日


jQuery UI の Datepicker Widget のオプション


デモページ

デモページでは、いろいろなオプションを設定した Datepicker のフィールドの動きを確認できます。これらのフィールドは、デフォルトのオプションとして以下のようなものを設定済みです。
var datepicker_option = {
	dateFormat: 'yy/mm/dd',
	dayNamesMin: ['日', '月', '火', '水', '木', '金', '土'],
	monthNames:  ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
	showMonthAfterYear: true,
	yearSuffix: '年',
	changeYear: true,
	showAnim: 'fadeIn',
	yearRange: "c-70:c"
}

このオプションは、日本語としてカレンダーを利用する為に最低限必要なものです。


※ ▼ コンボボックスの幅を以下で最適化しています
.ui-datepicker-month, .ui-datepicker-year {
	width: 70px!important;
}
yearRange: "c-70:c" のオプションは、c が現在の年を示す相対範囲指定です。デモページでは、2) cは当年 c-3:c+3 にあたります。そして、1) dateRangeなし は、そのオプションを削除したもので、その場合は "c-10:c+10" を指定したのと同じ事になります。 ▼ "c-3:c+3" ▼ jQuery を使用して、JSON オブジェクトのクローンを作成
	var datepicker_option1 = $.extend(true, {}, datepicker_option);
	delete datepicker_option1.yearRange;

	$("#date_picker1_fld").datepicker( datepicker_option1 );
※ デモで複数のオプション作成の為、$.extend を使用しています

altField, altFormat, appentText, autoSize

altField と altFormat は、alternate(代わりの) フィールドの定義です。altField で右横にあるフィールドを id で参照します。altFormat では、そのフィールドで表示するフォーマットを指定します(ここでは日本語を使用しています。)

さらに、appentText で、DatePicker フィールドの後ろにテキストを追加し、autoSize で jQuery UI にDatePicker フィールドの幅を調整させます。
	var datepicker_option3 = $.extend(true, {}, datepicker_option);
	datepicker_option3.altField  = "#date_picker3_fld_alt";
	datepicker_option3.altFormat  = "yy年mm月dd日";
	datepicker_option3.appendText  = " altFormat で日本語表現 ";
	datepicker_option3.autoSize = true;

	$("#date_picker3_fld").datepicker( datepicker_option3 );

※ 二番目のフィールドは固定で 120px を指定しており、3番目のフィールドが autoSize です。

ボタンでカレンダーを表示させる

通常では、フィールドにカーソルが移動するとカレンダーが表示されますが、それでは他の画面部分が隠されてしまって、エンドユーザが操作しづらい場合があります。そういう場合にボタンを追加してその操作を行う方法です。ここでは、その目的のために showOn = "button" と buttonText = "開く" を指定しています。(showOn では、both というオプションがありますが、それでは意味が無いので button のみの動作、また、buttonText では無く buttonImage で画像ボタンにする事もできます)

月を変更可

★重要 : 表示したい月表現を monthNamesShort = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"] のように設定する必要がありました

誕生日の指定等、連続していない年月の指定の為、月をコンボボックスに変更します。



※ ▼ コンボボックスの幅を以下で最適化しています
.ui-datepicker-month, .ui-datepicker-year {
	width: 70px!important;
}
※ 月を変更可にした場合、これをしておかないと、年と月が入りきらずに二段になってしまいます。 前後の月を表示して選択可能にする これは、現実のカレンダーのように、表示できる場合は前月の最後と次月の最初を表示して選択できるようにするものです。そのために showOtherMonths = true と selectOtherMonths = true を両方設定しています。 jQuery.ajax による送信処理
	// *************************************
	// 送信 <input type="submit">
	// *************************************
	$("#frm").submit( function(event){
		// 本来の送信処理はキャンセル
		event.preventDefault();

		// 入力部分をプロテクト
		$("fieldset").eq(0).prop("disabled", true);

		// エラーメッセージエリアをクリア
		$(".error").next().text( "" );

		// 結果の表示エリアを全てクリア
		$("#result").html( "" );


		// 新規送信用オブジェクト
		var formData = new FormData();

		formData.append("datepicker1", $("#date_picker1_fld").val() );
		formData.append("datepicker2", $("#date_picker2_fld").val() );
		formData.append("datepicker3", $("#date_picker3_fld").val() );
		formData.append("datepicker3_alt", $("#date_picker3_fld_alt").val() );
		formData.append("datepicker4", $("#date_picker4_fld").val() );
		formData.append("datepicker5", $("#date_picker5_fld").val() );
		formData.append("datepicker6", $("#date_picker6_fld").val() );

		// **************************************
		// サーバ呼び出し
		// **************************************
		$.ajax({
			url: "./post_action.php",
			type: "POST",
			data: formData,
			processData: false,  // jQuery がデータを処理しないよう指定
			contentType: false   // jQuery が contentType を設定しないよう指定
		})
		.done(function( data, textStatus ){
			console.log( "status:" + textStatus );
			console.log( "data:" + JSON.stringify(data, null, "    ") );
			options.info("送信処理が完了しました");

		})
		.fail(function(jqXHR, textStatus, errorThrown ){
			console.log( "status:" + textStatus );
			console.log( "errorThrown:" + errorThrown );
			options.info("送信処理を失敗しました");
		})
		.always(function() {

			// 入力部分のプロテクトを解除
			$("fieldset").eq(0).prop("disabled", false);
		})
		;


	} );



タグ:datepicker jquery
posted by lightbox at 2017-03-13 14:27 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする

2017年03月10日


FormData を使用して、jQuery で配列として PHP に送る

必要なデータを隠しリストボックス( multiple ) に jQuery で追加して配列として PHP に送る では、select 要素を使用しましたが、jQuery の ajax と FormData を使用すれば、もっと単純に送る事ができます。

送信用データ作成部分は結局4行です
		// 新規送信用オブジェクト
		var formData = new FormData();

		// 送信フィールド作成
		$("#row1_fld option").each( function(){
			formData.append("ybp[]", $(this).val());
		});

		// **************************************
		// サーバ呼び出し
		// **************************************
		$.ajax({
			url: "./post_action.php",
			type: "POST",
			data: formData,
			processData: false,
			contentType: false
		})
		.done(function( data, textStatus ){
			console.log( "status:" + textStatus );
			console.log( "data:" + JSON.stringify(data, null, "    ") );
			options.info("処理が完了しました");

		})
		.fail(function(jqXHR, textStatus, errorThrown ){
			console.log( "status:" + textStatus );
			console.log( "errorThrown:" + errorThrown );
			options.info("アップロードに失敗しました");
		})
		.always(function() {

		})
		;


デモページ



ソースコードセットダウンロード

メインソースコード(view_main.php)
<?php
// *************************************
// 表示コントロール
// *************************************
$GLOBALS['title'] = "jQuery Ajax POST : 配列";
$GLOBALS['comment'] = 'ようこそ jQuery + Bootstrap(css) + mmenu + FormData + PHP';

?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">
<title><?= $GLOBALS['title'] ?></title>

<?php require_once('std/libs.php') ?>

<link rel="stylesheet" href="std/mmenu.css">
<link rel="stylesheet" href="std/basic.css">

<style>
/* タイトル部分 */
.fields {
	width: 90px;
	font-size: 12px;
	/* vertical-align: middle!important; */
}

legend {
	font-size: 18px;
	padding-left: 6px;
}

</style>

<script>
<?php require_once('std/js.php') ?>
// -------------------------------------
// 画面とメッセージ
// -------------------------------------
var options = {
	row1 : { title : "複数データ<br>(Yahoo!テレビ番組表地域コード)", pcss : { width: "400px" }, attr: { size : 6 } },
	row_last : { title :"メッセージ" },
	error : function(message){
		$("#row_last").next().text( message );
		toastr.error(message);
	},
	info : function(message){
		$("#row_last").next().text( message );
		toastr.success(message);
	}
};

$(function(){

	$("#wrapper").css({"visibility":"visible", "margin-bottom": "0px"}); 
	// -------------------------------------
	// 固定テンプレート
	// -------------------------------------
	// 1) options による行とフィールドの設定
	// 2) Bootstrap 用 form-control クラスの追加
	$(".fields").each(function(){
		if ( options[ $(this).prop("id") ] ) {
			$(this).html( options[ $(this).prop("id") ].title );
			// 個別 css
			if ( options[ $(this).prop("id") ].css ) {
				$(this).next().find("input,select,textarea").css( options[ $(this).prop("id") ].css );
			}
			// 入力チェック用属性
			if ( options[ $(this).prop("id") ].attr ) {
				$(this).next().find("input,select,textarea").attr( options[ $(this).prop("id") ].attr );
			}
			// pc のみの css
			if ( options[ $(this).prop("id") ].pcss ) {
				if ( !$.isMobile ) {
					$(this).next().find("input,select,textarea").css( options[ $(this).prop("id") ].pcss );
				}
			}

		}
		$(this).next().find("input,select,textarea").addClass("form-control");
	});

	// 初期フォーカス
	setTimeout( function(){$('#row1_fld').focus();}, 100 );
	// -------------------------------------

	// *************************************
	// 送信ボタン
	// *************************************
	$("#frm").submit( function(event){
		// 本来の送信処理はキャンセル
		event.preventDefault();

		$("#post_check").modal();

	} );


	// **************************************
	// Bootstrap OK ボタン
	// **************************************
	$("#data_post").on("click", function(){

		// エラーメッセージエリアをクリア
		$(".error").next().text( "" );

		// 結果の表示エリアを全てクリア
		$("#result").html( "" );

		// **************************************
		// サーバへ送信
		// **************************************

		// 新規送信用オブジェクト
		var formData = new FormData();

		// 送信フィールド作成
		$("#row1_fld option").each( function(){
			formData.append("ybp[]", $(this).val());
		});

		// **************************************
		// サーバ呼び出し
		// **************************************
		$.ajax({
			url: "./post_action.php",
			type: "POST",
			data: formData,
			processData: false,
			contentType: false
		})
		.done(function( data, textStatus ){
			console.log( "status:" + textStatus );
			console.log( "data:" + JSON.stringify(data, null, "    ") );
			options.info("処理が完了しました");

		})
		.fail(function(jqXHR, textStatus, errorThrown ){
			console.log( "status:" + textStatus );
			console.log( "errorThrown:" + errorThrown );
			options.info("アップロードに失敗しました");
		})
		.always(function() {

		})
		;

	});

	// -------------------------------------
	// 固定テンプレート
	// -------------------------------------
	$("#mmenu_left").mmenu({
		navbar: {
			title: "メニュー"
		},
		offCanvas: {
			position  : "left",
			zposition : "next"
		}
	});
	// -------------------------------------


});

</script>
</head>
<body>

<div id="wrapper">
<script>
$("#wrapper").css( {"visibility": "hidden", "margin-bottom" : "1000px" } );
</script>

	<div id="head">
		<?php require_once('std/view_hamburger.php') ?>
		<div id="title"><?= $GLOBALS['title'] ?></div>
	</div>

	<div id="body">
		<form id="frm" class="form-inline">

			<fieldset>
				<legend></legend>
				<table class="table table-condensed">
			
					<tr>
						<td class="fields" id="row1"></td>
						<td>
							<select name="row1_fld" id="row1_fld">
								<option value="43">和歌山</option>
								<option value="44">奈良</option>
								<option value="45">滋賀</option>
								<option value="41">京都</option>
								<option value="40">大阪</option>
								<option value="42">兵庫</option>
							</select>
						</td>
					</tr>

					<tr>
						<td class="fields" id="row2"></td>
						<td>
							<input id="action" type="submit" class="btn btn-primary btn-sm" value="送信">
						</td>
					</tr>

					<tr>
						<td class="fields error" id="row_last"></td>
						<td></td>
					</tr>

				</table>

			</fieldset>

			<fieldset>
				<legend>結果</legend>
				<table id="result" class="table table-condensed">


				</table>

			</fieldset>

		</form>
	</div>

	<div id="comment">
	<?= $GLOBALS['comment'] ?>
	</div>

	<div class="modal fade" id="post_check" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">

				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel">確認</h4>
				</div>

				<div class="modal-body">
				送信しますか?
				</div>

				<div class="modal-footer">
					<button id="data_post" type="button" class="btn btn-default" data-dismiss="modal">OK</button>
					<button type="button" class="btn btn-primary" data-dismiss="modal">キャンセル</button>
				</div>

			</div>
		</div>
	</div>

</div>


<?php require_once('unit_menu.php') ?>


</body>
</html>

※ jQuery + Bootstrap(css) + mmenu + FormData + PHP の総合テンプレートです


post_action.php
<?php
// *************************************
// キャラクタセット
// *************************************
header( "Content-Type: application/json; charset=utf-8" );
// *************************************
// キャッシュ無効
// *************************************
session_cache_limiter('nocache');
session_start();


// *************************************
// 処理
// *************************************


// *************************************
// PHP の結果を result キーで
// JSON としてブラウザに返す
// *************************************
print json_encode($_POST , JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT );

?>

※ 処理の結果は、開発者ツールのコンソールで確認して下さい。








posted by lightbox at 2017-03-10 23:04 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする

2017年03月09日


必要なデータを隠しリストボックス( multiple ) に jQuery で追加して配列として PHP に送る

送信直前に onsubmit="return check_form();" で追加して、PHP がページを再表示したら元の状態に戻るというデータの送信方法です。

jQuery は、最初に option 要素を作って、その属性を設定して最後に appendTo で select に追加して行きます。PHP 対象なので、name="target[]" となっていますが、ASP(いまだに運用してるので) だと name="target" で Request.Form("target")(n) とかで参照できます。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>

function check_form() {

	if ( !confirm("送信しますか?") ) {

		return false;

	}

	$("#target option").each( function(){

		$("<option></option>")
			.prop("selected", true)
			.val( $(this).val() )
			.appendTo( $("#send_target") )

	});

	return true;

}
</script>
</head>
<body>

<form method="post" onsubmit="return check_form();">

<input id="send" name="send" type="submit" value="send">

<select multiple id="send_target" name="target[]" style='display:none'>
</select>
<select id="target" size="3">
<option value="A001">テキスト1</option>
<option value="A002">テキスト2</option>
<option value="B001">テキスト3</option>
</select>


</form>

<pre>
<?php

print_r($_POST)

?>
</pre>
</body>
</html>




posted by lightbox at 2017-03-09 21:00 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする

2016年12月17日


Android Studio の追加日本語化用に、キャラクタセットに依存しないコード文字列を作成するツールを作成しました

PHP で作ると大げさなので、jQuery で作成しました。元に戻したい時はデベロッパーツールで console.log すればいいと思います。ソースコードは、記事の最後にあります。ここでは、サンプルとして表示する為に、テキストエリアのサイズを小さくしているので、実際に使う場合はこちらからどうぞ。

Android Studio の日本語化は、『ANDROID STUDIO 2.0 を日本語化してみた』 で入手できるもので十分ですが、自分用に表現方法を変えたい場合は、こういう文字列が必要になります。


▼ 結果の文字列( クリックすると選択します )


▼ テスト用文字列( クリックすると選択します / デベロッパーツールのコンソールで実行用 )




ソースコード
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){

	var text;

	$("#convert").on( "click", function(){
		text = "";
		var base = $("#text").val();
		var charCode = 0;
		for( i=0; i < base.length; i++ ) {
			charCode = base.charCodeAt(i);
			if ( charCode < 0x7f ) {
				text += base.charAt(i);
			}
			else {
				text += "\\u" + ( '0000' + base.charCodeAt(i).toString(16) ).slice( -4 );
			}
		}
		$("#result").val( text );

		$("#test_string").val("console.log('" + text + "')");
	});

//	$("#check").on( "click", function(){
//		eval("var x = \"" + $("#result").val() +"\"");
//		alert( x );
//	});

});
</script>
<pre>
<input id="convert" type="button" value="日本語を文字列内用コードに変換">
<textarea id="text" style='width:90%;height:100px;margin-top:5px;font-size:16px;'>abc 日本語を文字列内用コードに変換 123</textarea>
▼ 結果の文字列( クリックすると選択します )
<textarea id="result" style='width:90%;height:200px;font-size:16px;' onclick='this.select()'></textarea>
<!--input id="check" type="button" value="alert で表示"-->
▼ テスト用文字列( クリックすると選択します / デベロッパーツールのコンソールで実行用 )
<textarea id="test_string" style='width:90%;height:200px;font-size:16px;' onclick='this.select()'></textarea>




</pre>
その場で結果を見るコードとして、コメント内で eval を使った部分があります。ですが、一般的にはデベロッパーツールで確認するのがいいでしょう。

\unnnn (nは数字) というフォーマットでないと文字列としてエラーになるので eval が必要でした。




posted by lightbox at 2016-12-17 16:24 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする

2016年11月17日


画像ファイルが存在した時のみ、表示する jQuery の記述

ローカルにある画像ファイルで、PHP ならば file_exists で簡単ですが、ブラウザから画像の存在チェックするにはどうするか・・・と考えてできた結論です。

php で画像を返して、image 要素の src で使い、存在しない場合は透明の小さな png を表示するのも、スッキリしていいかなと思いましたが、取り急ぎ JavaScript だけで解決する方法です。

テストすると、画像ファイルがある時だけ onload イベントが発生したので、jQuery で全て書くために、数珠繋ぎをループするという形態になっています。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
.target {
	border: solid 1px #000;
	padding: 15px;
}
</style>

<table>
<tr> <td class="target"></td> </tr>
<tr> <td class="target"></td> </tr>
<tr> <td class="target"></td> </tr>
<tr> <td class="target"></td> </tr>
</table>

<script>

var img = [
"https://lightbox.sakura.ne.jp/toolbox/image/__.png", 
"https://lightbox.sakura.ne.jp/toolbox/image/script.png", 
"https://lightbox.sakura.ne.jp/toolbox/image/jquery.png", 
"https://lightbox.sakura.ne.jp/toolbox/image/__.png", 
];

$(".target").each(function( idx ){

	$("<img>").data("container", $(this) ).on("load",function(){

		$(this).data("container").append( this );

	}).prop("src",img[idx]);

});

</script>



$("<img>") が createElement にあたります。jQuery では値取得以外は自分自身が返るので、そのまま自身に設置する場所のコンテナを data で登録し、そのまま on で load イベントを登録します。その後、src に url を設定すれば、onload イベントに入り、data でコンテナを取り出して、そこへ自身を追加します。

この処理をコンテナぶん each でループしています。


posted by lightbox at 2016-11-17 22:11 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする

2016年09月30日


jQuery で mobile(スマホ) かどうかのチェックをしたくて調べたら、Stack Overflow の記事でいろんな方法が答えられていました。

What is the best way to detect a mobile device in jQuery?

結局 jQuery に特化した回答は無く、但し何通りもの回答がたくさんよせられていました。その中でもよさげなのが 3つほどありますのでご紹介します。

userAgent を使ったとてもシンプルなもの
jQuery.isMobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
jQuery で $ で使いたいので、左辺を jQuery にしてあります。とても簡単ですが、ちょっと拡張性が低く、メンテナンスはしづらいパターンです。

userAgent を使った拡張性の高いもの

これはとても応用が利き、最も読みやすくて理解しやすくてメンテナンスが楽なものです。

Detecting Mobile Devices with JavaScript
( このリンク先のものを少し改造しています )
<script>
jQuery.isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i) == null ? false : true;
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i) == null ? false : true;
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i) == null ? false : true;
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i) == null ? false : true;
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i) == null ? false : true;
    },
    any: function() {
        return (jQuery.isMobile.Android() || jQuery.isMobile.BlackBerry() || jQuery.isMobile.iOS() || jQuery.isMobile.Opera() || jQuery.isMobile.Windows());
    }
};

console.log($.isMobile.any())
</script>

CSS レスポンシブに同期するもの

個別にデバイス一覧をメンテするよりも、元々の画面の状況でチェックするようになっています。CSS を使うので、判定用の BR 要素を一つ画面の最終に置くという前提でのサンプルです。
<style>
@media screen and (max-width:479px) {
  #lastbr { display: none; }
}
</style>

<script>
$( function() {      
    jQuery.isMobile = false;
    if( $('#lastbr').css('display')=='none') {
        jQuery.isMobile = true;       
    }


 });

</script>


<br id="lastbr">

PHP 側で判定したものを使う

あと、PHP のライブラリで判定したものを埋め込むという手も、開発環境によっては一番有効であろうと思われるものもあります。
<script>
//set defaults
var device_type = 'desktop';
</script>

<?php
require_once( 'Mobile_Detect.php');
$detect = new Mobile_Detect();
?>

<script>
device_type="<?php echo ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'mobile') : 'desktop'); ?>";
alert( device_type);
</script>

userAgent を使うと、Chrome でテストしやすい

厳密に判定してしまうと、その環境でしかテストできなくなるので、あまりお勧めではありません。例で言うと、スマホデバイスでしか判定できないタッチイベントの有無で判定しているものもありました。
function isMobile() {
  try{ document.createEvent("TouchEvent"); return true; }
  catch(e){ return false; }
}

それに、これだと将来的には常に true になってしまう可能性があります。



posted by lightbox at 2016-09-30 13:24 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする

2016年09月09日


jQuery と FileReader オブジェクトによる、ローカルの複数画像ファイルのプレビュー表示

INPUT 要素の type="file" 属性に加えて multiple 属性を追加する事によって、ローカルのファイルを複数選択が可能になります。

ここでは、画像表示を前提としていますが、ファイルの種類を accept 属性によって指定が可能です。指定方法もいろいろあるので、コンボボックスで選択可能にしました。
(ファイルを選択するダイアログで、accept 属性に指定したファイルグループが作成されて選択された状態になります)

ファイル選択後の処理の流れ

ファイルを選択後、INPUT 要素のオブジェクトの files プロパティに複数のファイルの情報がセットされるので、その配列に対して for ループ処理を作成します。

一回のループ毎に FileReader オブジェクトを作成して、それに対するイベントを登録します。そして、その FileReader オブジェクトに readAsDataURL で、INPUT 要素が保持する各ファイルの blob オブジェクトをセットします。

そうすると、イベントが実行されて、jQuery の appendTo メソッドによって、それぞれの画像用の img 要素が作成されて行きます。

イベント内でオリジナルファイル名を参照する

FileReader オブジェクトに name プロパティとして this.files[i].name をセットしておくと、後から this で参照が可能になります( ここでは title 属性にセットしました )

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function(){
	$("#myfile").on("change", function(){

		$("#images").html("");
		for( i = 0; i < this.files.length; i++ ) {

			// FileReader は毎回作成(同時に複数のファイルを扱えない)
			var reader = new FileReader();
			// オリジナルファイル名をプロパティとして追加しておく
			reader.name = this.files[i].name;

			// FileReader に画像が読み込まれた時のイベント
			$(reader).on("load", function () {
				// div の中に img 要素を追加してその都度 this.result(ArrayBuffer) をセット
				$("<img>").appendTo("#images")
				.prop( {"src": this.result, "title": this.name } )	// title にはオリジナルファイル名
				.css("width", "100px");
			});

			// 上記イベントを発動するための処理( this.files[i] は blob )
			if (this.files[i]) {
				reader.readAsDataURL(this.files[i]);
			}
		}

	});

	// ファイルの種類の選択
	$("#accept").on("change", function(){
		$("#myfile").prop("accept", $(this).val() );
	});
});

</script>
<select id="accept">
<option value="image/jpeg">MIME 指定 image/jpeg</option>
<option value="text/plain">MIME 指定 text/plain</option>
<option value=".txt,.jpg,.png,.zip">拡張子指定 .txt,.jpg,.png,.zip</option>
<option value="image/*">画像全て image/*</option>
<option value="video/*">動画全て video/*</option>
<option value="audio/*">音声全て audio/*</option>
</select>
<br>
<input type="file" id="myfile" multiple accept="image/jpeg">
<div id="images"></div>



デモ実行



タグ:jquery FileReader
posted by lightbox at 2016-09-09 17:18 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする

2016年07月02日


jQuery で NAVER の インセンティブレポートページの日付の行数をカウントする

昨今たいていの WEB ページには、jQuery が使用されている為、各ブラウザのデベロッパーツールで容易に【行の数】をカウントする事ができます。

以下では、Google Chrome を使用しています。

対象ページ開く

そのページの対象部分の HTML を読む必要があるので、まずは、F12 でデベロッパーツールを開きます。但し、ここで注意するべきは、WEB ページは複数のウインドウで成り立っている場合があるので、自分が知りたい表示部分に対して、デベロッパーツールを開く必要があります。その為には、F12 で開いた後、インスペクタで、対象部分をクリックしてからコンソールに移動します。



このサンプルでは、IFRAME 内が対象なので、選択の必要があります。しかし、たいていは、top で問題は無いと思います。

構造を確認して jQuery を実行

jQuery が無い場合は、コンソールコマンドの $$(セレクタ)を使う方法がありますが、複雑な検索する場合は、ブックマークレットで jQuery を埋め込むか、コンソールで jQuery で埋め込んでから実行したほうがいいでしょう。



$("table").eq(1).find("tbody tr").length
ちなみに、Seesaa ブログの カテゴリ数のカウントは、http://blog.seesaa.jp/cms/category/edit/list を開いて、$(".entrytable .wordlimit").length です。 それと、そのページに jQuery が無い場合、以下のコードをコンソールで実行すれば、jQuery が読み込めると思います
var _x = document.createElement("script");
_x.setAttribute("src","//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js");
document.body.appendChild(_x);




posted by lightbox at 2016-07-02 13:41 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする

2016年06月10日


とても面白くて簡単な jQuery のクリックしたコンテンツ以外を暗転(Blackout) するサンプル

2016/06/10
jQuery プラグインを作成しました
2016/06/07
ベージに横スクロールバーが出ている場合や、小さなコンテンツで、ブラウザが大きく開いている場合に対応すると、load と resize イベントで的確な設定をする必要がありました。

Stack Overflow でとてもいいサンプルがあったのでご紹介します、ただ、サンプルでは汎用性に欠けるので、どこでも使えるように改造しました。

対象コントロールをクリックすると、コントロール以外が暗転します
対象コントロールにクラスを設定し、そのクラスは position:relative; にしておきます。後は、overlay 用の div の作成と、jQuery のイベント登録です。
div は css で大きさを明示する必要があります





このブログの都合で div幅はインラインで指定しています



オリジナルからの改造の最も重要な点は、暗転用の div を、jQuery で BODY に追加して高さを動的に設定して使用してるところです。これは、ブログ等の複雑な HTML 構造の場合に有効だと思います。単純なページならば、オリジナルと同じように height:100% で良いかと思います
<style>
.example {
	background:#fff;
	border:1px solid pink;
	cursor:pointer;
	margin:5px; padding:20px;
	height:100px;
}
.expose {
	position:relative;
}

#overlay {
	background:rgba(0,0,0,0.3);
	display:none;
	position:absolute; top:0; left:0; z-index:99998;
}
</style>
<div
	class="expose example"
	 style="width:300px!important;">div は css で大きさを明示する必要があります</div>
<br>
<textarea
	class="expose" style="width:300px;height:100px;">入力できます</textarea><br>

<br>
<input
	type="text"
	class="expose"
	value="入力できます"
	style="width:300px;"><br>
<br>
<div
	class="expose example"
	style="width:300px!important;">このブログの都合で div幅はインラインで指定しています</div>
<br><br>

<script>
$(function(){
	$( '<div id="overlay"></div>' ).appendTo( 'body' );

	$('.expose').click(function(e){
		$(this).css('z-index','99999');
		$('#overlay').fadeIn(300);
	});

	$('#overlay').click(function(e){
		$('#overlay').fadeOut(300, function(){
			$('.expose').css('z-index','1');
		});
	});

	$(window).on("load resize", function(){
		if ( document.documentElement.clientWidth < Math.max(document.documentElement.scrollWidth,document.body.scrollWidth) ) {
			$('#overlay').css("width", Math.max(document.documentElement.scrollWidth,document.body.scrollWidth) +'px');
		}
		else {
			$('#overlay').css("width", "100%");
		}
		if ( document.documentElement.clientHeight < Math.max(document.documentElement.scrollHeight,document.body.scrollHeight) ) {
			$('#overlay').css("height", Math.max(document.documentElement.scrollHeight,document.body.scrollHeight)+'px');
		}
		else {
			$('#overlay').css("height", "100%");
		}
		
	});
});
</script>



posted by lightbox at 2016-06-10 22:55 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする

2015年07月29日


jQuery で、左右に並んだリストボックスの右側のデーターをダブルクリックしたら左へ転送してソートする処理

開発中です。旧システムの都合で、IE8 コンパチブルになっているので先頭の2行が必要になっていますが、最新の IEならば必要無いと思います( IE8 ではこれが無いと最初のダブルクリックが失敗する )

この後、左側のデータを全て送信する事になりますが、送信直前のイベント( onsubmit ) で、左のリストボックスを複数選択可に変更した後全て選択状態にします( PHP の場合は name="left[]" にしておきます )
<script>
// jQuery 初期処理
$(function() {

	// IE8 対応
	$("#right").focus();
	$("#right").prop("selectedIndex", 0);


	$("#right").on("dblclick", function(){

		var value = $(this).find(":selected").val();
		var text = $(this).find(":selected").text();

		$("#left").data("check",false);
		$("#left").find("option").each( function(){
			if ( $(this).val() == value ) {
				alert("既に登録されています");
				$("#left").data("check",true);
			}
		} );

		// 追加しない
		if ( $("#left").data("check" ) ) {
			return;
		}

		// ソートしない場合は、prependTo がベター
		$("<option>").val(value).text(text)
			.prependTo("#left");

		var selectList = $('#left option');

		selectList.sort(function(a,b){
			a = a.value;
			b = b.value;
			return a-b;
		});

		$('#left').html(selectList);
		
	});

});
</script>



タグ:jquery IE
posted by lightbox at 2015-07-29 17:23 | jQuery | このブログの読者になる | 更新情報をチェックする

2015年07月20日


jQuery でコンボボックスの選択されたオプションのテキストを取得する場合、optgroup を使っている場合は子孫選択でないと取得されないというお話 / find(子孫) と children(直近) の違い

要は、:selected Selector のお話です。

通常のコンボボックスですと、どちらでも正しく動きます。しかし、optgroup を使ってコンボボックス内に分類を作ってしまうと、option 要素の階層がが一つ深くなってしまうので選択した option 要素を取得できない事になります。

セレクタとして > を使う事はそもそもあまり無いですが、逆に必要な場合もあるので、メソッドの find(子孫) と children(直近) の違いとして覚えておくとイザという時に役に立つと思います

jQuery のコンボボックスの選択で調べると、たいていセレクタでのサンプルがヒットするのですが、.find で書いたほうが明確に意図を反映できると思うのです。(後々のメンテナンスの為に)

どうせ、onchange イベントでは $(this) から始まるので .find ですし 

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<select id="font" name="font">
	<option value="jiyunotsubasa">自由の翼フォント</option>
	<option value="kirieji" >切絵字1.0</option>

	<optgroup label="手書き">
		<option value="TanukiMagic" >たぬき油性マジック</option>
		<option value="setofont" >瀬戸フォント</option>
	</optgroup>

	<optgroup label="正統派">
		<option value="VL-PGothic-Regular" >VLゴシックフォントファミリ</option>
		<option value="ume-pgo4" >梅Pゴシック</option>
	</optgroup>

	<optgroup label="変化正統派">
		<option value="nukamiso_yamiyo_beta07" >ぬかみそ闇夜</option>
		<option value="kagamimoji-pgoth-v" >鏡文字Pゴシック-V</option>
	</optgroup>
</select>
<input type="button" value="子孫選択1" id="get_selected_text1">
<input type="button" value="子孫選択2" id="get_selected_text2">
<input type="button" value="チャイルド選択1" id="get_selected_text_child1">
<input type="button" value="チャイルド選択2" id="get_selected_text_child2">
<div id="result" style='padding:10px;border:1px solid #000;width:200px;'>
</div>
<div id="result2" style='padding:10px;border:1px solid #000;width:200px;'>
</div>
<script>
// 子孫選択( 正しい方法 )
$("#get_selected_text1").click(function(){
	alert( $("#font option:selected").text() )
});

$("#get_selected_text2").click(function(){
	alert( $("#font").find("option:selected").text() )
});

$("#font").change(function(){
	$("#result").text( $(this).find("option:selected").text() )
});

// チャイルド選択( ダメな方法 )
$("#get_selected_text_child1").click(function(){
	alert( $("#font > option:selected").text() )
});

$("#get_selected_text_child2").click(function(){
	alert( $("#font").children("option:selected").text() )
});

$("#font").change(function(){
	$("#result2").text( $(this).children("option:selected").text() )
});


</script>
表現方法で混乱します。子孫や Children とか、親子と parent とか言われるとごちゃごちゃになりそうです。ですから、この場合 find というメソッドがとても光って見えます
タグ:jquery select
posted by lightbox at 2015-07-20 13:54 | jQuery | このブログの読者になる | 更新情報をチェックする

2015年07月17日


jquery.balloon.js を使用した簡単なバルーン( マウスオーバーで表示する追加説明用 )の作り方

オンラインで実行



画像を背景画像に使用する応用編もありますが、まずは title 属性 で試した後、contents オプションでバルーンをカスタマイズする方法から入るといいと思います。

※ サンプルの contents には、Google Chrome で動作する HTML5 のコンテンツを使用しています
※ ここでは、inline 要素の span に対して行っていますが、複数行になる場合は block 要素を使用すべきです( line-height が大きい場合、行間がイベントから外れます )

jquery.balloon.js ダウンロードページ

上のページにも使用説明があるのですが、英文で書かれているので、オプションは以下のページを参照するといいと思います。

日本語による詳しいオプションの説明があります

設置サンプルコード
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://winofsql.jp/js/jquery.balloon.min.051.js"></script>

<script>
$(function(){

	$('#target1').balloon({
		// 吹き出しを右に出すと画面の邪魔にならない場合が多いです
		position: "right",
		// 吹き出しの CSS 設定です
		css: {
			"color": "#0000ff",
			"font-size": "20px",
			"font-weight": "bold",
			"padding": "20px"
		}
	});

	$('#target2').balloon({
		// 吹き出しを右に出すと画面の邪魔にならない場合が多いです
		position: "right",
		// 吹き出し端に付く正三角形のサイズ(高さ)
		tipSize: 20,
		// 吹き出しの CSS 設定です
		css: {
			"height": "270px",
			"opacity": "1",
			"color": "#000",
			"font-size": "16px",
			"border-radius": "10px",
			"border": "solid 2px #A63814",
			"padding": "10px"
		},
		// CSS の対象となる、吹き出しの内部コンテンツを定義します
		contents: '<img src="http://winofsql.jp/image/sab.gif"> ここには HTML を記述できます<br>▼ Google Chrome だと日付コントロール<br><input type="date">'
	});

});
</script>
<pre>


▼ HTML の title 属性内を使用するシンプルなバルーン

<span
	id="target1"
	 title="日本語表示あいうえお"
>この要素内の title 属性を使う</span>

▼ プラグイン側で、HTML の コンテンツを文字列を作成する応用編

<span
	id="target2"
>contents オプションで HTML をバルーン内に表示</span>


</pre>



▼ HTML の title 属性内を使用するシンプルなバルーン

この要素内の title 属性を使う

▼ プラグイン側で、HTML の コンテンツを文字列で作成する応用編

contents オプションで HTML をバルーン内に表示

関連する記事



posted by lightbox at 2015-07-17 18:22 | jQuery | このブログの読者になる | 更新情報をチェックする

2015年02月18日


IE11 を IE8として設定して VBScript から jQuery を使う方法

想定する環境は、社内の IE11 でのイントラネットです。jQuery を使う事によってページ上のコンテンツを効率良く扱えるはずで、Excel との連携に役立つと思います。

デモページ( 開発者ツールを表示させてから再表示して下さい )

5行目の空のスクリプト要素は、このページのデフォルトのスクリプトを VBScript にする為にできるだけ先頭に置いています。その上の META 要素によって、VBScript が一番安心して動作すると思われる IE8 のドキュメントモードに変更しています。また、その動作が正常に行われている事を確認する為に、11行目で document.documentMode を出力しています。

VBScript から呼ばれるサポート関数

やはり、VBScript だけでは関数の扱いで無理があるので、サポート関数を JavaScript 側に用意しています。jQuery の全ての処理で使えるわけではありませんが、each メソッドと click メソッドのサポートができるようにしています。

VBScript の関数名は、文字列で指定して JavaScript 側で eval で実際に呼び出しています。想定する環境が閉鎖環境なので、このような使い方で問題無いと思います。( そもそも、IE でないとこのページは動作しません )

jQuery は、1.9.1 でテストしました。あまり新しいと IE には都合が悪いかもしれないのでこのへんのバージョンを使用しています。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=8">
<script language="VBScript"></script>
<script language="JScript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div style='position:absolute;left:0px;top:0px;font-size:8px;color:#999999;'>
<script language="VBScript">
Call document.write(document.documentMode)
</script>
</div>

<pre>

	<input type="button" value="実行">
	<input type="text" name="f001" value="1234567"     > 番号
	<input type="text" name="f002" value="あいうえお"  > 氏名
	<input type="text" name="f003" value="123-1567"    > 郵便番号
	<input type="text" name="f004" value="日本のどこか"> 住所
	<input type="text" name="f005" value="1999/01/10"  > 誕生日

	<input
		type="button"
		value="直イベント"
		onclick="Call alert('VBScriptがデフォルトです')">
</pre>

<script language="JScript" type="text/javascript">
// **********************************
// VBScript から呼ばれるサポート関数
// **********************************
function eachLoop( ) {
	eval( arguments[0] + "("+window.vbscnt+",this)" );
	window.vbscnt++;
}
function callback( obj ) {
	eval( obj.data )
}
function arr( param ) {
	window.vbscnt = 0;
	var a = [];
	a[0] = param;
	return a;
}
</script>
<script language="VBScript">
' **********************************
' click イベントを MyFunc で呼び出す
' **********************************
Call jQuery("input").eq(0).click( "MyFunc(this)", callback )
' 引数を二つで、click メソッドを呼んでいるので、Call が必要です

' **********************************
' jQuery オブジォクトの作成
' **********************************
Set gdata = jQuery("pre input")

' **********************************
' Each 処理を VBS の MyLoop で呼び出す
' **********************************
Call gdata.each( eachLoop, arr("MyLoop") )

' **********************************
' Each 処理用 MyLoop
' **********************************
function MyLoop( idx, objThis )
	console.log( objThis )
	console.log( idx )
end function

' **********************************
' イベント用 MyFunc
' **********************************
function MyFunc( objThis )
	console.dir( objThis )
end function

</script>

</form>
</body>
</html>




タグ:jquery VBScript IE11
posted by lightbox at 2015-02-18 16:33 | jQuery | このブログの読者になる | 更新情報をチェックする

2015年02月03日


jQuery の属性セレクタ

jQuery は主にクライアント用に作られているので、FORM を使用した入力コントロールの参照方法に少し工夫が必要です。( ソースコードの例では id を記述していますが、name のみで参照する事ができます )

"#親ID [属性='値']"

ソースコードでは、二つの FORM の下側のフォームの中にあるコントロールの name"test_name" であるものを参照しています





この場合セレクタは "#test_unit2 [name='test_name']" となっており、test_unit2 内でかつ、name が "test_name" であるように記述されています。
属性値にスペースが含まれて無い場合は、"#test_unit2 [name=test_name]" も動作します。つまり、value 属性で使用する場合は、値を引用符で囲む必要があります。
さらに、[name='test_name'] の前にスペース無しの要素名を書くと、指定した要素のみ対象にする事もできます 例) "#test_unit2 textarea[name='test_name']" また、指定できるのは、要素名だけでは無く、id や クラスでも有効です 例) "#test_unit2 .test_in[name='test_name']"
<input type="button"
	id="test_button"
	value="実行">

<form id="test_unit1">

	<input type="text"
		id="test_id"
		name="test_name"
		style='width:300px;'>

</form>

▲ と ▼は別々の FORM です 

<form id="test_unit2">

	<input type="text"
		id="test_id"
		name="test_name"
		class="test_in"
		style='width:300px;'>

	<br>

	<textarea
        name="test_name"
		style='width:298px;'>
	</textarea>

</form>
<script type="text/javascript">
$("#test_button").click( function(){
	 $("#test_unit2 [name='test_name']").css("background-color", "#00ff00");   
});
</script>




▲ と ▼は別々の FORM です


"[属性!='値']"

属性セレクタには他にもたくさん指定方法があります。他のセレクタとの組み合わせは『一致した場合』と同じですが、[] 内に書く演算子として、『一致 : =』に対して、『一致しない : !=』となります。( Attribute Not Equal Selector )

"[属性^='値']" と "[属性$='値']"

これは、プログラミングで昔から使われる『最初と最後』を示す記号を使った一致方法です。指定した属性の値の先頭または最後に一致する場合に jQuery が実行されます。

以下のソースコードは、jQuery のドキュメントページにあるものですが、"letter" が 最後にある場合に実行されます( Attribute Ends With Selector )
<input name="newsletter">
<input name="milkman">
<input name="jobletter">
 
<script>
$( "input[name$='letter']" ).val( "a letter" );
</script>

"[属性*='値']"

これはもっとも解りやすいワイルドカードに通じる演算子 * を使用したものです。意味ももちろんそのままで、『含まれる』です。( Attribute Contains Selector )

"[属性~='値']"

これは直感的には解らないセレクタです。名前は、『Attribute Contains Word Selector』と言って、スペースで区切られたワードに対して文字列が一致した場合に jQuery が実行されます。

通常、属性の値にスペースが含まれるのは、value 属性なので、あまり使うことは無いと思います。

posted by lightbox at 2015-02-03 15:25 | jQuery | このブログの読者になる | 更新情報をチェックする

2014年12月18日


jQuery の簡単なコードで並べた写真に枠を付けて影をつけてギャラリーっぽくする

対象の画像にクラスを設定して、それぞれの画像の下に DIV を挿入してその DIV の中に画像を移動して、DIV に CSS を設定するという単純な jQuery のコードです。

※ 画像の下に DIV を挿入は insertAfter
※ 挿入しても、DIV を参照中なので、each で同一数の DIV と 画像を対応させて親子関係に変更
※ 最後は CSS を設定
( CSS は、大外の $("<div></div>") に対して設定しても同じ )
▼ 加工あり



▼ 加工なし



<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("<div></div>")
		.insertAfter(".my_img")
		.each(function(index,el){
			$(el)
				.append( $(".my_img").eq(index) )
				.css({
					display: "inline-block",
					border: "solid 1px #909090",
					padding: "15px",
					"border-radius": "6px",
					"margin": "10px 10px 10px 10px",
					"box-shadow": "0px 25px 10px -15px rgba(0, 0, 0, 0.5)"
				})
		})
});
</script>
<pre>
▼ 加工あり
<img class="my_img" src="https://lh3.googleusercontent.com/-4ZqZUw6-1HE/S7p-TD-MTcI/AAAAAAAAWlI/eWK9s3GOQ9g/s200/b17geoff_vane028.jpg"><img class="my_img" src="https://lh3.googleusercontent.com/-XTFOpiEYp3M/TLftP9U802I/AAAAAAAABAo/awMVjyVyuqg/s200/b5architecture_interiors003.jpg">
<img class="my_img" src="https://lh3.googleusercontent.com/-M9YcIUraRf4/S1j75KHGTZI/AAAAAAAAWFc/PLkDRK9qC_Y/s200/b17diederik015.jpg">

</pre>

<pre>
▼ 加工なし
<img src="https://lh3.googleusercontent.com/-4ZqZUw6-1HE/S7p-TD-MTcI/AAAAAAAAWlI/eWK9s3GOQ9g/s200/b17geoff_vane028.jpg"><img src="https://lh3.googleusercontent.com/-XTFOpiEYp3M/TLftP9U802I/AAAAAAAABAo/awMVjyVyuqg/s200/b5architecture_interiors003.jpg">
<img src="https://lh3.googleusercontent.com/-M9YcIUraRf4/S1j75KHGTZI/AAAAAAAAWFc/PLkDRK9qC_Y/s200/b17diederik015.jpg">

</pre>




タグ:jquery
posted by lightbox at 2014-12-18 23:29 | jQuery | このブログの読者になる | 更新情報をチェックする
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 ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり