【JavaScript】変数を外部JSファイルで利用する

htmlファイル本体で宣言した変数を外部JSファイルでも利用できるかテストしたら、あっけなくできたのでメモ。

<script type="text/javascript">
	var aaa = 123;
	var bbb = 'abc';
</script>
<script type="text/javascript" src="sample.js"></script>

もちろん、PHPで出力した値を外部JSファイルで利用する事もできる。

<?php
	$abc = "abc";
?>
<script type="text/javascript">
	var abc = "<?php echo $abc; ?>"; 
</script>
<script type="text/javascript" src="sample.js"></script>

外部スクリプトがhtmlファイル本体に読み込まれた時点で変数に値がセットされている為、特別な処理をする必要は無い。

【PHP】本日の日付を基準に、5,10日を締切とした画像を動的に出力

本日の日付を基準に、5,10日を締切とした画像を動的に出力したい。

1~5日→5日、6~10日→10日、25~31日→末日の画像が出力される処理を考えてみた。

日付画像出力クラス

class ImgPass{	

	private $month;
	private $day;
	private $arr_pass;
	private $arr_num;
	private $deadline;
	 
	public function ImgPass(){
		$day_max = 5;
		// 月日取得
		$this->month = date('n');
		$this->day = floor(((date('j')-1)/5));
		if($this->day > $day_max){
			$this->day = $day_max;
		}
	
		// 画像パス・画像番号配列
		$this->arr_pass = array('m' => 'm', 'd' => 'd');
		$this->arr_num = array('m' => $this->month, 'd' => $this->day);
	
		$this->datePass($this->arr_pass, $this->arr_num);
	}
 
	public function datePass($p, $n){
		$arr_keys = array_keys($p);
		
		foreach($arr_keys as $key){
			$this->deadline[$key] = $p[$key].$n[$key].'.png';
		}
	}
 
	public function getPass(){
		return $this->deadline;
	}
}

実行例

$psss = new ImgPass();
print_r($psss->getPass());

‘m1.png’~’m12.png’と’d0.png’~’d5.png’の画像を準備すれば完成!!

【手続型】

// 月日取得
$month = date('n');
$day = floor(((date('j')-1)/5));
$day_max = 5;
if($this->day > $day_max){
	$this->day = $day_max;
}

// 画像パス・画像番号配列
$arr_pass = array('m' => 'm', 'd' => 'd');
$arr_num = array('m' => $month, 'd' => $day);

$deadline = passPut($arr_pass, $arr_num);

print_r($deadline);

function passPut($p, $n){
	$arr_keys = array_keys($p);
	
	foreach($arr_keys as $key){
		$deadline[$key] = $p[$key].$n[$key].'.png';
	}
	return $deadline;
}

手続型のコードも書いてみたのでサービス!

【jQuery】リンクテキストがアニメーションするサンプル

めんまのお願いを叶えました。

danceText

⇒デモ

【JS】

$(document).ready(function(){
	var cnt_list;
	var arr_list = new Array();
	var arr_str = new Array();
	var txt_list = "*";
	var txt_return;
	var block_name = '#danceTextBlock ul li';
	
	cnt_list = $(block_name).children('a').length;
	for (var i=0; i<cnt_list; i++){
		arr_list[i] = $(block_name).find('a').eq(i).text();
		
		$(block_name).eq(i).find('a').html(function(){
			for (var j=0; j<arr_list[i].length; j++){
				if(txt_list == "*"){
					txt_list = '<span>'+arr_list[i].substr(j, 1)+'</span>';
				}else{
					txt_list = txt_list + '<span>'+arr_list[i].substr(j, 1)+'</span>';
				}
			}
			txt_return = txt_list;
			txt_list = "*";
			return txt_return;
		});
	}
	
	$(block_name).find('a').mouseover(function(){
		// 要素個数を取得
		var elem = $(this).find('span');
		var n = elem.length;

		// アニメーション
		var c = 0;
		var id = setInterval(function(){
			if(c <= (n-1)){
				elem.eq(c).stop(true, false).animate({'marginTop':'-4px'},'fast').animate({'marginTop':'0px'},'fast');
				c++;
			}else{
				c = 0;
				clearInterval(id);
			}
		}, 80);
	});
});

【HTML】

<div id="conteiner"> 
	<div id="danceTextBlock">
		<ul>	
			<li><a href="#">じんたん</a></li>
			<li><a href="#">めんま</a></li>
			<li><a href="#">あなる</a></li>
			<li><a href="#">ゆきあつ</a></li>
			<li><a href="#">つるこ</a></li>
			<li><a href="#">ぽっぽ</a></li>
		</ul>
	</div>
</div>

【CSS】

#danceTextBlock ul{
	width: 200px;
	list-style: none;
}

#danceTextBlock ul li{
	height: 42px;
	background: #000000;
	line-height: 42px;
}

#danceTextBlock ul li a{
	display: block;
	width: 200px;
	height: 42px;
	color: #ffffff;
	text-decoration: none;
}

#danceTextBlock ul li a span{
	display: block;
	float: left;
}

⇒デモ

【JavaScript】setInterval()関数の引数で関数が使えない問題について

setInterval()に実行したい関数を引数として渡したい場合、

var test = setInterval(aaa(), 1000);

function aaa(){
	alert('test');
}

としてもうまくいかない。

無名関数内に直接実行したい処理を書くと実行できたので、

var test = setInterval(function(){
	alert('test');
}, 1000);

無名関数内にコチラで定義した関数を記述してみたらうまくいった。

var test = setInterval(function(){aaa();}, 1000);

function aaa(){
	alert('test');
}

無名関数内で関数を実行するとうまくいったのでメモ。

【高速化】ブラウザのキャッシュを活用する

GoogleDevelopers”PageSpeedInsights“の「ブラウザのキャッシュを活用する」を対応する。

pagespeed01

PageSpeedInsightsの分析結果「ブラウザのキャッシュを活用する」を見るとキャッシュが利用されてないファイルの一覧が表示される。

ここでは特に画像・CSSファイルが指摘され、HTMLファイルは含まれていないので、
画像(jpg/gif/png)・CSSファイルを対象とする。

Webサーバー”Apache”のモジュール”mod_expires”は、ブラウザキャッシュの有効期間を管理する事ができる。

このモジュール”mod_expires”を利用して、キャッシュを有効活用することによりサーバーへの通信を減少し、
転送量や負荷が軽減される事でWebサイトの高速化につなげる。

.htaccessに下記コードを記述し、対象ファイルの拡張子と有効期間を設定する。

【.htaccess】

ExpiresActive On
ExpiresDefault "access plus 1 weeks"
ExpiresByType image/jpg "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType text/css "access plus 1 weeks"

1週間以上先の有効期間を指定する。

ファイルを更新した場合はファイルのURLにパラメータを付けて、キャッシュにないファイルと認識させる。

例)
img/xxx.jpg
 ↓
img/xxx.jpg?130722

ファイルを更新した場合、古いキャッシュによってあたらしいファイルが反映されなくなるデメリットもある。
URLにパラメータを付けて、キャッシュにないファイルと認識させる。

【jQuery】何番目(n番目)の要素かを取得する

今回は、何番目(n番目)の要素がクリックされたかを取得します。

$(セレクタ).index(this);

index()関数で取得する値(リストの中のクリックした要素の番数)を変数に入れてアラートで表示します。

<script>
$(function(){
	// 要素を指定
	var sel = "ul#navi li";

	// 関数実行
	putNumber(sel);

	function putNumber(sel){
		$(sel).click(function(){
		  var index = $(sel).index(this);
			alert((index+1)+"番目");
		})	
	}
});
</script>
<ul id="navi">
	<li>block01</li>
	<li>block02</li>
	<li>block03</li>
	<li>block04</li>
	<li>block05</li>
	<li>block06</li>
	<li>block07</li>
	<li>block08</li>
	<li>block09</li>
	<li>block10</li>
</ul>

js_n_number

(index+1)としているのは、要素の開始が0番目からなので、わかりやすいように”+1″しています。

こっちの方が使いまわせるかも…(結果は同じです)

<script>
$(function(){
	var sel = "ul#navi li";
	
	$(sel).click(function(){
		// 関数実行
		var n_number = getNumber(sel, this);
		alert((n_number+1)+"番目");
	})	
	
	function getNumber(sel, target){
		var index = $(sel).index(target);
		return index;
	}
});
</script>

【PHP】ユーザーエージェント(User Agent)を取得してデバイスを判別するクラス

PC、iPhone、iPad、Android(スマートフォン)、Android(タブレット)などデバイスごとに振り分ける処理をしたい。

ユーザーエージェント(User Agent)を取得して、デバイスを判別するクラスを作ってみた。

ユーザーエージェント判定クラス

class UserAgent{

	private $ua;
	private $device;

    public function UserAgent(){
        $this->deviceCheck();
    }

	public function deviceCheck(){
		
		//ユーザーエージェント取得
		$this->ua = $_SERVER['HTTP_USER_AGENT'];

		if(strpos($this->ua,'iPhone') !== false){
			//iPhone
			$this->device = 'iphone';
		}
		elseif(strpos($this->ua,'iPad') !== false){
			//iPad
			$this->device = 'ipad';
		}
		elseif((strpos($this->ua,'Android') !== false) && (strpos($this->ua, 'Mobile') !== false)){
			//Android
			$this->device = 'android_m';
		}
		elseif(strpos($this->ua,'Android') !== false){
			//Android
			$this->device = 'android_t';
		}
		else{
			$this->device = 'pc';
		}
	}

	public function getDevice(){
		return $this->device;
	}
}

実行

$ua = new UserAgent();
echo $ua->getDevice();

getDevice()で所得する文字列でデバイスを判別する。

【HTML5】各デバイス・ブラウザごとの動画再生環境調査

これまでPC用ページではFlashプレイヤーで動画を再生するのが一般的だった。

iPadなどのタブレット端末でPC用ページを表示させたい場合、
多くのタブレット端末(iOS/Android)にFlashプレイヤーがインストールされていない為、
こういったFlashに対応していない端末では動画を再生させる事ができない

Flashに対応していない端末で動画を再生させるには、
HTML5の"<video>タグ"を利用しブラウザのプレイヤーを利用するか、
独自にプレイヤーを開発するかということになる。

独自にプレイヤーを開発する事は難しいので、今回はHTML5の"<video>タグ"について調査してみた。

まずは各端末・ブラウザごとに異なる動画形式のものをすべて実機で検証してみる。

HTML5"<video>タグ"各端末・ブラウザ別対応動画形式一覧

video001

この検証結果により、"<video>タグ"を使用する場合は、MP4WebMの2点を用意すれば、ほぼすべてのブラウザに対応できることがわかった。

・MP4形式動画
(映像コーデック:H.264、音声コーデック:AAC)メタデータ無し
・WebM形式動画
(映像コーデック:VP8、音声コーデック:Vorbis)メタデータ無し

MP4とWebM形式の動画ファイルを用意すればIE8以下を除く全端末・全ブラウザに対応する事ができる。

"<video>タグ"を利用する際のIE6~8対策

IE6~8ではブラウザにプレイヤーが搭載されていない為、
"<video>タグ"を利用しても動画を再生することはできない。

なので、IE6~8の"<video>タグ"をFlashプレイヤーで再生してくれるオープンソース"html5media"を使用する。

使用方法

HTMLファイルにJavaScriptの記述を追加する。

<script type="text/javascript" src="http://api.html5media.info/1.1.5/html5media.min.js"></script>

IE6~8で"<video>タグ"を利用した際はFlashプレイヤーで再生される。

.htaccessの記述

サーバの設定によっては、ファイルの拡張子をMIME-typeにマップしなければ動画が再生できない場合がある。
その際は.htaccessに下記の通りAddTypeディレクティブを記述して対応する。

AddType video/ogg .ogg .ogv
AddType video/webm .webm
AddType video/mp4 .mp4

各種プラットフォームに対応した基本フォーマット

<video preload="none" poster="xxx.jpg" controls width="xxx" height="xxx">
	<source src="xxx.mp4">
	<source src=" xxx.webm">
	<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video>

"<video>タグ"記述の際の注意事項

1.スマートフォンでは動画が自動で読み込まれる設定にしているとページのスクロールがカクつくなどし、ストレスが溜まる原因となる。
デフォルトでは"<video>タグ"のpreload属性が「auto」(自動読み込み有り)になっているので、「none」(自動読み込み無し)を設定すれば、ページの読み込みの際に動画を自動で読み込まなくて済む。

<video src="動画ファイル名" preload="none"></video>

2.動画再生前はiPhoneでは動画の頭の画が自動でサムネイルとして表示されるが、現行Androidでは自動でサムネイルを生成する機能がない為、真っ黒な状態となり標準のビデオアイコンが表示される。
そのためサムネイル用のJPEG画像を用意し、poster属性に設定する必要がある。

<video src="動画ファイル名" poster="サムネイル画像名"></video>

3.通常、スマートフォンでは再生時に動画が自動でフルスクリーン表示となり、シークバーや一時停止ボタンなどのコントローラーが表示される。
しかし、iPadなどのタブレット端末ではフルスクリーン表示とならず、同ページ内で動画が再生される。
ユーザによってはフルスクリーンで見たい場合や、シークバーで再生のコントロールがしたい場合があると思われるため、controls属性を設定しておくことが好ましい。

<video src="動画ファイル名" controls width="xxx" height="xxx" ></video>

4.万が一、"<video>タグ"未対応端末にて動画が表示されなかったときのため、未対応の旨をメッセージとして記述しておく。

5.iPhoneではサムネイル画像の左右に黒みが表示される。

"<video>タグ"のwidth・heightに値を指定することにより消すことができる。

6.MP4とWebM(もしくはMP4とOGV)の2種類の動画を用意した場合、コードを記述する順番は①MP4 ②WebM(OGV)とする。

Webブラウザごとに動画再生する優先順位がある為、上記の順番でなければ動画が再生されないことがある。

【jQuery】スマートフォン用の2階層アコーディオンのサンプルコード

いまさらながら、2階層アコーディオンを自作したのでメモ。
スマートフォン用なのでクリックした項目をトップにスクロールさせる機能も搭載しました。

⇒デモ

jqueryアコーディオン
【JS】

// タイトル
var list_title = "ul#accordionBlock h3.mainTrigger";
// サブリスト
var list_sub = "ul#accordionBlock li dl.subList";
// サブタイトル
var list_subtitle = "ul#accordionBlock li dl.subList dt";
// コンテンツ
var list_contents = "ul#accordionBlock li dl.subList dd";

$(function(){
	$(list_sub).hide().children("dd").hide();
	
	// 1階層目処理
	$(list_title).click(function () {
		funcClickEvent($(this), list_sub, list_title);					  
	});
	
	// 2階層目処理
	$(list_subtitle).click(function () {
		funcClickEvent($(this), list_contents, list_subtitle);					  
	});
	
    // funcScrollTop(現在地, 開閉要素, タイトル)
    function funcClickEvent(aaa, bbb, ccc){
		$(aaa).children("h4").toggleClass("opened");
		$(ccc).children("h4").not($(aaa).children("h4")).removeClass("opened");
		$(aaa).next(bbb).toggle();
		$(bbb).not(aaa.next(bbb)).hide();
		funcScrollTop(aaa, ccc);
    }

    // funcScrollTop(ボタン, リスト名)
    function funcScrollTop(aaa, bbb){
		var i = $(bbb).index(aaa)
		var p = $(bbb).eq(i).offset().top;			 
		$("html, body").animate({ scrollTop: p }, 'fast');
		return false;
    }
});

【HTML】

<ul id="accordionBlock">
	<li>
		<h3 class="mainTrigger mainTrigger01">大見出し1</h3>
		<dl class="subList">
		
			<dt class="SubTrigger subTrigger01"><h4 class="subTriggerIcon">中見出し</h4></dt>
				<dd>
					<h5 class="icon01">小見出し</h5>
					<p>テキスト</p>
				</dd>
	
			<dt class="SubTrigger subTrigger01"><h4 class="subTriggerIcon">中見出し</h4></dt>
				<dd>
					<h5 class="icon01">小見出し</h5>
					<p>テキスト</p>
				</dd>
			
			<dt class="SubTrigger subTrigger01"><h4 class="subTriggerIcon">中見出し</h4></dt>
				<dd>
					<h5 class="icon01">小見出し</h5>
					<p>テキスト</p>
				</dd>
		</dl>
	</li>
</ul>

⇒デモ

【PHP】配列に文字列が含まれるかどうかチェックする関数(2次元配列まで対応)

配列に文字列が含まれるかどうかチェックしたかったので関数を作ってみた。

※配列であり、その中のいずれかに文字列が含まれる場合”ture”を返す
※それ以外はすべて”false”を返す

////////////////////////////////////////////////////////////
// 配列に文字列が含まれるかどうかチェックする関数(2次元まで対応)
// funcArrCheck(配列)
////////////////////////////////////////////////////////////
function funcArrCheck($arr){
	if(is_array($arr)){
		foreach($arr as $value){
			if(is_array($value)){
				foreach ($value as $item) {
					if(isset($item) && $item <> ""){
						$boolean == true;
						break;
					}
				}		
			}else{
				if(isset($value) && $value <> ""){
					$boolean == true;
					break;
				}
			}
		}
	}
	
	if($boolean == true){
        return true;
    }
	
    return false;
}
////////////////////////////////////////////////////////////

そもそも配列じゃないものや、多次元のものも利用される可能性があるので、そちらにも対応しました。