クエリビルダー ブログシリーズ: パート 6 - フィールドの選択と選択解除

このブログシリーズでは、新しく改善されたインタラクティブ Google 広告クエリビルダーツールの構築過程についてお伝えしています。シリーズのパート 5では、フィールドが選択可能かどうかを判断する方法について説明しました。パート 6 では、SelectionServiceを使って Google Ads Query Language（GAQL）文字列にフィールドを追加する方法について説明します。

GAQL 文字列の状態

どのフィールドが選択されているかを追跡するには、GAQL 文字列の状態を追跡する必要があります。これは、以下のインターフェース定義で表される selectedFieldsというインスタンス変数で行います。

interface SelectedFields {
  select: string[];
  where: Array<{field: string, context: string}>;
  orderBy: Array<{field: string, context?: string}>;
  limit?: string;
  params?: string;
}

selectフィールドは、フィールド名の配列を保持します。whereフィールドは、オブジェクトの配列を保持します。それぞれのオブジェクトには、field名と context文字列が含まれています。context は、フィールドに適用するフィルタ条件（つまり、演算子とオペランド）です。たとえば、WHERE 句にフィルタ条件 ad_group.id = 1234567890を追加した場合、field は ad_group.id、context は = 1234567890になります。同様に、orderByフィールドも field名と省略可能な context文字列を含む配列を保持します。contextは、ASC または DESC でソート順を示しますが、省略も可能です（デフォルトは ASC）。limitフィールドは LIMITの整数を文字列で表現したもので、省略可能です。最後の paramsフィールドは PARAMETERS句の文字列値を表します。これも省略可能です。現在のところ、この句で利用できる選択肢は 1 つだけなので、配列にする必要はありません、

フィールドの選択

ユーザーのクエリの状態を追跡するデータ構造が完成したので、任意の句のフィールドを選択するメソッドを実装できるようになります。

selectField(field: string, clause: string, context?: string): void {
    ...
}

clauseが SELECT の場合、指定されたフィールドを selectedFieldsの select配列に追加します。ユーザーが SELECT 句にフィールドを追加する場合、context は指定しません。


clauseが WHERE である場合は、context文字列として演算子とオペランドを含むフィルタ条件を提供する必要があるので、3 つのパラメータのすべてが必要です。ユーザーがチェックボックスをクリックして WHERE 句にフィールドを追加すると、ダイアログが開き、まずは演算子を、続いてオペランドを指定します。ユーザーが選択できる演算子のリストは、選択するフィールドの data_typeに応じてあらかじめ指定されています。また、オペランドを入力するためにユーザーに表示するコンポーネントは、選択した演算子に応じて変わります。ユーザーがフィルタ条件を追加すると、演算子とオペランドを結合して 1 つの文字列にすることで context文字列を作成します。





clauseが ORDER BY である場合、contextは省略可能です。ユーザーが ORDER BY 句のフィールドを選択すると、context なしで selectFieldを呼び出し、context がない状態で selectedFieldsの orderBy配列にフィールドを追加します。また、フィールド名の下にラジオボタンを表示し、ASC か DESC でソート順を指定できるようにしています。ユーザーがいずれかの項目をクリックすると、orderBy配列のそれぞれのフィールドのエントリを更新し、contextにソート順を追加します。




clauseが LIMIT か PARAMETERS である場合は、fieldパラメータで指定された文字列を使って selectedFieldsの limitエントリまたは paramsエントリを更新します。limit は正の整数である必要があるので、関連する UI コンポーネントで検証をします。現在利用できるパラメータは include_draftsだけで、このデフォルト値は false です。そのため、PARAMETERS の UI コンポーネントでは、'include_drafts=true' という選択肢が 1 つだけあるチェックボックスをユーザーに表示します。ユーザーがチェックボックスをクリックすると、fieldパラメータとして文字列 include_drafts=trueを selectFieldに渡します。

SELECT での存在

フィールドを選択するロジックは単純ですが、パート 5ではあえて触れなかった選択可否に関するルールが 2 つあります。WHERE 句または ORDER BY 句にフィールドを挿入する場合、そのフィールドは SELECT 句に存在しなければなりません。


このような場合は、ユーザーが 1 回の手順で、指定された句だけでなく SELECT 句にもフィールドを追加できるダイアログを表示します。

フィールドの選択解除

フィールドを選択解除できるように、SelectionServiceに deselectFieldというメソッドを実装します。

deselectField(field: string, clause: string): void {
…
}

フィールドの選択解除は、フィールドの選択と同様です。念のため、最初にそのフィールドが選択されているかどうかをチェックします。続いて、clauseが SELECT、WHERE、ORDER BY のいずれかである場合は、selectedFieldsの対応する配列のエントリから選択解除されたフィールドを削除します。前述のルールにより、WHERE や ORDER BY に追加される前に SELECT に存在していなければならないフィールドが SELECT から削除されると、そのフィールドが SELECT から 1 回の操作で自動的に削除されます。句が LIMIT や PARAMETERS である場合は、selectedFieldsのそれぞれのエントリを undefinedに更新します。

出力の更新

selectedFields変数、selectFieldメソッド、deselectFieldメソッドがそろったので、クエリ文字列の状態を追跡できます。アプリケーション全体で変化を追跡できるように、SelectionServiceで Observableを作成し、selectFieldか deselectFieldが呼び出されるたびに nextを呼び出します。これにより、GAQL クエリの状態を認識したいコンポーネントで Observable をサブスクライブできるようになります。

まとめ

SelectionServiceを更新し、フィールドの選択と選択解除ができるようになりました。今回の投稿では、以下について説明しました。

• GAQL クエリと句の構造
• フィールドの選択可否に関する追加の詳細情報
• Angular での Observableの利用

- Devin Chasanoff（Google Ads API チーム）

Reviewed by Thanet Knack Praneenararat - Ads Developer Relations Team