作業テンプレート：/themes/◯◯（使用中のテーマ）/news/entry.html 作業URL： http://ドメイン/news/entry-◯◯.html（お知らせカテゴリーのエントリーどこでも）

このハンズオンでは a-blog cms でAMP（Accelerated Mobile Pages Project）に対応する方法をご紹介しています。AMPに対応すれば、ニュースまたはメディアサイトであれば、検索エンジンの検索結果でカルーセル表示されたり、他のページよりも素早く表示することができるようになります。

以下の流れに沿って進めていきます。

• 既存テンプレートをダウンロードして設置する
• テンプレートをカスタマイズする
• モジュールIDを設定する
• レイアウトをカスタマイズする
• AMPページのエラーを確認する

AMPでは独自に仕様が決められているため、多くのHTMLをAMP HTML用に修正しなければいけません。そのため、このハンズオンではAMPページに対応できる最低限のテンプレートを配布しています。以下のURLからダウンロードしてください。

• https://github.com/appleple/acms_amp

ダウンロードしたら、distディレクトリに入っているテンプレートを、使用しているテーマのディレクトリの直下に設置してください。

デフォルトだとテンプレートの変数化（setTemplate setRenderedを使いこなそうのハンズオンの内容です）が使用されています。記述が冗長になりますがテンプレートの変数化を使用したくないという方は、distディレクトリのテンプレートを設置後、amp_no_varsフォルダに入っているamp.htmlと/include/head/title.txtを1つ上の階層に設置してください。

カスタマイズするテンプレートは、amp.html、/news/entry.html、必要であれば/include/unit_amp/amp.htmlです。

/news/entry.html と amp.htmlを関連付けるために、以下の記述をhead内にしてください。

<!-- BEGIN_MODULE Touch_Entry -->
<link rel=“amphtml" href="%{CANONICAL_URL}/tpl/amp.html"><!-- END_MODULE Touch_Entry -->

amp.htmlにはすでに元コンテンツのページと関連付けるようにカノニカルの設定が行ってありますので、amp.html側の作業はとくに必要ありません。

以下の値を記入してください。ロゴ以外はプレースホルダーとして「◯◯」と記入してあるので、テキストエディターの検索機能で検索してください。

• サイトの著者の名前
• 団体の名前
• 団体のロゴ画像（幅600pxまたは縦60pxのもの。詳しくはガイドラインを参照してください）
• Twitterカードのサイトのアカウントと著者のアカウント（任意）
• Google AnalyticsのトラッキングID（任意）

/include/unit_amp/amp.htmlでは、iframe要素をAMP HTMLの記述方法であるamp-iframeへ変更しています。現在ではSlideShare、CodePenのカスタムユニットが制作されています。こちらの設定はiframe要素に対応するためのサンプルとしてあります。アカウントがない方もいらっしゃると思うので、必要であれば設定してください。

• スライドシェアのユーザーID
• スライドシェアのユーザー名
• CodePenのID
• CodePenのユーザー名

AMPでは、画像の幅と高さをpx指定しなければいけないので、メインイメージ用にEntry_SummaryのモジュールIDを作成します。

このとき、表示設定のタブにある、イメージ見出しのサイズ項目を横1000、縦1000などサイトの画像ユニットに登録される最大サイズ以上の設定を指定し、{imgX}と{imgY}の変数が実物サイズを表示できるようにします。

ほかにも、タグが関連しているエントリー表示するモジュールIDを用意しています。Entry_TagRelationalモジュールで「relational_entry」という名前でモジュールIDを作成してください。

レイアウトをカスタマイズするためには、CSSを記述する必要があります。AMPでは通常はCSSをインラインで記述するようになっていますが、インクルード機能を使用して、実際は外部ファイルであるCSSをインラインで出力しています。 SassやLessなどのCSSプリプロセッサーを使用できるようにこのような対応を行っております。

編集する際は、AMP HTMLの使用にそって修正されますよう、お気をつけください。

• Accelerated Mobile Pages Project

<!-- ※カスタマイズ用のCSS -->
<style amp-custom>
  <!-- #include file="/css/amp.min.css" -->
</style>

上記のソースコードを以下に変更してください。

<!-- ※カスタマイズ用のCSS -->
<style amp-custom>
  <!-- #include file="/css/amp.css" -->
</style>

変更すると amp.css が読み込まれるようになるので、amp.css を編集してください。

CSSプリプロセッサーを使用する場合は、/src/amp.scssを変更してください。

このとき、合わせて同梱しているgulpfile.jsもお使いください。gulpfile.jsにはAMP Validatorでエラーにならないように、acms.cssで使用している!importantや、gulpプラグインが自動的に付与してしまう@charset "UTF-8";などの記述を削除しています。この記述を削除するためにはgulp-replaceプラグインをインストールしてください。

var replace = require('gulp-replace');

gulp.task('sass', function () {
  …
  .pipe(replace('!important',''))
  .pipe(replace('@charset \"UTF-8\";\n',''))
  …
}

確認の方法としては2種類あります。

• Google Chromeのインスペクターで確認する方法
• テストツールを使う方法

http://ドメイン名/news/◯◯.html/tpl/amp.html（◯◯.htmlは現在カスタマイズされているページ）にアクセスし、URLの末尾に「#development=1」を付け足したURLにアクセスし、インスペクター（開発者ツール）を立ち上げます。

もし、エラーがあれば赤文字で表示されます。エラーがなければ「AMP validation successful.」と表示されます。

The AMP Validator にアクセスして、URLを記入し、「VALIDATE」ボタンをクリックします。ボタンをクリックするとエラーがあればエラー内容が表示されます。

ページの下部で、「Validation Status: PASS」と表示されていたら成功です。

確認ツールでエラーが修正され、成功していたらこのハンズオンは終わりです。

テンプレートが完成したら、Google Search Consoleより、Sitemapを送信またはFetch as Google してサイトをクロールするようにGoogleに伝えてください。

数時間するとインデックスされるようになります。もし、エラーの修正漏れがあればGoogleからエラー箇所がメールで通知されます。

インデックスされているのに、検索してもなかなかヒットしない場合は、モバイルから g.co/ampdemo へアクセスし、ご自分のサイトをキーワード検索してください。検索結果にAMPラベルがついていたら成功です。

a-blog cms v2.0 のリリース候補版となる a-blog cms v2.0RC2を公開いたします。 a-blog cms v2.0 は、これまでの使いやすさはそのままに、高度な管理機能の追加や、テーマ・管理画面の全面刷新を行い、新たなバージョンとして生まれかわりました。

今回のバージョンはRC1から各種機能をブラッシュアップしたものになります。

{text}[trim(13, '...')]

{number}[number_format]

{date}[wareki]

{date}[age]

[escape|nl2br]

a-blog cms ではビルドインモジュール（Entry_BodyやCategory_List...）と呼ばれる最初から入っているモジュールを使って動的にコンテンツを出力していきます。一般的なサイトを作るうえでは、ビルドインモジュールがあればそこまで困らないのですが、a-blog cmsで管理していないデータを出力したり、特殊な絞り込みをしたい場合は、PHPを書いて専用モジュールを開発する必要がありました。

そこで、Ver. 2.7.0 から導入される新しいビルドインモジュール Json_2Tpl を使う事でPHPが得意でない人もJSONさえ用意できれば、PHPを1行も書かずに思い通りのモジュールを作る事ができるようになります。

また、JSONがインターフェイスとなるので外部サービスとの連携もしやすくなります。今までPHPで諦めていた人は是非チャレンジしてみてください。

まずは、モジュールIDの作成を行います。 管理ページ > モジュールID の モジュールID作成ボタン を押してモジュールIDを新規作成します。ここでは以下のような設定にしましょう。

• モジュール: Json_2Tpl
• id: sampleJson2Tpl
• 名前: Json_2Tplの練習

出力をしたいJSONファイルを用意します。自分でJSONファイルを書く、外部サービスのJSONファイルを読む混むなどをするのですが、まずは練習用に以下のJSONファイルを使います。

http://ablogcms.io/sample.json

商品の一覧を出力しているJSONファイルです。これをa-blog cmsのテンプレートで出力してみましょう。

{
    "items": [
        {
            "id": "001",
            "name": "商品A",
            "color": "red",
　　　　"size": ["S", "M", "L"],
            "price": {
                "tax_included": 108,
                "without_tax": 100
            }
        },
       ...
}

練習用のJSONファイルを、先ほど作成したモジュールIDに設定してみましょう。先ほど作成したモジュールIDの設定画面に移動します。表示設定のタブに移動して JSONファイル の入力欄に http://ablogcms.io/sample.json を入力しましょう。

Json_2Tplのモジュール設定には以下のものがあります。

• キャッシュタイム: JSONファイルをキャッシュする時間を設定します。
• JSONファイル: データもとであるJSONファイルを指定します。URLもしくはパスで指定できます。

モジュールの準備ができたので、実際にテンプレートに出力をしてみましょう。まずはモジュールブロックを書きます。 idは先ほど作成したモジュールIDのものを指定ください。

<!-- BEGIN_MODULE Json_2Tpl id="sampleJson2Tpl" -->
<h2>商品</h2>

<!-- END_MODULE Json_2Tpl -->

次に実際にデータを表示していくのですが、その前にJSONファイルについてちょっと学んでおきましょう。

JSONは 名前/値のペア の集まりで構成されています。: の前にあるのが名前です。また、{ } で囲まれている部分をオブジェクトと呼びます。様々なデータを持っているセットと考えていただければ大丈夫です。次に [ ] で囲まれている部分が配列になります。データを複数持つことができます。これらは互いに入れ子にする事ができるようになっています。

ではサンプルのデータを見ながら、どのようなデータになっているか見てみましょう。

{
    "items": [
        {
            "id": "001",
            "name": "商品A",
            "color": "red",
　　　　"size": ["S", "M", "L"],
            "price": {
                "tax_included": 108,
                "without_tax": 100
            }
        },
       ...
}

まず、 items ですが、: のあとは [ になっていますので、Itemsは配列とわかります。配列の中身ですが、{ } で囲まれているのでオブジェクトを複数持っている事がわかります。

オブジェクトの中身ですが、id, name, color は文字列の値になっていますが、 price は { } で囲まれているのでオブジェクトです。そのオブジェクトの中身は 数値の値になっています。

これを踏まえてa-blog cmsのテンプレートを作っていきます。以下のようなルールがあります。

ここでのサンプルのコードは一部分を表示しているだけになります。全体のコード（動作するコード）は下のほうにあります。

配列の場合は、ループブロックで表現されます。ループブロックとは <!-- BEGIN 名前:loop --> という形のブロックになります。

ループブロックの中では、 glueブロック <!-- 名前:glue --> も利用できるようになります。glueブロックは ループ回数 - 1回 出力されるブロックになります。カンマで区切りたい場合などに利用すると便利です。

特殊な変数として {名前.i} という変数も利用できます。これは現在の配列番号を出力できます。

また配列の中身が、値の場合は（ここでゆうsize）配列の名前（ラベル）がそのまま変数名としても使えます。

<!-- BEGIN items:loop -->
{items.i}
<!-- BEGIN items:glue -->, <!-- END items:glue -->
...
<!-- END items:loop -->

<!-- BEGIN size:loop -->
<!-- BEGIN size:glue -->, <!-- END size:loop -->
{size.i} : {size}
<!-- END size:loop -->

名前（ラベル）がついたオブジェクト（例: "price": { ... }）の場合は、ブロックで表現できます。ブロックとは <!-- BEGIN 名前 --> の形のブロックです。

<!-- BEGIN price -->
...
<!-- END price -->

名前（ラベル）のあとが値の場合、変数として出力できます。変数は {名前} で表現されます。 もちろんこの変数には校正オプションも利用できます。

{id}
{name}
{color}
{tax_included}[number_format]
など

• 配列 -> ループブロック（例 <!-- BEGIN items:loop -->）
• 名前（ラベル）がついたオブジェクト -> ブロック（例: <!-- BEGIN price -->）
• 名前（ラベル）のあとが配列でもオブジェクトでもない値 -> 変数（例: {color}）

では以上のルールにしたがって練習用JSONのすべての値を出力してみましょう。以下のようなテンプレートになれば正解です。

<!-- BEGIN_MODULE Json_2Tpl id="sampleJson2Tpl" -->
<h2>商品</h2>
<ul>
    <!-- BEGIN items:loop -->
    <li>
        {items.i}: {id}: {name}<br>
        color: {color}<br>
        size: <!-- BEGIN size:loop --><!-- BEGIN size:glue -->, <!-- END size:glue -->{size}<!-- END size:loop --><br>
        <!-- BEGIN price -->
            税込: {tax_included}円
            税別: {without_tax}円
        <!-- END price -->
    </li>
    <!-- END items:loop -->
</ul>
<!-- END_MODULE Json_2Tpl -->

一通りJson_2Tplの使用の仕方を学びましたので、課題にチャレンジしてみましょう。

天気の情報をJSONファイルで取得して好きなようにa-blog cmsのテンプレートで出力してみましょう。

livedoorの天気情報APIを利用します。 http://weather.livedoor.com/weather_hacks/webservice

名古屋の場合: http://weather.livedoor.com/forecast/webservice/json/v1?city=230010