静的サイト用のGoogleスプレッドシートCMS





企業は、イベント/製品/サービスについて話すデザイナーに基づいてサイトを作成することが増えています。 独力で、またはプログラマーの参加なしでデザイナーを引き付ける。 現代のデザイナーは、クールで明るく効果的なWebサイトを構築できますが、静的です。 変更はすべて「エディター内のペン」で行い、ページを再発行する必要があります。 しかし、データが非常に頻繁に変更される場合、または少し自動化を追加したい場合-Google Tables and Charts Query Language(およびプログラマーはおなじみです)がここで役立ちます。



数年前、ティルダで収集されたサイトに価格表を追加する必要がある友人からアプローチを受けました。 そして、すべてがうまくいくと、「テーブル」ブロックがあります-データを入力して公開しますが、2つの条件がありました:





したがって、多くのルーチンとデータの不一致の高い確率。 自動化する必要がありました。



また、Google Speadsheetsからも支援を受けました。 プロのこと、つまり通常のエディター、コラボレーション、フォーミュラを説明するのは意味がないと思います。 必要なのは、1日1回通貨を変更することです。 残ったのは、サイトのテーブルからデータを取得する方法の問題だけでした。 そして、Google Charts APIが役に立ちました。

ajaxリクエストを使用して、jsonpの形式でデータを取得できます。



リクエストはアドレス「 docs.google.com/a/google.com/spreadsheets/d/xxxxxx/gviz/tq?tq=yyyyyy 」に送信する必要があります

ここで:

xxxxxx-googleテーブルへのパブリックリンクからの識別子

yyyyyy-変換されたテーブルからデータを取得するSQLクエリ(select%20A%2C%20sum(B)%20group%20by%20Aなどのすべての文字をHTMLエンティティに変換することを忘れないでください)。



もう1つ、SQLは切り捨てられない限り非常によく知られていますが( ドキュメントを参照)、FROMブロックは完全に切り取られています。 したがって、「A、Bを選択し、C = 'f'およびB <Bによる30の順序」などのように記述する必要があります。



結果のスクリプトは、google.visualization.Query.setResponse(データ)メソッドを呼び出します。

データオブジェクトには、次の有用なデータが含まれています。



{ status: "ok", //    table: { cols: [ //      0: { id: "A", label: "  ", type: "string" }, 1: { id: "B", label: "  B", type: "number" }, ... ], rows: [ //    0: { c: [ //      0: { v: "" //      } 1: { v: 3.1415, //      ""  f: "3,1415" //     } ] } ] } }
      
      





それでは、データを使って好きなことをしてください:少なくともテーブルに挿入し、少なくともsvgを生成し(郊外の村のスキームでマップを生成するために使用され、無料と販売のものに注意してください)、少なくともテキストのプレースホルダーを置き換えます-ファンタジーの飛行は無限です。



当然、この方法は負荷の高いシステムには適していません。Googleでは1日あたりのリクエスト数に制限がありますが、これまでのところ、自動化されたサイトは見つかりませんでした。



そしてついにちょっとしたヒント。 クエリが作成されるテーブルは、参照によって共有する必要があります。 そして、突然人目から隠されたフィールドが必要な場合は、Googleスプレッドシートに便利な機能があります。 IMPORTRANGE(key。、Range)と呼ばれます。 キーはアクセスできるテーブルへのリンクであり、範囲は表示するセルのグループです。 つまり データの完全なセットと、必要な範囲のデータのみをインポートするパブリックテーブルで閉じたテーブルを作成します(サイトでそれらを表示します)。



All Articles