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

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

JavaScriptとは
JavaScript とは、1994年にNetscape Communications 社が開発した、オブジェクト指向のスクリプト言語である。他の言語と比べてクライアント側(手元のコンピュータ上)で動作するという大きな特徴がある。また、ブラウザだけがあればプログラムの開発と実行ができて、特別なソフトウェアを準備する必要が無い点は大きな利点である。 プログラム言語の特徴については、プログラミング言語についてにまとめた。
言語名おもな特徴
COS「UNIX」の開発にも用いられている代表的な構造化言語。アプリケーションソフトウェアから組み込みシステムまで、多様な分野で汎用的に利用されている。
C++C言語にオブジェクト指向の概念を取り入れた拡張版と言える。現在のプログラム開発環境では多用されている。「シープラプラ」と呼ぶ。
Javaインターネット関連技術や分散システム環境で広く利用されている、オブジェクト指向言語。C++をモデルとして作られているが、特にインターネット環境での適合性が高い。
Rubyスクリプト言語と言われる型の言語である。日本発(まつもとひろゆきさんが開発)の言語で、様々な場面で利用されるようになってきている。
Pythonインデント(字下げ)でブロック構造が分かるようになっていたり、綺麗なプログラムが簡単に書けると言われている。AI(人工知能)のプログラムで利用されることが多い。
JavaScriptインターネットのWeb系で最も使われているブラウザを操作するためのプログラミング言語。ウェブブラウザだけがあれば動作するため、簡単に作成して利用する事ができる。JAVAとは直接の関係は無い。
Scratch代表的なブロック言語。MIT(マサチューセッツ工科大学)で開発された。コンピュータの画面上で、ブロックを組み合わせることによってプログラムが作成できる。
COBOL主に事務処理を目的として開発された歴史の古い言語。銀行の汎用コンピュータなどで利用されている。
FORTRAN科学技術に関する計算処理に適するとされる歴史の古い言語。COBOLと並び、世界初のプログラム言語とされている。
BASIC比較的初心者向けのパソコン用プログラム言語。最初期に開発された言語であるが、現在でもエクセルの内部に「Visual Basic」として利用されている。
JavaScriptが、スクリプト(インタープリタ型)の言語で、オブジェクト指向を持っていて、更にウェブページ(ホームページ)記述を行うHTMLと不可分の関係にある言語である。なお今回の授業で扱うJavaScriptは、手元のコンピュータ(上のブラウザ内)で作動させるクライアントサイドとして利用する。
ブラウザの設定
JavaScriptは、ブラウザ上で実行するプログラム言語である。
実際にJavaScriptのコードを開発するには、ブラウザに付属の「開発ツール」を利用する。開発ツールを使えば、JavaScriptの「コンソール」を利用する事ができて、エラーのチェックなどが出来る。具体的には、次のように呼び出す。
プログラムの作成

環境整備
以下の説明では、このzipデータの中のファイルを利用する。Rice00.zip(できれば、このzipファイルを右クリックでデスクトップに保存し、展開(解凍)しておくこと。)
Calc00.htmlの編集にはエディターを用いる。OSに標準で備わっているエディターとしては、Windowsの場合はメモ帳、Macの場合はテキストエディットであるが、できればプログラミングに適したエディターを利用したい。これによって、プログラム時の括弧() {}の対応や、一致する変数名の表示など、利点が多い。
よく利用されているエディターとしてVScodeを利用したい。
VScodeのインストール後は、日本語メニューを利用し、JavaScriptのパッケージを利用する。手順は、次の通りである。
  1. VScodeのダウンロード(ダウンロード終了後にZIPファイルの解凍が自動的に行われるが、少し時間がかかる(1〜5分程度?)ので、気長に待つこと。)
  2. 解凍が終了したら、Visual Studio Codeのプログラムを開く。
  3. 「Extend(ブロックの崩れているようなアイコン)」で、Japaneseを検索。Japanese Language Pack for Visual Studioをインストール。
  4. 「ようこそ」の画面を表示させ、「カスタマイズ」の「ツールと言語」でJavaScriptをインストールする。
    「ようこそ」の画面が表示されないときは、メニューバーの「ヘルプ」から「ようこそ」を選択する。
  5. 「エクスプローラー(左上の紙が重なっているアイコン)」で、デスクトップに保存したCalc00.htmlを指定する。
    お勧めは、デスクトップ上に解凍(展開)したRice00というフォルダを作成しておき、そのフォルダをVSCodeで指定することである。
詳しいVScodeのインストールと使い方は、ここなどを参照すること。
HTMLとJavaScript
今回JavaScriptをプログラム環境として用いるが、その際にHTMLの知識は必須となる。
JSsample01.html(同じhtmlファイルはRice00の中にある。)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScript sample 001</title> </head> <body> <script>  // ここにJavascriptのコードを記述する // window.alert("sample01: Hello World"); </script> </body> </html>
  HTMLファイルである事の宣言
  日本語
  ヘッダー宣言
  日本語文字コード(utf-8を使う)
  タイトル
  ヘッダー終了タグ
  本体(bodyタグ)
  JavaScriptのスクリプト開始宣言
  コメント行(//で始めている)
  ここから、プログラムの本体
  画面に警告ウインドウで文字を表示すさせる。
  スクリプト終了タグ
  本体終了タグ
  HTML終了タグ
  
このサンプルでは、JavaScriptのwindow.alert関数を使って、画面上にお約束の文字列(Hello World)を表示した。
このように、<script> .... </script>で挟まれた部分に、JavaScriptのプログラムを記述することが出来る。
HTMLの基礎
HTML入門(旧版)についてはこの記述を参考にする。現在ではHTML5になっていて、この記述の一部の説明には誤りが含まれているが、タグという考え方、HTMLで文書の構造を表現するという考え方は共通しているので、一応、この情報を参考にしてもらいたい。
では、次に計算を行うプログラムを書いてみる。一日の秒数を計算してみる。
JSsample02.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScript sample 001</title> </head> <body> <script> window.alert('Sample02: 一日の秒数は' + 60*60*24 + 'です。'); </script> </body> </html>
    HTMLファイルである事の宣言
    日本語
    ヘッダー宣言
    日本語文字コード(utf-8を使う)
    タイトル
    ヘッダー終了タグ
    本体(bodyタグ)
    JavaScriptのスクリプト開始宣言
    ここから、プログラムの本体
    文字は’ ’で囲う。数値は計算式。文字と数値は + で連結できる。  
    スクリプト終了タグ
    本体終了タグ
    HTML終了タグ
    

今度は、変数を用いたプログラムサンプルである。なお、スクリプト部分のみを表示する。
ここでは、sec,min,hourという変数に数値を代入しておき、その乗算の結果を表示している。
JSsample03.html
<script> let sec = 60; let min = 60; let hour = 24; window.alert('Sample03: 一日の秒数は' + sec*min*hour + 'です。'); </script>
      変数sec, min, hourを定義し、その積として表示している。
      let は、変数の定義
      (varでも定義可能であるが、変数の有効範囲が異なる)
      

次のSample04では、関数を用いた。関数は、決まった手順を一括して呼び出すためのプログラムのブロックである。この関数は、呼び出す前に定義しておくことが推奨される。関数を呼び出すときに関数に渡す値(ここでは、sec,min,hour)を、引数(ひきすう)と呼ぶ。ここでは、関数から帰って来る値は一つだけである(数学関数のsin(), cos()などと同様)。その返り値は、関数の中でreturn文で与えられる。
引数として、データの受け渡しをする事も可能であるが、呼び出し元と関数の中で同じ名前の変数名を使う場合には、どちらの変数が有効になっているかの注意が必要である。(これを変数のスコープと呼ぶ)
JSsample04.html
<script> function secOfTheDay(sec, min, hour){ let result; result = sec*min*hour; return result; } let sec = 60; min = 60; hour = 24; let kekka; kekka = secOfTheDay(sec, min, hour); window.alert('Samle04: 一日の秒数は' + kekka + 'です。'); </script>
        秒数を計算する関数を定義している。
        resultという変数に計算結果を代入する。

        return文で、計算結果を呼び出し元に返す。

        kekkaという変数に、関数を呼び出した結果(関数の中ではresult)を格納する。
        kekkaを出力する。
        

Sample05では、HTML上にボタンを配置した。ボタンを押すという「イベント」が発生した時に、実行されるようにした。
このプログラムに、本日の講義で作成するプログラムの要素がほとんど含まれている。
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が、ブラウザの画面そのものなので、
        そこに文字列を代入すると、ブラウザに文字が表示されていく。
        

積算温度とは
今回は、水稲の生育ステージを予測するプログラムを作成する。基本とする考え方は、<積算温度>モデルである。
積算温度(積算気温)とは、一定期間の気温(平均気温)の合計値のことである。例えば3日間の平均気温がそれぞれ15℃、20℃、18℃であった場合、15+20+18=53℃ となる。
植物の積算温度モデルとは、この積算温度の値が一定値を上回った場合に、生育ステージの変化が起こるという考え方である。言い換えれば、一定の温度以上の日が数日(〜数十日)継続すると、生育ステージが次の段階に進むという考え方である。この考え方は、例えば桜の開花予想などにも良く利用されている。イネの栽培の場合、定植(田植え)後の積算温度によって、出穂(しゅっすい)日と、登熟(収穫)日を予測する手法が多く用いられている。
ただ、この積算温度についても、ある一定の温度(例えば15℃)以下では生育に寄与しないという考えから有効積算温度(15℃以上の気温部分についてのみ積算する)という考え方や、35度などといった高すぎる温度では、かえって生育にマイナスの要因になるとして、高温部での温度の寄与が低めになるような3次式を用いた積算温度モデル、などのバリエーションもある。また、成長率を気温による指数関数で表し、DVR(DeVelopment Ratio)を求め、その数値を積算して、DVI(DeVelopment Index)という数値を求めるDVIモデルという方式も広く使われている。
興味のある人は、インターネットなどで調べてみると良い。 DVIとDVR
また、単純積算温度モデルの場合であっても、幼苗期に低温に晒されると生育障害が発生したり、登熟期の低温で「イモチ」病にかかったり、不稔(結実不能)になったりと、さまざまな影響が考えられる。しかし、そういった効果のモデル化は基本モデルが完成してから追加してゆくこととしたい。(次回以降)

今回の課題で取り扱うのは「単純積算温度モデル」とする。
代表的な品種である「コシヒカリ」を考えると、田植えからの積算温度が1700度で出穂し、その後さらに1000度の積算温度が追加されると登熟が完了して、収穫可能となる。
具体的な計算の流れは次のようになる。
プログラムの動作
今回の課題プログラム(Calc00.htmlの説明)PDFファイルは、次のような動作を行う。
- 課題プログラムの説明 :
  1. HTMLとしての設定
  2. 実行ボタン、データ内容表示ボタンの配置
  3. ここからJavaScript(プログラムの開始)
  4. 初期設定(地域・品種データ・定植日の指定)
  5. 気温データを配列にセット
  6. 画面表示関数
  7. 共通情報の表示関数の呼び出し関数
  8. シミュレーション結果の表示関数
  9. 実行ボタンクリック時の動作指定(関数定義)
    積算温度の計算・出穂日、登熟日の決定
  10. 表示ボタンクリック時の表示関数
  11. 終了
課題プログラムは、9. 積算温度の計算ー登熟日の決定部分が未完成である。(本年度版では、出穂日の計算部分は組み込んでいる。)
プログラミングが必要な該当部分は、/* 本日の課題作成部分 登熟日:toujukuDate計算 / となっている。
その部分は、未完成のままにしてあるので、このまま実行すると、登熟日はnullのままとなってしまう。
この部分を、各自、自分でプログラミングし、実行できることを確認して、提出することが課題である。 すでに出穂日の計算は終了しているので、その部分を参考にして実装(プログラミングして機能を実現すること)してほしい。
プログラムで用いられている主要な変数名とその意味は、以下の通りである。

Variables in Calc00.html
変数名変数型説 明備 考
VarietyStirng品種名constで指定
TaueDateInteger田植え日(日付連番)constで指定
TargetEarTempSumFloat出穂に必要な積算温度constで指定
TargetToujukuTempSumFloat登熟に必要な出穂後の積算温度constで指定
Meteo[today]Float.Arraytoday日目(日付連番)の平均気温
366日型で提供
プログラム中に記載
shussuiDateInteger出穂日(日付連番) 計算して推定する
toujukuDateInteger登熟日(日付連番) 計算して推定する
currentEarTempSumFloat出穂積算気温の作業用
TargetEarTempSumと比較
計算中に利用
currentToujukuTempSumFloat登熟積算気温の作業用
TargetToujukuTempSumと比較
計算中に利用

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

<課題ファイルへのリンク:適当な場所(デスクトップなど)にフォルダ(Rice00など)を作成して保存する>
課題プログラム(ソースコード) Calc00.html
今回のCalc00.htmlをダブルクリックすると、自動的にデフォルトのブラウザが開き、実行出来る。


今回の課題
今回の課題は、 を、ITC-LMSの課題として、提出することである。健闘を祈る。

JavaScriptの超基礎(文法)
超簡略JavaScript文法(pdf)


参考リンク: