GoogleシートAPIを使用してスプレッドシートに基本的な条件付き書式を追加する

ここに上陸した場合は、前の記事をチェックアウトする方法については、Googleのログインを使用して古い反応アプリケーションを配線したので、ボタンをクリックして新しいGoogleシートを生成することができますを確認してください.この記事では、スプレッドシートのセルに基本的な書式設定と同様に条件付き書式を追加するために、バニラJavaScriptとGoogleシートAPIを使用する方法について説明します.

書式設定
このプロジェクトのために、私は2つの主要なゴールをフォーマットしました.私の最初の目標は、基本的な書式をセルの基本位置に適用することです.私の第2の目標はいくつかの条件付き書式を加えることでした--すなわち、そのセル(またはそのためのもう一つの細胞)の値に基づいて特定の細胞に適用される書式設定.いくつかの研究の後、私は1つの関数の中に基本的な書式設定と条件付き書式を適用できることを学んだ.

addFormat関数の設定
書式の両方を実現する関数の基本的なスケルトンです.次の節では、以下の各書式のリクエストオブジェクトを破棄します.

export function addFormatting(spreadsheet) {
  var spreadsheetId = spreadsheet.spreadsheetId;
  var sheet1Id = spreadsheet.sheets[0].properties.sheetId
  var sheet2Id = spreadsheet.sheets[1].properties.sheetId

  var requests = [
    // add an object for each basic formatting rule

    //add an object for each conditional formatting rule
  ];

  var body = {requests: requests}

  window.gapi.client.sheets.spreadsheets.batchUpdate({
    spreadsheetId: spreadsheetId,
    resource: body
  }).then((response) => {
    console.log(`formatting and conditional formatting updated.`);
  });
}

にaddFormatting 関数は、関数に渡されたスプレッドシートオブジェクトから値を引いて変数を定義することから始めます.spreadsheetId , sheet1Id , and sheet2Id ).
次に、更新したい書式のプロパティのすべてを定義するリクエストオブジェクトの配列を作成します.記事の次の2つのセクションは詳細にこれを説明するでしょう、しかし、今のところ、我々はこれがオブジェクトの配列であるということを知っています.
リクエスト配列があると、リクエストの本体を設定することでリクエストの本文を定義することができますrequests 配列.
最後に、GoogleシートAPIをコールする準備をしていますspreadsheets.batchUpdate() メソッド.私たちの引数はspreadsheetId スプレッドシートの更新を行いますbody 我々の要求.レスポンスを受信すると、別の関数を呼び出すことができます.
以下では、基本的な書式設定を更新するためのリクエストオブジェクトを作成する方法について説明します.

書式設定要求
我々の骨格でaddFormatting 上記の関数を空に設定しますrequests 配列.基本的な書式設定を追加するには、単に更新する各スタイルのプロパティを定義するオブジェクトを追加する必要があります.たとえば、次のコードには2つのリクエストオブジェクトが含まれています.ヘッダー行のテキストを太字にし、最初のカラムテキストを太字にするためのものです.

  var requests = [

    // BOLD TEXT IN HEADER ROW
    { 
      repeatCell: {
        range: {
          sheetId: sheet1Id,
          startRowIndex: 0,
          endRowIndex: 1
        },
        cell: {
          userEnteredFormat: {
            textFormat: {
              bold: true
            }
          }
        },
        fields: "userEnteredFormat.textFormat.bold"
      }
    },

    // BOLD TEXT IN FIRST COLUMN
    { 
      repeatCell: {
        range: {
          sheetId: sheet1Id,
          startColumnIndex: 0,
          endColumnIndex: 1
        },
        cell: {
          userEnteredFormat: {
            textFormat: {
              bold: true
            }
          }
        },
        fields: "userEnteredFormat.textFormat.bold"
      }
    },

    // ADD ADDITIONAL REQUEST OBJECTS HERE
  ];

最初のリクエストを中断して、ヘッダ行を太字にしましょう.まず、定義するrepeatCell プロパティを使用すると、書式設定が適用される範囲を設定できますsheetId , startRowIndex , endRowIndex , startColumnIndex , and endRowIndex . 行と列はゼロでインデックスされます.この例では、列全体を横切って書式設定を適用するために列インデックスを除外できます.
次に、cell で定義された各セルに対して変更を定義するためにrepeatCell プロパティ.最後に、私たちはfields プロパティは、基本的に更新を制限します.このリクエストでテキストスタイルを変更するだけですので、fields: "userEnteredFormat.textFormat.bold" .
あなたは基本的な書式設定についての詳細を学ぶことができますBasic Formatting GoogleシートAPIドキュメントのページ.また、あなたが始めるのを助ける短いビデオがあります.

条件付き書式要求
条件付き書式指定要求の作成は、基本的な書式設定リクエストの作成とよく似ていますが、いくつかの異なるプロパティを使用します.セル内の値に基づいてセルの背景色を変更する2つのリクエストの例を示します.

  var requests = [

    //SET BACKGROUND COLOR TO GREEN IF VALUE <= 999,999
    { 
      addConditionalFormatRule: {
        rule: {
          ranges: [ {
            sheetId: sheet1Id,
            startRowIndex: 1,
            endRowIndex: 221,
            startColumnIndex: 1,
          },
          // add another range object if needed
         ],
          booleanRule: {
            condition: {
              type: 'NUMBER_LESS_THAN_EQ',
              values: [ { userEnteredValue: "999999" } ]
            },
            format: {
              backgroundColor: { green: 1.0 } 
            }
          }
        },
        index: 0
      }
    }, 

    //SET BACKGROUND COLOR TO RED IF VALUE > 1,000,000
    { 
      addConditionalFormatRule: {
        rule: {
          ranges: [ {
            sheetId: sheet1Id,
            startRowIndex: 1,
            endRowIndex: 220,
            startColumnIndex: 1,
          } ],
          booleanRule: {
            condition: {
              type: 'NUMBER_GREATER_THAN_EQ',
              values: [ { userEnteredValue: "1000000" } ]
            },
            format: {
              backgroundColor: { red: 1.0 } 
            }
          }
        },
        index: 1
      }
    }, 

    // ADD MORE CONDITIONAL FORMATTING REQUESTS HERE
  ];

最初の要求を破りましょう.各リクエストはプロパティで始まりますaddConditionalFormatRule , そして、rule これは適用されます.上記の基本的な書式設定の例と同様に、ranges 規則が適用されるために、各範囲を定義するオブジェクトを含む配列の形で.
次に、いずれかを定義することができますbooleanRule (条件が真か偽かに基づいて適用される書式設定)あるいはgradientRule (値に基づいて色合いを変更するなどのグラデーションを横切って適用される書式設定).あなたはルールの2つのタイプについての詳細を学ぶことができますhere .
我々のためにbooleanRule , タイプを設定することで評価される条件を設定する必要があります.NUMBER_LESS_THAN_EQ , とチェックされる値.最初の例ではvalues: [ { userEnteredValue: "999999" } ] , 特定の範囲内で、999999以下の値を持つセルは、書式設定を適用することができます.The format が定義されている:backgroundColor: { green: 1.0 } .
条件付き書式要求の最後の部分はindex , それぞれの条件付き書式指定要求が適用される順序を定義します.再び、インデックスはゼロから始まります.
上記のコードは、セル内の値に基づいて背景色を適用する方法を示した単純な例ですが、カスタム式を使用することができます多くの多くは、あなたのブラウザでGoogleシート内での作業を行うことができますに似ています.詳しくは、チェックアウトDocumentation for Conditional Formatting とCode Samples for Conditional Formatting .