Skip to content
Last updated

ファイルビューアー

WebDesktopMobile

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

注意

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

目的

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

前提条件

  • Treasure AI Studioにサインイン済みであること(はじめに
  • 現在のチャットセッションにファイルが存在すること(アップロード済みまたはAIが生成したもの)

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

ファイルタイプ拡張子ビューアー主な機能
PDFpdfPDFビューアーズーム、ページナビゲーション、幅に合わせる
スプレッドシート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コードビューアーシンタックスハイライト、行番号
Markdownmd, markdownMarkdownビューアーレンダリングされたMarkdown
HTMLhtml, htmHTMLビューアーサンドボックス化されたiframe
ジャーニー*.journey.yaml, *.journey.ymlジャーニービューアーインタラクティブなビジュアライゼーション
Mermaidmmd, mermaidMermaidビューアーレンダリングされた図
プレーンテキスト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)は、インタラクティブなジャーニービジュアライゼーションとしてレンダリングされます。ステージ、ステップ、条件をクリックすると、サイドパネルに詳細が表示されます。

ジャーニービジュアライゼーションの詳細については、ジャーニーキャンバスビジュアライゼーションをご参照ください。

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

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 LabsTreasure 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は処理に時間がかかる場合があります。読み込みインジケーターが完了するまでお待ちください。空白ページが続く場合は、ファイルをダウンロードして外部ビューアーで開いてください
スプレッドシートの列が重なる列ヘッダーの境界線をドラッグして列幅を調整してください。非常に幅の広いスプレッドシートの場合は、水平スクロールをご使用ください

次のステップ