これは、特別なバックエンド サポートを必要とせずに、通常の Web サイト上の.grist
ファイル (Grist スプレッドシート) を表示および操作する方法です。ここでのアイデアは、PDF と同じようにスプレッドシートを Web サイトに配置でき、書式設定やナビゲーションのオプションが優れていて手間がかからず、レポートを作成するのに最適であるということです。
特別なバックエンドを実行できる場合、grist-core は Grist スプレッドシートをホストする最も実績のある方法です。また、外部の Grist インストール (Grist Labs が提供するホスト型サービスなど) から Grist スプレッドシートを埋め込む場合には、多くの目的で Grist の埋め込みが適切な場合があります。ただし、データを外部でホストできず、独自の Grist インストールを立ち上げる操作上の負担を望まない場合は、 grist-static
使用すると、通常の Web サイトで Grist スプレッドシートを簡単にレンダリングする方法が提供されます。 PDF と同様に、スプレッドシートを表示したり、スプレッドシート内を移動したり、検索したりすることができます。 PDF よりも優れており、選択内容を変更したり、数値を変更して何が起こるかを試したりすることができます。すべてのビューアは独自のコピーを持ち、その変更は他の人に見られたり、保存されたりすることはありません。これは、何百万人もの同時ユーザーに Grist ドキュメントを表示するためのスケーラブルな方法でもあります。
https://gristlabs.github.io/grist-static には、GitHub ページでホストされている Grist ドキュメントの例がいくつか示されています。
最近では、PDF を Web サイトに配置でき、ブラウザーで適切に表示されることを期待して PDF にリンクできます。ブラウザは Grist をネイティブにサポートしていませんが [まだ :-)]、次のような小さなラッパー ページを作成できます。
<!doctype html >
< html >
< head >
< meta charset =" utf8 " >
< script src =" https://grist-static.com/latest.js " > </ script >
</ head >
< body >
< script >
bootstrapGrist ( {
initialFile : 'investment-research.grist' ,
name : 'Investment Research' ,
} ) ;
</ script >
</ body >
</ html >
.html
ファイルの横に.grist
ファイルを配置し、 bootstrapGrist
にオプションを入力するだけです。initialData: 'path/to/data.csv'
を渡して、CSV ファイルを新しいテーブルにインポートすることもできます。この場合、 initialFile
はオプションです。initialContent
オプションもあります。これを使用して、CSV ファイルのコンテンツを渡すことができます。elementId: 'element-id
を渡して、ページ内の要素内で Grist を開くこともできます。singlePage: true
を設定すると、使用頻度の低い単一ページ レイアウトを実現できます。 Grist は、CSV を含む複数の形式のデータを処理できます。 CSV は非常に一般的な形式であり、オンラインでの操作は依然として面倒なため、特に表示、並べ替え、フィルタリング、CSV からのコピー/ペーストを直接行うための合理化されたcsv-viewer.js
ユーティリティにgrist-static
パッケージ化しました。ウェブページ。
Web ページのhead
領域にビューアを追加するだけです。
< head >
< script src =" https://grist-static.com/csv-viewer.js " > </ script >
</ head >
次に、URL から CSV を開くボタンを作成できます。
< button data-grist-csv-open =" transactions.csv " > View CSV </ button >
CSV はファイル、またはサイトがユーザーに対して動的に生成する CSV データの URL です。
ボタンではなくリンクを使用している場合も、同じアプローチが機能します。
< a data-grist-csv-open =" transactions.csv " href =" # " > View CSV </ a >
もちろん、ボタンやリンクのスタイルを自由に設定できます。
CSV ビューアーはcsv-viewer
という Web コンポーネントとしても使用できます。
< html >
< head >
< script src =" https://grist-static.com/csv-viewer.js " > </ script >
</ head >
< body >
< csv-viewer initial-data =" path/to/data.csv " style =" height: 500px; border: 1px solid green " >
</ csv-viewer >
</ body >
</ html >
実際、このコンポーネントはbootstrapGrist
関数と同じオプションのセットを受け入れるため、CSV ファイルまたは (その名前にもかかわらず) 選択した Grist ドキュメントを表示するように構成できます。利用可能なオプションの完全なリスト:
initial-file
: ロードする最初の Grist ドキュメント。initial-data
: インポートする CSV ファイル。initial-content
: インポートする CSV ファイルのコンテンツ。name
: 使用する Grist ドキュメントの名前。single-page
: 存在する場合、ドキュメントをあまり使用されない単一ページ レイアウトで表示するブール属性。loader
: 存在する場合、ドキュメントの読み込み中に読み込みスピナーを表示するブール属性。 csv-viewer.js
を使用すると、任意の要素を CSV ファイルのポップアップを開くリンクに変換できることがわかりました。必要なのは、それにdata-grist-csv-open
属性を追加することだけです。
他にもオプションがあります。
data-grist-doc-open
を設定すると、(ユーティリティの名前にもかかわらず) CSV ではなく Grist ドキュメントを開くことができます。data-single-page
単一ページ レイアウトの場合はtrue
に設定し、複数ページ レイアウトの場合はfalse
設定します。data-name
使用して、複数ページ レイアウトに表示されるデフォルトのドキュメント名をオーバーライドします。data-loader
を使用して、ドキュメントの読み込み中に読み込みスピナーを表示します。これはデフォルトで有効になっており、無効にするにはdata-loader="false"
を渡します。 Grist のデフォルトのスタイルを提供するいくつかの事前定義されたボタン クラス、具体的にはgrist
およびgrist-large
もあります。
より詳細な制御のために、 bootstrapGrist
と同じ API を備えたグローバルpreviewInGrist
関数がありますが、インラインでレンダリングする代わりにポップアップでプレビューを開きます。これは、動的に作成されたコンテンツやファイルがページの読み込み時に利用できない場合に役立つ場合があります。
Grist スプレッドシートは、デフォルトで多くの履歴を.grist
ファイルに保存します。その履歴を取り除くには、 grist-core
をビルドし、 grist-core
ディレクトリで次の操作を実行します。
yarn run cli history prune PATH/TO/YOUR/doc.grist
ごめんなさい、これは厄介です。
git submodule update --init
make requirements
make build
make serve
# now visit http://localhost:3030/page/
上記のシーケンスでは、開発時の利便性を考慮して、 page
ディレクトリに多くのリンクを配置します。アップロードするファイルを収集するには、代わりに以下を使用します。
make package
# everything you need is in dist/
これまでのすべての HTML サンプルでは、静的ファイルのみを提供する Grist Labs が運営するドメインであるhttps://grist-static.com/
を使用しました。このドメインは使用状況を測定するためにトラフィックをログに記録しますが、Cookie の設定や追跡は行いません。必要なファイルをすべて自分の Web サイトまたは CDN にコピーして、トラフィックを完全にプライベートに保つことができます。
必要なファイルは次の方法で取得できます。
npm pack grist-static
を実行して、NPM レジストリから最新の tarball を取得します。 Tarball ( .tgz
ファイル) は一般的なアーカイブ形式であり、解凍するために利用できる無料のツールが多数あります。どのように到達しても、最終的には、 csv-viewer.js
、 latest.js
、および Grist を構成するその他の多くのファイルを含むdist/
ディレクトリが作成されます。その素材を希望の場所に配置し、URL を適切に更新します。
jsdelivr
CDN は、NPM に配置されたパッケージを自動的にミラーリングするため、これを例として使用してみましょう。以下を置き換えることができます。
< script src =" https://grist-static.com/csv-viewer.js " > </ script >
と:
< script src =" https://cdn.jsdelivr.net/npm/grist-static@latest/dist/csv-viewer.js " > </ script >
もちろん、この特定の変更は、使用状況情報をgrist-static.com
ではなくjsdelivr.net
に移動するだけですが、アイデアはわかります。ファイルを配置する場所に同じパターンを使用するだけです。
ユーザーの変更をブラウザーに保持させるのはうまくいくかもしれません。OPFS が幅広いブラウザーをサポートするようになれば、OPFS がそのための良い選択肢になるかもしれません。その他の手順:
grist-core
の上流にあるステップをビルドします。