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

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ヘッダだけで十分だと思います。

2017年5月9日

【Linux】各種バージョンを調べる

調べ方も様々なのでつい忘れてしまいますよね。

CentOSのバージョン

cat /etc/redhat-release

1	cat /etc/redhat-release

Apacheのバージョン

httpd -v

httpd -v

MySQLのバージョン

mysql --version

1	mysql --version

PHPのバージョン

php -v

php -v

2017年5月8日

【JavaScript】クエリー文字列で同名のパラメータを自動的に配列にしてFormDataにセットする

長いタイトルですが、タイトル通りのことをやることになり、
スマートなやり方が思いつかず、結局ループを2回回す方法でやりました。

var _form_data = new FormData();
var _q = location.search.replace('?', '');
var _qs = _q.split('&');
var _param_tmp1 = {};
// 同名パラメータが2つ以上あるかどうかをカウントするループ
for(var i = 0; i < _qs.length; i++) {
  var _kv = _qs[i].split('=');
  if(_kv.length == 2) {
    if(_param_tmp1[_kv[0]]) {
      _param_tmp1[_kv[0]]++;
    }
    else {
      _param_tmp1[_kv[0]] = 1;
    }
  }
}
// カウントが2つ以上なら後ろに[]をつけるループ
for(var i = 0; i < _qs.length; i++) {
  var _kv = qs[i].split('=');
  if(_kv.length == 2) {
    if(_param_tmp1[_kv[0]] == 1) {
      _form_data.append(_kv[0], _kv[1]);
    }
    else {
      _form_data.append(_kv[0] + '[]', _kv[1]);
    }
  }
}

var _form_data = new FormData();

var _q = location.search.replace('?', '');

var _qs = _q.split('&');

var _param_tmp1 = {};

// 同名パラメータが2つ以上あるかどうかをカウントするループ

for(var i = 0; i < _qs.length; i++) {

var _kv = _qs[i].split('=');

if(_kv.length == 2) {

if(_param_tmp1[_kv[0]]) {

_param_tmp1[_kv[0]]++;

}

else {

_param_tmp1[_kv[0]] = 1;

}

// カウントが2つ以上なら後ろに[]をつけるループ

for(var i = 0; i < _qs.length; i++) {

var _kv = qs[i].split('=');

if(_kv.length == 2) {

if(_param_tmp1[_kv[0]] == 1) {

_form_data.append(_kv[0], _kv[1]);

}

else {

_form_data.append(_kv[0] + '[]', _kv[1]);

}

2017年5月2日

【Ajax】通信メソッドが勝手にOPTIONSになったら

以下のような条件でAjax通信を行うと、ブラウザは自動的に「プリフライト」と呼ばれる通信チェックを行います。

・クロスドメインである
・独自にリクエストヘッダを追加している

1 2	・クロスドメインである・独自にリクエストヘッダを追加している

プリフライトは通信メソッド「OPTIONS」でサーバーに通信を行い、

・クロスドメインのアクセスが許可されているか
・追加したリクエストヘッダが許可されているか

1 2	・クロスドメインのアクセスが許可されているか・追加したリクエストヘッダが許可されているか

をチェックします。
このチェックをパスしなかった場合はそこで処理は終了し、本来のGETやPOSTの通信が行われませんので

「あれ、POSTしたのになんでOPTIONSになってるんだ？」

と混乱してしまいますよね。

ちなみにサーバー側でクロスドメインを許可するには
レスポンスヘッダにAccess-Control-Allow-Originを設定し、許可するドメインを指定します。
PHPの場合ですべてのドメインを許可するなら

header('Access-Control-Allow-Origin: *');

1	header('Access-Control-Allow-Origin: *');

のようになります。

また、独自のリクエストヘッダを許可するには
レスポンスヘッダにAccess-Control-Allow-Headersを設定し、許可するヘッダを指定します。

header('Access-Control-Allow-Headers: '
  . 'Origin, '
  . 'X-Requested-With, '
  . 'Content-Type, '
  . 'Accept, '
  . '(独自のヘッダ1), '
  . '(独自のヘッダ2), '
  . '(独自のヘッダ3), '
);

header('Access-Control-Allow-Headers: '

. 'Origin, '

. 'X-Requested-With, '

. 'Content-Type, '

. 'Accept, '

. '(独自のヘッダ1), '

. '(独自のヘッダ2), '

. '(独自のヘッダ3), '

);

こんな感じです。

2017年4月28日2017年4月28日

【jQuery】イベントが重複登録されるのを防ぐ簡単な方法

まずイベントハンドラの登録は

$(セレクタ).on('click',function() {
  // 処理
}

$(セレクタ).on('click',function() {

// 処理

}

という感じですが、
JavaScriptによってコンテンツを動的に増やせるようなページを作成しているときに
イベントハンドラの登録がどんどん重複されていくという問題がありました。

解決方法はいくつかありますが、そのとき一番簡単だった解決方法は

onの前にoffを呼ぶ

でした。

$(セレクタ).off('click');
$(セレクタ).on('click',function() {
  // 処理
}

$(セレクタ).off('click');

$(セレクタ).on('click',function() {

// 処理

}

これだけですが、期限に追われ余裕がないときは
なかなか気が付かないものですね。