モバイルページを爆速に ~Laravelで実現するAMP対応の自動化~ #PHPcon2017

PHPcon2017で発表を行ったスライドです。
#PHPcon2017
#PHPカンファレンス2017

Transcript

1. モバイルページを爆速に 〜Laravelで実現するAMP対応の自動化〜 株式会社イノベーション　小柳津裕真
2. 自己紹介 名前: 小柳津 裕真(オヤイヅ ユウマ) 所属: 株式会社イノベーション 好きな技術: PHP, Laravel, AMP 普段はITトレンドというサービスを開発しています AWS re:Invent 2017参加予定
3. アジェンダ 1. AMPってなに?? a. AMPとは何か b. なぜ早いのか c. どんな対応が必要なのか 2. 自動化の方法 a. LaravelのMiddlewareを活用 b. 画像サイズを動的に取得
4. アジェンダ 1. AMPってなに?? a. AMPとは何か b. なぜ早いのか c. どんな対応が必要なのか 2. 自動化の方法 a. LaravelのMiddlewareを活用 b. 画像サイズを動的に取得
5. AMPとは何か モバイルでブラウザから検索した時、 こんなマークを見たことありませんか??⚡⚡
6. AMPとは何か モバイルでブラウザから検索した時、 こんなマークを見たことありませんか??⚡⚡
7. AMPとは何か Q:AMPとは何か A:めっちゃ早いモバイルページ A:Accelerated Mobile Pages A:の略
8. なぜ早いのか
9. なぜ早いのか 1. 非同期スクリプトのみを許可 2. すべてのリソースサイズを静的に決定 3. サードパーティJavaScriptをクリティカルパスから外す 4. CSSはすべてインラインスタイルにしてサイズを固定 5. ページが開かれる前に読み込む https://www.ampproject.org/ja/learn/about-how/ <script async src="~"></script> height="400" width="800" ex.
10. なぜ早いのか ex. 検索結果が開かれる前に レンダリングが開始
11. どんな対応が必要なのか 必須マークアップ
12. <!doctype html> <html amp> <head> <meta charset="utf-8"> <link rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style> </noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body>Hello World!</body> </html>
13. どんな対応が必要なのか 一部のタグをAMP HTMLタグに置き換える https://www.ampproject.org/ja/docs/tutorials/create/include_image ほとんどの HTML タグは、そのまま AMP HTML でも使用できますが、 中には <img> タグのように同等か少し高機能のカスタム AMP HTML タグに置き換えなくてはいけないものがあります
14. どんな対応が必要なのか 一部のタグをAMP HTMLタグに置き換える 特定のタグはそのまま活用できない 下のようなimgタグ　　　　　　　　　 　　 をAMP HTMLでは、height・width属性を必ず指定する必要がある ※video, audio, iframeタグもそのままでは使用不可 <img src="welcome.jpg"> <amp-img src="welcome.jpg" height="400" width="800"></amp-img>
15. どんな対応が必要なのか CSSを一つのインライン要素にする https://www.ampproject.org/ja/docs/tutorials/create/presentation_layout <style amp-custom> body { background-color: white;} amp-img { background-color: gray; border: 1px solid black;} </style> 各 AMP ページで使える埋め込みスタイルシートは 1 つだけで、使用で きないセレクターもいくつかあります。
16. どんな対応が必要なのか CSSを一つのインライン要素にする CSSにもいくつかの制限 1. 他のスタイルシートを呼び出せない 2. !important修飾子は使えない 3. タグ内のstyle属性は使えない 4. CSSは50KBまで
17. どんな対応が必要なのか CSSを一つのインライン要素にする CSSにもいくつかの制限 1. l 2. ! 3. 4. CSSは50KBまで <link rel="stylesheet" href="~"> .mt10 {margin-top: 10px;!important} <div style="~"></div>
18. どんな対応が必要なのか CSSを一つのインライン要素にする CSSにもいくつかの制限 1. l 2. ! 3. 4. CSSは50KBまで <link rel="stylesheet" href="~"> .mt10 {margin-top: 10px;!important} <div style="~"></div>
19. どんな対応が必要なのか 既存ページのAMP対応において厳しいところ 1. 既存のタグでそのまま使えない 2. imgタグで画像のheightとwidthを指定する必要がある ↓ よくある対応：既存ページとは別にAMP対応のページを新規で追加する
20. どんな対応が必要なのか 既存ページとは別にAMP対応のページを新規で追加する 非AMPページをコピーして 手動でAMP対応に修正する
21. どんな対応が必要なのか 既存ページからAMPページを手動作成するデメリット 1. 1ページ1ページHTMLをコピーして修正するコスト 2. 非AMPページ(オリジン)の方が変わるとAMP対応ページを変える必要がある
22. それはめんどくさい
23. 自動でAMP HTMLに置き換えたい
24. どんな対応が必要なのか AMP対応ページにアクセスされたとき 非AMPページ(オリジン)から AMP対応ページを自動生成する
25. アジェンダ 1. AMPってなに?? a. AMPとは何か b. なぜ早いのか c. どんな対応が必要なのか 2. 自動化の方法 a. LaravelのMiddlewareを活用 b. 画像サイズを動的に取得
26. LaravelのMiddlewareを活用 非AMPページからAMP HTMLを自動生成するためには、 以下に対応しなければならない 1. AMPでは使用できない既存のタグの置き換え 2. imgタグで画像のheightとwidthを指定する必要がある LaravelのMiddlewareクラスを活用
27. LaravelのMiddlewareを活用 非AMPページからAMP HTMLを自動生成するためには、 以下に対応しなければならない 1. AMPでは使用できない既存のタグの置き換え 2. imgタグで画像のheightとwidthを指定する必要がある LaravelのMiddlewareクラスを活用
28. LaravelのMiddlewareを活用
29. LaravelのMiddlewareを活用 レスポンスの内容を取得できる
30. LaravelのMiddlewareを活用 <?php namespace App\Http\Middleware; use Closure; class Middleware { public function handle($request, Closure $next) { $response = $next($request); return $response; } }
31. LaravelのMiddlewareを活用 <?php namespace App\Http\Middleware; use Closure; class Middleware { public function handle($request, Closure $next) { $response = $next($request); return $response; } } // この記述でレスポンスの内容が取得できる
32. LaravelのMiddlewareを活用 public function handle($request, Closure $next) { $response = $next($request); $content = $response->getContent(); return $response; } // この記述でレスポンスの // コンテンツ(HTML)を取得できる
33. LaravelのMiddlewareを活用 レスポンスの内容を取得し、 変更することも可能
34. LaravelのMiddlewareを活用 public function handle($request, Closure $next) { $response = $next($request); $html = '<!DOCTYPE> <html> <head> <title>PHPcon2017</title> </head> <body><h1>PHPcon2017</h1></body> </html>'; $response->setContent($html); return $response; } // この記述でレスポンスの内容を変更できる
35. LaravelのMiddlewareを活用 既存のタグの置き換えは、 　　　　　　　　　　 でレスポンス内容のHTMLを取得し、 正規表現で置き換え処理を行い、 変更したHTMLを　　　　　　　　　　　　　で レスポンス内容としてセットする $response->getContent() $response->setContent($html)
36. LaravelのMiddlewareを活用 imgタグをamp-imgタグに置き換える例 ↓ <img src="welcome.jpg"> <amp-img src="welcome.jpg"></amp-img>
37. LaravelのMiddlewareを活用 $response = $next($request); $content = $response->getContent(); $pattern = '/<img (\s|\w|[\^!"#$%&@\'()*+,.\/~;?:=\\-]|[^\x01-\x7E])+>/'; $replacement = '$0</amp-img>'; $content = preg_replace($pattern, $replacement, $content); $pattern = '/<img/'; $replacement = '<amp-img'; $content = preg_replace($pattern, $replacement, $content); $response->setContent($content); return $response;
38. LaravelのMiddlewareを活用 $response = $next($request); $content = $response->getContent(); $pattern = '/<img (\s|\w|[\^!"#$%&@\'()*+,.\/~;?:=\\-]|[^\x01-\x7E])+>/'; $replacement = '$0</amp-img>'; $content = preg_replace($pattern, $replacement, $content); $pattern = '/<img/'; $replacement = '<amp-img'; $content = preg_replace($pattern, $replacement, $content); $response->setContent($content); return $response; //レスポンス内容のHTMLを取得
39. LaravelのMiddlewareを活用 $response = $next($request); $content = $response->getContent(); $pattern = '/<img (\s|\w|[\^!"#$%&@\'()*+,.\/~;?:=\\-]|[^\x01-\x7E])+>/'; $replacement = '$0</amp-img>'; $content = preg_replace($pattern, $replacement, $content); $pattern = '/<img/'; $replacement = '<amp-img'; $content = preg_replace($pattern, $replacement, $content); $response->setContent($content); return $response; <img src=”~”> => <img src”~”></amp-img>
40. LaravelのMiddlewareを活用 $response = $next($request); $content = $response->getContent(); $pattern = '/<img (\s|\w|[\^!"#$%&@\'()*+,.\/~;?:=\\-]|[^\x01-\x7E])+>/'; $replacement = '$0</amp-img>'; $content = preg_replace($pattern, $replacement, $content); $pattern = '/<img/'; $replacement = '<amp-img'; $content = preg_replace($pattern, $replacement, $content); $response->setContent($content); return $response; <img src”~”></amp-img> => <amp-img src”~”></amp-img>
41. LaravelのMiddlewareを活用 $response = $next($request); $content = $response->getContent(); $pattern = '/<img (\s|\w|[\^!"#$%&@\'()*+,.\/~;?:=\\-]|[^\x01-\x7E])+>/'; $replacement = '$0</amp-img>'; $content = preg_replace($pattern, $replacement, $content); $pattern = '/<img/'; $replacement = '<amp-img'; $content = preg_replace($pattern, $replacement, $content); $response->setContent($content); return $response; //変更したHTMLをレスポンスの内容としてセット
42. LaravelのMiddlewareを活用 imgタグの置き換え以外も
43. LaravelのMiddlewareを活用 //CSSのAMP対応 //AMPではCSSの!importantが使用できないので削除する $pattern = '/!important/'; $replacement = ''; $content = preg_replace($pattern, $replacement, $content); //AMPではタグ内のstyle属性が使用できないので削除する $pattern = '/style="*(\s|\w|[\^!#$%&@\'()*+,.\/~;?:=\\-])*"/'; $replacement = ''; $content = preg_replace($pattern, $replacement, $content);
44. LaravelのMiddlewareを活用 非AMPページからAMP HTMLを自動生成するためには、 以下に対応しなければならない 1. AMPでは使用できない既存のタグの置き換え 2. imgタグで画像のheightとwidthを指定する必要がある LaravelのMiddlewareクラスを活用
45. 画像サイズを動的に取得 AMPのamp-imgタグにはwidth・height属性が必須 AMP HTMLを自動生成するためには、 HTMLに散りばめられる画像サイズを動的に取得して width・height属性に値をセットする必要がある
46. 画像サイズを動的に取得 画像サイズを動的に取得するために 1. MiddlewareでHTMLを取得する 2. DOMDocumentクラスを活用してDOMにパースする 3. src属性に記述されるパスを取得 4. getimagesize関数で画像サイズを取得
47. LaravelのMiddlewareを活用 $dom = new \DOMDocument(); @$dom->loadHTML($response->getContent()); $img_tag_list = $dom->getElementsByTagName("img"); foreach ($img_tag_list as $img_tag) { } //取得したレスポンスのHTMLをDOMにパース
48. LaravelのMiddlewareを活用 $dom = new \DOMDocument(); @$dom->loadHTML($response->getContent()); $img_tag_list = $dom->getElementsByTagName("img"); foreach ($img_tag_list as $img_tag) { } //imgタグを全て取得
49. LaravelのMiddlewareを活用 $dom = new \DOMDocument(); @$dom->loadHTML($response->getContent()); $img_tag_list = $dom->getElementsByTagName("img"); foreach ($img_tag_list as $img_tag) { } //imgタグにheight・width属性をセットする処理を記述する
50. LaravelのMiddlewareを活用 if ($img_tag->getAttribute('height') == "" && $img_tag->getAttribute('width') == "") { $filepath = $img_tag->getAttribute('src'); if (strpos($filepath, '//') === 0) { //CDNの場合 $filepath = 'https:' . $filepath; } elseif (strpos($filepath, '/') === 0) { //ローカルの場合 $filepath = ltrim($filepath, '/'); } @list($width, $height) = getimagesize($filepath); if ($width != "" && $height != "") { $img_tag->setAttribute('width', $width); $img_tag->setAttribute('height', $height); $img_tag->setAttribute('layout', 'responsive'); } } //高さ・幅が指定されていない場合は、 //画像サイズを取得して設定する ※foreach文の処理
51. LaravelのMiddlewareを活用 if ($img_tag->getAttribute('height') == "" && $img_tag->getAttribute('width') == "") { $filepath = $img_tag->getAttribute('src'); if (strpos($filepath, '//') === 0) { //CDNの場合 $filepath = 'https:' . $filepath; } elseif (strpos($filepath, '/') === 0) { //ローカルの場合 $filepath = ltrim($filepath, '/'); } @list($width, $height) = getimagesize($filepath); if ($width != "" && $height != "") { $img_tag->setAttribute('width', $width); $img_tag->setAttribute('height', $height); $img_tag->setAttribute('layout', 'responsive'); } } //画像のパスを取得 ※foreach文の処理
52. LaravelのMiddlewareを活用 if ($img_tag->getAttribute('height') == "" && $img_tag->getAttribute('width') == "") { $filepath = $img_tag->getAttribute('src'); if (strpos($filepath, '//') === 0) { //CDNの場合 $filepath = 'https:' . $filepath; } elseif (strpos($filepath, '/') === 0) { //ローカルの場合 $filepath = ltrim($filepath, '/'); } @list($width, $height) = getimagesize($filepath); if ($width != "" && $height != "") { $img_tag->setAttribute('width', $width); $img_tag->setAttribute('height', $height); $img_tag->setAttribute('layout', 'responsive'); } } //画像のサイズをセットする ※foreach文の処理
53. まとめ 1. モバイル爆速化はAMP対応することで可能 2. ミドルウェアを用いてレスポンス内容を変更 3. 正規表現を用いてレスポンス内容を変化させる 4. DOMDocumentクラスを活用して画像サイズを動的に https://testmysite.withgoogle.com/intl/ja-jp
54. エンジニアブログやってます！ http://tech.innovation.co.jp/