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の構成サービスから話そう。

関連する構成サービス

ふむふむ。
マカイモン

 

わんぱ君
以降では、作業をやった順に話していくよ。

 

 

 

Value-Domain　の設定

わんぱ君
WANPA's STOREのWEBサーバは、Value-Domainのコアサーバを使っているんだ。

 

確か、前回のエントリでも話していたね。
マカイモン

 

わんぱ君
まずは、Web Server自体にSSLを導入する必要があるんだけど、今回はValue-Domainの無料SSLサービスを利用したんだ。

 

どうやって設定したの？
マカイモン

 

わんぱ君
折角なので、図を用いながら手順を話していくね。

 

 

 

わんぱ君
まずは、Value-Domainのコントロールパネルに行く。

そこで、サイト設定を選ぶんだ。

 

わんぱ君
そして、対象のサイトを選び、「サイト設定の変更」をクリックするんだ。

 

 

わんぱ君
最後に、SSLの設定部分を「しない」→「無料SSL」に変更して、「サイト設定を変更する」をクリックすれば完了だ！

 

 

お～、結構簡単だね！！
マカイモン

 

わんぱ君
そう思うでしょ？

でも無料SSLを設定後、実際にhttps://wanpa189.net/にアクセスしてみたら、こうなったんだ。

あれ。。。
マカイモン

 

わんぱ君
色々調べたけど、原因がわからなかったから、VALUE DOMAINのカスタマーサポートに問い合わせしたんだ。

 

うんうん。
マカイモン

 

わんぱ君
夜に問い合わせたんだけど、次の日の朝に返信があって、すぐに解決してもらえたよ。

なんでも、サーバー内部の反映処理が正常終了してなかった、とのことなんだ。

 

お～、解決して良かった！
マカイモン

 

 

WordPress　＆　AFFINGER5(WING)　の設定

わんぱ君
次に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」を使ったんだ。

 

おおっ、そんな便利そうなプラグインがあるんだ！
マカイモン

 

わんぱ君
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"]

  • Value-Domainの無料SSLを用いて、http://化を図った！
  • 「Really Simple SSL」を用いて、WordPressのSSL対応を行った！！
  • サイト内にhttp://の内部リンクがあると常時SSL対応にならないので要注意！！！
  • 皆さんもSSL対応にチャレンジしてみよう！！！！

[/st-cmemo]

 

 

おまけ

[st-kaiwa2 r]わんぱ君、いつの間にITに詳しくなったの？[/st-kaiwa2]

 

[st-kaiwa1]最近、勉強しているからね。

 

え、そうだったんの？
マカイモン

 

わんぱ君
僕のキャラクター紹介にもホラ。

いつの間にか、設定が追加されてる…
マカイモン

 

わんぱ君のキャラ紹介
【キャラクター紹介】わんぱ君

　　 「わんぱ君」は、WANPA WORLDシリーズの登場人物であり、主人公の男の子。   概要 わんぱ君はWANPA WORLDの住人であり、主人公の男の子。肉付きの良い体と色黒の肌、そし ...

続きを見る

 

-WANPA STORY, サイト情報, 技術ブログ
-, , , , , , ,

Copyright© WANPA's STORE , 2024 All Rights Reserved.