JavaScript関連

Javascriptでプルダウンの選択を変更する(jQuery)

Javascriptでプルダウンの選択を変更する(getElementsByTagName)

↑過去記事のjquery版です。

headタグ内に以下を記述。


<script type="text/javascript" src="(jqueryへのパス)"></script>
<script>
function change_pulldown(value_name){
$("#hoge").val(value_name);
}
</script>

bodyタグ内に、以下の様な選択を記述。


<p>特殊車両リンクをクリックしてください。プルダウンの選択が変わります。</p>
<p><a href="javascript:void(0)" onclick="change_pulldown('p1')">イングラム</a></p>
<p><a href="javascript:void(0)" onclick="change_pulldown('p2')">グリフォン</a></p>
<p><a href="javascript:void(0)" onclick="change_pulldown('p3')">タイラント2000</a></p>
<p><a href="javascript:void(0)" onclick="change_pulldown('p4')">クラブマンハイレッグ</a></p>
<select id="hoge">
<option value="">---</option>
<option value="p1">イングラム</option>
<option value="p2">グリフォン</option>
<option value="p3">タイラント2000</option>
<option value="p4">クラブマンハイレッグ</option>
</select>

Javascript内の記述は凄まじく簡略化されましたね。

  1. 下のselectタグに、IDとして「hoge」と設定しておく。
  2. リンクには、クリック時に作成したchange_pulldown関数を呼び出す設定をする。その際、引数として、プルダウンで選択したいvalueを渡す。
  3. change_pulldown関数では、指定したID(ここではhogeとしている)のselectタグに中身(val)を入れる。

これでリンクをクリックすると指定したものが選択されるようになります。

サンプル [新しいウィンドウで開く]

 

 

総合管理者 | 2016年04月30日 | コメント(0) | トラックバック(1) | JavaScript関連

Mediaboxでエラー

現象がニッチすぎて需要があるかどうかは分からないけど、つまったので一応メモ。

Lightbox系javascript「Mediabox」でIE8にてうまく動作しない現象が発生しました。

IE Testerで実行したところ、

container = new Element("div", {id: "mbContainer"}).inject(center, "inside");

部分でエラーが発生しているらしい。

記述自体は他のサイトを作成したときに使った記述をそのまま持ってきたのに(もちろんそのサイトではIE8以下でも正常に動作してます)おかしいな~と思っていたら、HTMLの記述に問題がありました。

id="container"というIDを全く関係ないdivタグに使ってたせいで、干渉しエラーが発生してしまっていたようです。

これを別のID名に変更したところIE8以下でも動作するようになりました。

う~ん、ニッチすぎる^^;

MP4(H.264)の動画でクロスブラウザ

メモ

MP4(H.264)動画をHTMLに埋め込む場合、下記のようにvideoタグで埋め込むことになるかと思います。

<video src="video.mp4" width="320" height="200" controls preload></video>

が、ブラウザによってはH.264をサポートしていなかったり(Firefox)、そもそもvideoタグが利用できなかったり(IE8)で、結局はそれぞれのブラウザ用の動画を用意したり、タグを振り分ける必要がありました。

しかし、それを一気に解決する方法がこちらのサイトに書かれておりました。

IE8でHTML5のvideoタグを使う方法 - [Swb:]渋谷に住むWEBデザイナの備忘録

やり方はとにかく簡単!

  1. スクリプトをダウンロード&解凍。
  2. apiフォルダのみサーバに丸ごとアップロード。
  3. head内に<script src="(apiフォルダのアップロード先)/html5media.min.js"></script>を記述。
  4. 普通にvideoタグを書く。<video src="video.mp4" width="320" height="200" controls preload></video>

これだけ。

これでIE8、Firefoxでも再生可能となりました。

もともと再生可能なブラウザもありますが、以下のブラウザで再生が確認されました。

  • IE8・IE9
  • Firefox
  • Chrome
  • Safari(Windows・Mac・iPad・iPod touch)
  • Androidのブラウザ

マップ表示用スクリプトをバージョンアップしました[バージョン1.4b4]

コメントにてバグ報告をいただいたため、マップ表示用スクリプト【Google Map API v3版】を1点修正しました。

■今回修正されたバグ
緯度経度がマイナスになることを考慮していなかったため、一部地域のみに複数マーカーが集中して表示されると、中心地がおかしくなる。

修正前のスクリプトで表示した場合

修正後のスクリプトで表示した場合

※なお、マーカーが日本のみにある場合は、旧バージョン(v1.3b)をお使いでもこの問題は起きません。

ダウンロードはこちら(最新バージョン:version1.4b4)

■使い方を見る:マーカー個別版マーカー複数板

location.href (Javascript)と $_SERVER['HTTP_REFERER']; (PHP)

PHPで

$_SERVER['HTTP_REFERER'];

を実行すると、リンク元のURLを取得することが出来ます。

これを利用するとダイレクトアクセスを防いだり、どこから飛んできたのかを調べることが出来るのですが、Javascriptの

location.href = "リンク先URL";

で飛んでこられると、取得できない場合が有ります。

どういう場合かというと、「IE8以下」の場合。

またお前か・・・

素直に「a href="リンク先URL"」を使うか、formのsubmit、PHPの「header("リンク先URL");」などの方法で飛ばすことにしましょう。

最近はIE9やFirefoxでチェックしてしまうので、見落としがちになってしまいます。注意せねば。

マップ表示用スクリプトをバージョンアップしました[バージョン1.4b3]

マップ表示用スクリプト(GoogleマップAPI v3で地図とマーカー・バルーンを表示するスクリプト)をバージョンアップ(version1.4b3)しました。(ダウンロードはこちら

version1.4b2からの変更点は内部処理のみなので、差し替えるだけで動作します。

■使い方はこちら:マーカー個別版マーカー複数板

■主な変更箇所

Internet Explorer7 or 8において、特定の件数を超えるとスクリプトエラーが出てしまう問題を解決しました。

 

■バグの詳細

ループで回している中にjquery関数の$()があったのですが、(↓思いっきり適当に書くとこんな感じ)

for(var i=0; i<x; i++){
var data = $("#hoge")[i];
}

Internet Explorer7 or 8において、特定の件数を超えると、なぜか$()がスクリプトエラーとなってしまいました。

解決方法は、$()をループの外で一度変数に入れるようにしました。

var hoge = $("#hoge")[i];
for(var i=0; i<x; i++){
var data = hoge[i];
}

jquery関数を使う時は注意しよっと。

prototype.js × scriptaculous.jsで不具合【Internet Explorer9】

つい最近、仕事用PCのIEを9にバージョンアップしました(いまさら)。

ところが、いきなりJavascriptの不具合に遭遇(IEェ・・・)。

scriptaculous.jsを使った、ドラック&ドロップによるソートができない。

IE9に対応していないのかな?とも思ったんですが、こちらのサイト(scriptaculous:dragdrop.js ソートする)のサンプルを見たところ、IE9でも正常に動作しています。

IE8だとうまくいくのになんでかな~と悩んでいるとscriptaculous.jsを配布しているページにこんな文章が。

This release contains Prototype 1.7.

もしやと思い、使っているprototype.jsを開いてみると

Version: '1.6.0.3',

なぜ!?

prototype.jsを最新のものに差し替えたら正常に動作しました。

なんで古いバージョンのprototype.jsになってたんだろ^^;

まあ普通はscriptaculous-js-1.x.x.zipをダウンロードすると、対応しているprototype.jsもついてくるのでこんなことは起こらないでしょうが、一応念のためメモ。

nandani | 2011年10月25日 | コメント(0) | トラックバック(0) | JavaScript関連

Googleアナリティクスコードは</head>タグの直前に

メモ

最近気づいたんですが(多分結構前から変わってたんでしょうが)Googleアナリティクスコードの埋め込み場所が</body>タグの直前から</head>タグの直前に変わったようです。

非同期が実行できるようになったから、らしい。(参考サイト:最近のGoogle Analyticsのコードは</head>の直前に入れるべし - Webtech Walker

うっかり今まで</body>タグの直前に入れてましたが、特に問題なく動いているところを見ると「推奨」であって「必須」ではないようですね。

とりあえずこれからは気をつけよっと。

nandani | 2011年10月18日 | コメント(0) | トラックバック(0) | JavaScript関連

レーティング機能と「いいね!」を連動させる【Facebook】:STEP4

この記事は、『レーティング機能と「いいね!」を連動させる【Facebook】:STEP3』の続きの記事です。

 

すでにボタンが押されている場合はボタンを押せなくするプログラムを作成。

STEP3の「3-2. 「いいね!」ボタンの設置と、それを監視するスクリプトの追加」で作成したサンプルコードに手を加えます。

サンプルコード(step4.php)


<?php
session_start();

$fb_app_id = "App IDをここに入力";
$fb_app_secret = "App Secretをここに入力";

//現在開いているページのURL
$fb_my_url = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];	
$fb_my_url_split = explode("?", $fb_my_url);
$fb_my_url = $fb_my_url_split[0];

$fb_code = $_GET["code"];
$fb_user_id = $_SESSION["fb_user_id"];

if(empty($fb_code) && empty($fb_user_id)) {
	$fb_get_userdata = "0";
}elseif(!empty($fb_user_id)){
	$fb_get_userdata = "1";
}elseif(!empty($fb_code)){
				
	// Facebook側からトークンを取得
	$fb_token_url = "https://graph.facebook.com/oauth/access_token?"
		."client_id=".$fb_app_id
		."&redirect_uri=".urlencode($fb_my_url)
		."&client_secret=".$fb_app_secret
		."&code=".$fb_code;
	$fb_access_token = file_get_contents($fb_token_url);
					
	// トークンを使用して、graph APIから名前を取得
	$fb_graph_url = "https://graph.facebook.com/me?".$fb_access_token;
	$fb_user = json_decode(file_get_contents($fb_graph_url));
				
	if(empty($fb_user)){
		$fb_get_userdata = "0";
	}else{
		$fb_get_userdata = "1";
		$fb_user_id = $fb_user->id;
		$_SESSION["fb_user_id"] = $fb_user_id;
	}	
}


//これまでのレーティングデータを取得する
$fb_checked_vote = "";
$fb_count_vote = 0;
$fb_like_vote = 0;
$fb_checked_flag = 0;
if(file_exists("csv/rating.csv")){
	$fp = fopen("csv/rating.csv", "r");
	while ($data = fgets($fp)) {
		$data = rtrim($data);
		$data_split = explode(",", $data);
		if($data_split[1] == $fb_my_url){
			$fb_count_vote++;
			if($data_split[2] == "1"){
				$fb_like_vote++;
			}
			
			if($data_split[0] == $fb_user_id){
				if($data_split[2] == "1"){
					$fb_checked_vote = "いいね!";
				}else{
					$fb_checked_vote = "だめだね!";
				}
			}
		}
	}
	fclose($fp);
}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>レーティング機能と「いいね!」を連動させる【Facebook】</title>
	
	<script type="text/javascript" src="js/jquery.min.js"></script>
	
	<script type="text/javascript">
	
		if (window.attachEvent) { //IE用
		    window.attachEvent("onload", watchRating);
		}else{
		    window.addEventListener("load", watchRating, false);
		}
		
		function watchRating(){
			if($("#rating_button") != ""){
				timerID = setInterval(function () {
				    if ($('.fb_edge_comment_widget.fb_iframe_widget:visible').length) {
				    	ratingSave('1');
						clearInterval(timerID);
				    };
				}, 200);
			}
		}
	
		function ratingSave(select_vote){
			var php_url = "rating_save.php";
			var fb_my_url = "<?php echo $fb_my_url; ?>";
			var fb_user_id = "<?php echo $fb_user_id; ?>";
					
			if(select_vote == "1"){
				$('#rating_button').html("「いいね!」に投票されました。");
			}else if(select_vote == "0"){
				$('#rating_button').html("「だめだね!」に投票されました。");
			}
					
			$.post(
				php_url, 
				{"select_vote":select_vote, "fb_my_url":fb_my_url, "fb_user_id":fb_user_id}, 
				function(message, status) {
					if ('error' != status){
						message_split = message.split("/");
						$('#like_vote_id').html(message_split[0]);
						$('#count_vote_id').html(message_split[1]);
					}
				   },
				"html"
			);
		}
	</script>
	
</head>

<body>

	<?php
	//ユーザ基本データが取得できた場合。
	if($fb_get_userdata == "1"):
	
		//まだボタンが押されていない場合
		if(empty($fb_checked_vote)):
	?>
	
	<div id="rating_button">
		<p>以下のリンクをどちらかクリックしてください。(<b>※いいね!を押すとFacebookに反映されます。</b>)</p>
		<p><div id="fb-root"></div>
		<script src="http://connect.facebook.net/ja_JP/all.js#appId=225227424196030&amp;xfbml=1"></script>
		<fb:like href="<?php echo $fb_my_url; ?>" send="false" layout="button_count" width="100" show_faces="false" font=""></fb:like> 
		<a href="javascript:void(0);" onclick="ratingSave('0')">だめだね!</a></p>
	</div>
	
	<?php 
		//すでにボタンが押されている場合
		else: 
	?>
	
	<div>
		<?php echo $fb_checked_vote; ?>に投票済みです。
	</div>
	
	<?php endif; ?>
	
	<?php
	//取得できなかった場合。
	else:
		//アプリ許可用のURL
		$fb_dialog_url = "http://www.facebook.com/dialog/oauth?"
		."client_id=".$fb_app_id
		."&redirect_uri=".urlencode($fb_my_url);
	?>
	
	<p>レーティングに参加するにはFacebookのアカウントが必要です。<br />
	またFacebook用アプリの「(アプリ名)」を許可する必要があります。</p>
	<p style="margin:5px 0px;"><a href="http://www.facebook.com/index.php" target="_blank">Facebookアカウントを取得する</a> | <a href="<?php echo $fb_dialog_url; ?>">アプリを許可する</a></p>
	
	<?php endif; ?>
	
	<p><span id="count_vote_id"><?php echo $fb_count_vote; ?></span>人中、<span id="like_vote_id"><?php echo $fb_like_vote; ?></span>人がいいね!と言っています。</p>
	
</body>
</html>

■変更部分

58~64行目:csvデータ取得中にて、FacebookIDとページのURLが一致したものがあれば、どのボタンを押したかを取得する。

133~154行目:ボタンを押したデータがcsvから取得できなければ、ボタンを表示。できればボタンを非表示にし、どのボタンを押したかを表示する。

サンプルコードの実行例

 

以上です。

 

すべて読まれた方はおつかれさまでした^^
長くなってすみません。

 

■追記補足

今回のサンプルでは、レーティングの数字において、ボタンを押したユーザの合計数も「いいね!」の合計数もこちら側が保持しているcsvデータを元に計算しています。

しかしFacebookをお使いの方はご存知かと思いますが、「いいね!」というのはFacebookにて取り消すことが出来ます。

ということはFacebookが保持している「いいね!」が押された回数と、csvデータから算出した数には誤差が起こりえますが、ここではあえてcsvデータの数字を使うことにしました。

もしFacebookが保持している「いいね!」の数を取得したい場合はFQLでデータ取得し、ボタンを押したユーザの合計数などを計算してください。
FQLでのデータ取得方法はこちらのページをご参照ください。

 

このサンプルでは、すでにボタンが押されているかどうかを、FacebookIDから判断させるプログラムにしましたが、STEP1にも書いたとおり、他にも色々と手段はあります。
Facebookアプリを許可させるのが煩わしい場合は、メールアドレスなどを入力させるなどの方法でも大丈夫かと思います。

また、csvでデータを管理する方法も、データベースが使えるサーバの場合はそちらで管理するほうが何かと便利かと思います。
csvでも構わないという場合は、データ管理だけにはご注意ください(csvファイルにアクセスできないよう制限をかけておくなど)。

 

最後にSTEP1~STEP4までに記述したサンプルコードをアップしました。
今更ではありますが「ブログじゃ読みづらい!」って方はこちらからダウンロードしてください。

サンプルダウンロードページへ

 

STEP1へSTEP2へSTEP3へ|STEP4へ

レーティング機能と「いいね!」を連動させる【Facebook】:STEP3

この記事は、『レーティング機能と「いいね!」を連動させる【Facebook】:STEP2』の続きの記事です。

 

3. 「いいね!」と「だめだね!」ボタンを設置。

 

■3-1. 「いいね!」ボタンのコードを取得する

 

こちらのサイトから「いいね!」ボタンのコードを取得してください。

このとき注意しなくてなならないのは、「XFBML」形式で取得する必要があるということです。「iframe」形式では正常に動作しませんのでご注意ください。

 

■3-2. 「いいね!」ボタンの設置と、それを監視するスクリプトの追加

 

STEP2の「2-2. Ajax Requestを用いて上記のプログラム(rating_save.php)を呼び出す」で作成したサンプルコードに手を加えます。

なお、「いいね!」ボタンを監視するスクリプトは、こちらのサイトを参考にさせていただきました。

Facebookのいいねボタンを押した時に自分で用意したjsのメソッドを呼び出す jsdo.it Share JavaScript, HTML5 and CSS

サンプルコード(step3.php)


<?php
session_start();

$fb_app_id = "App IDをここに入力";
$fb_app_secret = "App Secretをここに入力";

//現在開いているページのURL
$fb_my_url = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
$fb_my_url_split = explode("?", $fb_my_url);
$fb_my_url = $fb_my_url_split[0];

$fb_code = $_GET["code"];
$fb_user_id = $_SESSION["fb_user_id"];

if(empty($fb_code) && empty($fb_user_id)) {
	$fb_get_userdata = "0";
}elseif(!empty($fb_user_id)){
	$fb_get_userdata = "1";
}elseif(!empty($fb_code)){
				
	// Facebook側からトークンを取得
	$fb_token_url = "https://graph.facebook.com/oauth/access_token?"
		."client_id=".$fb_app_id
		."&redirect_uri=".urlencode($fb_my_url)
		."&client_secret=".$fb_app_secret
		."&code=".$fb_code;
	$fb_access_token = file_get_contents($fb_token_url);
					
	// トークンを使用して、graph APIから名前を取得
	$fb_graph_url = "https://graph.facebook.com/me?".$fb_access_token;
	$fb_user = json_decode(file_get_contents($fb_graph_url));
				
	if(empty($fb_user)){
		$fb_get_userdata = "0";
	}else{
		$fb_get_userdata = "1";
		$fb_user_id = $fb_user->id;
		$_SESSION["fb_user_id"] = $fb_user_id;
	}	
}


//これまでのレーティングデータを取得する
$fb_count_vote = 0;
$fb_like_vote = 0;
if(file_exists("csv/rating.csv")){
	$fp = fopen("csv/rating.csv", "r");
	while ($data = fgets($fp)) {
		$data = rtrim($data);
		$data_split = explode(",", $data);
		if($data_split[1] == $fb_my_url){
			$fb_count_vote++;
			if($data_split[2] == "1"){
				$fb_like_vote++;
			}
		}
	}
	fclose($fp);
}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>レーティング機能と「いいね!」を連動させる【Facebook】</title>
	
	<script type="text/javascript" src="js/jquery.min.js"></script>
	
	<script type="text/javascript">
	
		if (window.attachEvent) { //IE用
		    window.attachEvent("onload", watchRating);
		}else{
		    window.addEventListener("load", watchRating, false);
		}
		
		function watchRating(){
			if($("#rating_button") != ""){
				timerID = setInterval(function () {
				    if ($('.fb_edge_comment_widget.fb_iframe_widget:visible').length) {
				    	ratingSave('1');
					clearInterval(timerID);
				    };
				}, 200);
			}
		}
	
		function ratingSave(select_vote){
			var php_url = "rating_save.php";
			var fb_my_url = "<?php echo $fb_my_url; ?>";
			var fb_user_id = "<?php echo $fb_user_id; ?>";
					
			if(select_vote == "1"){
				$('#rating_button').html("「いいね!」に投票されました。");
			}else if(select_vote == "0"){
				$('#rating_button').html("「だめだね!」に投票されました。");
			}
					
			$.post(
				php_url, 
				{"select_vote":select_vote, "fb_my_url":fb_my_url, "fb_user_id":fb_user_id}, 
				function(message, status) {
					if ('error' != status){
						message_split = message.split("/");
						$('#like_vote_id').html(message_split[0]);
						$('#count_vote_id').html(message_split[1]);
					}
				   },
				"html"
			);
		}
	</script>
	
</head>

<body>

	<?php
	//ユーザ基本データが取得できた場合。
	if($fb_get_userdata == "1"):
	?>
	
	<div id="rating_button">
		<p>以下のリンクをどちらかクリックしてください。(※いいね!を押すとFacebookに反映されます。)</p>
		
		<div id="fb-root"></div>
		<script src="http://connect.facebook.net/ja_JP/all.js#appId=225227424196030&amp;xfbml=1"></script>
		<fb:like href="<?php echo $fb_my_url; ?>" send="false" layout="button_count" width="100" show_faces="false" font=""></fb:like> 
		
		<a href="javascript:void(0);" onclick="ratingSave('0')">だめだね!</a>
		
	</div>
	
	<?php
	//取得できなかった場合。
	else:
		//アプリ許可用のURL
		$fb_dialog_url = "http://www.facebook.com/dialog/oauth?"
		."client_id=".$fb_app_id
		."&redirect_uri=".urlencode($fb_my_url);
	?>
	
	<p>レーティングに参加するにはFacebookのアカウントが必要です。<br />
	またFacebook用アプリの「(アプリ名)」を許可する必要があります。</p>
	<p style="margin:5px 0px;"><a href="http://www.facebook.com/index.php" target="_blank">Facebookアカウントを取得する</a> | <a href="<?php echo $fb_dialog_url; ?>">アプリを許可する</a></p>
	
	<?php endif; ?>
	
	<p><span id="count_vote_id"><?php echo $fb_count_vote; ?></span>人中、<span id="like_vote_id"><?php echo $fb_like_vote; ?></span>人がいいね!と言っています。</p>
	
</body>
</html>

■追加部分

72~87行目:いいね!ボタンに変化がないかを監視。ボタンが押されたら、ratingSaveを実行。

127~129行目:3-1で取得した「いいね!」ボタンを貼り付ける。fb:likeタグのhrefには、開いているページのURLが入るようにする。

131行目の「だめだね!」ボタンはSTEP2から変更する必要はありません。

※今度のサンプルコードの実行例はFacebookに反映されるのでご注意ください。

※この段階では、まだ「だめだね!」ボタンが無限に押せてしまいます。

サンプルコードの実行例

 

STEP1へSTEP2へ|STEP3へ|STEP4へ

Copyright(c) 2010 - 2017 ダリの雑記