PowerShell Core入門 - 基本コマンドの使い方(244) グラフを書く - グラフをBase64に変換

前回、気象庁のWebサイトから取得した「現在の気温データ」をGoogle ChartsでグラフとしてレンダリングするようにPowerShellスクリプトで実装した。最終的には、このグラフを画像として自動的に保存するようにしたい。その前段階として、今回は、グラフのPNGデータをBase64エンコードされた文字列として表示する方法について説明する。

→連載「PowerShell Core入門 - 基本コマンドの使い方」の過去回はこちらを参照。

【業務効率化に役立つオススメ連載】
【連載】Google Workspaceをビジネスで活用する
【連載】定時で上がろう! Excel関数の底力

現在の気温をグラフにするPowerShellスクリプト

まずは前回のおさらいをしよう。ちょっと長いが、もう一度P前回作成したPowerShellスクリプト「test-7.ps1」を掲載する。

#!/usr/bin/env pwsh

#========================================================================
# 気温データを取得して整理する
#========================================================================
$URL = 'https://www.data.jma.go.jp/obd/stats/data/mdrr/tem_rct/alltable/mxtemsad00.html'
$SrcFile = New-TemporaryFile

curl    --get $URL                  > $SrcFile 2> $null

#========================================================================
# Google Charts用HTMLの用意
#========================================================================
$DataName = '現在の気温'
$GraphTitle = '東京都の現在の気温'

$GoogleChartsHTML1 = @"
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      // Load the Visualization API and the corechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {
        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', '');
        data.addColumn('number', '$DataName');
        data.addRows([
"@

$GoogleChartsHTML2 = @"
        ]);

        // Set chart options
        var options = {'title':'$GraphTitle',
                       'width':500,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>
"@

#========================================================================
# 東京の気象データを抽出
#========================================================================
# 東京都の気象データを抽出
$s = (Get-Content $SrcFile | Select-String '>東京都</td')

# HTMLタグなどの不要なデータを削除
$s = $s -replace '</[^>]+>',' '             `
    -replace '<[^>]+>',''               `
    -replace '（[^）]+）[*]*',''

# 地名と気温を抽出
$GraphData = ""
$Indent = "          "
foreach ($l in $s) {
    $a = $l -split " "
    if ($GraphData) {
        $GraphData = $GraphData + ",['" + $a[2] + "'," + $a[3] + "]"
    }
    else {
        $GraphData = "$Indent['" + $a[2] + "'," + $a[3] + "]"
    }
}

#========================================================================
# Google Charts用のHTMLを出力
#========================================================================
$GoogleChartsHTML1
$GraphData
$GoogleChartsHTML2

#========================================================================
# 作業用の一時ファイルを削除
#========================================================================
Remove-Item $SrcFile

このPowerShellスクリプトを実行すると、その時点で気象庁のWebページに掲載されている東京の各地の気温をグラフとしてレンダリングするための、次のようなHTMLが生成される。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      // Load the Visualization API and the corechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {
        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', '');
        data.addColumn('number', '現在の気温');
        data.addRows([
          ['小河内',17.4],['青梅',21.1],['練馬',21.3],['八王子',20.8],['府中',21.0],['東京',20.9],['江戸川臨海',19.9],['羽田',20.4],['大島',20.2],['大島北ノ山',20.3],['新島',20.0],['神津島',19.0],['三宅島',19.6],['三宅坪田',20.2],['八重見ヶ原',18.9],['八丈島',19.3],['父島',21.1]
        ]);

        // Set chart options
        var options = {'title':'東京都の現在の気温',
                       'width':500,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

生成されたHTMLファイルをMicrosoft Edgeで閲覧すると、次のようになる。

生成されたHTMLをMicrosoft Edgeで閲覧したサンプル

生成するグラフに関しては、HTML中のJavaScriptの部分を書き換えればいろいろとカスタマイズすることができる。まずはこの枠組さえ作ってしまえば、後で求めるグラフへ変更すればよいだけだ。

グラフをbase64エンコードされたPNG画像の文字列として取得

new google.visualization.BarChart()で返ってくるオブジェクトだが、このオブジェクトには「getImageURI()」というメソッドがある。このメソッドを呼び出すと、グラフをPNG画像としてHTMLファイル内に組み込んだ場合の表現が返ってくる。要するに、PNG画像をbase64でエンコードした文字列のようなものが返ってくるメソッドだと考えてもらえれば良い。

chart.getImageURI();

これで文字列を取得して、base64の部分をデコードすれば、PNG画像ファイルとして作成することができることになる。

今回はこのbase64エンコードされた文字列を表示できるようにしてみよう。生成されるHTMLに次のようにレンダリング用のp要素を追加しておく。

<div id="chart_base64"></div>

JavaScriptからこの要素にbase64エンコードされたPNG画像の文字列を表示する処理を次のような感じで実施する。

// チャートイメージをbase64エンコードされたPNG画像データとして出力
google.visualization.events.addListener(chart, 'ready', function () {
  document.getElementById('chart_base64').innerHTML = chart.getImageURI();
});

前回作成したPowerShellスクリプトに、上記3つの処理を仕込めばbase64エンコードされたPNG画像の文字列が得られることになる。