ノート/Webアプリへの道のり

サイトトップ

ノート
データ処理
├マイニング
├バスケット解析
├バスケット解析をＲで
├図書貸出をＲで
├モデルクラスタリング
└
テキストマイニング
├テキストマイニングTM
├TMとシソーラス
├PubMedをTM
├TMとMeSH
├TMとNLTK
├テキストマイニングとtagger
├医薬品添付文書ＤＢ
├論文の処理1
├剽窃１
├Bing検索
└
分子進化学
├分子進化学
└
Pythonと論文アクセス
├Pythonを使ってみる
├PythonでPubMed
├Pythonで...続き
└
Macメモ
├Script

&ref(): File not found: "favicon_story.txt" at page "ノート/ノート";

自信ないので
├Winのバッチ
│├スクリプト入門
│├バッチファイル
│├SETコマンド
│├自分のメモ
│└
└

メニュー編集

Webアプリへの道のり †

↑

画面表示 †

たとえば、これをまねしようと思うと、画面をうまくレイアウトして表示しなければならない。方法には、古くはTABLEタグを使う手があるが読みにくい・書き直しにくい、という問題がある。もう１つの方法は、スタイルシートでpositionなどを使う方法がある。表示環境によって崩れるという問題があるが、工夫次第でかなり防げるということだ（CSSによる崩れない段組）。これを第１候補にしたい。
CSSの概論については、たとえばスタイルシートの基本参照）。

フレームでなくて画面分割をしようとすると、スタイルシードでがんばることになる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="ja">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=shift_jis">
<style type="text/css">
*{margin:0; padding:0;}
body{background-color:#ddd;width:900px;}

#my_header{width:100%;border-bottom:2px solid #fff;background-color:#ccb; height:50px;}
#my_footer{width:100%;clear:both;background-color:#ccb;border-top:2px solid  #fff;text-align:center; padding:1em 0;}

.contents p{margin:1em 0;}
li {list-style:none;}
h1{padding-left:20px;}
textarea {font-size:80%;}
table.tab1 {border-spacing:10px 4px;}
td.td1 {border:1px #333 solid; text-align:right; width:50px;}
table.tab2 {background-color:#bbb; font-size:80%; width:350px;}
table.tab3 {background-color:#fff; font-size:80%; width:350px;}
td.td3 {background-color: #ff0;}

#my_left {background-color:#d6d6bb;}
#my_rights {background-color:#ddd6bb;}
#my_leftupper{padding:1em 0 2em 1em;border:0px solid #fff;border-bottom:1px solid #fff}
#my_leftlower{padding:1em 0 2em 1em;border:0px solid #fff;}
#my_rightupper{padding:1em;border-left:1px solid #fff;border-bottom:1px solid #fff}
#my_rightlower{padding:1em;border-left:1px solid #fff;}
</style>

<TITLE>CASL Simulator</TITLE>
<meta http-equiv="content-style-type" content="text/css">

<style type="text/css">
<!--

#my_left{position:absolute; left :0; top: 52px; width:450px;}
#my_right{margin-left:450px;}

--></style>
</head>

<body>
<div id="my_header"><h1>CASL Simulator</h1></div>

<div id="my_left">

 <div id="my_leftupper">
  <FORM action="mytest.php" method="post">
  <P><TEXTAREA rows="20" cols="20" name="sourceprogram">プログラム 
  </TEXTAREA></P>
  <P><INPUT type="submit" name="assemble" value="assemble">
     <INPUT type="submit" name="step" value="step"></P>
  </FORM>
 </div>
 <div id="my_leftlower">
  <table class="tab1">
   <tr><td>PC</td><td class="td1">0008</td><td>IR</td><td class="td1">3423</td><td></td><td></td></tr>
   <tr><td>GR0</td><td class="td1">0008</td><td class="td1">0303</td><td class="td1">2145</td><td class="td1">4426</td><td></td></tr>
   <tr><td>GR4</td><td class="td1">9753</td><td class="td1">8642</td><td class="td1">1212</td><td class="td1">6666</td><td></td></tr>
   <tr><td>ZF</td><td class="td1">1</td><td>SF</td><td class="td1">1</td><td>OF</td><td class="td1">0</td></tr>
  </table>
  <p>Memory</p>
  <table class="tab1">
   <tr><td>0000</td><td class="td1">0008</td><td class="td1">3423</td><td class="td1">2222</td><td class="td1">4343</td></tr>
   <tr><td>0008</td><td class="td1">0008</td><td class="td1">3423</td><td class="td1">2222</td><td class="td1">4343</td></tr>
   <tr><td>0010</td><td class="td1">0008</td><td class="td1">3423</td><td class="td1">2222</td><td class="td1">4343</td></tr>
   <tr><td>0018</td><td class="td1">0008</td><td class="td1">3423</td><td class="td1">2222</td><td class="td1">4343</td></tr>
   <tr><td>0020</td><td class="td1">0008</td><td class="td1">3423</td><td class="td1">2222</td><td class="td1">4343</td></tr>
   <tr><td>0028</td><td class="td1">0008</td><td class="td1">3423</td><td class="td1">2222</td><td class="td1">4343</td></tr>
   <tr><td>0030</td><td class="td1">0008</td><td class="td1">3423</td><td class="td1">2222</td><td class="td1">4343</td></tr>
   <tr><td>0038</td><td class="td1">0008</td><td class="td1">3423</td><td class="td1">2222</td><td class="td1">4343</td></tr>
  </table>
 </div>
</div>

<div id="my_right">
 <div id="my_rightupper">
  <div class="contents">
   <table class="tab2">
    <tr><td>text text text text text text</td></tr>
    <tr><td>text text text text text text</td></tr>
    <tr><td>text text text text text text</td></tr>
    <tr><td>text text text text text text</td></tr>
    <tr><td>text text text text text text</td></tr>
    <tr><td>text text text text text text</td></tr>
    <tr><td>text text text text text text</td></tr>
    <tr><td>text text text text text text</td></tr>
    <tr><td>text text text text text text</td></tr>
    <tr><td>text text text text text text</td></tr>
    <tr><td>text text text text text text</td></tr>
    <tr><td>text text text text text text</td></tr>
    <tr><td>text text text text text text</td></tr>
   </table>
  </div>


 </div>
 <div id="my_rightlower">

  <div class="contents">
   <table class="tab3">
    <tr><td>text text text text text text</td></tr>
    <tr><td>text text text text text text</td></tr>
    <tr><td class="td3">text text text text text text</td></tr>
    <tr><td>text text text text text text</td></tr>
    <tr><td>text text text text text text</td></tr>
    <tr><td>text text text text text text</td></tr>
    <tr><td>text text text text text text</td></tr>
    <tr><td>text text text text text text</td></tr>
    <tr><td>text text text text text text</td></tr>
    <tr><td>text text text text text text</td></tr>
    <tr><td>text text text text text text</td></tr>
    <tr><td>text text text text text text</td></tr>
    <tr><td>text text text text text text</td></tr>
    <tr><td>text text text text text text</td></tr>
    <tr><td>text text text text text text</td></tr>
    <tr><td>text text text text text text</td></tr>
    <tr><td>text text text text text text</td></tr>
    <tr><td>text text text text text text</td></tr>
    <tr><td>text text text text text text</td></tr>
    <tr><td>text text text text text text</td></tr>
   </table>
  </div>
 </div>
</div>

<!--<div id="my_footer"><p>FOOTER</p></div> -->

</body>
</html>

↑

PHPの向う側に、標準入出力を持つＣ言語のプログラムを走らせる †

今考えているCASLシミュレータ（OpenCASL Linux版）では、シミュレータ起動後にキーボード（標準入力）からコマンドを与えて、ステップ実行させる。毎回レジスタが戻される。またメモリ値はコマンドを与えて読み出す。

このためには、標準入出力を持つプログラムをPHPの向う側で走らせるテクが必要になる。それは、proc_openで実現できる。このマニュアルページに載っている例は

<?php
$descriptorspec = array(
   0 => array("pipe", "r"),  // stdin は、子プロセスが読み込むパイプです。
   1 => array("pipe", "w"),  // stdout は、子プロセスが書き込むパイプです。
   2 => array("file", "/tmp/error-output.txt", "a") // はファイルで、そこに書き込みます。
);

$cwd = '/tmp';
$env = array('some_option' => 'aeiou');

$process = proc_open('php', $descriptorspec, $pipes, $cwd, $env);

if (is_resource($process)) {
    // $pipes はこの時点で次のような形を取っています。
    // 0 => 子プロセスの stdin に繋がれた書き込み可能なハンドル
    // 1 => 子プロセスの stdout に繋がれた読み込み可能なハンドル
    // すべてのエラー出力は /tmp/error-output.txt に書き込みされます。

    fwrite($pipes[0], '<?php print_r($_ENV); ?>');
    fclose($pipes[0]);

    echo stream_get_contents($pipes[1]);
    fclose($pipes[1]);

    // デッドロックを避けるため、proc_close を呼ぶ前に
    // すべてのパイプを閉じることが重要です。
    $return_value = proc_close($process);

    echo "command returned $return_value\n";
}
?>

であるが、この中の

fwrite($pipes[0], '<?php print_r($_ENV); ?>');

を他のもので置き換えるために、「//」でコメントアウトしたところ、うまくいかなかった。結局、

/* fwrite($pipes[0], '<?php print_r($_ENV); ?>'); */

の形でうまくいった。厄介であった。

で、任意のＣプログラムを実行する環境として、

<?php
$descriptorspec = array(
   0 => array("pipe", "r"),  // stdin は、子プロセスが読み込むパイプです。
   1 => array("pipe", "w"),  // stdout は、子プロセスが書き込むパイプです。
   2 => array("file", "/tmp/error-output.txt", "a") // はファイルで、そこに書き込みます。
);

$cwd = '/tmp';
$env = array('some_option' => 'aeiou');

/*$process = proc_open('php', $descriptorspec, $pipes, $cwd, $env);*/
$process = proc_open('/home/foo/src/halloworld', $descriptorspec, $pipes, $cwd, $env);

if (is_resource($process)) {
    /*fwrite($pipes[0], '<?php print_r($_ENV); ?>');*/
    fwrite($pipes[0], 'ABC');
    fclose($pipes[0]);
    print( "<p>Returned: <br>" . stream_get_contents($pipes[1]) . "</p>" );
    fclose($pipes[1]);

    // デッドロックを避けるため、proc_close を呼ぶ前に
    // すべてのパイプを閉じることが重要です。
    $return_value = proc_close($process);

    echo "command returned $return_value\n";
}
?>

のようなものが動くことが分かった。裏に置いたＣプログラム（/home/foo/src/halloworld）のソースは、

#include<stdio.h>
main() {
  char buf[80];
  fgets(buf, sizeof(buf), stdin);
  printf("Hallo. This is %s\n", buf);
}

のようなものである。

↑

内部状態を持つバックエンドプログラムとWebページ †

さて、今考えている「シミュレータ」のＣプログラムは、メモリやレジスタ値を内蔵しており、外部からの「ステップ実行」コマンドによって実行を進める。つまり、シミュレータは内部状態を持つ。

Webは状態を持たない（ステートレス）ことが前提である。原則としてCGIプログラムはSubmitボタンを押すごとに実行され、表示をして終了する。次の画面による実行へつながる内部状態は、保持できない。

であるから、シミュレータを（内部状態を持ったままで）動かすためには、工夫が必要になる。

第１の方法として、状態を持つプログラムをバックエンドで実行させておき、たとえばネットワークインターフェースを介してコマンドを送る。一般に複数のユーザが１つのサーバーを使うことになってしまうので、セッションを区別する必要がある。つまり、サーバー内ではセッションごとに内部状態を保持する。Webからはセッションを識別子としてサーバーにアクセスし、入力を送り出力を取り出す。セッションごとに別のサーバーを起動することも可能だが、その場合は識別子としてサーバーのID（たとえばプロセスID）をもって区別することになる。

フロントエンドにあたるPHPプログラムでは、セッションを保持し、そのセッションとバックエンドサーバーでのセッションとを同一にするか何らかの表で関連付けておく。
第２の方法として、シミュレータから内部状態を取り除いてしまう。内部状態はWeb画面とのやり取りのたび毎に、たとえばhidden INPUTとして保持する。シミュレータの場合、内部状態はレジスタ（ＰＣ、ＰＳＷ等を含む）値とメモリ内容であるから、これらを毎回画面とやり取りして保持する。シミュレータ自体は、内部状態と外部入力をインプットとしてステップ演算し、結果の内部状態と外部出力を画面側に返す。

この方法の欠点は、hidden INPUTが複雑になること、画面ごとの転送量が多くなることが挙げられるが、シミュレータの場合はレジスタ値やメモリ内容はどうせ画面に表示するので、hiddenである必要が無くなる。

いずれにしても、バックエンドのシミュレータのプログラムはかなり書き直す必要があり、今回のCASLシミュレータ程度だとゼロから書き直すのとあまり変わらないかもしれない。たとえば第２の方法だと、シミュレータ（ステップ実行）をPHPで書き直してもよいかも知れない。

↑

いろいろ考えた結果 †

今回は、かなりシミュレータを書き直すことになるので、それならJavaのシミュレータを見つけたほうが簡単だろう。アプレットではないにしても、ダウンロードして実行すれば、たいていのマシン環境で実行できる。

ただ、他のバックエンドプログラム、たとえば生命科学系の処理やシミュレーションの場合、同じようなことがしたくなるかもしれない。そのとき、状態を持つか持たないか、持たせるか持たせないかの判断が必要になりそうだ。また、PHPからCプログラムの起動、Web画面の分割構成などの知識は有益だろう。

最新の5件

Webアプリへの道のり †

画面表示 †

PHPの向う側に、標準入出力を持つＣ言語のプログラムを走らせる †

内部状態を持つバックエンドプログラムとWebページ †

いろいろ考えた結果 †