Vscode on Xainome Blog

CodexでHugoサイトを効率化！AIコーディングで移行作業を自動化

Sat, 27 Jun 2026 00:00:00 +0000

Codexについて

使用理由 - Codex

codexとはOpenAIが提供しているAIコーディングまたはAIエージェントになります。Codex自体は1年くらい前からローンチされており、私も存在自体は知っていました。それ以外にも他のAIコーディングも名前ぐらいはある程度把握しています。

今回Codexを選んだのはシンプルでChat-GPTのPlusプランに加入しているからですね。他のAIコーディングでもいいのはあるとは思いますが、他のサブスクに変更するのも面倒ですしそこまで大きな差が出ないのであればこだわる必要はないと思います。

無料でAIコーディングできるものであれば過去に試してみたClineやContinueがあれば無限にできると思います。制限付きならGoogleのAntigravityやCopilotでも十分だとは思います。

本題ですがそもそもなぜAIコーディングを使うことになったかというとWebサイトを移行するにあたって変更するものが多くあったからです。例えばフォームの表示がうまくいかない、リンクを最適化したい、不要な画像の削除をしたいなど人力でやるには手間がかかるようなものをやりたくなかったからです。

Codexの導入

というわけでまずはCodexを導入します。VScodeを事前に入れているので拡張機能からCodexを探してインストールしていきます。もちろんCodexのアプリを入れてみましたが、vscodeからアクセスできるならそちらが楽だと思います。特に使いやすさに大きな差は出ないと思いますので。

Codexへの指示だし

最初に聞いたのはフォームがうまく表示されなかったことですね。私がアイキャッチ画像で使っているイルカの画像が表示されなかったり、先頭の記事が枠にはまってないなどの事象が起きていました。というわけで以下のように指示を出して聞いてみました。

これはHugo + PaperModのサイトです。
まずプロジェクト構成を確認してください。
まだファイルは編集しないでください。
確認してほしいもの：
- hugo.toml
- contentフォルダー構成
- themes/PaperMod
- layoutsフォルダーがあるか
- publicフォルダーがあるか
- PaperModテーマが正しく入っているか
- “found no layout file for html” の警告が出る理由
原因を簡単に説明してください。
その後、安全な修正案を出してください。ただし、私が許可するまで編集しないでください。

作業とその確認

Codexを使うにあたってファイルのアクセスやネットの利用などが当然あります。その時に承認を求めるかどうかがあります。私は不安なタイプの人間なので確認を求めるようにしています。面倒であれば代理で承認やフルアクセスでもよいかと思います。会社のPCであればそもそも利用を禁止されるかもしれませんが。

次に実際に質問して編集を行ってもらいます。今回お願いしたのは画像の圧縮とコピーですね。特にコマンドを聞かれなければフォルダの中身を確認して表示してもらえます。

次に以下のように聞いてみました。そうするとコマンドで確認しようとするのでそれのアクセス許可確認が行われます。特に問題なければ1で今後も聞かれたくなければ2を選択してよいと思います。

他にも確認事項などで聞かれることがありますが、基本的には"はい"で問題ありません。というわけで最終的にはこうなりました。私の想定通りだったので特に問題ないですね。中身も確認しましたが特に問題なさそうでした。画像も圧縮されてましたので。

といった具合でうまく表示されてなかったり、リンクを変えたいけど大量に変えることになる場合はCodexなどのAIコーディングを使うとかなり楽になりますね。これがわかると個人開発が捗るというのもうなずけます。もちろんセキュリティやアプリをローンチする場合はまた別の障害が出てくるとは思いますが。ではでは。

WordPressからHugoへ移行中！GitとCloudflare Pagesで無料運営に挑戦

Mon, 22 Jun 2026 00:00:00 +0000

WordpressからHugoへの移行方法

ニュージーランドでのロードトリップが一通り落ち着いて車も売り、やることがなくなったので前から考えていた無料でサイト運営をしていこうかと考えています。ちなみに私が使用していたサーバーはConohaになります。

なぜConohaにしたかと言われたら特に理由はないですね。Wordpressを使ってサイト運営してみようと考えて調べた結果、たまたま見つけた個人ブログで紹介してたからだと思います。

Hugo+Git+Cloudflare Pagesとは

私はWordpressについてはまだまだ知らないことも多いとは思います。例えば会員機能は一個人で使うことはほぼないですね。利点としてはGUIで使いやすい、複数人で運用しやすい、学習コストが低い。欠点としてはサーバー代、表示が遅い、古いプラグインのセキュリティ問題。これは私が体験しただけですので改善方法はあるかと思いますが。

今回移行するにあたって試してみるのはHugo+Git+Cloudflare Pagesですね。Hugoはmarkdown形式の書き方からHTMLへ変換するプログラムになります。Gitは作成したHTMLや画像をアップする場所、Cloudflare Pagesは作成したHTMLをインターネットに公開する場所になります。

実はGithub Pagesというものもあり、これならGitにpushするだけなので楽なのですがCDN性能が弱いみたいです。CDNはざっくり言えば全世界からのアクセス表示速度でいいと思います。厳密には全く違うのですが理解としてはそれでいいと思います。

Wordpressから移行する理由

WordpressはアクセスするたびPHPが実行されDBにアクセスしてHTMLを作成するので遅くなりがちらしいです。HugoはHTMLをローカルで事前に作成し、読者がサイトにアクセスした際はCloudflare Pagesがただ表示するだけなので早くなるだろうということです。

今のところWordpressで記事も書きつつ、過去の記事を全て移行出来て表示出来たら完全に無料のほうへ移行しようとは思っています。何とか次のサーバー代の請求までには済ませたいですね…

画像に関してはある程度圧縮してgitへアップする予定です。動画は時間が長ければYoutubeの限定公開で短ければCloudflare R2にアップして見られるようにしようとは思ってます。まだ、どうなるかわかりませんが。

Wordpressから記事をエクスポートする方法

ということで過去の記事の移行方法です。まずはWordpressの管理画面からツール > エクスポートで全てのコンテンツを選択します。ただ、私の場合wordpressからmarkdownに変換する際WP Accessibility Stats Recordで問題が発生したので投稿、固定ページ、コンタクトフォームを個別でエクスポートしました。

VScode、Node.jsのインストール

前提としてOSはWindowsを想定しています。次にVScodeのインストールですね。ここでmaekdown式で記事を書きます。私もまだやったことはないですし、プログラミングよりなので慣れるのに時間がかかりますが、無料で運用する第一歩という感じですね。また、gitへのpushもこちらで出来ます。もちろんプログラミング言語をダウンロードしてればプログラミングを行うことも可能です。

Downloadをクリックしexeファイルを実行すればインストール画面に行きます。特に設定とかは考えずインストールすればよいと思います。インストール出来てvscodeを開けたら、日本語設定ができる拡張機能をインストールします。

左側のタブからJapanese Languageを探してみましょう。使用方法は書いてありますのでその通りに従ってください。

今度はNode.jsのダウンロードが必要になります。LTS版が安定しているのでそちらをダウンロードします。ダウンロードが完了したら一旦確認しましょう。Powershellを開いて確認します。タスクバーからsearchがあるのでそこから探すと良いと思います。Powershellを開いて以下のコマンドからバージョンの確認ができれば問題ありません。私はこの辺までは別の作業時にやってたりします。

node -v

wordpressをMarkdown形式のファイルへ変換

次にエクスポート用フォルダの作成ですね。これはダウンロードしたxmlファイルを格納するフォルダを作成することになります。特にこだわりがなければデスクトップでも問題ありません。wp-exportフォルダを作成した場合、こんな感じ。

cd Desktop/wp-export

作成したフォルダにxmlを配置した後、以下のコマンドを実行します。これでxmlファイルからwordpress形式のHTMLを読み込みmarkdownファイルへと変換します。

npx wordpress-export-to-markdown

まずはxmlファイルの場所を聞かれるのでそれを入力します。事前に作成たフォルダに移動してればファイル名を入力するだけで問題ありません。

次に記事をフォルダーごとに分割するかを聞かれます。私はyesにしてます。管理がしやすくなると思うので。

次にフォルダの前に日付の接頭辞を付けるか聞かれます。ここではNoにします。どのみちフォルダ名を変える予定なので。

次に年月別にフォルダ分けするかを聞かれます。ここは管理がしやすくなるので月別で階層分けするようにしました。

次に画像の保存について聞かれます。私はどのみち画像の整理や圧縮も必要になるのでALLにしています。

画像のダウンロードに失敗した場合は最悪直接Wordpressからダウンロードする方法もあります。outputフォルダに出力されてますので軽く確認しましょう。outputフォルダの中にpostsというフォルダがあります。

Hugoのインストール

次に作業フォルダの作成をします。これにはHugoのインストールが必要なのでwingetを使用してインストールを行います。以下のコマンドをPowershellで確認してバージョンが表示されればwingetコマンドがあるので問題ありません。

winget --version

もし出てこなければMicrosoft StoreにアクセスしてApp Installerをインストールしましょう。これもインストールしたうえでバージョンの表示がされない場合は以下からWindows Package Manager Client
winget.exeがあるかを確認してONにしましょう。

“設定”>“アプリ”>“詳細アプリ設定”>“アプリ実行エイリアス”

ONになってるうえでバージョンが表示されない場合は以下のコマンドを使用してApp Installerを再登録しましょう。その後Powershellを消して再度開いてからバージョンの確認を行います。私の場合はこれで解決できました。

Add-AppxPackage -RegisterByFamilyName -MainPackage Microsoft.DesktopAppInstaller_8wekyb3d8bbwe

wingetの確認が出来たら次はHugoのインストールをしていきます。以下のコマンドをPowershell入力します。

winget install Hugo.Hugo.Extended

インストール出来たら確認しましょう。

parquetファイルの中身はVSCODEの拡張機能 Data Wranglerで見れる！

Tue, 07 Nov 2023 00:00:00 +0000

parquetファイルについて

parquetファイルは非常に優秀なファイルだと思います。

pythonでデータを扱う場合、小規模のデータであればcsvファイルが使われがちですが、私の現場ではparquetファイルが使われています。

parquetのメリット

メリットとしては

データが圧縮されるため、ストレージの節約になる
ファイルを読み込む際、型の指定をしなくても自動で読み込んでくれる
データを列で読み込むと高速で読み込める

parquetのデメリット

デメリットとしては

ファイルを手軽に扱えない(テキストファイルで開いたり、書き換えたり)

個人的にはこのように感じています。

Data Wranglerについて

これがData Wrangler(ラングラー)を使えば手軽に見ることができます！ただし、書き換えたりはできないですが…。

しかも導入手順も簡単！

拡張機能からData Wranglerをインストール
対象のファイルを右クリック > Opne in Data Wranglerをクリック
pythonやjupyter notebookのカーネルに接続する
必要なライブラリが足らなければインストールを行う

こうすることで以下のような画面でparquetファイルの中身を見ることができます！(画面黒いと目にいいよね)

csvファイルも同じように見れます

ちなみに上記のデータはスクレイピングで取ってきた求人情報になります(スクレイピングプログラムはChat-GPTに頼みました)。一応利用規約見てスクレイピングに関する規約はなかったので大丈夫かと思いますが、もしやる際は連続アクセスにならないよう2,3秒時間を空けることを勧めます。

データ操作について

上のカラム名の場所に欠損の数やユニークな値の数、数値であればヒストグラムの分布などが描かれたりします

また左の操作でカラムの操作や欠損値埋め、文字列変換、グループ化など簡単なデータ変換であればこちらで操作できるうえに、コード化ファイルを出力することもできます！

おおまかにデータを見ながら加工をし、そのプログラムを作ってくれる素晴らしい機能をMicrosoftが提供していますのでぜひ活用していきたいですね！