(農業)情報工学(2019/11/14)

水稲の生育予測プログラムの作成(4)

ウェブ・アプリケーション

今回の講義で、いよいよ、水稲生育予測モデルの完成である。
前回までのプログラムは、JavaScriptの実行可能ファイルとして、手元のコンピュータの上でのみ動作していた。 今回はこれをウェブ上に掲載する。つまり、ウェブ環境さえあれば、世界中どこからでも実行可能になるのでである。
【注意】現在のプログラムは、ファイル読込イベントの処理に問題がある。一度のセッションで一度だけしか読み込んでくれない。そのため、一度気温ファイルを指定した後は、別の気温ファイルを指定しても、前回の気温データ利用してしまう。従って、別の気温データを利用したいときは、一度、HTMLファイルを再読み込みしてから利用する方法を取って対応して欲しい。(2019/11/13現在)
プログラムの動作
今回の課題プログラム(Calc04.html)は、次のような構成になっている。
Calc04.htmlのPDF版
  1. HTML部分:入力フィールドなどの配置
    * 【自分のモデルで必要なフィールドがあれば追加】 *
  2. HTML部分:感度解析などの入力部分
  3. HTML部分:気象ファイルの指定と実行ボタンの配置
  4. JavaScript部分:変数の宣言、初期設定
    * 【自分のモデルで必要な変数があれば、宣言する】 *
  5. JavaScript部分:作業用の変数などを定義
  6. JS部分-onSimulationButtonClick:ボタン1(実行ボタン)クリック時に呼び出される関数
  7. JS部分-onShowButtonClick:ボタン2(データの表示)クリック時に気象データファイルを表示する関数
  8. JS部分-onSimulationFileLoad:(実行ボタンクリック後の)ファイル読込時に実行される関数
  9. JS部分-setParameterForLoop:感度解析のパラメータを設定する関数
  10. JS部分-riceSimulation:生育シミュレーション関数(riceSimulation())
    * 【自分のモデルがあればここに組み込む(田植えから出穂まで)】 *
    * 【自分のモデルがあればここに組み込む(出穂から収穫まで)】 *
  11. JS部分-simulationInitialization:シミュレーション変数の初期化
  12. JS部分-addSimulationBaseInfo:シミュレーション共通情報の表示
  13. JS部分-addSimulationModelInfo:シミュレーションモデル情報の表示
    * 【自分のモデルがあればここで表示する。】 *
  14. JS部分-addSimulationParameterInfo:パラメータ感度情報の表示
  15. JS部分-addCalcResultHtml0:シミュレーション結果の表示ーparameterOutputの値によって表示内容が異なる
  16. JS部分-getParameters:入力フィールドからのパタメータ値の読み取り
  17. JS部分-addHtml:ブラウザ画面への表示(常に表示)
  18. JS部分-addHtml0:ブラウザ画面への表示(parameterOutputの値が0の時だけ表示する)

今回の課題プログラムは、とりあえず動作するように作ってある。しかし、このままでは諸君が従来までに取り組んできたイネのモデルを、十分に反映させているとは言えない。また、ウェブのアプリケーションとは言っても、手元のPCで実行できるだけである。そこで、今回は次の内容を実行してもらう。
サーバへの公開と提出
東大でのwebサイトの開設については、次のリンクが役立つ ECCSでのウェブサイトの作り方(はいぱあワークブックより)
これまでに説明したように、自分用にウェブサーバの場所を確保してもらった。
その場所に、今回作成したhtmlファイルをアップロードしてもらいたい。
アップロードが完了すれば、
https://user.ecc.u-tokyo.ac.jp/users/user-xxxxxx/Calc04.html
として、アクセス可能になる。
注:2019/10/03現在、ユーザーの公開したウェブページはセキュアhttp(https://)なので、http://で無い事に注意すること。

追加:公開用ウェブサーバーへのアプロード方法としては、ファイルを個別に指定する方法が説明されているが、 フリーソフトの「FileZilla」を用いると、より快適にファイルのアップロードが可能になる。
FileZillaのサイト:https://filezilla-project.org/
簡単なFileZillaの使い方:FileZillaの利用方法
また、フリーソフトの「CyerDuck」を用いても、快適にファイルのアップロードが可能になる。可能なら利用してみてほしい。東大のマックの場合、アプリケーションに入っている。(2018/11/15現在)
CyberDuckを起動したら「新規接続」で接続し、自分のファイルをドラッグして自分のフォルダーに転送出来る。
CyberDuckのサイト:http://cyberduck.ch/
簡単なCyberDuckの使い方:Cyberduckの利用方法
今回のHTMLファイルをアップロードする場所は、次の通りになる。
サーバー user.ecc.u-tokyo.ac.jp
プロトコル sftp(ssh接続のFTP)
ポート番号
(必要な場合)
22
ディレクトリ名 user-xxxxxx (自分の固有番号)
アップロード後にファイルのパーミッションを誰でも読み込み可(644)にしなければならない場合がある。これは、アップロードしたファイルを「右クリック」して、「情報」を見ることによって変更できる。
今回の課題は、 を、ITC-LMSを用いて、課題として提出することである。
健闘を祈る。
参考:HTMLの基礎
HTMLとは?
Hyper Text Mark-up Languageの省略形で、「エイチ・ティー・エム・エル」と呼ぶ。
通常の文章に、タグ< >即ちかぎ括弧をつけて、表現力を豊かにした文章である。通常のテキスト(文章)を超越した(ハイパー)なテキストを作成するということから、「ハイパーテキスト」と呼ばれている。
特に、他の文章や画像などを、自由に文章の中に埋め込むことができる。(例:ここをクリックすると、ヤフーのトップページが表示される。)
この仕組みを「ハイパーリンク」と呼ぶが、HTMLはそのハイパーリンクなども自由に書き込むことのできる言語のことである。
HTMLTESTのページでは、タグの機能を学ぶことが出来るので、実際にいくつか試してみよう。

なお今回は説明していないが、HTMLは本来文書の要素や構造を記述するための言語である。そのため文字の装飾やデザインを記述する時にはCSSを利用する事が本来のHTML文書の作成方法である。
CSSは、HTMLで作った要素を装飾するスタイルを指定する言語である。従って、本来であれば、ページのデザインや文字の装飾は基本的にCSSで記述する事になっている。CSSについては今回は取り扱っていないので、興味のある人はいろいろと調べてもらいたい。教員のサンプルでは、h1やh2のタグ、ボタンについて、CSSで定義している。