※ パクレゼルヴではWeb開発エンジニアを大募集中!詳細はこちら

Archive

Archive for the ‘HTMLとか’ Category

HTMLの事とか  

2010/7/5 月曜日 14:33:29

先月はWebデザインを主にしていました。
プログラムを全く触っていないわけじゃないですよ・・・?
まぁともかく!HTMLとかCSSとか、後PHPですこし気付いた事でも。
自分メモ的な感じで。

array_shift()とarray_pop()

array_shift()
array_pop()
てのがあるんですが。この関数、例えばarray_shift()だったら

$data = array('青','赤','黄','白','緑','紫','金','銀');
$data1 = array_shift($data);
echo $data1;
foreach($data1 as $val){
    echo $val;
}

ってやれば

//$data1
青
//$data
赤黄白緑紫金銀

となる。配列の先頭の要素を抜き出す。
array_pop()は最後の要素を抜き出す。
元の配列が変わってしまうという点に注意さえすれば、便利な関数なんですが、
元の配列が変わってしまった事で起きた出来事が。

配列に都道府県毎の料金を入れて、最大値と最低値、都道府県毎の料金を表示させるって事をやってたんですが、
料金の最大値と最低値が表示されない!なんで!
と思って調べたら、array_shift()とarray_pop()を使っていたためでした。
料金の配列を降順でソートして、array_shift()で先頭(最大値)を、array_pop()で最後(最低値)を
抜いていたのです。

そこで、reset()、end()の登場。

reset()は内部ポインタを最初の要素まで戻し、その値を返す。
end()はその逆。

array_shift()とarray_pop()と似たような動きをする関数です。
array_shift()等とは違って、元の配列が変わらない。
処理速度はというと・・・そんなに変わらないそうです;;(若干reset()のほうが早いようですが)

しかし、max()、min()でやったら?って気がするかも・・・

因みにこのreset()関数、同じソースで、同じ配列を複数回使う場合などに使えます。というか使います。

$array = array('1', '2', '3', '4');

next($array);
echo current($array) ; // "2"

//ポインタをリセットして再度実行
reset($array);
echo current($array) ; // "1"

こんな感じかな?

以降はhtml関係のお話
メイリオについて
>メイリオとは、和文ゴシック体フォントの一つで、Vista以降のマイクロソフト製OSに標準で搭載されてる。
まぁXPとか2003とかで使ってたMS UI Gothicに代わるフォントなんですけど、今回これに苦しめられました。

font-family:"メイリオ",Meiryo,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","MS P Gothic","MS Pゴシック",Verdana,Arial,sans-serif;

てな感じで指定してるんですけど、OSがVistaと7だとデザインが崩れるんですよね。

なぜかというと、メイリオは全角文字がすべて固定幅のフォントであり、行間も従来フォントに比べて広いから。
なのでゴシックなどを想定して作ってるとデザインが崩れる。

font-familyでメイリオはずして、ゴシックを先頭にするとかで解決。
line-heightで行間を短くするのでもOKかな?
僕は今回line-heightで行間短くして対処しました。ゴシックだとなんか字が汚いんですよね・・・

つっしー HTMLとか, PHP, Tips

htmlメール  

2010/7/1 木曜日 3:54:13

おいすー^^

とかやってみる

こんばんは のびーにょです

HTMLメールについて

phpでHTMLメールを送る場合、

//送信元アドレス
$from "";
//BCCアドレス
$bcc ="";
//タイトル
$title ="";
//本文
$body ="";
//エラー時の戻り先
$replay="";

mb_language('Japanese');
mb_internal_encoding("UTF-8");
mb_detect_order("ASCII, JIS, UTF-8, EUC-JP, SJIS");
$header = "FROM: ".$from."\n";
$header.= "BCC: ".$bcc."\n";
$header.= "Return-Path: ".$from."\n";
$header.= 'MIME-Version: 1.0' . "\n";
$header.= "Content-Type: text/html; charset=ISO-2022-JP";

$title = mb_convert_kana($title,"KV");
$body = mb_convert_kana($body,"KV");
$body = mb_convert_encoding($body, 'JIS', 'auto');

mb_send_mail($mail,$title,$body,$header,"-f ".$replay);

ってやってやればbodyにhtml書けば送れるらしいよ。

$header.= 'MIME-Version: 1.0' . "\n";
$header.= "Content-Type: text/html; charset=ISO-2022-JP";

要するにヘッダーに上記を追加してやれば良いと言う話。
text/plainじゃなくてtext/htmlにしてやるべし。
MIMEもお忘れなく。

まぁPEARのMailとか使ったほうがいいけど。

と、まぁそんなことは割とどうでもよくて。

CSSで背景指定した場合

background-image:url(hogehoge);

とかね

HTMLメールだと背景画像が表示されないらしい。
主にhotmailとGmail

と、言うことで、じゃぁどうしようか ってなる。

ここで懐かしのテーブル背景!

<table background="hogehoge">

って奴

これならhotmailでもGmailでも背景として画像が使えるらしい

初めて知った

まぁ携帯ばっかり作ってたのでHTMLメールは知らないのです。

携帯のHTMLメールはマルチパート部分が結構複雑な上にキャリアでちょっと違う部分もあるので注意です。

機会があればそのへんも書きたいと思います。

のびーにょ HTMLとか, PHP

久々にベタ書きで入力フォームを書いてみる  

2010/6/30 水曜日 15:47:47

モリモリモリモリです。

Webアプリは実際の業務ではCakePHP、symfony、Zend Framework等のPHPフレームワーク、
自社フレームワーク、またテンプレートエンジンとしてsmarty等を使うかと思います。

WEBプロミングを始めたばかりの人は何を参考にすればいいか割と苦労するかなと。
私自身がそうでした。

ベタ書きで簡単な入力フォームを書いたらどーなるかなと思って久々に書いてみることにしました。

以下は、セッションを利用したPC向けの書き方です。
手抜きな部分も有りますので参考程度にお願いします。

< ?php
session_start();

$param = array('name','tel');
foreach($param as $val){
	// SESSION値よりもPOST値を優先
	if(isset($_POST[$val])){
		${$val} = trim($_POST[$val]);
	}elseif(isset($_SESSION[$val])){
		${$val} = trim($_SESSION[$val]);
	}else{
		${$val} = '';
	}
}

// 確認ボタンが押された際の処理
if(isset($_POST['confirm_btn'])){
	// バリデーション
	$err = array();
	foreach($param as $val){
		switch($val){
			case 'name':
				if($name == ''){
					$err['name'] = '※名前は必須です。<br />';
				}
				break;
			case 'tel':
				if($tel == ''){
					$err['tel'] = '※電話番号は必須です。<br />';
				}elseif(!preg_match('/^\d+$/',$tel)){
					$err['tel'] = '※電話番号は数字で入力して下さい。<br />';
				}
				break;
			default:
		}
	}
	// エラーが無ければ
	if(count($err) == 0){
		// 値をセッションに格納
		foreach($param as $val){
			$_SESSION[$val] = ${$val};
		}
		// 確認画面へロケート
		header('Location:http://example.com/confirm.php');
		exit;
	}
}
?>
<html>
<body>
<form method="post" action="">
	< ?php
	if(isset($err['name'])){
		echo $err['name'];
	}
	?>
	名前: <input type="text" name="name" value="<?php echo htmlspecialchars($name); ?/>" /><br />
	< ?php
	if(isset($err['tel'])){
		echo $err['tel'];
	}
	?>
	電話番号: <input type="text" name="tel" value="<?php echo htmlspecialchars($tel); ?/>" /><br />
	<input type="submit" name="confirm_btn" value="確認" />
</form>
</body>
</html>

投稿の際に勝手に置換されたりするので、上記のコードをまんまコピペしてもうまく動きません。汗
適宜修正お願いします。
すいません。

5行目あたりからの処理の

${$val}

ですが、こんな感じで可変変数を使うことにより、$name、$telに入力値が入ってくるようになります。

これについては弊社の下記記事も参考にどうぞ。
http://labs.pakureserve.jp/archives/124

バリデーション処理もベタで書いてますがご了承下さい。

処理としては、エラーが無ければセッションに格納して、確認画面へロケーション。
確認画面ではセッションの値を表示
(表示の際は項目に応じてhtmlspecialchars、nl2br関数等を使って表示させましょう)し、
登録完了画面で登録が完了したら、

$_SESSION = array();

等でセッションを空にしてやる感じで。

あと、最近たまたま気付いたことですが、もしこのフォームのテキストフォームが一つだった場合、
IEでテキストを入力してENTERキーを押すと、多分動きません。笑

これはIEのバグ?

IEでテキストフォームが一つの場合、ENTERキーでSubmitした場合に、
なぜか type=”submit” のパラメータと値がpostされないのです。
つまり、この場合だと、$_POST['confirm_btn']のパラメータと値が送信されません。

これを回避するためには以下のようなテキストフォームをダミーで入れといてやれば大丈夫です。

<input type="text" style="display:none;" />

…美しくない!

MoriMoriMoriMori HTMLとか, PHP

簡単な入力フォームこそ気を付けよう  

2010/5/31 月曜日 22:57:17

phpで作る入力フォームでやってしまいがちな事を紹介します。

入力した情報を確認画面で表示させる、というよくあるパターン。
(ベタ書きで失礼します。)

▼form.php(入力画面)

<form method="post" action="./confirm.php">
	ニックネーム: <input type="text" name="title" value="" /><br />
	<input type="submit" value="送信" />
</form>

▼confirm.php(確認画面)

< ?php
if(isset($_POST['title']) && $_POST['title']){
	echo htmlspecialchars($_POST['title']);
}else{
	echo '未入力';
}
?>

これ、一見問題無さそうですが、ある文字を入力すると未入力と表示されてしまいます。

そうです。

0(ゼロ)です。

TRUEかFALSEかで判断しているため、post送信された0はFALSEとして見なされます。

なのでこうやりましょう。

▼confirm.php(確認画面)

< ?php
if(isset($_POST['title']) && $_POST['title'] != ''){
	echo htmlspecialchars($_POST['title']);
}else{
	echo '未入力';
}
?>

どうしても「0」という名前で登録したいんだ!というお客様がいないとも限りませんからね。。

 

さて、もう一つ紹介します。

クロスサイトスクリプティング(XSS)のお話です。

今度は同じphpファイル自身にpost送信するパターン。
▼http://example.com/test.php

< ?php
// なんらかの処理
?>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
…
</form>

action先に何の迷いも無く

$_SERVER['PHP_SELF']

と書くと、実はこれが結構危ないのです。

他のhtmlファイルで下記のようなソースを書き、上記のスクリプトへのリンクを貼りましょう。
そして、クリックしてみましょう。(攻撃!)

<a href="http://example.com/test.php/%22%3E%3Cscript%3Ealert('xss');%3C/script%3E/">攻撃</a>

JavaScriptが実行され、アラートが表示されるかと思います。

URLの後半部分はURLエンコードされたものです。

$_SERVER['PHP_SELF']は、渡されたURIのホスト部分の後から、
GETクエリ部分の前まで(?の前まで)をURLデコードした形で格納します。

つまり、$_SERVER ['PHP_SELF']は、

/test.php/"><script>alert('xss');</script>/

となるので、

<form method="post" action="/test.php/"><script>alert('xss');</script>/">

となり、JavaScriptが実行されてしまうわけです。

 
では結論。
このようにしましょう。

</form><form method="post" action="">
…
</form>
<form method="post" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>">
…
</form>
<form method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>">
…
</form>

空にしてあげるのが一番ラクかと思います。

MoriMoriMoriMori HTMLとか, PHP

カラーコード、カラーネームのバリデーション  

2010/4/30 金曜日 17:14:35

久しぶりの投稿です。
HNはチョコボールでしたがMoriMoriMoriMoriに変えます。
無意味にCamelCaseで。

管理画面でdivブロックのタイトル背景色なんかを設定する項目で、
入力項目に正しいカラーネーム、カラーコードが入力されているかどうかをチェックする
バリデーションの関数を紹介します。

// 有効なカラーネーム(147色)もしくはカラーコードかどうかチェック
function checkColor($str, $name)
{
	if($str == ''){
		return '';
	}
	// カラーネーム配列(147色)
	$arrColorName = array('aliceblue','antiquewhite','aqua','aquamarine','azure','beige','bisque','black','blanchedalmond','blue','blueviolet','brass','brown','burlywood','cadetblue','chartreuse','chocolate','coolcopper','copper','coral','cornflower','cornflowerblue','cornsilk','crimson','cyan','darkblue','darkbrown','darkcyan','darkgoldenrod','darkgray','darkgreen','darkkhaki','darkmagenta','darkolivegreen','darkorange','darkorchid','darkred','darksalmon','darkseagreen','darkslateblue','darkslategray','darkturquoise','darkviolet','deeppink','deepskyblue','dimgray','dodgerblue','feldsper','firebrick','floralwhite','forestgreen','fuchsia','gainsboro','ghostwhite','gold','goldenrod','gray','green','greenyellow','honeydew','hotpink','indianred','indigo','ivory','khaki','lavender','lavenderblush','lawngreen','lemonchiffon','lightblue','lightcoral','lightcyan','lightgoldenrodyellow','lightgreen','lightgrey','lightpink','lightsalmon','lightseagreen','lightskyblue','lightslategray','lightsteelblue','lightyellow','lime','limegreen','linen','magenta','maroon','mediumaquamarine','mediumblue','mediumorchid','mediumpurple','mediumseagreen','mediumslateblue','mediumspringgreen','mediumturquoise','mediumvioletred','midnightblue','mintcream','mistyrose','moccasin','navajowhite','navy','oldlace','olive','olivedrab','orange','orangered','orchid','palegoldenrod','palegreen','paleturquoise','palevioletred','papayawhip','peachpuff','peru','pink','plum','powderblue','purple','red','richblue','rosybrown','royalblue','saddlebrown','salmon','sandybrown','seagreen','seashell','sienna','silver','skyblue','slateblue','slategray','snow','springgreen','steelblue','tan','teal','thistle','tomato','turquoise','violet','wheat','white','whitesmoke','yellow','yellowgreen');

	// 精査用に小文字に統一
	$str = strtolower($str);
	if(!preg_match("/^[0-9a-f]{6}$/",$str) && !preg_match("/^[0-9a-f]{3}$/",$str) && !in_array($str, $arrColorName)){
		return $name.'のカラー指定が不正です。<br />';
	}
	return '';
}

データベースへの登録の際、カラムには、カラーネームの場合はそのまま入れ、
カラーコードの場合は、「#ffcc33」のように先頭に#を付けて登録してあげたほうが良いかと思います。
なぜなら、出力の度にカラーコードの場合は#を付ける、
といった判定をする処理を入れるのはパフォーマンスが悪いからです。
微々たる差異ですが。

出力の際のコーディング(ベタ書き)です。

if($title['bgcolor'] == ''){
	echo '<div style="text-align:center;">'
}else{
	echo '<div style="text-align:center;background-color:'.$title['bgcolor'].';">';
}
echo 'ブロックタイトル';

XHTMLでは16進数のカラーコードの英字は小文字で指定した方が良いので、
XHTML前提で利用する場合、「FFCCCC」のように入力された場合は強制的に
「#ffcccc」のように小文字にして(#もつけて)登録してあげてもいいかもしれません。
また、入力欄にカラーコードの場合、#つきで入力されても通るようにしてあげるとさらに親切かと。

fontタグのcolor属性の値やbodyタグのtext属性の値等は、
3桁の16進数での表記は当然ダメですよ!

■ダメな例

<body text="#000">
<font color="#fff">

ついでに書きますが、XHTMLでの属性checkedの誤った書き方。

<input type="radio" checked />

属性=”属性値”という書き方が基本なので、

<input type="radio" checked="checked" />

と書きましょう!

以上、MoriMoriMoriMoriMoriMoriでした。

MoriMoriMoriMori HTMLとか, MySQL, PHP, データベース