仕事

WordPressに移行したが画像を旧サーバに放置しているのでSSL化に伴い一括移行したいだって?

  • このエントリーをはてなブックマークに追加
  • Pocket

そんな虫のいい話が……!!あるよ、あったわ。

ただし、上級者向け。
これは私が上級者という訳じゃなくて、単にうまく説明できる自信がないからです

画像の一括移行なので、当然リスキー行為。ただ、データ量によってはひとつひとつ差し替える作業で一ヶ月掛かるところが、うまくいけばたった1日で済むことも確かです。実際私は10000近い画像の移行が1日半で済んだ。今日。だから、何が言いたいかっていうと、「お前のぐだぐだな説明でワシのサイトはズタボロや!」って言ってくるのはマジでナシね。そもそもノウハウ系記事初挑戦だしね。ほんとは書きたくないんだよ、慣れないことは疲れる。

さて、散々不安を煽ったところでいきましょう!

なお、私はどうでもいいことをべらべら書く性質なので、お嫌いな人は「目的」から読も。

背景(読み飛ばし推奨)

自分はベトナムを紹介する『べとまる』というサイトを運営しているのですが、これまでに「WordPress+sakuraサーバ」→「ライブドアブログ」→「Wordpress+Xserver」と組み合わせを変えてきて、めんどくせーやってことで早い段階から画像は移行せず置き場所はそのままにしてきたんですよ。わざわざサーバの契約はそのまま継続させて。

引っ越し時に家財を移動させるのがめんどくさいからって家賃払いつづけて倉庫化する、って感じですね。お、我ながら今ウマイこと言ったんちゃうか?でもすげぇ語呂悪かったな。

そのツケがついに回ってきまして。あれよ、昨今ジャンジャカうるさい『SSL対応』ってやつですよ。いくらへっぽこだったからと言って、仮にも元エンジニアという職歴を持つ僕にも分かります。あれでしょ、そのー、スーパー蒸気機関車って意味ではないことくらいは。

そういう訳で、言葉の意味もよく分かっていないながらも、これに対応しなければなんでもGoogleが殺しにやってくるらしい。なんだよ!検索順位上げたるで~って散々アメちゃんチラつかせて!おっ、お前SSL化してへんやん、ほな殺すわ!って。おいしく実ってからあなたは私を殺しますって、ハンターハンターのヒソカかおのれは!まぁ、べつに、べとまるはおいしく実ってる訳でもなんでもないんだけど。放置しすぎて今やアクセスが底の底だし。

それでも愛情を注ぎすぎた可愛い我が息子(サイト)、苦虫噛み潰す思いを抱きながらも、Google野郎の靴をべろんべろんと舐め削ぐべくSSL化対応をしたのです。でも、まだまだダメだっていわれるみたい。アドレスバーには「!」って表示されていて、コンテンツがミックスしてんで、だとさ。うるせぇなこいつ、なんでや?と思ってみたら…ここで「ツケ」の正体!画像の読み込み先が!SSL化してないから~!べべんっ!なるほどなるほど!

あー、はいはい。でもそんなもん、読み込み先もSSL化したら万事解決お茶の子さいさいだよね?サイレントサイレン?違うそれ聞き間違い。って訳で、相も変わらずめんどくさがりな私は思ったのですが、これがまー、しとらんのよね!今や画像の大半を置いてあるライブドアブログ!これを書いている今もなお、SSL化してないのよね!Google様の評価に関わるんですよ!?天に唾する不届き者め!私は君が心配だよ。そんなに心配してないけど。

ライブドアブログのHTTPS対応について|ライブドアブログ 公式ブログ

現在対応を進めておりますが、サービス規模が膨大なため、完了時期についてはご案内致しかねるのが現状です。

へー、ふーん。それは別にいいけども、タイトルでなんべんブログ言うとんねん。あと初めて引用符使ったけどPCで見たら「?」って、WordPressよ私の感情を先取りするな。

と、いう訳で。いよいよ本題。画像の置き場所のライブドアブログさんがSSL化を(姿勢はともかく)放り投げている以上、さすがにもう自分でお引越しするしかなくなりました。「そろそろSSL化じゃのう…オーイタタ、古傷が疼くわい」と、再び老兵はノートパソコンを開いて作業に。でも一枚一枚画像を差し替えてなんていられません、そこで取った方法を紹介するのがこの記事です。ぐだぐだ関係ないことを書いて誠に申し訳ございません(笑顔!)。

 

目的

ドメイン自体のSSL化は完了済み。ただし記事で読み込んでいる画像が非SSLの旧サーバに格納されているため、すべての画像を常時SSLの新サーバに移す。

当初はWordPressの管理画面からひとつひとつアップしていこうと考えていましたが、現代人の私はめんどくさくてやっとれん訳です。そこでなにかラクな方法はないかなーと考えていたら、記事ぜんぶエクスポートして画像のURL抜き出してダウンロード&リネームして紐づけリストをつくったらまたアップロードしてエクスポートファイルの画像URLを新しいものに一括置換してインポートファイルとして戻せばいいんだ、という。

分かる人には分かると思いますが、半手動的なゴリ押しアプローチです。でもひとつひとつやるよりかなりラクになるはず。説明します。

 

環境

Windows10ダーッ!!Macは…ごめんなさい、分かりません。でも理屈は同じなので、使えるツールがあれば出来るかと。

必要なツール(使った順番で並べてます)

※「WP」はWordpressプラグイン、「DT」はデスクトップアプリ。

1.WP CSV Exporter(WP):csv形式での記事エクスポートに使う。

2.さくらエディタ(DT):エクスポートファイルをGrepして、URLのリスト化に使う。ダウンロードはこちら→サクラエディタ – ダウンロード
※Grep機能付きテキストエディタならたぶんなんでもOK

3.Excel(DT):ふつうにExcel。ふつうに絞り込みを使ってふつうにリスト化に使う。

4.WebImageCollector(DT):URLリストから一括ダウンロードできる有能くん、玉に瑕あり。後述。ダウンロードはこちら→Webイメージコレクター.NET(Zip配布版)の詳細情報 : Vector ソフトを探す!

5.MultiReplace(DT):紐づけリストから一括置換できる有能くん、君はまことに有能くん。ダウンロードはこちら→MultiReplace

6.Really Simple CSV Importer(WP):編集したcsvを最後にドーン!

 

方法

WordPressの記事データをエクスポートする

はい、WordPressの記事データをcsv形式でエクスポートなさい。細かい説明はさっそく端折ります、下記ページで親切丁寧に紹介されているのでそちらをご覧ください。

WordPressの記事をCSVファイルで更新! インポート、エクスポート | ハジプロ!

WordPressに慣れている人なら、プラグイン(WP CSV Exporter)を適当に触っていたらなんとなくできるはず。インポートなら慎重にしたいけど、エクスポートだしね。いちおう、一点だけ。というか余談。WordPressはデフォルトでエクスポート可能ですが、xml形式だけ。これで出来ると思って一度テストでエクスポートファイルをいじってインポートをしてみたんですが、すでに存在している記事の編集は出来ないようです。あくまで本来のインポート(つまりすべて新規記事を追加する)の用途に限るってことなんでしょう。

エクスポートファイルの画像URLを抜き出す

エクスポートファイルをサクラエディタで開くと…

こんな、ウッ…と来る感じになってます。エクスポートデータなので当たり前ですけどね。

この中から画像の読み込み先のURL、つまり<img>タグで指定されているURLを抜き出すべくGrep機能を使う訳ですが…。先人の至言(正規表現)があったのでそのまま使ってください(上の写真にすでに入力されているのがそれ)。Grepの意味が分からないという人は頑張ってください。説明が(私も分かってないから)ツライ。

正規表現でhtmlソースからjpg画像アドレスを抽出する | これを読めば思い出す

■src=”xxxxx” か href=”xxxxx”の「xxxxx」部分を取得
(?<=src=”)(.+?)(?=”)|(?<=href=”)(.+?)(?=”)

実行すると…パツーン!と、該当箇所だけ抽出してくれました。

“href”は必要ないんじゃないかな?と思いましたが、私の場合は画像用のURL(http://livedoor.blogimg.jp/~)で、「srcだろうがhrefだろうがlivedoorならみんな斬る!」という感じだったので(他意はマジでないです)、ひっくるめてやっちゃいました。ピンポイントでsrcを突きたい人は単純に条件から”|”以降を外しましょう。

ちなみにこのとき、最初になんとか自分でやろうと粘ったのですがダメでした…正規表現キライ…。上記の至言を見てもいまだにピンと来ていないところもあるので、そもそも自分で~ということが無理難題だったんでしょう。切羽詰まった末に上記の至言(正規表現)を見つけたのですが、最初から頼れていれば作業も1.5日も1.2日で終わってた。

という訳で、画像URLをExcelでリスト化しました。

コードによってはGrepしてもゴミが残っているかもしれません(ダブルクォーテーションが連続しているとか、そういうのです)。こんなとき、サクラエディタならAltを押しながらだと横位置を固定しながら縦に選択範囲が出来たりするので、うまく成形しましょう。ちょっと言葉では説明が難しいところなのでこれは調べてみてください。

画像URLから画像を一括ダウンロード&紐づけリスト作成

これは簡単です、ほぼアプリ(WebImageCollector)まかせ。

UIにちょっとクセがある気がしますが、理解してしまえば使い勝手は良いです。マニュアルも載ってある開発者様のページをいちおう上げておきますが、実際に触った方が早い気がします。

Webイメージコレクター.NET

入力するURLリストはファイルなどを読み込むタイプではなく、アプリの入力フォームにベタ打ち(コピペ)。ふたつ前の画像、右上にある▶をクリックすると上記画像が出てきます。対象に「jpeg」が含まれている状態で実行すると、「画像に偽装したファイル名だよ」とアラートを投げてくるところには「なんでやねん」と言いたくなりますが。

あと、一度に読み込めるURLは555個までのようです。そのため、それ以上のファイル数を複数回に分けて連番でダウンロードしたいときは、オプションの右端にあるサンプルファイル名をクリックすれば開く別窓で細かく設定できるので、つづきの(最後にダウンロードしたファイル名に+1した)数字を指定してください。

ファイル名をクリックすると開く別窓。ここでファイル名の開始番号を指定できる。

これで実行ボタンを押せば、滝のように画像ファイルが落ちてきます…カイ、カン!(薬師丸ひろ子の若い頃は見たことがありません)。

当然ながら、ダウンロードが終わるたび、対象URLとダウンロードされたファイルの番号を紐づけるリストをExcelなどでつくっておきましょう。というより、これが一括置換を行うときに欠かせない重要な紐づけリストになります。ちなみにここでこのアプリを紹介したときに書いた「玉に瑕」なんですが、なぜかたまーにひとつふたつURLを飛ばされるときがあるんですよね。そういうときは対象のURL数とダウンロードしたファイル数にズレがあるのですぐに分かります、むしろそこに気をつけてください。そうでなくとも人間どこかでミスするものなので(URL欠損とか)、誤りチェックのためにもこのリストは有効です。

もし抜けが見つかって、改めて最初から連番でダウンロードすることが面倒なら、個別にダウンロードして適当なファイル名を付けておきましょう。そもそも必ずしも連番じゃなくてもかまいません、紐づけしやすいために連番にしているだけであって、新旧のURLできちんと紐付けさえしていればいい訳ですから。

ダウンロードした画像をWordPress(新サーバ)にアップ

これはあまり考えなくてもいい作業ですね。ダウンロードした画像ファイルを新サーバにアップロード、すべての画像のURLはファイル名以外共通していることが前提です。そこがバラバラだと、紐づけするにもひとつひとつ見ていかないといけないから労力的には本末転倒です。

私の場合だと、新URLは「https://www.vietmaru.com/wp-content/uploads/2018/07/【ファイル名】」でした。旧URLとファイル名の紐づけができていれば、あとはこのURLを前方にがっちゃんこすればそれがそのまま新旧URLの紐づけになります。

ここで一点注意。WordPressへ一気に7000以上の画像ファイルをドラッグ&ドロップで突っ込んだら作動しなかったので、2000ファイルずつ少し回数を分けて、「ファイルを選択」からアップロードしました(上記画像の赤枠のボタン)。この数のラインの見極めは出来ていませんが、なにしろ数が数なので小刻みにアップロードした方がいいでしょう。

これで晴れて、新旧URL紐づけリストが完成しました。

紐づけリストを元にエクスポートしたファイルを一括置換する

最初にエクスポートしたCSVファイルを引っ張りだして、旧URLを新URLに一括置換する。
ここで「MultiReplace」を使用!こちらも丁寧な説明は先人に投げちゃいます。

複数の置換を一括で行う最強の置換ツール「MultiReplace」(フリーソフト) │ Re:I別館 -145cmの考察-

WordPressに慣れているくらいの方なら、一見して使い方は分かるかと思います。

アプリの左中央にあるフォームに紐づけリストをコピペ。たとえば「こんにちは」を「こんばんは」に置換する場合、デフォルトだと「/」を挟んで「こんにちは/こんばんは」と記入すれば良い訳ですが、URLはバリバリ「/」が入っているのでややこしそう~!ってことで、念のため「*」に変更して逃げました。そうです、区切り文字は任意で変えられます。

そして実行すると…ほ~ら!この通り、エクスポートファイル内の画像の旧URLがすべて新URLに変わりました(細かくて見えないかもしれないけど)。

一括置換したファイルをインポートする

あとは流れ作業です。
「Really Simple CSV Importer」を使ってインポートするだけ。

WordPressの記事をCSVファイルで更新! インポート、エクスポート | ハジプロ!

で~…

はい!

どこを開いても「保護された通信」の文字!いや~、今後ともよろしくお願いしますよ!Googleさん。

あとがき~あると思ったものは探せばだいたいある~

頑張ってそれらしく書いてみたけど、理屈そのものは極々ふつうの内容ですね。

旧サーバから画像データをぶっこ抜いてリネームする
画像データをぶち上げてコードの読み先をリネーム後に合わせて直す

ってだけのことなんだから。

今だってプロの人に笑われないかとヒヤヒヤしながら書いてるもん、だれかなにか思うところあっても耳貸さないよ。なるべくこういうシステム関係のことはやりたくないと思いながら日頃暮らしているのですから。だけど意外とそういった記事がないってことは、私みたいに困っている人もいるだろうし、墓場まで持っていくのはもったいないので書き留めておきました(墓場まで持っていく頃までWordPressが使われているのか分からないけど…)。

今回いくつかツールを使っているように、ただ組み合わせるだけでなんとか出来るんもんだってところが肝かと。あるかな~ないかな~と思って探すとなんでも意外とあるんですよね、「URLリストから一括ダウンロードするアプリ」も、「紐づけリストから一括置換するアプリ」も、「WordPressのすべての記事を一括編集する方法」も。

ここまで組み合わせで出来るってことは、プラグインで全自動化出来そうだけどなぁ。でも、使いどころがマニアックだし、影響範囲が広すぎる割に後戻りが効かないか。

まぁ、何にせよ、お粗末様でした。

  • このエントリーをはてなブックマークに追加
  • Pocket