「インタラクションAPI」の版間の差分

2014年12月17日 (水) 01:55時点における最新版

インタラクションAPI とはPIONE（主にPIONE Webclient）においてインタラクティブ操作によるコマンドを実現するためにサーバとの通信を行うための操作です。インタラクティブ操作含むコマンドを作成する場合はこれらの操作を.htmlや.cgiファイルなどに記述する必要があります。

操作一覧

終了通知操作

インタラクティブ操作画面を終了します。メインに処理を返すときに必ず通知する必要があります。

ファイル取得操作

通知したファイル名(formの場合はactionに当たる)にて指定したCGIを実行します。実行できなかった場合はエラーとなります。また、この操作で取得するファイルは予めパッケージに含まれているファイルに限ります。それ以外のファイルは対象外ですので、ご注意ください。

ファイル作成操作

通知したファイル名でファイルを作成します。pione-contentに書き込むデータ内容を指定します。

ファイル削除操作

通知したファイルを削除します。

ファイル一覧操作

通知したディレクトリ内のファイル情報一覧をJSONデータで得ます。

返却されるJSONデータ

HTMLl文書による操作の記述方法

.htmlまたは.cgiにてこれらの操作を実行するためには下記のような記述を用います。

a hrefの記述例

a hrefを用いる場合は（場所）?pione-action=（操作名）へリンクするようにします。

<a href="?pione-action=finish">終了</a>

（場所）はワーキングディレクトリからの相対パスとなりますので、finishの場合は省略可能です。

<a href="AAA.txt?pione-action=delete">削除</a>

他の操作では（場所）にファイル名等を指定します。上記はファイルAAA.txtを削除する例です。

<a href="AAA.txt?pione-action=create&pione-content=abc">作成</a>

他のパラメータを付加する場合は&で繋いで記述します。上記はabcの内容でファイルAAA.txtを作成する例です。

form actionの記述例

form actionタグ内にてpione-actionの値を定義して、ボタン操作によってsubmitすると操作命令を送信することができます。この場合はfileなどの値も合わせて送信できるので、ファイル操作のときにはこちらを用います。

		<form action="./AAA.txt" method="post" enctype="multipart/form-data">
			<input type="hidden" name="pione-action" value="create"/>
			<button type="submit">作成（テキスト）</button>
			<input type="text" name="pione-content" value=""/>
		</form>

JavaScriptの記述例

レスポンスを受け取って、処理を行いたいときにはjQuery.getを使用する方法があります。

		<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
		<script type="text/javascript">
		function AAACreate(){
			jQuery.get("AAA.txt", {"pione-action": "create", "pione-content": "DDD"}, function(data) {
				alert(data);
			});
		}
		</script>

上記のようにすると、AAACreateを呼び出したときに"DDD"の内容でファイル"AAA.txt"を作成することができ、作成結果をアラートで表示します。

この関数は例えば下記のようにHTML文書内に記述すれば、ボタンを押したときに実行するようにできます。

		<input type="button" value="作成" onclick="AAACreate()">

また、ファイル一覧操作(list)の場合は戻り値がJSONデータですので、これを利用するためにはgetJSONを使用します。

	<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
	<div id="textDiv"></div>
	<script>
		var div = document.getElementById("textDiv");
		div.textContent = "";
		$.getJSON("./", {"pione-action": "list"}, function(data){
			$.each(data, function() {
				div.textContent += this.name +"\n";
			});
		});
	</script>

上記のようにすると、ワーキングディレクトリ内のファイル名一覧を表示します。