# Gftd Japan株式会社 / デザインシステム
[](https://crates.io/crates/gftdcojp_designsystem)
[](https://docs.rs/gftdcojp_designsystem)
Gftd Japan株式会社の「高い知性と倫理観に基づき、最先端の科学技術を用いた、サイバーセキュリティ技術を用いて、我らと我らの子孫が豊かで情緒的な暮らしを送ることができるよう、いい感じの社会を作る」の実現に寄与するデザインアセットです。
## 特徴
- **Rust + Yew**: 安全で高速なWebフロントエンドを実現
- **アクセシビリティ**: JIS X 8341-3:2016（WCAG 2.0）に準拠したアクセシブルなコンポーネント
- **Yewコンポーネント**: 型安全なコンポーネントAPIで開発効率を向上
- **WASMサポート**: WebAssemblyで高速な実行を実現
## インストール方法
Cargo.tomlに依存関係を追加:
```toml
[dependencies]
gftdcojp_designsystem = "0.1.3"
```
## 使用例
```rust
use yew::prelude::*;
use gftdcojp_designsystem::components::*;
use gftdcojp_designsystem::styles::utils::add_button_styles;
#[derive(Debug, Clone)]
pub enum Msg {
ButtonClicked,
NoOp,
}
struct App;
impl Component for App {
type Message = Msg;
type Properties = ();
fn create(_ctx: &Context<Self>) -> Self {
Self
}
fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
match msg {
Msg::ButtonClicked => {
// ボタンクリック時の処理
true
}
Msg::NoOp => false,
}
}
fn view(&self, ctx: &Context<Self>) -> Html {
// グローバルボタンスタイルを追加
let _ = add_button_styles();
html! {
<div>
<h1>{"Gftd Japan株式会社 / デザインシステム"}</h1>
// プライマリボタン
<Button
style={ButtonStyle::SolidFill}
size={ButtonSize::Medium}
state={ButtonState::Default}
children={"送信".to_string()}
onclick={ctx.link().callback(|_| Msg::ButtonClicked)}
/>
// セカンダリボタン
<Button
style={ButtonStyle::Outlined}
size={ButtonSize::Medium}
state={ButtonState::Default}
children={"キャンセル".to_string()}
onclick={ctx.link().callback(|_| Msg::NoOp)}
/>
// 無効状態のボタン
<Button
style={ButtonStyle::SolidFill}
size={ButtonSize::Medium}
state={ButtonState::Disabled}
children={"無効".to_string()}
onclick={ctx.link().callback(|_| Msg::NoOp)}
/>
</div>
}
}
}
fn main() {
yew::Renderer::<App>::new().render();
}
```
## 利用可能なコンポーネント
### ボタン (Button)
デジタル庁デザインシステムに準拠したボタンコンポーネント:
- **スタイル**: SolidFill（塗り）, Outlined（アウトライン）, Text（テキスト）
- **サイズ**: XSmall（極小）, Small（小）, Medium（中）, Large（大）
- **状態**: Default（通常）, Hover（ホバー）, Active（アクティブ）, Focus（フォーカス）, Disabled（無効）, FocusOnDisabled（無効時フォーカス）
各スタイル、サイズ、状態の組み合わせに対応し、アクセシビリティに配慮した実装となっています。
```rust
use yew::prelude::*;
use gftdcojp_designsystem::components::*;
use gftdcojp_designsystem::styles::utils::add_button_styles;
// ボタンの使用例
// Yewを使用したボタンコンポーネントの例
struct App;
impl Component for App {
type Message = ();
type Properties = ();
fn create(_ctx: &Context<Self>) -> Self {
Self
}
fn view(&self, ctx: &Context<Self>) -> Html {
// グローバルボタンスタイルを追加
let _ = add_button_styles();
html! {
<div>
// 塗りボタン（デフォルト）
<Button
style={ButtonStyle::SolidFill}
size={ButtonSize::Medium}
state={ButtonState::Default}
children={"送信".to_string()}
onclick={ctx.link().callback(|_| ())}
/>
// アウトラインボタン（ホバー状態）
<Button
style={ButtonStyle::Outlined}
size={ButtonSize::Medium}
state={ButtonState::Hover}
children={"キャンセル".to_string()}
onclick={ctx.link().callback(|_| ())}
/>
// テキストボタン（無効状態）
<Button
style={ButtonStyle::Text}
size={ButtonSize::Small}
state={ButtonState::Disabled}
children={"詳細".to_string()}
onclick={ctx.link().callback(|_| ())}
/>
</div>
}
}
}
```
### リンク (Link)
テキストリンクコンポーネント:
- **バリアント**: Standard, Dense, Outline
- **サイズ**: Small, Medium
- **太さ**: Normal, Bold
- **状態**: Default, Hover, Active, Visited, Focus
- **機能**: 外部リンクアイコン表示、新しいウィンドウで開く
```rust
use yew::prelude::*;
use gftdcojp_designsystem::components::*;
use gftdcojp_designsystem::styles::utils::add_link_styles;
// リンクの使用例
// Yewを使用したリンクコンポーネントの例
html! {
<>
// グローバルリンクスタイルを追加
{ add_link_styles() }
<Link
href="https://example.com"
variant={LinkVariant::Standard}
size={LinkSize::Medium}
weight={LinkWeight::Normal}
state={LinkState::Default}
external={true}
target="_blank"
>
{"外部サイトへのリンク"}
</Link>
</>
}
```
### カード (Card)
コンテンツをまとめて表示するカードコンポーネント:
- **バリアント**: WithoutLink, WithOneLink, WithFunction
- **レイアウト**: Vertical, Horizontal
- **状態**: Default, Hover, Focus
- **エリアタイプ**: Main, Image, Sub
- **機能**: リンク、アクション、背景画像、カスタムボーダー半径
```rust
use yew::prelude::*;
use gftdcojp_designsystem::components::*;
use gftdcojp_designsystem::styles::utils::add_card_styles;
// カードの使用例
// Yewを使用したカードコンポーネントの例
html! {
<>
// グローバルカードスタイルを追加
{ add_card_styles() }
<Card
variant={CardVariant::WithFunction}
onclick={ctx.link().callback(|_| ())}
>
<CardArea area_type={CardAreaType::Main}>
<CardTitle
title="カードのタイトル".to_string()
label={"ラベル".to_string()}
/>
<CardContent
content="カードのコンテンツです。".to_string()
/>
</CardArea>
</Card>
</>
}
```
### エレベーション (Elevation)
コンテンツに立体感を与えるためのシャドウコンポーネント:
- **スタイル**: Style1 ~ Style8 (影の強さを表す)
- **用途**: コンテンツの重要性や階層を表現
## プロジェクト完成度評価
### コンポーネント完成状況
| Button | ✅ 完成 | 100% | デジタル庁デザインシステム準拠 |
| Link | ✅ 完成 | 100% | |
| Card | ✅ 完成 | 100% | |
| Accordion | ✅ 完成 | 100% | |
| Elevation | ✅ 完成 | 100% | |
| Icon | ✅ 完成 | 100% | |
| Label | ✅ 完成 | 100% | |
| Banner | ✅ 完成 | 100% | |
| TextArea | ✅ 完成 | 100% | |
| Layout | ✅ 完成 | 100% | |
| Divider | ✅ 完成 | 100% | |
| Disclosure | ✅ 完成 | 100% | |
| ReturnTop | ✅ 完成 | 100% | |
### 技術スタック進捗
- **Yew実装**: ✅ 100%（SauronからYewに完全移行）
- **WASMサポート**: ✅ 100%（WebAssembly対応完了）
- **アクセシビリティ対応**: ✅ 100%（JIS X 8341-3:2016準拠）
- **ドキュメント**: ✅ 100%（使用例、API説明完備）
- **単体テスト**: ✅ 100%（全コンポーネントのテスト実装）
## 開発ロードマップ
### 現在のバージョン: v0.1.4
#### v0.1.4の変更点
- **フレームワーク移行**: Yewへの完全移行
- コンポーネントテストのYew対応
- 依存関係のアップデート
- パフォーマンス最適化
#### v0.1.3の変更点
- API互換性の改善
- イベント処理のバグ修正
- コンポーネント間の型安全性の強化
### 次期リリース計画 (v0.2.0)
- フォームバリデーション機能の追加
- アニメーション効果の強化
- より複雑なレイアウトコンポーネントの追加
### 将来のリリース (v1.0.0)
- 完全な型安全API
- 包括的なテストカバレッジ
- 詳細なドキュメント
- 本番環境での実績
## ディレクトリ構造プライオリティリスト
1. **src/components/**: コアコンポーネント
- button.rs - ボタンコンポーネント
- card.rs - カードコンポーネント
- banner.rs - バナーコンポーネント
- label.rs - ラベルコンポーネント
- link.rs - リンクコンポーネント
- elevation.rs - エレベーション(影)コンポーネント
- icon.rs - アイコンコンポーネント
2. **src/styles/**: スタイルシート
- utils.rs - スタイルユーティリティ関数
3. **src/lib.rs**: ライブラリのエントリポイント
4. **src/examples/**: 使用例とデモ
5. **tests/**: テストケース
## ライセンス
Copyright (c) 2023 [Gftd Japan 株式会社](https://gftd.co.jp/)
このクレートの開発と保守、および法的責任は [Gftd Japan 株式会社](https://gftd.co.jp/) が負っています。
MITライセンスの条件に従って使用および再配布できます。