静的サイトジェネレーター Rspress の Quick start をやってみた

• プロジェクト作成
• 開発サーバーで実行
• その他コマンド
• ビルド
• Nginx にデプロイしてみる
• 参考資料

プロジェクト作成

node ➜ /workspaces/TIL/Rspress/firststep (rspress-firststep) $ npm create rspress@latest
Need to install the following packages:
create-rspress@1.47.0
Ok to proceed? (y) y


> npx
> create-rspress


◆  Create Rspress Project
│
◇  Project name or path
│  rspress-firststep-project
│
◇  Select additional tools (Use <space> to select, <enter> to continue)
│  Add Biome for code linting and formatting, Add ESLint for code linting, Add Prettier for code formatting
│
◇  Next steps ───────────────────╮
│                                │
│  cd rspress-firststep-project  │
│  npm install                   │
│  npm run dev                   │
│                                │
├────────────────────────────────╯
│
└  Done.

npm notice
npm notice New major version of npm available! 10.9.2 -> 11.7.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.7.0
npm notice To update run: npm install -g npm@11.7.0
npm notice

node ➜ /workspaces/TIL/Rspress/firststep (rspress-firststep) $ cd rspress-firststep-project/

以下の構成でファイルが生成される。

rspress-firststep-project
|-- README.md                       : Rspress プロジェクトの README
|-- biome.json                      : Biome 設定ファイル
|-- docs                            : ドキュメントルート
|   |-- _meta.json                  : ヘッダ情報が書いてある
|   |-- guide
|   |   |-- _meta.json
|   |   `-- index.md
|   |-- hello.md
|   |-- index.md
|   `-- public                      : 公開リソース置き場
|       |-- rspress-dark-logo.png
|       |-- rspress-icon.png
|       `-- rspress-light-logo.png
|-- eslint.config.mjs               : ESLint 設定ファイル
|-- package.json                    : npm 設定ファイル
|-- rspress.config.ts               : Rspress 設定ファイル
`-- tsconfig.json                   : TypeScript 設定ファイル

開発サーバーで実行

npm install
npm run dev

ブラウザで http://localhost:3000 にアクセスすると、生成されたページが表示される。

その他コマンド

その他、チェック、フォーマット、リント、プレビュー等のコマンドも定義されているので必要に応じて適宜使える。

node ➜ .../TIL/Rspress/firststep/rspress-firststep-project (rspress-firststep) $ npm run
Scripts available in rspress-firststep-project@1.0.0 via `npm run-script`:
  build
    rspress build
  check
    biome check --write
  dev
    rspress dev
  format
    prettier --write .
  lint
    eslint .
  preview
    rspress preview

ビルド

npm run build

doc_build に静的サイトが生成される。

Nginx にデプロイしてみる

docker 上の nginx にデプロイしてみる。

docker run -p 8081:80 -v $(pwd)/doc_build:/usr/share/nginx/html:ro nginx

ブラウザで http://localhost:8081 にアクセスすると、デプロイされたページが表示される。

参考資料

• Rspress - Rsbuild-based Static Site Generator
• Quick start - Rspress
• nginx - Official Image | Docker Hub

Yet another なガントチャート生成ツールを作った

• 始め方
  • 実行バイナリのダウンロード
  • CSV ファイルの準備
  • 祝日定義ファイルの準備
  • ガントチャートの生成・監視・再描画
• 参考資料

CSV からガントチャートを生成する CLI ツール「ganttgen」を作りました。 この記事では、細かい仕様説明は省いて、実際に動かすところまでを紹介します。

始め方

実行バイナリのダウンロード

以下、 ganttgen の最新リリースページから、ご利用の OS に合わせた実行バイナリをダウンロードしてください。

https://github.com/mikoto2000/gantt-generator/releases/latest

CSV ファイルの準備

以下のような CSV ファイルを用意してください。ファイル名は sample.csv とします。

タスク名,開始,終了,期間,依存,実績開始,実績終了,実績期間,備考
#要件定義,,,,,,,,
タスク１,2025/12/1,,2d,,2025/12/11,2025/12/15,,"12/22 mikoto2000
まいった、終わらん
12/2 mikoto2000
病欠のため着手不能"
#設計,,,,,,,,要件定義は終わっていないが、決まったところから設計していく
タスク２,,,3d,タスク１,,,,"12/22 mikoto2000
テスト
12/2 mikoto2000
テテスト"
#製造,,,,,,,,着手未定
タスク３,,,4d,タスク２,,,,
#テスト,,,,,,,,着手未定
タスク４,,,5d,タスク３,,,,
タスク5,,,,,,,,着手未定

Excel 等の表計算ソフトで編集するのを推奨します。

See: https://github.com/mikoto2000/gantt-generator/blob/main/sample/sample.csv

祝日定義ファイルの準備

以下のような YAML ファイルを用意してください。ファイル名は sample_holiday.yaml とします。

# YAML で祝日を指定するサンプル。
# YYYY-MM-DD の文字列を配列で記述してください。
holidays:
  - 2024-06-10
  - 2024-09-16
  - 2024-09-23

See: https://github.com/mikoto2000/gantt-generator/blob/main/sample/sample_holiday.yaml

ガントチャートの生成・監視・再描画

前述の工程で用意した CSV ファイルと祝日定義ファイルを指定して、 ganttgen コマンドを実行してください。

ganttgen --livereload --holidays ./sample_holiday.yaml ./sample.csv -o sample.html

生成されたガントチャートは sample.html という名前で出力されます。ブラウザで開いて確認してください。

--livereload オプションを指定すると、CSV ファイルや祝日定義ファイルに変更があった場合に自動的にガントチャートが再生成されます。ブラウザのリロードは不要です。

参考資料

• mikoto2000/gantt-generator: CSV からガントチャートを生成するツール
• 動画
  • ガントチャート作成ツールを作った - 003 備考が書けるようになりました - YouTube
  • ガントチャート作成ツールを作った - 002 見出しを作れるようになりました - YouTube
  • ガントチャート作成ツールを作った - 001 - YouTube

Vim のマクロで気持ち良くなった話 - Java POJO から SQL の INSERT 文を作る

• SQL の INSERT 分の作成
  • こんな SQL を作りたい
  • やってみた
    • 第 1 フェーズ: カラムの作成
    • 第 2 フェーズ: 値の作成
    • 第 3 フェーズ: フォーマット

SQL の INSERT 分の作成

こんな SQL を作りたい

MyBatis の書き方ですね。

INSERT INTO
TodoEntity
(
  id,
  title,
  done
)
VALUES
(
  #{id},
  #{title},
  #{done}
)

これに対応する Entity クラスが以下。

package dev.mikoto2000.todo.entity;

import lombok.AllArgsConstructor;
import lombok.Data;

/**
 * TodoEntity
 */
@Data
@AllArgsConstructor
public class TodoEntity {
  private long id;
  private String title;
  private boolean done;
}

フィールドとカラムが 1 対 1 で対応しているので、マクロでどうとでもできるはず！

やってみた

という事でやってみた。頑張って動画からキーストロークを読み取ってください…(キーストロークを文章でまとめる気力が無かった…)

第 1 フェーズ: カラムの作成

次のようにカーソルを配置したうえで、

^WWvey<C-w><C-w>pa,<C-w><C-w>j をマクロで記録、 @q で繰り返し、最終行のカンマを消す。

第 2 フェーズ: 値の作成

次のようにカーソルを配置したうえで、

^WWvey<C-w><C-w>a#{<C-r>"}<C-w><C-w>j をマクロで記録、 @q で繰り返し、最終行のカンマを消す。

第 3 フェーズ: フォーマット

後は ggVG= でフォーマットを書ければ終了。

以下、同じようなことをしている動画。

こんな形でウィンドウをまたいだマクロでファイルを作っていくのも便利ですよ！

以上！