Mind Webアプリケーション(CGI)を使う2つの方法

# はじめに
MindでWebアプリケーション(動的コンテンツ)を使う方法は複数ありますが、代表的な方法を2つ、ご紹介します。
実行環境は以下で構成したものを使います。

https://qiita.com/Mind-Club_2017/items/0fdad646aff08a87618d

# 方法
* SSIを使う
* HTMLをインクルードする

例として、こちらのページで紹介されている棒グラフを描いてみます。

https://qiita.com/Haruka-Ogawa/items/59facd24f2a8bdb6d369#3-2-%E6%A3%92%E3%82%B0%E3%83%A9%E3%83%95

素直に棒グラフを表示するサンプルHTMLをコピーし、ファイル名bar_chart.htmlでpmindフォルダに保存して下さい。

<details><summary>bar_chart.html</summary>

```html:bar_chart.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
　<title>グラフ</title> 
</head>
<body>
  <h1>棒グラフ</h1>
  <canvas id="myBarChart"></canvas>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
  
  <script>
  var ctx = document.getElementById("myBarChart");
  var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['8月1日', '8月2日', '8月3日', '8月4日', '8月5日', '8月6日', '8月7日'],
      datasets: [
        {
          label: 'A店 来客数',
          data: [62, 65, 93, 85, 51, 66, 47],
          backgroundColor: "rgba(219,39,91,0.5)"
        },{
          label: 'B店 来客数',
          data: [55, 45, 73, 75, 41, 45, 58],
          backgroundColor: "rgba(130,201,169,0.5)"
        },{
          label: 'C店 来客数',
          data: [33, 45, 62, 55, 31, 45, 38],
          backgroundColor: "rgba(255,183,76,0.5)"
        }
      ]
    },
    options: {
      title: {
        display: true,
        text: '支店別 来客数'
      },
      scales: {
        yAxes: [{
          ticks: {
            suggestedMax: 100,
            suggestedMin: 0,
            stepSize: 10,
            callback: function(value, index, values){
              return  value +  '人'
            }
          }
        }]
      },
    }
  });
  </script>
</body>
</html>

```
</details>

棒グラフが表示されたでしょうか。
http://localhost/cgi/bar_chart.html

## SSIを使う
HTML(.shtml)からWebアプリケーションを実行します。
A店来客数のデータに注目して下さい。

        label: 'A店 来客数',
        data: [62, 65, 93, 85, 51, 66, 47],

<details><summary>bar_chart.shtml</summary>

```html:bar_chart.shtml
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
　<title>グラフ</title> 
</head>
<body>
  <h1>棒グラフ</h1>
  <canvas id="myBarChart"></canvas>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
  
  <script>
  var ctx = document.getElementById("myBarChart");
  var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['8月1日', '8月2日', '8月3日', '8月4日', '8月5日', '8月6日', '8月7日'],
      datasets: [
        {
          label: 'A店 来客数',
          <!--#exec cgi="./bar_chart.cgi" -->
          backgroundColor: "rgba(219,39,91,0.5)"
        },{
          label: 'B店 来客数',
          data: [55, 45, 73, 75, 41, 45, 58],
          backgroundColor: "rgba(130,201,169,0.5)"
        },{
          label: 'C店 来客数',
          data: [33, 45, 62, 55, 31, 45, 38],
          backgroundColor: "rgba(255,183,76,0.5)"
        }
      ]
    },
    options: {
      title: {
        display: true,
        text: '支店別 来客数'
      },
      scales: {
        yAxes: [{
          ticks: {
            suggestedMax: 100,
            suggestedMin: 0,
            stepSize: 10,
            callback: function(value, index, values){
              return  value +  '人'
            }
          }
        }]
      },
    }
  });
  </script>
</body>
</html>
```
</details>
bar_chart.shtmlをpmindフォルダに保存して下さい。

        label: 'A店 来客数',
        <!--#exec cgi="./bar_chart.cgi" -->

データを表す行がWebアプリケーションに置き換えられています。
bar_chart.cgiは、データ部分を出力するのみ。コードは以下です。

```mind:bar_chart.src
メインは
	「data: [62, 65, 93, 85, 51, 66, 47],」を、一行表示すること。
```
cgilibにコンパイルします。
```
日本語プログラミング言語 Ｍｉｎｄ Version 8.09 for Windows
          Copyright(C) 1985 Scripts Lab. Inc.
コンパイル中 .. 終了
Coping.. D:\pmind\bin\mindexcgi.exe --> bar_chart.cgi
```
実行します。
さっきと全く同じ棒グラフが表示されたでしょうか。
http://localhost/cgi/bar_chart.shtml

## HTMLをインクルードする
SSIを使う方法では、HTMLからWebアプリケーションを起動しましたが、今度は逆に、WebアプリケーションにHTMLを読み込みます。
しかしながら、Mind WebアプリケーションはHTML headerやbodyを自動出力するので、読み込むべきHTMLはbodyタグで挟まれたテキスト部分だけになります。
また、Webアプリケーションで差し込まれるデータ部分は(here)で表現します。


          label: 'A店 来客数',
          data: [(here), (here), (here), (here), (here), (here), (here)],

<details><summary>bar_chart.txt</summary>

```html:bar_chart.txt
  <h1>棒グラフ</h1>
  <canvas id="myBarChart"></canvas>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
  
  <script>
  var ctx = document.getElementById("myBarChart");
  var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['8月1日', '8月2日', '8月3日', '8月4日', '8月5日', '8月6日', '8月7日'],
      datasets: [
        {
          label: 'A店 来客数',
          data: [(here), (here), (here), (here), (here), (here), (here)],
          backgroundColor: "rgba(219,39,91,0.5)"
        },{
          label: 'B店 来客数',
          data: [55, 45, 73, 75, 41, 45, 58],
          backgroundColor: "rgba(130,201,169,0.5)"
        },{
          label: 'C店 来客数',
          data: [33, 45, 62, 55, 31, 45, 38],
          backgroundColor: "rgba(255,183,76,0.5)"
        }
      ]
    },
    options: {
      title: {
        display: true,
        text: '支店別 来客数'
      },
      scales: {
        yAxes: [{
          ticks: {
            suggestedMax: 100,
            suggestedMin: 0,
            stepSize: 10,
            callback: function(value, index, values){
              return  value +  '人'
            }
          }
        }]
      },
    }
  });
  </script>
```
</details>
bar_chart.txtをpmindフォルダに保存して下さい。Webアプリケーションは、この(here)に相当するデータを出力すれば良いことになります。

```Mind:bar_chart_cgi.src
メインは
	「棒グラフ」で、HTMLヘッダ出力し
	"bar_chart.txt"と
	「|62|65|93|85|51|66|47」で
	このファイルを置換してインクルードすること。
```
物理ファイル名と、(here)を置き換える文字列をパイプライン　' | ' で区切って並べた文字列で、このファイルを置換してインクルードするようにコードを書きます。

cgilibにコンパイルします。
```
日本語プログラミング言語 Ｍｉｎｄ Version 8.09 for Windows
          Copyright(C) 1985 Scripts Lab. Inc.
コンパイル中 .. 終了
Coping.. D:\pmind\bin\mindexcgi.exe --> bar_chart_cgi.cgi
```
実行します。
さっきと全く同じ棒グラフが表示されたでしょうか。
http://localhost/cgi/bar_chart_cgi.cgi

# おわりに
今回はMindでWebアプリケーション(動的コンテンツ)を作る方法を2つ紹介しました。
SSIでは

    <!--#exec cgi="～" -->

を使いましたが

    <!--#exec cmd="～" -->

で、実行ファイル(*.exe)を使う事も出来ます。
この場合、Mindではfileライブラリにコンパイルして生成した実行ファイルと共にランタイムもpmindフォルダに置いて下さい。