2015年03月14日

JavaScript event の *Y プロパティ

たとえば jQuery でマウスクリックのイベントを取って座標を取得するという時に、いくつか X, Y で組になっているプロパティがあって、どれを使えばいいのか、となる。 Y 座標を調べる用途のほうが多いのでここからは *Y の方だけで話を進めるが *X についてもだいたい同じように定義されている。 定義されている、と言っても素の JavaScript ではブラウザごとにプロパティがあったりなかったりするので jQuery がうまく差を吸収してくれた後の話、あるいは W3C で策定が進んでいるらしい CSSMOS View Module に準拠していればという話。 前振りが長くなった。

今回取り上げるのは clientY, pageY, screenY の3種類。 他にも offsetY とかブラウザによっては layerY とかあるらしいが、パスする。 一応言葉で書いてみると、clientY は viewport の原点からの相対的高さ、pageY は文書全体の原点からの相対的高さ、screenY はスクリーンの原点からの相対的高さ、といった定義になるはずだがとりあえず「それはどこを指してるの」という感想しか浮かばない。 ということで絵を描いてみた。

clientY screenY pageY

灰色の枠がブラウザで、その中の薄い部分が表示されている部分、×がイベント発生位置。 外側の薄い青が仮想的な文書全体を表している。

ここまでが基本で、iframe とか overflow:scroll の要素とかが絡んできた時の挙動こそが気になるところだが、慣れないお絵描きで力尽きたので、またその内ということにしておく。

なお、絵が表示されないという古い IE をお使いの方はブラウザを取り替えてご覧ください。

ラベル:javascript jquery
posted by mft at 11:00| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

2015年03月13日

メモ: S3 + CloudFront で CORS

業務で使うかと思って調べたけど使わなかったのでメモだけ。

CORS とは:
Cross-Origin Resource Sharing

Amazon のブログ記事:
Cross-Origin Resource Sharing の有効化
Amazon CloudFront Adds Device Detection, Geo Targeting, Host Header Forwarding, CORS Support, and more!

その他ブログなど:
CORS(Cross-Origin Resource Sharing)によるクロスドメイン通信の傾向と対策
[新機能] Amazon CloudFrontがCORSに対応しました
S3+CloudFrontでWebフォントを利用する(FireFox対応)

はまりそうなのは「CloudFront はレスポンスヘッダまで含めてキャッシュしてしまう」という辺りかな。

ラベル:AWS
posted by mft at 10:47| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする