開発ブログ

AMPページのキャッシュをmax-ageヘッダーで更新する

2017-01-23 14:06 - NozawaTakeshi

前回ではGoogleにキャッシュされたAMPページを手動で削除する方法を紹介致しました。

ただ、ページを更新するたびに手動でキャッシュをクリアにしなければならないので
非常に手間がかかります。

今日はampページを表示する際にレスポンスヘッダーにmax-ageを指定することで
Googleのキャッシュを定期的に更新するようにするやり方をご紹介します。

Google Amp Cacheのページによると

It uses the origin’s caching headers, such as Max-Age, as hints in deciding whether a particular document or resource is stale. When a user makes a request for something that is stale, that request causes a new copy to be fetched, so that the next user gets fresh content.

とあります。つまり、max-ageヘッダーを送信することによってキャッシュが古いかどうかを
Googleが判断してくれるようです。古い場合は新しくオリジンページにリクエストしなおして
新しいキャッシュを生成してくれるようです。(ただし、新しいキャッシュからページを配信してくれるのは次のリクエストからになるようです。)

To limit the amount of load it generates for publisher sites, the Google AMP Cache considers any document fresh for at least 15 seconds, and any resource fresh for at least 1 minute. Note that those numbers may change in the future, as we tune the cache for optimum balance between freshness and load on publisher sites.

また、max-ageで指定できるのは15秒以上で、最低でも1分でリフレッシュされるようですので
しきい値としてはこの間を取ることになるかと思います。
ただ、将来的にはこのしきい値は見直される可能性もあるとのことでした。

Nginxでmax-ageを実装する場合

Nginxでは下記の設定を入れることでmax-ageが送信されるようになります。

この例ではnginxのconfファイルのlocationディレクティブの中で指定をしています。
もし”amp”というクエリがあったらexpresを1分に設定するというものです。
この状態で設定したページにリクエストすると下記のようになります。

このようにExpiresが指定されて、Cache-Controlにmax-ageが指定されます。
GoogleのAMPのキャッシュに関してはまだ日本語のページがないため不便ですね・・・。
ご参考になれば幸いです。

参考: Google Groupのフォーラム

update-pingを使ったAMPページのキャッシュの消し方

2017-01-20 20:17 - NozawaTakeshi

弊社のサイトでも実験的にAMPを使ったページの配信を行っております。
AMPは既にご存知の方も多いと思われますが Accelerated Mobile Pages の略で、
通信速度が安定しないスマートフォンでも高速にページを閲覧できるようにした技術で
以前このブログでもご紹介したこともあります。

AMPによって実装されたページはGoogleによってキャッシュされ
検索結果からのリンクはGoogleのドメインから
キャッシュされたページ・コンテンツが配信されます。

キャッシュは定期的に消えるようですが
急いで消したい場合にちょっと手間取ってしまったので
簡単にまとめてみたいと思います。

curlコマンドで消す

“204 No Content” が返ります。
エンジニアの方はこっちの方が安心な感じがしますね。

ブラウザを使って消す

にアクセスしてください。
CURLコマンドのURLとまったく同じです。

Chromeだと何も表示されないどころが開いたタブが自動的に閉じたりします。
“204 No Content”のレスポンスヘッダーを受け取ったときの
挙動はブラウザによるようです。

AMPのキャッシュの仕組み

cdn.ampproject.orgというホストにキャッシュが蓄積されています。
削除するのもこのホストに対して行います。

http://www.hogehoge.com/amp/hogehoge.html

がキャッシュされてgoogleの検索結果からリンクされているURLは

https://www.google.co.jp/amp/www.hogehoge.com/amp/hogehoge.html

になります。このページをデベロッパーツールで開くと

https://cdn.ampproject.org/v/www.hogehoge.com/amp/hogehoge.html&amp_js_v=6

のようなものがロードされていることが分かります。
これがキャッシュ的なもののようです。

これを削除しようとしたら、上記で紹介したようにCURLコマンドがブラウザを使って

にリクエストすれば良いようです。

“www.hogehoge.com/amp/hogehoge.html” の前についている”/c/“は
キャッシュされているコンテンツがドキュメントであることを示しています。

それに対して /update-ping/ というコマンドめいたパスを前につけてあげると
キャッシュが消えるという仕組みです。

上記のようにキャッシュされているコンテンツには
コンテンツの種類によってプレフィックスがつきます。

  • ドキュメントはc
  • 画像はi
  • フォントなどその他のリソースはr

なので

http://www.hogehoge.com/amp/img/piyopiyo.png

という画像がキャッシュされると

https://cdn.ampproject.org/i/www.hogehoge.com/amp/img/piyopiyo.png

となります。
これを削除したければ

でリクエストすればいいことが分かります。
なお、オリジナルがHTTPSの場合はちょっと話が変わるのでまたの機会に。

次回はhttpのレスポンスヘッダーを使って自動的にキャッシュが更新されるようにする設定についてご紹介したいと思います。

ご参考になれば幸いです。

参考

Slack and Trello: integration problem (multiple connection setting)

2016-12-01 19:50 - NozawaTakeshi

Hello. This is Takeshi in developer team.

Slack is most major team-chat application all over the world especially among developers. Also, Trello is a smart project management system with the virtual task board, so-called “Kanban”.

I have a confident these applications make developer’s task to be more easy to handle, understandable and to reduce communication cost. Most important thing is integration with each applications.

On these days, I’ve tried them. but I faced a little trouble about the connection. It is a limitation of connection: “Slack cannot accept notification from multiple trello’s boards under one trello’s team”. In other words, I call it as a problem of “one slack team, one trello board”. As a result, I can realize it was wrong. You can accept notification of multiple board with one slack team’s channel.

I find out it was from my foolish mistake. I hesitated to share of it, but I guess some people got in same trouble. Here, I would like to introduce it.

>>続きを読む

laravel(v5.3)のインストール~初期設定

2016-11-16 20:27 - hagiwara

こんにちは。開発担当の萩原です。
先日、「laravel」というフレームワークを使ってAPIのようなものを実装いたしました。
今回はその際のインストール~初期設定についてまとめたいと思います。

なお、困った時のマニュアルはこちら
公式マニュアル
日本語翻訳(laravel)

インストール

サーバ必要要件

laravelを動作させるためには下記の要件を満たしている必要があります。
– PHP 5.6.4以上
– OpenSSL PHP拡張
– PDO PHP拡張
– Mbstring PHP拡張
– Tokenizer PHP拡張
– XML PHP拡張

依存パッケージの管理に「Composer」を使用しているので、
Composerが使えるようになっている必要があります。
上記の条件を満たしておりましたらインストールを開始します。

laravelをインストール

.composer/vendor/binのパスを通してから、
以下のコマンドでComposerでLaravelのインストーラを
ダウンロード・インストールします。

インストーラのインストールができましたら、
以下のコマンドでlaravelをインストールします。
“inter-edu”の部分は任意の名前で結構です。

これでlaravelのインストールは完了です。

設定

ファイル・ディレクトリについて

  • .env:環境設定ファイル
  • app:モデル置き場
  • app/Http/Controllers:コントローラ置き場
  • app/Http/Middleware:ミドルウェア置き場
  • config:設定ファイル置き場
  • public:ドキュメントルート
  • resources/lang:翻訳ファイル置き場
  • resources/views:ビュー置き場
  • resources/views/layouts:レイアウト置き場
  • routes:ルーティング置き場
  • storage:laravelのログ置き場

よく使うのはこのあたりになるかと思います。
storageには、キャッシュドライバやセッションドライバを
fileに設定した際に必要なファイルも作られます。

ディレクトリ権限の設定

以下の2つのディレクトリの権限をwebサーバが書き込める権限に変更します。
– storage
– bootstrap/cache

.envの設定

まず、.env.exampleをコピーしてして.envにリネームします。
その後、
– APP_KEYを設定。公式マニュアルによると32文字が推奨です。
– DBの接続先の設定
– キャッシュドライバの設定 例)CACHE_DRIVER=apc
– セッションドライバの設定 例)SESSION_DRIVER=apc

セッションドライバーについて
array以外のドライバーであれば何でも良いと思われますが、
セッションを有効にしないとフォームのトークンやデータの受け渡し、
フラッシュデータなどが使えないので注意が必要です。

キャッシュとセッションについての詳細はこちら
https://laravel.com/docs/5.3/cache
https://laravel.com/docs/5.3/session

各種設定

configディレクトリに各設定ファイルが入っていて、
database.phpやsession.php、cache.phpなどがあります。

ローカライズの設定

configディレクトリのapp.phpで設定できます。
“timezone”や”locale”を設定します。
翻訳ファイルは resources/lang ディレクトリ配下に設置します。

例)バリデーションメッセージを日本語化する場合
app.phpの”locale”に”ja”と設定し、resources/langに”ja”というディレクトリを作ります。
そのディレクトリにvalidation.phpという翻訳ファイルを設置します。

翻訳ファイルについての詳細はこちら
https://laravel.com/docs/5.3/localization

これで基本的な設定は完了です。

ルーティング

ルーティングの話になると、laravelの設定からは
少し外れてしまうのですが紹介させていただきます。
ルーティングのファイルはroutesディレクトリに入っています。
webインターファイスのルーティング設定はweb.phpに記述します。
記述の方法はたくさんあるのですが、基本の形は

となります。

例)ユーザの新規登録画面の場合

こんな感じなるかと思います。

ルーティングについての詳細はこちら
https://laravel.com/docs/5.3/routing

以上となります。ご参考となりましたら幸いです。

ページスピードのチューニングその1:CSSとJSによるレンダリングブロックの仕組み

2016-09-30 16:44 - NozawaTakeshi

Googleのページスピードインサイトのキャプチャ

page speed insightを見るとCSSのレンダリングブロックのアラートが出ることがあります。特にスマートフォンでページをチェックしたときにはこのメッセージがよく表示されると思います。

Googleのレファレンスを見ると、ファーストビューに必要なものはhead内でインラインで記述し、それ以外のものはあとから読み込むようにしてくださいとのことです。

今回、かなりこの問題の解決に苦労したので、いろいろ調べたことをまとめてみたいと思います。

基本的にはGoogleのベスト・プラクティス集である”Web Fundamentals“のうち、
「クリティカルレンダリングパス」という章を参考に見ていきたいと思います。

  1. そもそもレンダリングブロックとは
  2. javascriptとcssの依存関係
  3. ファーストビューのレンダリングブロック

こんな内容でお送り致します。

>>続きを読む

1 / 512345