grist static
1.0.0
これは、特別なバックエンド サポートを必要とせずに、通常の 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の上流にあるステップをビルドします。 
