【らくらく dcwmt】チュートリアル

はじめに

ここでは, 手元の netCDFファイルをdcwmtを使って可視化する方法を示します. 環境構築を一通り行った後にお試しください．

チュートリアル

本チュートリアルの流れ

1. dcwmt の入手
2. netCDFファイルから数値データタイルを作成
3. ブラウザで可視化

1. dcwmt の入手

Web サーバの公開ディレクトリに dcwmt の本体を設置します．以下，背景灰色で $ から始まる行は，ターミナル上で実行するコマンドを意味します．

1. Web サーバの公開ディレクトリへ移動する．

<DocumentRoot> は Web サーバのドキュメントルート， <SubDIR> はドキュメントルート以下のサブディレクトリを意味します．これらはご自身の環境に合わせて置き換えて下さい．例えば，Linux (Debian11) のデフォルト環境では，<DocumentRoot> は /var/www/html/ に相当します．

$ cd <DocumentRoot>/<SubDIR>

2. dcwmt の圧縮ファイル (tar.gz) を取得する.

<URL: https://www.gfd-dennou.org/arch/dcwmt/>に飛んで「tar.gz」をクリックした場合にも, 同様のファイルを入手できます.

$ curl -OL http://www.gfd-dennou.org/arch/dcwmt/src/dcwmt_20221011.tar.gz

3. dcwmtの圧縮ファイルを解凍する.

$ tar -zxvf dcwmt_20221011.tar.gz && rm -f dcwmt_20221011.tar.gz

2. netCDFファイルから数値データタイルを作成

数値データタイルとは...
- netCDFファイルに格納された数値データをWebシステムから読み込むために使用する中間ファイルのこと.

dcwmt では netCDF ファイルから数値データタイルを自動で作成することができるスクリプトを用意しています.
スクリプトを用いる際に, 描画したい図の種類によって手順が異なります.
- トーン図を描画したい場合
- 風速ベクトル図を描画したい場合

トーン図を描画したい場合

makeTile.rbスクリプトが置かれているディレクトリに移動する.
```
$ cd ./dcwmt_20221011
```
makeTile.rbスクリプトを実行する.
- makeTile.rbの使い方
```
$ ruby makeTile.rb ./sample.nc@Ps
```
  - 上記の例では, カレントディレクトリに置かれている sample.nc ファイルの物理量 Ps の数値データタイルを作成することができる.
  - 作成された数値データタイルは tile ディレクトリ以下に出力される．
- オプション
  - -f (--fix) DIMENTION
    - 次元を固定することができる. 固定しない場合は, 次元が持つ全データの数値データタイルを作る.
    - 複数の次元を固定する場合は, カンマで区切って指定してください.
```
例) $ ruby makeTile.rb -f time=32112.0 sample.nc@Ps  # 次元timeを32112で固定している.
```
  - -d (--dirname) PATH
    - 数値データタイルを出力するパスを指定することができる. 指定しない場合は, カレントディレクトリになる.
    - 以下の例では ../tile 以下に数値データタイルが保存される．
```
例) $ ruby makeTile.rb -d ../ sample.nc@Ps # 親ディレクトリに数値データタイルを出力する.
```
スクリプト実行後に出力された文字列を「define.js」に書き込む.
- define.jsとは...
  - 数値データタイルの情報（物理量の名前, タイルのサイズ, etc）が書かれたファイルのこと.
  - 数値データタイルで数値データを, define.jsで数値データに関する情報を, Webシステムに渡している.
- 「define.js」は, 「dcwmt_20221011」ディレクトリの直下に置いてあります.

define.jsへ書き込む例

スクリプトの実行

$ ruby makeTile.rb -f time=32112.0 Ps.nc@Ps

(...中略...)

数値データタイルの作成が終了しました. 
以下の文字列を「define.js」に追加してください. 

{                                // <-
   NAME: "Ps",                   // <-
   FIXED: ["time=32112.0"],      // <-
   SIZE: { X: 256, Y: 256 },     // <- この部分をコピー
   MAXIMUMLEVEL: 2,              // <-
   AXIS: { X: "lon", Y: "lat" }, // <-
},                               // <-

「define.js」を編集

const DEFINE = {
    // 数値データタイルセットが置かれているディレクトリまでのパス
    ROOT: "./tile",

    // トーン図に関する情報
    TONE: [    
      {                               // <- 
         NAME: "Ps",                  // <-
         FIXED: ["time=32112.0"],     // <- この部分をコピーした文字列に置き換える.
         SIZE: { X: 256, Y: 256 },    // <- 
         MAXIMUMLEVEL: 2,             // <-
         AXIS: { X: "lon", Y: "lat" } // <-
      },                           
    ]                                 

    // 風速ベクトル図に関する情報
    VECTOR: [
     (...中略...)
    ],
}

風速ベクトル図を描画したい場合

makeTile.rbスクリプトが置かれているディレクトリに移動する.
```
$ cd ./dcwmt_20221011
```
makeTile.rbスクリプトを実行する. 以下のように東西風速 (U) と南北風速 (V) の両方の数値データタイルを作成する．
- makeTile.rbスクリプトの詳しい実行方法は「トーン図を描画したい場合」を確認してください.
```
$ ruby makeTile.rb ./sample.nc@U
$ ruby makeTile.rb ./sample.nc@V
```
スクリプト実行後に出力された文字列を「define.js」に書き込む.
- 「define.js」は, 「dcwmt_20221011」ディレクトリの直下に置いてあります.

define.jsへ書き込む例

スクリプトの実行

$ ruby makeTile.rb -f time=32112.0,sig=0.9987513422966003 U.nc@U

(...中略...)

数値データタイルの作成が終了しました. 
以下の文字列を「define.js」に追加してください. 

{                                
   NAME: "U",                    
   FIXED: ["time=32112.0/sig=0.9987513422966003"],      // <-
   SIZE: { X: 256, Y: 256 },                            // <- この部分をコピー
   MAXIMUMLEVEL: 2,                                     // <- 
   AXIS: { X: "lon", Y: "lat" },                        // <-
},                           

$ ruby makeTile.rb -f time=32112.0,sig=0.9987513422966003 V.nc@V

(...中略...)

数値データタイルの作成が終了しました. 
以下の文字列を「define.js」に追加してください. 

{                                
   NAME: "V",                    
   FIXED: ["time=32112.0/sig=0.9987513422966003"],      // <-
   SIZE: { X: 256, Y: 256 },                            // <- ベクトルを作成する際は, この部分は上記でコピーした文字列と一致している必要がある
   MAXIMUMLEVEL: 2,                                     // <- 
   AXIS: { X: "lon", Y: "lat" },                        // <- 
},

「define.js」を編集

const DEFINE = {
    // 数値データタイルセットが置かれているディレクトリまでのパス
    ROOT: "./tile",

    // トーン図に関する情報
    TONE: [    
             (...中略...)
    ],

    // 風速ベクトル図に関する情報
    VECTOR: [
      {                                
         NAME: ["U", "V"],            // 配列の0番目の要素が「ベクトルの水平成分」, 1番目の要素が「ベクトルの垂直成分」となるように変数名を指定      

         FIXED: ["time=32112.0/sig=0.9987513422966003"],     // <-
         SIZE: { X: 256, Y: 256 },                           // <- この部分をコピーした文字列に置き換える.
         MAXIMUMLEVEL: 2,                                    // <- 
         AXIS: { X: "lon", Y: "lat" }                        // <-
      },                        
    ]                                 
}

[参考] 以下のようにdefine.jsを修正すると, トーン図と風速ベクトル図の両方を設定することができます.

const DEFINE = {
  // 数値データタイルセットが置かれているディレクトリのパス
  ROOT: "./tile",

  // トーン図に関する情報
  TONE: [
    {
       NAME: "Ps",                  // 物理量の名前
       FIXED: ["time=32112.0"],     // 固定する次元 ( 名前=値 )
       SIZE: { X: 256, Y: 256 },    // 各タイルのサイズ ( 単位はピクセル )
       MAXIMUMLEVEL: 2,             // 拡大率
       AXIS: { X: "lon", Y: "lat" } // タイルの縦横の次元の名前
    }
  ],

   // 風速ベクトル図に関する情報
  VECTOR: [
    {
       NAME: ["U", "V"],            // 物理量の名前 ( 配列の0番目の要素が「ベクトルの水平成分」, 1番目の要素が「ベクトルの垂直成分」となる. )
       FIXED: ["time=32112.0/sig=0.9987513422966003"],     // 固定する次元 ( 名前=値 )
       SIZE: { X: 256, Y: 256 },                           // 各タイルのサイズ ( 単位はピクセル )
       MAXIMUMLEVEL: 2,                                    // 拡大率
       AXIS: { X: "lon", Y: "lat" }                        // タイルの縦横の次元の名前
    }
  ],
}

3. ブラウザで可視化

ブラウザから http://<ホスト名>/<SubDIR>/dcwmt_20221011/main.html にアクセスする.

<ホスト名> と <SubDIR> はご自身の環境に合わせて下さい．<SubDIR> は手順 1 で用いたサブディレクトリ名と同じです．

なお，dcwmt の以下の機能についてはチュートリアル資料「ごくらく dcwmt」にまとめられています．そちらを参照ください．