備忘録 – ページ 24 – 東京発、雲に乗って

2017年6月6日2017年6月6日

【JavaScript】外部のCSSファイルを動的にロード

外部のCSSファイルをJavaScriptから動的にロードする関数です。

var loaded_styles = {};
var load_css = function(src) {
  if(sdl.loaded_styles[src]) {
    return;
  }
  var head = document.getElementsByTagName('head')[0];
  var link = document.createElement("link");
  link.rel = "stylesheet";
  link.type = "text/css";
  link.href = src;
  head.insertBefore(link, head.firstChild);
  var loaded_styles[src] = 1;
};

var loaded_styles = {};

var load_css = function(src) {

if(sdl.loaded_styles[src]) {

return;

}

var head = document.getElementsByTagName('head')[0];

var link = document.createElement("link");

link.rel = "stylesheet";

link.type = "text/css";

link.href = src;

head.insertBefore(link, head.firstChild);

var loaded_styles[src] = 1;

};

使い方

load_css('/libs/css/style.css');

1	load_css('/libs/css/style.css');

2017年5月26日2017年6月14日

【jQuery】短いページだけフッターを最下部に固定する

ページのコンテンツが少ないなど、フッターを含めたページの縦幅がブラウザの縦幅より短い場合があると思います。
そのようなページでフッターをそのままコンテンツにつなげると、フッターの下にさらに余白ができてしまい、なんだかカッコ悪いですよね。
かといって、position: fixed で常にフッターを固定すると、今度は長いページでもフッターが常に残ってしまいます。

そこで、ページの縦幅がブラウザの縦幅より短い場合だけ
position: fixed を指定してみます。

まずはページサイズとブラウザサイズを取得

var page_size = {
  w : $(window).width()
 ,h : $(window).height()
};
var browser_size = {
  w: document.body.clientWidth
 ,h: document.body.clientHeight
};

var page_size = {

w : $(window).width()

,h : $(window).height()

};

var browser_size = {

w: document.body.clientWidth

,h: document.body.clientHeight

};

両者を比較して、ページサイズが短い場合にpositionをfixedにします。

if(page_size.h > browser_size.h) {
  $('フッターのセレクタ').css('position', 'fixed');
  $('フッターのセレクタ').css('bottom', '0px');
  $('フッターのセレクタ').css('width', '100%'); /* 必要なら */
}
else {
  $('フッターのセレクタ').css('position', 'static');
  $('フッターのセレクタ').css('bottom', '');
  $('フッターのセレクタ').css('width', ''); /* 必要なら */
}

if(page_size.h > browser_size.h) {

$('フッターのセレクタ').css('position', 'fixed');

$('フッターのセレクタ').css('bottom', '0px');

$('フッターのセレクタ').css('width', '100%'); /* 必要なら */

}

else {

$('フッターのセレクタ').css('position', 'static');

$('フッターのセレクタ').css('bottom', '');

$('フッターのセレクタ').css('width', ''); /* 必要なら */

}

注意すべき点して、
上記の処理は基本的にページロードの最後に呼べばよいのですが、
動的にコンテンツが増えたり減ったりするページの場合は
その都度、上記の処理を呼ぶ必要があります。

2017年5月25日2017年5月25日

【PHP】【MySQL】日付の書式の違い

PHPとMySQLで日付の書式が若干違っています。
どちらかしか使わないと決めているならいいのですが、
日付の整形をPHPでやるか、MySQLでやるいか、ケースバイケースなんですよね。

PHPは

Y : 年(4ケタ)
m : 月(00～12)
d : 日(00～31)
H : 時(00～23)
i : 分(00～59)
s : 秒(00～59)

y : 年(2ケタ)
n : 月(0～12)
j : 日(0～31)
G : 時(0～23)

Y : 年(4ケタ)

m : 月(00～12)

d : 日(00～31)

H : 時(00～23)

i : 分(00～59)

s : 秒(00～59)

y : 年(2ケタ)

n : 月(0～12)

j : 日(0～31)

G : 時(0～23)

使い方は

$date_string = date('Y-m-d H:i:s');

1	$date_string = date('Y-m-d H:i:s');

MySQLは

Y : 年(4ケタ)
m : 月(00～12)
d : 日(00～31)
H : 時(00～23)
i : 分(00～59)
s : 秒(00～59)

y : 年(2ケタ)
c : 月(0～12)
e : 日(0～31)
k : 時(0～23)

Y : 年(4ケタ)

m : 月(00～12)

d : 日(00～31)

H : 時(00～23)

i : 分(00～59)

s : 秒(00～59)

y : 年(2ケタ)

c : 月(0～12)

e : 日(0～31)

k : 時(0～23)

使い方は

SELECT date_format(column1, '%Y-%m-%d %H:%i:%s') FROM table1;

1	SELECT date_format(column1, '%Y-%m-%d %H:%i:%s') FROM table1;

2017年5月18日2017年5月18日

【MySQL】PHPのstrposをSQLでやる

MySQLのLOCATE関数でPHPのstrpos関数と同様のことができます。

SELECT LOCATE('雲', '東京発、雲に乗って')

1	SELECT LOCATE('雲', '東京発、雲に乗って')

このSQLの答えは5が返ってきます。

PHPのstrposと異なるのは、
1文字目がヒットした場合は0ではなく1を返します。
存在しなかった場合は0が返ってきます。

私がよく使うパターンとしては
データの中にキーワードが含まれるかどうかの判定ですね。

WHERE
 LOCATE(?, column1) != 0

1 2	WHERE LOCATE(?, column1) != 0

2017年5月16日

【Linux】拡張子を指定してファイルを一括削除

例）mp3ファイルだけを一括で削除

find . -name "*.mp3" | xargs rm

1	find . -name "*.mp3" \| xargs rm

ディレクトリが深くても再帰的に下ってくれます。