月別アーカイブ: 2013年1月

Javascript：JavascriptでPOSTの値を追加する

Posted on by
返信

Javascriptでsubmitボタン押下時にPOSTされるデータを追加したい場合があります。
フォーム内に複数のボタンを設置した際に押されたボタンによってPOSTするデータを追加したい場合あったので、その時のメモです。

■ Javascript

function funcBtn() {
	// エレメントを作成
	var ele = document.createElement('input');
	// データを設定
	ele.setAttribute('type', 'hidden');
	ele.setAttribute('name', 'hoge');
	ele.setAttribute('value', 'テスト');
	// 要素を追加
	document.myForm.appendChild(ele);
}

■ HTML

<form method="post" id="myForm" name="myForm">

    （省略）

    <input type="submit" name="btn" value="ボタン" onclick="funcBtn();" />

</form>

ボタン押下時、hiddenでhogeにテストという値がPOST送信されます。

PHP：phpで数値をチェックする方法

Posted on by
返信

phpでシステムを実装する際に数値かどうかをチェックすることはよくあると思います。
phpでは数値文字列かを判定するis_numeric関数がありますが、is_numeric関数は小数点や16進数なども数値として判定します。
完全に数値だけを判定したい場合に下記の正規表現を使うことで数値かどうか判定することができます。
正規表現を使うことによって判定する内容を編集することができるので応用が効くと思います。

■ is_numeric()関数

変数または指定した値が数値、数値文字列かどうか判定します。
数値の場合はtrueを返し、数値ではない場合はfalseを返します。

■ 使用方法（is_numeric）

・数値の場合

	$num = 000;
	if (is_numeric($num)) {
		echo '数値です';
	}
	else {
		echo '数値ではありません';
	}
数値です

・小数点の場合

	$num = 100.1;
	if (is_numeric($num)) {
		echo '数値です';
	}
	else {
		echo '数値ではありません';
	}
数値です

・数値文字列の場合

	$num = '100';
	if (is_numeric($num)) {
		echo '数値です';
	}
	else {
		echo '数値ではありません';
	}
数値です

・「+」、「-」付きの場合

	$num = '-100';
	if (is_numeric($num)) {
		echo '数値です';
	}
	else {
		echo '数値ではありません';
	}
数値です

・16進数の場合

	$num = '0xFF';
	if (is_numeric($num)) {
		echo '数値です';
	}
	else {
		echo '数値ではありません';
	}
数値です

・上記以外の場合（数値ではない場合）

	$num = 'aaa';
	if (is_numeric($num)) {
		echo '数値です';
	}
	else {
		echo '数値ではありません';
	}
数値ではありません

■ 使用方法（正規表現）

正規表現を使用し、0～9の連続した文字のみtrueを返します。

preg_match("/^[0-9]+$/", '判定したい文字列')

・数値の場合

	$num = 000;
	if (preg_match("/^[0-9]+$/", $num)) {
		echo '数値です';
	}
	else {
		echo '数値ではありません';
	}
数値です

・小数点の場合

	$num = 100.1;
	if (preg_match("/^[0-9]+$/", $num)) {
		echo '数値です';
	}
	else {
		echo '数値ではありません';
	}
数値ではありません

・数値文字列の場合

	$num = '100';
	if (preg_match("/^[0-9]+$/", $num)) {
		echo '数値です';
	}
	else {
		echo '数値ではありません';
	}
数値です

・「+」、「-」付きの場合

	$num = -100;
	if (preg_match("/^[0-9]+$/", $num)) {
		echo '数値です';
	}
	else {
		echo '数値ではありません';
	}
数値ではありません

・16進数の場合

	$num = '0xFF';
	if (preg_match("/^[0-9]+$/", $num)) {
		echo '数値です';
	}
	else {
		echo '数値ではありません';
	}
数値ではありません

・上記以外の場合（数値ではない場合）

	$num = 'aaa';
	if (preg_match("/^[0-9]+$/", $num)) {
		echo '数値です';
	}
	else {
		echo '数値ではありません';
	}
数値ではありません

jQuery：ラジオ選択時にセレクトボックスを制御する

Posted on by
返信

HTMLでフォームを作成していると入力した値によって入力項目の切り替えなどをしたい場合があります。
jQueryでラジオボタン選択時にセレクトボックスなどのフォームを有効・無効にする方法を記載します。

■ 使用例

【jQuery】

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    // 初期状態のセレクトボックスをdisabledに設定する
    $("select#specList").attr("disabled", "disabled");

    // 「全体」をクリックされた場合
    $("#all").click(function(){
        // セレクトボックスをdisabledに設定する
        $('select#specList').attr("disabled", "disabled");
    });    

    // 「指定」をクリックされた場合
    $("#spec").click(function(){
        // セレクトボックスのdisabledを外す
        $('select#specList').removeAttr("disabled");
    });    
});
</script>

【HTML】

<label for="all"><input type="radio" name="radio" id="all">全体</label>
<label for="spec"><input type="radio" name="radio" id="spec">指定</label>

<select id="specList">
    <option value="100">ID:100</option>
    <option value="200">ID:200</option>
    <option value="300">ID:300</option>
</select>

■ サンプル

「指定」を選択しているときのみ、セレクトボックスが選択可能になっています。



ID:100ID:200ID:300

jQuery：jQueryを実行する時のready()の記述方法

Posted on by
返信

jQueryを実行するときにready()を使用し記述しますが、省略して書くことができます。
また、jQueryの記述を$で省略することも可能です。
それぞれの書き方を下記に記載します。

■ ready()

jQueryを実行するのに必要な関数です。
DOMの読み込み完了時に関数を実行します。

■ jQueryを$で書き換えた場合の記述方法

・「jQuery」で記述した場合

jQuery(document).ready(function(){
	// 実行する処理
});

・「$」で記述した場合

$(document).ready(function(){
	// 実行する処理
});

$で記述すれば何回もjQueryを記述する必要がないので楽でソースがきれいに見えます。

■ ready()を省略した場合の記述方法

・readyを使用した場合
documentが読み込まれてから実行します。

$(document).ready(function(){
	// 実行する処理
});

・documentを省略した場合
使用できるが推奨はされていないそうです。

$().ready(function(){
	// 実行する処理
});

・readyを省略した場合
(document).readyを省略できるのでソースも短く楽に書くことができます。

$(function(){
	// 実行する処理
});

HTML：検索エンジンロボットの巡回を拒否する

Posted on by
返信

WEBサイトを作成していると管理画面など検索エンジンにクロールされないようにしたいページなどが存在します。
今回はhtmlのmetaタグで設定する方法とrobots.txtを使って制御する方法を記載します。

■ 検索ロボット（クローラー）

サーチエンジンの検索データベースを作成するために、世界中のWEBサイトの情報を自動的に回収するプログラムです。
GoogleやYahoo!などで検索した際に検索ロボットが収集した情報を出力しています。
クローラーがWEBサイトをクロール（巡回）することによって、より良い情報を検索結果に出力してくれます。

■ metaタグで設定する方法

HTMLのmetaタグに記述し、検索ロボットを制御します。
metaタグは設定したいページのheadタグ内に記述します。
NOINDEXなどの指定は大文字で設定します。

NOINDEX：検索エンジンにインデックスさせず、検索結果に表示させない。
NOFOLLOW：ページ内に存在するリンク先を巡回させない。

指定のページを検索エンジンに登録させない場合

<meta name="ROBOTS" content="NOINDEX">

ページ内のリンク先の巡回させない場合

<meta name="ROBOTS" content="NOFOLLOW">

両方を同時に設定する場合

<meta name="ROBOTS" content="NOINDEX,NOFOLLOW">

■ robots.txtで設定する方法

robots.txtを設置した場合、検索ロボットはrobots.txtにアクセスします。
robots.txtで巡回を拒否するように設定している場合はHTMLアクセスせずに帰っていきます。

【使用例】

User-Agent: *
Disallow: /

検索ロボットにWEBサイト全体を巡回させる場合

User-agent: *
Disallow:

※robots.txtを作成しない場合は、上記と同じ設定になります。

検索ロボットにWEBサイト全体を巡回させない場合

User-agent: *
Disallow: /

検索ロボットに特定のページへアクセスさせないようにする場合

User-agent: *
Disallow: /hoge/
Disallow: /hoge.html

検索ロボットを指定する場合（googleの検索ロボットを拒否）

User-agent: Googlebot
Disallow: /