日本ソフトウェア科学会第 38 回大会 (2021 年度) 講演論文集

CUI on Web: ソフトウェア検証やテスト CUI のためのモダン Web インターフェース枠組
藤生 和希

浜名 誠

ソフトウェア科学の成果として，ソフトウェアの検証やなんらかのテストをするツールを作成する場合，多くの場合
最初は CUI (Character User Interface) プログラムを作成する．発表後にそのツールを他のユーザに利用してもらうように普及させるためには，ツールを配布することになるが，多くの場合，複数の依存関係のあるライブラリのイ
ンストールや実行環境の整備をユーザに強いることになり，すぐに試用できるものを提供する事は困難である．これを改善する方法として，WUI (Web User Interface) を実装し，Web 上からプログラムを利用できるようにする方法が挙げられる．しかし，作成するプログラム毎に WUI を実装する事は，Web 技術の知識や典型的なプログラムを繰り返し書くような労力を要する．これを改善するため，本研究では，既存 CUI プログラムを簡便に WUI 化す
るためのフレームワーク WebCUI を開発する．WebCUI は Nuxt.js を採用することで，PC やスマートフォンなどプラットフォームを問わずモダンな外観と操作性を持つ WUI を簡便に作成する方法を提供する．また実際例として，鉄道の経路検索，二階書換え系の合流性停止性検証ツール SOL，そして多相λ計算の対話型簡約器 LCII のWUI を示す．

When we create a tool for software veriﬁcation or some kind of testing as a result of software science, we
often create a CUI (Character User Interface) program at ﬁrst. In order to spread the tool to other users
after its publication, the tool is distributed, but in many cases, it is diﬃcult to test it immediately because
it requires users to install multiple dependent libraries and to prepare the execution environment. One
way to improve this is to implement a WUI (Web User Interface) and make the program available on theweb. However, every time we try to implement a special WUI, it takes a lot of time and eﬀort to develop.
In this study, we developed a framework for implementing WUI specialized for CUI programs, WebCUI,
using Nuxt.js, and showed that WUI for CUI programs can be easily implemented using this framework.
As applications, we show WUIs for a railway inquery system, SOL: a conﬂuence and termination checker of
second-order rewriting system, and an interactive reduction environment for the polymorphic λ-calculus.

きるものを提供する事は困難である．

1 はじめにDocker に代表されるコンテナ仮想化技術を用いて，ソフトウェア科学の成果として，ソフトウェアの検実行環境そのものを提供する方法もあるが，より簡証やなんらかのテストをするツールを作成する場合，

便な手段として，WUI (Web User Interface) を実装

多くの場合最初は CUI (Character User Interface)

し，Web 上からプログラムを利用できるようにする

プログラムを作成する．発表後にそのツールを他の方法が挙げられる．しかし，作成するプログラム毎にユーザに利用してもらうように普及させるためには，

WUI を実装する事は，Web 技術の知識や典型的なプ

ツールを配布することになるが，多くの場合，複数のログラムを繰り返し書くような労力を要する．これを依存関係のあるライブラリのインストールや実行環改善するため，本研究では，既存 CUI プログラムを境の整備をユーザに強いることになり，すぐに試用で簡便に WUI 化するためのフレームワーク WebCUIを開発する．WebCUI は Nuxt.js を採用することで，

CUI on Web: A Modern Web Interface Framework
for CUI of Software Veriﬁcation, Tests, etc.
Kazuki Fuju, Makoto Hamana, 群馬大学大学院理工学
府, Gunma University.

PC やスマートフォンなどプラットフォームを問わず
モダンな外観と操作性を持つ WUI を簡便に作成する方法を提供する．また実際例として，鉄道の経路

(2)WebAPI が CUI プログラムを実行し，(3) その実
行結果を WebAPI へ返す．(4)WebAPI は，CUI プ
ログラムの出力を WUI へ返す．

2. 2 マテリアルデザイン
モダンな UI のデザインとして，WebCUI ではマテ
リアルデザイン [1] を採用した．マテリアルデザインとは，Google が 2014 年 6 月に発表したデザイン手法である．画面上のボタンやリストなどの要素をマ
図1

WebCUI を用いた Web アプリケーションの構成

テリアル（物質）として考え，影などを用いて立体的に表現する．加えて，ユーザの操作や画面遷移といっ

検索ツール，二階書換え系の合流性停止性検証ツーたアクションにアニメーションを持たせ，より直観的

ル SOL，そして多相λ計算の対話型簡約器 LCII のな操作感をユーザに提供するといった特徴がある．

WUI を示す．

本研究では Vue.js や Nuxt.js で利用できるマテリ
アルデザインのコンポーネントを備えた UI ライブラ

2 設計方針リである Vuetify1 を用いている．

WebCUI は，CUI プログラムのモダンな WUI を提供するフレームワークである．

2. 3 レスポンシブデザイン

CUI プログラムの WUI を作成する場合，ユーザにWebCUI では，レスポンシブデザインの WUI をはコマンドラインの代わりに Web ページ上のフォー

構築することができる．レスポンシブデザインとは，

ムに CUI プログラムの引数となる値を入力させる必ユーザの画面サイズの合わせて UI が変化する設計要がある．WebCUI では，フォームの形式（テキスのことである．WebCUI を用いて構築する WUI は，

トフィールドやプルダウンメニューなど）を指定する

PC のブラウザの画面サイズを変更したり，タブレッ

ことで，WUI 上にフォームが自動的に構築される．

ト端末やスマートフォンなどからサイトにアクセス

また，Web 上に公開した際の Web ページのタイトした場合などにおいても，整ったレイアウトを維持

ルや通信エラーが起きた際のエラーメッセージといっする．

た設定をすることで，複雑なプログラムを書くことな
く，WUI が構築できる．

2. 4 ライトテーマ・ダークテーマ
WebCUI では，WUI をライトテーマとダークテー

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

マのどちらで構築するかを選択することができる．

WebCUI を用いて作成する Web アプリケーショ
ンは，ユーザが直接操作するクライアント側の WUIと，サーバ側で実行される WebAPI 及び CUI プロ
グラムに分けられる．WebAPI は，クライアント側

3 使用技術WebCUI に使用している技術やサービスについて示す．

から送信されるリクエストを処理し，その処理結果を返すプログラムである．図 1 に WebCUI を用いた

3. 1 Nuxt.js

Web アプリケーションの全体像を示す．図中の (1)Nuxt.js [3] は，WUI を構築するためのオープン〜(4) は，各プログラム間のやり取りの順番を示し

ソースの JavaScript のフレームワークである．Evanている．まず (1)WUI から WebAPI へ CUI プログ
ラムを実行するようにリクエストが送られる．次に

1 https://vuetifyjs.com/

図2

WebCUI を用いた Route の WUIYou によって開発された Vue.js をベースにしており，同じく JavaScript のフレームワークである React が4 実例 1

鉄道経路検索ベースとなっている Next.js から着想を得て，NuxtJS

本節では WebCUI を用いた Web アプリケーション

Company や Nuxt.js のコミュニティなどによって開の簡単な実装例を示しながら，WebCUI の概観，機発された．データの変更やユーザからの入力などを検能，構成を概説する．出発駅，到着駅，時刻を入力

出し，DOM 要素や JavaScript 上のデータを自動ですると，その時刻における出発駅から到着駅への最更新する機能を備えるため，インタラクティブな UI

短経路を表示する Web アプリケーション Route を考や，シングルページアプリケーションなどの開発に適える．

している．また，既存のプロジェクトへの部分的な採このためにまず，コマンドラインで実行する鉄道の用や，開発の規模に応じての段階的な機能の追加など

経路探索をするプログラム route を作成する．実装が可能であるため，小規模なシステムから大規模なシのための言語は何を用いても構わないが，ここでは C

ステムまで利用できる柔軟性を持つ．

言語を用いて作成した．この CUI プログラムの使用例を以下に示す．なお，route は第 1 引数として出発

3. 2 axios

駅，第 2 引数として到着駅，第 3 引数として時刻を

axios2 は，HTTP 通信を行うためのライブラリで受け取る．

ある．アクセス先のアドレスと送信するパラメータなどを指定することで，簡単に HTTP 通信を行うことが可能である．
2 https://axios-http.com/$ ./route 高崎 桐生 08:00
高崎 -> 桐生--------------最短距離 : 10 駅経由します
最短経路 : 高崎 -> 高崎問屋町 -> 井野 -> 新前

橋 -> 前橋 -> 前橋大島 -> 駒形 -> 伊勢崎 ->国定 -> 岩宿 -> 桐生

はパラメータと呼ぶ．パラメータは，WebAPI に送信され CUI プログラムの引数として渡される．

WebCUI では，最初にどのようなパラメータが必
また，Route は Web サーバに Google Cloud Plat-

form の仮想マシン，仮想マシンの OS に Ubuntu
20.04.2 LTS，Web サーバソフトウェアに Apache2，
WebAPI に PHP を用いて実装する．

要かを指定する．この際，各パラメータをユーザに入力させるためのフォームの形式を併せて指定すること
で，WUI 上にフォームが自動的に生成される．詳しいパラメータとフォームの指定方法は 7. 4 節に示す．

Route では WebAPI に送信するパラメータは出発
4. 1 Route の WUI
図 2 は，WebCUI を用いて作成した Route の WUIである．図中の (a)〜(e) で示される各コンポーネン
トについて示す．

(a) アプリケーションのロゴや名前が表示される．
(b) クリックすることでアプリケーションのドキュ

駅，到着駅，時刻の 3 つである．出発駅と到着駅のフォームをセレクトボックス，時刻のフォームをテキストフィールドと指定すると，図 2 の (c) のようにフォームが自動で生成される．この WebCUI の仕組
みにより，開発者はコーディングを行うことなくパラメータの入力フォームを作成することができる．

メントが表示される．

(c) 入力フォームが表示される．ユーザがここに入力した値が WebAPI へ送信される．

(d) CUI プログラムの実行結果などが表示される．
このコンポーネントを本稿ではコンソールと呼ぶ．

(e) 複数のボタンが表示される．それぞれのボタ
ンはクリックすることで 5 章に後述する機能を提供する．このボタンの集まったコンポーネント
を本稿ではツールバーと呼ぶ．

4. 2 WebCUI におけるフォーム
CUI プログラムはほとんどの場合，引数を受け取りそれに対する処理を行う．CUI ではプログラムに対してコマンドラインによって引数を与えるが，Web上に実装するためには，引数を与えるために WUI 上にコマンドラインの代わりとなる入力フォームを配置

4. 4 WebAPI の作成
WebAPI は，WUI から CUI プログラムの引数として必要なパラメータを HTTP リクエストメソッドの POST メソッドで受け取り，CUI プログラムに渡して実行し，結果を WUI に返すプログラムである．

WebAPI はサーバー側で動作するプログラム言語を用いて記述する．以下にプログラミング言語 PHP を用いた Route の WebAPI の実装を示す．
<?php// HTML ヘッダ出力
header(’Access-Control-Allow-Origin: *’);...
// $_POST[キー名] で WUI から送信されたパラメータ取得$from = $_POST[’from’];$to= $_POST[’to’];$time = $_POST[’time’];

する必要がある．

Route の WUI に対しては，出発駅・到着駅の指定に選択式のフォームであるセレクトボックス，時刻の// exec 関数で CUI コマンド route を実行// 実行結果は配列$output へ格納
exec("./route $from $to $time", $output);

指定に文字列が入力可能なフォームであるテキスト
フィールドの 2 種類のフォームを実装する．WebCUIが対応するフォームの形式の詳細は，6 章に後述する．

// 配列$output を表示し WebAPI の出力とする
for ($i=0; $i<count($output); $i++) {echo $output[$i] . ’<br>’;}?>

4. 3 WebCUI におけるパラメータ
各フォームはユーザに入力や選択をされ，値を持っている．このようなフォームが持つ値を WebCUI で

5 機能
WebCUI で実装できる WUI の機能を示す．

入力例として多くのファイルが用意されている場合がある．これらのファイルの中身を全て入力例として設定するのは非常に多くの手間がかかる．そこで，

WebCUI はサーバ上のディレクトリを指定すること
でそのディレクトリ内のファイルを入力例として一覧
図3

ドキュメントの表示

画面

表示・代入する機能を提供する．この機能の詳細は，

9 章に実例を交えて後述する．
5. 1 ドキュメントの表示
アプリケーションの使用方法や出力結果の見方な5. 6 変数

どを.vue 形式のファイルに記述し，そのファイルを

WebCUI は，テキストフィールド内で変数を展開す指定することでドキュメントの表示を行うことが出る機能を提供する．ツールバーから変数の表示・定義

来る．複数の.vue ファイルを指定することで，図 3ができるドロワーを開き，変数を定義することで，テの左側のようにタブが自動的に生成され，各ドキュ

キストフィールド内で${...} の形で使用できる．例

メントを閲覧できるようになる．.vue ファイルにはえば，${pi} = 3.1415 と定義するとテキストフィー

HTML を記述する．

ルドに入力された${pi} は 3.1415 に置換される．

5. 2 HTTP リクエストの送信
設定したパラメータを，HTTP の POST メソッド
により WebAPI に送信する．POST メソッドは，ク

6 フォームWebCUI を用いて構築することのできるフォームについて示す．

ライアントから Web サーバへデータを送信するための HTTP リクエストメソッドである．

6. 1 テキストフィールド
テキストフィールドは 1 行の文字列を受け付ける

5. 3 コンソール出力のクリアと保存フォームである．5. 6 節で示した変数の展開はこのコンソールの出力をクリアし，コンソール履歴とフォーム内で利用することができる．

して保存する．この履歴は，次に示すコンソール履歴の表示ボタンを押して表示されるドロワーから確認・

6. 2 テキストエリア

保存することが出来る．なお，この履歴は Web ペー

複数の行にわたる文字列を受け付けるフォームであジを閉じると破棄される．

る．パラメータの設定時に，何行まで表示するかを設定する．指定した行数以上の文字列が入力された場合

5. 4 コンソール履歴の表示

はテキストエリアの右側にスクロールバーが表示さクリアしたコンソール出力の履歴をドロワーに表示れる．

する．ドロワーとは，ページ遷移を必要とせず，Web
ページ上に重ねて表示されるコンポーネントを指す．

6. 3 セレクトボックス

各出力を.txt ファイルで保存することもできる．

セレクトボックスは，プルダウンメニューなどとも呼ばれる，選択式のフォームである．フォーム上に表

5. 5 パラメータの入力例

示させる文字列と，実際にサーバへ送信する値を分ドロワーにパラメータの入力例を一覧表示できる．

けて設定することができる．例えば，表示上の選択

ドロワー上の入力例をクリックすることで，パラメー肢としては+, -, *, /だが，それぞれが選択されたタへ入力例の値が代入される．

際にサーバへ送信される値は plus, minus, times,

また，なんらかの検証を行う CUI プログラムでは，

divide とすることができる．

6. 4 オートコンプリート
オートコンプリートは，自動補完機能のあるテキス

このうち，下線が引いてあるファイルは変更する場
合のあるものである．これらについての詳細を示す．

トフィールドである．例えば，国名を選択肢として設定したオートコンプリートフォームの場合，J と入力

7. 1 conﬁg.js

すると Japan や Jamaica などがサジェストされる．

Web アプリケーションの名前やロゴ画像ファイルの指定，エラーメッセージの設定などを行う．

6. 5 トグルスイッチ
トグルスイッチは，オンとオフを切り替えられるフォームである．

export const config = {// Web アプリケーションの名前
name: ‘WebCUI Sample‘,// アプリケーションのロゴ画像ファイルの指定
logo: {
icon: ‘logo_icon.png‘,text: ‘logo_text.png‘,},

6. 6 チェックボックス
チェックボックスは，オンとオフを切り替えられるフォームである．

// WebAPI のアドレス・ファイル名の指定
baseUrl: ‘http://localhost‘,
apiFileName: ‘sample-api.php‘,6. 7 ファイル入力
ファイル入力フォームは，ユーザがクリックするとファイル選択ダイヤログが開き，ローカルのファイル// 各種メッセージの設定
messages: {// コンソールに最初に表示させるメッセージ
initialMsg: [{ text: ‘Please refer ...‘ }],// 通信エラー発生時に表示させるメッセージ
connectionErrorMsg: [{ text: ‘An error ...‘ }],// ファイルの読み込みエラー発生時に表示させるメッセージ
readErrorMsg: [{ text: ‘An error ....‘ }]},の中身を展開できるフォームである．展開先にはテキストエリアが指定可能である．

7 WebCUI の構成
WebCUI は以下のファイルで構成される．
/ assets| - - config.js| - - document.js| - - examples.js| - - params.js| - - toolbar.js‘-- variables.js/ components| - - / documents|| - - doc.vue|‘-- ...
| - - （省略）‘-- ...
/ layouts| - - default . vue‘-- error . vue/ pages‘-- index.vue/ static| - - favicon.ico| - - logo icon.png| - - logo text.png‘-- style . css/ store‘-- index . js// コンソールの配置の設定
consoleLocation: ’top’}

name で指定した Web アプリケーションの名前は，
Web 上に公開した際の Web ページのタイトルとなる．
Web アプリケーションのロゴの設定 logo では，icon と text の 2 つ の 画 像 が 設 定 で き る ．画 像
は/static/以下に配置された画像のファイル名を指定する．icon に指定した画像と text に指定した画像は，2 つ並んでページトップに表示される．icon を指定しない場合はアイコンが表示されない．text を指定しない場合は name で指定した Web アプリケー
ションの名前が表示される．

consoleLocation は，コンソールの配置を変更することで，WUI のレイアウトを決めるための設定である．値として，’top’, ’bottom’, ’left’,’right’ が指定できる．

7. 2 document.js

上記の例のように，入力例をジャンル分けすることでアプリケーションの使用方法などを記述したドキュ

自動的にタブが生成される．

メントについての設定を行う．

7. 4 params.js
import Usage from ’~/ components /documents / Usage . vue ’export const documents = [{title : ‘ Usage ‘ ,body : Usage}]

ドキュメントは，.vue ファイルに HTML によって記述し，/components/documents/以下に配置する．
その後，document.js に.vue ファイルをインポート
し，body に指定することで，WUI 上に表示される．

WebAPI に送信するパラメータを指定する．
export const params = {env : {
display : ’ Typing Environment ’ ,type : ’ text ’ ,default : ’’,size : ’ whole ’},term : {display : ’ Lambda Term ’ ,type : ’ text ’ ,default : ’’,size : ’ whole ’ ,required : true}}

複数のドキュメントを指定することで，title に設定した文字列をタイトルとして自動的にタブが生成され，それぞれを閲覧できる．

7. 3 examples.js
アプリケーションへの入力例の設定を行う．
export const examples = [{display : ’ Untyped Lambda Term ’ ,examples : [{term : ’(λx . x ) y ’ ,},{term : ’(λx .λy . x y ) z ’ ,}]},{display : ’ Typed Lambda Term ’ ,examples : [{env : ’y : Int ’term : ’(λx : Int . x ) y ’ ,},{env : ’z : Int - > Bool ’term : ’(λx : Int - > Bool .λy : Int . x y ) z
’,
}
]
}
]

入力例として，パラメータの値を指定する．また，キーの env や term は WebAPI に送信されるパラメータ名である．display にはそのフォームのプレー
スホルダとして表示させるメッセージを設定する．

type には，入力フォームの形式を指定する．指定できるフォームの形式は，6 節の通りである．ユーザに入力させる必要のない内部的なパラメータの場合
は，type を省略する．default には，ページ表示時
やパラメータクリア時の初期値を指定する．size には，そのフォームの横幅を指定する．指定できる値はwhole，half，quarter，1 ∼ 12 の数値のいずれかである．数値を指定した場合は，横幅が n/12 のサイズになる．例えば，1 行に 3 つのフォームを配置したい
場合は，それぞれの size を’4’ と指定する．

7. 5 toolbar.js
ツールバーに表示するアイコンを設定する．このファイルを変更することで，ツールバーにボタンを追加することができる．WebCUI が提供する機能を実行するボタンは次のように設定されている．
export const toolbar = {clear : {icon : ’mdi - delete ’ ,type : ’ runFunction ’},history : {icon : ’mdi - history ’ ,type : ’ drawer ’ ,component : HistoryDrawer},
examples : {icon : ’mdi - alpha -e - box ’ ,type : ’ drawer ’ ,component : Ex amples Drawer},
files : {icon : ’mdi - file - multiple ’ ,type : ’ drawer ’ ,component : FilesDrawer},
variables : {icon : ’mdi - order - alphabetical ascending ’ ,type : ’ drawer ’ ,component : Variabl e sD ra w er},
sendReq : {icon : ’mdi - play ’ ,type : ’ runFunction ’ ,disabled : true}}

7. 6 variables.js
フォームに${...} の形で入力できる変数について，最初から定義しておきたい変数を設定する．
export const variables = {K : ’(λx .λy . x ) ’,
S : ’(λx .λy .λz . x z ( y z ) ) ’,
I : ’(λx . x ) ’,
O : ’(λx . x x ) (λx . x x ) ’,}K や S などのキーが変数名となる．
7. 7 doc.vue/documents/以下の.vue ファイルには，アプリケー
ションの使い方などを記述する．ファイル名は任意である．この.vue ファイルは HTML によって記述する．作成した.vue ファイルは，document.js にインポートする必要がある（7. 2 節を参照）．

クリックされた時に処理が実行されるボタンを追加する場合は，toolbar オブジェクトに

7. 8 index.vue
WebAPI へ パ ラ メ ー タ を 送 信 す る 前 に す

newButton : {icon : ’mdi - circle ’ ,type : ’ runFunction ’}

る 処 理 と ，送 信 後 結 果 が 返って き た と き の処 理 を/pages/index.vue の sendReq 関 数 内 にJavaScript によって記述する．sendReq 関数では，のようにしてアイコンを指定し，押された時の処理を/pages/index.vue の toolbarEvent 関数内に記述する．
toolbarEvent ( key ) {if ( key === ’ clear ’) {this . clear ()} else if ( this . toolbar [ key ]. type ===’ drawer ’) {this . openDrawer ( key )} else if ( key === ’ sendReq ’) {this . sendReq ()} else if ( key === ’ newButton ’) { // 追加
this . addLine ({ text : ’ newButton was clicked . ’ })}}3. 2 節で示したライブラリの axios 用いて WebAPI
へパラメータを送信している．
sendReq () {let vue = this// パラメータ送信前の処理はここに書く
axios. post ( this . config . baseUrl + ’/ ’ +this . config . apiFileName , this .
request ). then ( function ( response ) {// パラメータ送信後の処理はここに書く// WebAPI の出力結果を result に代入
let result = response . data// WebCUI の addLine 関数によって，// コンソールに result を出力
vue . addLine ([{ html : result }])}). catch ( function ( err ) {// 通信エラーが発生した場合は// エラーメッセージを表示する

vue . d i s p l a y C o n n e c t i o n E r r o r M s g ()console . error ( err )npm install})}

上記が行えたら，npm run dev コマンドによりローカルに開発用のサーバを建て，動作を試す．動作は，ブラウザから http://localhost:3000 にアクセス

7. 9 favicon.ico

することで試すことができる．問題がなければ，npm

favicon は favorite icon の略であり，Web ページ

run generate コマンドにより静的ファイルを生成し，のタイトルの左やブックマークをした際などに表示さWeb サーバの公開ディレクトリに配置する．

れるアイコンのことである．favicon.ico を書き換えることで，Web アプリケーションの favicon を変9 実例 2

更できる．

SOL [2] は，高階書換え系の合流性・停止性をチェッ

二階書換え系検証ツール SOL

クする CUI プログラムである．

7. 10 logo icon.png

Internatation Conﬂuence Competition [4] におけ

この画像ファイルは，図 2 の (a) の部分に表示される書換え系の標準フォーマット TRS 形式 (.trs) ファ

る，Web アプリケーションのロゴのうち，左に表示

イルや SOL 形式の Haskell プログラム (.hs)，およされるアイコンの画像である．config.js でアイコびチェックしたい性質を入力とし，検証結果を出力

ンの画像を指定するが，アイコンがない場合，省略すする．

ることも可能である．

WebCUI を用いて SOL の WUI を作成する実例を示す．なお，7 章で示した WebCUI に含まれるファイ

7. 11 logo text.png

ルのうち，大きく変更するものを示す．作成した SOL

この画像ファイルは，図 2 の (a) の部分に表示されの Web アプリケーション（図 5）は，以下の URL かる，Web アプリケーションのロゴのうち，右に表示されるテキストロゴの画像である．config.js でテら利用することができる．

http://solweb.mydns.jp/webcui/sol/

キストロゴの画像を指定するが，テキストロゴがない場合，省略することも可能である．その場合は，代わ

9. 1 conﬁg.js

りにアプリケーションの名前が表示される．

Web ア プ リ ケ ー ション の 各 種 設 定 を 行 う．

8 導入方法WebCUI の導入方法を示す．
まず，Node.js3 のインストールを行う．Node.jsのインストールをすることで，Nuxt.js も利用可能とconfig.js の内容を以下に示す．
export const config = {name : ‘SOL ‘ ,logo : {icon : ‘ logo_icon . png ‘ ,},なる．次に，WebCUI のリポジトリをクローンする．

WebCUI の Github リポジトリを次に示す．

https://github.com/NakamRay/WebCUI
クローンしたディレクトリ上で以下のコマンドを実行することで開発環境が構築できる．

3 https://nodejs.org/

baseUrl : ‘ http :// localhost ‘ ,apiFileName : ‘ sol . php ‘ ,messages : {initialMsg : [] ,c o n n e c t i o n E r r o r M s g : [{ text : ‘ An
error occurred while
communicating with the server . ‘}] ,readErrorMsg : [{ text : ‘ An error
occured while reading the file . ‘}]},co ns o le Lo c at ion : ’ right ’}baseUrl は，ここでは開発用に http://localhostとしている．このようにすることで，開発時にローカ
ルで Web サーバを用いて動作を試すことができる．

apiFileName は，sol.php とした．SOL は書き換
え系を記述したファイルのパスを引数にとるため，

WUI から受けとったパラメータの内容を一度ファイ
ルに書き出し，そのパスを引数とする処理を WebAPIで行う．また，ファイル形式や検証するプロパティによって条件分岐が必要となり複雑なため，sol.php の内容は本稿では省く．

consoleLocation には，コンソールの位置を指定する．ここに’top’ や’right’ などを指定することにより，WUI のレイアウトを変更することができる．

SOL では書き換え系を記述する縦長のテキストエリ
アをフォームとして用意するため，フォームのコン
ポーネントを縦長に確保できる’right’ に設定している．

9. 2 params.js
SOL の引数として WebAPI に送信するためのパラメータを設定する．SOL の引数には，書き換え系を記述したファイルのパスと，検証するプロパティ（CR，SN など）の 2 つがある．ファイルのパスを指定する必要があるが，Web アプリケーションの実装にあたっては，書き換え系が記述されたファイルを WUI から送信するのではなく，中身だけをテキストとして送信
し，WebAPI 側でファイルを生成してそのパスを引数として与えるようにする．そのため，WUI に必要なパラメータは，書き換え系を記述する rs，そのファイル形式を指定する form，検証するプロパティを指定する pro の 3 つと，ファイル名として使用するためのユーザの IP アドレス ip，ユーザがローカルの書
き換え系を記述したファイルを読み込むための fileの合計 5 つを params.js に記述する．params.js の内容を以下に示す．
file : {display : ’ File ’ ,type : ’ file ’ ,target : ’rs ’ ,default : [] ,size : ’ whole ’},
rs : {
display : ’ File body ’ ,type : ’ textarea ’ ,rows : 18 ,default : ’’,size : ’ whole ’},form : {display : ’ Form ’ ,type : ’ select ’ ,items : [{name : ’hs ’ ,display : ’ SOL (. hs ) ’,},{
name : ’trs ’ ,display : ’TRS ’ ,},{name : ’ haskell ’ ,display : ’ GHC Rules ’}],default : {name : ’ haskell ’ ,display : ’ GHC Rules ’},size : ’ half ’},
pro : {
display : ’ Check ’ ,type : ’ select ’ ,items : [{name : ’cr ’ ,display : ’CR ’ ,},{name : ’ cr_CBV ’ ,display : ’ CR ( CBV ) ’,},{
name : ’snG ’ ,display : ’SN ’},{
name : ’cri ’ ,display : ’WCR ’},],default : {name : ’cri ’ ,display : ’WCR ’},size : ’ half ’},
ip : {
default : ’0.0.0.0 ’ ,}file は，WebAPI に送信するためのパラメータではなく，ユーザが用意したファイルを読み込み，テキストエリアに表示させるためのフォームである．

target として rs を指定することで，ファイルを読み込むとその内容が rs に代入される．

rs の rows は，テキストエリアのテキストを何行まで表示するかを設定する．今回のように縦長のテキストエリアを用いる場合，config.js 内のconsoleLocation を right か left に設定すること
で，表示エリアを確保することができる．この実例では，consoleLocation は right に設定している．

form と pro はセレクトボックス（プルダウンメニュー）にしている．items には，選択させる要素を

図4

入力例となるファイル一覧

指定する．要素は，セレクトボックスに表示させるテ
キストと，WebAPI に送信するパラメータに分けて

9. 4 入力例のファイル群

記述できる．

SOL ではパラメータの入力例として，書き換え

IP ア ド レ ス は デ フォル ト で は 0.0.0.0 と し て系を記述したファイルが複数用意されている．これ

お き ，後 か ら 取 得 し て 更 新 す る ．こ う し た 処 理らをすべて examples.js に記述したり，ファイルをは/pages/index.vue に記述するが，本稿では詳細は

WebCUI のディレクトリ群に配置したりすると，入省く．

力の手間がかかったり，ファイルの更新や追加があった際に上書きや移動が必要になったりして，効率が9. 3 index.vue

悪い．そこで，5. 5 節に示すサーバ上のディレクト

SOL の実行結果を WUI のコンソールに出力する

リ内のファイルを入力例として一覧表示・代入でき際，前回の出力が残っていると結果が見にくい．そる機能を用いる．WebAPI と同じパスに files.php

こで，HTTP リクエストの送信前にコンソールをクを配置し，そこに入力例のファイルの置かれている

リアする処理を追加する．コンソールのクリアには，ディレクトリのパスを指定することで，図 4 のように

WebCUI が提供する clearConsole 関数を用いる．

WebAPI のドロワー上に一覧表示させることができる．ドロワー上でファイルを選択した際にその内容をsendReq () {let vue = this

どこに代入するかは，files.php の name にパラメー
タの名前を指定して決める．今回の実例では，以下のthis.clearConsole() // 追加
axios. post ( this . config . baseUrl + ’/ ’ +this . config . apiFileName , this .
request ). then ( function ( response ) {let result = response . data
vue . addLine ([{ html : result }])}). catch ( function ( err ) {vue . d i s p l a y C o n n e c t i o n E r r o r M s g ()console . error ( err )})}ように指定している．
array (’ name ’ = > ’rs ’ ,’ display ’ = > ’ arXiv \ ’20 ’ ,’dir ’ = > ’./ sol / hor / arXiv20 ’),array (’ name ’ = > ’rs ’ ,’ display ’ = > ’ SCP \ ’18 ’ ,’dir ’ = > ’./ sol / hor / SCPex ’),array (’ name ’ = > ’rs ’ ,’ display ’ = > ’ ConfComp \ ’18 ’ ,図5WebCUI で実装した SOL の WUI’dir ’ = > ’./ sol / hor / Cops ’),array (’ name ’ = > ’rs ’ ,’ display ’ = > ’ ICFP \ ’17 ’ ,’dir ’ = > ’./ sol / hor / JEX ’),array (’ name ’ = > ’rs ’ ,’ display ’ = > ’ Polymorphic ’ ,’dir ’ = > ’./ sol / hor / PolySOL ’),array (’ name ’ = > ’rs ’ ,’ display ’ = > ’ GHC Rules ’ ,’dir ’ = > ’./ sol / hor / Haskell ’)

やり取りを必要とする CUI プログラムである．We-

bCUI では，発展形としてこのようなプログラムのWUI も構築することができる．
詳細は本稿では省略するが，WebCUI を用いた

LCII の Web アプリケーションは以下の URL から利用することができる．

http://solweb.mydns.jp/webcui/lcii/

11 まとめと今後の課題
CUI プログラムの WUI の構築を支援するフレー
ムワーク WebCUI を開発し，実例を通して WUI の作成が少ないコーディング量で行えることを示した．

10 実例 3多相λ計算の対話型簡約器 LCII

LCII は，型無しλ計算と多相λ計算に対応する，1
ステップごとに簡約したい項を選択できる対話型簡約器である．引数として，型無しの場合はλ式を，多相λ計算の場合は Type Context，Term Context，λ
式を受け取る．

LCII はユーザとプログラムのインタラクティブな

今後の課題は，より詳細に WUI 実装ができるように機能を拡張することである．WebCUI は WUI 実
装にかかる手間の簡略化を目的としているため，開発者によるコーディングが少なく済む設計となっている．しかし，デメリットとして，用意された機能以外に拡張する場合には煩雑なコーディングが必要となることが挙げられる．例えば，10 章の実例で示した

LCII では，ユーザがあるコンソール出力をクリック

したら関数が実行されるようにコードを追加してい参 考 文 献る．こういった部分を一般化し WebCUI の機能とし[1] Google: Material Design. https://material.io/
design/.
[2] Hamana, M.: How to prove decidability of equational theories with second-order computation analyser SOL, Journal of Functional Programming,Vol. 29, No. e20(2019).
[3] NuxtJS Team: Nuxt.js. https://nuxtjs.org/.
[4] Project CoCo: Conﬂuence Competition oﬃcial site, 2020. http://project-coco.uibk.ac.at/
2020/.

て組み込むなど，多くのケースに対応できるように拡張を行っていく必要がある．また，コンソールの出力や履歴などは Web ページを閉じることによって破棄されてしまうため，これらの状態を Cookie などに保持できるよう改良することも課題である．