Milkのメモ帳

日々の思いつきを忘れないようにのメモ用です。

Milkのメモ帳

【はてな】内部リンクを一括でHTTPからHTTPSに変換する方法


f:id:maxminkun:20171001051939p:plain

こんにちは。Milkです。
chromeのVer62からHTTPへの対応が厳しくなります。

今現在、ブラウザの利用率としてchromeはトップシェアを占めています。

このchromeのバージョン62から、HTTPSに対応していないサイトには警告が出ることになりました。

「はてなブログ」自体がHTTPSに対応してもらわなければ、これは回避が出来ません。

「HTTPS」とは何?という方は、以下を参考にしていただければと思います。

www.milkmemo.com

これに関しては、「はてな」も対応を順次段階的に行っていくと発表しています。

staff.hatenablog.com

はてなの記事よりもこちらの方がまとめられているので、リンクを張りますね。

itpro.nikkeibp.co.jp

「混在コンテンツ(Mixed Content)」

「混在コンテンツ(Mixed Content)」と言う問題があります。

これは画像などのリンクを貼る時に、画像の参照先が「http://〜」の形であると、chromeは読み込みませんよ。

と言う話です。

例として挙げられていたのは、以下のような場合です。

<img src="http://...">

@import url('http://...' .....

<script src="http://..." ...>

多くの方がこれを懸念しておられるでしょう。

残念ながら、直接にリンクの場合はリンク先が対応しないといけないので、こちらが手を出せる範疇ではありません。

しかし、画像を埋め込む時に「写真を投稿」や「googleフォト」の機能を使っている場合はどうなのでしょう?

「はてな」の機能を使って画像を埋め込むとどうなるの?

自分の記事を抜粋してみました。

<!-- 「写真を投稿」の機能 -->
<img src="https://cdn-ak.f.st-hatena.com/images/fotol・・・">

<!-- 「googleフォト」の機能 -->
<img class="magnifiable" src="https://lh3.googleuserc・・・">

どうやら、「はてなフォトライフ」経由と「googleフォト」経由では、HTTPSに対応しているようです。

少し気になるのは、その前後に

<span itemtype="http://schema.org/Photograph" itemscope="itemscope">
・・・
</span>

となっていることです。<span>は一つの範囲として定義するのに使われますが、なにやら読み込んでいますね。

これが問題になるかどうかは、今のところ分かりません。

他に注意すること

テーマのCSS自体が「http://・・・.css」として内容を読み込んでいる場合があります。

テーマのCSSについては以下の記事で解説しています。

www.milkmemo.com

ですから、テーマのCSSもHTTPS対応をしてもらうしかないですね。

そうでないと、「混在コンテンツ(Mixed Content)」として扱われる可能性があると思います。

内部リンクエラーを解消する

もう一つ問題になるのは、「内部リンクエラー」になります。

記事の中にリンクを貼った場合、そこへ行こうとすると「http://・・・」だったものが、「https://・・・」に変更されURLが異なるので表示できません。

一番直結しやすいのは、「自分の記事のリンクを貼っている」場合です。

自動的に全ての記事のURLがhttps始まりに変更されますが、過去の記事の内容を「はてな」がメンテナンスすることはなさそうです。

つまり、記事の中のリンクは「http://・・・」の状態で放置され、リンクエラーになる可能性があります。

追記:この部分ですが、他のサイトは「http://」は「https://」のページが存在すると、自動的にそちらに変換してアクセスするようです。なので、内部リンクエラーが必ずしも発生することにはならないかも?しれません。

しかし、「はてなブログ」がそれに対応しているかは・・・実際に変更が行われないと、なんとも・・・

インポート&エクスポート機能を使う

実は、「はてなブログ」には記事の内容をエクスポート(出力)する機能があります。

また、それをインポート(入力)する機能もあります。

 エクスポートを行う

先ずは記事をエクスポートしましょう。

  • 「設定」-「詳細設定」-「エクスポート」

で「記事のバックアップと製本サービス」をクリックします。

かなり下の方にありますので見逃さないで下さいね。

この画面では記事を全てエクスポート出来ます。

「エクスポート」の機能がありますので、これを選択します。

f:id:maxminkun:20171001062336p:plain


これで、データファイルが準備されますので、「ダウンロード」を選択します。

f:id:maxminkun:20171001062555p:plain


エディターで一括変換

どのエディターを利用しても良いのですが、私は「VS Code」を利用しているので、これで説明します。

code.visualstudio.com

こちらは、ダウンロードしたファイルを開いた状態です。

f:id:maxminkun:20171001063019p:plain


自分の記事のリンクを「http://・・・」から「https://・・・」に変換したいわけです。

ここで「置換」機能を使います。単語を置き換える機能です。

  • 「メニュー」-「編集」-「置換」

を選択すると、以下のような画面が出てきます。

f:id:maxminkun:20171001063428p:plain


上部が「検索対象」で、下部が「置き換える単語」になります。

例えば私の場合はこのようにします。

f:id:maxminkun:20171001063753p:plain


f:id:maxminkun:20171001064040p:plain


一つ一つ確かめながら置き換えたいなら、青い部分を押してください。

一括で全部置き換えたいなら、赤い部分を押してください。

これで自分の記事のリンクは「https://・・・」に置き換えられることになります。

置き換え後に保存を行ってください。(別名で保存することをお勧めします。)

インポートする

最後にインポートです。

残念ですが、記事は一旦全て削除しましょう。

そのままインポートをすると、記事が二重になってしまいます。

f:id:maxminkun:20171001070130p:plain


インポートは管理画面の「インポート」で行います。

f:id:maxminkun:20171001064933p:plain


「ブログデータをアップロード」では、先程修正したファイルを選択します。

そして、「文字コードの選択へ進む」を押します。

f:id:maxminkun:20171001065306p:plain


恐らくは「UTF-8」で問題ないと思いますが、文字化けしている場合は他の綺麗に読める文字コードを選択しましょう。

後は、「インポート」を選択するだけです。

f:id:maxminkun:20171001065526p:plain


ただしくインポート出来ていることが確認出来ますね!

f:id:maxminkun:20171001070428p:plain

デメリット

一つデメリットがあります。

エクスポートした時点のブログのデータは、内部がHTMLのフォーマットに近いものになっています。

よってインポートすると、HTMLをそのまま入れ込むような形になるので、編集が「見たままモード」になります。

f:id:maxminkun:20171001070852p:plain


自分はMarkdown記法を使っているので、かなり残念です・・・

最後に

さて、今回ご紹介した内容は、あくまで「はてなブログ」がHTTPSに対応完了した場合に必要なことです。

良いのか悪いのか?まだ時間はあります。(2017/10/01時点)

それまでは、サブのブログを仮に作ってみて、メインブログのデータを流し込んで見るのはどうでしょうか。

また上手く行けば、記事の編集をエクスポートしたデータ上でしてしまうことも出来ます。

サブブログなら何度でも試せるので、大体の流れがつかめると思います。

それでは今回はこの辺で。

adios!!