【jQuery】notifIt!を使ってフローティングウインドウを表示させる
フローティングウインドウを簡単に実装できるサンプルを紹介したいと思います。
もっとカッコイイデザインで表示させたい!と思った方は、モーダルダイアログの記事も参考にしてくださいね。
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>
下記のフローティングウインドウが表示されれば成功です。
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>
【jQuery】モーダルダイアログをコピペで作ろう
データの更新・削除する前に、必ず確認画面を表示させると思います。
表示させる理由として、データを誤って更新・削除させないようにするためです。
お手軽に実装したい場合、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>
下記の画面が表示されれば成功です。
ただ、この表示方法は、昔から使われてましたが、最近はあまり見かけなくなりました。
(むしろスパム系のサイトが多いので印象がよくないかも・・・)
そこで、簡単に実装できて、尚且つかっこいいものはないのか探したところ、、、
「今流行りのデザインで、尚且つかっこいい!」
と個人的に思う、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」の配置パスは各自の環境に応じて変更してください。
下記の確認画面が表示されれば成功です。
※必要なファイルは「jquery.confirm」フォルダのあるファイルのみになります。
画像ファイルも使用しているため、デザインが崩れる場合は、画像が読み込めてない可能性があります。
確認方法として、ブラウザ開いた状態(Chromeの場合)で、F12を押すとDeveloper Toolsが開くので、エラーがないか確認してみましょう。
【追記】SweetAlertでダイアログ表示
最近見つけたのですがこちらもオススメです。
確認ダイアログの表示
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> <script> var options = { text:"確認メッセージサンプル", buttons:{ cancel: "キャンセル", ok: true } }; swal(options).then(function(val){ if( val ) { alert('ok'); } else { alert('キャンセル'); } }); </script>
【jQuery】よく使うイベント判定
イベント判定処理部分について記載します。
プログラム部分は、コピペで使えますので、良ければお使いください。
クリックイベント
<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編
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から実装されたパーティションを使い、条件でデータを分割させるかになると思います。
パーティションは使ったことがないため、ノウハウがたまり次第、記事にしたいと思います。
【PHP&MySQL】手っ取り早くMySQLを使いたい方へ 接続&SELECT編
PHP5.1以降から導入されたPHP Data Objects(PDO)を使い、手取り早くデータベースへ接続したい方に今回は記事を書いていきたいと思います。
まずは、MySQLへの接続のクラスを紹介。
MySQLサーバへ接続
<?php define("HOST" ,"mysql:dbname=データベース名;host=127.0.0.1"); define("ACCOUNT" ,"mysqlのアカウント名"); define("PASSWORD" ,"パスワード"); $pdo = new PDO( HOST, ACCOUNT, PASSWORD ); ?>
ここで接続できなかった場合、まずは下記の項目をチェックしてみましょう。
- PDOの記述間違いがないか確認。
- データベースが存在しているか、データベース名に間違っていないか確認。
- ホスト名が間違っていないか確認。(サーバが違う場合そのサーバのIPなど指定する。
- アカウント名・パスワードが間違っていないか確認。
- MySQLサーバがPHPが動いているサーバと別の場合、PHPが動いているサーバからアクセス権があるか確認。
上記の5項目確認しても繋がらない場合、エラー内容で調べてみると知恵袋などに回答が記載されてますので、該当箇所を再度確認してみましょう。
接続ができないと、PHPのエラーが表示されるため、try&catchを使い処理を作成しましょう。
<?php define("HOST" ,"mysql:dbname=データベース名;host=127.0.0.1"); define("ACCOUNT" ,"mysqlのアカウント名"); define("PASSWORD" ,"パスワード"); try { $pdo = new PDO( HOST, ACCOUNT, PASSWORD ); } catch(PDOException $e) { echo 'データベース接続エラー'; die(); } ?>
データベース内にあるテーブルにアクセスしデータを参照する方法
<?php $sql = 'SELECT id, name FROM sample'; $sth = $pdo->prepare($sql); $sth->execute(); $arySamples = $sth->fetchAll(PDO::FETCH_ASSOC); ?>
sampleテーブルにあるデータを変数「$arySamples」に格納します。
上のクエリーだと、sampleテーブルのすべてのデータを変数に格納しますが、idで指定して1つデータのみ参照する場合は、「$sth->fetchAll(PDO::FETCH_ASSOC);」を「$sth->fetch(PDO::FETCH_ASSOC);」に変えると、$arySamples["id"]な形式でデータを取得することが可能です。
特定のデータのみ参照する
<?php $sql = 'SELECT id, name FROM sample WHERE id= :id'; $sth = $pdo->prepare($sql); $sth->bindValue(':id', "1", PDO::PARAM_INT); $sth->execute(); $arySamples = $sth->fetch(PDO::FETCH_ASSOC); ?>
少し記述が変わってますが、「$sth->bindValue(':id', "1", PDO::PARAM_INT);」を使うことで、エスケープ処理も自動でやってくれるため、変数の格納が楽になります。
「$sth->bindValue」を使わなくても、「$sql」変数に直接記述もできますが、エスケープ処理されないため、「$sth->quote($string)」を使い処理しましょう。
PHP: PDO::quote - Manual
bindValueの第3引数について
PDO::PARAM_INT以外にも、いろんな定数があります。
PHP: 定義済み定数 - Manual
よく使うものだと。
- PDO::PARAM_INT
- PDO::PARAM_STR
- PDO::PARAM_NULL
この3つになるでしょうか。
「PDO::PARAM_NULL」の定数ですが、値をNULLにしたいときに利用します。
なので値がある場合、「PDO::PARAM_INT」OR「PDO::PARAM_STR」にしないとエラーになります。
クエリーエラーを確認する方法
<?php $sql = 'SELECT id, name FROM sample WHERE id= :id'; $sth = $pdo->prepare($sql); $sth->bindValue(':id', "1", PDO::PARAM_INT); if( !$sth->execute() ){ print_r($sth->errorInfo()); } $arySamples = $sth->fetch(PDO::FETCH_ASSOC); ?>
PDOでは、クエリーエラーが表示されないため、「$sth->errorInfo()」で確認する必要があります。
※特にINSERTやUPDATE時。
エラー内容を保存して通知するような仕組みがあると、メンテナンスやトラブルの調査が楽になると思います。