【実験】WordPressからEmDashへ引っ越ししてみた|古いサイトの移行の壁と、AIでテーマ再現・投稿まで

   web入門, WordPress入門| 

WordPressのメンテナンス、疲れていませんか?

モモンガです。私はここ数年、WordPressの保守にほとほと疲れていました。更新が多い、プラグインも多い、そこへPHPの脆弱性の問題まで重なって、「このシステムをこの先何年も使い続けるのは厳しいな」と感じるようになりました。

そこで、いま一番気になっている新しいCMS「EmDash(エムダッシュ)」を試してみました。

先に感想を言うと、ホームページの作り方も、更新の仕方も変わるかもしれないと感じる体験でした。昔作ったWordPressサイトの見た目を、AIがほぼそのまま再現してくれたのです。私はコードもデータベースも触らず、AIに言葉で指示しただけです。

ただし、データの移行にはいくつも壁がありました。この記事では細かい手順の解説ではなく、WordPressからの引っ越しにどんな壁があるのか、どんなサイトなら移行を検討できるのかをまとめます。うまくいったところも、つまずいたところも、そのままお伝えします。

動画も作ったので、あわせてどうぞ。

※この記事の内容は EmDash v1.4.0 で確認したものです。今後のバージョンで変わる可能性があります。

EmDashとは?WordPressと何が違う?

EmDashは、セキュリティで世界的に有名なCloudflare(クラウドフレア)が作ったオープンソースのCMSです。ざっくり言うと「Cloudflareの仕組みの上で動くWordPressのようなもの」です。

使ってみて分かった、WordPressとの主な違いはこちらです。

項目 EmDash WordPress
動かす場所 Cloudflare レンタルサーバー
ソフトの料金 無料(オープンソース) 無料(オープンソース)
かかる費用 Cloudflareの利用料(無料枠を超えると発生) サーバー代
本体の更新 コマンドで行う 管理画面のボタン
ドメイン 別途必要 別途必要

今回は無料枠では足りず、月5ドルのプランを使いました(理由は後ほど)。

今回引っ越しするサイト

実験台にしたのは、私が昔、身内のために作った動物写真家・宮崎学の講演情報サイトです。2005年から運営している古いサイトで、記事がたくさん溜まっています。

このサイトには、移行で問題になりそうな要素がそろっています。

  • 投稿158件、固定ページ34件と、記事が多い
  • 古い記事が多い
  • 日本語のスラッグが混ざっている
  • パーマリンクが「〜.html」形式
  • カスタムフィールドで項目を追加し、テンプレートの決まった場所に表示している

「昔からの記事がたくさんあって、今さら捨てられない」というサイトを持っている方は多いと思います。そういう方の参考になるよう、あえて壁がありそうなこのサイトで試しました。

今回やったこと・やっていないこと

KEITOさんの解説動画とマニュアルを参考に進めました。KEITOさんの動画では、ネームサーバーを書き換えてドメインを完全に移すところまで紹介されています。

 

私の検証は「古くて規模の大きいサイトが、無事に引っ越しできるか」に焦点を当てたので、次の範囲までにしました。

  • Cloudflareにドメインを追加する:やった
  • ネームサーバーの書き換え:やっていない
  • 表示の確認:仮のURLで確認

準備:CloudflareとEmDashの構築

作業は、VS Codeの中で動くClaude Code(AIのコーディングツール)に任せました。

実は私、しばらくClaude Codeを使っていなくて、VS Codeを開いたところで迷ってしまいました。そこでClaudeのチャットに「VS CodeでClaude Codeを動かす方法」から教わりながら進めました。AIの使い方が分からなかったら、それもAIに聞けばなんとかなります。

進め方はこんな形です。

  1. Claudeのチャットで「次は何を指示すればいい?」と聞く
  2. 返ってきた指示をClaude Codeに貼り付ける
  3. Claude Codeが実際にEmDashを操作する(必要なプログラムのインストールもやってくれる)

準備の手順は次のとおりです。

  1. Node.jsを入れる
  2. Wrangler(ラングラー)を入れる
  3. Claude CodeがWranglerにログインする
  4. ブラウザにCloudflareの許可画面が出る
  5. Cloudflareにログインした状態で「Authorize」を押して接続する

難しそうに聞こえますが、WranglerはCloudflareを操作するための道具のようなものです。この準備は最初の1回だけです。

無料プランでどこまでできる?

壁1:CPU時間の制限で、データベースの初期化が止まる

最初の壁は、無料プランのCPU時間の制限でした。1回の処理で使えるCPU時間は10ミリ秒までです。

そのため、データベースを初期化しようとしただけで、90件中48件で止まってしまいました。これはClaudeに聞きながら、PCからコマンドを実行することで解決しました。

壁2:画像の保存先(R2)はカード登録が必要

画像の保存先は、CloudflareのR2というストレージです。無料枠(10GBまでは0円)の範囲で使うつもりでしたが、請求先情報を入れないと先に進めないため、一度カードの登録が必要でした。

壁3:記事のインポートが何度も止まる

一番大変だったのが記事のインポートです。途中で止まってしまい、やり直すと続きから進みます。インポートを何度も繰り返して、51件 → 77件 → 134件と少しずつ増えていきました。

壁4:画像は無料プランでは移せなかった

大きな壁になったのが画像です。画像はURLの置き換えまで1回で通す必要があり、無料プランでは限界がありました。

最終的にWorkers Paid(月5ドル)に変更しました。CPU時間は10ミリ秒から最大30秒まで延びます。それでも画像の取り込みが止まったため、設定ファイルに「上限30秒」と明記して、ようやく完了しました。

※私の場合はこれで通りましたが、ケースによって違うかもしれません。

お仕事で見積もるときの注意

「EmDashは無料で使える」というのは、公開後のアクセス数や保存容量の枠の話なのかもしれません。記事が多いサイトの移行は、CPU制限に当たる可能性があります。

お仕事で見積もりを出すなら、「無料でできる」と簡単に見積もらず、月5ドル程度のプランも想定しておく方が安心です。

なお、公開後の普段の閲覧や更新が無料プランで足りるかはサイトの規模によるそうで、今回は確認していません。

WordPressとの接続とインポート

引っ越し元のWordPressにプラグインを入れる

引っ越し元のWordPressには、専用プラグイン「EmDash Exporter」を入れます。WordPressのプラグイン検索には出てこないので、自分でアップロードします。

  1. GitHubからプラグインをダウンロードする
  2. ダウンロードしたZIPを展開する
  3. 「plugins/emdash-exporter」のフォルダだけをZIPにまとめ直す
  4. WordPressの「プラグインを追加」からアップロードする

管理画面のメニューには「EmDash Migration」と表示されます。サイトチェックは全部合格でした。

壁5:「Failed to analyze WordPress site」で接続できない

ところが、EmDash側で「接続して解析」を押すと「Failed to analyze WordPress site」というエラーが出ました。移行キーでも、アプリケーションパスワードでも同じでした。

ここは何度も挫折しそうになりました。Claude Codeにログを調べてもらうと、WordPress側が認証を受け付けていないことが分かりました。

試したことは次のとおりです。

  • サーバーの.htaccessに設定を追加
  • セキュリティ系のプラグインを一時的に停止

これで接続はできましたが、何が決め手だったのかは分かっていません。プラグインのチェックに合格しても、実際につながるとは限りません。サーバーとの相性もあるかもしれないので、試行錯誤が必要になりそうです。

接続できると、投稿と固定ページを取り込む画面に進みます。

インポート後に見つかった問題

取り込みが終わって「やった!」と思ったのですが、実はそこからが壁の連続でした。

壁6:公開中の投稿152件が全部404に

一番驚いたのは、公開中の投稿152件が全部404(ページが見つからない)になったことです。

原因は日本語スラッグでした。日本語のスラッグが、元の文字に戻らない記号の形のまま取り込まれていたのです。

 

対象 取り込み後 対応
投稿152件・固定ページ1件 記号の形のままで404 APIで英数字に修正
カテゴリ4件・タグ5件 同じ問題が発生 APIで直せず、データベースを直接書き換え

とても面倒な作業なので全部Claude Codeにやってもらいましたが、それでもかなり時間がかかりました。

壁7:FTPで置いた画像は取り込まれない

WordPressの通常のやり方でメディアライブラリにアップロードした画像は取り込めました。一方、FTPで直接置いた画像は取り込めませんでした。今回は79か所が該当しました。

※本文に入れた画像の話です。テーマのデザイン素材は別に確認が必要です。

壁8:記事数は合っているのに、カテゴリが抜けている

なぜか記事数は合っているのに、152記事中4記事でカテゴリの紐付けが抜けていました。インポートをやり直したことが原因のようです。

記事数だけ見ていたら気づけなかったことなので、カテゴリごとの記事数も比べるのがおすすめです。

壁9:お問い合わせフォームが文字のまま

Contact Form 7はWordPress用のプラグインなので、ショートコードが文字のまま表示されていました。フォームは動かないため、今回は対応を見送りました。

AIが直してくれる。でも最後の確認は人の役目

これだけ壁がありましたが、AIが問題を見つけて、ほとんど直すところまで進めてくれました。AIと一緒なら、非エンジニアでも挑戦できそうです。

ただ、人が確認しないと見落とすところもあります。私はClaudeのチャットで指示文を作ってClaude Codeに渡し、結果を確認しながら進めました。

リダイレクトはどうする?URLは変わる

実際のお仕事では、検索や外部リンクが大事なサイトほど、URLが変わるのは大きな問題です。

EmDashに移行すると、URLに「/posts/」が付きます。例えば「/hello-world/」は「/posts/hello-world/」になります。

旧サイトのURL 移行で起きること
英数字のスラッグ(/hello-world/) /posts/ が付いてURLが変わる(外すにはテンプレート改修が必要)
日本語のスラッグ(/講演会のお知らせ/) /posts/ が付くうえ、今回は取り込むと404になった

古いURLから新しいURLへのリダイレクトは、今回は試していません。アクセスの少ないサイトなので、古いURLは404になってもよいことにしました。

URLをそのまま引き継げればベストですが、実際の案件ではリダイレクトの対応も見積もりに入れておく必要があります。

古いテーマをそのまま再現してみる

ここからが今回一番お伝えしたいところです。古いテーマをどこまで再現できるか試しました。

Claude Codeへの指示は、ざっくり言うと「ヘッダー、ナビ、3段組、左サイドバー、フッターを無理のない範囲で再現してください」というものです。

実際に渡したプロンプトの要点はこちらです。

WordPressで使っていたデザインを、このEmDashのサイトで再現してください。元サイトと見比べて、ヘッダー、メニュー、サイドバー、フッター、トップページの新着を、できるだけ近づけてください。

完璧でなくて大丈夫です。再現できたところ、難しかったところを分けて報告してください。今のデザインに戻せるようにしてから始めてください。

Claude Codeは、元のサイトの画像とCSSを流用して作ってくれました。かなり長い時間作業していたので、しばらく席を外して待ちました。

データを移しただけの状態は、こんな見た目です。データは入っているので、クリックすると記事は表示されますが、テーマは何も変えていない状態です。

そして、Claude Codeから報告のあった確認用URLを開くと……

見慣れたサイトが、ほとんど同じ見た目で表示されました。

これは昔、私が自分で手を動かして作ったサイトです。それを今度はAIが、別の仕組みの上に作り直してくれました。自分で作ったものだからこそ驚きました。ホームページ制作の仕事が変わるというのは、こういうことなのかもしれません。

細かい違いはありました

もちろん全部が同じというわけではありません。

  • カテゴリーの親子関係がなくなった
  • コメントのピンバックが取り込まれていない
  • ページ送りが「次のページ」だけになった
  • メンテナンスを放置していた元サイトの不具合は、そのまま引き継がれる

EmDash v1.4.0時点の結果なので、今後改善されるかもしれません。

管理画面から投稿してみる

本当にWordPressのように使えるのか、実際の講演情報を管理画面から投稿してみました。

ダッシュボードの右上にある「+Post」ボタンから新規投稿ができます。タイトルと本文を入れる操作は、WordPressに慣れていれば迷わないと思います。

  • アイキャッチ画像:Featured Imageとして設定できます。ただ、今回再現したデザインはアイキャッチが表示されないため、写真は本文に入れました。
  • 画像の挿入:本文の「+」から「画像」を選び、ドラッグ&ドロップで入れられます。
  • カスタムフィールド:開催日、場所、主催者を入力します。

カテゴリーは一度保存しないと出てこない

カテゴリーを選ぼうとしたら、入力欄が出てきませんでした。一度「保存」を押すと、カテゴリーを選べるようになります。今のバージョンだけの仕様かもしれません。

今回は「講演最新情報」のカテゴリーを選ぶと、トップページの新着一覧に出るように作ってあります。最後に「今すぐ公開」をクリックします。

「サイトを表示」ではデザインが反映されていない

管理画面の「サイトを表示」をクリックすると、デザインが適用されていない状態のサイトが表示されます。デザインを適用した確認用ページは、Claude Codeが作った仮のURLで見ます。分からなくなったら、Claude Codeに「デザインのURLを教えて」と聞けば教えてくれます。

確認用ページを更新すると、新着に投稿が表示されました。記事を開くと、入力したカスタムフィールドも決めた場所に表示されています。

写真も入って、普通に投稿できることが確認できました。

AIにチラシを渡して下書きを作ってもらう

EmDashで一番試したかったのが、AIに任せてサイトを更新することです。

Claude Codeに講演のチラシを渡して、こんな短い指示を出しました。

このチラシからタイトルと紹介文を作って、開催日、場所、主催を入れて、カテゴリーも指定し、下書きで保存してください。

途中で少しつまずきましたが、ちゃんと下書きを作ってくれました。文章はClaudeが作ってくれて、カテゴリーもカスタムフィールドもきちんと入っています。

作業を「スキル」にして次から楽に

次からも同じようにできるように、この作業をスキルにしました。Claude Codeに「これをスキルにしてください」と伝えるだけです。

スキルには、こんなルールを入れました。

  • タイトルは講演のタイトル
  • カテゴリは「講演最新情報」
  • スラッグは英数字
  • 写真は本文中に入れる
  • カスタムフィールドには場所と日時と主催者
  • 日付は曜日付き
  • 自信がない項目は報告する
  • 下書きで止める

これを「kouen-flyer-post」という名前のスキルとして保存しました。

使うときは、VS Codeを再起動してClaude Codeで新しいチャットを始め、入力欄に「/kouen」と入れて候補からスキルを選びます。あとはチラシを添付して「このチラシで講演情報を下書きで追加してください」と伝えるだけです。

スキルのおかげで、簡単に下書きまで保存できました。最後に内容を確認して公開ボタンを押すのは、人の仕事です。

始める前に知っておくこと(落とし穴)

これから試す方のために、気をつけたい点をまとめます。

落とし穴1:言語は最初に設定しておく

初期設定の画面では言語を選べません。私は指定しなかったので、記事やカテゴリの言語が「en」になってしまいました。

調べたところ、最初の起動前に設定ファイル(astro.config.mjs)で「ja」を指定しておく必要があるようです。後から変えると、全データの書き換えが必要になります。私はこの方法を実際には試していませんが、知っておいた方がよい注意点です。

落とし穴2:WordPressの日本語スラッグ

日本語スラッグは、インポートしてから直すのがとても大変です。取り込む前に英数字にしておくのが安全だと思います(取り込む前の変換方法は未検証です)。

落とし穴3:日本語検索で見つからない記事がある

私の環境では、文の途中の言葉が検索で見つからないことがありました。たとえば「クマ」で検索すると、11件中8件しか見つかりませんでした。

日本語向けの設定もあるようですが、管理画面からは変えられません。改善するには設定の変更やコードの追加が必要になりそうです(効果は今回検証していません)。

まとめ:どんなサイトならEmDashに移るべき?

今回の実験で、私の考えはこうまとまりました。

サイトのタイプ 判断
新しいサイト、小さいサイト ◎ 新しく作るなら壁はそれほど高くない
過去記事はあるが、検索からの流入が少ない ○ 大事な記事だけ選んで移せば楽
記事が多い、運営年数が長い △ 費用対効果を見て判断
検索からの流入や外部リンクが大事 △ URLが変わるのでリダイレクト対応が必要
プラグインで特殊なカスタムをしている △ そのままでは動かない
アクセスが多い △ 使った分だけ料金がかかる

新しいサイトや記事が少ないサイトなら、EmDashで作るのはそれほど難しくありません。WordPressから離れたいと思っている方におすすめです。

規模が大きく、検索流入や外部リンクが大事なサイトは、まだ移行を決めるのは少し早いかもしれません。ただ、費用と効果が合うなら、私は移りたいと思いました。

過去のお宝を全部同じように運ぶ必要はありません。残す意味のある記事を先に選ぶだけで、手間はかなり減らせます。

最初は「セキュリティ警告がすぐ来るWordPressの管理から、少しでも解放されるなら」という気持ちで始めました。でもAIに相談しながらサイトを作り、更新まで任せてみて、気持ちが変わりました。長年WordPressでホームページを作ってきた私には、とうとうゲームチェンジャーが来たのではないかと感じられたのです。久しぶりにワクワクしました。

なお、今回のサイトは公開せず、実験として終わりにしています。お問い合わせフォームの送信も試せていないので、また別の機会にやってみたいと思います。

  • ※この記事の画面・操作結果は EmDash v1.4.0 で撮影した時点のものです。
  • ※私の環境で試した結果なので、すべてのサイトに当てはまるわけではありません。移行する場合はご自身でも確認してください。
  • ※Cloudflareの料金や無料枠は変わる可能性があります。最新の情報は公式サイトでご確認ください。

 

   web入門, WordPress入門| 

  関連記事

AIのチャットロボット「ChatGPT」登録方法と使い方

またもやすごいAIが登場。「ChatGPT」のWebアプリ版。現在は無料で使えるということで、早速使… ≫続きを読む

質問:わたしのホームページ検索で出てこないんです・・・その原因

先日、「うちのホームページ、検索しても出てこないんです」という相談をされ、見てみたところ、本当に、サ… ≫続きを読む

件名:Document2 というメールは開かないで削除 メールの受信がストップする場合もあるようです

「件名:Document2」というメールが送られてきた場合、メールを開かずに削除してください。このメ… ≫続きを読む

(WEB制作入門4)WordPressって何?

WordPressは、無料で配布されているブログを作るソフトです。 普通のソフトは、ワードとかExc… ≫続きを読む

Canvaを使ってみました。「イラレやフォトショがなくても、簡単な画像くらいなら自分で作成したい」方のための….

私はEC実践会の自主勉強会や、お客様の指導で、HPの作り方をレッスンすることもあるのですが、そんなと… ≫続きを読む

シドニー with ホームステイ 体験記

ただいまシドニー郊外にホームステイしながら仕事をしています。 忘れないうちにシドニー・ホームステイの… ≫続きを読む

Q:インスタやってるからブログは不要?

SNSがとても手軽な時代なので、インスタやLINE、ツイッター(エックス)など、SNSをしていれば、… ≫続きを読む

【Q】リニューアルしてページ名がindex.htmlからindex.phpに変わります。名前が変わると、過去にいろんな別サイトやブログからリンクしているので、リンク切れが起きてしまうんですが、どうすれば!?

リニューアルでindex.htmlをindex.phpに変更することって結構ありますね。静的HTML… ≫続きを読む

初めてのWordPressにおすすめ twentytwelve

かわいいネイルサロンのホームページを作成させていただきましたので紹介します。 長野県駒ヶ根市のネイル… ≫続きを読む

(WEB制作入門1)静的サイトと動的サイトの違い

静的サイトの作り方 2000年くらいのこと。わたしがWEB制作をお仕事としてやり始めたころのことです… ≫続きを読む

▲ページ先頭へ