IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / はてなブログ / はてなブログの HTTPS 化は大変だ(涙)

はてなブログの HTTPS 化は大変だ(涙)

2018/07/6 はてなブログ

はてなブログの HTTPS 化は大変だ(涙)

はてなブログも昨年末から HTTPS 配信が可能になり、独自ドメインでも今年6月に可能になりました。

独自ドメインで運用されているブログが、HTTPSで配信できるようになりました – はてなブログ開発ブログ

私の場合、独自ドメインで運用しているブログは2つあり、まずは別ブログ「そんなには褒めないよ。映画評」からです。

と始めたのですが、最初に、記事タイトルにした大変なこと(になりそうなこと)を書いておきます。YouTube の予告編が 319記事で表示されません!

  • Youtube の予告編が表示されない
    • YouTube のアドレスを https に書き換えてみると
    • 記事や html ソースを見てみると
    • はてなブログで YouTube を貼り付けると
  • Javascript で書き換えてしのぐ
  • upgrade-insecure-requests を指定する
  • 移行自体は簡単
    • HTTPS サイトを Search Console に登録

Youtube の予告編が表示されない

「そんなには褒めないよ。映画評」は映画評のブログですので、Youtube から予告編を引用している記事があります。

こんな感じで表示されません。YouTube のアドレスが Mixed Content と表示されています。

YouTube のアドレスを https に書き換えてみると

表示されます。

記事や html ソースを見てみると

[http://www.youtube.com/watch?v=psENlGLDuII:movie]

記事はこうなっています。

<iframe width="420" height="315" src="http://www.youtube.com/embed/psENlGLDuII?wmode=transparent" frameborder="0" allowfullscreen></iframe>

htmlソースはこうなっています。

じゃあ、記事の http を https に変えてみればいけるんじゃないの?と思い、やってみましたが、これがダメなんです。記事で https にしても「はてな」が http に書き換えてしまうんです。

日記で動画ファイルの再生プレーヤーを表示する(http記法) – はてなダイアリーのヘルプ

これですかね。深く追求するのも面倒なので憶測ですが、はてなダイアリー当時の記事だからでしょう。

はてなブログで YouTube を貼り付けると

<iframe width="560" height="315" frameborder="0" allowfullscreen="" src="//www.youtube.com/embed/psENlGLDuII"></iframe><br><a href="https://youtube.com/watch?v=psENlGLDuII">映画『聖者の午後』予告編</a>

はてなブログではどうなるか見てみますと、記事の段階でどの編集方法を使っても、上のコードが挿入されます。

ということで、YouTube の引用を張り替えればいいということなんですが、その数が半端じゃないんですよ。ダウンロードしたファイルで検索してみましたら、何と http://www.youtube が 319個もヒットしました!

Javascript で書き換えてしのぐ

徐々に書き換えていくことにして、とりあえずは Javascript で書き換えてしのぐことにします。

<script>
(function(){
    var elements = document.getElementsByTagName('iframe');
    Array.prototype.forEach.call(elements, function(element) {
        var s = element.src;
        if (s.indexOf('http:\/\/www\.youtube') !== -1) {
            element.src = s.replace('http:', '');
            element.setAttribute('width', '560');
        }
    });
}());
</script>

これで表示はされますが、ドキュメントを読み込んだ時に評価されますので、Mixed Content のエラーは出ます。

upgrade-insecure-requests を指定する

と、あれこれやっているうちに upgrade-insecure-requests を指定すれば、自動的に https で読みに行くらしいということが「はてなのヘルプ」にもありますね。

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

を「headに要素を追加」に追加すればいいらしく、ああ、確かに表示されます。

まず、ヘルプを読め!ですね(笑)。ただ、対応していないブラウザがあるとあります。

Can I use… Support tables for HTML5, CSS3, etc

せっかくコードを書きましたのでそのままにしておきます(笑)。

移行自体は簡単

移行方法は、はてなのヘルプにありますし、ググればたくさんヒットします。

help.hatenablog.com

移行自体は簡単ですが、事前に、移行するブログの記事をエクスポートして、別ブログを「自分のみ」の公開設定で立ち上げてインポートしチェックしたほうがいいですね。

HTTPS サイトを Search Console に登録

  1. Search Console にログイン
  2. 右上の プロパティを追加 をクリックし、HTTPS サイトを追加する
  3. 別の方法 > HTMLタグ をクリックして表示される content="*****" の文字列をコピーする
  4. はてなブログの 設定 > 詳細設定 > 解析ツール の Search Console の枠内に入力し保存する
  5. Search Console の 確認 をクリックする

問題なければ認証されます。

移行後、やるべきことはこれくらいでしょうか。

April 2018 Update ネットワークコンピュータが表示されない
はてなブログ HTTPS化後の wwwなしリダイレクト
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/03/27

WordPress:Fetch(Ajax)でお問い合わせフォーム(プラグインなし)

2023/03/21

WordPress:メール送信にGmailのSMTPを使う(プラグインなし)

2023/03/10

WordPress:サムネイル付き次の記事/前の記事

2023/02/28

Twitterシェアリンクはintent/tweetを使おう

2023/02/21

GoogleタグマネージャーとアナリティクスGA4

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips109
  • javascript98
  • Joomla!88
  • Windows68
  • Wordpress66
  • CSS63
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google34
  • Plamo33
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • ConoHa WING6
  • Git入門6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Blankslate3
  • Docker3
  • Twitter2
  • GitHub2
  • Mactype2
  • はてなブクマ1
  • 映画1
  • youtube1
  • rails入門1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com