概要

このリポジトリは「Hanzi Writer」（漢字の筆順アニメーションライブラリ）と Puppeteer（ヘッドレス Chrome 操作）を組み合わせて、漢字の筆順アニメーションをスクリーンレンダリングし GIF として出力するためのツールです。generate.js がレンダリングとキャプチャのオーケストレーションを担当し、index.html に配置した Hanzi Writer の設定でアニメーションを実行、Puppeteer がそれを操作してフレームを収集、最後に GIF にまとめます。学習用素材や辞書サイト向けの自動生成ワークフローを想定しています。

リポジトリの統計情報

スター数: 26
フォーク数: 3
ウォッチャー数: 26
コミット数: 3
ファイル数: 8
メインの言語: JavaScript

主な特徴

Hanzi Writer を使った正確で視覚的な筆順アニメーションを生成。
Puppeteer によるヘッドレスレンダリングで自動的にスクリーンショットを取得し GIF 化。
簡易な入力ディレクトリ構成で複数文字をバッチ処理可能。
軽量で理解しやすい構成、カスタマイズしやすいコードベース。

技術的なポイント

本プロジェクトの核は「ブラウザで描画する強力な可視化ライブラリ」と「ヘッドレスブラウザ自動化」を組み合わせた点にあります。Hanzi Writer は SVG/CSS/JavaScript ベースで筆順アニメーションを提供するため、見た目のカスタマイズや速度調整が容易です。一方 Puppeteer は Node.js からヘッドレス Chrome を起動して、index.html に埋めた Hanzi Writer をプログラム的に操作できます。generate.js はこの流れを管理し、ページをロード、指定した文字のアニメーションを実行させ、フレームごとにキャプチャして一連の画像を取得します。取得したフレームはサーバーサイドで GIF エンコーダに渡してアニメーション GIF にまとめます。メリットとしては「ブラウザと同じ描画結果をそのままメディア化できる」ことで、フォントやスケール、色味を忠実に保持できます。注意点は、ヘッドレスブラウザの起動や大量フレームのキャプチャが CPU/メモリ・I/O を消費するため、バッチ処理時は並列数や解像度を調整する必要がある点です。また、Hanzi Writer の辞書データ（字形や筆順）が必要な場合は外部ソースを適切に配置すること、生成された GIF の品質調整（フレームレート、ループ、圧縮）はエンコーダ設定で調整することが求められます。

プロジェクトの構成

主要なファイルとディレクトリ：

.gitignore: file
README.md: file
generate.js: file
index.html: file
input: dir
package.json: file
LICENSE: file
README-zh.md: file

ファイル説明（抜粋）：

generate.js：Puppeteer を使って index.html を開き、Hanzi Writer の API を呼び出してアニメーションを再生、スクリーンショット（または連続フレーム）を収集し、それらを GIF として出力する制御スクリプト。コマンドライン引数で入力ファイルや出力先を指定する実装になっている可能性があります。
index.html：Hanzi Writer の読み込みと描画領域を定義したシンプルな HTML。ここに描画オプション（画面サイズ、線幅、色、アニメーション速度）を記述しておき、外部から制御してアニメーションを再生します。
input ディレクトリ：生成対象の文字リストや設定ファイル（JSON やテキスト）を格納する場所。バッチ処理する文字をここに置くワークフローが想定されます。
package.json：依存する npm パッケージ（puppeteer、hanzi-writer、GIF エンコーダ系など）とスクリプトを管理。環境構築は Node.js と npm/yarn が必要です。

利用上のポイント：

ローカル環境で実行する場合は Node.js のバージョン確認と puppeteer のダウンロード（Chromium）が必要です。
出力の品質（解像度、fps、色深度）は generate.js のパラメータと GIF エンコーダの設定で制御します。
大量生成の際は並列実行を抑制してメモリとディスク負荷を管理してください。

まとめ

Hanzi Writer と Puppeteer を組み合わせた、学習素材作成に便利な漢字筆順 GIF 生成ツールです。

リポジトリ情報：

名前: Chinese-Stroke-Order-Generator
説明: A tool to generate Chinese character stroke order animation GIFs using Hanzi Writer + Puppeteer.
スター数: 26
言語: JavaScript
URL: https://github.com/Yark-yao/Chinese-Stroke-Order-Generator
オーナー: Yark-yao
アバター: https://avatars.githubusercontent.com/u/34590858?v=4

READMEの抜粋：

Chinese Stroke Order Generator (GIF)

🌟 Live Demo & Full Dictionary: Check out HanziStroke.com - The best place to look up Chinese character stroke order, meanings, and HSK levels.

🖨️ Need Printable Worksheets? - This tool generates screen animations. For generating custom PDF writing practice worksheets, please use our Worksheet Maker on HanziStroke.com.

A tool to generate Chinese character …

漢字筆順GIF生成ツール (Chinese Stroke Order Generator)