Markdown レンダリング

本記事では、WebChat のチャットウィンドウにおけるメッセージ内容のレンダリング最適化機能をご紹介します。AI アシスタントの回答をより見やすく、読みやすく表示できるようになります。

メッセージ内容のレンダリングとは？

メッセージ内容のレンダリングとは、WebChat が AI アシスタントのテキスト回答を、ユーザーが目にする視覚的な表示へと変換する仕組みを指します。AI アシスタントの回答には、以下のような内容が含まれる場合があります。

• プレーンテキスト：通常のテキスト記述

• Markdown 形式：見出し、リスト、太字、斜体などの書式を含む内容

• コードブロック：コードのサンプルやコマンド

• 表：構造化されたデータの表示

• リンク：外部リンクや参考資料

レンダリングの品質が高いほど、これらの内容を読み取り、理解しやすくなります。

最適化項目

1. Markdown レンダリングエンジンの全面アップグレード

WebChat では、より豊富な書式とより正確なレンダリングに対応した強化版 Markdown レンダリングエンジンを採用しました。

対応している Markdown 形式

書式の種類	構文の例	レンダリング効果の説明
見出し	# 見出し1、## 見出し2	明確な見出し階層で、内容を区切りやすくします
太字	**太字のテキスト**	重要なポイントを強調します
斜体	*斜体のテキスト*	補足的な強調や説明に使用します
リスト	- 項目1、1. 項目1	順序付き・順序なしのリスト
コード	`コード`	インラインのコードやコマンド
コードブロック	```コード```	複数行のコード、シンタックスハイライトに対応
表	| 列1 | 列2 |	構造化されたデータの表示
リンク	[リンクテキスト](URL)	クリック可能なハイパーリンク
引用	> 引用内容	引用や特別な補足説明

2. ダークモードの視覚最適化

エンドユーザーのデバイスがダークテーマを使用している場合、WebChat はメッセージ内容の視覚的な表示を自動的に調整し、暗い背景でも明瞭さと可読性を確保します。

ダークモードの調整項目

1. テキストと背景のコントラスト：テキストの色を自動的に調整し、暗い背景でもはっきりと表示されるようにします

2. メッセージフィードバックボタン：ボタンの色や枠線を調整し、ダークモードでも明瞭さを保ちます

3. 表の視覚的な表示：表の枠線や背景色を調整し、可読性を高めます

4. 引用ブロックの背景：引用ブロックの背景色を調整し、主要な内容と区別できるようにします

3. ストリーミングレンダリングのパフォーマンス向上

WebChat はリアルタイムのストリーミング方式で AI アシスタントの回答を表示するため、ユーザーは回答が完全に生成されるまで待つ必要がありません。今回のアップデートでは、ストリーミングレンダリングのパフォーマンスを最適化しました。

• レンダリング速度の向上：Markdown 形式のレンダリング速度が向上し、遅延感が軽減されました

• 滑らかさの改善：テキストが一文字ずつ表示される際もより滑らかで、目立った引っかかりがありません

• 書式の正確性：ストリーミングの途中でも、Markdown 形式が正しくレンダリングされます

{% hint style="success" %} ユーザーは AI アシスタントが回答を生成している途中でも、すでに生成された内容をリアルタイムで確認でき、回答が完成するまで待つ必要がありません。 {% endhint %}

実際の活用シーン

💻 技術ドキュメントアシスタント

利用シーン： 開発者がコードのサンプルを尋ねた際に、AI アシスタントがコードブロックを含む回答を提供します。

最適化の効果：

• コードブロックがシンタックスハイライトに対応し、読みやすくなります

• ダークモードでもコードがはっきりと表示されます

• 開発者はコードをそのままコピーして利用できます

回答の例：

以下は Python で CSV ファイルを読み込むサンプルです。

```python
import pandas as pd

df = pd.read_csv('data.csv')
print(df.head())

このコードは CSV ファイルを読み込み、先頭 5 件のデータを表示します。

### 📊 データ分析アシスタント <a href="#data-analysis-assistant" id="data-analysis-assistant"></a>

**利用シーン**：
ユーザーが売上データの分析結果を尋ねた際に、AI アシスタントが表形式で提示します。

**最適化の効果**：
* 表の書式が明確で、列が揃って表示されます
* ダークモードでも表の枠線や背景色が適切に調整されます
* 大量のデータでも可読性を保てます

**回答の例**：

以下は今四半期の売上トップ3の製品です。

製品名	販売数量	売上額
製品 A	1,250	¥125,000
製品 B	980	¥98,000
製品 C	856	¥85,600

売上データは今月20日時点のものです。

### 📚 学習アシスタント <a href="#tutorial-assistant" id="tutorial-assistant"></a>

**利用シーン**：
学生が学習の手順を尋ねた際に、AI アシスタントが順序付きリストで説明します。

**最適化の効果**：
* リスト項目に明確に番号が付きます
* 見出しの階層が明確で、手順の順序を理解しやすくなります
* 重要な内容は太字で強調されます

**回答の例**：

Python を学習するためのおすすめステップ

1. 基礎構文

   • 変数とデータ型

   • 条件分岐とループ

2. 応用概念

   • 関数とモジュール

   • オブジェクト指向プログラミング

3. 実践練習

   • 小規模なプロジェクトを完成させる

   • オープンソースへの貢献に参加する

各ステップには2〜3週間ほどかけて学習することをおすすめします。

## 管理者設定 <a href="#admin-settings" id="admin-settings"></a>

### Markdown レンダリング設定 <a href="#markdown-rendering-settings" id="markdown-rendering-settings"></a>

WebChat の Markdown レンダリング機能は、デフォルトで有効になっています。Markdown 形式が不要な利用シーンの場合は、設定で調整できます。

1. 「公開」→「WebChat 設定」に入ります
2. 「メッセージレンダリング」の設定ブロックを見つけます
3. レンダリングモードを選択します。
   * **完全な Markdown**：すべての Markdown 形式に対応（デフォルト）
   * **基本書式**：太字・斜体・リンクのみに対応
   * **プレーンテキスト**：いかなる書式もレンダリングしません

### ダークモード設定 <a href="#dark-mode-settings" id="dark-mode-settings"></a>

ダークモードは、ユーザーのデバイス設定に応じて自動的に有効になります。WebChat を常にライトテーマまたはダークテーマで固定したい場合は、以下の手順で設定します。

1. 「公開」→「WebChat 設定」に入ります
2. 「外観」の設定ブロックを見つけます
3. テーマモードを選択します。
   * **自動**：ユーザーのデバイス設定に従う（デフォルト）
   * **ライト**：常にライトテーマを使用
   * **ダーク**：常にダークテーマを使用

<div data-gb-custom-block data-tag="hint" data-style='info'>

WebChat の外観設定の詳細については、こちらをご参照ください：[対話プラットフォームの連携：ウェブサイト](website.md)

</div>

## パフォーマンスへの影響 <a href="#performance-impact" id="performance-impact"></a>

### レンダリングパフォーマンス <a href="#rendering-performance" id="rendering-performance"></a>

最適化後の Markdown レンダリングエンジンがパフォーマンスに与える影響は次のとおりです。

* **読み込み時間**：初回の読み込みが約 0.1〜0.2 秒増加（ほとんど体感できません）
* **メモリ使用量**：約 1〜2 MB 増加（現代のブラウザへの影響はごくわずかです）
* **レンダリング速度**：旧版と比較して約 30% 向上

### 互換性 <a href="#compatibility" id="compatibility"></a>

最適化後のレンダリングエンジンは、以下のブラウザに対応しています。

* Chrome / Edge（バージョン 90 以上）
* Firefox（バージョン 88 以上）
* Safari（バージョン 14 以上）
* モバイルデバイスのブラウザ（iOS Safari、Android Chrome）

<div data-gb-custom-block data-tag="hint" data-style='warning'>

古いバージョンのブラウザでは、一部の Markdown 形式が正しく表示されない場合があります。ユーザーにブラウザの更新を案内することをおすすめします。

</div>

## よくある質問 <a href="#faq" id="faq"></a>

### Q1：AI アシスタントの回答に書式が付かないのはなぜですか？ <a href="#faq-ai-agent-response-no-format" id="faq-ai-agent-response-no-format"></a>

考えられる原因：
* AI アシスタントが Markdown 構文を使用していない
* Markdown レンダリング機能が無効になっている
* ブラウザのバージョンが古すぎる

### Q2：ダークモードで一部の内容が見えにくい場合はどうすればよいですか？ <a href="#faq-dark-mode-content-visibility" id="faq-dark-mode-content-visibility"></a>

以下をお試しください。
1. ブラウザのキャッシュをクリアする
2. ページを再読み込みする
3. 最新バージョンのブラウザを使用しているか確認する

### Q3：コードブロックのシンタックスハイライトの色をカスタマイズできますか？ <a href="#faq-customize-code-block-syntax-highlight" id="faq-customize-code-block-syntax-highlight"></a>

現在、シンタックスハイライトの色は固定されています。今後のバージョンでカスタマイズ機能が開放される可能性があります。

### Q4：表の内容が長すぎる場合はどのように表示されますか？ <a href="#faq-long-table-display" id="faq-long-table-display"></a>

表は自動的に横スクロールに対応し、内容を完全に表示しつつ、他の内容のレイアウトに影響を与えないようにします。

### Q5：レンダリング最適化はモバイルデバイスの表示に影響しますか？ <a href="#faq-mobile-device-rendering" id="faq-mobile-device-rendering"></a>

影響しません。レンダリング最適化はモバイルデバイス向けにも適応されており、小さな画面でもはっきりと表示されるようにしています。