【常時SSL化】カエレバのリンク画像をsearch regexで置き換える方法

世のウェブサイトは常時SSL化の方向に向かっていますよね。

Googleさんも、SSL化したサイトの方を重要視するといっていますし、重い腰をあげて「へんもぶろぐ」のSSL化対応に取り組んでみました。

※SSLとは(通信するときに情報がすべて暗号化され、外部から情報を盗まれないようになります。SSL化したサイトはアドレスのところに鍵マークがついていてhttp｢s｣://というsがついたアドレスになっています。サイトを見る環境によっては「保護された通信」なんて表示があります。)

鍵マークがついていることで、安全なサイトであることの一定の保証になるというわけですね。

へんもぶろぐSSL化への道

何をどうしたか詳しく解説するだけの知識が無いので、備忘録程度にSSL化への道のりを書いておきます。

何言ってるのかわからない方は読み飛ばしてください。

1. エックスサーバーで独自SSL(secure core)の申し込みをする。
2. サーバーパネル内から申請用のwebメールアカウントの新規作成。
3. ドメインにwww付きと無しの両方で申請。
4. CSR 情報(名前とか住所とか)[SSL 証明書申請情報]入力。
5. 申請許可メールが2で作ったメールアドレスに来る。
6. 30分ほど待機(この間｢https://henmo.net｣でアクセスすると｢安全な接続じゃありません｣とでる。)
7. 時間がたったらhttps://henmo.netにアクセスできるようになる。
8. エックスサーバーのサーバーパネル内.htaccessに301リダイレクトのコードを書き足す。(もともとのhttp://のアドレスにアクセスしてきた人をhttps://のサイトに移動させるため。)
   

   <IfModule mod_rewrite.c>
   RewriteEngine On
   RewriteCond %{HTTPS} off
   RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] </IfModule>

9. http://henmo.netへのアクセスがhttps://henmo.netにとぶようになる。
10. 内部リンクの修正(search regexプラグインでhttp://henmo.netを//henmo.netと相対リンクにかえる。)
11. ストークテーマ内CTAやウィジェットで設定したリンクは修正できないので個別に//henmo.netと書き換え。
12. トップページの｢へんもぶろぐ｣ロゴをhttps://のurlに再アップロード。
13. グーグルアナリティクスの設定でhttp://からhttps://に変更。
14. サーチコンソールも新しくhttps://のアドレスで申請。サイトマップも新しく送信。
15. 各記事内、外部から読み込んでいるhttp://アドレスの画像がSSL化を邪魔しているのでこれを修正。
16. google chromeプラグイン｢Get Tabinfo｣でとった外部リンクの画像に対してエラーが出るので手入力で修正。投稿記事内からGet Tabinfoのコードに入っている｢share｣という単語を検索し1個ずつテキストでの外部リンクに修正。
17. カエレバで取得したamazonの画像に対しエラーがでるので修正。(←今ここ(>_<))
18. あとは｢へんもぶろぐ｣以前に書いていた前のブログから引っ越してきた記事の画像が外部から引き込んでいる状態なので画像をhenmo.net内に再アップロードしてリライト。
19. へんもぶろぐ常時SSL化完了!!

となるはず。

まだ完璧ではないですが9割がた終わったと思われるのでやったことを忘れないようにメモ。

この記事では多くの方が関わってくるであろう｢17｣のカエレバの画像変換についてまとめます。

多くのブロガーがお世話になっているであろう「かん吉さん」の作ったブックマークレット「カエレバ」ですが、過去のカエレバで作ったコードはhttp://のamazonから画像を引っ張っているので、http://ではじまる画像がサイトをSSL化するのに邪魔してしまう状態になってしまいます。

これを一気に修正する方法です。

最初にプラグインsearch regexをインストール

この｢search regex｣というプラグインはサイト内の指定した文字列を検索し、それをすべて一括で置き換えることができるプラグインです。

たとえばブログの記事内に書かれた「私」という単語を「俺」に換えたくなった時。

「私」を入力してサーチすると、私の書かれた部分が抽出されます。

それをすべて置き換えると、全記事内の「私」は全部「俺」に変換されます。

ちょうどこの記事で紹介している検索→置き換えと同じ状態ですね。

関連記事Macのテキストエディットで｢置換｣を使って狙った文字を全部一括で変換する方法

2021.10.02

文章中には「私信」とか「私事」など「私」という言葉を使っているものも｢俺信｣や｢俺事｣みたいに変わっちゃうので要注意。

カエレバの画像をSSL対応の画像に入れ替える方法

さて、amazonから読み込んでいるカエレバの画像もこの方法で変換してみましょう。

現在のカエレバの画像はSSL対応画像かどうか選択できるようになっていますが、古いカエレバで生成した画像はhttp://のままになっています。

これを1記事ずつ探して修正するとなると本当に気の遠くなる作業ですね。

そこで｢search regex｣を使って一括変換してしまいましょう。

１.serch regexで｢http://ecx.images-amazon.com｣を検索

Sourseは｢Post content｣を選択。

Limit toはNo limit(全記事を対象とします。10とかにすると10個のみ変換など上限を決めて変換できるので一気にやるのが怖い方は数値をいれてやってみてください。)

Order byは抽出した単語を昇順表示か降順表示かを選べます。

｢Search pattern｣という欄に｢http://ecx.images-amazon.com｣をペーストします。

▼青い｢Search｣を押すと記事内の｢http://ecx.images-amazon.com｣というamazonから画像を引っ張っているコードがでてきます。

このコードが使われている部分が表示されます。

2．Replace Patternの場所に「https://images-fe.ssl-images-amazon.com」を入力。

▼｢Replace pattern｣に｢https://images-fe.ssl-images-amazon.com｣を入力します。

｢Replace｣を押すと置き換え後どうなるかが表示されます。

3．Replace&Saveを押す。

｢Replace&Save｣を押すと特に確認画面などはなく、一気にすべて書き換わります。

コードが間違っていても無慈悲にすべて置き換わってしまうので、バックアップをとってから作業するようにしましょう。

ぼくはコードをコピーしたときにimages-fe.ssl-images-amazon.comの後ろにいれたつもりのない謎のスペースが入っていて、サイト全体のカエレバの写真がおかしくなって冷や汗もんでした（泣

理由がわからず半泣きになりながら何がおかしいのか検証して、置き換えを繰り返し無事復旧しました。

Search regexで一瞬でSSL対応。

ブログをSSL化するのをためらっている方もおられると思いますが、外部からの画像引用が少ない場合は結構あっという間に変換できました。

これを使って他にも内部リンクや画像がhttp://henmo.net〜となっているのを//henmo.net〜という形にかえることで、記事のリンクや画像のURLが一気にhttps://対応になるなど、SSL化するときに非常に役に立つブラグインです。

ただ、Search regexで間違って変換したらかなり泣きそうになるので、書き換え後のコード間違えなどないように重々注意してつかってくださいね。