Web活 ブログ

Search Regexで混在コンテンツのSSL化をやってみた

これまで当ブログのSSL化と常時SSL化を行い→完了。ようやくWordPressのプラグイン、Search Regexを試せる段階までやってきました。

web活初心者の私には中々の道のり...よく頑張ってきたヽ(・ω・。)

「試せる段階」と表現したものの、やろうと思えば、いつ使ってもいいSearch Regex。私は、ブログ内に残る”http”コードを”https“へ全て生まれ変わらせるべく、SSL化の最後の切り札的にSearch Regexのお力を借りました。具体的には、混在コンテンツのSSL化です。

使い方は至ってシンプル。web活初心者の私でも問題なく使えましたよ。

簡単に使えて、時短効果絶代。

使うか否か迷っている方がいたら、是非インストールをお勧めします。

即刻、インストールのやり方に進みたい人は、目次からインストールまで進んでね。

この記事があなたのお役に立てれば万々歳❤︎

 そもそもSearch Regexとは何だ

WordPressにインストールするプラグイン(拡張機能)の一つです。スマホでいうと、アプリみたいなものですかね。より良い、便利なWordPressを作ってくれます。

具体的にこのプラグインが何を行ってくれるかというと、煩わしい「置換作業」。特定の文字列を新しく指定された文字列に置き換えてくれるんです。Excel(エクセル)にも同じような機能がありますよね。

例えば、あるお店のブログがあったとしましょう。

そのお店の住所は「web区○○××」。ブログ内のアクセス情報や他ページにも、所々この住所が紹介されています。オープン数年後、めでたく増床の為に引越しをすることになりました。新しい住所は「web区△△〇〇」。

その際、ブログ内のいたるところに散らばっている旧住所の更新をあなたならどうしますか?

1ページずつ記事をチェックして「web区〇〇××」を「△△○○」に手打ちでアップデート?

それはちょっと… (´ε`;)ゝ… 

そんな時お助けマンになってくれるのがSearch Regexです。このプラグインをインストールしておけば、短時間であなたの代わりにこの作業を請け負ってくれます。これでいちいち手打ちする必要も、その為に時間を潰すこともありません。

私はデスクワークをしている時に睡魔に襲われると、いとも簡単に屈してしまう傾向があるので、こういった時短プラグインは頼もしい限りです。

Search Regexのメリットとデメリットをあげるならば、以下でしょうか。

Search Regexメリットとデメリット

  • メリット:大量の「置換作業」を一気に行える
  • デメリット:一度置換した文字列は元に戻せない

置換後の文字列は元に戻せないとなると、作業を行うときは心して慎重に行わねば…ですね。

なぜSearch Regexは、混在コンテンツのSSL化に役立つの?

冒頭で述べたように私は、Search RegexをブログのSSL化に利用しました。正確にいうと混在コンテンツのSSL化。さらに噛み砕くと、ブログに含まれている画像のSSL化です。

SearchRegexが、画像に未だ残っているhttp://のコードを、https://に一括変身をしてくれるというわけ。

混在コンテンツとは

現在のインターネットブラウザ(Google ChromeやFire Foxなど)では、SSL化された安全なサイトの中で、安全でないもの(https://になっていないもの)が表示されると、「混在コンテンツが表示されていますよ!」と警告が出てしまうんです

これですね。...このページの一部(画像など)は安全ではありません

心が折れそうになります。というか、折れました。

少し前までは混在コンテンツのことすら知らなかったので、

「SSL化したのに、にゃんでーっ?!」という気分

当ブログでは、やっとこさSearch Regexをインストールするまでに、サイトのSSL化として以下のことを完了させてきました。

step
1
基本のSSL化:レンタルサーバーが提供している無料独自SSL化。http://→ https://

step
常時SSL化:個人情報を入力するような特定のページだけではなく、全てのページをSSL化。

step
3
WordPress内の設定をhttp://からhttps://に変更

step
4
その他サービス、ツールなどの設定変更。http://→ https:

上記ステップの 1) 基本SSLと、2)常時SSLでは、「混在コンテンツ」までその効力が及ばないんです。それが、先ほどの警告を引きおこした理由ですね。

そこで、Search Regexが登場するわけです。

SSL化とは:webサイト内にある「http://」コードを、全て「https://」に置き換える作業。この作業によって、サイト内の情報が暗号化されるので、個人情報の漏洩を防いだり、第三者によるサイトの乗っ取りを防いだり、とサイト訪問者と運営者の両方を悪しき不正から守ってくれるんですね。今やwebサイトを運営するなマスト事項となってきたSSL。詳しくは、以下の記事をどうぞ

SSLその1
初心者必見!SSL、常時SSLって何だ? メリットとデメリットも簡単解説

このブログのSSL 化を完了して、ほっと一息…と思っていた私(web活、WordPress初心者。WordPressに片思い中。) 何の気なしに、投稿した記事をチェックしてみたところ、目に飛び込んでき ...

続きを見る

SSLその2
エックスサーバーでSSL化と常時SSL化をやってみた! 初心者にも目からウロコの解説!

安心安全なブログを目指して、SSL化と常時SSL化に挑戦してみました! いろんなサイトで「簡単!」と言われているけど、そう感じるか否かは気の持ちようなのかも...なんてことを感じたSSL化作業シリーズ ...

続きを見る

 何が混在コンテンツになってしまうの?

このブログの場合は、ヘッダー画像やバナー画像が混在コンテンツとされていました。その他には、Amazonやアフィリエイトなどで商品を紹介した際の画像や動画、リンクなども対象に含まれるようです。

混在コンテンツになりやすいのは?

  •     <img> (src 属性)
  •     <audio> (src 属性)
  •     <video> (src 属性)
  •     <object> サブリソース (<object> が HTTP リクエストを送信したとき)

詳しくはこちら:混在コンテンツについて

これって、webに詳しい人なら「はいはい」と思うところなんでしょうか?…web活初心者の私にとってはかなりの盲点

また、WordPressのウィジェットエリア(ページ横の柱部分)は、Search Regexで置換を行えないらしい危険エリア。なので、テキストや画像など一つ一つをマンパワーで確認です。広告を張っている場合は、バナーの画像が要チェックですね。httpが潜んでいないか確認してみて下さい。

混在コンテンツってどうやって見つけるの?

潜んでいるhttpを見つけろ、って言われても… (´ε`;)...

混在コンテンツってどうやって見つけるのよ、と思いませんか?警告表示が出ても、複数の画像がそれこそ混在していたら、どれが犯人なのかわからない。

そんな時に、この探し方が役に立ちます。

インターネットに繋がった状態で、混在コンテンツがどこにあるのか探りたいページを開き、下記にある所定のキーを打ってみてください。

混在コンテンツの探し方

Step1:所定のキーをおす

  • Windows : F12 キー
  • Mac : cmd(command) +option +I

Step2 : Consol を開く

私はwindows 利用者なので、F12を使います。

すると、パソコン画面の下半分に細かいアルファベットの羅列が出てきました。これらの文字羅列はソースコードと呼ばれるもの。開発者ツールです。

もう、見るだけでクラクラ…

少し前までは、このソースコードを開くなんて、神様の領域と、web活初心者の私は信じていました。

そのページを私が開けることになるなんて!神様領域は意外と距離が近かった。

次にConsole (コンソール)を開きます。すると、何が混在コンテンツであるかのメッセージが出ているんです。

この開発者ツールの画面は、お使いのブラウザによって変わってきます。上記☝のスクリーンショットは私がよく利用しているFirefoxから

次にGoogle Chrome☟

こちらがInternet Explore☟

コードがならんでいるだけでクラクラしてしまうので、ここは日本語が使用されているFirefoxが、まだ馴染みやすいですかね?

 

Search RegexをWordPress にインストールしてみる

開発者ツールのおかげで、何が混在コンテンツなのかがわかりました。では、有難くSearch Regexをインストールしちゃって、httpをhttpsに置換してしまいましょうか。

1)WordPressにログインして、管理画面を開いたら「プラグイン」へ進みます。「新規追加」をクリックしましょう。

2)Search Regex を探してみましょう。

検索ウィンドゥにSearch Regexと入力。するとお花畑が出てきました。

早速、Search Regexの「今すぐインストール」をクリック。インストールされたら、いまクリックしたところが「有効化」と変わるので、そこをクリック。

これで、Search Regex があなたのWordPressの一部となりました。

Word Press の「ツール」をクリックしたら、Search Regexがいたでしょ?

めでたくSearch Regexのインストール完了!

Search Regexの設定をしてみる

では、続いてSearch Regex の諸々設定を行いたいと思います。

WordPressの管理画面メニュー →「ツール」→「Search Regex」と、進んでみましょう。何やら難しそうな画面が現れました。

① Source:どこの置換作業をしたいか選ぶ所です。プルダウンメニューを開くと、ずらっと選択肢が出てきますが、一番最初に選択されている「Post content」が、記事編集画面のビジュアル(画像)やテキスト(文字)のことです。たいていはこのままで事足りますかね。

② Limit to:置換作業の処理を行う何件行うかが指定できます。全部やってしまいたいので、「No limit」の選択のままでよし。

③ Order by:検索結果がどのように表示されるか、その並び順を指定できる場所。(Ascending→昇順・Descending→降順)

④ Search pattern : 置換したい文字を入力

⑤ Replace pattern : 置換後の文字を入力

Search Regexを使ってみるよ!

今回はhttp://をhttps://に置換したいので、「Search pattern」にhttp://を、そして「Replace pattern」にhttps://を心情的には入力したい…ですよね。
でもそれをぐっとこらえる。
なぜならhttp:// →https:// といれてしまうと、いろんなhttpをひっかけてきて置換してしまうので、中にはその必要がないものあるかもしれないわけです。

そこで、もっと具体的に下記のように入れてみます。

step
1
http://と一緒にドメインも入力する。

  • 「Search pattern」: http://tetekomom.com
  • 「Replace pattern」:https://tetekomom.com

 

入力内容に間違えがなければ、「Search」をクリックして、どんなものが対象になるか探してみましょう。

step
2
入力内容確認後、「Search」をクリック

Searchをクリックすると、以下のように結果が出てきます。

step
3
「Replace & Save」をクリックして完了

出てきた結果に問題がなければ、「Replace & Save」をクリックして完了!お疲れ様でした!

まとめだよ

  • WordPressのプラグイン「Search Regex」は、サイト内の文字置換作業を行ってくれる便利な時短アイテム。
  • Search Regexの置換作業を使うと、サイト内にある混在コンテンツをhttp://→https://に変身させる作業が楽ちん!
  • 混在コンテンツとは、SSL化された安全なサイトの中にある、未だ非SSL化(http://)のコンテンツ。画像が対象になりやすいよ。
  • サイト内の混在コンテンツの見つけ方は、windowsの場合F12キー。Macの場合はcmd(command) +option +Iを押してみてね。
  • Search Regexが対象としない(効力がない)エリアもあるから要注意。例えばサイト内横の柱部分(ウィジットバー)。
  • Search Regexはワードプレス管理画面、プラグインからインストールできるよ。
  • Search Regexで置換作業をした言葉は元には戻せないから、入力するときは要注意。実行する前に、Searchで結果を事前にみておこう。

Search Regexの紹介、いかがでしたでしょうか?私は、思ったよりも簡単で、作業もあっという間...という印象でした。こんな簡単に作業が終わってしまうのであれば、もっと早くインストールしておけばよかったな、という感じ。

あなたの作業にもSearch Regexが役に立ちますように!

 


人気ブログランキング

  • この記事を書いた人
  • 最新記事
てんてこマンマ

てんてこマンマ

留学なし純国産の学校授業で英語を習得。もとデパガが英語を身につけ外資系働きマンに。東京在住、2児( ♂)のおかん。子育ては「モノより思い出」をモットーにマイルで旅する陸マイラー。 子育て、英語習得、陸マイラーや副業模索の道。これまで自分が試してきたこと、失敗したこと、現在進行形の話、これから挑戦したいことの諸々をブログにしたためています。忙しい毎日に心の余裕とスパイスを!一人でも多くの人に役に立てれば万々歳。 この度未来の選択肢を増やすため副業で成功すると決めました。近未来は場所を選ばぬノマドワーカーへ ✨ 人気ブログランキング、参加してマス。よろしくお願いします。 人気ブログランキング Follow @tentekomom

-Web活 ブログ
-

Copyright© てまひマンマ備忘録 , 2019 All Rights Reserved Powered by AFFINGER5.