top of page

Tableau実践問題集 #TableauChallenge を作りました。

検索

Tableau Release Note Viz作りました

2024年2月24日
最終更新: 2024/02/24

各バージョンのリリースノートの情報をまとめたVizについての記事です。

2020年3月から適宜更新・改修しています。

以下のURLからTableau PublicにあるWorkbookを開けます。




Workbookはダウンロード可能なため、実装やデータについては中身を直接ご覧ください。

Tableauダッシュボード開発をされている方向けの言及をすると、以下は中身を見て確認いただくと面白いかもしれません。

  • カテゴリ選択画面の実装

    • 単にフィルタやパラメータを配置するのではなく、データ可視化と選択機能を実装する

    • 選択後に自動で閉じるようにする

  • 言語を切り替えるためのボタンと機能の実装

  • マーク選択後に選択状態が自動で解除される動作の実装

    • カテゴリ選択と言語切り替え箇所は、選択が解除されます

    • リリース機能の選択部分については、メニューでURLアクションを表示する都合、選択解除ではなく全ハイライトでの実装です


またデータについては、英語と日本語の各リリースノートページの内容を以下のGoogle Apps Scriptで取得し、整形してGoogle Sheetに出力しています。

/*referrence: 
https://www.teradas.net/archives/33309/
http://www.initialsite.com/w01/14311
https://moripro.net/gas-array-push-apply-concat/
https://google-apps-script.takami-site.work/29
Tableau Release Page: https://www.tableau.com/products/all-features
*/

function getTableauRelease() {
  // Set the target release note URL
    var release_url = 'https://www.tableau.com/products/new-features';
    //var release_url = 'https://www.tableau.com/2019-1-features';
    
  // Get the base HTML content from the release note URL
    var html = UrlFetchApp.fetch(release_url).getContentText("UTF-8");

  // Set up Regular Expressions and extract relevant strings
    var id_regex = new RegExp(/item-\d+/g);
    var title_regex = new RegExp(/<h3 class="heading--h5 teaser-item__title">(.*?)<\/h3>/g);
    var subtitle_regex = new RegExp(/<div class="field field--name-field-teaser-text field--node field--label-hidden"><p>(.*?)<\/p>/g);
    //var detail_regex = new RegExp(/<div class="feature-highlight__copy">([\s\S]*?)<\/div>/g);
    var detail_regex = new RegExp(/<articleclass="content full-width">([\s\S]*?)<\/article>/g);

  // Store Item IDs in an array
    var id_tmp = html.match(id_regex);

  // Store HTML elements corresponding to Item IDs in an array
    var htmlArray = [];
    for (var i = 0; i < id_tmp.length; i++) {
      var patternHead = '<div id="' + id_tmp[i] + '" class="accordion-grid__item">';
      var patternTail = ''
      if (i === id_tmp.length - 1) {
        patternTail = '</article>'; // Match pattern for end of HTML
      } else {
        patternTail = '<div id="' + id_tmp[i+1] + '" class="accordion-grid__item">';
      }
      var pattern = new RegExp(patternHead + '([\\s\\S]*?)<\/div>\\s*' + patternTail)

      var matches = html.match(pattern)[0]
                      .replace(/[\n\r\t]/g, '').replace(/\s{2,}/g, '')
      htmlArray.push(matches);
    }

  // Extract necessary information from each element of htmlArray and store in an array
    var data = [];
    for (var i = 0; i < htmlArray.length; i++) {
      var id = id_tmp[i];
      var html = htmlArray[i];

      var url = release_url + '#' + id;
      var titleMatch = html.match(title_regex);
      var title = titleMatch ? titleMatch[0] : '';
      var subtitleMatch = html.match(subtitle_regex);
      var subtitle = subtitleMatch ? subtitleMatch[0] : '';
      var detailMatch = html.match(detail_regex);
      var detail = detailMatch ? detailMatch[0].trim() : '';
    
      // Refine strings
      title = title
        .replace('<h3 class="heading--h5 teaser-item__title">','')
        .replace('</h3>','');

      subtitle = subtitle
        .replace('<div class="field field--name-field-teaser-text field--node field--label-hidden"><p>','')
        .replace('</p>','');

      detail = detail
        .replace(/<h3 class="heading-highlight">[\s\S]*?<\/h3>/, '')
        .replace(/\n{2,}/g, '\n')
        .replace(/^\s+/gm, '')
        .replace(/<[^>]*>/g, '')
        .replace("&nbsp;", '')
        .replace("&amp;", '')
        .trim();

      // Add data to the array
      data.push([i, title, subtitle, detail, id, url]);
      
    }

    // Push the result to the target sheet 
    var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Tableau Release Note");
    //sheet.clear()
    var lastcolumn = data[1].length;
    var lastrow = data.length;
    sheet.getRange(sheet.getLastRow()+1,2,lastrow,lastcolumn).setValues(data);

}

どのバージョンで何の機能が使えるか、特定の機能がどのように強化されたか等の確認や調査にご利用ください。

質問などありましたらTwitterかLinkedinでお願いします。



bottom of page