【LookerStudio】複数選択肢の集計について

Question

実現したいこと

Googleフォームのアンケートで複数選択肢のものを個別に集計したいと考えています。

例として、好きな季節と天気のフォームを作成し、次の出力結果になります。

【フォームサンプル】

【スプレットシート出力内容】

フォームの要約でグラフ化はされるのですが、次のようなグラフ化をLookerStudio内でも行いたいと考えています。
【LookerStudio内で表現したいグラフ】

※このグラフを作成した上で、他項目との関連を調べたいと考えています。

発生している問題・分からないこと

LookerStudioでデータを読み込み、グラフ化しようとすると

このように、複数選択されたもの全てが項目担ってしまいます。
（複数選択肢の組み合わせ分の項目が発生する可能性があります）

該当のソースコード

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

フィールド、グループ、パラメータの追加してLooker内の関数を使用すればできるのではないかと思い調べましたが、情報を見つけることはできませんでした。

【調べた内容】

• 公式ヘルプ
• Google検索「LookerStudio 複数選択肢」など
• YouTubeの解説動画　一例　https://youtu.be/PttWWmW6DCE?si=kp4q8GD9vRkBVnhv

補足

特になし

Answer 1

このように、複数選択されたもの全てが項目担ってしまいます。
フィールド、グループ、パラメータの追加してLooker内の関数を使用すればできるのではないかと思い調べましたが、情報を見つけることはできませんでした。

LookerStudio には、質問に記載されているフォームの回答のような「変な形のデータ」をそのまま取り込む機能など、当然存在しません。
したがって、スクリプトで LookerStudio が解釈できる形のデータに変換してやる必要があります。

たとえば、「フォームの回答 1」というデータに下記の形でフォームの回答が集約されているとします。



これを、質問にあるようなグラフに表示するには、スプレッドシート側のGASを使って、下記のような形に変換すればよいです。



（なお、以降は、スプレッドシートに「グラフデータ」という名前のシートをあらかじめ作成しており、LookerStudioのレポートのデータソースにこのシートを設定済みであるという前提で進めます。
フォームの回答集約用に自動作成されたシート（「フォームの回答 1」に、LookerStudioに表示するグラフ用に変換したデータを上書きすることはできません。
仮にできたとしても、フォームの回答が追加されるとデータ形式がめちゃくちゃになります。なので別シートにする必要があります）

フォームの回答データ（グリッド形式の質問の回答）を変換するスクリプト

（フォームの回答が集約されているスプレッドシートからGASエディタを開き、下記を書いて保存して実行）
（フォームの追加回答がある度に実行する必要があります。トリガーによる自動実行については、対象外なので触れません）
（注意：このコードは、フォームの回答データが「フォームの回答 1」という名前のシートに集約されており、かつ、グラフ化したいデータがK列からQ列の間にあると仮定しています。
質問文ではこれらの情報が故意に省略されているため、勝手にこちらで設定しました。
ですので、下記をそのままコピペしても動かないと思います。
御自分の環境に合わせてスクリプトの3行目、6行目、9行目、29行目その他必要な部分を修正して下さい）

function setSaygoChartData() {
  // フォームの回答を集約しているシートの名前
  const strFormResponsesSheetName = 'フォームの回答 1';
  
  // LookerStudio のグラフのデータソースにするシートの名前
  const strChartDataSourceSheetName = 'グラフデータ';

  // 質問文
  const strQuestionText = "③好きな季節と天気"

  // 質問文から選択肢を取り出すための正規表現
  const pattern = strQuestionText + ".+\\[(\\S+)\\]"
  const regexp = new RegExp(pattern)

  /*
  * 質問項目と、それに対応する回答を格納するためのオブジェクト。
  *  キー：質問項目（例：「晴れ」「雨」「曇り」・・・）
  *  値　：区切り文字で分割した回答の配列（例：['春', '夏', '秋', '冬', '春', '夏', '秋', '冬', '夏', 春・・・]」
  */
  const objResponses = {}

  const lastRow = SpreadsheetApp.getActive().getSheetByName(strFormResponsesSheetName).getLastRow();
  if (lastRow < 2) {
    console.log(`エラー：シート${strFormResponsesSheetName}に回答データがありません。終了します。`);
    return;
  }
  // フォームの回答データを取得し、objResponcesに格納する。
  const responseRows = SpreadsheetApp.getActive().getSheetByName(strFormResponsesSheetName)
    .getRange(1,11,lastRow, 7).getValues(); 
  //↑の getRangeの(1,11,lastRow, 7)というのはK列からQ列の間にデータがある場合を想定している。
  // フォームの回答のデータに合わせて「11」と「7」という数字を変更すること。

  for (let i = 0; i< responseRows.length; i ++) { // 行
    for (let j = 0; j<responseRows[0].length; j++) { // 列
      let key =  '';
      if (responseRows[0][j] == null || responseRows[0][j] === '') continue;
      let aryMatchedGroups = regexp.exec(responseRows[0][j]);
      if (aryMatchedGroups == null) {
        key = responseRows[0][j];
      } else {
        key = aryMatchedGroups[1];
      };
      if (i === 0) {
        // ヘッダ項目を取得し、objResponsesのキーに設定する。
        objResponses[key] = [];
      } else {
        // ヘッダ項目に対応する回答データを取得。複数の回答は区切り文字で区切って格納する。
        const cellValue = responseRows[i][j];
        if (cellValue == '') continue;
        objResponses[key] = [...objResponses[key], ...cellValue.split(', ')];
      }
    }
  }

  /*
   この時点で、objResponses は
   {
    "晴れ": ["春", "夏", "秋", "冬", "春", "夏", "秋", "冬"],
    "曇り": ["夏", "春", "夏", "秋", "冬"],
    "雨": ["夏", "春", "夏", "秋", "冬"],
    "にわか雨": ["春,", "春", "夏", "秋", "冬"],
    "豪雨": ["春", "夏", "秋", "冬"],
    "雪": ["冬", "春", "夏", "秋", "冬"],
    "霧雨": ["冬", "春", "夏", "秋", "冬"]
   }
   のような形になる。
   */

  // objResponse の内容をグラフ表示用のシートに反映する。
  const shtChartData =  SpreadsheetApp.getActive().getSheetByName(strChartDataSourceSheetName);
  if (shtChartData == null) {
    console.log(`エラー：${strChartDataSourceSheetName}という名前のシートが存在しません。終了します。`);
    return;
  }
  shtChartData.getRange("A:B").clearContent();
  
  // スプレッドシートに書き込むため二次元配列に変換する。
  let aryResponses = [];
  for (let key of Object.keys(objResponses)) {
    aryResponses = [...aryResponses, ...objResponses[key].map(response=>[key,response])];
  }
  // ヘッダを追加
  aryResponses.unshift(['好きな季節', '天気']);

  // グラフデータ用シートにデータを書き込む。
  shtChartData.getRange(1,1,aryResponses.length, aryResponses[0].length)
    .setValues(aryResponses);
}

なお、フォームの追加回答があってもスクリプトを実行しない限り、データは最新にはなりません。（トリガーによる自動実行についてはここでは質問対象外なので触れません）

「グラフの表示方法がわからない」と言われそうな気がしたので追記

上記スクリプトによりフォームの回答データを変換して「グラフデータ」シートに書き込み、LookerStudioでグラフデータを接続したときの初期状態は「好きな季節」と「Record Count」の2列だけになっています。ここで、右の「データ」ペインから「天気」を、レポートデータの「好きな季節」の右にドラッグ＆ドロップして、ドリルダウンした状態にします。（下図）

次に「グラフの追加」ボタンから「縦棒グラフ」を選択します。これで質問にあるのと同じようなグラフがLookerStudioに追加されます。

　

なお、春、夏、秋、冬の並びがバラバラに見えますが、好きな並べ方にすることはできないようです。（並べ替えでcase whenを使って季節にソート値を割り振っても変わりませんでした）
もし気になるなら、フォームの編集画面で回答の文字列を「01春」「02夏」「03秋」・・・「01晴れ」「02雨」「03曇り」・・・というようにソートできる文字列に変えてください。

フォームの回答データが追加された場合は、任意のタイミングでスプレッドシート側のスクリプトを実行してグラフデータを更新し、LookerStudioの編集画面で「Ctrl+Shift+E」を押すと、グラフが更新されます。
(編集画面ではなく、表示画面で更新する場合は、右上の３点マークから「データの更新」をクリックする）
（上記の回答は、LookerStudioを今日初めて知り数時間くらいしか触っていないレベルで公式やサイトで調べただけですのでまだ別の解があるかもしれません）

Comments

[8yazaki]

ご回答頂きありがとうございます！
かなり詳細に記載して頂いて、とてもわかり易く、まだ試せていないのですが理想の内容だと思います！

また明日以降担ってしまいますが試した上で、改めてコメントさせていただきます。
まずはお礼のみ先に失礼いたします。