JavaScriptをWeb VIに組み込んで使用する方法

更新しました Dec 7, 2022

環境

ソフトウェア

  • G Web Development Software

G Web Development Software (GWDS, もしくは前身であるLabVIEW NXG Web Module)を使用し、*.htmlファイルを作成し、NI WebサーバでホストするとWebページ(Web VI, Web UI)の作成・公開を行う事ができます。

サーバで*.htmlファイルをホストし、別のPCから確認する方法 やGWDSを使用して*.htmlファイルを作成し、NI Webサーバでホストし、別のPCから確認する方法 を行う事でGWDSに用意されている基本的な関数を使用した処理を行うウェブページを作成する事ができます。より高度な処理を行う場合、サーバ上に別途Web Serviceを用意し、HTTPリクエストによるデータの転送、処理内容の指定、処理結果の受信を行う方法とウェブページ上でJavaScriptを使用して簡易な処理を行う方法があります。多くの場合、前者は高度な処理内容を行う場合に使用され、後者は簡易な処理内容を行う場合に使用されます。ここではウェブページ上でJavaScriptを使用して簡易な処理内容を追加する方法について確認します。

ここではGWDS 2022 Q3を使用します。GWDSは個人的、非商業的、非産業的な用途でのみ使用の場合、コミュニティバージョン を使用する事で無償で使用できます。NI Community Editionソフトウェアの使用に関してはこちらの資料 を確認してください。それ以外の使用目的の場合、有償のライセンスが必要となります。
 

:目次

  1. WebアプリケーションにJavaScriptを組み込む
  2. 別の処理を行うJavaScriptを追加する
 

  1. WebアプリケーションにJavaScriptを組み込む

    1. GWDSを開き、新規のプロジェクトを作成します。PROJECT >> Web Application Projectを選択し、プロジェクトの名前を付けます。

      1CreateAProject.png
       

    2. 作成したプロジェクトを保存します。保存先のファイルパスは後ほど使用するので確認可能な場所を指定します。

      2SaveFile.png
       

    3. JavaScriptファイルを格納する為のLibrary、JavaScript Library Interface、Namespaceを作成します。これらの作成、名前変更を行った後、File >> Save Allを行うと、プロジェクトを保存したフォルダ内にJavaScriptファイルを格納する為のフォルダが作成されます。

      3folders.png
       

    4. JavaScriptファイルをインポートします。ここではこの記事の下部のAttachmentsのAdd.jsファイルをインポートします。インポートしたファイルは前の手順で作成したフォルダに格納されます。

      4add.png
       

    5. Add.jsをWeb VIで関数として使用するには下記の設定を行います。HTML script and link dependenciesには下記の内容を記述し、*.htmlファイルにおいてJavaScriptを使用するヘッダを作成します。

      <!-- 
The contents of this textbox are appended to the HTML <head> section of any top-level WebVIs that use, or contain subVIs that use, the JSLI nodes you define in this document. 
-->

<script src="javascript/Add.js"></script>

      また、使用するJavaScriptに対応したinputとoutputを作成し、データタイプを指定します。

      5setting.png
       

    6. Add.jsをWeb VIで使用するにはProject items >> Software >> 作成したLibrary名 >> JavaScript Library Interface名と進み、前述の手順で作成した関数を使用します。

      6use.png

    7. 下記の様なWeb VIを作成し、Run in browserからブラウザ上での動作を確認すると下記の通り、Add.jsで指定した処理が各入力値に対して行われることが確認できます。

     
7execute.png

  1. 別の処理を行うJavaScriptを追加する

    1. 別のJavaScriptの追加を行う場合、前述の手順と同様にJavaScriptファイルのインポートと各種設定を行います。

      9encodedecode.png
       

    2. ここでは例えばencodeURI及びdecodeURIによる日本語等のマルチバイト文字の変換と復元を行う処理を追加しています。


      9EncodeURI.png

       

 

Attachments

Add.js
encodeURI.js
decodeURI.js

関連リンク

その他のサポートオプション

NIコミュニティに聞く

ディスカッションフォーラムで他のユーザーとコラボレーション



エンジニアからのサポートをリクエストする

有効なサービス契約が必要な場合があり、サポートオプションは国によって異なります。