G Web Development SoftwareとLabVIEWを使用してHTTP GET、POSTのやり取りを行うWebサービス、Webアプリケーションを作成する方法

更新しました Jan 10, 2023

環境

ソフトウェア

  • LabVIEW
  • G Web Development Software

デジタルトランスフォーメーション(DX)の促進や社内・社外向けのWebサービス・アプリの開発において、NIのソフトウェアを使用する事で開発期間の短縮を行う事ができる場合があります。例えば、LabVIEWとG Web Development Software (GWDS)を使用する事でWebサービスとWebアプリケーションの構築を行う事ができます。ここではこれらのソフトウェアと共にインストールされるNI Webサーバを使用して、PCをサーバとして設定し、HTTPによる通信の基本的な動作を確認します。また、GWDSで作成したWebアプリケーション(*.html)をホストして同一ネットワーク内に存在するクライアントPCからブラウザを使用してアクセスする方法とLabVIEWで作成したWebサービスとGWDSで作成したWebアプリケーションとの間でHTTPを使用した通信を行う方法を確認します。

目次

  1. NI Webサーバの設定とサーバの基本的な機能の確認
  2. Webアプリケーションの作成
  3. Webサービスの作成と動作の確認
  4. WebアプリケーションとWebサービスの連動をHTTPリクエストを使用して行う
  5. LabVIEWで作成してたWebサービスにPOSTリクエストを追加する

この資料では下記のソフトウェアを使用します。必要なライセンスは下記の2点です。

*64bit版のLabVIEWは英語版のみのご提供となっており、日本語版は存在しません。
 

NILM.png



 

  1. NI Webサーバの設定とサーバの基本的な機能の確認

    NI WebサーバはLabVIEWもしくはGWDSをインストールする際に同時にインストールされており、下記の様にWindowsのプログラム一覧から使用できます。基本的な設定方法はマニュアルで確認する事ができます。

    NIWebServer.png

    下記で作成するWebサービスへのアクセスを許可する為、ここでは下記の様にNI Webサーバ設定のリモートのタブにてクロスオリジンソース共有(CORS)すべての期限に対してCORSを有効にする(非セキュア)を使用します。この設定の詳細についてはマニュアル で確認できます。

    NIWebServerSetting.png
    ここでは下記の2つの資料と同様に非セキュアリモートアクセスの設定を使用してNI Webサーバを使用します。NI Webサーバの基本的な機能、htmlファイルやその他のファイルのホスト方法、HTTPリクエストを使用した基本的な通信方法については下記の資料で確認できます。

  2. Webアプリケーションの作成

    Webアプリケーションの作成はGWDS(もしくはGWDSの前身であるNXG Web Module)を使用して行います。GWDSを起動し、Web Application Projectを作成します。
     

    1gwds.png


    WebアプリケーションはステートマシンやキューメッセージハンドラなどのLabVIEWで一般的に使用されるプログラミングの記述方法で作成します。キューメッセージハンドラで作成する場合、GWDSで新規のプロジェクトを作成する際にQueued Message Handler for the Webを選択します。ここではステートマシンの形でプログラムを作成し、ブラウザ上で特定のボタンが押された時に特定の処理を行う形のWebアプリケーションを作成します。

    ここでは下記の6つのケースを持つステートマシンを使用します。このVIはこの記事の下部のAttachmentのWebAppから確認できます。
     

    6cases.png

    このWebアプリケーションは下記の様なUIを持っており、GET, POSTリクエストの内容を記入後、GETもしくはPOSTを押すと、HTTPリクエストが実行されます。
     

    WebUI.png



     

  3. Webサービスの作成と動作の確認

    Webサービスの作成はLabVIEWで行います。LabVIEWを起動し、新規のプロジェクトを作成します。
     

    NewProject.png


    プロジェクトエクスプローラ上でMy Computerを右クリックし、NI Webサービスを作成します。Webサービスに新しいHTTPメソッドを追加する為にWebリソース上で右クリックし、新規VIを作成します。ここではマニュアル の手順に沿って下記のWebサービスを作成します。
     

    webservice.png


    上記のVIをAdd.viとして保存し、プロジェクトエクスプローラ上のWebServiceを右クリック後、デバッグサーバを開始するとAdd.viで定義されているHTTPリクエストをブラウザから試すことができます。
     

    startDebugserver.png


    上記の操作の後、プロジェクトエクスプローラのAdd.vi上で右クリックし、メソッドURLを表示すると下記の様にHTTP Method URLを確認する事ができます。HTTP Method URLでは使用しているサーバに応じてデバックサーバ(デフォルトポート8001)、アプリケーションサーバ(デフォルトポート8080)、NI Webサーバ(デフォルトポート80)のそれぞれに対してのURLを確認する事ができます。このURLをGoogle Chrome等でテストすると下記の通り、Add.viで指定した内容の処理が行われた結果を確認できます。
     

    testHTTPGET.png


    上記の例ではHTTP Method URLはhttp://127.0.0.1:8001/WebService/Add?b={value}&a={value}となっています。127.0.0.1は自身のIPを示しており、サーバ上でこのURLを実行する場合は127.0.0.1やLocalhostを使用する事ができますが、クライアントPCなど別のPCからブラウザを立ち上げ、このサーバPCで実行されているWebサービスを使用する場合、サーバのIPを入力する必要があります。この例では10.128.1.103というサーバのIPを入力し、別のPCからの動作確認を行っています。
    また、8001の部分は下記の様にデバックサーバを示しています。この部分についても例えばこちらのマニュアルの方法でNI Webサーバにパブリッシュをした場合、ポートは80となるので注意が必要です。
     

    ServerPort.png



     

  4. WebアプリケーションとWebサービスの連動をHTTPリクエストを使用して行う

    LabVIEWで作成したWebサービスの動作確認はG Web Development Moduleで作成したWebアプリケーションからも行う事ができます。この資料の手順2 で作成したWebUIを使用する場合、下記の様になります。
     

    WebUIで動作確認.png


    GWDSで作成したWeb UIはこちらの記事 の手順でビルド、NI Webサーバでホストする事で同じネットワークに接続されているクライアントPCから実行可能になります。


     

  5. LabVIEWで作成してたWebサービスにPOSTリクエストを追加する

    下記の様なPOSTリクエストを作成し、Read Postdata.viを使用してPOSTリクエスト時に送信されるバッファデータの読み込みを行います。Webサービス上で処理を行った後、Write Reponse.viでデータをクライアントに送信します。ここではJSON平坦化、非平坦化関数を使用し、JSON形式でデータのやり取りを行っています。HTTPメソッドでは日本語の文字列のやり取りを行う事は出来ないのでURLエンコード・デコードが必要となります。

    POST.png

    上記のPOSTリクエスト(PlusOneArray)をGWDSで作成したWeb UIから実行する場合、下記の様になります。buffer(POST)の部分にはJSON形式でデータを記入します。

    execution.png