PG WORKS

PHPやLinuxサーバなどのノウハウや、便利なツールを紹介していきます。

【jQuery】notifIt!を使ってフローティングウインドウを表示させる

f:id:zen6a:20170423000920p:plain

フローティングウインドウを簡単に実装できるサンプルを紹介したいと思います。

もっとカッコイイデザインで表示させたい!と思った方は、モーダルダイアログの記事も参考にしてくださいね。
zen6a.hateblo.jp

notifIt!のダウンロード先

http://naoxink.hol.es/notifIt/
Step 2 - Download it!の「Now!」ボタンを押すとダウンロードできます。

使用用途

  • ajaxで取得結果を表示させたいとき。
  • データの更新や削除したときに、画面遷移せず、結果を表示させたいとき。

サンプル1(とりあえず、動作確認を見たい場合

<html>
<head>
	<title>notifIt!</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="./notifIt/css/notifIt.css" rel="stylesheet">

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="./notifIt/js/notifIt.min.js"></script>
</head>
<body>
	<script>
notif({
	msg: "<b>Success:</b> <br />In 5 seconds i'll be gone",
	type: "success",
	multiline: true
});[f:id:zen6a:20170731005233p:plain]
	</script>
</body>
</html>

下記のフローティングウインドウが表示されれば成功です。
f:id:zen6a:20170731005233p:plain

notifIt!のオプション説明

引数 設定値 説明
msg 自由入力 フローティングウインドウに表示させるテキスト
position center
left
right
フローティングウインドウの位置
type success
info
warning
error
フローティングウインドウの背景色
bgcolor カラーコード
例(黒色を指定):#000000
フローティングウインドウの背景色
color カラーコード
例(黒色を指定):#000000
テキストの色指定
opacity 数値を入力
例:0.8
透明度設定
timeout 数値を入力
例(1秒表示):1000
フローティングウインドウの表示時間
autohide true(初期値)
false
自動でフローティングウインドウが消えないようにする
multiline true
false(初期値)
テキストを改行させる
clickable true ボタンを押したときにフローティングウインドウが閉じる

ajaxと組み合わせた使い方

<?php
	/*
	*	notifIt!
	* 	https://github.com/naoxink/notifIt/archive/master.zip
	*	Demo
	*	http://naoxink.hol.es/notifIt/
	*/
?>
<!DOCTYPE html>
<html>
<head>
	<title>notifIt!</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="./notifIt/css/notifIt.css" rel="stylesheet">

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="./notifIt/js/notifIt.min.js"></script>
</head>
<body>
	<script>
		$.ajax({
			type: "POST",
			dataType:"text",
			url:"http://......",
			data: { "text":"aaa" },
			success: function(res) {
				notif({
					msg: "<b>Success:</b>",
					type: "success",
					multiline: true
				});
			},
	        error: function(res) {
				notif({
					msg: "<b>error:</b>",
					type: "error",
					multiline: true
				});
	        }
		});
	</script>
</body>
</html>

notifIt!の使用用途

使う用途としては、ajaxの結果を通知するときに、notifIt!を使います。(短いソースで簡単に呼び出すことができるため。

また、公式ページには、ソースコードをクリックすると、実際のデモが表示されます。
好きなデザインがあれば、そのソースをコピペして、そのまま使うことができます。

notifIt!は、定期的にバージョンアップしているみたいなので、システムに導入する際には、随時確認してみましょう。

【レビュー】マストドンを設置してみた感想

f:id:zen6a:20170725223828p:plain

ConoHaのVPSサーバに、マストドンをインストールして、実際に運用(数日)してみた感想を書きます。

※2017年7月25日追記
マストドンのバージョンアップしたら見事にデータが消えました・・・復活するかは未定ですが、取り出しないとダメですね^^;

ネックな部分

  • 設置するにはLinuxの知識が必要
  • 細かいカスタマイズができないため、直接マストドンソースコードを編集する必要がある
  • サイトを止めないと更新できないため、気軽に設定変更ができない
  • コンパイルに失敗すると起動できなくなるため、稼働したマストドンを直接編集は難有り

課題部分(今後のアップデートで変更される可能性あり)

  • 管理画面でユーザの削除ができない(アカウント停止はあり
  • twitterではできるユーザ名の変更とメールアドレスの変更ができない
  • 管理者権限を一度つけると外すことができない。(直接データベースのカラム(admin)のフラグを変更すれば解除できます。
  • アイコンの設定やロゴの変更など、簡単にできるものがない(直接ソースを変更する必要あり


現状、マストドンを立ち上げれるのが、Linuxの知識がないと難しいため、WordPressみたいな、DBの設定したらインストールできる仕組みがあると利用するユーザーは増えると思うのですが。。。

ECサイト運営している方には、商品のレビューや要望や意見など、聞き取りしやすい環境だと思うので、今後のアップデートに期待ですね。

【jQuery】モーダルダイアログをコピペで作ろう

f:id:zen6a:20170415230222p:plain

データの更新・削除する前に、必ず確認画面を表示させると思います。
表示させる理由として、データを誤って更新・削除させないようにするためです。

お手軽に実装したい場合、JavaSprictの「Confirm」を使われると思います。

Java Sprict版Confirm

<?php
 /*
 *	Java Sprict版 Confirm
 */
?>
<!DOCTYPE html>
<html>
<head>
	<title>Java Sprict版 Confirm</title>
	<meta charset="utf-8" />
</head>
<body>
	<p><input type="button" value="javasprict確認ダイアログ" onClick="disp()"></p>
	<script>
function disp(){
	if( window.confirm('更新します。よろしいですか?') ){
		// OK
	}else{
		// キャンセル
	}
}
</body>
</html>

下記の画面が表示されれば成功です。
f:id:zen6a:20170415222112p:plain
ただ、この表示方法は、昔から使われてましたが、最近はあまり見かけなくなりました。
(むしろスパム系のサイトが多いので印象がよくないかも・・・)


そこで、簡単に実装できて、尚且つかっこいいものはないのか探したところ、、、




「今流行りのデザインで、尚且つかっこいい!」


と個人的に思う、jQuery版のComfirmがありましたので紹介したいと思います。

jQuery Confirmのダウンロード先

tutorialzine.com
デモ画面は下記のURLから動作確認ができます。
A jQuery Confirm Dialog Replacement with CSS3 | Tutorialzine Demo
×ボタンをクリックまたはタップすることで、Comfirmが表示されます。

デモを見ると、Comfirm以外にも使えて幅広く使えそうです!

では、実際に実装するときのソースを紹介。

モーダルダイアログ表示サンプル

<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./jquery.confirm/jquery.confirm/jquery.confirm.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="./jquery.confirm/jquery.confirm/jquery.confirm.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
	$.confirm({
		title:'Confirm',
		message:'更新します。よろしいですか?<br /><font color="#FF0000">※赤文字HTMLテスト※</font>',
		'buttons'	: {
			'OK'	: {
				'class'	: 'blue',
				'action': function(){
					// OKボタン押されたときの処理を記載
				}
			},
			'キャンセル'	: {
				'class'	: 'gray',
				'action': function(){
					// キャンセルボタン押されたときの処理を記載
				}
			}
		}
	});
});
</script>
</body>
</html>

※「jquery.confirm.css」「jquery.confirm.js」の配置パスは各自の環境に応じて変更してください。

下記の確認画面が表示されれば成功です。
f:id:zen6a:20170415224648p:plain
※必要なファイルは「jquery.confirm」フォルダのあるファイルのみになります。

画像ファイルも使用しているため、デザインが崩れる場合は、画像が読み込めてない可能性があります。

確認方法として、ブラウザ開いた状態(Chromeの場合)で、F12を押すとDeveloper Toolsが開くので、エラーがないか確認してみましょう。

【jQuery】よく使うイベント判定

f:id:zen6a:20170413223754p:plain

イベント判定処理部分について記載します。
プログラム部分は、コピペで使えますので、良ければお使いください。

クリックイベント

<script type="text/javascript">
  $(document).ready(function(){
    $("#zen6aadd").click(function() {
       // ここに処理を書く
    });
  });
</script>

<input type="button" id="zen6aadd" value="新規作成">

id名が「zen6aadd」をクリックしたときに、イベントが発生します。
※同じid名があると片方した反応しないため、複数反応させるためには、下記の記述にします。

クリックイベント(id複数版)

<script type="text/javascript">
  $(document).ready(function(){
    $("[id=zen6aadd]").click(function() {
       // ここに処理を書く
    });
  });
</script>

<input type="button" id="zen6aadd" value="新規作成">

セレクトボックスの値が変更されたときの判定イベント

<script type="text/javascript">
  $(document).ready(function(){
    $("#selecterzen6a").change(function() {
       // ここに処理を書く
    });
  });
</script>
<select name="selecterzen6a" id="selecterzen6a">
  <option value="テラバトル">テラバトル</option>
  <option value="DDR">DDR</option>
  <option value="PHP">PHP</option>
  <option value="jQuery">jQuery</option>
  <option value="CSS">CSS</option>
</select>

動的に追加したフォームを判定したいとき

<script type="text/javascript">
  $(document).ready(function(){
    $(document).on('click', '#zen6aadds', function(e){
       // ここに処理を書く
    });
  });
</script>

<input type="button" id="zen6aadds" value="新規作成">

【PHP&MySQL】手っ取り早くMySQLを使いたい方へ INSERT UPDATE DELETE編

f:id:zen6a:20170410235113p:plain
INSERT/UPDATE/DELETEの使い方を、説明していきたいと思います。

PDOの接続や、データ参照(SELECT)方法については、下記の記事をご確認ください。
zen6a.hateblo.jp

データの追加(INSERT)

<?php
$sql = "INSERT INTO sample( id, name, pass )VALUES( :id, :name, :pass )";
$sth = $pdo->prepare($sql);
$sth->bindValue(':id', 1, PDO::PARAM_INT);
$sth->bindValue(':name', "sample", PDO::PARAM_STR);
$sth->bindValue(':pass', "sample_pass", PDO::PARAM_STR);
// INSERTに失敗したときにエラーを表示
if( !$sth->execute() ){
  print_r($sth->errorInfo());
  exit;
}
?>

データを複数追加(INSERT)

<?php
$aryInsertData[] = '('.1.','.'sample'.','.'sample_pass'.')';
$aryInsertData[] = '('.2.','.'sample2'.','.'sample_pass2'.')';
$sql = "INSERT INTO sample( id, name, pass )VALUES".implode(",", $aryInsertData);
$sth = $pdo->prepare($sql);
// INSERTに失敗したときにエラーを表示
if( !$sth->execute() ){
  print_r($sth->errorInfo());
  exit;
}
?>

同じデータがある場合UPDATEなければINSERT

<?php
$aryInsertData[] = '('.1.','.'sample'.','.'sample_pass'.')';
$aryInsertData[] = '('.2.','.'sample2'.','.'sample_pass2'.')';
$aryInsertData[] = '('.3.','.'sample3'.','.'sample_pass3'.')';
$sql = "INSERT INTO sample( id, name, pass )VALUES".implode(",", $aryInsertData)."ON DUPLICATE KEY UPDATE name = VALUES(name)";
$sth = $pdo->prepare($sql);
// INSERTに失敗したときにエラーを表示
if( !$sth->execute() ){
  print_r($sth->errorInfo());
  exit;
}
?>

サンプルでは、変数「$aryInsertData」を3列分記載していますが、実際に使う場合、forループで配列を作成し、INSERTしていく処理になると思います。

経験上、一度にたくさんのINSERT配列を作成してデータ追加した方が処理的にも速くなると思いますが、PHPで扱えるメモリサイズ「memory_limit」の設定を確認して追加する量を調整した方が良いと思います。

また、サーバのスペックにもよると思いますが、INSERTする量が多すぎると(例えば一度に1万レコード追加)、サーバに負担がかかりSELECTにも影響でる可能性があります。

こちらも、必要なものだけINSERTさせるか、分散させて追加する方向で考えたほうが良いと思います。

また、INSERTの最後に記述している「ON DUPLICATE KEY UPDATE」は、値の更新もできます。

「ON DUPLICATE KEY UPDATE name = VALUES(name)」

↑VALUES(カラム名)でINSERTする値に更新することが可能になるので、後でUPDATEする必要もなく処理的にも大変便利な機能です。

データの更新(UPDATE)

<?php
$sql = "UPDATE sample SET name = :name WHERE id = :id";
$sth = $pdo->prepare($sql);
$sth->bindValue(':id', 1, PDO::PARAM_INT);
$sth->bindValue(':name', "sample_udpate", PDO::PARAM_STR);
// UPDATEに失敗したときにエラーを表示
if( !$sth->execute() ){
  print_r($sth->errorInfo());
  exit;
}
?>

UPDATEに関して、特別注意することは思い当たらないですが、更新する量が多ければ時間がかかるため、テーブルのレコード件数と型のサイズに注意しましょう。

データの削除(DELETE)

<?php
$sql = "DELETE FROM sample WHERE id = :id";
$sth = $pdo->prepare($sql);
$sth->bindValue(':id', 1, PDO::PARAM_INT);
// DELETEに失敗したときにエラーを表示
if( !$sth->execute() ){
  print_r($sth->errorInfo());
  exit;
}
?>

DELETEは、レコード件数が多いほど、処理が遅くなります。
対策としては、LIMITで何回かに分けてDELETEするか、MySQL5.1から実装されたパーティションを使い、条件でデータを分割させるかになると思います。

パーティションは使ったことがないため、ノウハウがたまり次第、記事にしたいと思います。