JekyllテーマのminimaをAMP対応した

こんにちは、SHOYANです。

JekyllテーマのminimaをAMP対応しました。

名前は AMP + Minima = AMinima です。

デモサイトも用意していてこちらで確認できます。

Minimaとは

MinimaはJekyllのテーマです。
jekyll new で作成した場合にデフォルトでインストールされるテーマです。
URLはこちらです。

どのようにAMP対応したのか

どのようにAMP対応をしたのかを説明します。
わりとあっさりできました。

まず、ampを宣言します。

1
<html amp>

そして、charsetを定義します。

1
<meta charset="utf-8">

次に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をインストールしてください。

1
$ gem install jekyll

ブログを作成します。

1
$ jekyll new blog

Gemfileを編集します。

1
2
3
4
5
以下のように書き換える

gem "minima", "~> 2.0"
↓
gem "aminima"

_config.yml のthemeを編集します。

1
theme: aminima

bundleコマンドを実行します。

1
$ bundle

サーバーを立ち上げます。

1
$ jekyll server

ブラウザで http://localhost:4000 にアクセスすればサイトが表示されます。

動かない部分や不明な点はコメント欄やTwitterなどでお気軽にご連絡ください！

最近の投稿