この記事で扱っていること
- サーバーPCにある画像をクライアントで表示する方法
を紹介しています。
注意：すべてのエラーを確認しているわけではないので、記事の内容を実装する際には自己責任でお願いします。また、エラー配線は適当な部分があるので適宜修正してください。
Web Applicationの作り方の基本的な流れは以下の記事で紹介しています。
Web Applicationを作り、サーバーPCとデータのやり取りをする上で、単に文字や数値のデータのみならず、画像ファイルをやりとりすることがあると思います。
そうした操作も、例えばJavaScriptでコードを書けるのであればそういった機能を持たせたHTMLファイルを作成することはできると思います。
ただ、G Web Development Software、つまりWeb Application作成ソフトを使う場合でも、工夫次第で画像ファイルを扱えるようになります。
本記事で紹介しているのはサーバーPC上で実行されているWeb Serviceを使用した方法ですが、この方法によりサーバーPC上の画像をWeb Applicationを実行しているクライアント側のWebブラウザで確認することができます。
どんな結果になるか
Web Application側では、まずサーバーPC上にどのような画像ファイルがあるかという情報を取得するボタン、そして画像ファイルを指定できるリストボックス、指定した画像を別タブで表示させるためのボタン（ハイパーリンク制御器）を用意しています。
サーバーPCには、あらかじめ特定のフォルダを設けておいて、その中の画像ファイルを探すようにしています。この辺りの作りは、後述するWeb Service側のプログラムによって変更できるとは思いますが、今回は簡易的な作りとするため、指定フォルダの中しか見ないことにしています。
リストボックスから見たい画像のファイル名を選択した状態で別タブで表示するボタンをクリックすると別タブにその画像が表示されます。
画像リストの更新ボタンを押すと、サーバーPCの特定フォルダの中身を再び見て、変更があればその変更を画像リストに反映します。
プログラムの構造
Web Service側のプログラムは3つのHTTPメソッドVIを設けています。そして、その一部同士でファイルパスの情報を受け渡すために、簡単な機能的グローバル変数の構造を持ったviを用意しています。
まず、Web ApplicationからのGETリクエストにより、画像ファイルの一覧の情報を返す、ImageFileNameのプログラムです。
今回はサーバーPC（このWeb Serviceが動いているPC）のデスクトップにあるImagesフォルダの中身をフォルダをリスト関数で読み取り、そのデータをJSON文字列としてWeb Applicationに返すようにしています。
この作りは工夫次第で他のフォルダを見たりなど自由に作れると思います。
次に、Web ApplicationからのPOSTリクエストで、指定された画像を機能的グローバル変数に渡すプログラムです。これは、特に応答を返しません（返す応答がありません）。
機能的グローバル変数に渡されたファイルパスを受け取り、画像ファイルの変換を行うのが次のImageDisplayのプログラムです。これはWeb Applicationのハイパーリンク制御器をクリックされた際に実行されるGETリクエストに対応します。
Web Service側で肝となるのはこのプログラムの、MIMEのタイプを決める部分です。ここでimage/pngなどと選択します。
LV画像をPNGに変換関数を用いているのでimage/pngを指定しています。
上記のプログラムででてきていた機能的グローバル変数は以下のような簡単な作りにしています。ただ読み書きするだけ、です。
次にWeb Application側のプログラムの紹介です。
メインのプログラムであるindex.gviweb以外に、二つのサブVIとタイプ定義を一つ用意しています。
ハイパーリンク制御器に値を渡すように指示するだけです。
なお、メインのプログラムに配置したハイパーリンク制御器は、プロパティによって、どのように画像ファイルを表示させるかを選べます。デフォルトでは、新規のタブを作らずに、同じページの更新によって画像表示の画面になります。
新規タブでの表示には、「新規ウィンドウ」を選択します。
メインプログラムのブロックダイアグラムは以下のようです。
後半のWhileループがステートマシンになっており、前半のWhileループは入力したURLが正しいかどうかのチェックを行っています。
Web ServiceにGETリクエストを送るサブプログラムにURL入力を渡し、エラーがなければこの最初のWhileループを抜けます。エラーがある場合にはURL入力が間違っていることになるのでいつまでも最初のWhileループを抜けられません。
後半のWhileループはイベント駆動型のステートマシンの状態にはなっていますが、イベントは二つしかなく、画像ファイルリスト更新のブールボタンが押されたときと、画像ファイル名という名前のリスト制御器の値が変更（ユーザーがリストの項目をクリック）したときのイベント検知を行います。
イベントストラクチャのあるケース以外にはあと3つケースがあり、それぞれのイベントに対応したケースと、あとはハイパーリンク制御器に特定のURLを与えるケース、hyperlinkcreateです。
このhyperlinkcreateで、Web ServiceのImageDisplayというGETリクエストを送れるようにしています。
ただ、ステートマシンの一番最初にこのhyperlinkcreateケースが一回実行された後は、以降このケースが実行されることはありません。
そのため、ステートマシンのステート（タイプ定義された列挙体）を扱うシフトレジスタはhyperlinkcreateで初期化されるようにしています。
さて、hyperlinkcreateのケース以外は、Web ServiceのImageFileNameへGETリクエストを送るためのプログラムを使用したupdateケースがあります。
ImageFileNameへリクエストを送る、GETImageFileNameのプログラムは以下のようにしています。
さらにもう一つの、「リスト制御器から指定した画像ファイルの名前」をWeb Serviceに送るImageFileSelectへのPOSTリクエスト用に、POSTImageFileSelectのプログラムも用意します。
これらを組み合わせてWeb Applicationのプログラムの完成です。
様々な画像拡張子に対応する
MIMEタイプには他の選択肢もあるので、画像ファイルの拡張子ごとに選ぶ必要があります。これはWeb Service側でファイルの拡張子を取得してそれによる場合分けで対応します。
ただ、レスポンスとして返すのは、元がどの拡張子の画像ファイルであれPNGデータに変換する関数を使うことになりそうです（PNG用の関数しか用意されていないため）。
複数のクライアントがある場合
今回のプログラム、簡素な作りにしているため、複数のクライアントがほぼ同時期に似たような操作をして違う画像ファイルを選んだ場合、リストから選んでその後にハイパーリンク制御器をクリックするまでのタイミングによっては、機能的グローバル変数が上書きされることで、意図した結果を得られない場合があります。
タイミングが運悪く他のクライアントの操作と重なった場合でも、自分が指定した画像ファイルを常に正しく表示させるようにするには別途それ用の機能を実装しなければいけません。
Web ServiceとWeb Applicationのやりとりは何も文字や数値のようなデータに限らず画像を扱うこともあると思うので、JavaScriptでゴリゴリコードを書くことはできないけれどやってみたいという方の参考になると嬉しいです。
ここまで読んでいただきありがとうございました。
コメント