Viewer

CSV、XLSX/XLS、PDFファイルをインポートし、インタラクティブなテーブル、チャート、カレンダーなどのビジュアライゼーションとしてDrupalで表示します。

viewer
107 sites
59
drupal.org
gui content field api
visualización de datos importación CSV importación Excel xlsx gráficos tablas datatables Chart.js ApexCharts visor de archivos visor PDF visualización de datos hoja de cálculo calendario fullcalendar FooTable
Drupal 9 Drupal 10 Drupal 11

インストール

Drupal 11, 10, 9 v1.0.5
composer require 'drupal/viewer:^1.0'

概要

Viewerモジュールは、CSV、XLSX/XLS、PDFファイルなどの構造化・非構造化ファイルタイプをインポート、処理、表示するための包括的なソリューションを提供します。コンテンツ作成者は、手動でのデータ入力なしに、さまざまなソースからのデータをDrupalサイト上で直接表示できます。

このモジュールは、テーブル（DatatablesやFooTable連携）、各種チャート（Chart.jsやApexCharts）、カレンダービュー（FullCalendar）、PDFプレビュー（PDF.js）など、複数のビジュアライゼーションタイプをサポートする柔軟なプラグインアーキテクチャを備えています。データは、手動ファイルアップロード、リモートURL、FTP/SFTPサーバー、ローカルファイルパスなど、複数のソースからインポートできます。

Viewerは参照フィールド、Block、またはCKEditor5連携を通じてサイトに埋め込むことができます。このモジュールは、設定可能なスケジュールによるcronを介した自動データインポート、複数の条件オプションによるデータフィルタリング、セル値コンバーター、インポートステータス更新の通知（EmailおよびSlack）をサポートしています。

Features

  • 複数のソース（アップロード、URL、FTP、SFTP、ファイルパス）からCSV、XLSX/XLS、PDFファイルをインポート
  • 複数のテーブルライブラリオプション（基本テーブル、Datatables、FooTable）でデータをテーブルとして表示
  • Chart.jsを使用した各種チャートタイプの作成（折れ線、棒、円/ドーナツ、散布図/バブル、混合）
  • ApexChartsを使用した各種チャートタイプの作成（折れ線、棒、円/ドーナツ、散布図、バブル、ツリーマップ、ローソク足、混合）
  • 日付ベースのデータ用FullCalendarによるカレンダービュー連携
  • PDF.jsライブラリを使用したPDFプレビュー
  • タブ、垂直タブ、またはアコーディオンレイアウトを使用した複数Viewerの整理
  • ワークシートタブサポート付きXLSXファイルのスプレッドシートビュー
  • 15以上のフィルター条件（等しい、より大きい、含む、日付比較、正規表現など）を使用したデータフィルタリング
  • セル値コンバーター（リンク、通貨フォーマット、パーセンテージ、画像、インラインPeityチャート）
  • ドラッグ＆ドロップによる列の表示/非表示、ヘッダー、順序の設定
  • 設定可能な頻度（毎時、毎日、毎週、毎月）でのcronによる自動インポート
  • EmailおよびSlack webhookによるインポート通知
  • コンテンツにViewerを添付するためのViewer参照フィールドタイプ
  • サイト上の任意の場所にViewerを配置するためのBlock
  • リッチテキストフィールドにViewerを埋め込むためのCKEditor5連携
  • ViewerデータをJSONとして取得するためのREST APIエンドポイント
  • インポートを実行するためのDrushコマンド

Use Cases

財務レポートの表示

XLSXファイルから四半期財務データをインポートし、インタラクティブなチャートとして表示します。SFTP Sourceを使用してセキュアなサーバーから毎日自動的にレポートを取得します。複数のApexCharts Viewer（売上高の棒チャート、トレンドの折れ線チャート）を作成し、タブで整理します。新しいデータがインポートされたときにSlack経由で財務チームに通知するよう設定します。

CSVからの製品カタログ

ERPシステムからエクスポートされたCSVファイルから製品カタログを表示します。検索、ソート、ページネーション機能付きのDatatables Viewerを使用します。セルコンバーターを設定して製品画像をインラインで表示し、価格を通貨形式でフォーマットします。データを最新に保つためにURLからの毎時インポートを設定します。

イベントカレンダー

イベントタイトルと日付を含むCSVデータからイベントカレンダーを作成します。FullCalendar Viewerを使用してイベントを月次カレンダービューで表示します。タイトル、開始日、終了日の列マッピングを設定します。共有Google Sheets CSVエクスポートURLからデータをインポートします。

記事への埋め込みデータビジュアライゼーション

コンテンツ編集者がCKEditor5を使用して記事コンテンツにデータビジュアライゼーションを埋め込めるようにします。Viewerテキストフィルターとツールバーボタンを有効にします。編集者は設定済みの任意のViewerを記事本文に直接挿入でき、シームレスなデータストーリーテリングを実現します。

複数データソースのダッシュボード

複数のViewer Blockを使用してダッシュボードページを作成します。売上データを棒チャート、ウェブサイトトラフィックを折れ線チャート、在庫レベルをテーブルで表示します。各Viewerは独自のデータSourceと更新スケジュールを持ち、すべてを1つのページに表示できます。

PDFドキュメントプレビュー

PDFドキュメント（契約書、レポート、マニュアル）をコンテンツページ上で直接表示します。PDFファイルをアップロードし、インラインプレビュー用にPDF.js Viewerを設定します。ユーザーはダウンロードせずにドキュメントを閲覧できます。

Tips

  • タブまたはアコーディオンViewerを使用して、ユーザーを圧倒することなく関連する複数のビジュアライゼーションを1つのページに整理します
  • 適切なキャッシュタグが自動的に適用されます。Sourceデータが変更されるとViewerが更新されます
  • 大規模なデータセットには、パフォーマンス向上のためにサーバーサイドページングを有効にしたDatatablesを使用します
  • 日付ベースのファイルインポート用にURL/Path Sourceでトークン置換（例：[date:custom:Y-m-d]）を使用します
  • データパイプラインの問題を早期に検出するため、失敗したインポートのSlack通知を設定します
  • 埋め込み前にiframeプレビューを使用してViewerをプレビューし、データ表示を確認します
  • ソースファイルを変更せずにデータ表示を強化するためにセルコンバーターを使用します
  • 財務データには、時系列分析用に日付フィルターと組み合わせたApexChartsローソク足を使用します

Technical Details

Admin Pages 10
Viewer一覧 /admin/structure/viewers

作成されたすべてのViewerエンティティを表示するメイン一覧ページ。ここから新しいViewerの作成、既存のViewerの編集、設定の構成、フィルターの管理、Viewerのプレビュー、Viewerの有効化/無効化、Viewerの削除が可能です。各Viewerには名前、ステータス、関連付けられたSource、Viewerタイプが表示されます。

Source一覧 /admin/structure/viewer-source

Viewer Sourceエンティティを管理します。Sourceはデータの取得元（アップロード、URL、FTP、SFTP、ファイルパス）とファイルタイプ（CSV、XLSX、PDF）を定義します。Sourceは複数のViewerで共有できます。

Viewerの編集 /admin/structure/viewers/{viewer}/edit

名前、ステータス、関連付けられたSourceなど、基本的なViewerプロパティを編集します。

Viewer設定 /admin/structure/viewers/{viewer}/settings

プラグイン固有の表示設定を構成します。設定はViewerタイプによって異なりますが、一般的にはタイトル、サブタイトル、最終インポート表示オプション、ページネーション、チャート固有のオプションが含まれます。

Viewer構成 /admin/structure/viewers/{viewer}/configuration

列の順序（ドラッグ＆ドロップ）、ヘッダーのオーバーライド、表示/非表示、空列の処理、セル値コンバーターなど、列レベルの設定を構成します。

Viewerフィルター /admin/structure/viewers/{viewer}/filters

表示する行を制限するデータフィルターを構成します。組み合わせ可能な複数のフィルター条件をサポートしています。

Sourceの編集 /admin/structure/viewer-source/{viewer_source}/edit

名前やインポート頻度（cron対応ソース用）などのSourceプロパティを編集します。

Sourceスケジュール /admin/structure/viewer-source/{viewer_source}/schedule

自動インポートの次回スケジュール時刻を構成します。

Source通知 /admin/structure/viewer-source/{viewer_source}/notifications

インポートイベントの通知を構成します。EmailとSlack webhookの両方の通知をサポートしています。

サポート /admin/structure/viewer-support

モジュールに関する情報、ドキュメントリンク、サポートオプションを表示するサポートページ。

権限 13
Viewer Sourceの管理

Viewer Sourceの設定へのアクセスを許可します。制限されたアクセス権限です。

新しいViewer Sourceの作成

新しいViewer Sourceエンティティの作成を許可します

Viewer Sourceの削除

Viewer Sourceエンティティの削除を許可します

Viewer Sourceの編集

Viewer Sourceエンティティの編集を許可します

有効なViewer Sourceの表示

公開/有効なViewer Sourceエンティティの表示を許可します

無効なViewer Sourceの表示

非公開/無効なViewer Sourceエンティティの表示を許可します

Viewer Sourceの一括インポート

一括インポート操作のトリガーを許可します

Viewerの管理

Viewerの設定へのアクセスを許可します。制限されたアクセス権限です。

新しいViewerの作成

新しいViewerエンティティの作成を許可します

Viewerの削除

Viewerエンティティの削除を許可します

Viewerの編集

Viewerエンティティの編集を許可します

有効なViewerの表示

公開/有効なViewerエンティティの表示を許可します

無効なViewerの表示

非公開/無効なViewerエンティティの表示を許可します

Drush Commands 1
drush viewer:import

DrushでViewer自動インポートを実行します。スケジュールされたインポートのキューを処理します。

Troubleshooting 6
SFTPインポートが'Class not found'エラーで失敗する

必要なFlysystem SFTPアダプターをインストールしてください：composer require league/flysystem-sftp-v3

XLSXファイルが正しく処理されない

PhpSpreadsheetライブラリをインストールしてください：composer require phpoffice/phpspreadsheet

チャートがレンダリングされず、データが空で表示される

REST APIエンドポイントにアクセスできることを確認してください。Sourceを確認してViewerにデータがあることを確認します。JavaScriptライブラリが読み込まれていることを確認します（ブラウザコンソールでエラーをチェック）。

自動インポートが実行されない

cronが設定され実行されていることを確認してください。Sourceに頻度が設定されていることを確認します（「無効」ではないこと）。「drush viewer:import」を使用して手動でインポートをトリガーし、エラーをチェックします。

通知が送信されない

Sourceで通知設定が構成されていることを確認してください。メールの場合、メールシステムが設定されていることを確認します（SMTPモジュールの使用を検討）。Slackの場合、webhook URLが正しく、Slackアプリが適切な権限を持っていることを確認します。

ViewerがCKEditor5に表示されない

テキストフォーマット設定でViewerフィルターを有効にしてください。CKEditor5ツールバー設定にViewerボタンを追加します。設定変更後はキャッシュをクリアしてください。

Security Notes 4
  • 「administer viewer」および「administer viewer source」権限は制限付きとしてマークされており、信頼できる管理者にのみ付与する必要があります
  • SFTPパスワードはDrupalの暗号化を使用して保存前に暗号化されます
  • REST APIはユーザー権限とキャッシュコンテキストを尊重します
  • ファイルアップロードはViewerタイプに基づいて許可された拡張子に対して検証されます