Googleスプレッドシート：概要

Googleスプレッドシートは、データをすばやく簡単に編集できるシンプルなデータベースとして機能します。 Googleスプレッドシートを作成し、読み取り/書き込みアクセスを設定したら、APIキー を生成する必要があります。

アプリケーションからシートにアクセスする

アプリケーションからGoogleスプレッドシートにアクセスするには、最初にAPIキーを生成する必要があります。 GoogleアプリケーションのAPIキーは、GoogleAPIコンソールで生成できます。

シートへのアクセスが設定され、APIキーが生成されたので、アプリケーションでデータの使用を開始できます。

まず、GoogleSheet クラスをインポートする必要があります。

import { GoogleSheet } from '@mescius/wijmo.cloud';

次に、APIキーを使用してGoogleスプレッドシートに接続された GoogleSheet オブジェクトを作成します。

const API_KEY = 'AIzaSyCvuXEzP57I5CQ9ifZDG2_K8M3nDa1LOPE';
const SHEET_ID_NW = '1qnf-FCONZj_AmOlyNkpIA3mKvP8FQtVOr7K8Awpo360';
let gsNWind = new GoogleSheet(SHEET_ID_NW, API_KEY, {
    sheets: [ 'Products', 'Categories', 'Suppliers' ]
});

コンストラクターを使用して、ロードするシートを指定します。何も指定されていない場合は、すべてのシートがロードされます。

最後に、ユーザーが製品カテゴリを表示および選択できるようにする ComboBox、ユーザーが選択したカテゴリのデータを表示するための FlexGrid、およびデータベース内の製品の単価を表示するための FlexChart を追加します。

ComboBox

let categoryCombo = new ComboBox('#categoryCombo', {
    placeholder: '(All Categories)',
    isRequired: false,
    displayMemberPath: 'CategoryName',
    itemsSource: gsNWind.getSheet('Categories'),
    selectedIndexChanged: (s, e) => {
        let cat = s.selectedItem;
        gsNWind.getSheet('Products').filter = (item => {
            return cat == null || cat.CategoryID == item.CategoryID;
        });
    }
});

FlexGrid

let supplierMap = new DataMap(gsNWind.getSheet('Suppliers'), 'SupplierID', 'CompanyName');
let productGrid = new FlexGrid('#productGrid', {
    ...gridOptions,
    autoGenerateColumns: false,
    columns: [
        { binding: 'ProductName', header: 'Product Name' },
        { binding: 'UnitPrice', header: 'Unit Price', format: 'n2' },
        { binding: 'QuantityPerUnit', header: 'Quantity Per Unit' },
        { binding: 'SupplierID', header: 'Supplier', dataMap: supplierMap },
        { binding: 'UnitsInStock', header: 'In Stock', format: 'n0' },
        { binding: 'UnitsOnOrder', header: 'On Order', format: 'n0' },
    ],
    itemsSource: gsNWind.getSheet('Products')
});

FlexChart

let productChart = new FlexChart('#productChart', {
    chartType: 'Bar',
    axisX: { majorGrid: true, axisLine: false },
    axisY: { majorGrid: false, axisLine: false, reversed: true },
    legend: { position: 'Bottom' },
    bindingX: 'ProductName',
    series: [
        { binding: 'UnitPrice', name: 'Product Unit Prices (US$)' }
    ],
    itemsSource: gsNWind.getSheet('Products')
});

ユーザーがカテゴリを選択するか、データを並べ替えると、グリッドとグラフが自動的に更新されます。

Googleスプレッドシート：概要
アプリケーションからシートにアクセスする