136 lines
4.6 KiB
Markdown
136 lines
4.6 KiB
Markdown
## ai `moji`
|
||
|
||
AI Moji文字システム - アルファベット、カタカムナ、数字の組み合わせによる独自文字システム
|
||
|
||
|`y`|`u`|`i`||
|
||
|---|---|---|---|
|
||
|||<img src="https://git.syui.ai/ai/moji/raw/branch/main/icon/a.png" width="100">|`a`|
|
||
|<img src="https://git.syui.ai/ai/moji/raw/branch/main/icon/y.png" width="100">|<img src="https://git.syui.ai/ai/moji/raw/branch/main/png/u.png" width="100">|<img src="https://git.syui.ai/ai/moji/raw/branch/main/png/i.png" width="100">|`i`|
|
||
|
||
## FontAwesome風自動生成パッケージシステム
|
||
|
||
### 概要
|
||
|
||
`scpt/ai_moji_generator/` にFontAwesome風のアイコンフォントパッケージを自動生成するシステムを実装しました。
|
||
SVGファイルから自動的にWebフォント・CSS・npmパッケージを生成し、`aimoji` として配布可能です。
|
||
|
||
### システム構成
|
||
|
||
```
|
||
scpt/ai_moji_generator/ # 自動生成システム
|
||
├── build.py # メインビルドシステム
|
||
├── font_generator.py # SVG→Webフォント変換
|
||
├── css_generator.py # FontAwesome風CSS/SCSS生成
|
||
├── packager.py # npmパッケージング
|
||
├── requirements.txt # Python依存関係
|
||
├── setup.sh # 自動セットアップスクリプト
|
||
├── Makefile # 簡単コマンド
|
||
└── 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 # ビルドメタデータ
|
||
```
|
||
|
||
### 主要機能
|
||
|
||
1. **SVG→フォント自動変換**
|
||
- 17個のSVGファイル（a.svg, ai.svg, book.svg等）を自動スキャン
|
||
- FontForge使用でTTF, WOFF, WOFF2, EOT, SVG形式生成
|
||
- Unicode Private Use Area (U+E900~) 自動割り当て
|
||
|
||
2. **FontAwesome風CSS生成**
|
||
- `.aimoji .aimoji-{name}` 形式のCSSクラス自動生成
|
||
- 最小化版CSS対応
|
||
- IE8+対応のフォント読み込み
|
||
|
||
3. **SCSS完全対応**
|
||
- 全アイコンのUnicode変数自動生成
|
||
- アニメーション用mixins（spin, pulse, rotate, flip）
|
||
- サイズ・カラー調整用utilities
|
||
|
||
4. **npm配布準備**
|
||
- `aimoji` パッケージとして公開可能
|
||
- package.json, README.md, LICENSE自動生成
|
||
- エコシステム統合設計書の名前規則準拠
|
||
|
||
### 使用方法
|
||
|
||
```bash
|
||
# 初期セットアップ
|
||
cd scpt/ai_moji_generator
|
||
make setup
|
||
|
||
# フルビルド
|
||
make build
|
||
|
||
# 部分ビルド
|
||
make font # フォントのみ
|
||
make css # CSSのみ
|
||
make package # パッケージングのみ
|
||
|
||
# npm公開
|
||
make 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~)
|
||
- **CSS命名**: `.aimoji .aimoji-{svg-filename}`
|
||
- **パッケージ名**: `aimoji` (エコシステム名前規則準拠)
|
||
|
||
### 依存関係
|
||
|
||
- Python 3.6+
|
||
- FontForge (`brew install fontforge` または `apt-get install fontforge`)
|
||
- fonttools (`pip install fonttools`)
|
||
|
||
### 現在の状況
|
||
|
||
- ✅ 完全実装済み
|
||
- ✅ 17個のSVGファイル対応
|
||
- ✅ FontAwesome風CSS/SCSS対応
|
||
- ✅ npm配布準備完了
|
||
- ✅ エコシステム統合設計書準拠
|
||
|
||
### 次回継続時のポイント
|
||
|
||
1. **実行確認**: `make test` でテストビルド実行
|
||
2. **カスタマイズ**: 新しいSVGファイル追加時は自動認識
|
||
3. **配布**: `make publish` でnpm公開可能
|
||
4. **統合**: 他のai.*プロジェクトとの連携準備済み
|
||
|
||
このシステムにより、icomoonの手動プロセスを完全自動化し、FontAwesome的な使いやすさでai.mojiアイコンを配布できます。
|
||
|