【コマンド】JavaScriptコードの実行-Forguncy（フォーガンシー）
また、本記事の内容についてはサンプルアプリのご提供も行っております。
サンプルアプリをご希望の場合はこちらよりご連絡ください。
◆1.ForguncyにおけるJavaScriptの役割
JavaScriptはwebページに動的な要素を加えるプログラミング言語です。
ForguncyにおけるJavaScriptの役割として、以下があります。
・カスタマイズ：標準機能にない機能を実現したり、独自の処理を追加したりできます。
・UI操作：Forguncyページ、セル、リストビューなどのUI要素を操作できます。
・データ操作：データの更新や、メール送信などのHTTPリクエストを伴う処理を実行できます。
・入力値の検証：ユーザーが入力した値をチェックし、不備があればエラーメッセージを表示するなどの処理が可能です。
・処理の制御：exit()といったコードを使って、特定の処理を途中で中断することもできます。
◆2.JavaScriptコードの設定箇所
JavaScriptコードは、以下の3か所で設定できます。
①セル単位
セルに対して指定できます。指定するには、コマンド（通常）の1つに「JavaScriptコードの実行」コマンドが用意されているので、ここで直接JavaScriptコードを記述します。
セル単位のJavaScriptの実行タイミングは、設定したコマンドの実行時になります。
②ページ単位
各ページに対して指定できます。「ページ設定」タブの「カスタムJavaScript」のフォルダ型アイコンをクリックして、JavaScriptファイル（拡張子：JS）を1つ設定できます。
ページ単位のJavaScriptの実行タイミングは、設定したページのロード時になります。
③アプリケーション単位
アプリケーション全体（すべてのページ）で共通のJavaScriptコードを使用する必要がある場合、ライブラリJavaScriptとしてJavaScriptファイルを登録できます。
「ファイル」メニューから「オプション」の「ライブラリJavaScript／CSS」を開き、リンクを追加または、ファイルを追加・作成することができます。
アプリケーション単位のJavaScriptの実行タイミングは、アプリケーション実行時になります。
今回は、セル単位に対して、リストビューを操作するJavaScriptコードを紹介します。
◆3.JavaScriptコードで実装する具体的な事例
本記事においてJavaScriptコードで実装する処理は、「ワークフローを表すリストビュー上の「段追加」ボタンを押下すると、下段にフロー行を追加する」という処理です。
一行目の段追加ボタンを押下すると・・・
二行目に新しいフローとして、行が追加されます。
◆4.図による説明
まず、処理について図を用いて説明します。
①リストビューに4行のデータが登録されています。
リストビューの行番号は0から始まります。
IDの最大値は4です。
②並び順1の段追加ボタンを押下した時の動きです。
新規行が最下行に追加されます。（のちほど、並び順の昇順でソートされます。）
カレントレコードは一行目であるため、選択行の行番号として「0」を取得します。
最終的に一行目の下段である二行目に追加したいため、並び順は「2」に設定します。
IDは「IDの最大値+1」にするため、リストビューの最下行に「並び順：2、ID：5」の新規行が追加されます。
③新規追加された行よりあとに並べたいデータの並び順を振り直します。
②の図では、並び順2が二つあるため、既存行の並び順について、2→3、3→4、4→5に変更します。
行番号1の並び順を「3」に設定します。
行番号2の並び順を「4」に設定します。
行番号3の並び順を「5」に設定します。
行番号4は新規追加したデータのため、並び順の振り直しは不要です。
つまり、振り直しは行番号1～3までの3回、並び順の数を1ずつ増やしながら同じ動作を繰り返します。
④リストビューは並び順の昇順でソートされるよう設定されているため、下図のように押下した段追加ボタンの下段に新規行（フロー）が追加されます。
①～④の処理をリストビューの操作コマンドで実装すると、それぞれの処理にコマンドが必要なため、画面上での動きはチカチカとちらついてしまいます。
そのため、JavaScriptコードを用いて1つのコマンドで実装することで、動きをスムーズにさせることができます。
◆5.使用するクラスとメソッドについて
上記のような処理を行う際に使用するJavaScriptのクラスとメソッドを紹介します。
「クラス」とは、簡単に言うと設計図のようなもので、動作である「メソッド」をまとめ、具体的なオブジェクトである「インスタンス」を生成するための構文です。
①ForguncyPageクラス
→ページオブジェクトを表します。
・getCell()メソッド
→名前を指定してセル（Cellのインスタンス）を取得します。
・getListView()メソッド
→名前を指定してリストビュー（ListViewのインスタンス）を取得します。
②Cellクラス
→ページ内のセルを表すオブジェクトです。
・getValue()メソッド
→セルの値を取得します。
③ListViewクラス
→リストビューオブジェクトを表します。
・getSelectedRowIndex()メソッド
→リストビューの現在行（カレントレコード）の行番号（インデックス）を取得します。行番号は0から始まります。
・addNewRow()メソッド
→リストビューに新しい行を追加します。
addNewRow({列名1:値1,列名2:値2})のように記述します。
・getRowCount()メソッド
→リストビューに表示されているデータの行数を取得します。
・setValue()メソッド
→リストビュー内の指定したセルに値を設定します。
setValue(行番号, 列名, 値)のように記述します。
◆6.JavaScriptコードの解説
では、実装されているJavaScriptコードの中身を見ていきましょう。
① 現在のページを取得する。
→基本のスタートになるコードです。
ページ上のセルやリストビューを取得するために、まずページを取得する必要があります。
現在のページを取得し、変数pageに設定します。
② 現在のページで「最大値ID」という名前のセルを取得する。
→①で取得したページの「最大値ID」という名前のセルを取得し、変数maxidCellに設定します。
＜参考＞
②のコードに関連して、JavaScriptコード以外の設定として、「セルの名前の定義」、「集計フィールドの追加」、「ページロード時のコマンド」を設定しています。
・セルの名前の定義
名前を定義したいセルを選択し、数式バーの名前ボックスに「最大値ID」と入力してEnterキーを押して名前を設定しています。
定義済みの名前をまとめて編集したり新規作成する場合は、「数式」メニューの「名前の管理」から行うことができます。
・集計フィールドの追加
リストビューにデータ連結しているテーブルについて、集計関数MAXを使用してIDの最大値を取得しています。
・ページロード時のコマンド
「変数の設定」コマンドで集計フィールドの最大値IDを取得し、「セルプロパティの設定」コマンドで「最大値ID」の名前を定義したセルに集計フィールドの値を設定しています。
③ getValueメソッドでセルの値を取得する。
→②で取得した変数maxidCellの値を取得し、変数maxidに設定します。
④ リストビューオブジェクトを取得する。
→①で取得したページの「リストビュー1」という名前のリストビューを取得し、変数listviewに設定します。
⑤ リストビューの現在行の行番号を取得する。
→④で取得したリストビューの現在選択されている行番号を取得し、変数indexに設定します。
ここで注意として、リストビューの行番号は、一行目が「0」から始まります。
そのため、例えば一行目を選択している場合、ここでは変数indexは0になります。
二行目を選択している場合、変数indexは1になります。
⑥ リストビューに新しい行を追加する。
→④で取得したリストビューに新規行を追加します。
事前に、リストビューには列名を設定しており、表示領域の「並び順」列の列名は「並び順」、非表示領域の「ID」列の列名は「ID」としています。
並び順列の値に「変数index+2」、ID列の値に「変数maxid+1」を設定します。
例えば、リストビューの一行目を選択している場合、⑤で変数index=0になるため、index+2=0+2=2となり、下段に追加する行の並び順は「2」になります。
前述⑤の説明で注意として行番号が0から始まることを説明したのは、ここでindexに2を足す必要があるからです。
テーブルのIDの最大値が4の場合、③で変数maxid=4になるため、maxid+1=5となり、追加される行のIDは「5」になります。
つまり、「並び順：2、ID：5」の新規行をリストビューに追加する処理となります。
新規行は最下行に追加されます。
⑦ リストビューの行数を取得する。
→リストビュー全体の行数を取得し、変数countRowに設定します。
⑧ 追加行より下の行について、並び順を振り直すための変数を用意する。
→リストビューに行を追加したため、追加された行より下の行について、並び順を振り直す必要があります。
追加された行の一つ下にくる行について、その並び順は、⑤で取得した選択行の行番号に3を足した数字になります。
そのため、変数sortNoにindex+3を設定します。
⑨ 選択行の「並び順」列に値を挿入
→for文でループ処理を行います。
並び順を振り直す必要がある行は、選択行の一行下～全体の行数の一行上までのため、index+1～countRow-1の手前までの行番号になります。
例えば、④で選択行が一行目の場合、index=0なので、index+1=0+1=1
⑦で取得した全体の行数が5の場合、countRow=5なので、countRow-1=5-1=4
変数iはindex+1≦i＜countRow-1の間でループを繰り返すため、1から4の手前、つまり、行番号が1から3までの3回ループ処理を繰り返します。
ループ処理では、「並び順」列に変数sortNoを設定し、sortNoを1ずつ増やしていきます。
index=0の場合、⑧で変数sortNo=index+3=0+3=3のため、ループ1回目では並び順に3、ループ2回目では並び順に4、ループ3回目では並び順に5を設定します。
JavaScriptコードの実行後、「リストビューの操作」コマンドで、リストビューの更新確定を行います。
リストビューは下図のように、並び順の昇順になるよう並べ替えで設定しているため、振り直した並び順の通り表示されるようになります。
よって、段追加ボタンを押下すると、下段に行が追加される動きになります。
注意点として、セルの名前、リストビューの名前、列名が変更された場合、JavaScriptのコードに記述している名前も書き換える必要があります。
◆7.まとめ
以上のように、JavaScriptコードを用いることで、通常のコマンドではできない操作を行うことができ、開発の幅が広がります。
今回ご紹介したコードについて、「Forguncy JavaScript APIリファレンス」も参考にしてみてください。