【jQuery】スマホサイトの背景画像を画面横幅に合わせてリサイズするサンプルコード

スマホサイトで画面の向きが変わる時に背景画像と画面の向きが変わった事によりリサイズされた親要素の大きさのズレを解消する処理を自作したのでメモ。

【仕様】
・画面の向き変更後に画面横幅を基準に、親要素と背景画像をリサイズする。

bg_resize

⇒デモ(スマホ実機で要確認)

【JS】

$(function(){
	var classBgResize = function(block_pass, sw) {
		var block_cnt = block_pass.length;
		var arr_img = new Array(block_cnt);
		var bg_img = new Array(block_cnt);
		var bg_img_name = new Array(block_cnt);
		
		for(var i=0 ; i<=(block_cnt-1) ; i++){
			bg_img[i] = block_pass.eq(i).css("background-image");
			bg_img_name[i] = bg_img[i].substring(4, bg_img[i].length - 1);
		
			arr_img[i] = new Image();
			arr_img[i].src = bg_img_name[i];
		}
		
		arr_img[(i-1)].onload = function(){
			var iw = new Array(block_cnt);
			var ih = new Array(block_cnt);
			var bw = new Array(block_cnt);
			var bh = new Array(block_cnt);
			var arr_h = new Array(block_cnt);
			var arr_w = new Array(block_cnt);
	
			var n = 0;
			$.each(arr_img, function(){
			
				iw[n] = arr_img[n].width;
				ih[n] = arr_img[n].height;
				bw[n] = block_pass.eq(n).width();
				bh[n] = block_pass.eq(n).height();
				
				n++;
			});
			$(window).resize((function(){
				resizeAction(block_pass, iw, ih, bw, bh, arr_h, arr_w, sw);
			}));
		}
		
		// リサイズ処理
		function resizeAction(block_pass, iw, ih, bw, bh, arr_h, arr_w, sw){	
			var cw  = $(this).width();
			
			for(var s=0 ; s<=(bw.length-1) ; s++){
				if(sw == cw){
					//alert("スタート時と同じ向き");
					arr_h[s] = bw[s]/iw[s]*ih[s];
					
					block_pass.eq(s).css({backgroundSize: "100%"});
					block_pass.eq(s).css("width", bw[s]+"px");
					block_pass.eq(s).css("height", arr_h[s]+"px");
				
				}else{
					//alert("スタート時と違う向き");
					arr_w[s] = (cw)*(bw[s]/sw);
					arr_h[s] = (cw/iw[s]*ih[s])*(bw[s]/sw);
					
					block_pass.eq(s).css({backgroundSize: "100%"});
					block_pass.eq(s).css("width", arr_w[s]+"px");
					block_pass.eq(s).css("height", arr_h[s]+"px");
				}
			}
		}
	}
	
	// クラス名と画面横幅初期値を代入
	var block_pass = $(".bg_resize");
	var sw = $(this).width();
	
	new classBgResize(block_pass, sw);
});

【HTML】

<div id="conteiner"> 
	<p class="aaa bg_resize">bg_resize_aaa</p>
	<p class="bbb bg_resize">bg_resize_bbb</p>
	<p class="ccc">no_resize_ccc</p>
</div>

【CSS】

#conteiner{
	width: 100%;
	margin: 0 auto;
}

.img_chenge img{
	width: 100%;
}

.aaa{
	width: 100%;
	background: url(../img/s_test_1.jpg) no-repeat; 
}

.bbb{
	width: 50%;
	background: url(../img/s_test_2.jpg) no-repeat; 
}

.ccc{
	width: 50%;
	background: url(../img/s_test_1.jpg) no-repeat; 
}

⇒デモ(スマホ実機で要確認)

【MySQL】テーブル内指定カラムの文字列をREPLACE関数で一括置換する

MySQLテーブル内指定カラムのテキストを一括置換したいが一発勝負なので、
一括置換する前に、あらかじめ置換後の文字列を確認したい時のSELECT文を作ってみたのでメモ

【確認用SELECT文】

SELECT
置換カラム名,
REPLACE(置換カラム名, '置換したい文字列', '置換後の文字列') AS 置換後カラム名
FROM
テーブル名

使用例)
SELECT
beforer_column,
REPLACE(beforer_column, '置換したい文字列', '置換後の文字列') AS after_column
FROM
table_name

【実行用UPDATE文】

UPDATE
テーブル名
SET
置換カラム名 = REPLACE(置換カラム名, '置換したい文字列', '置換後の文字列')

使用例)
UPDATE
table_name
SET
column_name = REPLACE(column_name, '置換したい文字列', '置換後の文字列')

REPLACE関数:REPLACE(カラム名, ‘置換したい文字列’, ‘置換後の文字列’)

【PHP】ユーザーエージェント(User Agent)からデバイスやキャリアを判別するクラス

スマホ・タブレット・携帯(ガラケー)・PCなどデバイスごとに振り分ける処理をしたいので、各デバイス情報を取得したい。

前回作った、ユーザーエージェント(User Agent)を取得してデバイスを判別するクラスを改造して、携帯(ガラケー)情報とキャリア情報も取得できるようにした。

ユーザーエージェント判定クラス(改)

class UserAgent{
	
	private $ua;
	private $device;
	private $career;
 
	public function UserAgent(){
		$this->deviceCheck();
	}
	
	public function careerCheck(){
	
		//ユーザーエージェント取得
		$this->ua = $_SERVER['HTTP_USER_AGENT'];
 
		if(strpos($this->ua,'DoCoMo') !== false){
			//DoCoMo
			$this->career = 'docomo';
		}
		elseif(strpos($this->ua,'UP.Browser') !== false){
			//au
			$this->career = 'au';
		}
		elseif((strpos($this->ua,'SoftBank') !== false) || (strpos($this->ua, 'Vodafone') !== false) || (strpos($this->ua,'J-PHONE') !== false) || (strpos($this->ua,'SMOT') !== false)){
			//SoftBank
			$this->career = 'softbank';
		}
		elseif(strpos($this->ua,'WILLCOM') !== false){
			//WILLCOM
			$this->career = 'willcom';
		}
		elseif(strpos($this->ua,'emobile') !== false){
			//eモバイル
			$this->career = 'emobile';
		}
		else{
			//不明
			$this->career = 'unknown';
		}
	}
	 
	public function deviceCheck(){
		 
		//ユーザーエージェント取得
		$this->ua = $_SERVER['HTTP_USER_AGENT'];
		$this->careerCheck();
 
		if(strpos($this->ua,'iPhone') !== false){
			//iPhone
			$this->device = 'sp';
		}
		elseif(strpos($this->ua,'iPad') !== false){
			//iPad
			$this->device = 'tb';
		}
		elseif((strpos($this->ua,'Android') !== false) && (strpos($this->ua, 'Mobile') !== false)){
			//Android
			$this->device = 'sp';
		}
		elseif(strpos($this->ua,'Android') !== false){
			//Android
			$this->device = 'tb';
		}
		elseif($this->career != 'unknown'){
			//携帯
			$this->device = 'mb';
		}
		else{
			//PC
			$this->device = 'pc';
		}
	}
	
	public function getDevice(){
		return $this->device;
	}
	
	public function getCareer(){
		$this->careerCheck();
		return $this->career;
	}
}

実行

$ua = new UserAgent();

// スマホ:sp タブレット:tb 携帯:mb PC:pc
echo $ua->getDevice();

getCareer()でキャリア情報も取得できるようにしました。

【ExcelVBA】エクセルで指定数以外の文字列を伏字に置換する

エクセルでメールアドレスなどの個人情報の保護を理由に1部分を残して伏字にしたい。
今回は、メールアドレスの文字列のうち左から8桁残して、それ以外の文字列を伏字(“x”)に変換する。

【要件】

  • ・文字列が打ち込まれた時コピペされた時に伏字にしたものに上書きする。
  • ・左から8文字はそのまま残し、それ以外の文字列を伏字(“x”)に置換する。
  • ・メールアドレスを元に戻す必要はない。

【仕様】

  • Worksheet_Change()セルの値が変更された時に発生するイベントを利用する。
  • 対象カラムを指定し、その列に打ち込まれた文字列のみ処理を行う。
  • ・文字列がない場合エラーになるので、0文字以上の場合のみ実行する。

【コード】

Private Sub Worksheet_Change(ByVal Target As Range)
    Dim ColNum
    '対象カラムを指定
    ColNum = 3

    '対象カラムで条件分岐
    If Target.Column = ColNum Then
        Call putSecurityText(Target.row, Target.Column)
    End If
End Sub
  
'指定したrowとColumnからセルを割り出し文字列をセキュリティコードに上書きするサブプロシージャ
Sub putSecurityText(row, col)
    Dim num
    Dim xText
    Dim SecurityText
    Dim cellVal
    
    '残すテキスト数
    num = 8
    cellVal = Cells(row, col).Value

    leftVal = Left(cellVal, num)
    lenVal = Len(cellVal)
    cntVal = lenVal - num
    
    '文字列分"x"を生成し連結する
    For i = 1 To cntVal Step 1
    xText = xText & "x"
    Next i
    
    SecurityText = leftVal & xText
    
    '文字列が0以上の場合のみ実行
    If lenVal > 0 Then
        Cells(row, col).Value = SecurityText
    End If
End Sub

‘Target.Column’,'Target.Row’からセルの列番号,行番号を取得することが出来る。

【ExcelVBA】指定セルの値が変更された時にイベントを発生させる”Worksheet_Change”イベント

指定セル更新後の処理イベント(指定セルの値が変更された時)が発生した時に処理を実行する。

今回は、指定したセル内の文字列が変更された時に、ダイアログボックス(ウィンドウ)に文字列を出力する。

Worksheet_Change()
セルの値が変更された時に発生するイベント。

Private Sub Worksheet_Change(ByVal Target As Range)
    'カラムで条件分岐
    If Target.Column = 2 Then
        'サブプロシージャを呼び出す
        Call putCellVal(Target.Value)
    End If
End Sub
  
'文字列(値)を出力する関数サブプロシージャ
Sub putCellVal(val)
    MsgBox val
End Sub
Targetにはイベントが発生した時点でのセルの情報が入ってきます。
Target.Column…そのセルの列番号を取得
Target.Row …そのセルの行番号を取得
Target.Value …そのセルの値を取得