サポセン新人奮闘記🔥　～WebFOCUSのプロフェッショナルになりたくて 2025 spring～

2025年2月26日サポぶろぐ

みなさんこんにちは！
株式会社アシスト北海道でWebFOCUSのサポートを担当しております、網谷（あみや）です。

北海道は相変わらずの雪景色⛄ですが、本州ではそろそろ春の気配を感じる頃でしょうか？少しずつ日が長くなり、春の訪れが待ち遠しくなりますね。

前回はサポセン新人奮闘記の第一弾を投稿し、新人時代に「関数の使い方」について奮闘した様子をご紹介しましたが、ご覧いただけましたでしょうか？
まだの方はこちらからぜひご覧ください！

さて、今回の記事では、前回から少しレベルアップした網谷が「App StudioでのHTMLページ作成」に奮闘した様子をご紹介します。

新人研修では、コントロールの配置やプロシジャの読み込みと実行など、基本的な操作はしっかり押さえていたため、「これでお客様対応もできる！💪🏻」と意気込んでいたのですが、いざサポートデビューをしてみるとたくさんの壁が待ち受けていたのでした。。

Contents

1. 【ステップ1】コントロールの値を変数に渡す
2. 【ステップ2】動的コントロールと連鎖
3. 【ステップ3】埋め込みJavaScriptとは・・・？
4. 最後に

【ステップ1】コントロールの値を変数に渡す

とあるサポート対応で、特定の値（今回はCOUNTRY）で絞り込んでレポートを実行するHTMLページを作成しようとしていました。

プロシジャの読み込み、リストの設定、タスクの設定をして実行してみたところ、レポートではなくオートプロンプト画面が出てきてしまいました。

設定はできているはずなのに、なにがダメなんだ！？
リストの値はあっているし、ボタンは反応してるし、うーん、わからない・・・

悩んでいると、フォービー先輩がヒントをくれました。

変数にコントロールの値を渡すには、「パラメータ」タブでバインド設定が必要だよ！

ドロップダウンリストから変数に値を渡すには、設定が必要だったんだ。知らなかった！
パラメータタブって、デザインタブの横にあるタブかな？見てみよう！

COUNTRY を枠の外に出して、combobox1 を COUNTRY に向かってドラッグアンドドロップすると、矢印が出てきた！
これで、無事ドロップダウンリストの値に絞り込んだレポートが出力されました👏🏻

実際の使い方としては、ドロップダウンリストで変数に値を渡すことが多いので、この設定は覚えておこうね！

【ステップ2】動的コントロールと連鎖

今度は、別のお問い合わせでお客様からHTMLファイルを頂いたので、検証環境で設定を確認してみました。

すると、コントロールの設定で「動的」が設定されていることに気が付きました。

静的の設定しか見たことがなかったけど、動的って何だ・・・？
静的の設定では、選択肢のリストが設定画面に表示されていたけど、今回は選択肢らしき項目が見当たらない。
どうやって値を出しているんだろう？
こういうときは、マニュアルを調べてみよう！

「App Studio 利用ガイド」を読むと、「値の動的リスト作成」というページがありました。

※マニュアルより

[動的] を選択した場合、リクエストの実行時に、選択したデータソースから取得された値のリストが使用されます。

データソースから任意のフィールドを選択してリストに表示できるんだ！手入力が不要なのは便利だな～。

じゃあ、動的リストが理解できたところで、実際に作ってみよう！
COUNTRYとCARの動的リスト（デフォルト）を作成して、こんなHTMLページは作れるかな？

＜作成イメージ＞

やってみます！

動的リストを二つ作って、バインド設定をして、っと。

あれ？CARの絞り込みができていない・・・

ヒントをあげよう！もうひとつバインド設定が必要かも？

combobox1で選択した値の情報をcombobox2に渡せればいいから、こうかな？

できました✨

おめでとう！これが「連鎖」の設定だよ。よく使うから、覚えておこうね！

必要な値だけに絞り込まれる方が、たしかに使いやすそう！
フォービー先輩、ありがとうございます！

【ステップ3】埋め込みJavaScriptとは・・・？

次は、お客様からこんなお問い合わせをいただきました。

＜お問い合わせ内容＞

2つのテキストボックスのうち、1つでも入力されていたらフレームにレポートを実行し、両方とも空白の場合はアラートを表示したいです。

たしか、入力チェックができる機能で「選択と検証」という設定があったはず。
プロシジャの読み込みからタスクまで設定して動かしてみたけど、これはコントロール単体のチェックなので「両方とも空白の場合のみアラート」というのができなそう・・・

マニュアルやFAQも調べてみたけど見つからないので、先輩に聞いてみました。

これは、設定だけではできないね・・・。でも、JavaScript を使えばできそうだよ！

じゃばすくりぷと・・・？すみません、よくわかりません。

JavaScriptはWebFOCUSではなく、一般ITの分野だよ。
実はApp Studioでは、「埋め込みJavaScript」タブにJavaScriptを書き込むことでいろんなことができるから、設定だけでは実装できないようなこともできることがあるよ。

なるほど・・・。まずはJavaScriptというものが何者かを調べる必要がありそう

Glean Chatに、JavaScriptとは何かを聞いてみました。

Glean Chatについて

Glean Chatとは、社内外のデータや情報を簡単に検索できるAIチャット機能です。
Gleanの検索窓から、Microsoft 365、Box、Google Workspace、Slack、Salesforceなどを横断検索して、瞬時に知りたい情報を探し出すことができる、エンタープライズレベルで生成AIを最大限に活用できるAIプラットフォームです。

詳しくはこちら

※Glean Chat の回答

JavaScriptは、ウェブサイトをよりインタラクティブで動的にするためのプログラミング言語です。例えば、ボタンをクリックしたときにメッセージを表示したり、フォームに入力されたデータをチェックしたりすることができます。HTMLやCSSと一緒に使われることが多く、ウェブページに動きを加えるための重要なツールです。初心者でも比較的簡単に学べるので、ウェブ開発を始めるのにおすすめの言語です。

なるほど。
FOCUS言語は覚えたけどJavaScriptは初見なので、とりあえず一般情報を調べて勉強するしかない・・・！

～調べること数十分～

ふぅ。少しFOCUS言語やPythonと似てるから、なんとなく雰囲気はわかった気がする・・・
けど、実際に埋め込みJavaScriptに指定して思い通りに動かせるかは、自信がないなぁ。
そして、まずなにから始めればいいかわからない・・・先輩に聞こう！

埋め込みJavaScriptを設定するときは、まず［プロパティ］タブの中にある雷アイコンの［イベント］から設定をするよ。
今回だったら、ボタンをクリックしたときにテキストボックスの値を取得したいから、[クリック時］をダブルクリックしてみてね！
ちなみに、WebFOCUSでは独自の関数（IbComposer関数）も用意しているから、マニュアル（App Studio 利用ガイド）で確認して、使えそうなものは使ってね！

「button1_onclick」というイベントが追加されました！やってみます！

～苦戦すること数十分～

やっと書けた～！・・・あれ？これで合ってそうなのに動かない

マニュアルと見比べてみて、何か間違っているところはないかな？

あ！IbComposerの “C” が小文字になってる！大文字と小文字が区別されるなんて知らなかったです！
直してみましたが、今度はアラートが出た後にレポートが実行されてしまいました・・・。

それは、タスクとアニメーションでボタンクリック時にリクエスト実行されるように設定されているからだね。
IbComposer_triggerExecution関数を使うときは、ボタンクリック時に無条件でリクエスト実行がされないように、「TBD」というトリガタイプを選ぶのがルールだよ！

TBDについて

TBD は、to be decided または to be determined の略で、まだ決まっていないこと、まだわからないことに使います。

今回の処理イメージについて

ボタンクリック後に走るJavaScriptの処理によってリクエストが決まる = TBD（まだ決まっていない）ということですね！
triggerExecution と TBD は、セットで覚えておきます！
無事思い通りの動作になったので、これでお客様にも回答できそうです
慣れるまでは少し難しいけど、App Studioはいろいろできて楽しいな