読者です 読者をやめる 読者になる 読者になる

print 'Hello World!';

hogehoge備忘録

jQuery 特定の要素が存在するかどうかを判別

特定の要素が存在するかどうか「.length」と「.size()」を使った判別方法がある。
以下、ID「#sample」が存在するかどうかを判別するサンプルコード

#.lengthを使った判別方法

存在する場合

$(function(){
    if($('#sample').length){
        //「#sample」が存在する場合の処理
    }
});

存在しない場合

$(function(){
    if(!$('#sample').length){
        //「#sample」が存在しない場合の処理
    }
});

#.size()を使った判別方法

存在する場合

$(function(){
    if($('#sample').size()){
        //「#sample」が存在する場合の処理
    }
});

存在しない場合

$(function(){
    if(!$('#sample').size()){
        //「#sample」が存在しない場合の処理
    }
});

jQueryプラグイン Tablesorter#テーブルの行を並び替える

jQueryプラグイン「Tablesorter」を使えば、簡単にソート機能が追加できる。

GitHub - christianbach/tablesorter: Flexible client-side table sortingからjquery.tablesorter.min.jsファイルをダウンロードして、jsディレクトリに設置する。

htmlファイル内

<script type="text/javascript" src="/js/jquery.tablesorter.min.js"></script>

ソートの状況によって、th要素には以下のクラスが付与される

  • 並び替え可能なヘッダーのth要素にはheaderクラスが付与される
  • 昇順に並び替えると、その列のth要素にはheaderSortDownクラスが付与される
  • 降順に並び替えると、その列のth要素にはheaderSortUpクラスが付与される

#サンプルコード

jsファイル

$(function(){

	//テーブルソート
	$('#prefTable').tablesorter({
			// 1行間隔で行の背景色を変更する
			// tr要素のクラスにevenとodd が交互に付与される
			widgets:['zebra'],
			// ソート初期条件[(列番号 一番左の列が0),(昇順:0 降順:1)]で指定
			sortList:0,1,
			// 指定列のソート無効化
			// 列番号で列を指定して、sorter:falseで無効化
			headers:{
				3:{sorter:false}
			}
	});
});

htmlファイル

<html>
<head>
<title>Laravel</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapi.com/ajax/libs/jqueryui/1.10.4/i18n/jquery-ui-i18n.min.js"></script>
<script type="text/javascript" src="/js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="/js/form.js"></script>
<style>
<!--

#prefTable th,#prefTable td{
    padding: 3px 18px;
}

#prefTable th{
    text-align: left;
}

#prefTable tr.odd td {
    background-color:#f0f0f6;
}

#prefTable th.header {
	background: url('/images/bg.gif') right center no-repeat;
}

#prefTable th.headerSortUp {
	background: url('/images/asc.gif') right center no-repeat;
}
#prefTable th.headerSortDown {
	background: url('/images/desc.gif') right center no-repeat;
}

-->
</style>
</head>
<body>

<table id="prefTable">

<thead>
<tr>
<th>#</th>
<th>都道府県</th>
<th>フリガナ</th>
<th>ふりがな</th>
<th>ローマ字</th>
</tr>
</thead>
<tbody>
<tr>
<td>08</td>
<td>茨城県</td>
<td>イバラキケン</td>
<td>いばらきけん</td>
<td>ibaraki</td>
</tr>
<tr>
<td>09</td>
<td>栃木県</td>
<td>トチギケン</td>
<td>とちぎけん</td>
<td>tochigi</td>
</tr>
<tr>
<td>10</td>
<td>群馬県</td>
<td>グンマケン</td>
<td>ぐんまけん</td>
<td>gunma</td>
</tr>
</table>

</body>
</html>

Ajax ファイルのアップロードと削除

環境:Laravel5、JQuery

jsファイル

$(function(){

	//ファイルのアップロード
	$('#files').on("change",function(){
        // ファイル情報を取得
        var files = this.files;
        // FormDataオブジェクトを用意
        var fd = new FormData();
        // ファイルの個数を取得
        var filesLength = files.length;
        // ファイル情報を追加
        for (var i = 0; i < filesLength; i++) {
            fd.append("files[]", files[i]);
        }

       $.ajax({
			//GET,POST,PUT,DELETEなど
			type: 'POST',
			url: '/form/upload',
            data: fd,
            dataType:'json',
            processData: false,
            contentType: false,
            //laravelトークン対策
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
		}).done(function(data,textStatus,jqXHR){
			for(i=0;i<data.length;i++){
				$('#file_list').append('<p id="file'+i+'"><span>'+data[i]+'</span><input type="hidden" name="attchmnt[]" value="'+data[i]+'"> <input type="button" value="削除"></p>');
				delfile(i);
			}
			$('#files').remove();
			alert('ファイルをアップロードしました。');
		}).fail(function(jqXHR,textStatus,errorThrown){
			//失敗時処理
			alert('ファイルのアップロードに失敗しました。');
		}).always(function(jqXHR,textStatus){
			//共通処理
		});
	});

	//ファイルの削除
	function delfile(i){
	$(document).on(
		"click",
		"#file"+i,
		function(){
			var filename=$('#file'+i+' span').text();
			$.ajax({
				type:"POST",
				url:"/form/delfile",
				data:{
					'delfile':filename
				},
				//laravelトークン対策
	            headers: {
	                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
	            }
			}).done(function(data,textStatus,jqXHR){
				$('#file'+i).remove();
				if(!$('#file_list p').length){
					$('form').append('<input type="file" name="files" id="files" multiple="multiple">');
				}
				alert('ファイルを削除しました。');
			}).fail(function(jqXHR,textStatus,errorThrown){
				//失敗時処理
				alert('ファイルの削除に失敗しました。');
			}).always(function(jqXHR,textStatus){
				//共通処理
			});

		}
	);
	}

});

htmlファイル

<html>
<head>
<title>Laravel</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href='//fonts.googleapis.com/css?family=Lato:100' rel='stylesheet'
	type='text/css'>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapi.com/ajax/libs/jqueryui/1.10.4/i18n/jquery-ui-i18n.min.js"></script>
<script type="text/javascript" src="/js/form.js"></script>
<style>
</style>
</head>
<body>

	<h1>ファイルアップロード</h1>
	<div id="file_list">
	</div>
	<form action="" method="POST" enctype="multipart/form-data">
	<input type="file" name="files" id="files" multiple="multiple">
	</form>

</body>
</html>

PHPデバッグ環境の構築(Xdebug)

1.以下のURLにアクセスする
Xdebug: Downloads

2.PHPのバージョン、PC環境に応じてダウンロードするファイルを選択する
例)PHP 7.0 VC14 TS (32 bit)

3.<XAMPPディレクトリ>\php\extにダウンロードしたファイルをコピーする

4.<XAMPPディレクトリ>\php\php.iniを開いて以下のコードを追加する

zend_extension = "C:\pleiades\xampp\php\ext\php_xdebug.dll"
xdebug.profiler_enable = 1
xdebug.remote_enable = 1

php_xdebug.dllは3.でコピーしたファイル名

5.XAMPPのApacheを再起動し、phpinfo()でXdebugが追加になっていることを確認

----以下、Eclipseでの設定

6.Eclipseの[ウィンドウ]-[設定]-[PHP]-[PHP実行可能ファイル]
実行ファイルを選択して[編集]-[デバッガー]をXdebugにする

7.プロジェクトを右クリックして、[デバッグ]-[デバッグの構成]
[PHPWebアプリケーション]を右クリックして新規追加

8.[サーバー]タブの[構成]をクリックして[ベースURL]をhttp://localhost:(ポート番号)/にする

9.[ウィンドウ]-[設定]-[一般]-[Webブラウザ]で「外部Webブラウザを使用」にする
例)Chrome
※使用したい外部Webブラウザがリストにない場合は、「新規」ボタンから作成する

10.[デバッグ]ボタンを押して実行(XAMPPも起動しておく)

11.ソースコード内に適当にブレークポイントをつくり、ブラウザから実行し、デバッグされることを確認する

Eclipseプラグイン MakeGood導入手順

1.Eclipseの[ヘルプ]-[新規ソフトウェアのインストール]

2.「作業対象」に「http://eclipse.piece-framework.com/」と入力

3.関連するプラグイン(Make Good、Piece Framework、テスト)にチェックを入れて「次へ」

4.以下、ライセンス同意して、Eclipseを再起動

5.Eclipseの[ウィンドウ]-[設定]-[PHP実行可能ファイル]を設定する

6.Eclipseの[ウィンドウ]-[設定]-[デバッグ]を設定する

7.PHPプロジェクトを右クリックしてMakegoodの設定を行う
PHPUnitを選択する
・プリロードスクリプトを設定する(例:/laravel/bootstrap/autoload.php)
※Laravelの場合、phpunit.xmlのbootstrapに記載されているバスを選択するとよい

#参考サイト

PHPの開発環境を構築する(その4): PHPUnit+MakeGoodを使う | 悠雀堂

PHPUnitをEclipseから実行できるプラグイン「MakeGood」が便利です | アライドアーキテクツ エンジニアブログ

XAMPPバージョンアップ方法

1.以下のサイトにアクセスする
XAMPP | SourceForge.net

2.PC環境、PHP環境に合わせてexeファイルをダウンロード、インストールする
例)/XAMPP Windows/7.0.9/xampp-win32-7.0.9-2-VC14-installer.exe

3.以下に保存する(保存先は任意)
例)C:\xampp

4.Apacheのhttd.confを追加・変更する(ポート番号など必要があれば)
例)81番ポート、ドキュメントルート/xampp/public_html

※デフォルトで設定してある80番ポートの設定は変更しなくてよい

Listen 81
<VirtualHost *:81>
DocumentRoot "/xampp/public_html"
</VirtualHost>
<Directory "/xampp/public_html">
Options All
AllowOverride All
Require all granted
</Directory>

5.XAMPPのApacheを実行、画面表示されることを確認する
例)http://localhost:81/

Laravel#ユーザ認証後のリダイレクトURLの設定変更

環境:Laravel5.0

C:\pleiades\xampp\blog\vendor\laravel\framework\src\Illuminate\Foundation\Auth\
AuthenticatesAndRegistersUsers.phpのpostLogin、redirectPath、getLogoutをC:\pleiades\xampp\blog\app\Http\Controllers\Auth\AuthController.phpにオーバーライドする。

[設定例]

	public function postLogin(Request $request)
	{
		$this->validate($request, [
				'email' => 'required|email', 'password' => 'required',
		]);

		$credentials = $request->only('email', 'password');

		if ($this->auth->attempt($credentials, $request->has('remember')))
		{
			return redirect()->intended($this->redirectPath());
		}

		return redirect($this->loginPath())
		->withInput($request->only('email', 'remember'))
		->withErrors([
				'email' => $this->getFailedLoginMessage(),
		]);
	}

	public function redirectPath()
	{
		if (property_exists($this, 'redirectPath'))
		{
			return $this->redirectPath;
		}

		return property_exists($this, 'redirectTo') ? $this->redirectTo : '/form/userlist'; //認証後のリダイレクト先のURL
	}

	public function getLogout(){

		$this->auth->logout();

		return redirect('/auth/login'); //ログアウト後のリダイレクト先URL

	}