ねむすぎ日記 > Web > MT(ソフトウェア版)のAMP対応をした

MT(ソフトウェア版)のAMP対応をした

  • 2017年1月作成
  • 2020年2月16日更新
  • Web

やっとAMP(Accelerated Mobile Pages)対応しました。JSがほぼ使えなかったり(aタグに書いたonclickすらNG)、CSSが50KB以内だったりする制約はあるものの、一般的なブログ記事であればなんとか対応可能でした。
MovableTypeは新しい記事のアーカイブテンプレートを追加するだけでAMP対応ができるので、比較的AMP対応のような要件には向いています。

アーカイブマッピング

アーカイブマッピングで利用するアーカイブファイル名の定義

テンプレート

今回は記事のみAMP対応しました。

通常記事

metaにAMPページの場所を記述する

<link rel="amphtml" href="<$MTBlogURL$>archives/<$mt:ArchiveFile extension="0" separator="-"$>.amp.html">

AMP版記事

GoogleAnalytics対応:custom-element="amp-analytics"
GoogleAdsense対応:custom-element="amp-ad"

<MTSetVar name="tempName" value="individual_entry">
<MTSetVar name="AMPtemplete" value="1">
<MTSetVarBlock name="page_title"><$MTEntryTitle remove_html="1"$></MTSetVarBlock>
<!DOCTYPE html>
<html ⚡ lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="<$MTBlogURL$>">
<meta name="description" content="<$MTEntryExcerpt remove_html="1" ltrim="1" words="200"$>">
<MTIfNonEmpty tag="MTEntryKeywords"><meta name="keywords" content="<$MTEntryKeywords remove_html="1"$>"></MTIfNonEmpty>
<title><$MTGetVar name="page_title"$> - <MTBlogName encode_html="1"$></title>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<style amp-boilerplate>body{-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-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp-custom>
	<mt:Include module="style.amp.css">
</style>
</head>
<body class="individual single" id="entry<$MTEntryID pad="1"$>">
	<$MTInclude module="ヘッダー"$>
	<div id="content">
		<div id="main">
			<$MTInclude module="パンくずリスト"$>
			<MTIgnore><$MTInclude module="前後の記事へのリンク(シンプル)"$></MTIgnore>
			<h1><$MTGetVar name="page_title"$></h1>
			<mt:Ignore>regex_replace モディファイア用の変換リストをセット</mt:Ignore>
			<mt:SetVarBlock name="regex1a">/<img(.*)?">/g</mt:SetVarBlock>
			<mt:SetVarBlock name="regex1b"><amp-img layout="responsive"\1"></amp-img></mt:SetVarBlock>
			<mt:SetVarBlock name="regex1c">/<img(.*)?"\s\/>/g</mt:SetVarBlock>
			<mt:SetVarBlock name="regex1d"><amp-img layout="responsive"\1"></amp-img></mt:SetVarBlock>
			<mt:SetVarBlock name="regex2a">/src=\"http:\/\/nemusg.com/g</mt:SetVarBlock>
			<mt:SetVarBlock name="regex2b">src="//nemusg.com</mt:SetVarBlock>
			<mt:SetVarBlock name="regex3a">/style=""/g</mt:SetVarBlock>
			<mt:SetVarBlock name="regex3b"></mt:SetVarBlock>
			<div class="entry">
				<$MTInclude module="エントリーメタデータ"$>
				<div class="textBody">
					<$MTInclude module="記事の陳腐化"$>
					<$mt:EntryBody regex_replace="$regex1a","$regex1b" regex_replace="$regex1c","$regex1d" regex_replace="$regex2a","$regex2b" regex_replace="$regex3a","$regex3b" $>
				</div>
				<MTIfNonEmpty tag="EntryMore">
				<div class="textBody" id="extended">
					<$mt:EntryMore regex_replace="$regex1a","$regex1b" regex_replace="$regex1c","$regex1d" regex_replace="$regex2a","$regex2b" regex_replace="$regex3a","$regex3b" $>
				</div>
				</MTIfNonEmpty>
				<MTIgnore><$MTInclude module="前後の記事へのリンク(タイトル付き)"$></MTIgnore>
				<$MTInclude widget="Adsense(AMP)"$>
				<$MTInclude module="ソーシャルボタン"$>
				<MTIfCommentsActive>
				<div class="section" id="comments">
					<h2>Comments:<span class="count"><$MTEntryCommentCount$></span></h2>
					<MTIgnore>### Comment Logs ###########################################</MTIgnore>
					<MTIfNonZero tag="MTEntryCommentCount">
					<dl class="log">
						<MTComments sort_order="descend"><mt:ignore>ascend | descend</mt:ignore>
						<dt<MTIfArchiveTypeEnabled archive_type="Individual"> id="comment-<$MTCommentID$>"</MTIfArchiveTypeEnabled>>
						<span class="name">
							<$MTCommentAuthorLink default_name="Anonymous" show_email="0" spam_protect="1"$>
							<MTIfNonEmpty tag="CommentAuthorIdentity">
								<MTCommentAuthorIdentity>
							</MTIfNonEmpty>
						</span>
						<span class="date"><$MTCommentDate$></span>
						</dt>
						<dd<MTIfCommentParent> class="reply"</MTIfCommentParent>><$MTCommentBody$></dd>
						</MTComments>
					</dl>
					</MTIfNonZero>
					<p><a href="<$MTEntryPermalink$>#comments-open">この記事「<$mt:EntryTitle$>」にコメントする</a></p>
				</div>
				<!-- end div#comments -->
				</MTIfCommentsActive>
			</div>
			<!-- end div.entry -->
			<$MTInclude module="パンくずリスト"$>
		</div>
		<!-- end div#main -->
		<div id="utilities">
			<dl class="navi">
				<$MTWidgetSet name="サイドバー(ナビゲーション)AMP"$>
			</dl>
		</div><!-- /#utilities-->
		<$MTInclude module="ページ上部へ戻る"$>
	</div>
	<!-- end div#content -->
	<div id="footer">
		<ul class="support">
			<li>Powered by <$MTProductName version="1"$></li>
		</ul>
	</div>
	<mt:ignore>GoogleAnalytics</mt:ignore>
	<amp-analytics type="googleanalytics" id="analytics1">
		<script type="application/json">
			{
				"vars": {
				"account": "UA-3052709-4"
				},
				"triggers": {
				"trackPageview": {
					"on": "visible",
					"request": "pageview"
				}
				}
			}
		</script>
	</amp-analytics>
</body>
</html>

対応できたかの確認

AMPテストはブラウザを選ばず確認できるしエラー内容と対応方法が分かりやすいが、ロボットではないことを証明するために画像を選んだりしないといけないので少し面倒くさい。あとたまにキャッシュが効いてしまうのか直したのに古いコードに対して指摘されたりする。

慣れてきたらGoogle Chromeでコンソールを開き、確認したいページのURLに「#development=1」をつけて確認するのが楽。AMPページのアーカイブが「通常の記事名.amp.html」のような単純なものであれば下記のブックマークレットが使える。

javascript:(function(){a='\.html';b='.amp.html#development=1';if(document.location.href.indexOf(a)==-1){location.href=document.location.href.replace(b,a);}else{location.href=document.location.href.replace(a,b);}})(location.href);

対応した感想

AMPに必須の記述 <style amp-boilerplate> や v0.js はamp-imgタグにclassを追加したりするようなので、個人的にはテンプレート改修後に追加したほうが混乱が少なかった。

imgタグをamp-imgタグに置換するのは自分の環境では下記のようになった。「<img」から「">」までのようにしないといい感じに置換してくれなかった。

<mt:SetVarBlock name="regex1a">/<img(.*)?">/g</mt:SetVarBlock>
<mt:SetVarBlock name="regex1b"><amp-img layout="responsive"\1"></amp-img></mt:SetVarBlock>
<$mt:EntryBody regex_replace="$regex1a","$regex1b"$> <$mt:EntryMore regex_replace="$regex1a","$regex1b"$>

参考

Comments : 0

Comment Form

ねむすぎ日記 > Web > MT(ソフトウェア版)のAMP対応をした

Return to page top