2017年5月 – 東京発、雲に乗って

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

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

2017年5月12日2017年5月26日

【PHP】Last-Modifiedヘッダによる静的コンテンツのキャッシュ制御

画像などの静的コンテンツのファイルに直接アクセスした場合は
ブラウザが自動的にキャッシュ制御を行ってくれますが、
PHPで静的コンテンツを返すような処理を行っている場合にキャッシュを利用するには
Last-Modifiedヘッダを使ってキャッシュを制御する必要があります。

まず、PHPでファイルをダウンロードさせる際に
filemtime関数でファイルの更新日時を取得してLast-Modifiedヘッダを追加します。

header('Last-Modified: filemtime('ファイルのパス'));

1	header('Last-Modified: filemtime('ファイルのパス'));

さらにキャッシュを残すためのヘッダも追加します。

header('Pragma: cache');
header("Cache-Control: max-age=" . (60 * 60 * 24 * 30)); // 有効期間30日の例

1 2	header('Pragma: cache'); header("Cache-Control: max-age=" . (60 * 60 * 24 * 30)); // 有効期間30日の例

そうすると、次に同じファイルをダウンロードしようとした際のリクエストヘッダの中に

HTTP_IF_MODIFIED_SINCE

1	HTTP_IF_MODIFIED_SINCE

というヘッダが追加され、ファイルの更新日時が入っています。

ですので、このヘッダの有無を調べ、ファイルの更新日時と比較することで
ファイルを返すかキャッシュを返すかを判定します。

$filelastmodified = filemtime('ファイルのパス');
if(isset($_SERVER["HTTP_IF_MODIFIED_SINCE"])){
  $headerlastmodified = $_SERVER["HTTP_IF_MODIFIED_SINCE"];
  if(strtotime($headerlastmodified == strtotime($filelastmodified)){
    // 更新日が一致したのでキャッシュを返す
    // （正しくはレスポンスコード304を返す）
  }
  else {
    // ファイルを返す
  }
}

$filelastmodified = filemtime('ファイルのパス');

if(isset($_SERVER["HTTP_IF_MODIFIED_SINCE"])){

$headerlastmodified = $_SERVER["HTTP_IF_MODIFIED_SINCE"];

if(strtotime($headerlastmodified == strtotime($filelastmodified)){

// 更新日が一致したのでキャッシュを返す

// （正しくはレスポンスコード304を返す）

}

else {

// ファイルを返す

}

レスポンスコード304を返す処理は下記の通りです。

header("HTTP/1.1 304 image not modified");
header('Pragma: cache');
header("Cache-Control: max-age=" . (60 * 60 * 24 * 30));

header("HTTP/1.1 304 image not modified");

header('Pragma: cache');

header("Cache-Control: max-age=" . (60 * 60 * 24 * 30));

ちなみに、Etagというヘッダを使ってキャッシュを制御することもできますが
Etagはどちらかというと動的コンテンツのキャッシュで利用するためのものです。
静的コンテンツのキャッシュにもEtagを使ったサンプルが多くみられるのですが
Last-Modifiedヘッダだけで十分だと思います。