# ファイルビューアー

Studioを離れることなく、あらゆるファイルをプレビューできます。組み込みビューアーがPDF、スプレッドシート、プレゼンテーション、コードなどをレンダリングするため、外部アプリケーションに切り替えることなく、AIが生成したレポートやアップロードしたドキュメントをすぐに確認できます。

注意
ファイルビューアーは、サーバーに保存されたファイルのコンテンツをクライアントサイドでレンダリングします。ビューアーでファイルを開いても、AIがファイルを再処理することはありません。ファイルのコンテンツを直接レンダリングします。

## 目的

AIが生成したファイルまたはご自身がアップロードしたファイルを、各ファイルタイプに対応した組み込みビューアーで開いて操作します。

## 前提条件

- Treasure AI Studioにサインイン済みであること（[はじめに](/ja/products/ai-studio/getting-started)）
- 現在のチャットセッションにファイルが存在すること（アップロード済みまたはAIが生成したもの）


## サポートされているビューアー

| ファイルタイプ | 拡張子 | ビューアー | 主な機能 |
|  --- | --- | --- | --- |
| **PDF** | pdf | PDFビューアー | ズーム、ページナビゲーション、幅に合わせる |
| **スプレッドシート** | xlsx, xls, csv, tsv | スプレッドシートビューアー | シートタブ、列の並べ替え、列幅のリサイズ |
| **プレゼンテーション** | pptx, ppt | プレゼンテーションビューアー | スライドサムネイル、キーボードナビゲーション、スピーカーノート |
| **ドキュメント** | docx, doc | ドキュメントビューアー | レンダリングされたHTML |
| **画像** | png, jpg, jpeg, gif, svg, webp, bmp, ico | 画像ビューアー | フィットするようにスケーリング |
| **コード** | js, jsx, ts, tsx, py, sql, sh, yaml, json, xml, css, rb, go, rs, java, c, cpp | コードビューアー | シンタックスハイライト、行番号 |
| **Markdown** | md, markdown | Markdownビューアー | レンダリングされたMarkdown |
| **HTML** | html, htm | HTMLビューアー | サンドボックス化されたiframe |
| **ジャーニー** | *.journey.yaml, *.journey.yml | ジャーニービューアー | インタラクティブなビジュアライゼーション |
| **Mermaid** | mmd, mermaid | Mermaidビューアー | レンダリングされた図 |
| **プレーンテキスト** | txt, log、および認識されない拡張子 | テキストビューアー | 等幅フォント、整形済みテキスト |


## PDFビューアー

PDFビューアーは、ズームコントロールとページナビゲーションを使用して、ドキュメントをページごとにレンダリングします。

### コントロール

| コントロール | 説明 |
|  --- | --- |
| **ズームイン** / **ズームアウト** | ズームレベルを25%単位で拡大または縮小します |
| **ズームパーセンテージ** | 現在のズームレベルを表示します（範囲：50%〜300%） |
| **幅に合わせる** | ドキュメントをビューアーの幅に合わせて自動的にスケーリングします |
| **ページカウンター** | ドキュメントをスクロールすると**X / Y ページ**と表示されます |


### ナビゲーション

ドキュメントを縦方向にスクロールします。ページカウンターはスクロールに合わせて自動的に更新され、最も表示されているページを追跡します。

### PDFに関するヒント

- **テキストベースのPDF**（ネイティブデジタル）は最も確実にレンダリングされます。スキャンされたドキュメントも動作する場合がありますが、品質が低下することがあります。
- **パスワードで保護されたPDF**はレンダリングできません。アップロード前に保護を解除してください。PDFの読み込みに失敗した場合、次のメッセージが表示されます：**PDFの読み込みに失敗しました。ファイルが破損しているか、パスワードで保護されている可能性があります。**
- **大容量のPDF**は、AIが処理する際に大量のコンテキストを消費します。50ページを超えるドキュメントの場合は、関連するセクションのみをアップロードすることをご検討ください。


技術的な注意事項
PDFビューアーは、ローカルにバンドルされたPDF.jsワーカーを使用した`react-pdf`を利用しています。ページはキャンバス上にレンダリングされ、IntersectionObserverがページカウンター用に最も表示されているページを追跡します。ズーム範囲は0.5x〜3.0xで、0.25x単位で調整できます。

## スプレッドシートビューアー

スプレッドシートビューアーは、並べ替え、列幅のリサイズ、複数シートのサポートを備えた表形式データを表示します。

### 機能

| 機能 | 説明 |
|  --- | --- |
| **シートタブ** | 複数シートのワークブック（XLSX/XLS）の場合、シートを切り替えるためのタブが下部に表示されます |
| **列の並べ替え** | 列ヘッダーをクリックすると昇順に並べ替えられ、もう一度クリックすると降順になります。数値は数値順、テキストはアルファベット順に並べ替えられます |
| **列幅のリサイズ** | 列の境界線をドラッグして幅を調整します |
| **スクロール** | 大規模なデータセットに対して水平・垂直スクロールが可能です |


CSVおよびTSVファイルの場合、ビューアーはコンテンツに基づいて自動計算された列幅を持つスクロール可能なテーブルをレンダリングします。単一シート形式の場合、シートタブは表示されません。

シートにデータがない場合、ビューアーには**空のシート**と表示されます。

## プレゼンテーションビューアー

プレゼンテーションビューアーは、スライドサムネイルパネル、フルサイズのスライドビュー、オプションのスピーカーノートを備えたPPTX/PPTファイルをレンダリングします。

Presentation viewer showing slide thumbnails and active slide
### レイアウト

- **左パネル** — クイックナビゲーション用のスライドサムネイル。アクティブなスライドは枠線でハイライト表示されます。
- **中央エリア** — 元のアスペクト比を維持しながら、選択したスライドをフルサイズでレンダリングします。
- **下部セクション** — **スピーカーノート**（折りたたみ可能）。クリックして展開または折りたたみます。


### ナビゲーション

| 操作方法 | アクション |
|  --- | --- |
| **サムネイルをクリック** | そのスライドにジャンプします |
| **左/右矢印キー** | 前/次のスライドへ移動します |
| **上/下矢印キー** | 前/次のスライドへ移動します |
| **Home** | 最初のスライドにジャンプします |
| **End** | 最後のスライドにジャンプします |


スライドカウンター（例：「3 / 12」）がビューアーに表示され、現在の位置を示します。

プレゼンテーションにスライドがない場合、ビューアーには**このプレゼンテーションにスライドが見つかりません**と表示されます。

## ドキュメントビューアー

ドキュメントビューアーは、DOCXおよびDOCファイルをフォーマットされたHTMLとしてレンダリングし、元のドキュメントの見出し、段落、リスト、テーブル、基本的なスタイルを保持します。

読み込み中の状態では**ドキュメントを読み込み中...**と表示されます。

## 画像ビューアー

画像は元のアスペクト比を維持しながら、ビューアーエリア内に収まるようにスケーリングされて表示されます。サポートされている形式には、PNG、JPG、JPEG、GIF（アニメーションを含む）、SVG、WebP、BMP、ICOが含まれます。

## コードビューアー

コードビューアーは、行番号付きのシンタックスハイライトされた読み取り専用のソースコードファイルを表示します。

### サポートされている言語

Python、JavaScript、TypeScript（JSX/TSXを含む）、SQL、シェルスクリプト、YAML、JSON、XML、CSS、Ruby、Go、Rust、Java、C、C++、HTMLなど。

ビューアーはファイル拡張子から言語を自動的に検出し、適切なシンタックスハイライトを適用します。ライトテーマとダークテーマの両方がサポートされており、Studioの外観設定に合わせて切り替わります。

## Markdownビューアー

Markdownファイル（`.md`、`.markdown`）は、見出し、リスト、コードブロック、リンク、テーブル、その他の標準的なMarkdown要素を含むフォーマットされたコンテンツとしてレンダリングされます。チャットのAIレスポンスで使用されているものと同じレンダラーを使用しています。

## HTMLビューアー

HTMLファイルはビューアー内の**サンドボックス化されたiframe**でレンダリングされます。サンドボックスはスクリプトの実行を許可しますが、同一オリジンアクセス、ナビゲーション、その他の潜在的に安全でない操作を制限します。

これは、AIが生成したHTMLレポート、ダッシュボード、またはビジュアライゼーションをStudio内で直接プレビューする際に便利です。

## ジャーニービューアー

ジャーニーYAMLファイル（`.journey.yaml`、`.journey.yml`）は、インタラクティブなジャーニービジュアライゼーションとしてレンダリングされます。ステージ、ステップ、条件をクリックすると、サイドパネルに詳細が表示されます。

ジャーニービジュアライゼーションの詳細については、[ジャーニーキャンバスビジュアライゼーション](/ja/products/ai-studio/visualization/journey-canvas)をご参照ください。

ファイルを解析できない場合、ビューアーには**ジャーニーファイルを解析できません。**と表示されます。

## Mermaidビューアー

Mermaid図ファイル（`.mmd`、`.mermaid`）は、フローチャート、シーケンス図、クラス図、その他のMermaidがサポートする図タイプなど、ビジュアルな図としてレンダリングされます。

ビューアーは現在のテーマ（ライトまたはダーク）に自動的に適応します。

## プレーンテキストビューアー

`.txt`、`.log`、または認識されない拡張子を持つファイルは、整形済みの等幅テキストとして表示されます。これは、特定のビューアーがファイルタイプに一致しない場合のフォールバックビューアーとして機能します。

## ビューアーエラー

ファイルのコンテンツを読み込めない場合、ビューアーには**ファイルコンテンツを読み込めません。**と表示されます。

特定のビューアーエラーについては以下をご参照ください：

| ビューアー | エラーメッセージ |
|  --- | --- |
| **PDF** | 「PDFの読み込みに失敗しました。ファイルが破損しているか、パスワードで保護されている可能性があります。」 |
| **プレゼンテーション** | 「このプレゼンテーションにスライドが見つかりません」（空の場合） |
| **スプレッドシート** | 「空のシート」（シートにデータがない場合） |
| **ジャーニー** | 「ジャーニーファイルを解析できません。」 |


## モバイルビューアー

iOSでは、ファイルプレビューは以下の考慮事項に従ってインラインでレンダリングされます：

- **コード、CSV、Markdown、HTML、プレーンテキスト**はチャットまたはプレビュー画面に直接レンダリングされます
- **大容量ファイル**はパフォーマンスのために切り捨てられ、次の通知が表示されます：「プレビューが切り捨てられました。完全なファイルを表示するにはダウンロードしてください。」
- **HTMLファイル**は制限された権限を持つサンドボックス化されたiframeでレンダリングされます
- **画像**はインラインで表示され、画面幅に合わせてスケーリングされます


技術的な注意事項
モバイルプレビューは、HermesのJavaScriptエンジンでのレイアウトパフォーマンスの問題を防ぐため、ファイルコンテンツを100,000文字で切り捨てます。完全なファイルは常にダウンロード可能です。

## フルスクリーンモード

### WebおよびDesktop

ビューアーツールバーの**フルスクリーン**ボタン（展開アイコン）をクリックすると、ビューアーが画面全体に拡大されます。**フルスクリーンを終了**（折りたたみアイコン）をクリックするか、**Escape**キーを押すと通常のレイアウトに戻ります。

## Treasure Studio Labsとの違い

| 機能 | Treasure Studio Labs | Treasure AI Studio |
|  --- | --- | --- |
| **PDFビューアー** | AIによる基本的なPDF処理 | ズームとページナビゲーションを備えた組み込みPDFビューアー |
| **コードビューアー** | Monaco Editor（フルIDE） | シンタックスハイライトされた読み取り専用ビューアー |
| **スプレッドシートビューアー** | *（利用不可）* | 並べ替えと複数シートサポートを備えた組み込みビューアー |
| **プレゼンテーションビューアー** | *（利用不可）* | サムネイル、キーボードナビゲーション、スピーカーノートを備えた組み込みビューアー |
| **HTMLビューアー** | *（利用不可）* | サンドボックス化されたiframeビューアー |
| **ジャーニービューアー** | *（利用不可）* | インタラクティブなジャーニービジュアライゼーション |
| **フルスクリーン** | *（利用不可）* | すべてのビューアーに対応したフルスクリーン切り替え |


注意
Treasure Studio LabsはコードファイルにMonaco Editor（VS Codeスタイルのエディター）を使用していました。Treasure AI Studioでは、コードの編集が直接ファイル編集ではなくAIチャットのインタラクションを通じて行われるため、これを読み取り専用のシンタックスハイライトビューアーに置き換えています。

## 確認事項

- [ ] ファイルパネルでファイルをクリックし、適切なビューアーでレンダリングされることを確認する
- [ ] PDFをズームイン/アウトし、ページカウンターが更新されることを確認する
- [ ] スプレッドシートの列を並べ替え、行が並び替えられることを確認する


## トラブルシューティング

| 問題 | 解決策 |
|  --- | --- |
| 「ファイルコンテンツを読み込めません」 | ファイルがまだアップロード中か、サーバーが一時的に利用できない可能性があります。ファイルパネルのヘッダーにある**再読み込み**ボタンをクリックして、再度お試しください |
| PDFページが空白でレンダリングされる | 大容量のPDFは処理に時間がかかる場合があります。読み込みインジケーターが完了するまでお待ちください。空白ページが続く場合は、ファイルをダウンロードして外部ビューアーで開いてください |
| スプレッドシートの列が重なる | 列ヘッダーの境界線をドラッグして列幅を調整してください。非常に幅の広いスプレッドシートの場合は、水平スクロールをご使用ください |


## 次のステップ

- [ファイルのアップロードとダウンロード](/ja/products/ai-studio/files/file-upload-download) — ファイルのアップロードとAIが生成した出力のダウンロード
- [アーティファクト出力](/ja/products/ai-studio/files/artifacts) — AIが生成した出力ファイル（PPTX、DOCX、PDF、XLSX）
- [AIチャットインターフェース](/ja/products/ai-studio/chat/chat) — 会話でのファイルコンテキストの活用