SQLの窓

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

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

2014年10月24日


jQuery と HTML5 で、FORM 送信のテンプレート

WEBアプリケーションとして、FORM の送信処理を標準の JavaScript だけで記述するのと、jQuery 主体で記述するのはかなり違うものになります。また、日付処理にしてもまだまだ標準の HTML ではサポートしきれませんし、日付の論理チェックを イザ JavaScript で記述するにしても結構面倒です。

補足) .ready() / DOMが完全にロードされたときの処理

.ready() の書き方として公式のドキュメントではまったく同じ機能だとして以下の3つを提示しています。
$( document ).ready( handler )
$().ready( handler ) (this is not recommended)
$( handler )
真ん中の処理は、『推奨しない』とありますが、最後の処理はシンプルですが、.ready() と同じです
( 原文 : All three of the following syntaxes are equivalent )

関連する記事

FORM の送信と JavaScript

最近やっと、HTML5 の新しい属性を使って FORM の処理をサポート可能になってきました( スマホのブラウザは未確認ですが )。ですから、FORM + jQuery + jQyery UI + datepicker + JavaScript + HTML5 というようなテンプレートを作成しました。

FORM の submit イベント

jQuery でこの処理を書くとすると、$( "form" ).submit(function( event ) { 処理 }); という記述になります。ここでは、セレクタとして ID を指定していますが、一般的な一つのフォームを持つページであれば、セレクタは form で十分です。

この時、条件によってサーバへの送信をキャンセルする処理が、event.preventDefault(); となります。( 一般の JavaScript ですと、onsubmit イベント内で、false を戻す処理にあたります )
	// ***********************************************
	// 更新ボタンがクリックされた時のみ確認
	// ***********************************************
	$( "#target_form" ).submit(function( event ) {

		// 日付妥当性チェック
		if ( !($( "#syainBirth" ).val().isDate()) ) {
			alert("日付が正しくありません");
			$( "#syainBirth" )
			.select()
			.focus();
			event.preventDefault();
			return;
		}


		if ( $(this).data("button_target") == "更新" ) {

			if ( !confirm("更新してよろしいですか?") ) {
				event.preventDefault();
				return;
			}

		}
	});
さらに、このテンプレートでは submit ボタンが複数あるので、『処理』の中でどちらのボタンが押されたかを知る為に、submit ボタンの onclick イベントで FORM にボタンの文字列をユーザデータとしてセットして利用しています。
	// ***********************************************
	// submit ボタンのクリックイベント
	// ***********************************************
	$("input[type='submit']").click( function( event ){
		$( "#target_form" )
			// 押されたボタンの文字列を FORM の内部データとして保存
			.data("button_target", event.currentTarget.value);
	});
submit ボタンに対するセレクタは input[type='submit'] という属性の値による一致で作成しています。その他の FORM の中にある input 要素等も、サーバに送る為には name属性を必ず指定します。ですから、それぞれの入力要素を参照するには、同様に input[name='名前'] で参照すればいいでしょう。

補足) input 要素で form の送信属性を上書き
input 要素 - HTML | MDN

1) formaction ( ※ 送り先アプリケーションを変更できます )
2) formenctype ( ※ ファイルアップロードボタンを追加できます )
3) formmethod ( ※ GET と POST を切りかえる事ができます )
4) formtarget ( ※ 送り先ウインドウを変更できます / 例) 送り先を IFRAME に切り替える )
jQuery UI + datepicker で日付入力支援 jQuery UI の datepicker を使うと、日付入力が容易になりますが、オプションの設定がそれなりに面倒なので、このテンプレートを基本に変更するといいと思います。また、手入力も可能なので、HTML5 の pattern 属性で日付フォーマットの入力を強制しています。
<input class="pass2"
	type="text"
	name="syainBirth"
	id="syainBirth"
	value=""
	pattern="^[0-9]{4}\/[0-9]{1,2}\/[0-9]{1,2}$"
	maxlength="10"
	style="">

さらに、正しい日付である必要を考慮する場合の為に、String オブジェクトに isDate メソッドを追加しています。

HTML5 の属性の利用

数字の入力が必要な場合は、type 属性を number にすると簡単ですが、ブラウザによっては 数字を変更するコントロールがフィールドに追加されるので、『給与』フィールドは pattern 属性でチェックしています。
但しスマホなどでは、タップすると入力システムが開きますが、number 指定しておくと最初からテンキーが開くようなので、利用価値が大きいです。
※ 実際問題として、type="tel" が正解のようです(number だと数字を連続入力すると他の文字に変換されてしまいます)。


社員コードは必須入力なので、ページがロードされた時に jQuery から required を設定しています。これは、pattern のように HTML で記述してもいいですが、必須に関してはアプリ作成の初期段階のテスト時にはチェックして欲しく無い場合も多いので、動的にセットしています。 その他 キャンセルボタンは、入力チェックの発生しない通常ボタンを使用しています。 このサンプルでは、誰でもすぐ試せるように、Google がホスティングしている jQuery を使用しています。 ▼ 実際の実行
社員コード
氏名
性別
生年月日
給与

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.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">
// ***********************************************
// jQuery UI 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: "1950:2014"
}

$(function() {

	// ***********************************************
	// submit ボタンのクリックイベント
	// ***********************************************
	$("input[type='submit']").click( function( event ){
		$( "#target_form" )
			// 押されたボタンの文字列を FORM の内部データとして保存
			.data("button_target", event.currentTarget.value);
	});

	// ***********************************************
	// 更新ボタンがクリックされた時のみ確認
	// ***********************************************
	$( "#target_form" ).submit(function( event ) {

		// 日付妥当性チェック
		if ( !($( "#syainBirth" ).val().isDate()) ) {
			alert("日付が正しくありません");
			$( "#syainBirth" )
			.select()
			.focus();
			event.preventDefault();
			return;
		}


		if ( $(this).data("button_target") == "更新" ) {

			if ( !confirm("更新してよろしいですか?") ) {
				event.preventDefault();
				return;
			}

		}
	});

	// ***********************************************
	// datepicker プラグイン
	// ***********************************************
	$("#syainBirth").datepicker(datepicker_option);

	// ***********************************************
	// 必須と初期フォーカス
	// ***********************************************
	$("#syainCode")
		// HTML5 属性
		.prop("required", true)
		.focus();


});

// ***********************************************
// 日付妥当性チェックを String オブジェクトに追加
// ***********************************************
String.prototype["isDate"] = function() {
	var str = this.valueOf();
	if ( str == "" ) {
		return true;
	}
	if ( !str.match(/^\d{4}\/[\d]+\/[\d]+$/) ) { 
		return false; 
	} 
	var parts = str.split( "/" );
	var nYear = Number(parts[0]); 
	var nMonth = Number(parts[1]) - 1;
	var nDay = Number(parts[2]);
	// 月,日の妥当性チェック 
	if ( 0 <= nMonth && nMonth <= 11 && 1 <= nDay && nDay <= 31 ) { 
		var dt = new Date(nYear, nMonth, nDay); 
		if( isNaN(dt) ) { 
			return false; 
		}
		else if(
			dt.getFullYear() == nYear &&
			dt.getMonth() == nMonth &&
			dt.getDate() == nDay ) {
			return true;
		}
		else{ 
			return false;
		}
	}
	else{ 
		return false;
	}
};


</script>

<form method="get"
	id="target_form"
	target="my_ferame"
	action="http://winofsql.jp/php_get.php"
	accept-charset="utf-8">
	<input type="submit"
		name="send"
		id="send_check"
		value="送信" >
	<table id="main">
		<tr>
			<td class="ttl">社員コード
			</td>
			<td>
				<input type="text"
					name="syainCode"
					id="syainCode"
					value=""
					maxlength="4"
					style="">
			</td>
		</tr>
		<tr>
			<td class="ttl">氏名
			</td>
			<td>
				<input class="pass2"
					type="text"
					name="syainName"
					id="syainName"
					value=""
					maxlength="50"
					style="">
			</td>
		</tr>
		<tr>
			<td class="ttl">性別
			</td>
			<td>
				<select class="pass2"
					name="syainSex"
					style="width:100px;">
					<option value='0' >男性
					</option>
					<option value='1' >女性
					</option>
				</select>
			</td>
		</tr>
		<tr>
			<td class="ttl">生年月日
			</td>
			<td>
				<input class="pass2"
					type="text"
					name="syainBirth"
					id="syainBirth"
					value=""
					pattern="^[0-9]{4}\/[0-9]{1,2}\/[0-9]{1,2}$"
					maxlength="10"
					style="">
			</td>
		</tr>
		<tr>
			<td class="ttl">給与
			</td>
			<td>
				<input class="pass2"
					type="text"
					name="syainKyuyo"
					id="syainKyuyo"
					value=""
					pattern="^[0-9]+$"
					maxlength="7"
					style="">
			</td>
		</tr>
	</table>
	<input type="submit"
		name="send"
		id="send_update"
		value="更新">
	<input type="button"
		name="cancel"
		id="button_cancel"
		value="キャンセル">
</form>
<iframe name="my_ferame"
	frameborder="1"
	scrolling="yes"
	width="400"
	height="200" >
</iframe>


posted by lightbox at 2014-10-24 12:26 | jQuery | このブログの読者になる | 更新情報をチェックする

2014年10月23日


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

クリックした後、右クリックまたは CTRL+C でそのテキストをクリップボードにコピーする事を想定しています。

jQuery での実装

最新のブラウザならば、SPAN 部分は皆『document.createRange()』で作成されたオブジェクトで正しく動作します。但し、INPUT 等の入力可能な部分での処理は、エレメント(要素)の、setSelectionRange メソッドで対応します。その際、IE8 以前では、createTextRange で処理を行わないと動作しません( ここはいずれ必要なくなる処理です )

これらの処理は、サンプルでは文字列全体の選択を行っていますが、いずれも任意の範囲指定が可能です。

JavaScript のみでの実装

それに対して、JavaScript のみで記述したものは、入力部分を全て選択する場合は要素に直接イベントとして this.select() を実行されるのが簡単です。SPAN では、jQiery と同様に処理しています。

jQuery でのイベント登録

jQuery のセレクタによるオブジェクト複数選択より、each メソッドで全ての要素に click イベントを登録できるので効率的です。
▼ JavaScript のみ : クリックして下さい

あいうえお
abc-001
日本語 表示



▼ jQuery : クリックして下さい

あいうえお
abc-001
日本語 表示



<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">
// ***************************
// 一般的な関数定義
// ***************************
function textSelect(obj) {
	var range,sel;
	if (window.getSelection) {
		range = document.createRange();
		range.setStart(obj.firstChild,0);
		range.setEnd(obj.firstChild,obj.firstChild.nodeValue.length);
		sel = getSelection();
		sel.removeAllRanges();
		sel.addRange(range);
	}
}

// ***************************
// jQuery の初期処理
// ***************************
$(function(){
	$(".selection").each(function(){
		$(this).click(function(){
			var tagName = this.tagName.toLowerCase();
			switch( tagName ) {
				case 'textarea':
				case 'input':
					if (this.setSelectionRange) { 
						this.setSelectionRange(0,$(this).val().length);
					}
					// 古いIE(8以前)用
					else if (this.createTextRange) {
						var range = this.createTextRange();
						range.collapse(true);
						range.moveStart('character', 0);
						range.moveEnd('character', $(this).val().length);
						range.select();
					}
					break;
				default:
					if (window.getSelection) {
						var range = document.createRange();
						range.setStart(this.firstChild,0);
						range.setEnd(this.firstChild,$(this).text().length);
						sel = getSelection();
						sel.removeAllRanges();
						sel.addRange(range);
					}
			}
		});
	})
});
</script>
<pre class="w6">
<b class=sttl>▼ JavaScript のみ</b>

<span onclick='textSelect(this)'>あいうえお</span>
<span onclick='textSelect(this)'>abc-001</span>
<span onclick='textSelect(this)'>日本語 表示</span>
<input onclick='this.select()' value="日本語 表示">
<textarea onclick='this.select()'>日本語 表示</textarea>

<b class="sttl">▼ jquery.selection</b>

<span class="selection">あいうえお</span>
<span class="selection">abc-001</span>
<span class="selection">日本語 表示</span>
<input class="selection" value="日本語 表示">
<textarea class="selection">日本語 表示</textarea>




</pre>
関連する記事

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


posted by lightbox at 2014-10-23 14:14 | 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 終わり