ルビフルボタンV2について

ルビフルボタンV2 は、日本語テキストに含まれる 漢字 にだけ自動でふりがな（ルビ）を付与する軽量なブラウザ向け JavaScript ライブラリです。導入は 1 行の <script> で完了し、動的に変化する DOM にも追従します。

特徴

• 自動ルビ : 文章中の漢字にのみルビを付与し、可読性を維持
• 手動ルビとの共存 : 既に <ruby> タグが存在する箇所はスキップ
• MutationObserver 対応 : SPA やチャットなど、後から挿入されるテキストにも対応
• スタイルの完全カスタマイズ : トグルボタン・ルビ要素ともに自由にデザイン可能
• CDN 1 ファイル : 依存なし、コピー＆ペーストですぐに使用可能

1. デモ

実際の動作は以下で確認できます：

▶️ オンラインデモ

2. クイックスタート（最小構成）

<!-- 1. スクリプトを読み込む（</body> 直前推奨） -->
<script src="https://rubyful-v2.s3.ap-northeast-1.amazonaws.com/v2/rubyful.js?t=20250507022654"></script>
<script>
  window.addEventListener('load', () => {
    RubyfulV2.init({
      selector: '.content p',  // ★ 親要素 .content 内の <p> を対象
      defaultDisplay: true     // ★ ページ読み込み時にルビを表示
    });
  });
</script>

<!-- 2. ルビを付与したい要素 -->
<div class="content">
  <p>私は東京の下町で生まれました。</p>
  <p>古い商店街には、昔ながらの風情が残っています。</p>
</div>

📌 結果 : 例）「東京」→「とうきょう」、「下町」→「したまち」のように自動でルビが付きます。

💡親要素の指定にお困りの場合

例として、汎用的な範囲指定のサンプルは以下となります。
導入したいサイトのHTMLに、以下ソースコードを追加してください。

<!-- 1. スクリプトを読み込む（</body> 直前推奨） -->
<script src="https://rubyful-v2.s3.ap-northeast-1.amazonaws.com/v2/rubyful.js?t=20250507022654"></script>
<script>
       window.addEventListener('load', () => {
        RubyfulV2.init({
          selector: 'p, h1, h2, h3, h4, h5, h6, li, td, th, span',
          defaultDisplay: true
        });
      });

</script>

3. API 概要

3.1 RubyfulV2.init(options)

selector が空文字列の場合は初期化が中断され、以下のエラーが出力されます。 RubyfulV2: セレクタは必須で、空文字列は許可されません

3.2 RubyfulV2.processElement(element)

任意の単一要素に対して後からルビ処理を実行したい場合に使用します。init() で指定した selector とは独立して動作します。

const preview = document.getElementById('preview');
preview.textContent = '入力中のテキスト';
RubyfulV2.processElement(preview);

3.3 Rubyful APIドキュメント

APIで導入したい場合は、以下を参照にしてください。

# Rubyful Backend API ドキュメント

## 概要

Rubyful Backend APIは、日本語テキストにルビ（振り仮名）を自動で付与するためのRESTful APIです。

## ベースURL

**APIベースURL:**
```
API_BASE_URL = <https://sfkp2t6wvquuxgks27pulzptbi0hlknp.lambda-url.ap-northeast-1.on.aws >
```

> **注意**: API_BASE_URL　を上記に置き換えてご利用ください。

## 認証

現在、認証は不要です。

## レート制限

レート制限が設定されています。レート制限を超えた場合、HTTPステータスコード `429 Too Many Requests` が返されます。

## CORS

- すべてのオリジンからのアクセスを許可（`Access-Control-Allow-Origin: *`）
- 許可されるメソッド: `POST`, `OPTIONS`
- 許可されるヘッダー: `Content-Type`

## エラーレスポンス

すべてのエラーレスポンスは以下の形式で返されます:

```json
{
  "status": "error",
  "error": "エラーメッセージ"
}
```

## API エンドポイント

### 1. ルビ振りAPI

指定されたテキストにルビを付与します。

#### エンドポイント

```
POST /api/v1/ruby
```

#### リクエストヘッダー

```
Content-Type: application/json
```

#### リクエストボディ

| フィールド | 型 | 必須 | 説明 |
|-----------|-----|------|------|
| `text` | string | 必須 | ルビを付与したいテキスト |
| `options` | object | 任意 | オプション設定 |
| `options.format` | string | 任意 | 出力フォーマット。`html` または `plain`。デフォルト: `html` |

**リクエスト例:**

```json
{
  "text": "漢字を含むテキストにルビを振ります",
  "options": {
    "format": "html"
  }
}
```

#### レスポンス

**成功時 (HTTP 200 OK):**

```json
{
  "status": "success",
  "data": {
    "text": "ルビ付きのテキスト",
    "processing_time": 123
  }
}
```

| フィールド | 型 | 説明 |
|-----------|-----|------|
| `status` | string | ステータス（常に `"success"`） |
| `data.text` | string | ルビが付与されたテキスト |
| `data.processing_time` | number | 処理時間（ミリ秒） |

**エラー時:**

- **HTTP 400 Bad Request**: リクエストボディの形式が不正な場合
  ```json
  {
    "status": "error",
    "error": "エラーメッセージ"
  }
  ```

- **HTTP 429 Too Many Requests**: レート制限を超えた場合
  ```json
  {
    "status": "error",
    "error": "Too many requests"
  }
  ```

- **HTTP 500 Internal Server Error**: サーバー内部エラーが発生した場合
  ```json
  {
    "status": "error",
    "error": "エラーメッセージ"
  }
  ```

#### 出力フォーマット

##### `html` フォーマット（デフォルト）

ルビはHTMLの `<ruby>` タグで囲まれます。

**入力:**
```
漢字を含むテキスト
```

**出力:**
```html
<ruby>漢<rt>かん</rt></ruby><ruby>字<rt>じ</rt></ruby>を含むテキスト
```

##### `plain` フォーマット

ルビは括弧内に表示されます。

**入力:**
```
漢字を含むテキスト
```

**出力:**
```
漢(かん)字(じ)を含むテキスト
```

#### 使用例

**cURL:**

```bash
curl -X POST ${API_BASE_URL}/api/v1/ruby \
  -H "Content-Type: application/json" \
  -d '{
    "text": "漢字を含むテキストにルビを振ります",
    "options": {
      "format": "html"
    }
  }'
```

**JavaScript (fetch):**

```javascript
const API_BASE_URL = '<APIのベースURL>';

const response = await fetch(`${API_BASE_URL}/api/v1/ruby`, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    text: '漢字を含むテキストにルビを振ります',
    options: {
      format: 'html'
    }
  })
});

const data = await response.json();
console.log(data.data.text);
```

**Python (requests):**

```python
import requests

API_BASE_URL = '<APIのベースURL>'

response = requests.post(
    f'{API_BASE_URL}/api/v1/ruby',
    json={
        'text': '漢字を含むテキストにルビを振ります',
        'options': {
            'format': 'html'
        }
    }
)

data = response.json()
print(data['data']['text'])
```

---

## ステータスコード一覧

| ステータスコード | 説明 |
|----------------|------|
| `200` | リクエスト成功 |
| `400` | リクエストが不正（バリデーションエラーなど） |
| `429` | レート制限を超えた |
| `500` | サーバー内部エラー |

---

## 注意事項

1. **テキストの長さ**: 非常に長いテキストを送信すると、処理時間が長くなる可能性があります。

---

## 更新履歴

- 2024年: 初版リリース

4. 手動ルビとの使い分け

Rubyful V2 は自動ルビを提供しますが、以下のケースでは手動ルビ（ <ruby> タグ）を推奨 します。

• 既に正しいルビが振られている箇所
• 固有名詞、人名、地名、商品名など 読みが一意に定まらない 場合
• 専門用語や業界用語
• 1〜2 文字だけの短いテキスト（例：<span>生</span> → 「せい」「しょう」「なま」…）

<p>
  私の名前は <ruby>山田太郎<rt>やまだたろう</rt></ruby> です。<br>
  <ruby>東京<rt>とうきょう</rt></ruby> の <ruby>渋谷<rt>しぶや</rt></ruby> に住んでいます。
</p>

手動ルビが存在する要素は 自動ルビの対象外 になります。（優先順位は手動ルビが上）

5. 使用例

5.1 静的コンテンツ（基本）

上記「クイックスタート」を参照。

5.2 動的コンテンツ（SPA・チャットなど）

<script>
window.addEventListener('load', () => {
  RubyfulV2.init({
    selector: '.content p',
    defaultDisplay: true,
    observeChanges: true  // DOM 変更を監視
  });
});
</script>

5.3 テキストエディタのプレビューなど、特定要素のみ処理

<textarea id="editor" rows="4" cols="40"></textarea>
<p id="preview"></p>

<script>
const editor  = document.getElementById('editor');
const preview = document.getElementById('preview');

editor.addEventListener('input', () => {
  preview.textContent = editor.value.trim();
  RubyfulV2.processElement(preview);
});
</script>

6. スタイルカスタマイズ

6.1 トグルボタン

RubyfulV2.init({
  selector: '.content p',
  defaultDisplay: true,
  styles: {
    toggleButtonClass: 'my-toggle',
    toggleButtonText: {
      on:  'ルビ ON',
      off: 'ルビ OFF'
    }
  }
});

.my-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 20px;
  background: #2196F3;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.3s;
}
.my-toggle:hover { background: #1976D2; }

画像を使ったボタンにしたい場合は、background-image を指定して toggleButtonText を空にしてください。

6.2 ルビ要素（.rubyful-rt）

.rubyful-rt {
  font-size: 0.7em;
  font-weight: bold;
  color: #E91E63;
  text-align: center;
}

/* ルビ非表示時 */
.rubyful-rt.hidden { display: none !important; }

レスポンシブ例

@media (max-width: 768px) {
  .rubyful-rt { font-size: 0.6em; }
}

アクセシビリティ / 印刷

@media print {
  .rubyful-rt { color: #000; font-weight: normal; }
}

7. FAQ（よくある質問）

8. ルビフルボタンの説明掲載のお願い

サイト利用者に向けてルビフルボタンの機能の説明と、ボタンの紹介をぜひ掲載いただければ幸いです。
サイトのフッター部分等、お好きな部分に掲載ください。
また、ルビ財団のロゴの掲載をいただける場合は以下よりダウンロードのうえご利用ください。

▼記入例
※文章はサイトに合わせて変更いただいて問題ございません。
※「ルビON／OFF」の表記に関しては、サイト上でのボタンの表記に変更ください。

ふりがな（ルビ）表示について
当サイトでは、漢字にふりがなを表示するために「ルビフルボタン」を導入しています。
画面内に表示される「ルビON／OFF」ボタンを操作することで、ふりがなの表示・非表示を切り替えることができます。
本機能は、漢字に対して自動的にふりがなを付与する仕組みのため、一部正確でない表示が含まれる場合があります。
また、一部のふりがなについては、「ルビON／OFF」に関わらず表示される場合があります。あらかじめご了承ください。

ルビフルボタンは、一般財団法人ルビ財団が提供する仕組みです。
サイトにコードを追加することで、無償でルビ機能を追加することができます。
ルビフルボタンの詳細：https://rubizaidan.jp/rubyful-button/

▼ルビ財団ロゴ
・ロゴをダウンロード