2017年7月31日月曜日
2017年7月26日水曜日
2017年7月25日火曜日
2017年7月20日木曜日
2017年7月19日水曜日
iPadのSafariでタブ非表示になったときresizeイベントが発火しないので困った
Mobile Safariでタブ切替、ウィンドウの表示非表示を検知する方法 | SRIA BLOG – 宮城県仙台市のWEBシステム開発・スマホアプリ開発
https://www.sria.co.jp/blog/2014/08/in-the-mobile-safari-tab-switching-how-to-detect-non-show-window/※画面の表示、非表示を検知する
window.addEventListener("pageshow", function(){
//表示された
});
window.addEventListener("pagehide", function(){
//非表示になった
});
windowのpageshow、pagehideイベントをハンドルするだけです。
これでfunction内に処理を記載すると、画面が表示、非表示に切替されるタイミングで
任意のコードを実行できるようになります。
2017年7月18日火曜日
2017年7月15日土曜日
2017年7月14日金曜日
2017年7月12日水曜日
2017年7月11日火曜日
最小限のHTML5テンプレート
HTML5でWebページを作成する時用の必要最小限をまとめたシンプルなテンプレート（IE8以下も配慮） | コリス
http://coliss.com/articles/build-websites/operation/work/generic-html5-template-by-sixrevisions.html
<!DOCTYPE html>
<html>
<head>
<!-- IE8+に対して「IE=edge」と指定することで、利用できる最も互換性の高い最新のエンジンを使用するよう指示できます
参考: https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- ページのタイトルを記述 -->
<title></title>
<!-- パフォーマンスのために使用する文字のエンコーディングを記述
参考: https://developers.google.com/speed/docs/best-practices/rendering#SpecifyCharsetEarly
-->
<meta charset="utf-8">
<!-- content属性にページの紹介文を記述 -->
<meta name="description" content="">
<!-- content属性にページの著者情報を記述 -->
<meta name="author" content="">
<!-- モバイル端末への対応、ページをビューポートの幅に合わせてレンダリング（Android, iOS6以降）
ズームを許可しない設定「user-scalable=no」は加えない -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- スタイルシートはできるだけ早くレンダリングされるため、HTMLドキュメントの上の方に記述
href属性にスタイルシートファイルのURIを記述 -->
<link rel="stylesheet" href="">
<!-- IE8以下用に2つのスクリプトを記述
html5shiv.js: IE8以下にHTML5の要素を認識するようにさせる
respond.js: IE8以下にMedia Queriesの代替え機能を提供 -->
<!--[if lt IE 9]>
<script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- href属性にファビコンファイルのURIを記述 -->
<link rel="shortcut icon" href="">
<!-- コメントアウトしてあるコードは、iOS/Android用のアイコン指定 -->
<!--
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="196x196" href="">
<link rel="apple-touch-icon" sizes="152x152" href="">
-->
<!-- スクリプトでブロッキングを起こさないものはここに記述
可能であれば「async（文書の読み込みが完了した時点でスクリプトを実行）」を使用
Example: <script src="" async></script> -->
</head>
<body>
<!-- コンテンツを記述 -->
<!-- スクリプトでブロッキングを起こすものはここに記述
ブロッキングを起こす原因としては、CSSのセレクタ操作（IE）、負荷の高いDOM操作、多数のスクリプトなど -->
<!-- SCRIPTS -->
<!-- 例: <script
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-->
</body>
</html>
http://coliss.com/articles/build-websites/operation/work/generic-html5-template-by-sixrevisions.html
<!DOCTYPE html>
<html>
<head>
<!-- IE8+に対して「IE=edge」と指定することで、利用できる最も互換性の高い最新のエンジンを使用するよう指示できます
参考: https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- ページのタイトルを記述 -->
<title></title>
<!-- パフォーマンスのために使用する文字のエンコーディングを記述
参考: https://developers.google.com/speed/docs/best-practices/rendering#SpecifyCharsetEarly
-->
<meta charset="utf-8">
<!-- content属性にページの紹介文を記述 -->
<meta name="description" content="">
<!-- content属性にページの著者情報を記述 -->
<meta name="author" content="">
<!-- モバイル端末への対応、ページをビューポートの幅に合わせてレンダリング（Android, iOS6以降）
ズームを許可しない設定「user-scalable=no」は加えない -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- スタイルシートはできるだけ早くレンダリングされるため、HTMLドキュメントの上の方に記述
href属性にスタイルシートファイルのURIを記述 -->
<link rel="stylesheet" href="">
<!-- IE8以下用に2つのスクリプトを記述
html5shiv.js: IE8以下にHTML5の要素を認識するようにさせる
respond.js: IE8以下にMedia Queriesの代替え機能を提供 -->
<!--[if lt IE 9]>
<script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- href属性にファビコンファイルのURIを記述 -->
<link rel="shortcut icon" href="">
<!-- コメントアウトしてあるコードは、iOS/Android用のアイコン指定 -->
<!--
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="196x196" href="">
<link rel="apple-touch-icon" sizes="152x152" href="">
-->
<!-- スクリプトでブロッキングを起こさないものはここに記述
可能であれば「async（文書の読み込みが完了した時点でスクリプトを実行）」を使用
Example: <script src="" async></script> -->
</head>
<body>
<!-- コンテンツを記述 -->
<!-- スクリプトでブロッキングを起こすものはここに記述
ブロッキングを起こす原因としては、CSSのセレクタ操作（IE）、負荷の高いDOM操作、多数のスクリプトなど -->
<!-- SCRIPTS -->
<!-- 例: <script
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-->
</body>
</html>
AWS ELB EC2がメンテナンス中はS3に転送する方法
ELB+S3でSorry - systemlog
http://system999.wiki.fc2.com/wiki/ELB%2BS3%E3%81%A7Sorry
http://system999.wiki.fc2.com/wiki/ELB%2BS3%E3%81%A7Sorry
2017年7月10日月曜日
Linux サーバー管理基本
Linuxサーバにログインしたらいつもやっているオペレーション - ゆううきブログ
http://blog.yuuk.io/entry/linux-server-operations2017年7月9日日曜日
2017年7月7日金曜日
ロードバランサ経由のクライアントのIPアドレスを取得するには
echo $_SERVER["REMOTE_ADDR"];
これだとロードバランサのIPアドレスになってしまう。
echo $_SERVER['HTTP_X_FORWARDED_FOR'];
こちらだと一番最初のIPアドレスを取りだせます。
参考
PHP - PHP ロードバランサ経由のクライアントのIP取得ができない(131)｜teratail
https://teratail.com/questions/131
これだとロードバランサのIPアドレスになってしまう。
echo $_SERVER['HTTP_X_FORWARDED_FOR'];
こちらだと一番最初のIPアドレスを取りだせます。
参考
PHP - PHP ロードバランサ経由のクライアントのIP取得ができない(131)｜teratail
https://teratail.com/questions/131
2017年7月5日水曜日
WordPress ループ・カスタムクエリ・アーカイブ解説
WordPressの新・旧ループからカスタムクエリ・アーカイブまで徹底解説 | OXY NOTES
http://oxynotes.com/?p=8615AWS、VPS、実サーバ おおよその性能比較
通常のconcrete5のキャッシュを全てONにすると実サーバだと、
87リクエスト×60秒×60分×24時間×30日=225,504,000アクセス
捌ける事になります。
実際には1つのページで1リクエストではなく、jsやcss、画像ファイルなどがロードされますし、ページ毎に処理速度も違うので、おおよそ月間1千万PVくらいの処理能力でしょうか。
87リクエスト×60秒×60分×24時間×30日=225,504,000アクセス
捌ける事になります。
実際には1つのページで1リクエストではなく、jsやcss、画像ファイルなどがロードされますし、ページ毎に処理速度も違うので、おおよそ月間1千万PVくらいの処理能力でしょうか。
クラウド(AWS)、VPS、実サーバで、費用ベースのconcrete5のベンチマークをしてみました。 コンクリートファイブ ジャパン株式会社
2017年7月4日火曜日
AWS ELBでHTTP→HTTPSリダイレクトができない件
Amazon Linux / Apache で
かなり試行錯誤しましたが、以下の記事を参考にしてなんとかできました。
AWS Elastic Load Balancer と Apache を使って HTTPS(SSL) 通信を行うための設定方法 - komiyakの通り道
http://d.hatena.ne.jp/komiyak/20130807/1375845025
多くのサイトでは .htaccess内に以下のように記述しろと書いてあるのですが、なぜかダメ．．．
RewriteEngine On
RewriteCond %{HTTP:X-Forwarded-Proto} ^http$
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]
上記サイトを参考に
RewriteCond %{HTTP_USER_AGENT} !^ELB-HealthChecker
を入れてみましたが、
RewriteEngine On
RewriteCond %{HTTP:X-Forwarded-Proto} ^http$ #←ここがどうも認識されていない？．．．
RewriteCond %{HTTP_USER_AGENT} !^ELB-HealthChecker #←これも必要
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]
これもだめ。
以下のようにPortで判定するようにしたら、できました。
RewriteEngine On
RewriteCond %{HTTP:X-Forwarded-Port} ^80$ #←Portで判定
RewriteCond %{HTTP_USER_AGENT} !^ELB-HealthChecker #←これも必要
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]
少々釈然としませんが、時間のあるときにまた調べてみます。
※なぜリダイレクトがエラーになるかは以下が参考になりました。異なる対処方法も書いてあります。
AWS環境でELB（ロードバランサー）とEC2サーバでapacheを使っている場合にhttpからhttpsにリダイレクトする方法 – joppot
https://joppot.info/2014/05/01/1286
AWS ELBを使う際に注意すべきこと
１．ELBを使うと、HTTP→HTTPS リダイレクト設定が無限ループになり接続できない。
２．ELBを使うと、アクセス元IPアドレスがELBのIPアドレスになるので、アクセス解析に注意が必要。
AWS ELBを使う際に注意すべきこと
https://tech.basicinc.jp/AWS/2013/07/21/aws_elb_point/
ELBを使ってアクセス元のIPを取る方法 - ELBに限らないよ
https://tech.basicinc.jp/AWS/2013/04/28/aws_elb_customlog/Apache KeepAlive設定
実用 Apache 2.0運用・管理術（3）：httpd.confによるWebサーバの最適化 (2/3) - ＠IT
http://www.atmarkit.co.jp/ait/articles/0509/16/news128_2.html
登録:
投稿 (Atom)