え！！Disqusならできるの！？ということで、
私のAMP対応なブログにもコメント欄を設けてみることにしました。

たぶん、下記URLでみれるはずっ
下にずずっとスクロールすると、Disqusで作ったコメント欄が確認できます。

【AMP版】GoogleのGuetzliを使って、GitLab CI上で画像圧縮をしてみた

おおおおおおおおお！！！！！
AMPでもちゃんとコメント欄が使えてる！！！！！！！！！！！！

というわけで、この感動を以下おっそわけです(*・ω・*)

Disqus公式のブログページのGitHubを参考にやっていきます。

DisqusをAMPページでも読み込むには？

まずは読込方法ですが、iframeを使って読み込むみたいです。
なので、初めにAMP用のamp-iframeスクリプトを<head>内で読み込みます。

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

次に実際にDisqusのコメントサービスを利用したい箇所に、amp-iframe要素を配置します。 上述のAMP導入手順には書いてませんが、amp-iframe要素の子要素は必須なのでdivタグを入れてます。

<amp-iframe width=600 height=140
            layout="responsive"
            sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms"
            resizable
            src="[Disqus用ファイル設置先URL]?shortname=[Disqusで設定したshortname]&url=[エンコード済の現在の記事URL]">
    <div overflow tabindex="0" role="button" aria-label="Read more"></div>
</amp-iframe>

上記の[]部分3箇所を自分の環境に合わせて設定してみてください。

(Hugoな私は、{{ .Permalink | htmlEscape }}で、
[エンコード済の現在の記事URL]を動的に読み込んでます。)

iframeでなにを読み込むの？

そして、[Disqus用ファイル設置先URL]ってなんぞ？って話ですね。

Disqusをamp-iframeで読み込ませるためには、
ブログとは別ドメインのSSL(https)対応サーバーにこんな感じのHTMLファイルを
置く必要があるとのこと。

・index.html

<div id="disqus_thread"></div>

<script>
    window.addEventListener('message', receiveMessage, false);
    function receiveMessage(event) {
        if (event.data) {
            var msg;
            try {
                msg = JSON.parse(event.data);
            } catch (err) {
                // Do nothing
            }
            if (!msg)
                return false;

            if (msg.name === 'resize') {
                window.parent.postMessage({
                    sentinel: 'amp',
                    type: 'embed-size',
                    height: msg.data.height
                }, '*');
            }
        }
    }

    var QueryString = function () {
        var query_string = {};
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (typeof query_string[pair[0]] === "undefined") {
                query_string[pair[0]] = decodeURIComponent(pair[1]);
            } else if (typeof query_string[pair[0]] === "string") {
                var arr = [query_string[pair[0]], decodeURIComponent(pair[1])];
                query_string[pair[0]] = arr;
            } else {
                query_string[pair[0]].push(decodeURIComponent(pair[1]));
            }
        }
        return query_string;
    }();

    var url = QueryString.url;
    var shortname = QueryString.shortname;

    var disqus_config = function () {
        this.page.url = url;
    };

    (function () {
        var d = document,
            s = d.createElement('script');
        s.src = '//' + shortname + '.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>

上記ファイルを適当なサーバーに置いて、
ブログのあるサーバーからiframeで読み込むんですねー

無料で別ドメインのSSL対応サイトを作るなら？

……………………

…………

ドメインとってSSL証明書もとってって、めっちゃめんどくさいやん(^0^;)

とならないように、Netlifyという公開サービスを使うと、
上記ファイルをドラッグアンドドロップで、3分もかからず設定完了なのでお試しあれ。

Disqus側での設定

最後に自分のDisqusサイト(https://[Disqusで設定したshortname].disqus.com/admin/settings/advanced/)内の、
『Advanced』->『Trusted Domain』に、先ほどの[Disqus用ファイル設置先URL]のドメイン名を追加すれば完成です！！

ちょこっと補足

Disqus公式ブログのAMP導入手順では、identifierも使ってますが、
基本ページURLだけ送ってあげれば、どのページのコメントなのか判断できるため不要です。

なので私は、index.html内のスクリプトでもshortnameとurlしか渡してません。

以上、私のAMPブログコメント対応の記録でしたっ

意外と簡単なので試してみると、たーのしー！！！！！！！
コメント欄は、AMPでの表示テストなどにご活用ください| |д・) ソォーッ