【mac】はてなフォトライフからWordpressに画像を移行する

はてなフォトライフからWordpressのサーバーに画像を移動させました。それにあたり色んなサイトさんを見て回ったのですが、だいたいwindows向けのやり方で、macの私は試行錯誤が必要になりました。そんなだったので、macではてなからWPに移行する人向けの記事を残しておこうと思い立ったわけです。

記事をはてなからWPにアウトポート→インポートすると、画像ははてなフォトライフから読み込まれて正常に表示されます。これが気にならない人はそのまんまでも良さそう？ですが、なんとなくはてなの人に怒られそうだし、サイトをWP内で完結させたい、ってことで移行しました。

私のOSはmac High Sierra、ブラウザはChromeです。そして2018年1月頭の情報ですので、その辺は各自対応よろしくお願いします。

大まかな流れ
1 SiteSuckerで画像をDLする
2 FTPでhatenaフォルダをアップロードする
3 WP側の画像リンクを書き換える
■ 参考にしたサイトさん ■

大まかな流れ

SiteSuckerではてなから画像を全件ダウンロード
FileZilla(FTP)でWPサーバーに接続。wp-content/uploads内にhatenaフォルダを作り、1でDLした画像をアップロード
Search RegexでWordpress側の画像リンクを書き換える

ようは「取ってきて、入れて、参照させる」という3ステップですね。

SiteSuckerとSearch Regexの使い方は解説しますが、FileZillaはざっくりです。FTPでサーバーに直接画像を入れるという概念については、ここでは説明しません(難しいし、長くなるので)。よくわからない人は、まずこれについて調べることをおすすめします。

★まず最初に、はてなにログインしておきます。

1 SiteSuckerで画像をDLする

1-1 インストール

http://ricks-apps.com/ にアクセスします。

こんなサイトです。で、「SiteSucker for macOS」の方に行きまして、下の方にスクロールします。するとDLの場所が出てきます。

これですね。最新版は有料みたいなので、今回は古いバージョンを使います。古いのでもちゃんと動きました。

1-2 設定

SiteSuckerがインストールできたら、さっそく起動します。こんな画面が出てきます。

まず、はてなブログのURLを入れます。私のなら、

http://drowingryoma.wpblog.jp/

でした。

で、次の設定です。

「Settings」をクリックで、

こうなります。「General」内の設定はほぼいじらなくていいですが、一番下の「ダウンロード先」は変えた方がいいです。デスクトップに「hatena」と名付けたフォルダを作ってセットしておくと、分かりやすくて良いですね。

次です。

「Paths」というところに、今度ははてなフォトライフのURLを入れます。ここには2種類のURLを入れます。頭がhttp://~のものと、https://~に変えたものの2つを用意します。http://以下は同じです。

はてなフォトライフのURLを確認するには、自分のブログに載ってる画像を右クリックで「画像アドレスをコピー」し、テキストエディットにでも貼って、はてなIDより下の部分はカットします。こんなURLになるはずです。

http://cdn-ak.f.st-hatena.com/images/fotolife/【アルファベット】/【はてなID】/

私の場合は、http://cdn-ak.f.st-hatena.com/images/fotolife/r/ryoma169/ でした。この【アルファベット】ってのは、無料かProかとかその辺の違いか？と思うんですが、よくわかりません… 私は無料アカウントで【r】でした。まあ自分の画像アドレスを確認するのが確実です。ちなみに私は画像移行前に全記事削除してリダイレクトまで設定してしまってたので、ここで若干面倒なことになりました。

SiteSuckerに入力したら、次の設定に行きます。

「File Types」で、画像だけをDLするように設定します。画像だけDLしたいので、「Images」だけにチェックですね。もし音楽ファイルが含まれてる場合は「Audio」、動画が入ってる場合は「Movies」もチェックすると良いと思います(私は画像だけだったので、未確認ですが)。SiteSuckerは本来ホームページ全体のバックアップをとるアプリみたいなので、そのまんまだと画像以外も全部DLされるようです。

これで設定ができたので、「Download」をクリックして、ダウンロードします。

しばらく動作が続きます。私は画像数200ないぐらいだったので、1分かかりませんでした。

ダウンロードできたら、デスクトップの「hatena」フォルダの下層を確認してみてください。日付フォルダの中に画像が入っているはずです。

ここで、日付のフォルダ数がそんなに膨大でない場合は、全画像を1フォルダにまとめて、それを改めて「hatena」フォルダにしてしまうといいです。後の作業が楽です。

(2-0) FileZillaをインストールする

https://filezilla-project.org/

2 FTPでhatenaフォルダをアップロードする

WordPressのサーバーに入った後、「リモートサイト：/uploads/2018/hatena」って感じで、hatenaフォルダ内の画像をアップします。

サーバーに直接画像を入れると、Wordpressの「メディア」には表示されませんが、ちゃんと存在はしていて画像を出せます。この記事内で使っているスクショ画像も、メディア内にイラストとスクショが混在するのが嫌でサーバー内に直接フォルダを作りました。メディアには登録されてませんが、ちゃんと見えてると思います。