常連

FC2ブログのスマートフォンページ（通常のページの末尾に「?sp」が付くページに、さらに末尾に「#development=1」を追加）を、Google Chromeのデベロッパーツールにある「Console」で確認すると、

「AMP validation successful.」のメッセージが表示されず、AMP対応のページと認識がされていない様子でした。

「<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0," />」や「<link rel="amphtml"～」のmetaタグは設置しているのですが、
ほかにも特殊なタグなどが必要になるのでしょうか？

(サイトのURLを移転しました。現在はこちらになります。)
pasokonpcsyuuri.blog.fc2.com
↓
[パソコンが故障した時の修理とPCのエラーのトラブル解決の方法](https://datahukugen.com/pasokonpcsyuuri/)

どうぞよろしくお願い致します。

FC2ブログのスマートフォンページがAMP対応と認識されていない

### 前提・実現したいこと

ampを使うには以下のように雷マークを書くという記事を見ました。

```html

<html ⚡="" lang="ja">

```

雷マーク「⚡」をどのようにして入力すればいいですか？
（なぜ漢字変換できない記号を使うのでしょうか？）

### 発生している問題

どのように入力してこの記号を出せばいいのかわかりませんでした。


### 試したこと

「かみなり」と打って漢字変換を試しました。


### 補足情報

使用OSはウィンドウズです。

```html

<html amp lang="ja">

```

を使えばいいのですが。

ampの雷マーク「⚡」の出し方

的外れな質問をしているかもしれませんが、よろしくお願いいたします。
どんだけ調べても解決できません。詳しいかたの知識をお借りできればと思います。
### やりたいこと：AMPコンテンツのキャッシュ更新
**目的：AMPページをカスタマイズした後すぐにスマホで確認したい**

### これまでやったこと
**RAS鍵の生成**
[AMPコンテンツを更新する](https://developers.google.com/amp/cache/update-cache)に書いてあるやり方を、こちらのサイト[AMPのCDNキャッシュをupdate-cacheを使って強制更新する方法。update-pingは廃止。](https://beiznotes.org/amp-update-cache/)を参考にRSAキーの準備とアクセスまでは成功しております。

**リクエストURLの作成**
上記サイトで、リクエストURLを作成する方法が記載されてあります。
https://<example-com&gt;.cdn.ampproject.org/update-cache/c/s/<example.com/article>?amp_action=flush&amp_ts=<ts_val>&amp_url_signature=<sig_val>
この中にあるパラメータを以下の内容で挿入するよう指示があります。

パラメータ
・<example-com>: ドメインをAMP Cache URL Formatでエンコードしたもの。単純には、”-“を”–“に、”.”を”-“に置き換えたものです。
・<example.com/article>: キャッシュを更新したいURL
・<ts_val>: unix time。リクエストを送る時間のプラマイ1分以内でないといけません。
・<sig_val>: RSA暗号鍵で作成したキー。

出来上がったものの「/update-cacheから<ts_val>までの部分をsha256で暗号化」し「web safeなbase64でエンコード」と指示があります。

[SHA256ハッシュ生成ツール](https://www.milk-island.net/javascript/hashgenerator/sha2_256.html)
上記サイトで暗号化しましたものを[BASE64 エンコード・デコード](https://kujirahand.com/web-tools/Base64.php)このサイトでUTF-8でエンコードしました。

### わからないこと
ここからが私にとっては難解でして、分からないことを箇条書きしますと
- 上記の方法でエンコードしたURLにアクセスするとキャッシュが更新されるという理解でよろしいでしょうか？

参考サイトでは「phpで実装を行うと次のようになります。」とあります。
- この記述を保存する際のファイル名は何にすればいいのか？どこに保存し実行すれないいのか？
```
function generateURL( $page ) {
$domain = ‘example.com’;
$url = $domain . $page;

$timestamp = time();
$ampBaseUrl = “https://&#8221; . str_replace( array( ‘-‘, ‘.’ ), array(‘–‘, ‘-‘ ), $domain ) . “.cdn.ampproject.org”;
$signatureUrl = ‘/update-cache/c/s/’ . $url . ‘?amp_action=flush&amp_ts=’ . $timestamp;

// opening the private key
$pkeyid = openssl_pkey_get_private( “file:///Users/boofoo/private-key.pem” );
if ( $pkeyid == false ) {
echo ‘could not open the private key.’;
exit;
}

// generating the signature
openssl_sign( $signatureUrl, $signature, $pkeyid, OPENSSL_ALGO_SHA256 );
openssl_free_key( $pkeyid );

// urlsafe base64 encoding
$signature = $this->urlsafe_b64encode( $signature );

// final url for updating
$ampUrl = $ampBaseUrl . $signatureUrl . “&amp_url_signature=” . $signature;

return $ampUrl;

}

function urlsafe_b64encode( $string ) {
return str_replace( array( ‘+’, ‘/’, ‘=’ ), array( ‘-‘, ‘_’, ” ), base64_encode( $string ) );
}
```
上記コードに関して以下のような指示が続いています。
「generateURL関数にページのパス ( /example_page.htmlなど) を渡すと、リクエストURLが返ります。」
- これは上記コードの内のどこかにページパスを入力するのでしょうか？それとも別途PHPを作成するのでしょうか？作業手順が全く分かりません。

「関数内の$domainは先に指定しておきます。」
- ここは、サイトドメイン（***.comのような）と理解して間違いないでしょうか？

「$domainには他バイト文字は入っていないと仮定しています。」
- 他のバイトとは文字のことでしょうか？例えば「-」などのことでしょうか？

「あとは生成したURLに対して @file_get_contents( $url ); をすれば良いでしょう。」
- この作業もどこでどのように実行するのかが分からず。

大変初歩的な質問ばかりで恐縮ではありますが、この作業を完成させたいと思っております。
何卒ご教授よろしくお願いいたします。

update-cacheリクエストを使用してAMPページを更新する方法

タイトルがざっくりしすぎているので、以下で捕捉させていただきます。
##実現したいこと
・ECサイトを作りたい。
・商品数は10万まで。
・seoを考慮しつつ、ローディング時間を削ることに注力したい。
・スマホからの流入が多いと思われるため、なるべくampで作成したい。
・将来的には、一日に100万pvを取る可能性もあるが、恐らく10万程度で安定する。
・そこからは僕ではさばけないと思うので、外部で雇うのですが、その際にサイト設計を一からといのを避けたい。


商品ページを記事の投稿と捉えて何かしらのcmsで管理したいと考えています。
その中で従来のようにPHPで管理する手段と、Reactのような新しめのフロントエンドのどちらかを選ぶかで悩んでいます。
###PHPでの実装について
PHPで管理する場合、数が多いのでテーブルをカスタマイズしたWordPressで記事投稿を管理し、出力はWordPressのテーマを作成するつもりです。
この方法ですと、明るくはないですがセキュリティやローディングなどの高速化の技術に不安があります。
なお、自分はPHPでテーマやプラグインを作成したことがある程度でWordPress以外でサイトを作ったことが1度しかありません。
###Reactでの実装について
次にReactを使用した時の話ですが、SEOを考える上でNext.jsとGatsbyのどちらかの使用を考えています。
ユーザーの動作に起因したアクションはほとんど考えていないため、Gatsbyの方が要件に合致している気がしますが、以下の点が不安です。
「buildが一斉のため、10万ほどあるとbuildに時間が相当かかることが考えられる。」という点です。
これに関して、watchmanなどの差分buildができるとしたらgatsbyに決定なのですが、できないOR難しすぎるならば、Next.jsの使用も視野に入れています。
React Staticは興味があるものの使用したことがないため、そこがネックです。
ただNext.jsでは無駄に機能が多い気もして、総合的に一番必要十分な方法を考えているのですが、決心ができていません。

自作でSSRをするや、PHPで自作サイトをするですと、メモリ使用など細かいところまで考えてコーディングできる自信がなく、結果的に低速化になる可能性もある気がします。また、そこまでweb制作に時間が割けられないというのが実情です（アプリとの連携を視野にアプリ制作に注力しています）。


##伺いたいこと
煩雑になってしまい申し訳ございません。結論としましては、以上のもので悩んではいるものの、以上三点の中で最もローディング（UXの観点から）が速くSEO的に優れたものを採用したいのですが、どれが最も優れているでしょうか。

ReactのNext.jsでのSSRと、GatsbyでのSSR、PHPでの実装のどれが優れているでしょうか。

###前提・実現したいこと
そのページがAMPページかどうか判別する方法を教えていただきたいです。
現状、<amp html〜 もしくは <amp ⚡〜 で始まる場合はAMPページ、それ以外は通常のページ…とするのが良いかなと考えているのですが、イマイチ良い方法が思い浮かびません。

###試したこと

とんちんかんなことをしているかもしれませんが、調べながらやった結果、下記のようなコードになりました。

```php
function amp_check() {
    $amp_check = false;
    $html = file_get_contents ( 'example.com' );
    $html = htmlspecialchars($html);
    $pattern = '/<html amp'; //
    if(preg_match($pattern,$html,$matches) === 1){
        $amp_check = true;
    }
    return $amp_check;
}
```

###悩んでいること
file_get_contents関数を使う場合、記事でソースコードを紹介している場合もヒットしてしまうと思うので、ソースコードの最初にだけ検索対象の文字列（$pattern）があった場合だけ〜という条件分岐にしたいのですが、どうすればいいのでしょうか？

###お願いしたいこと
より良い方法や、簡単な方法があればご教授いただければ幸いです。

###いただいた回答方法を元にした解決方法
とても役立つ回答をいただき、無事に解決できました！ありがとうございます！
参考→[PHP（WordPress）でAMP対応ページかどうか判別する方法。](https://moriawase.net/amp-check)

PHPでAMPページかどうかの判別する方法について

お世話になります。

WordPressで制作したウェブサイトをAMP対応する際に出力されるエラーの対処法で困っています。

### 解決したい問題の概要

[AMPプラグイン](https://ja.wordpress.org/plugins/amp/)を有効化し、AMPページを表示させるまでは問題なくできました。

しかし、AMPページが有効なAMPページとして構成されているかを確認するために、AMPページのURL末尾に #development=1 を加えてコンソールを確認したところ、下記のようなエラーが出力されていました。

```
Failed to load resource: the server responded with a status of 404 ()
https://cdn.ampproject.org/v0/validator_minified.js.sourcemap
```

![エラー出力時のコンソールの表示](6f10d07119f1ee5f5d05c2e9bc0bf79f.png)

そして、エラーに記載されている[URL](https://cdn.ampproject.org/v0/validator_minified.js.sourcemap)先にジャンプすると、以下のような画像が出力されます。

```
404. That’s an error.
The requested URL /v0/validator_minified.js.sourcemap was not found on this server. That’s all we know.
```

![Googleエラー出力時の表示](bd4ba97896bc4eb9f603eaf372a24531.png)

この表示がされるということは出力したAMPページがGoogleにAMPページの構成として認識されていないのだと思われますが、このエラーの解決方法がわからず先に進めない状態になっています。

つまり、**GoogleにAMPページを認識させるために404エラーを解決するための方法が知りたい**のです。

### 環境について
WordPressバージョン：4.9.6
使用しているテーマテンプレート：[OPEN CAGE "Swallow"](https://open-cage.com/swallow/)
AMPプラグイン：[AMP for WordPress](https://ja.wordpress.org/plugins/amp/) 0.7.1
契約サーバー：[LOLIPOP](https://lolipop.jp/)（スタンダードプラン）
独自ドメイン：[MuuMuuDomain](https://muumuu-domain.com)
使用ブラウザ：Safari 11.1/Chrome 66.0

### 試したこと
①[こちらのウェブサイト](https://moukegaku.com/wordpress-amp/)を参考にAMP化の作業を進めましたが、**「AMPプラグインをインストール＆有効化する」**項目でエラーが出てしまいました。

②契約サーバー：ロリポップに問い合わせたところ、下記の回答をもらいました。しかし、AMPのサービス側が原因（？）らしく、ロリポップでは対応できないとのことでした。

> お問合せいただきました件に関しまして
> ご連絡いただきましたエラーにつきましては
> 以下のアドレスにて発生しているようでございます。
> 
> 　■[https://cdn.ampproject.org/v0/validator_minified.js.sourcemap](https://cdn.ampproject.org/v0/validator_minified.js.sourcemap)
> 
> 恐れ入りますが、上記のアドレスにつきましては
> ロリポップ！にて管理されているページではないため
> 詳細については調査を行うことが出来ません。
> 
> お手数ではございますが、上記のアドレスを管理されているページに
> お心当りがないかご確認いただき、詳しい状況について
> ご確認いただきますようお願いいたします。
> 
> 　※恐らく以下のサイトの関連ページかと思われます。
> 
> 　　■Accelerated Mobile Pages Project &#8211; AMP
> 　　　[https://www.ampproject.org/](https://www.ampproject.org/)

### 解決したいこと
**Googleに制作したウェブサイトのAMPページを認識させるために上記の404エラーを解決する方法が知りたい**です。

もし何か解決方法をご存知の方がいらっしゃいましたら、ご助力いただけると幸いです。

どうぞ宜しくお願いいたします。

WordPressをAMP化した時に出力される404エラーを解決したい

お世話になります。

AMPの勉強を始めたばかりのものです。

レスポンシブページをAMP対応させることを考えていますが、PCはどのブラウザまで対応しているかを確認させて下さい。
IE11でも対応していますでしょうか？

また、これではうまく動かないとか、不具合が多いブラウザなどがございましたら、ご教示いただけますと助かります。

何卒宜しくお願いたします。

AMPの対応ブラウザ

### 前提・実現したいこと

自分のWordpressサイトでAMPによるエラーが出ています。
Google Search Consoleから指摘されているエラー文は以下の通りなのですが、
これが何を指しているのかが知識不足でわかりません。
どなたか、分かる方いらっしゃったら
エラーで指摘されている内容を教えていただけませんでしょうか。

### 発生している問題・エラーメッセージ

【エラー1】
タグ「noscript enclosure for boilerplate」がドキュメントで複数回使用されています。

→該当ページ「https://officehojo.com/blog/2019/06/27/sdgs1/?amp」
→ソースコード
<noscript><style amp-boilerplate="">body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript></head><body class="post-template-default single single-post postid-2202 single-format-standard wp-embed-responsive ystandard ystd amp has-sidebar singular has-bg-color has-fixed-header">

【エラー2】
指定できるのは、amp-boilerplate と amp-custom の「style」タグのみです（ドキュメント ヘッドにのみ指定できます）。

→該当ページ「https://officehojo.com/blog/2019/06/27/sdgs1/?amp」
→ソースコード（長すぎて掲載できませんでした）
<style>.ystdb-section.has-animation:not(:root) {opacity:1;}</style></noscript><style amp-custom="">amp-img.amp-wp-enforced-sizes[layout="intrinsic"] > img{object-fit:contain}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}a{background-color:transparent}amp-img{border-style:none}input{font-family:inherit;font-size:100%;line-height:1.15;margin:0}input{overflow:visible}[type=button],[type=reset],[type=submit]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}[type=checkbox],....



### 試したこと

ampサイトが機能しているかURLを直接入れてチェックしましたが、問題なく表示されました。

### 補足情報（FW/ツールのバージョンなど）

エラーが出たきっかけはおそらくWordpressのテーマ&プラグインの更新によるものではないかと思っています。（更新した日付でエラーが100件出ていたため）
ただし、どれが原因かがわからないので対処ができないでおります。
エラー発生時からはAMPサイトのビュー数は0になっています。

情報不足でしたらご一報ください。
お詳しい方、知恵を授けていただけませんでしょうか。。。
何卒よろしくお願いいたします。

AMP(Accelerated Mobile Pages)