すなばいじり

はてなブログを使って、トンピーを揃えるまで止めないブログ。ふっくらかわいい。

はてなブログPro で訪問者がAMP表示を選べるやつ

はてな sandbox JavaScript

書いた。

主に、未来の貢献者たちが現状の仕様を把握する為に利用できれば良いやつなのですが、スマートフォンな方が「暫くAMP表示で閲覧したい！でもURLに追加で文字入力するのは面倒です。」という場合に対処できるやつです。

AMP閲覧モードはブラウザ(タブ)を閉じる事で解除できます。

 

仕組み

エントリーページ(記事ページ)のURLに魔法の文字列を追加するとAMP表示になります。

 

使い方

スマートフォンで表示させる

  1. はてなブログProにする
  2. PC版のブログ詳細設定にて「AMP配信」をONにする
  3. 以下のコードを詳細設定にある「headに要素を追加」へ貼り付ける
<!-- すなばいじり はてなブログPro用のAMP表示(デバッグ用) -->
<script>
(function () {
	var blogData = document.getElementsByTagName("html")[0].dataset;
	if (blogData.page === "entry" && blogData.device === "touch") {
		if (typeof sessionStorage.HtnpsneAmpmode === "undefined") {
			//案内を出す
			document.addEventListener("DOMContentLoaded", function () {
				var ButtonElm = document.createElement('div');
				ButtonElm.innerHTML = '<a id="Htnpsne-AmpmodeButton" class="entry-link">'
					+ '<img style="width: 1.1em;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIzMnB4Ig0KCSBoZWlnaHQ9IjMycHgiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+PHBhdGggZmlsbD0iIzAzNzlDNCIgZD0iTTIwLjgyOCwwLjc0NEwxOCwxM2g1TDExLjQyMSwzMS4zMzNjMS40NTMsMC40MzQsMi45ODksMC42NzQsNC41ODIsMC42NzQNCgljOC44MzgsMCwxNi4wMDMtNy4xNjUsMTYuMDAzLTE2LjAwM0MzMi4wMDcsOC44NDcsMjcuMzA4LDIuNzkxLDIwLjgyOCwwLjc0NHoiLz4NCjxwYXRoIGZpbGw9IiMwMzc5QzQiIGQ9Ik0xNCwxOUg5TDIwLjU3NiwwLjY3MUMxOS4xMjYsMC4yNCwxNy41OTQsMCwxNi4wMDMsMEM3LjE2NSwwLDAsNy4xNjUsMCwxNi4wMDMNCgljMCw3LjE1NCw0LjY5NSwxMy4yMDgsMTEuMTcxLDE1LjI1N0wxNCwxOXoiLz48L2c+DQo8L3N2Zz4NCg==">'
					+ 'しばらくAMPで読む</a>';
				document.querySelector("header.entry-header").appendChild(ButtonElm);
				document.getElementById('Htnpsne-AmpmodeButton').addEventListener("click", function () {
					sessionStorage.HtnpsneAmpmode = true;
					location.href = location.origin + location.pathname + "?amp=1";
				}, false);
			}, false);
		}else if(sessionStorage.HtnpsneAmpmode === "true"){
			//処理を行う
			location.href = location.origin + location.pathname + "?amp=1";
		}
	}
})()
</script>
<!-- すなばいじり はてなブログPro用のAMP表示(デバッグ用) ここまで -->

 

スマートフォンでエントリーページにアクセスすると、タイトルの下辺りに「しばらくAMPで読む」というリンクが表示されます。
タップすると、ブラウザを閉じるまではAMP表示になります。
(設定はブログ単位となります。)

 

PC版でもボタン押せるようにしたい

以下のようにコードを改造してみましょう。

if (blogData.page === "entry" && blogData.device === "touch") {

を

if (blogData.page === "entry") {

と変更すると表示されます。上手い事やると良いでしょう。

 

 

余計なものがロードされない為、びっくり高速表示になります。良かったですね。

 

 

途中でよく分からない文字の羅列がありますが、何？

アイコン画像データです。不要な場合は上手い事消すとスッキリします。
こうやって表示されているのか！と発見できるヒントがあるかもしれません。
弄ってみましょう。

 

 

個人的に付けようと思っているやつ

  • 人気エントリー一覧
  • サイドメニュー
  • エントリー内広告(公式採用が一番良いのですが、とりあえず。)

気長にやりましょう　:)

 

 

Amazonとかの画像が表示されずにしょんぼりしている熊。

NEW リズムでともだち こぐまのトンピー ぬいぐるみ

NEW リズムでともだち こぐまのトンピー ぬいぐるみ