(農業)情報工学・課題 (2020/10/29)

水稲の生育ステージ予測プログラムの作成(1)JSVersion

水稲生育診断の感度解析

JavaScriptの復習
前回の授業だけではJavaScriptについての説明が不足していたので、今回はJavaScriptの文法について、少し学びながら追加の学習を行う。
前回の授業で説明した、Sample05.htmlを再度掲載した。
このSample05.htmlでは、
  1. 画面上に直接結果を表示する
  2. 「実行」ボタンを押して実行する
という、二つの要素が含まれている。
このうち、1.画面上への結果表示は、HTML文書に確保した id="hyouji" という<div>要素を用いている。この要素は、JavaScript中ではdocumentオブジェクトとして振る舞い、innerHTMLプロパティを追加していくことで書き込んでいる。
また、2.「実行」ボタンは、HTML文書にinput要素として表示し、onClickというイベントが発生した時に、JavaScript内で定義したonButtonClick()という関数を呼び出す形式になっている。
JSsample05.html(右クリックで保存することも出来る。)
<body> <div id="hyouji">結果の表示<br></div> <!-- ブラウザ画面への表示 --> <input id="Button1" type="button" value="実行" onclick="onButtonClick();" /> <script> function secOfTheDay(sec, min, hour){ let result; result = sec*min*hour; return result; } function onButtonClick(){ let sec = 60; min = 60; hour = 24; let kekka; kekka = secOfTheDay(sec, min, hour); const TargetElement = document.getElementById('hyouji'); TargetElement.innerHTML += 'Samle05: 一日の秒数は' + kekka + 'です。<br>'; } </script> </body>
        ここでは、HTMLのボディ部分に、表示のための部品(hyouji)を配置する。
        実行ボタン(Button1)を配置する。ボタンクリック時に呼び出される関数(onButtonClick)を記述する。

        ここからスクリプト本体

        秒数を計算する関数を定義している。(JSsample04と同じ)
        resultという変数に計算結果を代入する。
        return文で、計算結果を呼び出し元に返す。

        ボタンがクリックされたときに、この関数(onButtonClick())が呼び出される。
        secOfTheDay()関数で、一日の秒数を計算して、kekkaに格納する。(JSsample04と同じ)
        kekkaを出力するが、ここでは、ブラウザに文字列として出力する。
        <オブジェクト>documentに、getElementById<メソッド>で、TagetElementオブジェクトを生成する。
        そのTargetElement<オブジェクト>の<プロパティ>innerHTMLが、ブラウザの画面そのものなので、
        そこに文字列を代入すると、ブラウザに文字が表示されていく。
        

Calc01.htmlの作成
今回のプログラム(Calc01.html)が、前回のプログラムと異なっている点は「気温データ」の取り扱いである。今回は、気温データファイルを外部ファイルとして読み込んで利用する形式とした。(例えばTemp25.txtを利用する。)
これによって、各種の異なる気温データ(気象データ)を読み込んで、プログラムの挙動を調べることができるからである。
ただプログラムで外部のデータ(ファイル)を取り扱うのは少し手続きが必要である。今回は、同じディレクトリ上に存在するデータを読み込んで利用するので、比較的容易に利用可能であるが、他のサイトのデータを直接読み込むような場合には、特にセキュリティ関係に配慮する必要がある。
今回のプログラムの具体的なジョブフローは次のようになる。
プログラムの動作
今回の課題プログラム(Calc01.htmlの説明)PDFファイルは、次のような動作を行う。
- 課題プログラムの説明 :
  1. HTMLとしての設定
  2. 画面表示の<div>要素、ファイル指定ボタン、実行ボタン、ファイル内容表示ボタンの配置
  3. JavaScriptの開始
  4. 初期設定(地域・品種データ・移植日の指定)
  5. 画面表示関数(関数定義)
  6. 共通情報の表示(関数定義)
  7. 計算結果の表示(関数定義)
  8. ファイル読込関数の定義(関数定義)
    この中でシミュレーションの実行
    積算温度の計算・出穂日、登熟日の決定
    シミュレーション結果の出力
  9. 実行ボタンクリック時の動作
    この中で、ファイル読み込みを行ってシミュレーションの実行を行う。
  10. 表示ボタンクリック時の動作
    ファイル内容の表示
  11. 終了
課題プログラムは、8. 積算温度の計算ー出穂日・登熟日の決定部分が未完成である。
該当部分は、// 本日の課題作成部分(出穂日と登熟日の計算)。 となっている。
つまり、本プログラムの計算部分が、未完成のままにしてあるので、このまま実行すると、出穂日・登熟日はUndefinedのままとなってしまう。
この重要な部分を、各自、自分でプログラミングし、実行して提出することが課題である。 参考部分に出穂日の計算プログラムの一例を掲載しているので、参考にして実装(プログラミングして機能を実現すること)してほしい。
プログラムで用いられている主要な変数名とその意味は、以下の通りである。

Variables in Calc01.html
変数名変数型説 明備 考
VarietyStirng品種名constで指定
TaueDateInteger田植え日(日付連番)constで指定
TargetEarTempSumFloat出穂に必要な積算温度constで指定
TargetToujukuTempSumFloat登熟に必要な出穂後の積算温度constで指定
meteo[today]Float.Arraytoday日目(日付連番)の平均気温
366日型で提供
気温ファイルから読込
Temp25.txt
shussuiDateInteger出穂日(日付連番) 計算して推定する
toujukuDateInteger登熟日(日付連番) 計算して推定する
currentEarTempSumFloat積算気温1の作業用
targetEarTempSumと比較
計算中に利用
currentToujukuTempSumFloat積算気温2の作業用
targetToujukuTempSumと比較
計算中に利用

気温ファイルは、次のような構造をしている。(366日型:2月29日のデータもある)
Temp25.txt(気象データ例:滋賀県)
行番号読込時数値説明
1meteo[0]4.51月1日の平均気温(以下、計算で利用)
2meteo[1]4.41月2日の平均気温
----------
365meteo[365]4.412月31日の平均気温
ここで25は滋賀県の県番号で、このデータは滋賀県の平均気温データ(平年値)である。

課題ファイルへのリンク
適当な場所(デスクトップなど)で以下のzipファイルを保存して、解凍して利用する。
Rice01.zip:プログラム(Calc01.html)と気温データ集(Temp##.txt)をまとめたもの
ーー内容ーー
・課題プログラム(ソースコード)Calc01.html
 (ここで、Calc01.htmlをクリックすると、ブラウザの別タブが開き実行出来る。ファイル自体はzipファイルに入っている)
・気温データ(今回は以下のデータを準備した。)
準備した気温データ
ファイル名地名移植日日付連番
TaueDate
Temp01.txt北海道(札幌)5月24日145
Temp08.txt茨城県(水戸)5月6日127
Temp15.txt新潟県(十日町)5月9日130
Temp25.txt滋賀県(彦根)5月15日136
Temp40.txt福岡県(福岡)6月16日168

実行結果の表示方法
実行結果は、ブラウザ上に書き出されている。従って、ブラウザに表示されているテキストを「選択」して、エディターなどで「貼り付け」て、保存すれば良い(コピペ)。ワードで作成する事も可能である。
プログラム中には、自分の思い通りに動作したことを示すメッセージがある事が好ましい。現在のモデルでは、outFrame.innerHTMLに文字列を追加することによって、プログラムの動作確認を行なっている。
なお、このinnerHTMLに書き込まずに、console.logとして表示する方法もある。
今回の課題
今回の課題は、次の内容である。
  1. まず、Calc01.htmlに、前回の出穂日と登熟日の計算部分を組み込んで、出穂日と登熟日が計算できるようにする。
  2. 気温データとして、少なくとも二つを用いて、出穂日と登熟日を計算する。
    その際に、用いた地域の移植日(TaueDate)を用いること。
提出するにあたっては、Calc01.htmlを提出する必要は無い。
上記の2.で計算した結果を、ブラウザからコピペして、VSCodeのテキストデータとして保存し、テキストデータとして提出すると良い。なお、結果をワードに貼り付けて、ワードファイルとして提出しても良い。
ITC-LMSの課題として、提出することである。

JavaScriptでの文字列(追加説明)
JavaScriptの文字列は、文字列リテラルと呼ばれる、ダブルクオート"、シングルクオート'、バッククオート`、で囲って利用する。バッククオートはテンプレートリテラルという構文が使える。
moji = "ABC";
moji = 'ABC';
moji = `ABC`;
どの文字列リテラルでも共通であるが文字列リテラルは同じ記号が対になる。対になっていない文字列リテラルを、文字列の中に入れることが出来る。
moji = "I'm OK!";
moji = 'This is "ABC."';
また、文字列の中にリテラルと同じ記号が出現した場合は、\(バックスラッシュ)を使いエスケープする必要がある。
moji = 'I\'m OK!';
文字列の連結は、+で行う。
moji = 'this is ' + 'a pen.';
文字列に変数の値を直接連結することも出来る。
date = 109;
moji = 'Today = ' + date;
バッククオートで囲った場合には、${ }演算子を用いて、変数を直接書き込むことが出来る。
moji = `Today = ${date}`
各種プログラムのテスト実行環境
HTML入門(一部改訂版)CSSの部分を追加している。【10/28に修正版と置き換え】