お久しぶりです
外出自粛の中皆さんいかがお過ごしでしょうか。
ネパールで心機一転精神的にゼロからやり直し再スタートしようと吹っ切れたのですが，この外出自粛期間は僕にとって願ってもない好機だった
ネパールのロックダウン中。もしくはその前からやりたいと考えていたことの一つとして、独自ドメインで自分のサイトを作るというのがあったので帰国後最優先で取り組んだ。
新ブログ開設といったが、旅ブログを自分のサイトで運用したかっただけなので正確には今まではてなブログで育ててきた記事を全移行したのほうが正しい。
まぁ一からブログを作るよりも移行のほうがよっぽどめんどくさいんだけども。
さらにはこれがPC音痴＆プログラミングが大の苦手（というかHTMLやCSSに至っては完全に独学）の人間にかかれば全く進捗が出ず、ある程度形にできるまで一か月もかかってしまったというわけ。
今回はその苦労話とともに独学でつけた簡単な知識だけ話していきたいと思う。
技術的な話は簡易的に話すので、実際にやりたいと思ったら参考にしたサイトを添付しておくので詳しくはそこから理解していただければと思う。
また、独学でつけた知識なので、間違いがあったらこっそり教えていただけると嬉しい。
ブログ移行した理由
まずは運用していくサイトを立ち上げる必要がある。
新しいサイトはワードプレスを使って開設することにした。ワードプレスの一番の魅力は魅力的なデザインが簡単に手に入り、知識がなくても自分の感覚的にデザインを手直しできること
はてなブログはある程度のデザインであれば無料で手に入れることができるが、それより先のデザインの変更、機能の追加はHTMLというHPを構成する言語と、CSSというデザインを変更する言語をいじる必要がある。
今まで運用してきたはてなブログには背景画像やgoogleの翻訳ツールがついていたと思うが、あれも
ヘッダー下にこのようなHTMLが組み込まれている。これも夢ランに出発する前の準備段階で一から勉強して入れたい機能を入力していった。
ヘッダー画像の拡大や、背景画像がスクロールしないようにするのは非常に苦労した。
しかしワードプレスはプラグインというデザイン変更のアプリのようなものをダウンロードするだけでコードをいじらず感覚的にデザインをいじることができるようになる。
あとはアドセンスの獲得や自分のサイトならば母会社がないので自分のサイトがなくなる心配がないということからっ港を決意した。
新ブログの開設
自分のサイトをもつには独自ドメインと自分のサーバーを獲得する必要がある。
独自ドメインとは住所、サーバーとは借りるアパートのようなものである。
場所と住所を借りれば自分の居場所を確保できるということである。
僕はこの二つをワードプレスからセットで購入(契約)した。
ドメインはお名前ドットコムなど運営しない別サイトから入手することもできるが、結局この二つはセットで購入する方が安いことが多い。
記事データ抽出
まずはてなブログのデータを抽出していく。
設定☞詳細設定の下のほうにあるエクスポート：記事のバックアップと製本サービスのところからワンクリックでtxtファイルでダウンロードできる。
機能的にはこれをワードプレス側にインポートするだけで記事の形として”表示することは”できる
しかし本当に苦労したのはこれからだった
ワードプレスのファイル格納
想像してもらえれば容易にわかると思うが、自分のサイトのデータはネット上のファイル内に格納されている。
オフィスを使って作成したデータはHDD内のフォルダに格納されているが、サイトのデータは当然HDD内にはなく、ワードプレス側から指定されたフォルダに格納されているのだ。
しかしそれがどこにあるのかさっぱりわからず、この知識をつけるのに2週間かかった。
結論、ワードプレスのデータはFTPファイルに格納されていて、それを参照するためにはFTPクライアントソフトを用いて自分のFTPにログインすることで参照し、データをいじることができるようになる
いくつかFTPクライアントソフトを試したが、僕はワードプレスでも使用を勧めているFileZillaが最も使いやすかった。
ここからダウンロードできる
このサイトを参考にした。FTPアカウントやパスワードは独自ドメイン・サーバーを取得した際のメールに記載がある。単語が分からないのは致命的だが、初めからわかっていたら取得した際にわかっていたんだろうなと思う
FTPファイルへ画像の格納
そしてその画像をFTPクライアントソフトを用いてwp-contents内にimgフォルダを作成し、すべての画像をFTP内にインポートした。
画像HTMLの変更の必要性
先ほど、元ブログから記事データをインポートしただけで記事は読めるようになっていると説明した。
それにもかかわらずまだ作業の説明をしている理由は、元ブログの記事データのままでは画像はモトブログのサーバーから引き出している状態であるからだ
つまり、この時点で参照している画像はすべてはてなブログから引っ張り出しているというわけ。
事実、この時点の画像を開くとはてなフォトライフという、はてなの投稿した全画像が格納されている画像フォルダに飛ぶ。
このままだと、新しいブログを開設したのに、元ブログに依存している状態であり、元ブログを削除した時、すべての画像を見れなくなってしまう。
そのため、元ブログのすべての画像ファイルも新ブログの画像フォルダに格納しなおす必要があるというわけ。
画像HTMLの変更
序盤に話したように、HPはHTMLというコードにより作成されていて、画像を格納されているフォルダから引き出し表示するためにもこれを用いている。
<div><a class=”hatena-fotolife” href=”http://f.hatena.ne.jp/chocolatajump/20200411083332″><img class=”hatena-fotolife” title=”f:id:chocolatajump:20200411083332j:image” src=”https://cdn-ak.f.st-hatena.com/images/fotolife/c/chocolatajump/20200411/20200411083332.jpg” alt=”f:id:chocolatajump:20200411083332j:image” /></a><div>
これがはてなブログで画像をはてなフォトライフから引き出しているHTML。ほぼすべての画像がこのコードでフォルダから引き出している。
これを、すべてワードプレス内の画像フォルダから引き出すためのコードを作成する必要があった
<div><img class=”alignnone” src=”https://smaileciyrcle.com/wp-content/uploads/20200411083332.jpg” /></div>
これがそのコード
さらに10日かけてコードの意味を勉強し一から自分で作成した。
先ほど参考にしたサイトには、一括置換時に使える正規表現(次章にて説明)で一括置換できるはずだったが、僕が異なるノートアプリから共有して画像投稿していたせいか、コードが複雑で一括置換できなかったため一から自分で作る羽目となった
一括置換がしやすく、かつはてなブログ時代のコードを残さないために最小限かつシンプルなコード作成を目指した。
メタ文字を用いた正規表現による一括置換
最後にすべての画像コードを先ほど作ったコードに置換する必要があるのだが、如何せん僕のブログの記事数は優に400を超え。画像ファイル数は8000．
当然すべて一つ一つ書き換えていたら時間がいくらあっても足りないのでコードを一括置換する必要がある一括置換するために必要なのがメタ文字を用いた正規表現
正規表現とはコードのある一定の部分を指定し検索する表現方法である。これの優秀な点は、ある一部分のコードが違っても書き方次第では選択することが可能という点である。
その、ある一部分のコードの書き方が違っても選択する。つまり任意の文字列でも選択してくれる文字をメタ文字という。
このサイトが🐵どころかチンパンジーの僕でも理解できたのでわかりやすくお勧めのサイトである
/<a.*/images/fotolife/.*/(.*?).(jpg|png|gif)”/
↓
<a href=”https://smaileciyrcle.com/wp-content/uploads/$1.$2″><img class=”alignnone” src=”https://smaileciyrcle.com/wp-content/uploads/$1.$2″></a>
やたら変換前の文字列が短いのは.*のメタ文字で任意の連続する文字列を選択しているため
画像のHTMLは格納するフォルダさえ同じなら.jpg前の数字の羅列（パーマリンク）さえ同じなら同じ画像を示すことができる。今回ははてなの画像をそのままダウンロードし、ワードプレスへそのまま格納したためそのパーマリンクが同じなので、それ以外書き換えれば変換できたというわけ。
これもわけわからな過ぎて
このように一つ一つ実験しながら正解を探した。本当に苦労したので二度とやりたくない
そしてここでようやくはてなブログに依存することなくワードプレスのみで運用できるようになったのである。
デザインの変更
ここからは楽しかった。自分のインスピレーションのままにデザインを変更していくのである。
それでも苦労したことはある
ヘッダー画像。
ここには何枚か画像が登録してあって、ページ読み込みするたびに画像がランダムで変化する仕様にした。
凝ったのでぜひ何度も読み込んで旅の軌跡の画像を楽しんでほしい
もう一つは
ロゴ画像
このロゴはサイトを使ったりいろいろ試したのだが、結局自分で作ったものが一番気に入った。
この画像をpngファイルで白抜きするのが一括変化せず一苦労だった。
背景削除もめんどくさかった。要は微妙に色が違うんだろう
改善点
まだ治す部分が多くある
まず、
ヘッダー画像の設定
移行したのでヘッダー等細かい設定は消えてしまったのですべての記事文選択しなおさなければならない…その数430,,,
気が遠くなりそう
はてな文字検索の削除
はてなには文字列の意味を辞書のように説明してくれる機能があったのだが、そのリンクも今や不要。それなのにリンクだけ残ってしまって不自然。
各記事に無数とあるこのリンクをすべて消さなければならない、、、
気が遠くなry）
あとはメニューバーとか翻訳バーつけて読みやすく、おしゃれなサイトに変えていきたい
まとめ
ブログ移行はめちゃくちゃ大変
特に不満がないならあまりお勧めはしない。
でも、苦労した分このサイトは非常に気に入っている。投稿したい記事もたくさん考えている
最後に、いきづまったとき協力してくれた皆さん本当にありがとうございました
新ブログも大事に育てていきますので皆さんこれからもよろしくお願いします
ランキングに参加しています。一読一クリックお願いします^^
コメントを残す