php の勉強

- 1 2 次の30件>>

2025年03月13日

TEST

【関数の最新記事】

posted by at 2025-03-13 19:57 | 関数 |

2017年05月27日

HTML5 input の type テンプレート

<style>
.fld_type td {
	padding: 4px;
}
</style>
<form>
	<table class="fld_type">
	<tr>
		<td>text</td>
		<td>
			<input type="text" name="fld_default">
		</td>
	</tr>
	<tr>
		<td>search</td>
		<td>
			<input type="search" name="fld_search" value="検索">
		</td>
	</tr>
	<tr>
		<td>tel</td>
		<td>
			<input type="tel" name="fld_tel" pattern="[0-9]{2,4}-[0-9]{2,4}-[0-9]{3,4}">
		</td>
	</tr>
	<tr>
		<td>url</td>
		<td>
			<input type="url" name="fld_url">
		</td>
	</tr>
	<tr>
		<td>email</td>
		<td>
			<input type="email" name="fld_email">
		</td>
	</tr>
	<tr>
		<td>datetime</td>
		<td>
			<input type="datetime" name="fld_datetime">
		</td>
	</tr>
	<tr>
		<td>datetime-local</td>
		<td>
			<input type="datetime-local" name="fld_datetime_local">
		</td>
	</tr>
	<tr>
		<td>date</td>
		<td>
			<input type="date" name="fld_date">
		</td>
	</tr>
	<tr>
		<td>month</td>
		<td>
			<input type="month" name="fld_month">
		</td>
	</tr>
	<tr>
		<td>week</td>
		<td>
			<input type="week" name="fld_week">
		</td>
	</tr>
	<tr>
		<td>time</td>
		<td>
			<input type="time" name="fld_time">
		</td>
	</tr>
	<tr>
		<td>number</td>
		<td>
			<input type="number" name="fld_number">
		</td>
	</tr>
	<tr>
		<td>range</td>
		<td>
			<input type="range" name="fld_range">
		</td>
	</tr>
	<tr>
		<td>color</td>
		<td>
			<input type="color" name="fld_color">
		</td>
	</tr>

	<tr>
		<td>submit</td>
		<td>
			<input type="submit" name="fld_submit">
		</td>
	</tr>
	</table>
</form>

Google Chrome での確認

search では、入力値がある場合、カーソルが上にあると、x ボタンが表示されます。

tel では何もチェックされないので、pattern 属性をセットしています。但し、スマホではキーパッドが数字用になるので、number では無く tel を指定すると良い場合があります

url と email は最低限のチェックがされます

datetime は何もされません

number は、カーソルが上にあると、spinner が表示されます。また、数字関係以外は入力できません

input のみを並べたもの

<style>
.fld_type {
	white-space: pre;
}
</style>
<form>
<div class="fld_type">
<input type="text" name="fld_default">
<input type="search" name="fld_search" value="検索">
<input type="tel" name="fld_tel" pattern="[0-9]{2,4}-[0-9]{2,4}-[0-9]{3,4}">
<input type="url" name="fld_url">
<input type="email" name="fld_email">
<input type="datetime" name="fld_datetime">
<input type="datetime-local" name="fld_datetime_local">
<input type="date" name="fld_date">
<input type="month" name="fld_month">
<input type="week" name="fld_week">
<input type="time" name="fld_time">
<input type="number" name="fld_number">
<input type="range" name="fld_range">
<input type="color" name="fld_color">
<div>

<input type="submit" name="fld_submit">
</form>


PHP 用 テンプレート

デモページ

日付系など、特殊なコントロールでどのような値が入るか確認できますので、適当に値を入力して送信ボタンを押してください。

<?php
session_cache_limiter('nocache');
session_start();

header( "Content-Type: text/html; charset=utf-8" );

foreach( $_GET as $key => $value ) {
	$_GET[$key] = str_replace( "\"", "&#34;", $value );
}
?>
<!DOCTYPE html>
<html>
<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">
<style>
.fld_type {
	white-space: pre;
}
</style>
</head>
<body>

<form>
<div class="fld_type">
<input type="text" name="fld_default" value="<?= $_GET["fld_default"] ?>">
<input type="search" name="fld_search" value="検索" value="<?= $_GET["fld_search"] ?>">
<input type="tel" name="fld_tel" pattern="[0-9]{2,4}-[0-9]{2,4}-[0-9]{3,4}" value="<?= $_GET["fld_tel"] ?>">
<input type="url" name="fld_url" value="<?= $_GET["fld_url"] ?>">
<input type="email" name="fld_email" value="<?= $_GET["fld_email"] ?>">
<input type="datetime" name="fld_datetime" value="<?= $_GET["fld_datetime"] ?>">
<input type="datetime-local" name="fld_datetime_local" value="<?= $_GET["fld_datetime_local"] ?>">
<input type="date" name="fld_date" value="<?= $_GET["fld_date"] ?>">
<input type="month" name="fld_month" value="<?= $_GET["fld_month"] ?>">
<input type="week" name="fld_week" value="<?= $_GET["fld_week"] ?>">
<input type="time" name="fld_time" value="<?= $_GET["fld_time"] ?>">
<input type="number" name="fld_number" value="<?= $_GET["fld_number"] ?>">
<input type="range" name="fld_range" value="<?= $_GET["fld_range"] ?>">
<input type="color" name="fld_color" value="<?= $_GET["fld_color"] ?>">
<div>

<input type="submit" name="fld_submit">
</form>

<pre>
<?php 
foreach( $_GET as $key => $value ) {
	$_GET[$key] = str_replace( "&#34;", "\"",  $value );
}
print_r($_GET)
?>
</pre>

</body>
</html>

タグ：HTML5

posted by at 2017-05-27 19:26 | テンプレート |

2017年05月23日

mb_send_mail を使用したメール送信テンプレート : jQuery の $.ajax で、FormData オブジェクトを送信する



1) 別ドメインでも ajax が動作するように、Access-Control-Allow-Origin: * をセット
2) ブラウザの入力チェック機能を使う為に、FORM 内に入力を配置( 但し name 属性なし )
3) $.ajax の戻りとして JSON データを使用しているが、テストの為 JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE を指定

send_jquery_ajax.php

<?php
session_cache_limiter('nocache');
session_start();

$page_title = "メール送信(jQuery ajax POST)";

?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title><?= $page_title ?></title>
<style>
body {
	background-color: lemonchiffon;
}

#main {
	padding: 20px 0px 20px 100px;
}

.btn {
	width: 70px;
}
</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

var gdata;

$( function(){

	$("#mail_form").on("submit", function(){

		if ( !confirm("メールを送信しますか?") ) {
			return false;
		}

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

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

		// 送信フィールド作成
		formData.append("to", $("#to").val());
		formData.append("subject", $("#subject").val());
		formData.append("body", $("#body").val());

		// **************************************
		// サーバ呼び出し
		// **************************************
		$.ajax({
			url: "./post_action.php",
			type: "POST",
			data: formData,
			processData: false,
			contentType: false
		})
		// 成功
		.done(function( data, textStatus ){
			gdata = data;
			console.log( "status:" + textStatus );
			console.log( "data:" + JSON.stringify(data, null, "    ") );

		})
		// 失敗
		.fail(function(jqXHR, textStatus, errorThrown ){
			console.log( "status:" + textStatus );
			console.log( "errorThrown:" + errorThrown );
		})
		// 常に実行
		.always(function() {

		})
		;

		// FORM からの送信はしない
		return false;
	} );


} );

function checkSubmit() {

	if ( !confirm("メールを送信しますか?") ) {
		return false;
	}

	return true;

}
</script>
</head>
<body>
<h3><?= $page_title ?></h3>

<div id="main">

	<form id="mail_form">
		<p>宛　先：<input id="to" type="email" required value="<?= $_SESSION["to"] ?>"></p>
		<p>件　名：<input id="subject"  type="text" value="<?= $_SESSION["subject"] ?>"></p>
		<p>本　文：<input id="body" type="text" value="<?= $_SESSION["body"] ?>"></p>
		<p><input type="submit" value="メール送信(jQuery)"></p>
	</form>

	<input  class="btn" type="button" value="リセット" onclick='location.href="<?= $_SERVER["PHP_SELF"] ?>"'>
	
</div>

</body>
</html>


post_action.php

<?php
session_cache_limiter('nocache');
session_start();

//header( "Access-Control-Allow-Origin: http://localhost" );
header( "Access-Control-Allow-Origin: *" );
header( "Content-Type: application/json; charset=utf-8" );

mb_language("Japanese");
mb_internal_encoding("UTF-8");

if ( $_SERVER["REQUEST_METHOD"] == "POST" ) {

	$_SESSION["to"] = $_POST["to"];
	$_SESSION["subject"] = $_POST["subject"];
	$_SESSION["body"] = $_POST["body"];

	$from_header = "From: " . mb_encode_mimeheader( mb_convert_encoding("差出人","iso-2022-jp") );

	// このソースを置くサーバから使えるメールアドレス
	$from_header .= " <ユーザ名@ドメイン>";

	$result = mb_send_mail($_POST["to"], $_POST["subject"], $_POST["body"], $from_header);
	if ( $result ) {
		$_POST["result"] = 'メールを送信しました';
	}
	else {
		$_POST["result"] = 'メール送信に失敗しました';
	}

}
else {
	$_POST["result"] = 'GET メソッドで呼び出されました。POSTメソッドを使用して下さい';
}

print json_encode($_POST,JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE  );

?>

タグ：PHP jquery AJAX FormData

posted by at 2017-05-23 20:14 | テンプレート |

mb_send_mail を使用したメール送信テンプレート : FORM の action で URL を指定する(画面と処理を別にする)



send_form_action.php

<?php
session_cache_limiter('nocache');
session_start();

$page_title = "メール送信";


?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title><?= $page_title ?></title>
<style>
body {
	background-color: lemonchiffon;
}

#main {
	padding: 20px 0px 20px 100px;
}

.btn {
	width: 70px;
}
</style>


<script>
function checkSubmit() {

	if ( !confirm("メールを送信しますか?") ) {
		return false;
	}

	return true;

}
</script>
</head>
<body>
<h3><?= $page_title ?></h3>

<div id="main">

	<form action="mail_send.php" method="post" onsubmit='return checkSubmit()'>

		<p>宛　先：<input id="to" type="email" required name="to" value="<?=$_POST["to"] ?>"></p>
		<p>件　名：<input id="subject"  type="text" name="subject" value="<?=$_POST["subject"] ?>"></p>
		<p>本　文：<input id="body"  type="text" name="body" value="<?=$_POST["body"] ?>"></p>
		<p><input class="btn" type="submit" value=" 送信 "></p>

	</form>

	<input  class="btn" type="button" value="リセット" onclick='location.href="<?= $_SERVER["PHP_SELF"] ?>"'>

</div>

</body>
</html>


mail_send.php

<?php
session_cache_limiter('nocache');
session_start();

$page_title = "メール送信実行(POST)";

mb_language("Japanese");
mb_internal_encoding("UTF-8");

if ( $_SERVER["REQUEST_METHOD"] == "POST" ) {

	$from_header = "From: " . mb_encode_mimeheader( mb_convert_encoding("差出人","iso-2022-jp") );

	// このソースを置くサーバから使えるメールアドレス
	$from_header .= " <ユーザ@ドメイン>";

	$result = mb_send_mail($_POST["to"], $_POST["subject"], $_POST["body"], $from_header);
	if ( $result ) {
		$_POST["result"] = 'メールを送信しました';
	}
	else {
		$_POST["result"] = 'メール送信に失敗しました';
	}

}

$debug = "\$_POST\n" . print_r($_POST, true) . "\n\$_SESSION\n" . print_r($_SESSION, true);

?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title><?= $page_title ?></title>
</head>
<body>
<h3><?= $_POST["result"] ?></h3>
<?php if ( $_SERVER["REQUEST_METHOD"] == "POST" ) { ?>
<input  class="btn" type="button" value="戻る" onclick='location.href="<?= $_SERVER["HTTP_REFERER"] ?>"'>
<?php } ?>


<pre>
<?= $debug ?>
</pre>
</body>
</html>

posted by at 2017-05-23 15:58 | テンプレート |

2017年05月12日

PHP + CSS : mysqli クラスで select を自由に入力して table に表示するテンプレート

ただ、select 構文を自由に入力して結果を表示する、シンプルな PHP のサンプルです。

デモページ
(デモの為、select * from 社員マスタ しか実行できません)

PHP と HTML 部分 : query_data.php

<?php
session_cache_limiter('nocache');
session_start();

$dt = date('Y/m/d H:i:s');

if ( $_GET["text"] == "" ) {
	$_GET["text"] = "select * from syain";
}

?>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>MySQL SQL 実行</title>
	<link rel="stylesheet" href="query_data.css">

</head>
<body>

<h3>
	<?= $dt ?>
	<input  class="resetbtn" type="button" value="リセット" onclick='location.href="<?= $_SERVER["PHP_SELF"] ?>"'>
</h3>

<form 
	method="get"
	action="query_data.php"
>

	<textarea name="text"><?= $_GET["text"] ?></textarea>

	<br>

	<input 
		type="submit"
		name="send"
		value="送信"
	>

</form>

<?php


$mysqli = new mysqli('サーバ', 'ユーザ', 'パスワード', 'データベース');
$mysqli->set_charset("utf8");

if ($mysqli->connect_error) {
	die('Connect Error (' . $mysqli->connect_errno . ') '
		. $mysqli->connect_error);
}

$sql = $_GET["text"];

if ($result = $mysqli->query($sql)) {

	print "<table>";

	$first = true;
	while ($row = $result->fetch_assoc()) {


		if ( $first ) {

			// タイトル(列名)部分
			print "<tr>";

			$first = false;
			foreach ($row as $key => $value) {

				print	"<td>{$key}</td>";

			}

			print "</tr>";
		}


		print "<tr>";

		// データ部分
		foreach ($row as $key => $value) {

			print	"<td>{$value}</td>";

		}

		print "</tr>";


	}

	print "</table>";

	$result->close();
}
else {

	print "<div class='error'>{$mysqli->error}</div>";

}



$mysqli->close();
?>

<pre class="debug">
▼ $_GET の表示
<?php
print_r($_GET);
?>
</pre>

</body>
</html>


CSS 部分 : query_data.css

@charset "UTF-8";

body {
	margin: 0px;
}

body,h3,textarea,input,pre,td,th,pre {
	font-family: "ヒラギノ角ゴPro W6","Hiragino Kaku Gothic Pro W6","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Verdana,Arial,Helvetica,sans-serif;
}

h3 {
	margin: auto;
	background-color: cornsilk;
	padding: 5px 0px 5px 20px;
	border: 1px solid #c0c0c0;
	border-radius:0px;
	box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

form, table, .error, .debug {
	margin: 30px 0px 20px 30px;
}

textarea {
	width: 800px;
	height: 120px;
	font-size: 16px;
}

pre {
	font-size: 16px;
}

h3 input {
	background-color: royalblue;
	color: white;
	position: relative;
	top: -2px;
	left: 20px;
}

table {
	border-collapse: collapse;
}

table, td {
	border: solid #a0a0a0 1px;
}

td {
	padding: 4px;
}

.error {
	color: crimson;
}

.debug {
	box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	margin-bottom: 200px;
	margin-right: 100px;
	padding: 20px;
}

posted by at 2017-05-12 19:02 | テンプレート |

2017年05月11日

mb_send_mail を使用したメール送信テンプレート



1) キャッシュ無効
2) style
3) script
4) post 時に送信
5) from ヘッダ追加

※ required と type="email" で mb_send_mail のサーバエラーを回避

<?php
session_cache_limiter('nocache');
session_start();

$page_title = "メール送信";


?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title><?= $page_title ?></title>
<style>
#main {
	padding: 20px 0px 20px 100px;
}

.btn {
	width: 70px;
}
</style>
<script>
function checkSubmit() {

	if ( !confirm("メールを送信しますか?") ) {
		return false;
	}

	return true;

}
</script>
</head>
<body>
<h3><?= $page_title ?></h3>

<div id="main">
	<form method="post" onsubmit='return checkSubmit()'>

		<p>宛　先：<input type="email" required name="to" value="<?=$_POST["to"] ?>">	</p>
		<p>件　名：<input type="text" name="subject" value="<?=$_POST["subject"] ?>">	</p>
		<p>本　文：<input type="text" name="body" value="<?=$_POST["body"] ?>">			</p>
		<p><input class="btn" type="submit" value=" 送信 ">											</p>

	</form>

	<input  class="btn" type="button" value="リセット" onclick='location.href="<?= $_SERVER["PHP_SELF"] ?>"'>
</div>

<?php
mb_language("Japanese");
mb_internal_encoding("UTF-8");

if ( $_SERVER["REQUEST_METHOD"] == "POST" ) {

	$from_header = "From: " . mb_encode_mimeheader( mb_convert_encoding("差出人","iso-2022-jp") );

	// このソースを置くサーバから使えるメールアドレス
	$from_header .= " <ユーザ@ドメイン>";

	$result = mb_send_mail($_POST["to"], $_POST["subject"], $_POST["body"], $from_header);
	if ( $result ) {
		print 'メールを送信しました';
	}
	else {
		print 'メール送信に失敗しました';
	}

}

print "<pre>";
print_r($_POST);
print "</pre>";

?>
</body>
</html>

posted by at 2017-05-11 23:53 | テンプレート |

2016年07月05日

HTML5 : input 要素に datalist 要素リストを並べて入力候補を作成する

HTML5 の仕様の実現において、ブラウザによって振る舞いが違う事を最初に考慮すべきです。機能によっては、全く実装されていないブラウザもあるので、その場合は jQuery のプラグイン等を使用して同等の機能を実現する必要があります。

datalist をテストした、Chrome と Firefox と IE11 では、どれも実装されていましたが、表示や振る舞いに違いがあります。また、ここでは datalist 実装で想定される場合の入力フォームでの構成に便利であると思われる fieldset を使用して入力項目のグループ化を行っています。

fieldset のみでは、表示に支障があるので、いくつかの CSS を指定していますが、border-radius に関して、IE11 が動作しない事を確認しました。


Chrome

 
カーソルが over で無い場合には表示されませんが、カーソルが上に来ると、コンボボックスのようなコントロールが表示されて候補を開く事ができます

Firefox



フィールド内で下矢印を使用するか、フィールド内でマウスをクリックするかで候補を表示させます

IE11



フォーカスを得ると、候補が表示されます。

<style>
fieldset  {
	padding: 20px;
	border:1px solid #606060;
	border-radius: 12px;
	width: 300px;
	margin-bottom: 10px;
}
</style>
<form
	id="myform"
	action="http://winofsql.jp/php_get.php"
	target="myframe_datalist"
	accept-charset="utf-8">

	<fieldset>
		<legend>趣味</legend>
			<input
				type="text"
				id="mydata1"
				name="mydata1"
				list="hobby">
		<datalist id="hobby">
		<option value="読書">
		<option value="音楽">
		<option value="運動">
		</datalist>
	</fieldset>

	<fieldset>
		<legend>好きな食べ物</legend>
			<input
				type="text"
				id="mydata2"
				name="mydata2"
				list="food">
		<datalist id="food">
		<option value="寿司">
		<option value="ラーメン">
		<option value="カレーライス">
		</datalist>
	</fieldset>

	<input type="submit" name="send" value="送信">
</form>

<iframe
	name="myframe_datalist"
	frameborder="1"
	scrolling="yes"
	width="100%" height="100"
	style="margin-top:10px;">
</iframe>

posted by at 2016-07-05 14:34 | HTML |

HTML5 : input 要素の type 属性に tel 指定は、スマホで効力を発揮



type 属性の tel 指定は、特別な入力チェックはされませんが、スマホで入力したした場合に、入力パッドが数値のみのものになるので、そのような数値入力をスマホでしてもらう事を想定する場合に有用です。入力チェックそのものは、pattern 属性と併用するといいと思います。

<form
	action="http://winofsql.jp/php_get.php"
	target="myframe_tel"
	accept-charset="utf-8">
pattern なし <input
		type="tel"
		id="mydata1"
		name="mydata1">
	<br>
pattern あり <input
		type="tel"
		id="mydata2"
		name="mydata2"
		pattern="[0-9\-]+"> (数字とハイフンのみ)
	<br>
	<input type="submit" name="send" value="送信">
</form>
<iframe
	name="myframe_tel"
	frameborder="1"
	scrolling="yes"
	width="100%" height="100"
	style="margin-top:10px;">
</iframe>

posted by at 2016-07-05 13:23 | HTML |

HTML5 : input 要素に pattern 属性

HTML5 では、入力時にいろいろな入力チェックが可能になっていますが、現実的には pattern 属性を使用するのが一番カスタマイズしやすい便利な入力チェックです。

正規表現の記述方法ですが、世間では ^ と $ で挟んでいるものが多いですが、どうやらそれは必要なさそうです。

参考 : HTML5 Form Validations with Pattern Matching

※ Seeaaa のキャラクセットが shift_jis なので、form に accept-charset 属性を指定しています

<form
	action="http://winofsql.jp/php_get.php"
	target="myframe1"
	accept-charset="utf-8">
	<input
		type="text"
		id="mydata"
		name="mydata"
		pattern="[0-9]+">
	<input type="submit" name="send" value="送信">
</form>
<iframe
	name="myframe1"
	frameborder="1"
	scrolling="yes"
	width="100%" height="100"
	style="margin-top:10px;">
</iframe>


※ JavaScript によるメッセージのカスタマイズ方法

posted by at 2016-07-05 12:58 | HTML |

HTML5 : input 要素に required 属性

HTML5 では、入力時にいろいろな入力チェックが可能になっています。その代表的な機能が required 属性による未入力チェックです。

※ Seeaaa のキャラクセットが shift_jis なので、form に accept-charset 属性を指定しています

<form
	action="http://winofsql.jp/php_get.php"
	target="myframe1"
	accept-charset="utf-8">
	<input
		type="text"
		id="mydata"
		name="mydata"
		required>
	<input type="submit" name="send" value="送信">
</form>


※ メッセージのカスタマイズ方法

タグ：HTML5

posted by at 2016-07-05 01:03 | HTML |

2016年07月04日

HTML5 の input 要素の pattern 属性を利用して入力チェック

HTML5 では、type 属性に utl や tel や email や number を指定できますが、正規表現で指定したほうが微妙な調整が可能です。

以下は、数字のみ入力可能なフィールドですが、正規表現で自由に入力内容を制限可能です。但し、数字入力に関して言えば、type="number" を使用時に利用できる min 属性や max 属性があるので、そちらを利用するほうがいいでしょう( Chrome と Firefox では、jQuery UI の spinner と同様なコントロールがフィールドの右側に現れます。

▼ 実際の実行

<form action="http://winofsql.jp/php_get.php"
	target="my_ferame"
	accept-charset="utf-8">
	<input type="text"
		name="userid"
		pattern="[0-9]+"
		value="A">
	<input type="submit"
		name="send"
		value="送信">
</form>
<iframe name="my_ferame"
	frameborder="1"
	scrolling="yes"
	width="400"
	height="100" >
</iframe>

Google Chrome



Firefox



IE11


( IE11 はメッセージが変です )


関連する記事

JavaScript : 正規表現を使った、一般的な入力文字列の検査

posted by at 2016-07-04 23:41 | HTML |

2015年05月09日

PHP に URL から値を渡して、その値を元にしてコンボボックスの OPTION 要素を選択する3つの方法

こんな感じのコンボボックスでは、PHP や JavaScript で何もしないと、表示された時に選択されるのは、一行目のオプション内容です。これを $_GET["php_file"] の内容によって、表示した時の対象オプションを変更する事ができます

<select id="action_file"
	name="php_file">
	<option value="log_02a.php">連結演算子で文字列の連結</option>
	<option value="log_02b.php">文字列内に変数を埋め込んで連結</option>
</select>


方法その1

以下のようなリンクから表示すると、コンボボックスは２行目のオプションを選択して表示されます

http://winofsql.jp/php/basic/log_03.php?php_file=log_02b.php

▼ 三項演算子を使ったとても解りやすいコード

<select id="action_file"
	name="php_file">
	<option value="log_02b.php"
		<?= $_GET["php_file"] == "log_02a.php" ? "selected" : "" ?> >連結演算子で文字列の連結
	</option>
	<option value="log_02b.php"
		<?= $_GET["php_file"] == "log_02b.php" ? "selected" : "" ?> >文字列内に変数を埋め込んで連結
	</option>
</select>

これは、HTML の中に直に埋め込む上に、条件の判断を OPTION 要素の中の一行一行で完結してしまう方法です。具体的には、php_file=log_02b.php で渡された内容に基づいて、log_02b.php の OPTION 要素のみ selected を記述してブラウザに選択させます

方法その2

jQuery に選択させる方法です。選択の条件の元となる文字列のみ PHP で埋め込んでおいて、その文字列を使って jQuery で処理します。これは、PHP と JavaScript の連携プレイなので、それぞれの扱いを良く知った上で利用する必要があります。

http://winofsql.jp/php/basic/log_04.php?php_file=log_02b.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=600,initial-scale=1.0">

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){

	// 初期処理
	if ( "<?= $_GET["php_file"] ?>" != "" ) {
		$("#action_file").val("<?= $_GET["php_file"] ?>");
	}

	// コンボボックスの選択されたテキストをテキストエリアにセットする
	$("#set_text").click(function(){
		$("#text").val( $("#action_file option:selected").text() );

	});

});
</script>
</head>

<body>
<!-- ここにコンテンツを作成する -->
<select id="action_file"
	name="php_file">
	<option value="log_02a.php">連結演算子で文字列の連結</option>
	<option value="log_02b.php">文字列内に変数を埋め込んで連結</option>
</select>

<form method="POST"
	id="my_form"
	action="log_02a.php?param=init">件名 
	<input type="text"
		name="subject"
		id="subject">
	<input type="button"
		id="set_text"
		value="コンボボックスのテキストをセット">
	<br>
	<span style='vertical-align:top'>内容</span>
	<textarea name="text"
		id="text"
		style="width:400px;height:100px;"></textarea>
	<br>
	<input type="submit"
		name="send"
		value="送信">
</form>

</body>
</html>


方法その3

PHP コードを埋め込んで、配列を作ってループ処理で行う方法ですが、HTMLの中を虫食いのように PHP の実行処理を埋め込むのは、いろいろな意味でおすすめできません。見ただけでも見にくいし解り難くなっているのが解ります。

http://winofsql.jp/php/basic/log_05.php?php_file=log_02b.php

この方法の延長上である開発として納得の行く方法はありますが、PHP に慣れていないうちはまだまだ考える必要はありません。

<?php
	// 配列変数に、OPTION 要素用の値の一覧を作成しておく
	$options = array(
		"log_02a.php" => "連結演算子で文字列の連結",
		"log_02b.php" => "文字列内に変数を埋め込んで連結"
	);
?>
<select id="action_file"
	name="php_file">
<?php
	foreach( $options as $k => $v ) {
		print "<option value=\"";
		print $k;
		print "\"";
		if ( $_GET["php_file"] == $k ) {
			print " selected";
		}
		print ">";
		print $v;
		print "</option>\n";
	}
?>
</select>


最も容易なのは『方法その1』です

もちろん、この方法がベストというわけではありませんが、WEB アプリケーションを知る為にはできる限り簡潔にソースコードが記述されるほうが望ましいです。テクニックに走りすぎると、その時はいいかもしれませんがしばらく時間が空くと、自分で書いたのに良く解らない事がプロでもあります。知らない事が多い時点では、見える範囲はできるだけ狭くしましょう。

タグ：PHPの基本

posted by at 2015-05-09 17:52 | 処理 |

2015年05月08日

PHP にデータを渡す為の HTML としての FORM

この記事の前提となる内容『ページで機能分解。最初は POST メソッドで、FORM から他のページを呼び出すべし』

FORM の記述は WEB アプリケーションの基礎部分では『顔』です。とても重要なので、HTML 要素は全てしっかり意味を知っておく必要があります。HTML としての属性も、最低限のものは完璧にする必要があります。さらには、HTML5 で増えたとても便利な多くの要素は、いつでも何かのドキュメントを参照できるようにしておきましょう。

<form method="POST"
	id="my_form"
	action="log_02a.php?param=init">件名 
	<input type="text"
		name="subject"
		id="subject">
	<input type="button"
		id="set_text"
		value="コンボボックスのテキストをセット">
	<br>
	<span style='vertical-align:top'>内容</span>
	<textarea name="text"
		id="text"
		style="width:400px;height:100px;"></textarea>
	<br>
	<input type="submit"
		name="send"
		value="送信">
</form>

FORM で最も重要な属性は ACTION

もちろん他も全て重要ですが、WEBアプリケーションとしての振る舞いや作り方に大きな影響を及ぼすのが ACTION 属性です。

ACTION 属性は省略できます。何も書かなければ、自分自身にデータを送る事になるので、初心者向けではありません。記述すべき内容も格段に増える上に、どこで何をしているのかがとても解り難くなります。ここでは、送り先を別の PHP にして、画面を全く別の画面に遷移するという方法を取って、処理の流れを解りやすくしています。

WEBページ上のデモ

FORM の id は jQuery の処理用です

ここではまだ実装していませんが、いずれ利用するので id を設定しています。name 属性も指定できます。指定すると、JavaScript(DOM)では参照しやすくなりますが、WEB アプリケーションを作る上においては、あまり重要度は高く無いのでこのようになっています。(記述していません)

type="button" の要素はボタンです。サーバーへは送られません

件名の行の最後にあるボタンですが、id 属性が設定されており、jQuery で使用されます。サーバとは関係無いので name 属性はありません。JavaScript 用のボタンは他の要素でも可能ですし、jQuery であれば何でも使えますが、ここでは基本となる INPUT 要素を使用しています。

サーバーへ送るには name 属性が必要です

ここでは、件名の INPUT 要素と、内容の TEXTAREA 要素と、送信ボタンの3つです。

送信ボタンは、FORM からサーバへデータを送る為に HTML だけで処理する場合には必須で重要なコントロールです。INPUT 要素の TYPE 属性を "submit" に指定する事によってその機能が使えます。JavaScript を使用すれば、他のコントロールからサーバーへ送るようにする事もできますが、その方法を使って PHP の検証をするのはあまり意味がありません。

style="" で書かれる『インラインスタイル』

WEB アプリケーションとしての完成品を考えるのならば、スタイルシートを書いてクラスを HTML 要素に記述すべきですが、目的は PHP の検証なので、作成者が情報を見やすくする為に最速で直感的に設定可能なインラインスタイルを使用しています。

要素内の属性毎の改行

これは、ブセウザの表示とは全く関係の無い、人間が読む時に少しでも理解しやすいようにする為の工夫です。必須ではありませんが、他人に説明したい場合はこうしたほうがより理解を得やすいと思います。

ただ、手作業では時間がかかりやすいので、オンライのツールでさっと作ってしまえばいいです。

タグ：PHP HTML FORM

posted by at 2015-05-08 00:11 | HTML |

2015年05月07日

ページで機能分解。最初は POST メソッドで、FORM から他のページを呼び出すべし

PHP を使う根本的な目的は、ブラウザで入力されたデータをサーバ側で処理する事です。まず、最初にそれを頭に置いて最初のページの役目は FORM に限定します。

WEBページ上のデモ

FORM の主な仕様

1) METHOD は POST
2) サーバへの送り先は log_02a.php?param=init

PHP がまだ書かれていない FORM ページ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=600,initial-scale=1.0">

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){

	// コンボボックスの選択されたテキストをテキストエリアにセットする
	$("#set_text").click(function(){
		$("#text").val( $("#action_file option:selected").text() );

	});

});
</script>
</head>

<body>
<!-- ここにコンテンツを作成する -->
<select id="action_file"
	name="php_file">
	<option value="log_02a.php">連結演算子で文字列の連結</option>
	<option value="log_02b.php">文字列内に変数を埋め込んで連結</option>
</select>

<form method="POST"
	id="my_form"
	action="log_02a.php?param=init">件名 
	<input type="text"
		name="subject"
		id="subject">
	<input type="button"
		id="set_text"
		value="コンボボックスのテキストをセット">
	<br>
	<span style='vertical-align:top'>内容</span>
	<textarea name="text"
		id="text"
		style="width:400px;height:100px;"></textarea>
	<br>
	<input type="submit"
		name="send"
		value="送信">
</form>

</body>
</html>

コンボボックスを使った jQuery の処理

jQuery の記述で、コンボボックスで選択している文字列を、テキストエリアにセットする処理を、送信前の画面の補助処理として実装しています。
$("#set_text").click(function(){
	$("#text").val( $("#action_file option:selected").text() );

});

name 属性と id属性

ここでは、このコンボボックスのデータはサーバへは送らないので、FORM の中には記述していません。

ですが、画面上のコンテンツの特性として、いつでも FORM の中で動作可能なように、name 属性で名前を指定しています。これとは別の名前で、id 属性を指定していますが、これは jQuery での指定を明確で簡潔にする為に指定しています。name 属性と id 属性は同じ内容にしても良いですが、ここでは検証の為にわざと違うものを使用しています。

jQuery は、name 属性の処理が得意では無いが超優秀

name 属性しか指定されていない場合、それからもコンテンツを特定する事は可能ですが、解りにくく面倒なので id 属性を指定したほうが見通しが良くなります。

また、jQuery では、『セレクタ』を使用していろいろなコンテンツの特定方法があり、ここでも使用している『選択されたコンボボックスのテキスト』は少し複雑で高度である事が解ります。
$("#action_file option:selected").text()

ですが、このような処理も必要になるので、jQuery への理解はかなり深めたほうが良いでしょう。

送り先の主な仕様

1) キャラクタセットは、UTF-8
2) GET メソッドと POST メソッドで送られたデータの一覧を表示する
3) 連結演算子による文字列連結のサンプル
4) 『戻る』 リンクで元のページへ戻る

FORM から呼び出される最低限のPHP コード

<?php
header( "Content-Type: text/html; Charset=utf-8" );

print "<pre>";
print_r($_GET);
print_r($_POST);
print "</pre>";

print "【連結演算子で文字列の連結】<hr>";

print $_POST["subject"] . $_POST["text"];

print "<hr>";
?>
<a href="log_02.php?php_file=log_02a.php">戻る</a>

PHP 毎の処理を学ぶ為に後からページを増やす事を想定しています。その場合、コンボボックスのデータを増やす事になりますが、今はまだ先頭のこの処理のみが呼び出されるように固定になっています。

FORM が POST メソッドの場合は、GET メソッドも追加できます
log_02a.php?param=init

この記述は、GET メソッドにデータを追加して、$_GET["param"] = "init" を発生させる記述方法です。FORM 内のコンテンツは $_POST スーパーグローバル変数にセットされます。

アンカーによるリンクは、GET メソッドでサーバに送られます
log_02.php?php_file=log_02a.php

このリンクは、単純に log_02.php に戻るのでは無く、log_02.php の中で、$_GET["php_file"] が使えて、その中には "log_02a.php" がセットされている事を意味します。つまり、log_02.php は、どのページから戻って来たかを知る事ができると言う事です。


補足情報

FORM 要素はブロック要素です。改行が入るので注意して下さい( 画面作成時に結構重要です )

タグ：PHP

posted by at 2015-05-07 20:59 | 処理 |

PHP 書く前の『何も表示されないが、意味のあるページ』/ HTML と JavaScript の基本テンプレート

初心者にとって、WEB アプリが解りづらいのは、PHP 以外でも目に見える結果を大きく変える事が予想される、HTML・CSS・JavaScript の効果を理解するのに多くの知識を必要とするからですが、とにかく最初は画面の構成から少しづつ自分の中でルールを作って行く必要があります。

WEBページ上のデモ( 何も表示されません )

上のリンク先のページのソースコードは以下のようにとても短いものですが、これはこれで多くの意味を含んでいるのできっちり理解しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
	// ここに JavaScript のページの初期処理を記述
});
</script>
</head>

<body>
<!-- ここにコンテンツを作成する -->

</body>
</html>


1) PHP のソースに PHPコードを書かなくても良い

もちろん、ちゃんとしたアプリケーションを作っていけばそういう事はほぼ無くなりますが、通常存在する HTML ソースコードの拡張子を .php に変更してもそのまま表示されるという事です。

.php を拡張子として持つファイルの HTML ファイルとの大きな違いは、PHP モードに移行する事によって、PHP の処理を記述できるというところです。

2) HTML5 で書いたほうが以前より簡潔になる

HTML は、画面の表示部分や、ブラウザとの約束事を書く部分です。昔はもっと多くの事を書いていましたが、今では普通に HTML5 で書いて正しく表示されるので、PHP とそれほど直接関係無い部分ですから、簡潔なほうがいいに決まっています。

特に、SCRIPT 要素では他に属性を書かなくても問題ありません。JavaScript は PHP と直接関係する事は少ないですが、WEB アプリケーションの動作を決定する重要な要素なので、書く頻度としては高いです。よってこのようなシンプルな書き方のほうが良いと思います。

3) キャラクタセットは UTF-8。但し、エディタで保存は UTF-8N

いろいろ解らない事が多いのに、解らない部分が原因で正しく動かないのは、正しい知識を効率良く知るのに弊害となります。ですから、有無を言わさずキャラクタセットは UTF-8 にします。

但し

PHP のソースコードはそれなりのエディタを使用する必要があります。決してメモ帳を使ってはいけません。理由はさておいて、『それなりのエディタ』を使った上で保存を UTF-8N と言う最後に N が付いた形式で保存して下さい。

その時注意する事は、ソースコードの中に日本語がある事を確認して下さい。日本語が一切無い場合は何も気にしないでただ保存すれば問題ありません。しかし、後から日本語を追加してその時 UTF-8N で保存するのを忘れると、トラブルに巻き込まれるので、最初からコメントでもなんでもいいので日本語を書いて、UTF-8N で保存するのが理想的です。

4) 今時は jQuery は必須。Google のホスティングを書いておく
Google Hosted Libraries(jQuery)

Google がホスティングしている jQuery を使用して、jQuery UI の Spinner のボタン部分だけを使う方法

もう、WEBページを効率良く作るには、jQuery 無しでは考えられません。そのページで使用する予定が無くても最初から記述しておいて損はありません。

<script>
$(function(){
	// ここに JavaScript のページの初期処理を記述
});
</script>

この部分は、ブラウザの画面の準備が完了した時に実行される部分です。jQuery で書くにしても、ベタなJavaScript+DOM で書くにしても必ず必要な部分です。

5) viewport は書いておいたほうがいいと思います

Googe Chrome の Device Mode & Mobile Emulation に切り替えた場合に表示を見やすくするのに役立ちます。

スマホ対応するのでは無く、デベロッパーツールも WEB アプリには重要な要素なので、どうせだからいろいろ学ぶきっかけとして役に立つ事になるでしょう。

6) と言う事で、F12 でデベロッパーツールを開く

たとえページとして何も表示されなくても、そこには HTML と CSS と JavaScript のソースがあるはずです。

タグ：PHPの基本 HTML5 javascript

posted by at 2015-05-07 17:09 | テンプレート |

三項演算子を使った、コンボボックスのデータの再表示

三項演算子 : PHP オンラインマニュアル

マニュアルでは少し解りにくいところ(比較演算子)にありますが、構文自体は昔からあるオーソドックスなものです。

PHP でコンボボックスを扱う場合、送信後の画面で送信前に選択した内容を同じ状態で選択するには、PHP 側で意図的に selected を OPTION 要素の中に書き込む必要があります。その場合、以下のように記述しておくと余計なコードを他の場所に書かなくて済むのでとても使いやすいはずです。

<select id="action_file"
	name="php_file">
	<option value="log3.php"
		<?= $_GET["php_file"] == "log3.php" ? "selected" : "" ?> >連結演算子で文字列の連結
	</option>
	<option value="log4.php"
		<?= $_GET["php_file"] == "log4.php" ? "selected" : "" ?> >文字列内に変数を埋め込んで連結
	</option>
</select>

タグ：PHPの基本

posted by at 2015-05-07 11:16 | 文法 |

PHPの「連想配列」: associative array

PHP では、添字配列と連想配列は同じものだとされています。それについては、配列のページで書かれており、英文の原文では 以下のように記述されています。

PHP arrays can contain integer and string keys at the same time as PHP does not distinguish between indexed and associative arrays

PHPの配列は、インデックス付きと連想配列を区別せず、整数と文字列のキーを含めることができます


以下、日本語ページ

PHP: 配列 - Manual


つまり、あまり深く考えずに「配列」というものを数字または文字列で管理するグループ化された値の集合だと思って、一覧が欲しい場合は foreach を使います

<?

foreach( $_SERVER as $member ) {

	print $member;

}

?>


更新履歴
2010-10-06 : 記事作成
2013-05-04 : フォントサイズ・改行調整
2015-05-07 : 原文が変更されていたので修正

posted by at 2015-05-07 11:02 | ドキュメント |

検索やキーワードで日本語が化けない、ユーザーノートが付属した php.chm

PHP サイトからダウンロードしたものが今では使えます( Japanese の右端の chm )
( 化けないし、スタイルも設定されています )

 

但し、やはり HTML Help file (with user notes) をダウンロードするのがいいでしょう。そして、ダウンロード後はブロックは解除して下さい。




▼ 以下は、少し古いですが自分でビルドしたものです
Dropbox



ホームボタンで、良く使いそうなリンク一覧が表示されます

posted by at 2015-05-07 10:48 | ダウンロード |

AN HTTPD Server と PHP

Windows 用 WWW サーバー

実運用では無く、学習用の WWWサーバーとしてはこれ以外に無い『AN HTTP Server』ですが、古いソフトなので使い方にコツがあります

※ 古いソフトとなってしまいましたが、検証(テスト)用であればこれで十分です。

取り急ぎ、以下の画像の設定が可能であればそれで設定は十分です。





あとは、C:\httpd142p\user というディレクトリを作成してその中でテストする事が最も簡単です


PHP

PHP For Windows: Binaries and sources Releases

XP ならば、VC6 x86 Non Thread Safe で確実だと思います
Windows7 ならば VC9 x86 Non Thread Safe を試してみて下さい

Zip パッケージを C:\ にダウンロードして解凍して、c:\php にリネームして、
c:\php\php-cgi.exe が存在するようにして、c:\php に以下の php.ini をダウンロードします

php.ini のダウンロード

自分で作成する場合

php.ini-development を php.ini にリネームするのがいいと思います。(以下を参考にして下さい。)

posted by at 2015-05-07 10:41 | 環境 |

2014年09月20日

HTML5 の input 要素の type="file" で multiple を使う場合の記述方法と、type="submit" ボタンの FORM 属性の上書き。

<input type="file" 
	name="upload_files[]"
	multiple>

IE11 では、何かと HTML5 の対応が遅れていますが、ファイルを同時に複数選択できる multiple 属性を使用可能です。( もちろん、Google Chrome と Firefox でも使用できます )

PHP 側では、配列で取得できるように、HTML の name 属性の名前の最後に [] を付加します。

MAX_FILE_SIZE の名前を持つフィールドは、PHP の仕様にあわせたものですが、全てのファイルが対象となります。MAX_FILE_SIZE を持つフィールドは、仕様として file フィールドの前にある必要があります。

<form method="post"
	target="my_frame"
	action="upload.php"
	enctype="multipart/form-data"
	accept-charset="utf-8">
	<input type="hidden"
		name="MAX_FILE_SIZE"
		value="5000">
	<input type="file"
		name="upload_files[]"
		multiple>
	<input name="send"
		type="submit"
		value="アップロード">
</form>
<iframe name="my_frame"
	frameborder="1"
	scrolling="yes"
	width="600"
	height="300" >
</iframe>


以下は、PHP のスーパーグローバルを表示した結果です

Array
(
    [upload_files] => Array
        (
            [name] => Array
                (
                    [0] => Create_Alias_AnHttpd.vbs
                    [1] => Create_Alias_AnHttpd_Folder.reg
                    [2] => forms_fileupload_130908.zip
                )

            [type] => Array
                (
                    [0] => 
                    [1] => application/octet-stream
                    [2] => application/x-zip-compressed
                )

            [tmp_name] => Array
                (
                    [0] => 
                    [1] => /var/tmp/phpS3V82b
                    [2] => /var/tmp/php1P8Zgk
                )

            [error] => Array
                (
                    [0] => 2
                    [1] => 0
                    [2] => 0
                )

            [size] => Array
                (
                    [0] => 0
                    [1] => 462
                    [2] => 4055
                )

        )

)
Array
(
    [MAX_FILE_SIZE] => 5000
    [send] => アップロード
)

ここで、一つ目のファイルはサイズ制限の為、アップロードはできていません。

以下は、PHP のコードです

<?php
header( "Content-Type: text/html; Charset=utf-8" );
?>
<pre>
<?php
foreach( $_POST as $key => $value ) {
	$_POST[$key] = @htmlspecialchars($value, ENT_NOQUOTES);
}

print_r($_FILES);
print_r($_POST);

?>
</pre>

現在 IE11 では使用できませんが、FORM 要素と INPUT 要素を関係づける input 要素の form 属性を使った記述方法はこちらから。

<input name="send"
	type="submit"
	formmethod="post"
	formenctype="multipart/form-data"
	formaction="upload.php"
	value="アップロード">

type="submit" ボタンで使用できる、FORM 要素の属性の上書きは、以下のように記述できます。これによって、ボタンによって送り先を自由に変更できる大きなメリットが加わりました。

<form id="form_unit"
	target="my_frame"
	accept-charset="utf-8">

	<input form="form_unit"
		type="range"
		name="userid">

	<br>

	<input name="send"
		type="submit"
		formaction="get.php"
		value="GET送信">

	<input name="send"
		type="submit"
		formmethod="post"
		formaction="post.php"
		value="POST送信">

	<br><br>

	<input type="hidden"
		name="MAX_FILE_SIZE"
		value="5000">
	<input type="file"
		name="upload_files[]"
		multiple>

	<input name="send"
		type="submit"
		formmethod="post"
		formenctype="multipart/form-data"
		formaction="upload.php"
		value="アップロード">

</form>

<iframe name="my_frame"
	frameborder="1"
	scrolling="yes"
	width="600"
	height="300" >
</iframe>

タグ：HTML5

posted by at 2014-09-20 00:38 | HTML |

2014年09月19日

Google Chrome でページ上の任意の要素(オブジェクト)の詳細を表示する方法

▼ クリックすると、GIF アニメーション画像が画面中央に大きく表示されます

( 最初の停止は 4秒で、途中の文字説明は4秒停止します。最後6秒停止して元へ戻ります )

現行のブラウザでは、皆 console.log と console.dir が実行できますが、Google Chrome でオブジェクトを表示したい場合3通りの方法があります。

1) $("セレクタ")
2) console.log( オブジェクト )
3) dir( オブジェクト )

1) は、コマンドライン API のメソッドで、jQuery が読み込まれていなくても同じ記述でオブジェクトを参照できます。
1) と 2) は同じ結果の場合もあれば違う場合もあるので目的に応じて利用するといいと思います。
3) は、console.dir の別名で、オブシェクトの情報を階層構造で全て表示します。

これらを使い、ページ上のインスペクトされた任意の要素を表示する手順です。

1) 要素を選択( 虫眼鏡アイコンでインスペクトモードに入って選択 )
2) Elements タブで対象としたいオブジェクトを確定させる
3) 右クリックして Copy CSS path でセレクタ文字列を取得
4) $("セレクタ文字列") で参照します

posted by at 2014-09-19 20:19 | ブラウザ |

Google Chrome のデベロッパーツールで要素の追加をリアルタイムで表示テストする

▼ クリックすると、GIF アニメーション画像が画面中央に大きく表示されます

( 最初の停止は 6秒で、途中の文字説明は4秒停止します。最後6秒停止して元へ戻ります )

Google Chrome のデベロッパーツールを F12 で開いて、このブログのメニューの追加をテストしています。メニューは LI要素が一つの単位なので、既存のメニューユニットをクリップボードにコピーしてから、編集モードに移行して今あるメニューの後ろに一つ追加し、テキスト表示を変更してうまく表示されるかをテストしています。




▼ 編集モード



Google Chrome のデベロッパーツールでは、このような大きなエディタを開かなくても、属性を直接ダブルクリックすれば、編集可能な状態になります。

また、そのような状態で属性全体を全てクリアすると、属性単位で削除する事も可能です。以下は、属性側をダブルクリックしたので、属性が選択されて編集可能になっています。



値をダブルクリックすると、値が選択されます。但し、属性の値が URL の場合はクリックするとウインドウを開いてしまうので、属性を選択してからカーソルを移動させるか、前述の大きなエディタを使うといいと思います。

タグ：Google Chrome

posted by at 2014-09-19 13:09 | ブラウザ |

2014年09月18日

HTML5 の input 要素の type 属性に range を指定すると、スライダーになります ( Chrome と Firefox と IE11 )

HTML5 の input 要素の拡張は、IE11 ではかなり遅れているというか控えめなのですが、何故か気合が入っているのが、type=range を使ったいわゆる『スライダー』コントロールです



ある範囲を指定する為のコントロールなので、min、max、step 属性が併用できます。何も指定しなければ、min="0" max="100" step="1" を指定した事になります。

両端の値は残念ながら表示される事は無く、スライダーを動かした時の値が表示されるのは、IE11 のみで、そのままでは Chrome や Firefox でリアルタイムに値を知る事ができません。

そこで、もう一つフィールドを追加してスライダーの onmousemove イベントで値をセットしてみました。

▼ 実際の実行

<form action="http://winofsql.jp/php_get.php"
	target="my_frame"
	accept-charset="utf-8">
	<input type="range"
		name="userid"
		onmousemove='document.getElementById("userid2").value=this.value;'>
	<br>
	<input type="number"
		name="userid2"
		id="userid2">
	<input type="submit"
		name="send"
		value="送信">
</form>
<iframe name="my_frame"
	frameborder="1"
	scrolling="yes"
	width="400"
	height="100" >
</iframe>

posted by at 2014-09-18 23:54 | HTML |

input 要素に対して値変更可能なコンボボックスにする HTML5 の list 属性

結論から言うと、Google Chrome と Firefox と IE11 でこの機能が使用できます。さらに、pattern 属性と併用して、入力する値にも制限を加える事ができます。

これだけで十分に有用で、WEB アプリケーションで今まで欲しかった機能( JavaScript で実装していた機能 )が誰でも input に datalist 属性の中にセットした コンボボックスで今まで利用して来た仕様と同じ option セットを関係付けるだけで利用可能になります。

Google Chtome

Google Chrome はとても優秀です。Google Chrome のみ完全にコンボボックスと同等の機能を有しており、value と text を同時表示する機能に加え、pattern で指定した文字に該当しない場合は、一覧から排除してくれます。( pattern そのものの検査 は、Firefox と IE11 でも機能しています。排除してくれるのは Chrome のみです )



これには本当に驚きで、総じて HTML5 における input 要素の拡張に関しては全てにおいて一歩先を行っています。

Firefox

Firefox のこの機能は微妙です。実装にあたって、入力の履歴と同じリソースを使って実現しているので、過去の入力値と、リストが同時に表示されるという不便な状況になっており、削除するにはキャッシュの削除と同等の手間が必要です。



IE11

IE11 は、Firefox に比べてかなりマシです。空の場合のみクリックすると、常にリストが表示されて選択可能ですが、値が入っている場合は、やはりリストが出ないので修正時の意味がありません。

ただ、Firefox に比べ、値がある場合は x のクリアコントロールが表示されるので、ひと手間楽です。




▼ 実際の実行

<datalist id="kansai1">
<option value="1">大阪</option>
<option value="2">京都</option>
<option value="3">兵庫</option>
<option value="4">滋賀</option>
<option value="5">奈良</option>
<option value="6">和歌山</option>
</datalist>
<datalist id="kansai2">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
<option value="6"></option>
</datalist>
<datalist id="kansai3">
<option value="大阪"></option>
<option value="京都"></option>
<option value="兵庫"></option>
<option value="滋賀"></option>
<option value="奈良"></option>
<option value="和歌山"></option>
</datalist>

<form action="http://winofsql.jp/php_get.php"
	target="my_frame"
	accept-charset="utf-8">
	<input type="text"
		list="kansai1"
		pattern="^[1-5]+$"
		name="userid1">
	<br>
	<input type="text"
		pattern="^[1-5]+$"
		list="kansai2"
		name="userid2">
	<br>
	<input type="text"
		list="kansai3"
		name="userid3">
	<input type="submit"
		name="send"
		value="送信">
</form>
<iframe name="my_frame"
	frameborder="1"
	scrolling="yes"
	width="400"
	height="100" >
</iframe>


関連する記事

使いどころが難しいですが、入力をコンボボックス化する jQuery プラグインの実装が不便だったので、modify しました。

posted by at 2014-09-18 16:31 | HTML |

2014年09月17日

HTML5 の input 要素を number タイプにすると、min、max、step 属性で、spinner を利用できます( Chrome と Firefox。IE11 は内容の検査のみ )

jQuery UI では、spinner と呼ばれるコントロールですが、type 属性に number を指定する事によって同様のコントロールになります(Chrome と Firefox )。min 属性と max 属性をさらに指定すると、最小値(min)と最大値(max)の間を( step を指定しなければ 1 づつ )増やしたり減らしたりするコントロールが、フィールドの右横に実装されます。

増減値は、step 属性で指定できるので、汎用性も高いです。

Google Chrome



フィールド右横のコントロールは、マウスカーソルを近づけるか、フォーカスが入力フィールドにある時( つまりアクティブな時 ) だけ表示されます。

ただ、最大値と最小値の値の都合で、増分 2 にした場合、奇数だけになったり、偶数だけになったりしてちょっと問題はあります。

その際、コントロールで変更しようとすると、奇数か偶数に飛びます。入力した値で送信しようとすると以下のようなエラーになります




Firefox



Google Chrome と同様で、奇数だけになったり、偶数だけになったりした上、奇数とコントロールが決めた時に、偶数値を入力すると、コントロールが動作せずに値が変わらず枠が赤くなってエラー扱いになっています。



IE11

IE11 では、値変更用のコントロールが無い事をのぞいて、属性による検査の仕様は同等です。




▼ 実際の実行

▼ 奇数扱いになっています

<form action="http://winofsql.jp/php_get.php"
	target="my_frame"
	accept-charset="utf-8">
	<input type="number"
		name="userid"
		value=""
		step="2"
		min="-1"
		max="5">
	<input type="submit"
		name="send"
		value="送信">
</form>
<iframe name="my_frame"
	frameborder="1"
	scrolling="yes"
	width="400"
	height="100" >
</iframe>

posted by at 2014-09-17 15:56 | HTML |

2014年09月14日

JavaScript : 正規表現を使った、一般的な入力文字列の検査


入力文字列の検査が目的なので、window オフジェクトの下にプロパティを作成して、その中に複数のメソッドを定義しています。引数は、JavaScript で、入力フィールドの検査をする事を想定しているので、文字列を取り出す処理は、メソッド内に委ねる為に id 渡しとしています。

簡単な正規表現の利用

ここで使われている正規表現は、基礎なものしか使用していません。しかし、これを理解すればもう少し複雑な正規表現を読み解く事が容易になります。

1) ^ … $

これは、最初と最後を示します。限定された入力という範囲を明確にしています。

2) .

任意の文字です。( 一つの文字です )

3) +

直前の文字が一つ以上続く文字列を意味します

4) \

エスケープ文字です。正規表現で使われる特殊な文字を、通常の文字として使いたい場合に前に付けます

5) []

その中で指定された文字種( グループ )を、一つの文字として考えます。
[0-9]+ とすれば、数字文字が、一つ以上連続している文字列になります。

5) {}

直前の文字が何文字なのかを指定するもので、{1,2} として２通り指定する事も可能です

日付チェック

正規表現では、フォーマットのチェックしかできないので、日付が日付として正しいかどうかをさらにチェックしています。

<script type="text/javascript">
window["_c"] = { 
	"isMail": function(id) {
		var str = document.getElementById(id).value;
		return ( str.match(/^.+@.+\..+$/) != null );
	},
	"isSuji": function(id) {
		var str = document.getElementById(id).value;
		return ( str.match(/^[0-9]+$/) != null );
	},
	"isEiji": function(id) {
		var str = document.getElementById(id).value;
		return ( str.match(/^[a-zA-Z]+$/) != null );
	},
	"isEisuji": function(id) {
		var str = document.getElementById(id).value;
		return ( str.match(/^[a-zA-Z0-9]+$/) != null );
	},
	"isDate": function(id) {
		var str = document.getElementById(id).value;
		if ( str.match(/^[0-9]{4}\/[0-9]{1,2}\/[0-9]{1,2}$/) != null ) {
			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>

<input type="text"
	id="check_target" >
<br>
<input type="button"
	value="isMail"
	onclick='
		if ( !_c.isMail("check_target") ) {
			alert("メールアドレスではありません");
		}
	'>

<input type="button"
	value="isSuji"
	onclick='
		if ( !_c.isSuji("check_target") ) {
			alert("半角の数字ではありません");
		}
	'>

<input type="button"
	value="isEiji"
	onclick='
		if ( !_c.isEiji("check_target") ) {
			alert("半角の英字ではありません");
		}
	'>

<input type="button"
	value="isEisuji"
	onclick='
		if ( !_c.isEisuji("check_target") ) {
			alert("半角の英数字ではありません");
		}
	'>

<input type="button"
	value="日付のフォーマットと論理チェック"
	onclick='
		if ( !_c.isDate("check_target") ) {
			alert("日付として要求する内容に合っていません");
		}
	'>

posted by at 2014-09-14 00:56 | JavaScript |

JavaScript から扱う現在の URL ( 移動と再読み込みと情報取得 )

WEB 上のページ間を移動するには、アドレスバーに直接 URL を入力するか、ページ上のリンクをクリックするか、JavaScript で実行される window.open というメソッドが実行されるイベントのあるコントロールを UI 上で操作するか、といういずれかの操作で実現する事ができます。( ブックマークはリンクとおなじです )

window.open は、そもそも JavaScript で行うページ移動のメソッドですが、本来の目的としては、新しいウインドウを開くという処理がデフォルト処理となっています( 第二引数に _self を指定するとそのウインドウ内で移動 )

それに、window.open は移動が一番の目的で、現在の URL の情報を取得する事はできません。そのような目的に適したオブシェクトとして、window.location オブジェクトが存在します。

アドレスバーに直接 URL を入力する

この処理を window.location オブジェクトを使って JavaScript で処理する事ができます。

location = "http://php.net/manual/ja/ini.core.php?param=test#ini.upload-max-filesize";

これを、JavaScript 内で実行すると、右辺に設定された URL がブラウザに表示されます。

他のウインドウの表示場所を変更したい場合は、そのウインドウを参照して、そのウインドウの location オブジェクトを使います

ページをサーバーから再度読み込む

この処理は、WEB アプリケーションとして重要な処理で、location オブジェクトのメソッドで実行します。

location.reload(true);

reload メソッドの引数は、true を指定します。昨今のブラウザはキャッシュの処理に気を使って、true を指定しないでもうまく行く場合がありますが、仕様としては true を指定しないとキャッシュから読み込む事になります。

location オブジェクトの情報

これは、ブラウザのデベロッパーツールで確認できます。上記の URL へ移動した後、各ブラウザのツールでコンソールを開いて、console.dir( location ) で確認する事ができます。

WEBアプリケーションとして特に注意するのは、href と search と hash です。
( location そのものに URL をセットするのと、href にセットするのは同等です )

Google Chrome



IE11




Firefox インスペクタ

posted by at 2014-09-14 00:47 | JavaScript |

JavaScript : ３秒後に何かを実行する処理

setTimeout メソッドを使います。

IE 関しては、第三引数が使えるのは IE10 からです。第3引数(第4、第5…)は、タイマーをセットした段階で有効な値をタイマー関数に引き渡す事ができます。

使い方 その(3) は、eval と同等なので予期せぬ悪意ある者の影響を受けたかもしれない文字列が含まれている可能性を排除できないので、一般的には使わないように言われています。

ただ、実際問題として文字列として処理を書くのは不便なので使用している場面は少ないものと思われます。

<script type="text/javascript">

// ***********************************
// 使い方 その(1)
// ***********************************
setTimeout( function( a ) {
	console.log("無名 function");
	console.log( a );
}, 3000, "引数1" )

// ***********************************
// 使い方 その(2)
// ***********************************
function my_func(a) {
	console.log("my_func");
	console.log( a );
}
setTimeout( my_func, 3000, "引数2" )

// ***********************************
// 使い方 その(3)
// ***********************************
setTimeout( "console.log('文字列処理');", 3000 )


// ***********************************
// 引数の有効さの確認
// ***********************************
function my_func_v() {

	var local_v = "実行時の値"

	setTimeout( function( a ) {
		console.log("無名 function");
		console.log( a );
	}, 3000, local_v )

}
my_func_v();


</script>

posted by at 2014-09-14 00:44 | JavaScript |

2014年09月13日

JavaScript : コンボボックス(SELECT) の追加と削除の処理

コンボボックスは、WEB アプリケーションで使われる事の多いコントロールです。SELECT 要素は、size 属性を指定しなければ、コンボボックスとなりますが、コンボボックスは場所を取らずに多くのデータを扱えるので、非常に便利です。

WEB アプリケーションでは最初にサーバの指定した内容をそのまま使う事が多いですが、利用価値の高いコントロールでかつ、多少複雑な構成になっているので、リストの内容の追加と削除の方法は確実に知っておく必要があります。

selectedIndex プロパティ

コンボボックスを扱う上で最も重要なものです。この中には、その時選択されているリストの番号が入っているので、JavaScript で内容を操作する場合に必ず使用されます。

関連する情報
HTML で 最初から任意の OPTION 要素を選択させるには、OPTION 要素内に selected を書きます。これを利用して、PHP ではページを再表示する際に埋め込みます。

<form name="frm"
	action="<?= $_SERVER['SCRIPT_NAME'] ?>"
	target="_self"
	method="get">
	<select name="address">
		<option value="1" <?= $_GET['address'] == "1" ? "selected" : "" ?>>大阪</option>
		<option value="2" <?= $_GET['address'] == "2" ? "selected" : "" ?>>京都</option>
		<option value="3" <?= $_GET['address'] == "3" ? "selected" : "" ?>>神戸</option>
	</select>
	<input type="submit" name="send" value="送信">
</form>

※ その他の FORM 系 PHP 用 埋め込みテンプレート

表示されているテキストの操作 / options コレクション

SELECT 要素は、実際の値を OPTION 要素のリストで保持します。ほとんどの操作は、SELECT 要素に対して直接実行できますが、OPTION 要素に挟まれたテキストだけは、options コレクション経由で操作します

例: alert(target.value + "/" + target.options[target.selectedIndex].text);

target.value は、現在選択されている option の値です。target.selectedIndex は現在選択されている option の番号なので、options[target.selectedIndex] で参照し、text プロパティを使います

selectedIndex が -1 の状態は未選択状態

selectedIndex に -1 を代入すると、何も表示されない『未選択状態』になります。当然この状態で selectedIndex を参照すると -1 になるので、その場合は何も処理をしないようにする注意が必要です。

add メソッドで追加

通常、このようなメソッドは コレクションに実装されるもので、実際に options にもありますが、SELECT 要素のメソッドとして実行が可能です。

引数には、要素のみを指定する場合と、要素と index を指定する場合がありますが、前者はリストの最後に追加され、後者は指定した index 番号のリストとなります。

新規の option 要素は、document.createElement メソッドで作成します。document.createElement で作成された要素は、既存の画面に表示されているいずれかの要素の下に追加するまでは、画面に表示されません。この場合は、SELECT 要素の add メソッドで追加しますが、一般的には appendChild メソッドで他の要素に追加します。

<script type="text/javascript">
function addOption1( value, text ) {
	// オプション要素を作成
	var option = document.createElement("option");
	// 属性をセット
	option.value = value;
	option.text = text;
	// SELECT 要素を name で 取得
	var target = document.getElementsByName("ken")[0];
	// コレクションに追加
	target.add(option);
	// 追加した option を選択
	target.selectedIndex = target.length-1;
}
function addOption2( value, text ) {
	// SELECT 要素を name で 取得
	var target = document.getElementsByName("ken")[0];
	// option の数を一つ増やす
	target.length = target.length + 1
	// 増やした option を参照する
	var option = target[target.length-1];
	// 属性をセット
	option.value = value;
	option.text = text;
	// 追加した option を選択
	target.selectedIndex = target.length-1;
}
function addOption3( value, text ) {
	// オプション要素を作成
	var option = document.createElement("option");
	// 属性をセット
	option.value = value;
	option.text = text;
	// SELECT 要素を name で 取得
	var target = document.getElementsByName("ken")[0];
	// options コレクションに指定番号で追加
	target.add(option,2);
	// 追加した option を選択
	target.selectedIndex = 2;
}
function removeOption() {
	// SELECT 要素を name で 取得
	var target = document.getElementsByName("ken")[0];
	// 選択されている index を取得
	var index = target.selectedIndex;
	// -1 の場合何も選択されていない
	if ( index != -1 ) {
		// 選択されている index で削除
		target.remove(index)
	}
}
function displayValueText() {
	// SELECT 要素を name で 取得
	var target = document.getElementsByName("ken")[0];
	// 選択した内容の値を取得
	alert(target.value + "/" + target.options[target.selectedIndex].text);
}
</script>
<form action="http://winofsql.jp/php_get.php"
	target="my_frame">
	<select name="ken">
		<option value="40">大阪</option>
		<option value="41">京都</option>
		<option value="42">兵庫</option>
		<option value="43">和歌山</option>
		<option value="44">奈良</option>
	</select>
	<input type="submit"　value="送信">
</form>

<iframe name="my_frame"
	frameborder="1"
	scrolling="yes"
	width="400"
	height="100"
	style='border:solid 1px #777;'>
</iframe>
<br>
<input type="button"
	value="追加1"
	onclick='addOption1(45,"滋賀1");'>
<input type="button"
	value="追加2"
	onclick='addOption2(45,"滋賀2");'>
<input type="button"
	value="途中追加"
	onclick='addOption3(45,"滋賀3");'>
<br>
<input type="button"
	value="選択を削除"
	onclick='removeOption();'>
<input type="button"
	value="選択した内容を表示"
	onclick='displayValueText();'>

posted by at 2014-09-13 20:08 | JavaScript |

FORM の送信と JavaScript

WEB アプリケーションでサーバーへデータを送信する際、操作している人に確認を求める必要がある場合があります。一般的な WEB アプリケーションでは、サーバ側でチェックしてエラーがあればその内容を表示しますが、それは不特定多数を対象にしているので、失敗を可能な限り避けたいのであって、決して操作している人には親切な仕様ではありません。

信頼された WEB アプリケーションであれば、クライアントの環境や運用ルールも事前に話し合っているので、できる限り操作する人に親切な仕様として、送信前に可能なチェックを行います。チェックが全て通った後に、再度送信して良いかを尋ねるのが一般的です。

FORM を送信する

FORM を送信する方法はいくつかありますが、オーソドックスなのは FORM の中に送信用のボタンを配置する方法です。しかし、JavaScript を使うのであれば、必ずしも 送信用のボタンは必要ありません。

その場合、FORM オブジェクトに対して submit メソッドを実行します。

オブジェクトの参照では、FORM 要素に name 属性が設定されておれば、『document.名前』で参照可能です。もちろん、他の参照方法でも可能で、document.名前 は比較的古い方法です。

JavaScript のイベント

要素の中に直接書くイベントは、JavaScript の『無名関数』と同じものとなります。通常、インラインで書く場合は長い処理を書かずに関数を呼び出して処理します。関数は、別の場所に定義されるわけですが、それらと同等な処理が、無名関数によって行う事ができ、関数名を使わずに処理が可能です。

一般的な JavaScript のソースコードで、無名関数を使う事はあまりありませんが、jQuery を使う場合は、jQuery のイベント定義とし無名関数を使う事のほうが一般的となります。

FORM 要素の中に書く onsubmit イベントは注意

onsubmit='return 関数名()' のように、最初に return がある事が重要です。ここは、無名関数なので、無名関数からシステムに結果を返す必要があるからです。この結果が false であれば、システムはフォームを送信しません

onsubmit イベント より先に発生する onclick イベント

onsubmit イベントは、操作的に最後に処理されます。明確なのは、ボタンをクリックしてから onsubmit イベントが実行されるという事です。ですから、ボタンのインラインで変数に値をセットしておけば、onsubmit イベントではその値を使っていろいろな処理分岐が行えます

<script>
function submitForm() {
	if ( !confirm( "送信しますか?" ) ) {
		return;
	}

	document.frm.submit();
}

function submitForm2() {
	if ( !confirm( "Submit ボタンで送信しますか?" ) ) {
		return false;
	}
	return true;
}
</script>
<form name="frm"
	id="my_form"
	target="iframe_win"
	action="http://toolbox.winofsql.jp/info2.php">
</form>
<input type="button"
	value="JavaScript送信"
	onclick='submitForm();'>
<br>
<iframe id="iframe_win"
	name="iframe_win"
	frameborder="0"
	scrolling="no"
	width="400"
	height="100"
	style="border:solid 1px #000;">
</iframe>
<form onsubmit='return submitForm2()'
	target="iframe_win2"
	action="http://toolbox.winofsql.jp/info2.php">
	<input type="submit"
		value="submitボタン送信">
</form>
<iframe id="iframe_win2"
	name="iframe_win2"
	frameborder="0"
	scrolling="no"
	width="400"
	height="100"
	style="border:solid 1px #000;">
</iframe>
<form id="js_form"
	target="iframe_win3"
	action="http://toolbox.winofsql.jp/info2.php">
</form>
<input type="button"
	id="my_button"
	value="無名関数イベント登録">
<script>
// WEB ページでは通常上から下へど実行されるので、
// コントロールの下で無いと参照できません
document.getElementById("my_button").onclick = function() {
	if ( !confirm( "送信しますか?" ) ) {
		return;
	}

	document.getElementById("js_form").submit();
};
// 無名関数は、INPUT 要素内で onclick イベントで関数を呼び出すのと同等です
</script>
<br>
<iframe id="iframe_win3"
	name="iframe_win3"
	frameborder="0"
	scrolling="no"
	width="400"
	height="100"
	style="border:solid 1px #000;">
</iframe>

posted by at 2014-09-13 15:37 | JavaScript |

- 1 2 次の30件>>

	マニュアル( php.chm )
	PHPモードとHTMLモード
	4種類のスカラー型
	PHPの「連想配列」
	入力を受け取る $_GET と $_POST
	file_get_contents による比較的小さなファイルのダウンロード
	デバッグ利用 : file_put_contents
	セッションの注意事項

text
search
tel
url
email
datetime
datetime-local
date
month
week
time
number
range
color
submit