コード検索にオススメ!サクラエディタのGrep検索を使おう
大量のプログラムを調べるときに、サクラエディタのGrep検索を使うと、当てはまる箇所を一覧で表示してくれる便利な機能があります。
hotmail宛てにメールが送れない件
hotmail宛てにメールを送信しても、エラーが返ってくるようであれば、
対象のIPが受信拒否されている可能性があります。
http://mail.live.com/mail/troubleshooting.aspx#errors
対処法
1.マイクロソフトに問い合わせをしてみる。
早ければ数時間後、遅くても1日後には、マイクロソフトから返信が届くと思います。
これで解決すればいいのですが、解除後すぐ規制されるようでしたら、サーバの乗り換えをオススメします。
特に、共有サーバーだと、同じIPを利用している会社がほとんどで、使う頻度が高いユーザーが混じると、ブロックされる可能性が高くなります。
共有サーバーではない場合、短時間でメールの送りすぎなので、IP分散するか、一時的にブロックされたIPを切り替えることで対処が可能です。
※IPアドレスの切り替えは、解決にはなってないため、送る通数を絞ったり、スパム対策をしたほうが良いでしょう。
2.別のサーバに移転する
IPアドレスが原因なので、対処してもらえないのであれば、サーバを移転するしかありません。
事前に、検討しているレンタルサーバ会社に問い合わせをして、規制されたときの対処、過去に規制されたことがあるかなど、確認するといいでしょう。
【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="新規作成">