引っ越し記録！！第4回！！
うーん、毎週1本このテーマを扱っているので週刊連載のコラムみたいになってきましたねぇ。
自分の備忘録としても有用なので書いていくのは楽しいんですが、当時の苦労を思い出すと少し胃が痛くなりますｗ
さぁ！そんな僕の汗と涙と涙と汗とry行ってみよう！！(・∀・)
前回の記事はこちら↓
サーバーの契約
前回は画像のダウンロードが全て終わったのでここからは本番に入っていくわけですね。
ローカル(パソコン内)でいじるステージはもうおしまいです。
遂にここまで来てしまいましたね…サーバーの契約から始めていきます。
以前もお話ししましたが契約するサーバーは何となく決めてあります。
「ConoHa Wing」です。値段、容量、メニューの見やすさ等からこちらを選択。
コノハの新規契約を進めていきましょう！！
年数が長くなれば月額が安くなります。今回は一応1年契約で進めていこうかと
WordPressを使用する方なら最初からサーバー内にWordpressをインストールした状態で始められる簡単仕様
ConohaWingは長期契約すると独自ドメインが無料です。(驚きの2つまで無料)
後から独自ドメインを設定できますが、ここは最初から決めたいと思います。
独自ドメイン＝HPやサイト・ブログのアドレスになりますので慎重に！！
うーん、何にしましょうかねぇ…。。。
実は以前のライブドアブログは「やがみんの作業倉庫」を英語変換しただけのサブドメインでした。
まぁ打ち込み間違いで
「 yagami-w0arehouse.blog.jp 」にしてしまったんですけどね！！！
本当は「wearehouse(作業倉庫)」が正しい
ここは迷いますが僕の名前「八神秀人」を前面に推していきたいですし、打ち込みやすさも考え
「yagamihideto.com」にしようと思います。
今思えば「yagami-hideto.com」とかでも良かったかも…？？
な？独自ドメイン決定は慎重にね！！！ｗ
契 約 完 了
とりあえずの初期設定が終わったので自分のサイトを確認していきましょう。
ここから今のブログにまで作り上げました。ほんの2か月前なのに感慨深い…。。。
うほー！！すげー！！！しっかり出来上がってるー！
ここからどうしたらいいのか全くわかんねーｗｗｗ
昔HPを作った時の感動を思い出しますねぇ…。
だって考えてみてください？？契約するまでここには何もなかったのに、契約したらここに新しいページができるわけですよ！！
楽しくない？？
さて、これで最低限の準備は整いました。
ブログのインポートをしていく前にやりたい事があるのでこちらを設定していきます。
キャンペーン中は安いので
サーバー探しているならコノハをどうぞ！↓
WordPressが入っているサーバーの初期設定等
さっさとWordPressちゃんを弄って新ブログに切り替えていきたいのですが、ここはハヤる気持ちを抑えながら進めていきます。
まずは「ConoHaWingのコントロールパネル」に飛びます
「サイト管理」→「サイト設定」と移動していき上の画像のページへ。
- かんたんSSL化
SSLとは「サイト保護機能」です「http」→「https」に代わり安全な接続として閲覧者に優しいサイトになります - コントロールパネルプラグイン
ConohaWingのコントロールパネルに飛ばなくてもWordpress管理画面からコノハコンパネの設定を変更する事ができるようになります - 自動キャッシュクリアプラグイン
人によっては必要ありません。Wordpressのキャッシュデータ(履歴)を一定期間後に消去してくれるメモリクリーナーみたいなプラグインです
これらを有効化・インストールしていきます。
今の3つはボタンを押すだけで簡単に設定が終わります
SSL化は有効化してから少し待たないと反映されない場合あり。
これらは枠内をクリックするだけな簡単仕様。使いやすくてGood。
次は「サーバー内」の「Wordpress」の「管理画面」に行きます。
管理画面に入ったら「設定」をクリック
だいたいどのVerのWordpressを使用していてもこんな感じのはずです
ここは少し混乱しやすいですが「Wordpress」の管理画面なので注意！
「サーバー(ConoHa)」と「Wordpress」って単語がゴリゴリ出てくるから混乱しますよねｗ
関係性としてはこんな感じです。
- 「ConoHaWing」は「サーバー」を貸してくれる所
- 「サーバー」はインターネット上の「データ置き場」
※HDDやSSD、USBメモリがWeb上にあるようなものです - 「サーバーの中にWordPress」が入っている
- 「Wordpress」とは「サイトを作るシステム(プログラム)」
さて話がそれましたので本題に。WordPressの管理画面：設定項目内を見ていきましょう。
「検索エンジンがサイトをインデックスしないようにする」にチェックを入れます。
重複コンテンツなどのペナルティはあとでGoogleからの評価に響くので引っ越し終了までは検索エンジンのロボットが来ないようにします
これは簡単にいえば「Googleとかから見えないようにするね！！」という機能です。
移転するまではテストページを作成したり、インポート途中では旧ブログと重複したりするのでとりあえずGoogleから見えなくします(noindex化)
移転が無事完了したらここは戻すので忘れないように！！
ブログ引っ越しデータをWordpressインポートする準備
パーマリンク設定
ブログのインポートをすると今までの「内部リンク」が機能しません。
内部リンクとは「同じホームページ内・サイト内の別のページに飛ばすリンク」ですね。
例えばここに2つのリンクを用意しました。
このYouTubeのアカウントは僕のですが、この「やがみんの作業倉庫」と同じサイトではありません。
デジタルな表現をするなら「YouTubeのサイト内の1つである「八神秀人」のページ」ですね。
しかし「OBS」の記事はここ「やがみんの作業倉庫」内のサイトページです。
同じサイト内に飛ばすリンクは「内部リンク」
他のサイトに飛ばすリンクは「外部リンク」なわけです。
ん？なんでこの説明をって？？
ブログインポートをした場合、バックアップ当時そのままを再現します。
外部リンクの場合はそのままでも機能します。他のサイトは引っ越ししていないですから。
問題となるのがこちら「内部リンク」
同じサイト内のページが全て移転しているのでこのままだと「旧ブログ」に飛ばされます。
ここを簡単に直す方法の準備が「パーマリンクの設定」です。
細かく話すとクッソ難しい話になるのでシンプルに説明すると、
「新しく作るページのアドレスを〇〇という順番にしてね！」という話です。
旧ブログの記事ページのアドレスは全て
「https://yagami-w0arehouse.blog.jp/archives/〇〇〇.html」という形式でした。
パーマリンク設定で
「https://yagamihideto.com/archives/%postname%.html」という形式にします。
「%postname%」部分は旧ブログでの「〇〇〇」に当たる部分です。
「/」と「archive」「％postname％」を足して完了。簡単ですね
この設定をすると新ブログの方は旧ブログと同じく記事のアドレスを作ってくれるようになります。
これで内部リンク関連の準備は完了です！
各種プラグイン・ソフトの導入
- MovableType・TypePadインポートツール
livedoor、ameba、FC2、はてな等のブログサービスで生成したバックアップデータを
WordPressにインポート(読み込み)させるツールです
WordPress内の全ページを検索し置換してくれるツール
例えばWebページ内の「リンゴ」を「バナナ」に全部書き換えたい！なんて事ができちゃいます
以上2点のツールをWordPressにインストールしていきます。
ついでにパソコン内に「FFFTP」というソフトをインストールしていきます。
- FFFTP2.0
ダウンロードはこちらから
インストールは「次へ」を押すだけの簡単な仕様。これさりげ僕が中学の頃からあるようなソフトな気が…
これらが移行作業時に使える子たちなので今回は必須！
使い方などは後述。
テーマの変更
これは別に今じゃなくてもいいのですが、ついでなのでやってしまいます。
テーマとはそのまんま「サイトの見た目」です。
先ほどのド・シンプルな見た目で進めていくには僕のテンションがもたないのでｗ
WordPressテーマを変えるのは簡単。
「外観」を開いて選んで、はい。終了。
とりあえずcocoonを選ぶなら「cocoon child」を選べばOK
有料テーマである「Sango」や「JIN」なんかも気になりましたが、今回は無料かつ基本である「cocoon(child)」を選択。
あとでどうしても必要になったらまた改造すればいいんです！！これぐらいの後悔ならありあり。
旧ブログからのデータインポート
ここまで終わったのなら、記事(文字データ)をインポートしていきます。
先ほどの「MovableType・TypePadインポートツール」を使用してWordPressにデータ入力していきます。
「ツール」→「インポート」画面にアクセスすると先ほどの「MovableType・TypePad」があるので「インポーターの実行」を選択
ライブドアブログからダウンロードした「バックアップデータ」をアップロードして読み込ませます。
最初から全ての記事をインポートしようかと思ったのですが、どういう風にWordpress上で反映されるか試したかったためまずは1記事だけ読み込ませることに。
成功すればカテゴリ分け、ページリンクなど全てそのまま再現してくれる高性能ツール
重複したコンテンツは追加しないという有能さ。これ無料なのは凄いわ。
さ、あとは待つだけ！余裕余裕☆！！
んーーー？？？？
読み込まないぞ？？？
というわけで一回目のインポートは失敗。なぜや。
MovableType・TypePadの処理バイト数を上げる
いくつか記事を読み込ませてみるとテストに使用した「ちびっこヒーローズ～～～」の記事だけがダメな模様。
文字ベースなので何が問題なのか「？？？」状態。
調べてみると、どうやら「MovableType・TypePadインポートツール」の処理上限を超えているかもしれない事が判明しました。
要点だけ話すと「初期設定のままでは1行に8192バイトを超えた場合処理ができない」らしいです。
「ﾊﾝｶｸﾓｼﾞ(hankakumoji)」は1文字1バイト
「全角文字」は1文字2バイト使用します
あらー＾＾綺麗に1文字オーバーしてますねぇ＾＾奇跡かな？？＾＾
※「8190」と書いていますが「8192」の間違いです
バックアップデータを確認するとまさにコレ。
見事にByte数をオーバーしていました。
このままではインポートができないので、
「プラグインエディター」機能を使用しプラグインの改変を行います。
プラグインエディターを開く
！自己責任でお願いします！
- 右上の「編集するプラグインを選択」から「MovableType・TypePadインポートツール」を選択
- 「function fgets($fp, $ler=8190)」を検索
- この「8192」部分に「0」を足して「81920」にする
これで81920Byte処理ができるようになりました。
全角で言えば1行に40,960文字ですね。
無いとは思いますがもっと桁数を増やして処理数を増やしたいのであれば「00」や「000」と追加してみてください
さて、これで先ほどと同じくバックアップを読み込ませてみると…
しっかり「スマートフォンアプリ」へカテゴリ分けもされています
できたー！！！！
とりあえずはこれでインポートのチェックは完了です。
画像をサーバー内にアップロードする
次は「FFFTP2.0」を使用しサーバー内のデータフォルダにアップロードしていきます。
まずは「FFFTP」にサーバーの場所を教えなきゃいけないので各種アドレス・パスワード等を拾ってきます。
これらの設定を書いていくとキリが無いので今回は割愛させていただきます
新規ホストやらなんやらまるでタイムスリップしたような気分になりますね
昔はホームページをHTMLで作ったらこういったソフトでアップロードしてたんやで(インターネット老人会)
これが無事動くようになれば「FTP」という通信規格を使用してサーバー内のアップロード・ダウンロード・確認が簡単にできるように
FFFTPを開いて各種設定類を決めていきます。
FTＰ関連はながーーーい説明になるので細かい説明は今回割愛。
もし「知りたい！！」なんて方がいたらコメントやTwitterへ連絡ください。
旧ライブドアブログと同じように画像フォルダの構成を作っていきます。
該当する場所に「imgs」フォルダを作り、前回ダウンロードした画像データをアップロードしていきます。
今回は画像データのみですがサーバー内にはどんなデジタルデータもアップロードする事ができます
見れるかどうかは別の話なんですけどねｗ
一応「Google chrome」や「Firefox」などのブラウザを使用し、表示されるか確認します。
何枚か確認した所、問題なく閲覧できたのでOK!次に行きましょう！
Search Regexを使用してリンクを変更
「Search Regex」は「検索した文字列」を「設定した文字列」に「書き換える(置換)」するプラグインです。
先ほどのパーマリンク設定で少し触れた内部リンク、そして画像のリンクをこれで書き換えます。
画像表示するためのHTMLは
≪例≫
旧：<img src=”https://livedoor.blogimg.jp/yagami1120/imgs/5/f/5f810152-s.jpg>
新：<img src=”https://yagamihideto.com/wp-content/uploads/imgs/5/f/5f810152-s.jpg>
この画像はこれです⇙
内部リンクのHTMLは
≪例≫
旧：<a href=”https://yagami-w0arehouse.blog.jp/archives/hello-world.html>
新：<a href=”https://yagamihideto.com/archives/hello-world.html>
このURLリンクはこれです。
以上のように変更していきます。
よーく見てもらうとわかるのですが前半部分しか書き換える必要がありません。
置換すれば旧から新へすぐ移行ができ、作業量を減らせる。
そのために今まで各種準備が大変だったわけですね。
「a href」という「内部リンク」を変えたい場合は「ヤガミウェアハウス」を「八神秀人.com」に置き換えるだけです
「https~~」みたいな書き方が変わらない所は置換する必要がありません。画像データも同じように変換していきます
と、これだけで完了！
ぱっと見は難しいですが「検索入力」「置換する文字」「全て置換」と3ステップで終了。
さて、記事を確認してみましょう！
うほー！できたぞー！！！
ちょっと表示されていない画像が何枚かありましたが…
画像が表示されていないのは前回の記事で話した「少しだけダウンロードできなかった画像」です。
これは手元のストックから画像を上げ直せば…
問題なし！！
やったね！！これでインポートチェックが無事終わりました！
あとは今までの記事を一括インポート→置換していくだけです。
引っ越し作業が大分進んできました
インポートチェックが終わったので残りを一気に仕上げていきます。
先ほどの「MovableType・TypePad」を使用し一括でブログバックアップのインポート。
「Search Regex」を使用してインポートした記事の内部リンク・画像を一括置換。
計300以上の記事が無事Wordpressに移行できました。
簡易的にチェックしていき、少し息抜き。
WordPressを開設した時に最初から入っているページを少しいじってみてページ自体の編集はどんな感じにしていくのかを体験してみます。
それが先ほどの≪例≫で貼ったリンクページです。
そもそもWordPressの書き方がわからないと意味がないですからねｗ
ここで少し慣れておいたわけです。
細かい画像チェックやリンクチェック等まだまだ確認点は大量にありますが、大きな山を一つ越えたようなもんです！
ここから壊滅的な失敗は基本的に無いはず！！
いやー、長かった！！
ここらへんで今までの苦労が一気に解決したような気分に…！！
もう「0から始めたわりに自分って天才！？！？！」なんて調子に乗り始めてきました。
まぁ。この後にまた足元救われるんですけどね。
というわけで今回のお話はここまで！
引っ越し作業も大分形になってきましたね！！次回をお楽しみに！(・∀・)！
コメント