WANPA STORY 技術ブログ サイト情報
【WANPA STORY】【第15話】SSL対応のやり方（Value-Domain/WordPress/AFFINGER5(WING)）
前回のおさらい
わんぱ君
さて、前回のエントリの続きで、今回はWANPA's STOREをSSL対応したときのやり方について話すよ！
SSL対応の経緯や動機は前回のエントリを見てね！！
マカイモン
-
-
【WANPA STORY】【第14話】サイトをSSL対応しました
サイトのSSL対応（Secure Sockets Layer） わんぱ君さて、今回もWANPA's STOREのサイトについてのトピックスだよ。 具体的には何のトピックスな ...
続きを見る
関連する構成サービス
わんぱ君
早速、SSL対応に際して、実際にやったことを話そう！
マカイモン
わんぱ君
まずは前提として、関連するWANPA's STOREの構成サービスから話そう。
マカイモン
わんぱ君
わんぱ君
マカイモン
わんぱ君
まずは、Web Server自体にSSLを導入する必要があるんだけど、今回は
Value-Domainの無料SSLサービスを利用したんだ。
マカイモン
わんぱ君
わんぱ君
まずは、Value-Domainのコントロールパネルに行く。
そこで、サイト設定を選ぶんだ。
わんぱ君
そして、対象のサイトを選び、「サイト設定の変更」をクリックするんだ。
わんぱ君
最後に、SSLの設定部分を「しない」→「無料SSL」に変更して、「サイト設定を変更する」をクリックすれば完了だ！
マカイモン
わんぱ君
そう思うでしょ？
でも無料SSLを設定後、実際にhttps://wanpa189.net/にアクセスしてみたら、こうなったんだ。
マカイモン
わんぱ君
色々調べたけど、原因がわからなかったから、VALUE DOMAINのカスタマーサポートに問い合わせしたんだ。
マカイモン
わんぱ君
夜に問い合わせたんだけど、次の日の朝に返信があって、すぐに解決してもらえたよ。
なんでも、サーバー内部の反映処理が正常終了してなかった、とのことなんだ。
マカイモン
わんぱ君
次にWordPress側の設定が必要だ。
WANPA's STOREでは、WordPressのテーマとしてAFFINGER5(WING)を使っているんだよ。
WordPress側の設定って何が必要なの？
先ほど、サーバ側にSSLを設定しただけじゃダメなの？
マカイモン
わんぱ君
そうだね。
例えば、サイト内に自分自身のサイトへのリンクや、画像リンクがあるとするでしょ。
マカイモン
わんぱ君
そのリンクが元の「http://wanpa189.net/...」になっていたりすると、常時SSLとは言えなくなるんだ。
全部、「https://wanpa189.net/...」に書き換える必要があるんだ。
お～、なるほど。わかりやすい例だね。
「http://」を軒並み「https://」に書き換えなきゃいけなさそうだ。
マカイモン
わんぱ君
他にも、外部から「http://wanpa189.net/」でアクセスされたときに、「https://wanpa189.net/」でリダイレクトする仕組みが必要になったりだね。
こんな感じで、いくつかやることがあるんだ。
マカイモン
わんぱ君
マカイモン
わんぱ君
WordPressの管理画面からプラグインを選択し、「Really Simple SSL」で検索しよう。
そして、対象をダウンロードし、有効化すれば完了だ。
ダウンロードして、インストールして有効化するだけなんだ。
簡単そうだね！
マカイモン
わんぱ君
…そのはずなんだけど、有効化後にサイトにアクセスしてみると「完全には保護されていません」と出てしまったんだ。
えっ？「https://」でアクセスしているのに？？
マカイモン
わんぱ君
そうなんだよね。Really Simple SSLも有効化したはずなのに。
マカイモン
わんぱ君
F12で開ける開発者ツールを見ると、こんなエラーが出ていたんだ。
マカイモン
わんぱ君
カンタンに言うと、サイトのヘッダのロゴの背景のURL指定が「http://」のままになっていたんだね。
マカイモン
わんぱ君
どうにかしてヘッダ部分の背景のURL指定を「http://」から「https://」に変更しなくちゃいけない。
マカイモン
わんぱ君
おそらくは管理画面の「外観」＞「カスタマイズ」で、この部分のURL指定を修正できるはずなのだけど。
結局どこから修正できるかわからなかったんだよね。。。
マカイモン
ヘッダ部分の背景画像の修正
現在のサイトをみると、きちんと常時SSL接続になっているみたいだ。
どうやって、ヘッダ背景のURLを修正したの？
マカイモン
わんぱ君
WordPressのスキーマに直接UPDATE文を打ったんだ。
うわ～… mysqlの管理画面だぁ。
なかなか目にしない光景だね。。。
マカイモン
わんぱ君
ソースを見たら、「st_header_image」というところから背景画像を取得していたようなので、多分DBで定義されているだろうなと予想して、ここにたどり着いたんだよね。
マカイモン
わんぱ君
正直なところ、直接UPDATE文を実行するのはやめたほうがいいね。
誤った個所を更新してしまうと、ブログのデータが破壊されてしまう恐れもあるんだ。
相当な覚悟がいるので、よい子の皆は真似しないでね！
マカイモン
わんぱ君
正規のヘッダ部分の背景画像の変更方法がわかる方いたら、教えていただけると幸いです！！
これ以上、直接UPDATE文を発行しないためにも何卒よろしくお願いします！！
マカイモン
常時SSL化が完了！
わんぱ君
これでようやく、サイトの常時SSL化が完了したんだよ。
マカイモン
わんぱ君
ほら、「https://」でアクセスできるし、URLの部分に鍵のマークがついている！
マカイモン
わんぱ君
SSL対応の話はここまでかな。
「カンタンに」とはいかないけれども、SSL対応に二の足を踏んでいる人はチャレンジしてみてね！！
マカイモン
他にやること
わんぱ君
ちなみに、他にもやることがあって、URLが「https://」に変更になったことに伴い、Google Search ConsoleとGoogle Analyticsの再設定が必要なったんだ。
マカイモン
わんぱ君
更に、WANPA's STOREの場合は、FLASHゲームに仕込んでいた「うちのこ」（＝対象サイト以外では実行できないるようするスクリプト）が、「http://」で実行するような設定にしていたため、一律プレイできなくなってしまったんだ。
マカイモン
わんぱ君
マカイモン
わんぱ君
なので、今はGoogle Search Consoleで通知されるAMPエラーに順次対応していっているよ。
AMPって何？
Accelerated Mobile Pages の略。
モバイル端末でウェブページを高速に表示させるための手法によって作成されているコンテンツのこと。
Googleが推進している。
マカイモン
わんぱ君
今回のエントリが長くなってきたから、AMP対応の話は、次回以降に気が向いたらするね。
うん、わかった。
今日は色々と話してくれてありがとう！！
マカイモン
わんぱ君
マカイモン
わんぱ君
…というわけで、繰り返しになるけれども、
SSL対応に二の足を踏んでいる人は是非チャレンジしてみてね！！[/st-kaiwa1]
おしまい
まとめ
[st-cmemo fontawesome="fa-lightbulb-o" iconcolor="#FFA726" bgcolor="#FFF3E0" color="#000000" iconsize="100"]
[/st-cmemo]
おまけ
[st-kaiwa2 r]わんぱ君、いつの間にITに詳しくなったの？[/st-kaiwa2]
[st-kaiwa1]最近、勉強しているからね。
マカイモン
わんぱ君
マカイモン
わんぱ君のキャラ紹介
-
-
【キャラクター紹介】わんぱ君
「わんぱ君」は、WANPA WORLDシリーズの登場人物であり、主人公の男の子。 概要 わんぱ君はWANPA WORLDの住人であり、主人公の男の子。肉付きの良い体と色黒の肌、そしてお腹の星が特 ...
続きを見る
-
-
WANPA ATAYU
本業はITディレクター。
ポケモンGO：GBL最高世界2位・日本1位 / PJCS本戦出場。
YouTube：「わんぱチャンネル」にて、毎日22時頃からライブ配信中。
-WANPA STORY, 技術ブログ, サイト情報
-AFFINGER5, SSL対応, https化, VALUE DOMAIN, AMP対応, Really Simple SSL, mysql, WING
