挨拶
こんにちは!エンジニアのH.Yです。
結構前からAMP(Accelerated Mobile Pages)を導入するページを多く見かけるようになってきましたね。
弊社Yomerumoでも導入しております。ぜひご覧ください。
さて、AMPにはamp-adという広告描画の仕組みが提供されていますが、これは弊社GMOSSPも昨年4月から対応しております。
今回はこのamp-adにGMOSSPをどのようにして導入したのか?を書いていこうと思います。
前提
- CentOS6.x系
開発環境準備
環境構築方法はこちらに書かれているのですが、私がどうしたか、を書きます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
# rootで実行 $ yum install gcc-c++ $ wget https://nodejs.org/dist/latest/node-v7.6.0.tar.gz # その時の最新バージョン $ tar zxvf node-v7.6.0.tar.gz $ cd node-v7.6.0 $ ./configure $ make && make install $ yum install git # gitが入ってなければ $ npm i -g gulp # 通常ユーザで実行 $ cd /path/to/ampprojectdir $ git clone https://github.com/ampproject/amphtml.git $ cd amphtml $ npm i $ gulp build $ gulp serve |
ここまで終わったら
http://localhost:8000/examples.build/ads.amp.max.html
にアクセスすれば各社のテスト広告が確認できます。
Ctrl+Cで抜けられます。
開発
https://github.com/ampproject/amphtml/pull/2814
弊社は上記のようなリリースをを行っています。
JS等に変更があれば
gulp build
gulp serve
し直せば変更後の物が確認できるので、思ったよりもカジュアルに開発できます。
実際のリリースは自分のGitHubアカウントにプロジェクトをForkしたものをcloneして編集して
そこにPUSHを行った後本家AMPHTMLにプルリクエストを出しております。
終わりに
いかがでしたか?
みなさんも良ければよく知られたAMPをローカル環境で動かしてみてください!