EC-CUBE4 AMPページで如何にして通常ページと同じデザインを再現したか。
先般リリースされたEC-CUBE4対応のAMPプラグイン。
Chrome Dev Summitで紹介されるなど、なかなかインパクトのあるリリースとなったのではないでしょうか。
まだまだベータ版で改良の余地は多々あるものの、手軽にインストール可能でスピーディーなユーザー体験を提供できる点は、とても魅力的で導入を検討する価値あるものになっているのではないかと思います。
[AMPプラグイン](https://www.ec-cube.net/products/detail.php?product_id=1786)
しかし、手軽にAMP化ができる一方で、製作サイドの、特にフロントエンドの人間にとっては、なんとも悩ましい問題がいくつか。
その一つが「CSS」ではないでしょうか。
今回はAMPページにおいて、いかにしてデフォルトのEC-CUBE4のデザインを再現したか？その手法をご紹介しつつ、AMPプラグイン導入におけるCSSコーディングの例をご紹介できればなぁと思います。
## AMPページのCSSにおける制約
AMPに興味のある方であれば、AMPページでのCSSの扱いの大まかな事項はすでにご存知かと思います。
もっとも有名なところでは、「CSSの総容量は50KB(50,000byte)に抑えなければならない」という事項ではないでしょうか。
CSSの総容量は50KBを超えても表示はできますが、この制約を守っていないとGoogle AMP Cacheに追加されない（amp-toolbox-optimizerを使わない場合）といった事象が発生するので、是が非でも守りたいところ。
ちなみにEC-CUBE4で使用されているCSSファイル、とりわけサイト全体のスタイルに大きく関わる「style.css」は238KBほどあります。
当然このまま使うわけにはいきません。
デフォルトのスタイルを再現するには、EC-CUBE4の通常のテンプレートのHTML構造を壊すことなく、AMPコンポーネントを組み込んだテンプレートを作り、上手いこと必要なスタイルだけ抜き出した対象ページ用のCSSを当て込む必要があります。
## EC-CUBE4に入っているGulpを上手く活用しよう。
EC-CUBE4をダウンロードしてみると、「package.json」と「gulpfile.js」が含まれています。
中身を除いてみると、npm scriptsの実行で、gulpfile.js内のタスクを実行するようになっているのが見てとれると思います。
具体的には、SCSSファイルのコンパイルとCSSファイルの圧縮です。
**ここにAMP用CSSのタスクを突っ込んじゃいましょう。**
というのが、今回のブログの要約であり核心の部分です。
### AMP用CSSを作成する為の準備
AMPプラグインでAMP化できるのは、トップページ、商品一覧ページ、商品詳細ページです。
なので前述の3ページに最適な、AMP用CSSを作成する準備を行います。
ついでに今回は、ダウンロードしたEC-CUBE4のパッケージ内にmockフォルダを作成し、そこに単純なモックアップを作成したいと思います。
フロント側のコーディングデータを作成するだけなら、わざわざローカルで環境作らなくても充分なので…
まずはEC-CUBE4をダウンロードして以下を実行。
```
npm i
```
package.jsonに記載されているパッケージがインストールされたら、次は今回の作業に必要なパッケージをインストールします。
```
npm i --save-dev gulp-inject
npm i --save-dev browser-sync
```
パッケージが揃ったら、package.jsonに記述があるscriptsを修正します。
```json
"scripts": {
...省略...
"build:moc": "run-s build:moc:*",
"build:moc:sass": "gulp sass",
"build:moc:minify-css": "gulp minify-css",
"build:moc:css-inject": "gulp css-inject",
"build:moc:serve": "gulp serve"
},
```
"build:moc:css-inject": "gulp css-inject"と"build:moc:serve": "gulp serve"を追記。
次にgulpfile.jsを改変します。
```javascript
//gulp.task("default", ["sass", "minify-css"]);
// AMPページ用CSS挿入タスク
const inject = require('gulp-inject');
const targetFile = [
'top',
'list',
'detail'
];
gulp.task('css-inject', () => {
let events = targetFile.map((target) => {
let origin = gulp.src(`./mock/amp/${target}.html`);
let sources = gulp.src([`./html/template/default/assets/css/amp_${target}.min.css`]);
return origin.pipe(inject(sources, {
starttag: '',
endtag: '',
relative: true,
removeTags: true,
transform: function (filePath, file) {
const styleTagStart = '';
let styles = file.contents.toString('utf8');
styles = styles.replace(/\/\*\#\ssourceMappingURL\=.*\.map\s\*\//i, '');
styles = styles.replace(/\@charset \"utf-8\"\;/i, '').trim();
return styleTagStart + styles + styleTagEnd;
}
}))
.pipe(rename(`${target}.amp.html`))
.pipe(gulp.dest('./mock/amp/'))
});
});
// デフォルトタスク
const runSequence = require('run-sequence');
gulp.task("default", cb => runSequence('sass', 'minify-css', 'css-inject', 'serve-reload', cb));
// サーバー起動・ファイル監視
const browserSync = require('browser-sync').create();
gulp.task('serve', () => {
browserSync.init({
notify: false,
logPrefix: 'AMP',
server: ['./'],
port: 3000
});
gulp.watch(['./mock/**/*.html', '!./mock/**/*.amp.html'], ['default']);
gulp.watch(['./html/template/default/assets/scss/**/*.scss'], ['default']);
});
gulp.task('serve-reload', () => {
browserSync.reload();
});
```
元のdefaultタスクをコメントアウトし、新たに定義。
css-injectタスク、serveタスクを追加します。
ファイルの修正が完了したら、今度はコーディング用のモックデータを配置します。
今回はpackage.jsonやgulpfile.jsと同じ並びに、mockフォルダを作成し、その中にAMP HTMLを記載するhtmlファイルを配置します。
```
package.json
gulpfile.js
mock
∟amp
∟top.html
∟detail.html
∟list.html
```
そして肝心のAMP用CSSを作成するファイルです。
こちらは既存のstyle.scssと同列に配置します。
配置するファイル（amp_top.scss、amp_list.scss、amp_detail.scss）の中身に関しては、ひとまずstyle.scssと同じ内容にしておきます。
```
html
∟template
∟default
∟assets
∟scss
∟style.scss
∟amp_top.scss
∟amp_list.scss
∟amp_detail.scss
```
AMP用のCSSは、amp-custom属性が付与されたstyle要素内にインラインで記述する事が必須となっています。
なのでcss-injectタスクを実行して、mockフォルダ内に作成したAMP HTMLファイルに、SCSSファイルをコンパイルと同時に生成したCSSコードを挿入できるようにしたいと思います。
先ほど配置したampフォルダ内の各htmlに、以下のコードを記述します。
```html
<!doctype html>
<html amp lang="ja">
<head>
<meta charset="utf-8">
<script async="" src="https://cdn.ampproject.org/v0.js"></script>
<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>
<!-- inject:amp-custom:start -->
<!-- inject:amp-custom:end -->
</head>
<body>
</body>
</html>
```
これで「inject:amp-custom:start」から「inject:amp-custom:end」の間に、SCSSファイルの修正等を行ったタイミングで、AMP用のCSSが自動で挿入されます。
これでAMP用CSSを作成する為の準備、モックアップを作成する準備は整いました。
## npm scriptsを実行してみる。
```
npm run build
```
上記を実行すると、http://localhost:3000 のURLでブラウザが立ち上がります。
http://localhost:3000/mock/amp/top.amp.html にアクセスしてみると、先ほどmockフォルダに配置したtop.htmlに、amp_top.scssからコンパイルされたCSSが挿入され、かつtop.amp.htmlにリネームされた状態のファイルが表示されるはずです。
現状だと、amp_top.scssの内容(style.scssと同じ内容)そのままのCSSが吐き出されているので、こちらをtop.html内にコーディングした内容に応じて、50KBまで落として行きます。
amp_top.scssの中身は、@importでコンポーネントごとのSCSSファイルを読み込むようになっているので、ページ内のコンテンツに不要な@importを適宜コメントアウトしましょう。
厳密にはコメントアウトだけではなく、AMPコンポーネントを組み込んだ事によって発生した、通常ページとの差異を調整するCSSを記述したりしますが、大枠はこの手法で問題なくAMP用CSSを作成できるはずです。
## 通常ページ用のSCSSファイルを使うメリット
今回AMP用CSSの作成に用いたのは、通常ページで利用するSCSSファイルです。
もちろんAMP用のSCSSファイルを用意してもらって、通常ページとは切り離して作成していただいても問題ありませんが、やはり一纏めにしておいた方がメンテナンスの観点から見ても有用なのではないかなと思います。
例えばAMP Cacheを利用する場合、一つのサイトに通常のページとAMPページが存在する事になります。
そうなるとヘッダーのスタイルを変更したい時など、通常ページ用とAMPページ用でSCSSファイルを分けているケースでは、それぞれに変更箇所の修正を行う必要が出てきます。
できれば修正は一回で終わらせたい・・・
AMPプラグインを導入し、さらに大規模なデザインカスタマイズを行う場合だと、作業工数にかなりの差が出てくるのではないでしょうか。
## まとめ
如何でしたでしょうか？
意外と大した事してないです。
クライアントの要望に沿ってデザインを大きく変更することがあっても、簡単なので手軽に対応できちゃうと思います。
ぜひAMPプラグインを導入してみて、気軽に触ってみていただけたらなぁと思います。