@blog.justoneplanet.info

JavaScript、PHP、MySQLを使ったり

2007年12月12日

■ためになった事

下記、ITmediaより引用

成果の挙がった人だけが努力している訳ではなく、成果の出ない人を努力不足と決め付けない寛容さが身につくと思います。

努力も真面目も言うまでもなく良いことですが、原理主義的にそれを信じ込むと複雑な世間や多様な人間に対して寛容さを失っていきます。クレーマーの急増と魔女狩的な批判風潮は、ここに遠因があるのではと考えます

複雑系の社会において、原理主義的な考えは危険なことだと思います。因果関係が見えないところで、べき論を強要すると他人に対する寛容さが失われてしまいます。共生とシェアする発想が、今後はより重要になってくると思います。

感想

日頃、仕事に追われるとドウしても他人に対する寛容さを見失いがちな自分です。成果が出ないのは確かに足りない部分がある事も言えるかもしれませんが、人間の足りない部分は、これまで生きてきた長い長い積み重ねによって成立してます。つまり「相手が努力をしていないから成果が出ない」という思い込みは、一方的で相手に敬意を払わない考え方であると思いました。

現在の環境、現実に『No』を突き付けるよりも、どうしたら『Yes!』と喜べるのかに重点を置いた方が、ずっと建設的ですし!

しかし、寛容と惰性は背中合わせであり、同時にこの二つは自身の行動に対する言い訳に無意識的に使われてしまう危険性をはらんでいるとも考えます。

おまけ

引用もとのタイトル「報われない努力もある」、まぁその通りといえばそうなんですが、ちょっと凹んでいる人がみたらキツイ題名かな!?なんて。。。個人的には「努力が報われなくても腹を立てず諦めず、結果が出るまで頑張れ!」みたいな風に受け止めてます。

■Googleドキュメント

以下、Web担当者フォーラムより引用

「はたしてGoogleドキュメントは、Officeをネットワーク上で利用できるようにしたサービスなのだろうか?」

もちろん答えは「ノー」だ。

Googleドキュメントは長い歴史に裏付けされた総合ビジネスソフトOfficeのように多機能ではない。今のところ「ビジネス文書作成に最低限必要な機能は用意されている」といったところが最大の評価だろう。だが、もちろんGoogleがフォーカスしているのは、すべての機能の充実ではなく、複数メンバーでのネットを介したコラボレーションだ。無駄な機能は省いてウェブ上での利用に特化し、だれでも迷うことなくスムーズに“共同作業”を行える。これがGoogleドキュメントの最大の特徴なのだ。

感想

+α的なものなのだが、GoogleはやがてMicrosoft Officeのシェアに影響を与えるような存在になるであろう。それはGoogleパックで無料で(Officeの代替となりえるクライアントアプリ)StarSuiteをダウンロードできるようにした事からも伺える。やがてGoogleはこのクライアントアプリとGoogleドキュメントを結合させ(何故ならば似たものを、あえて分離しておく必要もなく、合わされば飛躍的に使い勝手は良くなる)、それは自然とMicrosoft Officeとの対立になるようになる。

でもGoogleの「無料」ってのはイイっすよね~。Officeって凄く高いんだもん=3

selectのoptionをJavaScriptで入れ替えよう

■どういうことかというと

1つ目のselectの選び方によって2つ目のselectの表示を変更する。

■サンプル

■注意点

JavaScriptを使えない環境(携帯など)や、JavaScriptをOFFにしている人は当然この選択肢が選べないので、アプリケーションや登録フォームなど、基幹となる部分で使用する場合、上記の人への対策を施すべきである。

■サンプルソース(HTML)

<form action="#">
<select name="type" id="type">
<option value="hiragana">ひらがな</option>
<option value="alpha">アルファベット</option>
<option value="number">数字</option>
</select>
<select name="figures" id="figures">
<option value=""></option>
</select>
</form>

■サンプルソース(JavaScript)

window.onload = function(){
	var optionValuesAry = new Array(
		new Array('あ','い','う'),
		new Array('a','b','c'),
		new Array('1','2','3')
	);
	var changeOption = function(){
		var selectedNum;
		for(var i=0; i&lt;document.getElementById('type').options.length; i++){
			if(document.getElementById('type').options[i].selected){
				selectedNum = i;
			}
		}
		for(var i=0; i&lt;document.getElementById('figures').options.length; i++){
			document.getElementById('figures').options[i] = null;
		}
		for(var i=0; i&lt;optionValuesAry[selectedNum].length; i++){
			document.getElementById('figures').options[i] = new Option(optionValuesAry[selectedNum][i]);
		}
		document.getElementById('figures').options[0].selected = true;
	}
	document.getElementById('type').onchange = function(){
		changeOption();
	}
	changeOption();
}

■解説

2番目の選択肢の定義

1番目の選択肢の順番に応じた2番目の選択肢を定義する。

var optionValuesAry = new Array(
    new Array('あ','い','う'),
    new Array('a','b','c'),
    new Array('1','2','3')
);

選択項目の判定

以下のコードを1番目のセレクトの特定イベントに関連付ける事で判定する。

var selectedNum;
for(var i = 0; i < document.getElementById('type').options.length; i++){
    if(document.getElementById('type').options[i].selected){
        selectedNum = i;
    }
}

2番目のセレクトの操作

一旦、全てのoptionを何も入ってない状態にする。1番目の選択を変えた後の2番目の選択肢が、変える前よりも少なかった場合に、差分の選択肢が残ってしまうといった不具合を防ぐ目的が以下のコードにはある。

for(var i=0; i < document.getElementById('figures').options.length; i++){
    document.getElementById('figures').options[i] = null;
}

2番目のセレクトにそれぞれの値をセット

上述によって判定した、「1番目の選択されているもの」に対応した「2番目の選択肢」を1つ1つセットする。

for(var i=0; i < optionValuesAry[selectedNum].length; i++){
    document.getElementById('figures').options[i] = new Option(optionValuesAry[selectedNum][i]);
}

2番目のセレクトをセット

以下のコードで、2番目の選択肢の最初の選択肢を選択させる

document.getElementById('figures').options[0].selected = true;

読み込み直後の表示

人為的に選択されるまで、2番目に何も入ってない状態が起こってしまうため、ロード時に以下の関数が実行されるようにする。

changeOption();

PHPからリファラーを取得しよう

■結論

$_SERVER['HTTP_REFERER']

上記、スーパーグローバル変数にリファラーがセットされています。

■注意

これをいくら書き換えようとしてもユーザーから送信されてくる値は変化しません。

JavaScriptでリファラーをセットしよう(Ajax通信)

■結論

function createXMLHttpRequest(){
	if(window.XMLHttpRequest){return new XMLHttpRequest();}
	else if(window.ActiveXObject){
		try{return new ActiveXObject("MSXLM2.XMLHTTP");}
		catch(e){
			try{return new ActiveXObject("Microsoft.XMLHTTP");}
			catch(e){return null;}
		}
	}
	return null;
}
function getData(){
	var request = createXMLHttpRequest();
	request.open('POST', /*特定のURL*/);
	request.onreadystatechange = function(){
		if(request.readyState == 4 && request.status == 200){
			var res = request.responseXML
		}
	}
	request.setRequestHeader('content-type', 'application/x-form-urlencoded');
	request.setRequestHeader('referer', /*リファラーにセットしたいURL*/);
	request.send("");
}

■解説

簡単に言うと、Ajax通信をする前に、Ajax通信をする際のリクエストヘッダーをsetRequestHeaderメソッドで変更する感じです。

JavaScriptで出来ない事

様々な検索キーワードでこのサイトに来てくれてるようなんですが、明らかに「勘違いかな?」と思われるワードもあるので一応、書いておきます。

■JavaScriptだけでサーバーに何かデータを保存(もしくは削除)できるのか?

できません。

何らかのサーバーサイドで動くプログラムが必要になります。

■JavaScriptだけでデーターベースに接続したりデータを修正したりできるのか?

できません。MySQLをはじめ、どんなDBでも出来ません。

■機密情報の取り扱い

できません。

基本的にソースはユーザーに丸見えです。

■ソースの隠蔽

できません。

難読化は出来ますが、それを分かり易くするツールもあります。また、あくまでも読みづらくなるだけです。

■クライアント側に保存されているデータへのアクセス

Cookie以外のデータにはアクセスできません。

■まとめ

JavaScriptとはユーザーのPCに渡す処理手順のようなもので、ユーザーのPCの中でのみ動作し、処理するデーターはユーザー側に渡す必要がある。すなわち機密データやアカウント情報などはサーバー側で保持せねばならず、JavaScript(HTML、CSSそのほかクライアントに送られるデータ)には決して書いてはイケナイ。またAjaxで通信する場合も、サーバー側には平のテキストのような文章しか通信で送れず、それを元にサーバー側で何らかの処理(DBとの接続、データの書き込み、削除など)をする場合は、JavaScriptから送られた通信を元にして、処理をするサーバーサイドのプログラムが必要になる。

metaタグでリダイレクトしよう

■結論

headタグ内に以下のような記述を加える。

<meta http-equiv="refresh" content="リダイレクトまでの時間; URL=リダイレクト先URL" />

■例

60秒後にGoogleへジャンプします。

<meta http-equiv="refresh" content="60; URL=http://www.google.co.jp/" />

2007年12月08日

■世間の冬休みの日数が気になった

だからこんなアンケートをはじめてみた。

画像置換がうまく出来ない(Netscape7.1バグ)

■結論

以下のように、バックグラウンドの指定はx軸指定、y軸指定ともにpxで指定しよう!

background-position: -100px -35px;

■理由

以下のような指定はNetscape7.1に認識されない為である。

background-position: -100px bottom;