soy-curd's blog

へぼプログラマーです [https://twitter.com/soycurd1]

AMP対応のためのnpmモジュール作った

js

www.npmjs.com

ampは全てのcssを外部ファイルではなくhtmlに埋め込まなければならないので、直書きしたくない場合は、 なんらかの手段でhtmlにcssを持ってくる必要がある。

github.com

が良さそうだったが、ampタグには対応していなかったので、PRを出した。だが、よく見るとこのリポジトリはPR放置されるかんじのやつだったので、 amp対応したやつを別に公開しておいた。

使い方

例えば以下のように,

index-amp.html

<html>
  <head>
    <style amp-custom href="./yo-amp.css"></style>
  <body>
    <h1 class="hey">
        Hey!
    </h1>
  </body>
</html>

yo-amp.css

body {
  background-color: cyan;
}

.hey {
  color: red;
}

というようなファイルがあったとき、

yarn add html-inline-amp
./node_modules/html-inline-amp/bin/cmd.js -i index-amp.html -o ./_index-amp.html -b ./

すると、

<html>
  <head>
    <style amp-custom>body {
  background-color: cyan;
}

.hey {
  color: red;
}</style>
  <body>
    <h1 class="hey">
        Hey!
    </h1>
  </body>
</html>

というように、cssがamp-customタグに埋め込まれたhtmlファイルが出力される。

webpackとか使うまでもないときに便利かもしれない。