【PHP】CSVファイルのデータを配列に入れて出力する関数

CSVファイルのデータをPHPで配列に入れてWEB上に出力する関数のサンプル。

<?php
// CSVファイル名を代入
$file_name = "test.csv";

$arr_csv = funcCsvArrPut($file_name);

// 配列の中身をみる
print_r($arr_csv);

////////////////////////////////////////////////////////////
// CSVファイルのデータを配列に代入する関数
// funcCsvArrPut(CSVファイル名)
////////////////////////////////////////////////////////////
function funcCsvArrPut($file_name){
	// CSVファイルを開く
	$file = fopen($file_name, "r");
	
	$cnt = 0;
	
	while(!feof($file)){
		$csv = fgets($file);
		$arr_csv[$cnt] = explode(",", $csv);
		$cnt++;
	}
	
	// CSVファイルを閉じる
	fclose($file);
	
	return $arr_csv;
}
////////////////////////////////////////////////////////////
?>

【jQuery】クリック連打対策でstop()メソッドを利用する

animateメソッドのクリック連打対策でstop()メソッドを利用する。

stop()メソッドはjqueryのリファレンスによると、“指定した要素集合から、現在動作中のアニメーション処理を全て中止します。”とありますが、意味が分からず、いろいろテストしたのでメモしておきます。

stop([clearQueue], [gotoEnd])

■第1引数[clearQueue]
┗trueの場合、全てのキューをクリアする。
■第2引数[gotoEnd]
┗trueの場合、現在のアニメーションを最終コマまで移動する。

stop() == stop(false, false)

引数は2つで、何も指定しないデフォルトの状態では“false”が指定される。

⇒デモ

テスト1【stop()なし】

$(function(){
	$("#button1").click(function(){
		$(".block1").animate({width: "50%"}, 500)
		.animate({width: "100%"}, 500);
	});
});


stop()なし

キューが削除されないので イベントが発生した回数分だけ実行される。

テスト2【stop() stop(false, false)】

$(function(){
	$("#button2").click(function(){
		$(".block2").stop(false, false).animate({width: "50%"}, 500)
		.animate({width: "100%"}, 500);
	});
});


stop(false, false)

アニメーション実行時にクリックされた場合、現在のアニメーションを停止。
第一引数[clearQueue]がfalseのため次のキューに移行する。

テスト3【stop(false, true)】

$(function(){
	$("#button3").click(function(){
		$(".block3").stop(false, true).animate({width: "50%"}, 500)
		.animate({width: "100%"}, 500);
	});
});


stop(false, true)

第二引数[gotoEnd]がtrueの場合、アニメーション実行時にクリックされた場合、現在のアニメーションを最終コマまで移動する。
第一引数[clearQueue]がfalseのため次のキューに移行する。

テスト4【stop(true, false)】

$(function(){
	$("#button4").click(function(){
		$(".block4").stop(true, false).animate({width: "50%"}, 500)
		.animate({width: "100%"}, 500);
	});
});


stop(true, false)

第一引数[clearQueue]がtrueのため全てのキューをクリア。

テスト5【stop(true, true)】

$(function(){
	$("#button5").click(function(){
		$(".block5").stop(true, true).animate({width: "50%"}, 500)
		.animate({width: "100%"}, 500);
	});
});


stop(true, true)

第一引数[clearQueue]がtrueのため全てのキューをクリア。
第二引数[gotoEnd]がtrueの場合、アニメーション実行時にクリックされた場合、現在のアニメーションを最終コマまで移動する。

テスト6【queue([]) + stop()】

アニメーション実行後にキューをクリアする方法

$(function(){
	$("#button6, .buttonAll").click(function(){
		$(".block6")
		.animate({width: "50%"}, 500)
		.animate({width: "100%"}, 500, function(){
			$(".block6").queue([]);
			$(".block6").stop();
		});
	});
});


queue([]) + stop()

アニメーションが終わった後にqueueメソッド(キューの配列を空にしてアニメーションをキャンセル)を実行する

【HTML/CSS】可変コンテンツ要素を横並びにして高さを統一する

要素横並び:可変コンテンツ高さ統一

横並びの要素の中のコンテンツ縦幅が可変する場合、
liをfloatする方法では高さがバラバラになってしまう。

displayTable001

<ul>
	<li>テキスト</li>
	<li>テキスト<br />テキスト<br />テキスト<br /></li>
	<li>テキスト<br />テキスト<br />テキスト<br />テキスト<br />テキスト<br /></li>
	<li>テキスト</li>
	<li>テキスト<br />テキスト<br /></li>
</ul>
<style>
ul{
	width: 100%;
	margin-top: 20px;
}

li{
	float: left;
	width: 20%;
	border: 1px solid #000000;
	margin: -1px;
}
</style>

CSSのdisplayプロパティで要素をtable構造にする事ができる。
※IE8からサポートされている

display: table;
要素をブロック表要素にする。HTMLでいうtable要素。

display: table-cell;
要素を表のセル要素にする。HTMLでいうtd,th要素。

他にも
display: table-column-group;
display: table-header-group;
display: table-row-group;
display: table-footer-group;
などなどいろいろ準備されています。

displayTable002

<style>
ul{
	display: table;
	width: 100%;
	margin-top: 20px;
}

li{
	display: table-cell;
	border: 1px solid #000000;
}
</style>

基本考え方はtableタグと同じなので、
“vertical-align: middle;”で縦方向(垂直方向)も中央寄せする事ができる。

displayTable003

<style>
ul{
	display: table;
	width: 100%;
	margin-top: 20px;
}

li{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	border: 1px solid #000000;
}
</style>

レスポンシブWEBデザインなどでPC表示では横並び、スマートフォンでは縦並びにしたい時など、
tableタグを使えない時に重宝します。

【スマホサイト】iPhoneでSafariのキャッシュをクリアする

iPhone5のSafariでキャッシュクリアする方法。

【手順1】初期インストールされている[設定アプリ]を起動する。

設定アプリを起動

【手順2】[設定]から[Safari]を選択。

i_cash_clear002

【手順3】[Safari]から[Cookieとデータを消去]を選択。

i_cash_clear003

【手順4】[Cookieとデータを消去]を決定。

i_cash_clear004

ログイン情報などもクリアされてしまうので注意!!

【jQuery】animateでアニメーション中に新たに溜まった動作の処理をしない

jQueryのanimate関数でアニメーションが終了するまでにボタンを連打するなど、
何度もアニメーションを実行すると、不自然にアニメーションを繰り返す事がある。

これはアニメーション動作は、全てqueue(キュー)に溜まるので、
動作中に新たに溜まった動作を全ての動作が完了するまで実行し続ける為である。

アニメーションが終わった時点でqueueの中身を消すことで、
後続のアニメーション(動作中に新たに溜まった動作)が実行されないようにする。

【記述例】

$(this).animate({width: 10}, 100, function(){
	$(this).queue([]);		// queueを空にする
	$(this).stop();			// アニメーション停止
});

【jQuery】画像ロールオーバー時にフェイド変化するサンプルコード[rolloverfade.js]

画像ロールオーバー時にフェイドしながら変化するサンプルコード[rolloverfade.js]を作ってみた。

⇒デモ

【手順1】

ロールオーバーON時とOFF時の画像を準備する。
ON時の画像にはファイル名に“_on”を付けて保存する。

rolloverfade

【手順2】

下記のコードをjsファイル(rolloverfade.js)として保存する。

$(function(){
	var selector_1 = 'ul.fadeBlock li';		// imgの親要素指定
	var selector_2 = 'fade_img';			// imgのclass指定
	var selector = selector_1 + ' img.'+ selector_2; 
	
	for (i=1; i<=$(selector_1).length; i++){
		$(selector_1 + ':nth-child(' + i + ') img').removeClass(selector_2).addClass(selector_2 + i);
		// 関数実行
		rollOverFadeEffect(selector + i);
	}

	// ユーザ定義関数
	function rollOverFadeEffect(selector){
		var change_img = $(selector).not('src=*' + '_on' + '.');
		change_img.each(function(){
			this.mouse_over_img = new Image();
			this.mouse_over_img.src = $(this).attr('src').replace(new RegExp('(\.gif|\.jpg|\.png)$'), '_on' + '$1');
			$(this.mouse_over_img).css({position: 'absolute', opacity: 0});
			$(this).before(this.mouse_over_img);
		
			$(this.mouse_over_img).hover(function(){
				$(this).animate({opacity: 1});
			},
			function(){
				$(this).animate({opacity: 0});
			});		
		});
	}
});

【手順3】

htmlファイルにjqueryと先ほど保存したrolloverfade.jsを呼ぶ出す。

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

【手順4】

htmlファイルにロールオーバー時にフェイド変化させたい画像を記述し、
imgタグ内にクラス(ここではclass=”fade_img”)を記述する。

<div id="contents">
	<ul class="fadeBlock">
		<li><a href="#"><img class="fade_img" src="img/icon_ore.jpg" /></a></li>
		<li><a href="#"><img class="fade_img" src="img/icon_ore.jpg" /></a></li>
		<li><a href="#"><img class="fade_img" src="img/icon_ore.jpg" /></a></li>
		<li><a href="#"><img class="fade_img" src="img/icon_ore.jpg" /></a></li>
		<li><a href="#"><img class="fade_img" src="img/icon_ore.jpg" /></a></li>
	</ul>
</div>

【手順5】

最後にrolloverfade.js内の変数にセレクタを記述し代入する。
“selector_1″に”imgの親要素指定”、”selector_2″に”imgのclass指定”を設定する。

<script>
	var selector_1 = 'ul.fadeBlock li';		// imgの親要素指定
	var selector_2 = 'fade_img';			// imgのclass指定
</script> 

【完成】

rolloverfade02

⇒デモ

【スマホサイト】viewport(ビューポート)を指定してスマホサイトに対応する

スマートフォン・タブレットには、iPhone/iPadなどのiOS端末や様々なAndroid端末が存在し、それぞれ異なった解像度を持つ。
WEBページ制作者は、それぞれ異なった解像度を持ったデバイスに対応する必要がある

スマートフォンに適した表示をするために「viewport(ビューポート)」を設定する。

viewportはWEBページに設定する仮想的な画面幅で、viewportの設定値により仮想的な画面幅を指定する事ができる。

iPhoneでは何もしなければ横幅980pxでWEBページが表示される。

デフォルトのviewport設定はデバイス・ブラウザによって異なるので、WEBページの<head>タグ内にviewportを<meta>タグに記述して上書きする

<meta name="viewport" content="パラメーター=値">

【viewportのパラメーターと値】

■width
値 : 任意のピクセル
デフォルト値 : 980px
範囲 : 200~10000px
または、device-width(デバイスの横幅に合わせる)
■height
値 : 任意のピクセル
デフォルト値 : widthの値とデバイスのアスペクト比から自動算出
範囲 : 233~10000px
または、device-height(デバイスの縦幅に合わせる)
■initial-scale
値 : 初期拡大率
デフォルト値 : 1
範囲 : minimum-scale~maximum-scaleの範囲内
■minimum-scale
値 : 拡大率の最小scale値
デフォルト値 : 0.25
範囲 : 0~10.0まで
■maximum-scale
値 : 拡大率の最大scale値
デフォルト値 : 1.6
範囲 : 0~10.0まで
■user-scalable
値 : ズーム操作の有無
デフォルト値 : yes
範囲 : yes,no

【viewport指定例】

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

デバイスの画面幅いっぱいをviewportの幅にしたい場合は”width”の値に”device-width”を指定する。

ズームの範囲は”minimum-scale”と”maximum-scale”の範囲内に制限される。

画面を拡大縮小させたくない場合は”user-scalable”の値に”no”を指定する。

【HTML5】IEドキュメントモード(Quirksモード)対策

HTML5で制作しているウェブサイトをIE8・IE9でみるとレイアウトが崩れている。
文法など記述は間違っていないので、IEを疑って調べてみると、
IE上でhtml5(を宣言した時)の挙動がどうもおかしいらしい。

IE8やIE9には、ブラウザモードとドキュメントモードという2つのモードがあって、
このドキュメントモードが悪さをしている事が判明。

IEドキュメントモード

ドキュメントモードは、HTML上の”DOCTYPE宣言”の記述に従って自動選択されるらしいが、
どうやらIEではhtml5で<!DOCTYPE HTML>を宣言するとQuirksモード(IE5/IE6)に判定されてしまう。

しかし、IEではHTMLでドキュメントモードを指定できる”meta”タグが用意されているので、コチラで対応する。

<meta http-equiv="X-UA-Compatible" content="IE=8 ; IE=9" />

上記の例では、IE8で参照したらドキュメントモードをIE8標準モード、IE9で参照したらIE9標準モードが選択される。

【HTML5】videoタグの動画がFirefoxで動かない対処法

HTML5のvideoタグで再生される動画のフォーマットが、現状ブラウザによってバラバラになっている。
(サポートされている動画規格が統一されていない。)

【videoタグ使用例】

<video controls autoplay poster="firstimg.jpg" width="320" height="240">
	<source src="sample.mp4" />
	<source src="sample.ogv" />
	<source src="sample.webm" />
</video>

HTML5のvideoタグで動画が再生されるファイル形式はのうち、
FireFoxで現在標準となっている.ogvファイルOgg形式ファイルとして
設定されていないサーバーが多い。

今回はhtmlファイルと同じディレクトリ内に「.htaccess」を作って
下記のコードを記述して対応する。

【.htaccess記述例】

AddType video/ogg .ogg .ogv
AddType audio/ogg .ogg
AddType application/ogg .ogg .ogv

mp4形式などもサーバー設定によっては別途対応する必要がある。

【jQuery】ユーザ定義関数の使い方

jQueryでPHPの様にユーザ定義関数を使いたいと思って調べてみら、
基本PHPと書き方が同じだったのでメモ。

【ユーザ関数の定義例】

$(function(){
	// ユーザ定義関数
	function putTextAlert(text){
		alert(text);
	}

	var text = "テキスト";

	// 関数実行
	putTextAlert(text);
});

もちろん関数の定義は最後にまとめてもOK!

$(function(){
	var text = "テキスト";

	// 関数実行
	putTextAlert(text);

	// ユーザ定義関数
	function putTextAlert(text){
		alert(text);
	}
});