はてなブログProからWordPressへの移行失敗 移行作業で起きた問題の検証と今後の方針(解決事項追記あり)

SPONSORED LINK

このブログ(http://www.varis.jp/)について、2017年1月27日夜半からはてなブログProからWordPress(ワードプレス)への移転作業を行っていたのだが、失敗と判断して切り戻しを行った。
現在はまたはてなブログで更新を継続している。
既に独自ドメインで運営しているはてなブログProからWordPressへの移転に際しては、「パーマリンクの変更」が最大の難所だと思われているが、それ以外にも想定していない状況があったのでそのあたりを中心に書いていく。
作業のログを全て書くと膨大な量になってしまうため、必要ないと思った箇所は要点に絞っている。
また、途中で疑問に思ったことや試行錯誤の内容も書いているので、冗長になっている部分もある。

注意:このエントリー自体は失敗とトライアンドエラーの記録です。

WordPressへの移行方法や設定方法を知りたい方は以下の記事を参照下さい。
(移行後に書いたものなのでこちらの方が正確です。)

はてなブログProからWordpressへの移行作業と設定方法(2017年版独自ドメインあり)
2017年2月10日に5年間使ったはてなブログProからレンタルサーバー+Wordpressへ移行を行いました。はてなブログからWordpressへ移行を検討している人も多いと思います。...

SPONSORED LINK

注意事項

  • 作業手順は記述が多くなるため全て掲載していません。
  • 作業手順を解説する類のエントリーではありません。
  • WordPress初心者が書いているため間違いがある可能性があります。
  • 無料ブログ(はてな無料プラン)からWordPressへの移行ではありません。
  • 独自ドメインを取得して新規にWordPressでブログを始めるケース(記事の移行がないケース)ではありません。

移行作業者(筆者)のスキル

  • はてなブログ5年目。
  • 独自ドメインでの運営が1年半以上。
  • HTML・CSSの一般的な知識あり。
  • サーバーやネットワークの職業レベルでの知識あり。
  • WordPressはwordpress.com(レンタルサーバーでなく無料ブログの方)を遊びで触った程度でほとんど知識ゼロ。
  • レンタルサーバーでのCMS使用経験あり(MovableType)。

[目次 - Contents]

移行前のはてなブログPro状態

  • はてなブログPro
  • 記事数560(→記事を削減しエクスポート時点では312)
  • 記事の画像ファイルははてなフォトライフを使用(約数百枚)
  • ドメイン管理会社ムームードメイン
    • 独自ドメイン「varis.jp」を登録
    • ネームサーバはムームーDNSを参照
    • CNAMEレコードでサブドメイン「www」を「hatenablog.com」に設定

移転後のワードプレスブログ想定

  • エックスサーバーX10をワードプレスで運用
  • 移転後もムームードメインを引き続き利用するが、エックスサーバー側のネームサーバを使用するためムームードメインにネームサーバを設定する(詳細は移行手順内で記す)
  • ムームーDNSに設定しているCNAMEレコードは削除

移行前にはてなブログ側で行った作業

移行前に行っていたはてなブログ側の記事の修正も相当な作業量があるのだが、今回は焦点から逸れるため全てを掲載しない。
画像ファイルの参照先変更のみは関係があるので記述する。

  • 画像ファイル参照先の移行
    はてなフォトライフで見ている画像を別のクラウドサービスに移行する。レンタルサーバーでもはてなフォトライフから正常に画像を参照されるとの情報があったため、必ずしも必須作業ではない。
    但し画像だけずっとはてなのサービスに依存する状態になり気持ちは悪い。
  • はてなフォトライフからGoogleフォトへの移行
    画像の数が多ければ画像ファイルの移転とIMGタグの修正で作業量は膨大になる。画像の一括移行プラグインは提供されていないため手作業で移すしかない。
    自分の場合は移転前に画像をGoogleフォトに移行した状態にした。
    これははてなブログ編集画面からGoogleフォト貼り付けで行った。
    (この作業をやっておけば、WordPress移行後に画像は全て表示されると思っていた。)
    Googleフォト貼り付けで画像を入れる方法は以下エントリー参照。
    https://www.varis.jp/entry/2017/01/14/090112
  • アイキャッチ画像の修正
    画像の修正をした場合はアイキャッチ画像も同様にGoogleフォトから参照されるように修正した。

移行方法の情報収集

WEB記事で見ていたエントリーとしては、主にこの3つの記事。
はてなブログから移行する内容では、自分が調べた中ではこの3つが最も要点を詳しく説明されていた。
見ていた内容は実作業の中でかなり役立った。
また、これらの中で記されていない問題もあり、それはこの記事で書いていく。

将来WordPress移行を検討したいはてなブロガーがしておくべきこと4点 - 経済的自由...
はてなからWordPressへ移行した経験談をもとに、どのようにはてなブログを運営しておけば将来WordPressに移行することになった場合に楽か考えてみました。
はてなブログからWordPressに移行する際のパーマリンクなどの設定と方法 - シンス...
先日、はてなブログに設定してあったドメインをWordPressに移行したのですが、その時の手順について書き留めておきたいと思います。 単純にはてなブログの記事をエクス...

移行手順

事前に集めた情報から、以下のように移行手順を作成した。
(これは大項目的なもので、詳細化すれば細かい手順は他にも沢山ある。)
が、これは机上の手順であり、実際に移行作業の中ではこの通りにいかなかった。

  1. はてなブログで記事データのエクスポート
  2. レンタルサーバー(エックスサーバー)の使用契約
  3. エックスサーバー管理画面(サーバーパネル)で「独自ドメイン設定」
  4. サーバーパネルでWordPressの新規インストール
  5. WordPress管理画面(ダッシュボード)にアクセスし、はてなブログ記事のインポートや整形などの公開準備、WordPress側の検索回避設定、記事を全て公開設定にする
  6. ムームードメイン管理画面(コントロールパネル)でエックスサーバーのネームサーバを指定しドメインを切り替え
  7. ドメイン浸透が開始
  8. ドメイン浸透後、WordPress側のブログが表示される
  9. WordPressの検索回避を解除し、はてなブログを検索回避にする
  10. WordPressで安定後、はてなブログを非公開にする

移行作業

以下は、実際に移行作業で行った内容を書いていく。
全てを書くと膨大な量になるため、割愛している箇所もある。

はてなブログから記事データをエクスポートする

この手順については詳細を割愛する。

エックスサーバーに契約後、サーバーパネルにログイン

エックスサーバーにサーバー使用の申し込みをする。
エックスサーバーを選んだ理由はユーザーと情報が多く平均的に多機能で高機能、価格は各社並みかやや高い程度、とレンタルサーバーではマジョリティであると思ったため。
今回は無料お試し期間が10日間あるためこの期間でブログ移行を行うこととする。
(無料期間では独自ドメインの設定が出来ないとあったが、自分の場合は問題なく出来ていた。)
申し込み後ログイン情報をメールで受信し、サーバーIDなどの情報も付与される。
メールに書かれたURLからインフォパネルにログイン。
インフォパネル画面からサーバーパネルにログイン。

ネームサーバの設定(独自ドメインをエックスサーバーに割り当てる)
レンタルサーバーでブログを作るには独自ドメインが必須であり、最初にドメイン取得代行業者(お名前.comやムームードメインなど)で使える独自ドメインを申請してドメインを取得後にレンタルサーバーでの作業が開始する。
独自ドメイン取得後にエックスサーバーでの「ドメイン設定」作業を行うことが出来る。
自分の場合は移行元のはてなブログで既に独自ドメイン化しているため、ドメインを取得する作業は必要ない。

エックスサーバーではWordPressインストール前に独自ドメインをエックスサーバーのネームサーバーに登録する「ドメイン設定」という作業が一番最初にある。
そのため最初に「自分の独自ドメインの追加作業」が必須となる。
この設定はエックスサーバーでの作業でも一番最初に(WordPressインストール前に)行わなければならない。

(自分はこのドメイン設定は「エックスサーバーの世界で使うためだけの設定」 だと思っていた。
が、実際には「エックスサーバーのネームサーバに独自ドメインが登録される」)

ドメイン設定作業
インフォパネル>サーバーパネル>ドメイン設定>ドメインの追加設定ドメインの追加(確定)を押す。
この段階ではまだドメインは切り替わっていない。

エックスサーバーにWordPressのインストール
(本来は、上記で設定したドメインが浸透期間後にインストールを行うのだと思われる。が、筆者は上記作業後直ぐにインストール作業に移ってしまった)

エックスサーバーのマニュアルに添ってインストール
https://www.xserver.ne.jp/manual/man_install_auto_word.php

サーバーパネル>自動インストール>プログラムのインストールWordPress日本語版>インストール設定設定項目を入力>インストール確認>インストール確定インストール完了インストール完了
上記のようにデータベースまで自動で作成してもらえる。(事前に作成したDBを指定することも可能)
インストール完了後に表示される情報でログインするので画面情報を控えておく。

ダッシュボードからWordPressの設定と記事の編集をする
はてなブログでエクスポートしたファイルをWordpressにインポートするため、管理画面(ダッシュボード)へログインする。
管理画面のURL「http://独自ドメイン/wp-admin/」にアクセスする。
Firefoxから「http://varis.jp/wp-admin/」にアクセスするが、はてなブログにリダイレクトされてしまいエラーになった。
URL欄が「https://www.varis.jp/wp-admin/」になっている。
はてなブログ側にwp-adminの階層が存在しないので当然エラーになる。この辺りで何かおかしいと思い始め、自分の想定が誤っていることに気づいた。

エックスサーバーでの独自ドメインの設定方法 | アフィリエイトで稼ぐ方法を全部話そうと思う
こちらで書かれた手順によるとエックスサーバーで「ドメイン設定」後、ムームードメインで直ぐにエックスサーバーのネームサーバーの指定をしている。

冒頭でも書いたようにネームサーバーとは、対象のドメインをどのサーバーで使用するか決定するためのアドレスです。エックスサーバーで独自ドメインを使用するためには、ドメインのネームサーバーをエックスサーバー指定のものに変更する必要があります。

引用元:エックスサーバーでの独自ドメインの設定方法 | アフィリエイトで稼ぐ方法を全部話そうと思う

なぜ直ぐ設定する必要があるかというと、管理画面のURL「http://varis.jp/wp-admin/」に入れないからだ。
WordPress管理画面URLの「varis.jp」とはエックスサーバー内部のWordPressサーバのIPアドレスだが、それを知っているのはエックスサーバーのネームサーバだけだ。
「varis.jp」のドメイン情報はムームードメインのネームサーバに設定されているが、ムームードメインのネームサーバはエックスサーバーのWordPressサーバのIPアドレスを知らない。
WordPress管理画面に入れないとインポートや編集が出来ない。
つまり本来の手順としてはこれが正しいのではないか?
そうなると、事前に想定していた手順と異なってくる。

<正しいと思われる移行手順>

  1. はてなブログで記事データのエクスポート
  2. レンタルサーバー(エックスサーバー)の使用契約
  3. エックスサーバー管理画面(サーバーパネル)で「独自ドメイン設定」
  4. サーバーパネルでワードプレスの新規インストール
  5. ムームードメイン管理画面(コントロールパネル)でエックスサーバーのネームサーバを指定しドメインを切り替え
  6. ドメイン浸透が開始
  7. ドメイン浸透後、WordPress側のブログが表示される
  8. WordPress管理画面(ダッシュボード)にアクセスし、はてなブログ記事のインポートや整形などの公開準備、WordPress側の検索回避設定、記事を全て公開設定にする
  9. WordPressの検索回避を解除し、はてなブログを検索回避にする
  10. WordPressで安定後、はてなブログを非公開にする

5~8の順が事前の想定と異なる箇所。
エックスサーバーでの「独自ドメイン設定」が実ドメインの挙動に関わっていると思わなかったため、ドメイン浸透後でないと管理画面(ダッシュボード)に入れないのは想定外だった。
例えば、エックスサーバーのサーバーパネルにはドメインの状態に関係なくログイン出来ているのでそういう環境で作業出来るものと思っていた。

ダッシュボードへ入れないと作業出来ないため、この時点でムームードメインDNS側でエックスサーバーのネームサーバを指定した。
作業としてはムームードメインのコントロールパネルで5つのネームサーバを登録するだけである。

「varis.jp」についてはこれまでムームードメイン側のネームサーバを使っていたが、この設定後はns1.xserver.jpなどのエックスサーバー側ネームサーバを参照することになる。
ドメインには浸透期間というものがあるため、浸透期間中はどちらを参照されるかは分からない。
参考記事(インプレス)
http://internet.watch.impress.co.jp/docs/special/514853.html

管理画面のURLは「http://varis.jp/wp-admin/」となっているが、自分のPCのDNSが見る情報によっては管理画面まで到達せずエラーで落ちる。
運良くエックスサーバー側のネームサーバにアクセス出来る場合もあるが、ダッシュボードに何度もアクセスしているうちにエラーになるはず。
そこでPCのDNSをエックスサーバーのDNSに固定することで、エックスサーバー管理画面へのアクセスのみ出来るようにした。
これはPCのネットワークの設定でエックスサーバーのDNS(エックスサーバーサイトで公開されている)をIPアドレスで指定すれば出来る。

エックスサーバーのネームサーバを登録して暫くしてWordPress側のトップページを表示出来た。管理画面のログイン画面を表示出来た。
WordPress管理画面(ダッシュボード)に入れた。

この後、作業的には記事の整形とチェックを行う。
一つ目は、はてなブログからインポートした記事のデータを一旦全てステータスを非公開(Private)にしておいたため、このままでは何も表示されないため、公開(Publish)に変えていく。
(ステータスがDraftやPrivateの記事は非公開となる。Draftは下書き状態。Privateの場合は下書きの上、タイトルなどに「非公開」と付くため判別しやすい。なぜPrivateにしておいたかは、テーマの体裁や画像が不安定な状態で公開したくないため。
どのみち記事をチェックして公開するのだから、チェック後にステータスを公開にしていけばいい。)
ステータスの変更はダッシュボードの投稿から記事を開いてステータスを「公開」に変える。

二つ目に、記事のパーマリンクの修正がある。
パーマリンクの修正はよく知られている問題だが、実際に発生した。
対応としては機械的に修正するだけであり、面倒だが間違えないように入力していけばいい。

パーマリンク修正前
パーマリンク修正後

これは作業中の画像だが、よく見ると/entry/が抜けていますね。
これで移行するとURL違いになるので、移行出来なくて良かったといえるのかもしれない。
こういう事がないように、予め記事とURLを記した一覧を作っておき、間違えないようにコピー・ペーストでURLを貼り付けるのがいいと思う。(手作業で削除するとこのように間違えるため。)

大きくはこの二つの設定をして記事を公開していけばいいだけだった。
が、途中でスマホ表示をしてみたところ、デフォルトで使っているレスポンシブテーマでは表示されずApacheの画面が表示されてしまっていた。
(これについては、後で画像を確認するとURLが間違っていたため、デフォルトテーマでも表示出来ていた可能性はある。)

そこで、スマホ表示出来るプラグインを探し、一応表示は出来るようになったが、デザインが酷く公開に耐えるものではなかった。

この時点ではまだ公開を諦めてはいなかったが、Googleフォトの画像がつぶれて表示されていないこと、Amazletの装飾や画像がつぶれて表示されていないこと、Youtubeスクリプトが表示されないこと、ニコニコ動画スクリプトが表示されないことも分かってきた。

画像や音楽スクリプトはこのブログの多くで使っているため、このまま公開するのはかなり厳しいと思い始めた。

ドメイン浸透期間後、まともに表示出来ているはてなブログからWordPressへアクセスされるユーザーも多くなるはずだ。
時間は、1月27日の23時くらいにエックスサーバーを契約して、この時点で明けて朝方7時くらいになっていた。
はてなブログが生き残っている間にこれらの問題を全部解決出来るのか。
到底無理だったため、WordPressの記事を非公開に戻し、ムームードメインのネームサーバは元の通りムームーDNSに戻した。
戻した後もまたドメイン浸透期間が発生する。

10時くらいにはスマホでSafariからはてなブログが見えていた。
ただ、Firefoxはサーバが見つかりませんでしたエラーが出ていた。
14時くらいになってもFirefoxが回復しないため、キャッシュかと思いIEで見てみると普通に表示されていた。
Firefox側もキャッシュを数時間分消すと見えるようになった。
とりあえず切り戻しは問題なかったようで良かった。

問題点の一覧

DNSの遷移状態が理解出来ていない

作業レベルではドメインの設定手順などは理解出来ているが、設定後にドメインの状態がどのように遷移するのか自分の知識では完全に理解出来ていない。
移行手順の中で発生するドメインの設定状況は以下のようになる。

  1. 現在の状態
    ムームードメインDNSに独自ドメイン「varis.jp」が登録されている。
    また、「www cname hatenablog.com」のCNAMEレコードが登録されている。
    この状態のとき、「www.varis.jp」へのアクセスがはてなブログに転送され、はてなブログが参照される。「varis.jp」でアクセスすると何も表示されない。
  2. エックスサーバーのネームサーバに「varis.jp」を登録
    エックスサーバーのサーバーパネルにて作業
    サーバーパネルのドメイン設定で独自ドメインを登録する。
    エックスサーバーのDNSに「varis.jp」が登録される。
  3. ムームードメインDNSにエックスサーバーのDNSを登録
    ムームードメインコントロールパネルにて作業
    2の状態から、ムームードメインDNSに「GMOペパボ以外のネームサーバを使用する」でエックスサーバーのネームサーバ(ns1.xserver.jp~ns5.xserver.jp)を指定して登録する。
  4. CNAMEレコードを削除
    ムームードメインコントロールパネルにて作業
    3の状態からムームードメインDNSに登録されている「www cname hatenablog.com」レコードを削除する

ドメインを複数のネームサーバに登録することや、ドメインの浸透期間があるため、実際ドメインの遷移の過程でどこにアクセス出来るのかといったことがよく分からず作業していた。

例えば、WordPress管理画面(ダッシュボード)はブラウザから「独自ドメイン/wp-admin」でアクセスするが、ここでいう「独自ドメイン」というのはエックスサーバーになる。
エックスサーバーでWordPressインストール前に設定した「独自ドメイン」がこのダッシュボードで見るURLになるため。
ダッシュボードのアクセスはインポートや記事編集のため必須だが、これが出来るタイミングがよく分かっていない。
例えば2の段階でもエックスサーバーのネームサーバを作業PCのDNSに設定すればダッシュボードアクセス可能なのか。
または3を登録してドメイン浸透を待ってした方がよいのか。

テーマやプラグインの中には導入時に外部サイトへリダイレクトされるものもあるため、エックスサーバーのネームサーバをPCに指定した状態ではネットにアクセスが出来ない状態になることも考慮しなければならない。

DNS関連で調査中の不明点(1/29解決済み)

  • 2が設定された状態でブラウザで「www.varis.jp」にアクセスした場合、はてなブログへのアクセスのみとなるのか。
  • 3が設定された状態でドメイン浸透期間後はブラウザで「www.varis.jp」にアクセスした場合、エックスサーバー側にアクセスされるのか。
    または、CNAMEレコードがムームードメインDNSに残っているので、「varis.jp」はエックスサーバー側へアクセスされ、「www.varis.jp」ははてなブログ側へアクセスされるのか。
  • ワードプレス公開直前まではてなブログを参照させる場合、「www cname hatenablog.com」のCNAMEレコードはどのタイミングで削除すべきか。

Googleフォト画像が正常に表示されない

はてなブログのGoogleフォト貼り付けで入れている画像データは、そのままだとWordPress側で表示出来ず、つぶれた状態になる。

はてなブログでGoogleフォトの画像を使った記事

WordPressでインポート後の表示


この画像部分のimgタグは次のようになっている。

単にはてなブログのGoogleフォト貼り付けで挿入しただけでは、WordPress側で表示されないのだろうか?
何かプラグインなどがあるのだろうか。
これについては事前に表示されると思い込んでいたため、全く調べていなかった。

スマホ表示は予めプラグインの設定や調整などが必要

WordPressでは、無料ブログのように記事を公開しただけではスマホ表示されない。
レスポンシブに対応したテーマを使うかスマホ表示用プラグインを導入する必要がある。

自分はデフォルトのテーマ(レスポンシブ対応)を指定したが、URLを打ち間違えて(この時想定外の事態のため余裕がなくなっていた)レスポンシブでどういう状態になるのかスマホで確認出来なかった。

スマホ表示用のプラグイン「WPTouch」を導入してインストールしたが、デフォルト状態ではデザインが酷く、直ぐに公開出来るレベルではなかった。
はてなブログのスマホ表示も多少カスタマイズしているが、このレベルですらなく公開サイトとして見れたものではなかった。

スマホは全アクセスの7割を占めているため、スマホでまともに見られないと実質移行出来ているとは言い難い。
公開準備をするなら「WPTouch」を使うにしろプラグインの設定まで全てまとめておき、記事の公開後にスマホ画面で見栄え良い外観にしておかないといけない。

Amazletは装飾がなくなり画像がつぶれてしまう

AmazletはMovableTypeやFC2でも同じように使ったことがあるのでずっと使ってきた。
(Amazlet自体はサービス終了になるという噂もあったが、引き続き利用出来ているため、他のサービスを使っていなかった。)
WordPressでも普通に表示出来ると思っていた。
実際にはWordPressに移行した時点で装飾がなくなり、画像もつぶれて表示されてしまった。
posted with amazletという部分がツールで表示している部分で装飾がつぶれて画像も表示されていない。
Amazletはこのタイミングでサービスを使うことを止め、WordPressで使える別の商品リンクサービスに切り替えるべきかもしれない。

はてなブログでのAmazlet表示
WordPressでのAmazlet表示

カードリンク

はてなブログで設定したカードリンク(ブログカード)がWordPressインポート後に非表示になる件は事前の調査で分かっていたので、はてなブログ側で修正していたが、一部残っていた。

パーマリンク設定がカスタム構造で投稿出来ない

はてなブログの標準投稿フォーマットでは「/entry/年/月/日/記事番号」の指定になっている。
自分もこのブログでは当初意識せず標準を使っていた。
この投稿形式の場合、WordPressにインポート時に元の投稿形式「/entry/%year%/%monthnum%/%day%/%postname%」が維持されず、postnameの前に年月日が付与されてしまうバグ(?)があるため手修正で直さないと同じURLが維持出来ない。
<例>

  • はてなブログURL「/entry/2017/01/29/001906」
  • WordPressインポート後URL「/entry/2017/01/29/20170129001906」

これが移行手順で修正していたパーマリンク問題。
WordPressでの記事形式は、インポートした記事に合わせるためカスタム構造「/entry/%year%/%monthnum%/%day%/%postname%」を設定した。
新規投稿時もはてなブログインポート記事と同じ投稿フォーマットにするためである。
もし別の投稿フォーマットにすると、別のワードプレスに移転することになった場合、記事のフォーマットが2種類あるため、どちらかがインポート出来なくなる恐れがあるためだ。

が、WordPressでテスト投稿をしても、カスタム構造にならず、パーマリンクがワードプレスデフォルトの「/?p=%postname%」形式になっていた。
これについては、それほど調べていないが恐らく解決策があると思うため大きな問題とは思っていない。

Youtubeやニコニコ動画などのスクリプトが表示されない

これについては表示されればラッキー程度に思っていたのでさほどショックではなかった。一先ずGoogleフォト画像さえ表示出来れば、他の非表示コンテンツは後で修正してもいいと思っていた。

一応スクリプトの書式を挙げると以下のようになっている。

  • Youtubeスクリプト(動画をクリックさせてYoutubeを再生させる形式)
  • ニコニコ動画スクリプト

失敗原因と今後の方針

事前調査ではパーマリンクの修正が最大の問題だと思い込み、その程度なら何とかなるだろうとある意味安心してしまった部分はあった。
本当はテストサイトをWordPressで作って、テスト記事を色々なパターンで投稿を確かめるべきだった。楽をしようと思って一発切り替えを狙いすぎてしまった。

情報の調べ方もまずかった。
特にWordPressの「普通のインストール方法」に関してもっと調べるべきだったのとムームードメインやエックスサーバーにもっと突っ込んで問い合わせをすべきだった。
WordPressインストール前の「ドメイン設定」の部分についてもエックスサーバー側ネームサーバーへ登録されるというのは普通のインストール方法について理解していれば分かった部分だった。
世の中には色々な人がいて、移行も様々なケースがあるため、一発移行で上手く行く人もいると思う。が、自分の知識とケースではWordPressの知識が不足していて、このままでは上手くいきそうにない。

今後の移行作業を継続するなら、WordPressでテストサイトを作って記事の投稿ケースを確認することが必要だろう。
また、GoogleフォトをWordPress側で表示させる方法と、はてなブログ側の修正も必要になる。
スマホを記事公開直後から正常に表示させるためのプラグインやデザインも予め準備しておく必要がある。
移行を思い立ち、ここまでも過去記事の修正などで2週間程度作業しているが、更にこういった調査や作業が必要になる。または、このブログはこのままはてなブログを継続し、WordPressは勉強がてら全く別のサイトにするということも考えられる。

記事が少なくアクセスやインデックスがないもっと早い時期にWordPressへ移行しておけば良かったと移行作業をやっていて思った。
さすがにこのはてなブログも独自ドメイン化から約2年を経過しているだけに、WordPressに移るのも相応の代償が求められる。
移行か、それともはてなブログは継続してWordPress新サイトか。
結論はまだ出ていない。

追記:問題の調査と対応

以下、問題について一つずつ調査し、解決したものはこのエントリーに載せていく。

DNS関連で調査中の不明点
→ムームードメインに問い合わせし、1/29解決済み

  • 2が設定された状態でブラウザで「www.varis.jp」にアクセスした場合、はてなブログへのアクセスのみとなるのか。→ムームーDNS側を見ている状態なのではてなブログへアクセスされる。
  • 3が設定された状態でドメイン浸透期間後はブラウザで「www.varis.jp」にアクセスした場合、エックスサーバー側にアクセスされるのか。
    または、CNAMEレコードがムームードメインDNSに残っているので、「varis.jp」はエックスサーバー側へアクセスされ、「www.varis.jp」ははてなブログ側へアクセスされるのか。→ネームサーバーをエックスサーバーに切り替えた時点でエックスサーバーの設定を参照するようになる。
    (ムームードメインDNSを見ている場合はDNSキャッシュなどの古い情報を見ているがドメイン浸透期間で徐々に切り替わる。)
  • ワードプレス公開直前まではてなブログを参照させる場合、「www cname hatenablog.com」のCNAMEレコードはどのタイミングで削除すべきか。→レコード削除する必要はない。
    ネームサーバーをエックスサーバーに切り替えた時点でムームーDNSは参照されなくなる。

Googleフォト画像が正常に表示されない
→1/30ある程度調査済み

Googleフォトが表示されないのはWordpressでは既知の事象として認識されている。
理由としては、Googleフォト側で共有設定にしていないためらしい。
対応としては以下のどちらかで対応する。

Googleフォトに関しては直近でpicasaが使えなくなったりとGoogleのサービスでも変更があったのでWEB上でも試行錯誤の記事の方が多かったが、一応プラグインの「Photo Express for Google」を使うというのが一般的になっているようだ。
このプラグイン経由だとGoogleフォト側もパブリックに公開することなく画像を貼り付けられる。
「Photo Express for Google」の導入方法はこちらのエントリーが一番詳しく解説している。
http://blog.pleeds.com/web/wordpress-google-photo

但し、「Photo Express for Google」を使うにはプラグインを有効化しただけでは使えず、認証操作が必要になる。
これはGoogleアカウントにログインという話ではなく、GoogleAPIのOAuth認証同意のような操作が必要になる。筆者にも詳しくは分からなかった。
(はてなブログでのGoogleフォト貼り付けはこういった操作は必要なくGoogleにログイン出来ていれば使える。)
手順自体は上記エントリーに掲載されている。
ただ、Googleのアカウントというのは色々なサービスに紐付いており、Googleフォトも個人用のアカウントに紐付いた状態なので、よく分からないプラグインに認証操作をさせるのはかなり怖い。
使うにしても、Googleフォトで使うための別アカウントを取って認証させるべきだろう。個人用のアカウントを安易に使うことは出来ない。
そのため、画像についても、「Photo Express for Google」プラグインの使用を視野に入れつつ、はてなブログの記事のGoogleフォト画像を、別アカウントで再度Googleフォトの画像を使うように設定し直す必要があると思った。

→必要な作業:

  • Googleフォト用の別アカウントを取得
  • メインアカウントのGoogleフォト画像を全て別アカウントに移す
  • はてなブログ記事のGoogleフォト画像を別アカウントのものに入れ替える
  • 「Photo Express for Google」プラグインを別アカウントのGoogleフォトでWordpressから投稿してテスト

Amazletの体裁がくずれて画像も表示されない
→1/30ある程度調査済み

Amazlet用のWordpressプラグインを検索したが存在しなかった。
サポートブログも更新が古く情報はない。

AmazletのようなAmazon商品リンクのプラグインはWordpressでも沢山提供されている。AmazonJSなどが有名のようだ。
が、これらははてなブログに対応していないので、はてなブログの記事をWordpressに移すとAmazletのリンク部分は全てプラグインに変更しなければならない。

また、AmazonJSを使う場合もFTPで専用のディレクトリを作って設定するなどWordpress側への環境設定も必要のため、直ぐに使い始めることは出来ない。
AmazonJSなどを中心に表示出来るかどうかを検討する。

どちらにしてもWordpressではAmazletの使用を止める以外になさそうだ。

Youtube動画のスクリプトが動かない
→1/30解決済み

結果から言うと、はてなブログでYoutube動画を貼り付けた場合とWoredpressで貼り付けた場合ではフォーマットが異なっているため動かないと分かった。

以下のようにはてなブログではiframeに動画URLを入れている形だが、Wordpressでは

embedというタグのようなもので動画URLを囲んでいる。

はてなブログでYoutube動画貼り付けの書式

はてなブログのエクスポートファイルで無理やり一括置換しても出来るかもしれないが、Wordpress投稿画面で一つ一つ動画を貼り付け直すほうが確実だろう。

WordPressでは投稿画面から簡単に動画を投稿出来るようになっている。

投稿画面で「メディアを追加」

URLから挿入

Youtubeを開き貼り付けたい動画のURLをコピーする

URLを貼り付けると動画が表示される
右下の「投稿に挿入」を押す

投稿画面に動画が挿入された

Youtube動画に関してはこのように非常に簡単に動画貼り付けが行える。
なお、共有から貼り付けコードを出して埋め込みするという方法が解説されているが、エックスサーバーのWordpressではその必要はなくURLコピーペーストだけで貼り付けが出来る。

ニコニコ動画のスクリプトが動かない
→1/30解決済み

ニコニコ動画についても、はてなブログとWordpressでは動画貼り付けのフォーマットが異なっているため、そのまま移植しても動作しない。
このようにはてな側では徹底してWordpressへ移植してもコンテンツが表示されない仕組みを入れているので、ブログ移転が困難になっている。

はてなブログでニコニコ動画貼り付けの書式1

はてなブログでニコニコ動画貼り付けの書式2

HTMLに直接以下の書式で書いても動作する。(筆者はこちらの形式で指定)

WordPressでニコニコ動画貼り付けの書式

このようにフォーマットが違うだけのため書式を変換すれば使える。特に書式2の書き方とWordpressの書式は一括置換が可能かもしれない。確実にやるなら投稿画面で一つずつ挿入していってもいい。
Wordpressでニコニコ動画を貼り付けるのは非常に簡単に行える。
ニコニコ動画の貼り付けたい動画を開き共有ボタンを押し、貼り付けコードをコピーする。WordPress投稿画面でテキスト(はてなブログの編集画面では「HTML編集」に相当)にタブを変え、コピーしたコードを貼り付ける。

プレビューで見ると貼り付けられている。
ただ、問題なのは、ニコニコ動画の場合、従来のFlash版と新しいHTML5版がある。
Flash版については、上記のようにニコニコ動画の共有を押し、貼り付け用コードが表示されるので問題ないが、HTML5版の場合、共有に当たるボタンがなく、どこでコードを出すのかがまだ分かっていない。
ニコニコ動画サポートからの回答を抜粋して掲載する。

動画視聴ページ HTML5版(β)につきましては、誠に恐れ入りますが、一部Flash版にて提供されていた機能は現時点で未実装となっております。
ご面倒おかけいたしますが、ブログに貼り付け、貼り付けURLをコピーなどの機能をご利用される際には、Flash版のプレーヤーへとお戻しいただき、 お試しいただければと存じます。
※「Twitter」「Facebook」「LINE」で共有を行う機能は動画視聴ページ HTML5版(β)でもご利用可能です。(動画プレーヤーの各種アイコンをクリック)
※動画ページ上部「動画視聴ページ Flash版で視聴する」を押下いただくことで、これまでの動画プレーヤー(Flash版)がご利用いただけます。

HTML5はまだβでテスト段階であり、Flash版が残っているので暫くは動画の貼り付けは問題ないと思うが、今後貼り付けコードの機能が提供されなくなったとしたらニコニコ動画を使えるのかどうかは分からない。

パーマリンク設定がカスタム構造で投稿出来ない
→1/30解決済み(勘違い)

これについては自分の作業時の勘違いで、テストサイトで確認するとパーマリンクの設定を変えると全ての投稿のパーマリンク設定が変更されていた。
カスタム構造の「/entry/%year%/%monthnum%/%day%/%postname%」も反映されれていた。
なお、postnameの部分は、投稿時のタイトルが入り、例えば投稿タイトルが「test」ならURLがこのようになる。


これは一見便利そうだが、日本語タイトルをURLに持ってくると変換時に%が沢山出てしまい望ましくないため、投稿時には毎回パーマリンクのpostnameを付け直すという作業がWordpressでは発生する。

スマホ表示用プラグインやスマホ対応レスポンシブテーマの調査
→調査中

はてなブログの感覚ではテーマストアからデザインを選んでプレビューで見て適用するのだが、Wordpressの場合、ダッシュボードからテーマで検索して適用するパターンと、テーマ用に配布されたZIP等のファイルをPCにダウンロードしておき、ダッシュボードからテーマのアップロードをして適用するタイプの2種類があるようだ。
例えばPrincipleやSTINGERといった人気テーマもダッシュボードのテーマで検索をしてもヒットしない。これは自分でダウンロードしてテーマにアップロードするタイプのためである。

参考記事:STINGERのインストール方法

テーマのインストール方法
WordPressがインストールされた状態から「STINGER」テーマを適応するまでを説明します。WordPressインストールがまだの方はコチラテーマ「STINGER」のインストール方法...

スマホで使用可能という観点もあるが、テーマ選びで注意すべきなのは、インシデントコードが埋め込まれた悪意のあるテーマが配布されていることだ。このため、安易にデザインだけでテーマを選ぶのはWordpressでは危険だ。必ず、セキュリティ的に問題がないかどうかを事前に調べて使う必要がある。また、テーマやプラグインも日々アップデートされているため、ダッシュボードでアップデートのマークが出ていたら、自分でアップデートしていかなければならない。

スマホ表示はダッシュボードだけでは実際にどのように表示されているのか分からないので、実際のスマホで確認したいが、そうなるとどうしてもスマホ表示を確認するための別のドメインが必要になる。
メインのドメインは出来るだけ本番移行の時だけ使いたいので、そうなると別の独自ドメインを取る必要が出てくる。
→必要な作業:

  • スマホ表示確認用のドメインを取得
  • スマホ表示用のテーマをインストールしてテスト用ドメインでスマホ表示確認
  • スマホ表示プラグインを導入してテスト用ドメインでスマホ表示確認

このエントリーでは長文になったため、ここで記述は終わりにするが、WordPressへの移行事態は継続して行っていく。次回のエントリーはこちらで。

はてなブログProからWordPressへの移行前に必要な準備作業と今後の方針を確定
(画像掲載元:https://s.w.org/)当サイトについて、WordPress(ワードプレス)への移転を考えており、前回のエントリーでは移行作業を試みたが失敗したということを書...
SPONSORED LINK

この記事をシェアする