東京発、雲に乗って

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() {

// 処理

}

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

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

【PHP】年間会員システムの開始日と終了日を求める

年間会員の仕組みを作っていて
会員の有効期間をデータベースに登録するとします。

データベース登録後に送信するメールにも有効期間を記載するため、
SQLではなくPHPで開始日と終了日を求めることになりました。

PHPの日付関数で年間会員の開始日と終了日を計算します。

開始日は当日ではなく、当月の1日とします。これは簡単ですね。

date('Y-m-01');

1	date('Y-m-01');

終了日は1年後の前月の最終日、たとえば2017年4月15日に入会した場合の終了日は
2018年3月31日
になります。
このとき、単純に今日の日付をもとに計算してしまうと、
月末の31日などに入会した際に前後の月が30日までしかないことにより、結果がおかしくなってしまいます。
ですので、必ず「1日」を基準に計算するようにします。

date('Y-m-d', strtotime(date('Y-m-01', strtotime(date('Y-m-01') . '+1 year')) . '-1 day'));

1	date('Y-m-d', strtotime(date('Y-m-01', strtotime(date('Y-m-01') . '+1 year')) . '-1 day'));

長いですね。無駄がありそうな気がしないでもないですが。

2017年4月26日2017年4月26日

【CSS】カーソル形状の一覧

CSSで指定できるカーソル形状で、よく使われるものをリストアップしました。
文字にカーソルを合わせるとカーソル形状が変化します。

auto
default
pointer
move
wait
help
not-allowed
progress
n-resize
w-resize
nw-resize
ne-resize
all-scroll
col-resize
row-resize

2017年4月26日

【jQuery】入力フォームでエンターキーを押したら処理を実行

よくあるsubmitフォームの場合、
エンターキーを押すと自動的にsubmitされるようになっています。

これをformタグがないただの入力フォーム上で、
エンターキーが押されたら処理を行うようにします。

$(入力フォーム).keypress(function(e) {
  if(e.which == 13) {
    /* 処理内容 */
  }
});

$(入力フォーム).keypress(function(e) {

if(e.which == 13) {

/* 処理内容 */

}

});