先日開催した a-blog cms zoom up 2020/06 にて、2020年4月1日（水）〜 2020年5月15日（金）の間募集していた a-blog cms awards 2020 の結果発表をおこないました。

a-blog cms zoom up 内では、受賞事例の制作者の方からのセッションを各賞10分ほどを行っていただき、カスタマイズ方法の紹介や、a-blog cms の機能を使ってどんなUIを提供しているのかご紹介いただきました。

受賞事例の詳細は a-blog cms awards イベントページにて紹介しております。各事例のリンクからページをご覧ください。

結果発表

受賞事例の結果は以下となります。受賞事例に選ばれたサイトの関係者の皆様方、この度は誠におめでとうございます！

豪華賞品について

制作事例を応募いただいた皆様には参加特典を差し上げており、受賞事例のみなさまには別途豪豪華賞品をご用意しております。今年は以下のラインナップの中からお選びいただけるようにいたしました！

LG 24UD58-B 4K（ディスプレイ）
DJI Mavic Mini（ドローン）
Logicool StreamCam （カメラ）
AirPods Pro（ワイヤレスイヤフォン）
BALMUDA The Toaster（トースター）
BALMUDA The GreenFan（扇風機）

また後日郵送致しますので、受賞者の方は今しばらくお待ちくださいませ！

この度はご参加いただき、誠にありがとうございました！

受賞事例をご応募していただいた3サイトのみならず、今回の企画にご応募いただいたすべてのサイト、また携わった制作者のみなさま、誠にありがとうございました。

その他の応募事例につきましても a-blog cms awards 2020 のページにてご覧いただけます。今年もすばらしい事例がたくさんありましたので、ぜひご覧ください。

a-blog cms awards 2020 制作事例一覧 | 応募事例 | a-blog cms

a-blog cms

2020年4月1日（水）〜 2020年5月15日（金）の間募集していたa-blog cms awards 2020 にご応募いただいた制作事例の全てを掲載しています。

2020年6月18日追記：受賞者の皆さまにお送りするトロフィーについて

受賞者の皆さまにはトロフィーを後日お送りします。

この a-blog cms awards が今後のみなさまの制作にとって、よりよい a-blog cms の構築の際の発想、または刺激になれたらと思います。

次回も開催できるように進めて参りますので、今回受賞を逃した方も、応募されなかった方もぜひ奮ってご参加いただけたら幸いです。

Ver. 2.11.40 をダウンロード

Google マップユニットを使用している場合

Google マップを使用しているエントリーで、ユニットの削除や住所から検索などの機能が使えなくなる問題が発見されています。

この問題は Google Maps API の仕様変更が原因です。ただ、Google公式によるアナウンスなどが現時点では特にされておらず、現在まで使用できていたものが使えなくなっている状態です。現在メンテナンス中のVer.2.9、Ver,2.10、Ver.2.11だけではなく、過去にリリースしたVer.1系やVer.2.0.xでも同じ問題が起こっていることが発見されました。

場合によってはエントリーを保存するとユニットのデータが消えてしまう場合もあるため、発見次第下記で紹介している対処法でご対応のほどお願いいたします。

問題の詳細

これらの問題は全て、1つでも地図ユニットを挿入しているエントリーで起こります。地図ユニットだけでなく、他のユニットにも影響を及ぼします。ユニットによっては保存するとデータが消えてしまう場合もあるため、発見次第ご対応されることをお勧めしております。

現象

以下の現象に当てはまれば、該当の問題が起こっている可能性があります。

現在メンテナンス中のVer.2.9、Ver,2.10、Ver.2.11だけではなく、過去にリリースしたVer.1系やVer.2.0.xでも同様の問題が起こっている
マップの部分でスタティックな地図（画像）が表示される
Googleマップの地図ユニットで住所や名前で検索ができない
コンソールにエラーは出ない

問題の解決方法

Googleの仕様変更による問題発生となりますが、a-blog cms としては下記の対応をお願いしております。

Ver. 2.9、 Ver. 2.10、 Ver. 2.11 の場合

最新のパッチバージョンへアップデートしてください（無償）

2020年5月19日にリリースした下記のバージョンで該当の問題を修正しております。

Ver. 2.9.32
Ver. 2.10.35
Ver. 2.11.13

もし可能な場合は上記のパッチバージョン以上へアップデートをお願いいたします。

それ以外のバージョン

Ver. 2.9、 Ver. 2.10、Ver.2.11へアップデートをご検討ください（※Ver.2.11へマイナーバージョンアップする場合は別途アップデート費用がかかりますのでご注意ください）
お伝えいただければ弊社でパッチを作成することが可能です（およそ2万円ほどとなりますが、具体的な費用につきましてはお問い合わせいただいた後、お見積もりをいたします）

弊社にパッチ作成を依頼する場合は、お問い合わせフォームからご用件から「有償メールサポート」を選択し詳細なご用件をお知らせください。

お問い合わせ | ブランドサイト | a-blog cms

Blog2020に同梱されるAMPテンプレートの紹介

この記事では、今度リリースするBlog2020の中に同梱されるAMPテンプレートについてご紹介します。

以前、a-blog cms Training Camp 2016 で a-blog cms で AMP 対応する方法をご紹介しました。そこでは、発表当時の a-blog cms の機能でできる範囲内で実装方法をお伝えしました。

発表スライド：a-blog cms でAMPに対応する
GitHub：mkasumi/acms_amp: a-blog cms でAMP対応するためのテンプレート

ニュースサイトではAMPの実装の需要が多々あることから、この度公式テーマのブログテーマに加えることになりました。これにより、今回はコアのシステムにも機能を加え、対応しています。そのため、ブログテーマのAMPテンプレートを利用するためには、テーマの設置だけではなくCMSのバージョンアップも必要になります。

AMPとは

AMPとはAcceralated Mobile Pages の略で、ページを高速に表示するためのフレームワークのことです。

AMP - a web component framework to easily create user-first web experiences

Whether you are a publisher, e-commerce company, storyteller, advertiser or email sender, AMP makes it easy to create great experiences on the web. Use AMP to build websites, st...

AMPページはHTMLだけではなく、独自のAMP HTMLという言語で構成されており、ルールにしたがってウェブページを作成しなくてはいけません。この記事はa-blog cmsでAMPページを作るための説明しており、一般的なAMPページを開発する知識はAMP本家のサイトを参考にした上でご覧ください。

AMPテンプレートの表示の仕方

AMPテンプレートはblog2020テーマに同梱されています。詳細ページを開き、URLの末尾に/tpl/amp.htmlと付け足すと表示されます。

AMPテンプレートの見た目

a-blog cms がデフォルトで用意していること

AMP HTMLの仕様に沿ったunit.html（ユニットのテンプレート）の用意
幅または高さのどちらかを指定し、画像URLからもう片方の一辺を求める校正オプション

AMP HTMLの仕様に沿ったunit.html（ユニットのテンプレート）の用意

AMPでは、AMP HTMLの仕様に沿ったテンプレートの記述が必要です。たとえば、img要素ではなく、amp-img要素を使って記述します。

下記はファイルユニットのソースコードの例です。

<div class="column-file-{align} js_notStyle">
	<a href="%{HTTP_ROOT}{path}"><img class="columnIcon" src="%{HTTP_ROOT}{icon}" alt="ファイルを開く" width="{x}" height="{y}"></a>
	<!-- BEGIN_IF [{caption}[delnl]/nem] --><p class="caption">{caption}[raw|nl2br]</p><!-- END_IF -->
</div>

<div class="column-file-{align} js_notStyle">
	<a href="%{HTTP_ROOT}{path}"><amp-img class="columnIcon" src="%{HTTP_ROOT}{icon}" alt="ファイルを開く" width="{x}" height="{y}" layout="fixed"></amp-img></a>
	<!-- BEGIN_IF [{caption}[delnl]/nem] --><p class="caption">{caption}[raw|nl2br]</p><!-- END_IF -->
</div>

他にも、地図ユニットではサードパーティーのiframeやJSを読み込むのではなく、代替手段として静的な画像やボタンを表示してリンクで大きな地図を確認できるようにしています。

Google マップ

Yahoo!地図

OpenStreetMap

幅または高さのどちらかを指定し、画像URLからもう片方の一辺を求める校正オプション

amp-img要素では幅と高さの指定が必須です。一辺の数値が固定のデザインカンプを再現したい場合は、imageRatioSizeH または imageRatioSizeW の校正オプションが便利です。

使用例

<img src="{image_path}" width="150" height="{image_path}[imageRatioSizeH(150)]" alt="">
<img src="{image_path}" width="{image_path}[imageRatioSizeW(150)" height="150" alt="">

画像URLの変数を指定し、一辺の固定のサイズを指定することでもう一辺のサイズを出力する校正オプションです。

AMPテンプレートでも多々使用しています。詳しくはリファレンスをご覧ください。

校正オプション | リファレンス | a-blog cms developer

AMP修正する時に知っておきたいのtips

AMPテンプレートを修正るときに知っておきたい部分についてまとめました。制作する際はご参考にしてください。

AMP用CSSの作り方と読み込み方
既存のユニットの変更
拡張ユニットの作り方

AMP用CSSの作り方と読み込み方

AMPで使用するCSSでは、75,000 バイトまでという制約や、!importantを使用しない、などのいくつかルールが存在しています。

そのため、Blog2020テーマでは下記のようにCSSをa-blog cmsのインクルード機能を使って読み込んでいます。

<style amp-custom>
	@include("/css/dest/blog-amp.min.css")<!-- BEGIN_MODULE Blog_Field --><!-- BEGIN style:veil -->
		/* キーカラーとのコントラスト比がより高い方の色を取得 */ <!-- BEGIN_SetRendered id="contrast_color" -->
	{key_color}[contrastColor('#666666','#FFFFFF')]  <!-- END_SetRendered -->
	@include("/css/style-blog-field.css")<!-- END style:veil --><!-- END_MODULE Blog_Field -->
</style>

CSSもなるべく軽量にするため、acms.cssのCSSフレームワークの利用も最小限にしています。/themes/blog2020/scss/_acms.scss を設置し、使わないコンポーネントはコメントアウトしています。

acms.scssの一部のソースコードを抜粋すると、下記のように記述されています。

@import "../../system/scss/grid.scss";
//@import "../../system/scss/button.scss";
//@import "../../system/scss/type.scss";
//@import "../../system/scss/code.scss";
//@import "../../system/scss/form.scss";
//@import "../../system/scss/table.scss";
//@import "../../system/scss/title.scss";
//@import "../../system/scss/list-group.scss";
//@import "../../system/scss/label.scss";
//@import "../../system/scss/badge.scss";
//@import "../../system/scss/panel.scss";

既存のユニットの変更

既存のユニットを修正する際は、/include/unit-amp.html を修正します。

ファイル内では、/themes/system/_layouts/unit-amp.html をテンプレートの継承しているので、@sectionで指定した部分を上書きしています。

Blog2020テーマでは、以下のように標準マップのユニットを上書きしています。

<!-- BEGIN unit#osmap -->
@section(osmap-unit)
<!-- Open Street Map -->
<div class="column-map-{align}{display_size_class}"{display_size}[raw]>
	<a href="https://www.openstreetmap.org/#map={zoom}/{lat}/{lng}" class="amp-btn amp-btn-large" target="_blank">別ページで地図を表示</a>
</div>
@endsection
<!-- END unit#osmap -->

拡張ユニットの作り方

Blog2020テーマでは/include/unit/extend-amp.html というファイルが用意されており、通常の拡張ユニットを作成するように同じ方法で作成してください。

ユニットでJavaScriptを読み込む時の注意

これはBlog2020テーマに同梱されている目次ユニットの例です。AMPではCSSと同じようにJavaScriptの仕様にも制限があります。そのため、通常のテーマと同じように組み込みJSが使えません。

amp-script要素でJSを使用したい箇所を内包しなければいけないのですが、この目次ユニットはただのユニットなので、記事作成者が挿入されなければ使用されない可能性があります。そして、AMPは使用していないJavaScriptファイルの読み込みでエラーを表示してしまいます。

そのため下記のソースコードの例では、ユニット内でamp-script要素をSetRenderedし、実際にamp-script要素を使用したい箇所でGet_Renderedしています。

<!-- BEGIN unit#custom_outline --><!-- BEGIN_SetRendered id="load_amp_script" -->
<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script><!-- END_SetRendered -->
<!-- BEGIN_SetRendered id="has_outliner_begin" --><amp-script layout="container" src="%{HTTP_ROOT}themes/blog2020/js/amp-outliner.js"><!-- END_SetRendered -->
<!-- BEGIN_SetRendered id="has_outline_end" --></amp-script><!-- END_SetRendered -->
	<nav class="outline">
		<div class="outline-header js-except">
			<p class="outline-title">目次</p>
			<button class="js-open-outline outline-btn"><span class="acms-icon-arrow-small-down"></span>開く</button>
		</div>
	  <div class="js-outline-yield outline-list-wrap"></div>
	</nav>
<!-- END unit#custom_outline -->

<!-- GET_Rendered id="has_outliner_begin" -->
<div class="entry-body acms-entry js-outline-container">
	<!-- カスタムフィールドの読み込み -->
	@include("/include/entry/field.html")
	@include("/include/unit-amp.html")
	<hr class="clearHidden" />

	<!-- BEGIN_MODULE Touch_Entry -->
	<!-- カスタムフィールドの読み込み -->
	@include("/include/entry/field_foot.html")
	<!-- END_MODULE Touch_Entry -->
</div>
<!-- GET_Rendered id="has_outliner_end" -->

ブログテーマのAMPテンプレートの使い方

AMPページを有効にする
解析ツールを使う
JSON-LDの対応

AMPページを有効にする

AMPページを有効にするときはブログのカスタムフィールドにチェックを入れてください、チェックを入れることで、AMPページと紐づけるソースコードが記述されます。

解析ツールを使う

解析ツールを使う際は、ブログのカスタムフィールドに設定をしてください。

「アナリティクスを有効にする」の項目にチェックを入れ、あとはAMPのドキュメントを参考にして使用したいベンダーに沿った設定を行ってください。

AMPで対応している解析ツールに関してはAMPのドキュメントをご覧ください。

アナリティクスベンダー - amp.dev

JSON-LDの対応

AMPテンプレートでは、検索結果にサムネイル表示されるようにJSON-LDの設定を用意しています。予め、ブログのカスタムフィールドに用意している「団体の名前」や「団体のロゴ画像」の項目に設定が必要です。

大引退のロゴ画像では、横幅600pxまたは高さ60px必要です。AMPが対応している拡張子は.png、.jpg、.gifのみとなっています。

AMPページを検証するときに注意すること

ログアウトして確認する

ログアウトして確認する

a-blog cms にログインした状態で#development=1でAMPテンプレートを確認すると、どんなに対応していても下図のようにカスタムJavaScriptのエラーが表示されてしまいます。

これは、a-blog cmsがログイン状態だと認識して、HTMLに記述していなくてもacms.jsなどの管理画面や記事の編集のために必要なJavaScriptを自動的に読み込んでくるからです。

a-blog cms でAMPテンプレートを検証する際は、必ずログアウトしてご確認ください。

最後に

Blog2020に同梱されているAMPテンプレートの紹介は以上となります。

フィードバックやご意見ありましたらお問い合わせフォームよりお待ちしております。

それでは、これからも安全なシステムとなるよう日々改善を行っていきますので、今後ともa-blog cmsのことをよろしくお願いいたします。

Ver. 2.11.39 をダウンロード

a-blog cms awards 2020 の結果が発表されました

結果発表

デザイン賞：福岡ふかぼりメディアささっとー

制作事例の詳細へ

テクノロジー賞：日報サイト

制作事例の詳細へ

ユーザビリティ賞：Shoesfit.com

制作事例の詳細へ

豪華賞品について

この度はご参加いただき、誠にありがとうございました！

2020年6月18日追記：受賞者の皆さまにお送りするトロフィーについて

Ver. 2.11.40 をダウンロード

Google マップユニットを使用している場合

問題の詳細

現象

問題の解決方法

Ver. 2.9、 Ver. 2.10、 Ver. 2.11 の場合

それ以外のバージョン

Blog2020に同梱されるAMPテンプレートの紹介

AMPとは

AMPテンプレートの表示の仕方

関連ファイル

a-blog cms がデフォルトで用意していること

AMP HTMLの仕様に沿ったunit.html（ユニットのテンプレート）の用意

幅または高さのどちらかを指定し、画像URLからもう片方の一辺を求める校正オプション

使用例

AMP修正する時に知っておきたいのtips

AMP用CSSの作り方と読み込み方

既存のユニットの変更

拡張ユニットの作り方

ユニットでJavaScriptを読み込む時の注意

ブログテーマのAMPテンプレートの使い方

AMPページを有効にする

解析ツールを使う

JSON-LDの対応

AMPページを検証するときに注意すること

ログアウトして確認する

最後に

結果発表

デザイン賞：福岡ふかぼりメディア ささっとー

制作事例の詳細へ

テクノロジー賞：日報サイト

制作事例の詳細へ

ユーザビリティ賞：Shoesfit.com

制作事例の詳細へ

豪華賞品について

この度はご参加いただき、誠にありがとうございました！

2020年6月18日追記：受賞者の皆さまにお送りするトロフィーについて

問題の詳細

現象

問題の解決方法

Ver. 2.9、 Ver. 2.10、 Ver. 2.11 の場合

それ以外のバージョン

AMPとは

AMPテンプレートの表示の仕方

関連ファイル

a-blog cms がデフォルトで用意していること

AMP HTMLの仕様に沿ったunit.html（ユニットのテンプレート）の用意

幅または高さのどちらかを指定し、画像URLからもう片方の一辺を求める校正オプション

使用例

AMP修正する時に知っておきたいのtips

AMP用CSSの作り方と読み込み方

既存のユニットの変更

拡張ユニットの作り方

ユニットでJavaScriptを読み込む時の注意

ブログテーマのAMPテンプレートの使い方

AMPページを有効にする

解析ツールを使う

JSON-LDの対応

AMPページを検証するときに注意すること

ログアウトして確認する

最後に

デザイン賞：福岡ふかぼりメディアささっとー