211 lines
4.8 KiB
Markdown
211 lines
4.8 KiB
Markdown
# AI Moji Font Generator
|
||
|
||
AI Moji文字システムから FontAwesome 風のアイコンフォントパッケージを自動生成するシステムです。
|
||
|
||
## 概要
|
||
|
||
このツールは：
|
||
- SVGファイルから自動的にWebフォント（WOFF2, TTF等）を生成
|
||
- FontAwesome風のCSS/SCSSファイルを自動生成
|
||
- npm パッケージとして配布可能な形式で出力
|
||
- エコシステム統合設計書の名前規則に準拠
|
||
|
||
## 名前規則
|
||
|
||
エコシステム統合設計書に基づく命名：
|
||
- **package**: `aimoji`
|
||
- **directory**: `ai/moji`
|
||
- **domain**: `ai.moji`
|
||
|
||
## システム構成
|
||
|
||
```
|
||
ai_moji_generator/
|
||
├── build.py # メインビルドスクリプト
|
||
├── font_generator.py # SVG→フォント変換
|
||
├── css_generator.py # CSS/SCSS生成
|
||
├── packager.py # npmパッケージング
|
||
├── requirements.txt # Python依存関係
|
||
├── setup.sh # セットアップスクリプト
|
||
└── README.md # このファイル
|
||
|
||
出力(../../dist/):
|
||
├── fonts/ # woff2, ttf, eot, svg
|
||
├── css/ # aimoji.css, aimoji.min.css
|
||
├── scss/ # _variables.scss, _mixins.scss
|
||
├── package.json # npm配布用
|
||
├── README.md # パッケージドキュメント
|
||
├── LICENSE # MITライセンス
|
||
└── metadata.json # ビルドメタデータ
|
||
```
|
||
|
||
## セットアップ
|
||
|
||
### 自動セットアップ
|
||
|
||
```bash
|
||
# 実行権限付与
|
||
chmod +x setup.sh
|
||
|
||
# セットアップ実行
|
||
./setup.sh
|
||
```
|
||
|
||
### 手動セットアップ
|
||
|
||
1. **依存関係インストール**
|
||
```bash
|
||
# macOS (Homebrew必須)
|
||
brew install fontforge
|
||
|
||
# Ubuntu/Debian
|
||
sudo apt-get install fontforge python3-fontforge
|
||
|
||
# Python依存関係
|
||
pip3 install -r requirements.txt
|
||
```
|
||
|
||
2. **ディレクトリ確認**
|
||
```bash
|
||
# SVGファイルが存在することを確認
|
||
ls ../../svg/*.svg
|
||
```
|
||
|
||
## 使用方法
|
||
|
||
### 基本的な使用方法
|
||
|
||
```bash
|
||
# 全体ビルド（推奨）
|
||
python3 build.py
|
||
|
||
# クリーンビルド
|
||
python3 build.py --clean
|
||
python3 build.py
|
||
```
|
||
|
||
### 部分ビルド
|
||
|
||
```bash
|
||
# フォントのみ生成
|
||
python3 build.py --font-only
|
||
|
||
# CSS/SCSSのみ生成
|
||
python3 build.py --css-only
|
||
|
||
# パッケージングのみ
|
||
python3 build.py --package-only
|
||
```
|
||
|
||
### カスタムパス指定
|
||
|
||
```bash
|
||
# カスタムSVGディレクトリ
|
||
python3 build.py --svg-dir /path/to/svg
|
||
|
||
# カスタム出力ディレクトリ
|
||
python3 build.py --output-dir /path/to/output
|
||
```
|
||
|
||
## 出力パッケージの使用方法
|
||
|
||
生成されたパッケージは npm で配布可能：
|
||
|
||
```bash
|
||
# パッケージディレクトリに移動
|
||
cd ../../dist
|
||
|
||
# npmで公開
|
||
npm publish
|
||
```
|
||
|
||
### 使用例
|
||
|
||
```html
|
||
<!-- CSS読み込み -->
|
||
<link rel="stylesheet" href="node_modules/aimoji/css/aimoji.css">
|
||
|
||
<!-- アイコン使用 -->
|
||
<i class="aimoji aimoji-ai"></i>
|
||
<i class="aimoji aimoji-game"></i>
|
||
<i class="aimoji aimoji-card"></i>
|
||
```
|
||
|
||
```scss
|
||
// SCSS使用
|
||
@import "node_modules/aimoji/scss/variables";
|
||
@import "node_modules/aimoji/scss/mixins";
|
||
|
||
.my-icon {
|
||
@include aimoji-icon($aimoji-ai);
|
||
@include aimoji-size(24px);
|
||
@include aimoji-spin();
|
||
}
|
||
```
|
||
|
||
## 技術詳細
|
||
|
||
### フォント生成
|
||
|
||
- **ツール**: FontForge + fonttools
|
||
- **フォーマット**: TTF, WOFF, WOFF2, EOT, SVG
|
||
- **Unicode範囲**: Private Use Area (U+E900~)
|
||
- **グリフサイズ**: 1024x1024 ユニット
|
||
|
||
### CSS生成
|
||
|
||
- **FontAwesome風クラス**: `.aimoji .aimoji-{name}`
|
||
- **最小化版**: gzip圧縮対応
|
||
- **SCSS変数**: 全アイコンの Unicode 値
|
||
- **Mixins**: アニメーション、サイズ、回転等
|
||
|
||
### パッケージング
|
||
|
||
- **npm準拠**: package.json自動生成
|
||
- **ドキュメント**: README.md、LICENSE自動生成
|
||
- **メタデータ**: ビルド情報含む metadata.json
|
||
|
||
## トラブルシューティング
|
||
|
||
### FontForge エラー
|
||
|
||
```bash
|
||
# macOS: Homebrewで再インストール
|
||
brew uninstall fontforge
|
||
brew install fontforge
|
||
|
||
# Linux: 依存関係インストール
|
||
sudo apt-get install python3-dev python3-fontforge
|
||
```
|
||
|
||
### Python モジュールエラー
|
||
|
||
```bash
|
||
# 仮想環境使用を推奨
|
||
python3 -m venv ~/.config/syui/ai/moji
|
||
source ~/.config/syui/ai/moji/bin/activate
|
||
pip install -r requirements.txt
|
||
```
|
||
|
||
### SVG読み込みエラー
|
||
|
||
- SVGファイルが有効な形式であることを確認
|
||
- パスデータが含まれていることを確認
|
||
- Inkscape等で最適化を実行
|
||
|
||
## ライセンス
|
||
|
||
MIT License - 詳細は生成される LICENSE ファイルを参照
|
||
|
||
## 開発者
|
||
|
||
- **作者**: syui
|
||
- **プロジェクト**: AI Moji エコシステム
|
||
- **設計**: エコシステム統合設計書に基づく
|
||
|
||
## 関連プロジェクト
|
||
|
||
- **ai.gpt**: 自律的送信AI
|
||
- **ai.card**: カードゲームシステム
|
||
- **ai.verse**: UEメタバース
|
||
- **ai.bot**: 分散SNS連携 |