PG WORKS

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

コード検索にオススメ!サクラエディタのGrep検索を使おう

大量のプログラムを調べるときに、サクラエディタGrep検索を使うと、当てはまる箇所を一覧で表示してくれる便利な機能があります。

sakura-editor.sourceforge.net


SakuraEditorWiki
サクラエディタwiki

Grepの使い方

  • 目がフォルダに向かっているアイコンをクリック

f:id:zen6a:20180130230935p:plain

※複数のソースコードがある場合、フォルダごと選択すると一括で調べてくれます。

  • 「条件」に調べたいコード内容を入力します。

f:id:zen6a:20180130230940p:plain


あとは検索して、結果が表示されるのを待つだけ。

条件に当てはまったものが、下記のように一覧で表示されます。


f:id:zen6a:20180130230942p:plain


一覧に表示された部分をクリックすると、対象のファイルを開いてくれます。

サクラエディタは、カスタマイズすれば、phpの関数も色分けしてくれたりと、大変便利なエディタです。

正規表現も使えるので、INSERTクエリーを作るときに長保してます。

hotmail宛てにメールが送れない件

hotmail宛てにメールを送信しても、エラーが返ってくるようであれば、
対象のIPが受信拒否されている可能性があります。

http://mail.live.com/mail/troubleshooting.aspx#errors

対処法

1.マイクロソフトに問い合わせをしてみる。

https://support.microsoft.com/ja-jp/getsupport?oaspworkflow=start_1.0.0.0&wfname=capsub&productkey=edfsmsbl3&locale=ja-JP&ccsid=636299860276744079&wa=wsignin1.0

早ければ数時間後、遅くても1日後には、マイクロソフトから返信が届くと思います。
これで解決すればいいのですが、解除後すぐ規制されるようでしたら、サーバの乗り換えをオススメします。

特に、共有サーバーだと、同じIPを利用している会社がほとんどで、使う頻度が高いユーザーが混じると、ブロックされる可能性が高くなります。
共有サーバーではない場合、短時間でメールの送りすぎなので、IP分散するか、一時的にブロックされたIPを切り替えることで対処が可能です。
IPアドレスの切り替えは、解決にはなってないため、送る通数を絞ったり、スパム対策をしたほうが良いでしょう。

2.別のサーバに移転する

IPアドレスが原因なので、対処してもらえないのであれば、サーバを移転するしかありません。
事前に、検討しているレンタルサーバ会社に問い合わせをして、規制されたときの対処、過去に規制されたことがあるかなど、確認するといいでしょう。

気になってたCPIに問い合わせてみた

何度もメール送っても、規制が解除されず、レンタルサーバを探していたのですが、
CPIというレンタルサーバが気になって、この件について問い合わせてみたところ、

  • 共有サーバでも、契約者ごとにIPを設定している
  • もし規制かかった場合、対応してくれる

ただし、無料のSSLが使えないため、Let's Encryptが対応すれば、契約したのですが、有料のSSLが高くて無理でした。。。

毎年改善している動きが、見受けられるので、今後に期待ですね!

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

【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が開くので、エラーがないか確認してみましょう。

【追記】SweetAlertでダイアログ表示

最近見つけたのですがこちらもオススメです。

sweetalert.js.org

確認ダイアログの表示

<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】よく使うイベント判定

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="新規作成">