HTML・CSS：http://とhttps://の違い・https化の方法【WordPress＆Xserver】

http://とhttps://とは

http://とhttps://はスキームと呼ばれる、データを送受信する通信方式を表しています。インターネットの通信は、端末とサーバー間のデータ通信のやり取りが発生しています。その際の通信方式を定めているのがhttpとhttpsになります。

上の画像はhttpプロトコルの通信の図ですが、1度の通信にこれだけの情報が含まれています。

http://とhttps://の違い

http://とhttps://の違いは、通信内容が暗号化されるかされないかです。暗号化、つまり送信内容を別の何かに置き換え置き換えして行って分からなくする方法なのですが、この暗号化をされた状態で通信できるのがhttps://になります。暗号化をされると、通信の内容を盗聴しようとしても解読が難しくなるため、パスワードなどの重要な情報をやり取りする際により安全・安心になります。
また、ブログなどパスワードを入力をすることのないHPを運営している人でも、https化をするとSEO対策的にも評価が上がるため、もし何かHPを運営していてhttps化をしていない人・これからHPの運営を始めようと思っている人は早めにhttps化することをお勧めします。
ちなみにhttpのままだと、こんな感じで安全ではありませんという警告文が出されて若干不快な思いをすることになりますｗ

https化について

https化の大変さと被害w

いちもんじがこのHPを立ち上げた当初普通にhttpで運営を始めてしまったが為に、記事とかめちゃくちゃある中で途中からURLが変わるということになってしまい、ちょっとした手続きが必要になってしまいました…。この作業、本当に人によっては地獄のような作業になってしまうと思いますので、もしもやるなら本当に早めにが良いと思います。
主にこれらの作業が地獄（被害ｗ）だと思われます↓

例えば自分のHP内で自分のページをリンクしていて（内部リンク）なおかつそれを絶対パス（URL）で設定している人の場合、内部リンクの修正作業をしなければなりません。し、後述しますがリダイレクトの設定も鬼のような量になってしまいます。もしも外部リンクが多いサイトであれば、リダイレクトさせたいページも増えるでしょう。となると、その設定も１から全部ということになります。HPの年数が長くて記事もめちゃくちゃ多いよって人は本当にトホホ…ですよね。
内部リンクに関して、ワードプレスであればプラグインでURLを一気に書き換えると言ったものも存在するようです。（なぜかいちもんじは勝手に内部リンクが書き換わっていて内部リンクに関しては何も作業していない）

https化の手順

サーバー側でhttps化の設定をする

私が使っているサーバーはxserverなのですが、こちらは簡単にhttps化をすることが可能でした。

SSL設定を開く→ドメインを選択し変更を押す

ドメイン名はhttps化させたいものを選択します。（っていうか全部した方が良い）

ONにする

変更を選んだあとONにするを選択すると、少し時間が経ち「独自SSL設定をONにしました。」という文章が表示されます。

WordPressの設定からhttpsへとURLを変更する

サーバー側でhttps化の設定が出来たら、今度はWordPress側の設定を変更しなければなりません。Wordpressの「設定」→「一般設定」の中にあるWordpressアドレスとサイトアドレスの両方をhttps://～へと変更しなければなりません。

なお、この際設定（入力）を間違えてしまうとログインができなくなったりと大変なことになってしまいますので、絶対に間違えないようにしてください。

サーバー側でリダイレクト設定を追加する

サーバー側、この場合Xserver側ですが、こちらでリダイレクトの設定をする必要があります。というのもhttpとhttpsの両方が存在しているということは、２つのHPが存在しているということになります。しかも同じ内容なので、最悪の場合https化しているHPの方がミラーリングしていると判断され、アドセンスで広告を貼っているならもしかしたらペナルティを喰らうかも知れませんし、検索の順位もページの評価も下がってしまいかねません。
…というのを未前に防ぐため、httpへのアクセスがあった場合強制的にhttpsの方へと転送するという手続きを取ることによってページの評価を下げることもなく、しかもユーザーは安全にHPを利用することが出来るということです。

リダイレクトの設定方法

Xserverのリダイレクト設定変更

リダイレクトの方法にはいくつかあり、１つはリダイレクト設定から１つ１つページを指定してリダイレクトさせる方法。そしてもう１つは.htaccessファイルにリダイレクトをさせる設定を追記する方法です。

ただ、リダイレクト設定の方から設定をしたところ「複数のリダイレクトが行われました」のようなエラー文が表示されてしまい、cookieの削除をすれば良いなどの記事を見てその通りにしたのですがどうしても上手くいきませんでした。（今思えばもう一つの方法で既にリダイレクト設定を済ませていたためかも知れません）
しかもこの登録作業がかなり面倒で、このページに飛んで来たらこのページに飛ばす、このページに飛んで来たらこのページに飛ばす…みたいな設定を１つ１つページごとに行わねばならず、途中でhttps化する人にとっては地獄のような作業が待っていると思います。（まあ私のHPは外部リンクなんてほとんどが自前なので自己修正も余裕で可能だったのですが）

とりあえずリダイレクト設定の方法の手順を書いておきます。

サイト転送設定を選択→リダイレクトさせたいドメインを「選択する」

サイトの管理画面にあるサイト転送設定をクリックし、リダイレクト設定をしたいドメインを選択しましょう。

リダイレクト設定追加タブに切り替える→リダイレクト元のURLと先のURLを指定

まずはリダイレクト設定追加タブに切り替え、アドレスの欄にリダイレクト元となるURLを入力し、リダイレクト先にはリダイレクトさせたいURLを書きましょう。そして確認画面へ進んでください。

.htaccessファイルの設定の変更

…ということもあって、慎重に触らないといけないと言われている.htaccessファイルに触れることになりました。.htaccessファイルというのはHPを運営する上でかなりとても大事なファイルであり、例えばIPアドレスでアクセスを弾いたり、それこそリダイレクトの設定をしたり、wwwを付けるか付けないか１本にすることが出来たりと間違って変なことをしたらとんでもねえことになるファイルです（アクセスできなくなる）。というわけで、やらかした時用にバックアップを取っておき、追加すべき文章をデータの１番上に追加しました。

手順を１から説明したいと思います。

このような手順で編集対象の右斜め下にテキストボックスが表示されたら、まずはメモ帳か何かに内容を全てコピペしておきます。（何かあった時にすぐに元に戻せるように）その後一番上をエンターキーで改行して書き込めるスペースをあけたらこれをコピペしてください。

RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

命令文の１つ１つに意味があります。
RewriteEngine Onでmod_rewrite（URL書き換えエンジン）を有効にする。
RewriteCond %{HTTPS} !onでリダイレクトする際の条件を提示しています。この場合はhttpsではない場合、という意味を持っています。
そしてRewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]でこういう感じでリダイレクトします！と命令しています。最後の [R=301,L]の部分はHTTPからHTTPSへの永久的なリダイレクトを意味していて、もしもこれが[R,L]になると一時的なリダイレクトを意味するようになります。ここでしっかりと301を付けることによってホームページの評価がhttpsの方に流れるようになります。

（ちなみにこの文章というかコードはXserverの公式から引用しているものなので、いちもんじなんて信用できるかい！！って人はそちらを調べてみると良いかも知れません。）

Googleサーチコンソールに新規登録・旧プロパティでURLの変更

Googleサーチコンソールには、https化する前のものを登録している場合とそうでない場合があると思います。私の場合は登録していたので、httpsの分も同じ人物が登録しているものだよ～ということを証明しなければならないので、その設定をすることになりました。

コンソールの旧プロパティから、左のメニューの下の方にある歯車マーク（設定）でアドレス変更を選択し、新しいサイトを選択→プロパティを追加でその作業を終えました。

↑グーグルサーチコンソールさんにもこのように書いてあるので、両方のサイトの（httpとhttps）所有者であるようにしておきましょう。