こんにちは、SHOYANです。
JekyllテーマのminimaをAMP対応しました。
名前は AMP + Minima = AMinima です。
デモサイトも用意していてこちらで確認できます。
Minimaとは
MinimaはJekyllのテーマです。
jekyll new で作成した場合にデフォルトでインストールされるテーマです。
URLはこちらです。
どのようにAMP対応したのか
どのようにAMP対応をしたのかを説明します。
わりとあっさりできました。
まず、ampを宣言します。
そして、charsetを定義します。
次にampランタイムをロードします。
1
| <script async src="https://cdn.ampproject.org/v0.js"></script>
|
また、AMPはcanonicalの宣言が必要なので定義します。
1
| <link rel="canonical" href="https://shoyan.github.io/aminima/2016/05/20/welcome-to-jekyll.html">
|
CSSはインラインで定義しないといけないのでインラインで定義します。
1
2
3
4
5
| <style amp-custom
h1 {
color: red;
}
</style
|
次にAMP boilerplateを定義します。
1
| <style amp-boilerplatebody{-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-boilerplatebody{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style</noscript
|
これでAMPの基本設定はOKです。
実際のコードはリポジトリを参照してみてください。
amp-analyticsを使う
通常のAnalyticsのタグはAMPでは動かないのでamp-analyticsを使います。
amp-analyticsはAMP用に用意されたコンポーネントです。
テーマのソースコードはこの辺りです。
Aminimaのインストール方法
Jekyllをインストールしていない場合はjekyllをインストールしてください。
ブログを作成します。
Gemfileを編集します。
1
2
3
4
5
| 以下のように書き換える
gem "minima", "~> 2.0"
↓
gem "aminima"
|
_config.yml のthemeを編集します。
bundleコマンドを実行します。
サーバーを立ち上げます。
ブラウザで http://localhost:4000 にアクセスすればサイトが表示されます。
動かない部分や不明な点はコメント欄やTwitterなどでお気軽にご連絡ください！
