はてなブログ

はてなからWordPressへの移行 - はてなフォトライフの画像を全て自サーバーの画像に入れ替える方法

投稿日: 更新日: 2017年10月29日

はてな8ヶ月間で記事に挿入した画像が大体3,000枚あったでででーさん(@d3_dayo) です!

 
はてなからWordPressへ移行する時、はてなで書いた記事のエクスポートやWordPressへのインポートは基本的にブログサービスの標準機能を使ってできるので、その作業自体はさほど難しくありません。
 
また、記事の中に挿入した画像もはてな時代同様にはてなフォトライフから読み込んでくれるので、特に気にすることがなければ、記事自体は手を加えなくても移行後も移行前と同じように表示されます。
 
はてなブログからWordPressへ移行する際にやったこと・使ったものをまとめる | カキタクナッタラ
つまり、これから書く手順は実行しなくても、何も問題なくWordPressへの移行は完了するということなんですが、個人的には…はてなフォトライフという機能に依存していることに怖さを感じるので、だいぶ手間はかかりましたがWordPress移行を機に、記事に挿入している画像を全件フォトライフのものからサーバーにアップロードした画像へと貼り替えました。
 
この記事では、そのために必要な手順を掲載します。
 
 

スポンサーリンク

やることの流れ

最初に、はてなフォトライフの画像を全件切り替えるために必要な作業の流れを書いてみます。ただ、これも最初に書いておきたいのですが、今回の手順はWindowsを使っての手順です。Windows以外の端末だとはてなフォトライフからの画像ダウンロードや、ファイル名変更が生じた際の手順がこの通りにはいきませんので、予めご了承ください。
 
・はてなフォトライフから画像を全件ダウンロード
・(必要に応じて)フォトライフからダウンロードした画像の全件ファイル名変更
・FTPでWordPressサーバーへアップロード
・(必要に応じて)アップロードした画像をWordPressのメディアライブラリに登録
・Search Regexを使って画像リンクを全件書き換え

 
ザッとこんな感じになります。
 
 

はてなフォトライフから画像を全件ダウンロード

この手順については、既に記事を書いておりますのでこちらをご覧ください。
 
Windowsではてなフォトライフの画像を全てダウンロードする簡単な方法 | カキタクナッタラ
まずは上記の手順で、これまでにはてなフォトライフへアップロードした画像を全件ダウンロードします。
 
 

ダウンロードした画像のファイル名変更(必須ではない)

この手順は必要性が生じる人とそうでない人がいるようです。ちなみに私はこれをするハメになりました。
 
どういうことか解説していくと、上記「はてなフォトライフから画像を全件ダウンロード」の手順で全件のダウンロードした画像を確認してみると、私の場合はオリジナルファイルの名前の末尾に「_original」という余計な名前が全件入っていました。
 
これまで記事に挿入してきた画像のリンクにはこの識別子は含まれていないので、このままの状態でサーバーにアップロードすると、ファイル名の前にあるリンクを全件書き換えても画像を入れ替えることができません。
 
この場合、まずはサーバーにアップロードする前にファイル名を全件「_original」という識別子を排除したものへと変更する必要があります。
 
さて、私がダウンロードしたファイルの名前を全件一括変更するために使用したWindowsのフリーソフトがあります。
 
大量のファイルを一括で名前変更できるWindowsのフリーソフト「Flexible Renamer」 | カキタクナッタラ
まずは上記の記事で紹介しているこのソフトをVectorからダウンロードして実行します(インストールは不要で使えるプログラムです)
 
実行したら、はてなフォトライフからダウンロードした画像を格納しているフォルダを選択します。サンプルの下図では何も表示されていませんが、選択すると右のカラムにフォルダ内のファイルが全件表示されます。
 

 
その状態で、左カラム下部にある「置換前の文字」「_original」と入力し、「置換後の文字」は空白のままで「リネーム」ボタンをクリックすれば、画像全件「_original」の識別子がとれた状態へとリネームすることができます。
 
 


スポンサーリンク


ダウンロードした画像をFTPでサーバーにアップロードする

ダウンロードした画像が100枚以内と…数が少ないようであれば、わざわざこれをしなくてもWordPressの管理画面からメディアに追加していけばいいかもしれません。しかし、私の場合は3,000枚ほどあったので、それだと膨大な時間がかかってしまうためサーバーに直接画像を一括でアップロードしました。
 
サーバーへの画像アップロードに使うFTPはいろんなものがあります。契約しているサーバーの管理画面でもWeb FTPが提供されていると思いますし、Windowsで有名なFTPソフトと言えばFFFTPなどがあります。
 
いずれにせよ、何かしらのFTPを使ってアップロードするんですが、FTPについての詳細はおいおい記事にしていきたいと思います。
 
今回、FTPを使ってダウンロードした画像を全件アップロードした階層はこちらになります。
 
/wp-content/uploads
 
WordPressをインストールしたサーバーの中に「wp-content」という階層があります。更にその下に「uploads」という階層があるので、私はこの中に「hatenafotolife」というフォルダを作って、ダウンロードした画像を全件アップロードしました。
 
 

アップロードした画像をメディアライブラリに登録する(必須ではない)

これも必須ではないのですが、WordPressの管理画面からアップロードした画像以外はデータベースに登録されないので、そのままでは「メディア」を開いても認識されません(でも、上記のアップロード操作で確実にサーバー内には画像があります)
 
アップロードした画像が「メディア」に表示されないと困る!という人はこの作業が必須となります。私もWordPress側で一括画像圧縮をかけたかったのでこの操作をしましたが、画像圧縮はよくよく考えるとメディアに登録しなくても出来ることなので時間の消費だけをしてしまいましたが…。
 
私がアップロードした画像をメディアライブラリに登録するために使ったWordPressプラグインはこちらです。
 
Add From Server
このプラグインを有効化して、プラグインの画面を開くとWordPressの「メディア」に登録されていないサーバー内の画像を一括でメディアへと登録することが出来ます。
 
一括でと書きましたが、私の環境はサーバーのパワーが弱いのか?3,000件は多すぎたのか?一括でやろうとしても…うんともすんとも言わなかったので、数百件ずつ小分けにして登録しました(;・∀・)
 
ちなみに他の類似プラグインでも試してみたんですが、これがまだマシなほうで…他のプラグインだと小分けにすらできずエラーを吐く状態でした。
 
 

Search Regexではてなフォトライフ画像のリンクを全件書き換える

いよいよ仕上げ部分に入っていきます。画像は既に全件サーバー内へと移すことができていますので、あとは移行した記事に書かれている画像のリンク文字列を全件書き換えれば作業完了です。
 
記事内のリンク文字列を一括で書き換えるには、WordPressの有名な便利プラグイン『Search Regex』を使います。使い方がわからない場合には、まずこちらの記事を一読ください。
 
【備忘録】WordPressで記事に挿入されているURLを一括検索&書き換えることができるプラグイン「Search Regex」 | カキタクナッタラ
このSearch Regexを使って置換していく部分はこうなります。
 

 
こうすればサーバー内にアップロードした画像のリンクに書き換わり、記事内の画像がはてなフォトライフからではなくサーバーから読み込まれるようになりますが、この作業はけっこう手間がかかります。
 
というのも…はてなフォトライフの画像URLは
 
https://cdn-ak.f.st-hatena.com/images/fotolife/d/はてなid/20170930/
 
このように全件日付ごとにURLがわかれているので…8ヶ月間毎日記事を書いていた私はSearch Regexで1日ずつ、10月20日から2月21日まで…こんな風に日付表示を変えながら置換することになりました(・・;)
 
https://cdn-ak.f.st-hatena.com/images/fotolife/d/はてなid/20170930/
https://cdn-ak.f.st-hatena.com/images/fotolife/d/はてなid/20170929/
https://cdn-ak.f.st-hatena.com/images/fotolife/d/はてなid/20170928/
 
ほぼ手動で地味につらい作業になりますが、これで全件置換をすれば全作業完了です。
 
 

おわりに

以上がはてなブログで書いた記事に挿入されている画像を自サーバーの画像へと書き換えるための全手順となります。
 
最後にこの作業をやっても1つだけまだ残っていることがあるんですが、現時点ではそこの改修にはまだ着手していません。
 
それは…はてなで記事に挿入したフォトライフの画像には「alt」と「title」がこのように設定されていますが(画像にマウスオーバーすると表示されるやつですね)

上記の作業だけでは、この部分の改修まではカバーできていないということです。おいおいやっていきます(;_;)

でででーさん
2017年2月21日はてなブログでカキタクナッタラ開設。2017年10月22日にWordPressへ移行しました。基本的に毎日更新。ウェブ・スマホなどIT関連のネタをメインにラーメンのことや雑談記事など幅広く書きます。たまに変なイラストを描いたりウェブ制作をすることもあります。
あなたにオススメ