WordPressでhttp://のサイトをhttps://(TTL化）する際の忘備録
Category : Web sight Design , WordPress
2018年春ごろから、どこからともなく「#https:// にしないとサイトとしてダメになるらしい」という噂がありました。
私の古い頭の中では「https://にするためには、オプションでWEBサーバーに毎月2～3万払わないといけないし、関係ないんじゃね？」
なんて考えていました。
ところが10月、私のメインで使っているWEBサーバーから、「#SSL/TTL の無償化」という案内がありました。
それでも「急がんでもいいだろう」という甘い考えがチラホラ（笑）
ところが、昨年末にかけて急にお客様から、「#WordPress #投稿 から#Facebook に#自動投稿ができなくなった」とか「#GoogleMapが表示されない」といった苦情が数件ありました。
「年が明けたら調整します」と答えて、年明けに色々調べてみた結果、以下のことが判明。
Facebookに自動投稿する際には、既存のhttp://からの投稿は原則禁止ととなりました。
引用元：ITmedia NEWS
米Facebookは2018年4月4日（現地時間）、先月発覚したデータ解析企業Cambridge Analytica（CA）による個人情報不正利用の再発防止策として、サードパーティ製アプリによるユーザーの個人情報アクセスを従来より制限すると発表した。
CAに不正利用された個人情報は、ケンブリッジ大学の教授がFacebookで公開したアプリで収集したものをFacebookのポリシーに違反して転売したものだった。Facebookによると、転売された個人情報は約8700万人分だったという。
Facebookは3月22日、開発者がアクセスできる個人情報を制限すると約束していた。
今回発表されたのは以下の9項目だ。
イベントの、アプリユーザー以外の参加者のリストと投稿情報へのアクセスができなくなる
ユーザーが主催あるいは参加を表明したプライベートなものを含むイベントの情報をアプリで収集できる「Event API」での制限。このAPIにより、カレンダーへのイベントの追加やチケット購入などが可能になる。
従来は、同じイベントに参加する他の参加者の情報と、全参加者によるイベントページへの投稿も収集できたが、これをできなくする。将来的にはAPIを利用するためには現在より厳格な要件への合意が必要になる。
Facebookグループのメンバーリストへのアクセスができなくなる
Facebookグループの管理者をサポートするアプリ向け「Group API」で、グループのメンバーリストへのアクセスができなくなる。また、現在アプリがアクセスできている、グループ内の投稿やコメントのメンバーの氏名やプロフィール写真などの個人情報を削除する。
Facebookページ用アプリでFacebookからの承認が必要に
Facebookページ上の投稿やコメントにアクセスする「Pages API」を利用するサードパーティアプリに、Facebookからの承認を義務付ける。
アプリインストール時にユーザーに求める情報の制限
すべてのアプリは、ユーザーに利用と引き換えに収集する情報（チェックイン、いいね！、写真、投稿、動画、イベント、グループなど）について、Facebookの承認が必要になる。Facebookは承認に当たり、従来より審査を厳格にする。
また、アプリが以下の個人情報を収集することを禁じる：宗教や政治観、交際ステータス、投稿を見る人のカスタム設定、学歴、職歴、フィットネス活動、読書履歴、音楽鑑賞履歴、ニュース既読履歴、動画視聴履歴、ゲームプレイ履歴など。
さらに、来週中に予告どおり過去3カ月にユーザーが利用しなかったアプリによるユーザー情報へのアクセスを停止する。
Instagram向けアプリでも制限
Facebook傘下のInstagramでも制限を強化する。アプリ開発者は、Instagramのフォロワーリスト、いいね！、公開コメントにアクセスするAPIを利用できなくなる（開発者向け詳細はこちら）。
電話番号とメールアドレスでのユーザー検索機能の終了
Facebookでは、ユーザーが電話番号とメールアドレスをプロフィールで公開している場合は、それらを入力することでユーザーを検索できた。同姓同名の多いユーザーを探すのに便利だったが、この機能を終了する。
悪意ある第三者がこの機能を、持っている電話番号リストを使ってユーザーの公開プロフィール情報を盗むのに利用していたためという。
通話およびSMS履歴情報の制限
「Facebook Messenger」および「Facebook Lite」のAndroid版はインストールする際、オプトインで端末での通話とSMSの履歴保存を承認するよう求めている。同社はこの機能でメッセージの内容を収集していないことを確認し、今後は1年以上前のすべての履歴を削除する。
ターゲティング広告サービス「パートナーカテゴリ」終了
これは3月29日に発表したもの。詳細は既存の記事を参照のこと。
ユーザー向けアプリ管理機能
4月9日からニュースフィードの上部にユーザーが使っているアプリのリストへのリンクを表示する。アプリリストでは、ユーザーは不要なアプリを簡単に削除できるという。また、CAに個人情報を不正利用された約8700万人に対して、利用されたことを通知する。
苦情が来るずっと以前の段階でダメだったのね(;’∀’)
重い腰を上げて作業を開始したのは、年の明けた2019年1月中旬。
最初に自分のサイト3つをhttps://化したところ、置換、リダイレクト、鍵マークの確認まで簡単にできました。
「なんだ、簡単じゃん」
「料金は3,000円は高いかも？」
なんて考えながら実際のお客様のサイトで確認。
「・・・・！！！ （えっ？）」
「なぜ？？」
理由は意外と簡単です。
自社サイトは、サイト設計やデザイン性は無視して、必実剛健なサイト、いわゆる情報でその分をカバーするという趣旨で作られたもので、完成まで30分でできるサイトばかりです。
しかしお客様のサイトでそういう類のサイトだとお金にならないので、凝ったことをいろいろやってます。
テーマのCSS変更は当たり前、プラグイン入れ放題、function.phpもいじり放題。
そりゃ、改変履歴を読み返すだけでも気が遠くなる作業です。
おまけに、初期のサイトは、素人Webデザイナーを教えながら、お金をもらって新人教育をしていたようなものです。
その時の新人Webデザイナーがなんとか一人でサイトデザインをできるようになって放置したのもいけなかった。
function.phpをいじって、PHP自体は構文エラーになってないけど、HTMLに構文エラーがあり、HTMLはエラーを吐き出してもソースを見るまでエラーを吐いているかチェックしてないものが多数存在。
「・・・・・はぁ～～～（涙）」
これはそもそものテーマのエラーなのか、何かしらの.phpからエラーを吐き出しているのかすらソースでは見分けがつきません。
Chromeの検証をしながら、原因を特定し、心当たりのあるHTML構文を片っ端にGREP検索（多ファイル同時検索）。
何とか原因は突き止めたものの、1サイトのhttps://化に丸2日かかってしまった。
以下は次回以降のチェック項目含めての忘備録です。（意味が半分もわかんない人は参考にしないでください。特にMySQLを知らないで直接触って壊しても知りませんよ）
STEP1
最初はWordPressの「設定画面」＞「一般」からWordPressアドレス（URL)のhtttp:// を https:// に変更する。
次の行のサイトアドレスも同じように htttp:// を https:// に変更する だけ。
最後に
を押し忘れないように。
成功すると、一旦強制ログアウトされます。再ログインしてください。
STEP2
次はできているはずのhttps://サイトを見てみます。
ドメイン直下からチェックします。
URLがhttps://になっているかどうかと、#鍵マーク （ 
)が付けばOKです。
一般的にはこうなりません。鍵が開いた状態で以下のような表示になります。
鍵マークの代わりに、丸に i の（ 
）#保護されていない通信 になります。
理由はたくさん考えられるので、順番にひとつづつ解決していきます。
原因をある程度特定しましょう。 にカーソルを合わせ、クリックします。
この表示の場合、html本体はhttps://にあります。
しかし、画像はhttp://の画像を使ってるから、画像が危険ですよというお知らせです。
なので画像をチェックして、差し替えればいいのです。
しかし、画像が多い場合は大変ですよね？
そこで、さすがWordPress。
こういうときのために、プラグインがあります。
STEP3
プラグインを新たに導入して一気に解決を図ります。
「#Serch Regex」というプラグインです。
何やら、ググってみると、「ワードプレス内の文字列を一括置換できる」とのことで、いろんなサイトを見てみると、「投稿、#コメント 、#固定ページ などいろんな変換ができます。」などと小気味のいいことが書いてあった。
これでサイト内の全てのhttp:// をhttps://に自動変換できそうです。
導入方法や有効化のあとの使い方などは、上記リンクで確認ください。
STEP4
ここで再度、ドメイントップページを確認します。
鍵マーク（ )が付いていればいいですね。
え？まだ、丸に i の（ ）保護されていない通信ですか？
焦らない、ひとつづつです。
STEP5
ブラウザ上の、ドメイン直下のページの、画像も文字もないところで右クリックします。
「#ページのソースを表示」をクリックすると、別タブでこのページのHTMLソースが吐き出されます。
そのソースタブでコントロールキーを押しながら「F」を押します。
検索ですね。（Ctrl＋F）
危険だといわれているのはhttp://の記述ですので、http://を検索します。
検索しては、WordPressの管理画面、固定ページ＞TOP頁の編集画面で画像を指定しなおす作業をします。
指定しなおしても、×印だったり、画像を表示しないのはおそらくキャッシュが効いているものと思います。
キャッシュクリアしながら作業するよりも、再度指定しなおすと2回目には表示されました。（私の環境の場合）
ここで、疑問が残ります。
「Serch Regex」は一体何をしたのだ？と
残念ながら、「Serch Regex」は投稿ページとコメントにしか対応していません。
そもそもMySQLの中のデータベースで、#投稿とコメントと固定ページ、プラグイン、テーマは各々別のテーブルに格納されています。
投稿ページとコメントだけでも一括置換出来てラッキーと思いましょう。
STEP6
ソースを見ながら全ての画像を差し替えできましたか？
固定ページには見えない、変換出来ない画像がある？
多分#Favicon ではないですか？
それはテーマの外観、カスタマイズからFaviconの変更を行わないといけません。
Faviconに限らず、テーマで画像のファイル名を指定したものや、画像そのものを貼り付けたものは、再度メディアから上書き追加する必要があります。
テーマで使用した画像は全て再指定の必要があります。
STEP7
テーマまで全て変更してもまだ 残っている方いますか？
次に怪しいのはプラグインです。
まず、#Light Room系 のプラグインは、アドレスの変更だけでいい場合が多いです。
次に、#Slider系 のプラグインは、画像全部を差し替えする必要が多いです。
STEP8
ここまできてもまだ鍵（ ）にならない方いますか？
ソース内の背景画像にhttp:// が残っている方？
CSSが怪しいですね。
テーマフォルダのCSSのある部分を全部FTPでダウンロードして、一括検索を書けます（#GREP検索）。
普通のテキストエディタ―には大抵実装されています。
検索のところに「#Grep」とあればそれです。
検索ワード： http://
検索する拡張子： *.css
検索場所： 任意のテーマフォルダー
で検索すると出てくると思います。
その際に、一番左が ファイル名（何行目） ●●:http://〇〇〇.jpg;
のような記述で結果が数十行表示されます。
全てをhttps:にすればいいかどうかはその下のドメインで判断してください。
編集が終わったら、保存してFTPで元の場所に上書きします。
STEP9
まさか、HTML本文のheader部分にスタイルシートが書き出されて、http://の記述が直接ソースに残っている方いませんか？
大抵の場合は、cssに変数を使って使いたい場合にあります。
テーマのincフォルダーの何かのphpの中で記述してありますので、前後の構文でGREP検索します。
本文のHTMLのCSSの記述に対し
本文HTML hedder内にダイレクトにCSSが記述されている場合
.background-fixed {
bckground: repeat top center fixed;
background-image: uri(http://none);
}テーマフォルダーのincフォルダー内（この場合 custmize.phpに記載）
.background-fixed {
bckground: repeat <?php echo esc_attr($top); ?> center fixed;
background-image: url(<?php echo esc_url(stainedglass_get_theme_mod('column_background_url')); ?>);
}まぁこんなところにまで変数使ってcssねじ込もうと考えるのね？ｗ
STEP10
MySQLの管理画面はブラウザですので検索はできても一括置換はできません。
ちまちまやるのも確実でいいですが、同じ内容のものが同じ時間に大量にできています。
これはリビジョンがあるためですが、リビジョンが多いと滅茶苦茶めんどうです。
なので、上記でみたように、固定ページの写真数が多い場合は、いっそのことMySQLの固定ページのテーブルをダウンロードして、一括置換したほうが早いです。
固定ページの記載されたURLや写真、動画などはDLから一括置換、UPロードまで、ものの1分で終わります。
STEP11
全てのページに鍵が付いたら、後は#.htaccess でリダイレクト処理をすれば完了です。
リダイレクト方法は #BEGIN WordPress の前に3行追加するだけです。
「00000000」があなたのドメイン
.jp（あなたのトップドメイン）と書きます。
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://0000000.jp/$1 [R=301,L]
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPressいかがでしたか？
意外とハードルの高いお仕事でした。
固定ページの少ない、テーマやプラグインなどに凝っていない方は、非常に簡単にTTL化（https://）にできます。
しかし、php触り放題、画像系プラグイン入れまくり、テーマ改変すごいことになってる方はご注意ください。
最初から作るより面倒くさいことになります。
なお、弊社では、当初3,000円～5,000円で請け負う予定でしたが、
価格を改変いたします。
https:への移行料金
| 基本料金 | 1ドメイン | 10,000円 |
| テーマ系画像/URL変更 | 変更1か所 | 500円 |
| プラグイン系画像/URL変更 | 変更1か所 | 800円 |
| CSS系画像/URL変更 | 変更1か所 | 1,000円 |
| プログラム系画像/URL変更 | 変更1か所 | 3,000円 |