Science Journal of Kanagawa University 22 : (2011) 短報自己再生型 HTML ページの On 属性フィールド内スクリプトによる構成法永松礼夫 A Construction Method for Self-Reproductive HT

Size: px

Start display at page:

Download "Science Journal of Kanagawa University 22 : (2011) 短報自己再生型 HTML ページの On 属性フィールド内スクリプトによる構成法永松礼夫 A Construction Method for Self-Reproductive HT"

しじんたかひ
5 years ago
Views:

$\n Title 自己再生型 HTML ページの On 属性フィールド内スクリプトによる構成法 Author(s) 永松, 礼夫 ; Nagamatsu, Leo CitationScience Journal of$

1 \n Title 自己再生型 HTML ページの On 属性フィールド内スクリプトによる構成法 Author(s) 永松, 礼夫 ; Nagamatsu, Leo CitationScience Journal of Kanagawa Univer Date Type Departmental Bulletin Paper Rights publisher KANAGAWA University Repository

2 Science Journal of Kanagawa University 22 : (2011) 短報自己再生型 HTML ページの On 属性フィールド内スクリプトによる構成法永松礼夫 A Construction Method for Self-Reproductive HTML Pages by Scripts in On Property Field 1,2 Leo Nagamatsu 1 1 Department of Information Sciences, Faculty of Science, Kanagawa University, Hiratsuka City, Kanagawa Japan 2 To whom correspondence should be addressed. lnag@kanagawa-u.ac.jp Abstract: The construction of self-reproductive programs is a well-known problem in computer science. To implement such programs in JavaScript, there are several points to discuss. First, considering the close relation between language and HTML page text, several definitions of the region of "source program" and "result" could exist. Second, the JavaScript language has many features to convet character strings into executable objects, and many possibilities can be selected. In this paper, we propose a method with scripts placed in the on property field of input tag elements. This enables the behavior of scripting programs to be less dependent on HTML browser characteristics. We also introduced a "launcher structure," which dynamically constructs the final form of the "self-reproductive script" from parts of functional script segments, and enables clear understanding of source code descriptions. We also discuss the merits and limitations of this method. Keywords: HTML pages, script programming language, JavaScript, Self-reproductive programs, dynamic program construction, on property 序論自己再生型プログラムはソースプログラムと実行結果が同一であるプログラムと定義できる元来はプログラミングパズルから発展したが自己再生オートマトンとの関連でも着目され様々のプログラミング言語での記述 1) が報告されているいっぽうスクリプト型のプログラミング言語である JavaScript 2) は HTML ページとの親和性が高くページ移動による画面更新をせずに HTML ページに動的な機能追加をする際に有用であるこの特徴を生かして Ajax やいわゆる web デスクトップや webos 3-5) ( ブラウザ内にデスクトップや文書編集のアプリケーションを実現するもの ) など HTML ページが持つ機能が動的に大きく変更される応用との関連で興味深い我々は JavaScript による自己再生型プログラム ( 自己再生型 HTML ページとも呼ぶ ) の作成を通じこのような状況でのプログラム構成方法について考察してきた JavaScript による自己再生型プログラムについて 6) の先行事例としては金田による報告があるこれは document.write により HTML ページを丸ごと入替える方法を用いている自己再生の定義におけるソースプログラムと実行結果をどの範囲に取るかについて HTML ページと JavaScript を組み合わせた環境ではいくつか選択肢がある我々は HTML ページ全体ではなくページを構成する階層構造 (DOM) の一つの要素に注目しその要素を単位とする自己再生型 HTML ペー 7) ジの研究を行ってきた本報ではこれまで課題であった (1) ブラウザに依存して動作が異なること (2) プログラムの記述に繰り返しが多く複雑で理解しづらく編集が煩雑なことの二点を解消する構成方法を提案するそのために (1) input タグ内の on プロパティ部に長めの Research Institute for Integrated Science, Kanagawa University

3 76 Science Journal of Kanagawa University Vol. 22 スクリプトを記述する (2) 第一世代では記述性のよい機能部品に分けた表現を用いそこから第二世代を生成し第二世代以降は複雑で可読性に劣る記述であるが同一の記述を生成できる形にするという手法を導入しそれに基づくプログラムの動作を確認した方法動的コード追加の方法 JavaScript における動的なコード追加 ( 動的に生成した文字列をスクリプトとして有効にする方法 ) には以下のように種々のものがある 1) eval: 文字列を式として評価する言語機能であり最も汎用的である 2) document.write:html ページを丸ごと入替えられる生成されたページにスクリプトが含まれていればそれも実行される 3) ページ階層 (DOM) の一部への追加 : 要素オブジェクトを createelement() で作成し DOM 階層に appendchild() により追加することで処理系がそこに含まれるスクリプトを有効にする ( 但しブラウザによる動作の差がある ) さらに (3) はスクリプト構成する文字列を書く場所に着目し以下のように細分できる a)div 要素を作成しその innerhtml 部に a1)script タグで囲んで書く a2)on プロパティ部を持つタグ ( 例えば input) を置きその on 部に書く b)script 要素を作成し b1) その src プロパティ部に b1a) 文字列としてスクリプトを書く b1b) スクリプトを格納した外部ファイルの名前を書く ( スクリプトで動的に生成した文字列を実行する方法ではないが別に置かれた.js ファイルを実行する一般的な方法であり比較のため挙げる ) b2) その text プロパティ部に書く c)input 要素 ( などの on 部を持つ要素 ) を作成しその on 部に書く制限これらの一部にはブラウザによって動作が異なる / 動作しない / 付加的な記述が必要などの制限がある昨年までの研究で用いていた (3a1) は Google Chrome で動作せず Microsoft Internet Explorer ではタグに <script defer=defer > の枠部分の追加が必要であったブラウザ依存が少ないのは (1),(2),(3a2),(3b2),(3c) である本稿では (3c) について可読性の高い記述を得る方法ついて述べる自己再生スクリプトの動作我々が扱うスクリプトではそれぞれの世代が単一の div 要素であってその中に一つのボタン (input タグで type が button であるもの ) があり ( 図 1a) その on 部にその世代のスクリプトがある初期状態で表示されるボタンをクリックすると新たなボタンが生成され ( 図 1b) そのボタンも同じ機能を持つという動作をする自己再生スクリプトの基本構成対象とする自己再生型 HTML ページの基本構成について述べる HTML ページにはクリックできるボタンとその動作を規定するスクリプトが含まれている (a) 世代 1 がある状態 (b) ボタンを押して世代 2 が生成された状態図 1. 実行画面の様子. ボタンの on 部にはクリックによって起動される関数のみを記述し実際の動作の詳細記述は script タグに囲まれた部分のなかのスクリプトで行う方式が一般的であり我々も当初はこの方式で行っていたしかし自己再生の為には次世代として出力する一つの要素の中がスクリプト部と HTML 部に分かれておりそれぞれを出力するための手順が煩雑であった ( 図 2) <div> <script> function foo(){ } スクリプト部を生成する記述 HTML 部を生成する記述 </script> <inout type=button on=foo();> </div> 図 2. 従来の構成. またボタンを生成する箇所についてほぼ同じ記述が繰り返されるため複数の箇所に整合性をもって同じ修正をする作業が煩雑で開発が難しいという問題があったまた文字列中で特殊文字を処理するエスケープについてアドホックに対応していた

4 永松礼夫 : 自己再生 HTML ページの On 内スクリプトによる構成 77 ためその処理も煩雑であった提案する改良点大きく三つの変更を行った 1) エスケープのための関数を定義して系統的に処理する 2) 同じ記述の繰り返しを避けるため第一世代は部品に分けた記述とし第二世代をその場で埋め込み処理などにより作成しながら出力することでそれ以降の世代は単独で自己再生可能なものにする 3) スクリプト部と HTML 部に分けずボタン内の on 部に複数行に渡るような複雑なスクリプトも書けることを利用するそれにより全体が HTML 部のみで構成されその内側の on 部に自己再生の処理スクリプトをすべて記述する方式 8) とする ( 図 3) <div> <inout type=button on=" 次世代を生成する記述 " > </div> 図 3.On 部に記述する構成. 自己再生スクリプトの手順我々が対象とするスクリプトでは自己再生の動作は次の三つの段階による方式を用いている 1) 文字列を定義する 2) その文字列内の特定の場所 ( 埋め込みマークと呼ぶ ) をその文字列自身で置換するつまり自身の一部に自身を埋め込む 3) 置換された文字列を出力する図 4 に示すように # を埋め込みマークとすると文字列はその左側と右側に分けられているここでマーク # を左側 # 右側で置換する埋込み前左側 # 右側埋込み後左側左側 # 右側右側図 4. 自分自身を埋込む手順. 変数 a を宣言しその値にある文字列を設定する操作は JavaScript では var a=" " ; と表せるその文字列に第二段階のような置換を行うには関数 repva が適切に定義されていれば repva(a) と表せその内容を出力する関数が appdiv() であるとする第一段階の結果が var a=" #" ; であるとき全体は var a=" # " ; appdiv(repva(a)); と表せるここで先頭から # の直前の二重引用符までを左側文字列 # の直後から末尾までを右側文字列 ( 枠で囲ってある ) とし # に埋込むように置換すると var a=" var a= " # " ; appdiv(repva(a)); ";appdiv(repva(a)); となり枠で囲った部分が繰り返す構造になるなおスクリプト中の "( 二重引用符 ) で開始した文字列は " で終端するので文字列内に " を記述する箇所は " に変えるエスケープ処理 ( 詳細後述 ) をしてあるためマーク # の前後 " は " になっているこれが実行されると文字列 a は var a="#"; appdiv(repva(a)); になってそれが置換された var a="var a= "# "; appdiv(repva(a));"; appdiv(repva(a)); が出力され同じものが得られて自己再生が達成できるエスケープ処理ここで用いる on 部の中のスクリプトで文字列を扱う場合は図 5 のようにエスケープ ( そのままでは扱えない文字を別の表現で記述すること ) の範囲を二重にする必要がある JavaScript での文字列は "( 二重引用符 ) で開始した場合に " で終端するのでこの文字列内で " を記述するには " を " に変える必要があるこれを文字列エスケープと呼ぶまた on 部分の文字列も "( 二重引用符 ) で開始した場合に " で終端するのでこの文字列内で " を記述するには " を " に変える必要があるこれを HTML エスケープと呼ぶ HTML エスケープの範囲 <input.. on="...var x="..." "...> 文字列エスケープの範囲 <input.. on="...var x="..." "...> 図 5. 二種類のエスケープ範囲. 実装詳細ライブラリを構成する関数これまで議論を簡略にするためいくつかの関数は定義ずみとしてきた純粋な自己再生を行うにはこれらの関数の定義もスクリプトの一部に明示的に書き込みそれを含んで同じ内容を次の世代に出力する必要がある以下ではそれらの関数について述べる ( 詳細は付録参照 ) 1) 元の HTML ページに要素を追加 : 関数名 appdiv: 新たな div 要素を作成しその内容は

5 78 Science Journal of Kanagawa University Vol. 22 引数で与えられた文字列としたものを DOM 階層に追加する 2) スクリプト中の文字列のためのエスケープ処理 : 関数名 escstr: ダブルクォート " で囲った JavaScript 文字列の中で特殊文字を表現するための処理であるはに " はを前置改行文字は r や n に変換する 3) HTML 文字列のためのエスケープ処理 : 関数名 eschtml: いくつかの文字をアンド記号による表現に書き換える & は & に " は &quot: に < は < に > は > に変換するなおこの二つの関数は置換を補助する関数 repreg を使用する 4) 変数 a にある文字列へ自身の埋め込む処理 : 関数名 repva: 引数で渡された文字列の中の # を文字列エスケープした引数文字列自身を " で囲んだものに置換する発射台による構成以下に各段階を示しながら発射台法によって次の世代を段階的に構成する手順を示す var core= "var a=#;@;appdiv(repva(a));"; ライブラリを含む定義に忠実な自己再生スクリプトを表現したものを core として作成するなお # は埋め込みマークであり repva 関数で自分自身を埋め込む際に使用しはライブラリ ( 前述の appdiv, repva, escstr, eschtml と補助関数 repreg) を埋め込む為のマークである core =core.replace("@",lib); そこにライブラリ部分を埋め込む var head= '<input type=button value="" on=" '; var tail=' ">'; ボタン (input タグ ) を記述した HTML のうち on より前と後の文字列を分割して head,tail として用意する var stra=head+eschtml(core)+tail; スクリプトが記述された core をボタンを構成する input タグの部品で挟む全体は HTML での記述になるで HTML エスケープ処理することが必要であるこれが次世代以降の文字列 a になる appdiv( repva(stra) ); 文字列 a についてその埋め込みマークに自身を埋め込んだものを div 要素としてページに追加する処理を行うこれにより第二世代が作成される討論実装したスクリプトはブラウザに依存せず on 部のみのスクリプトで自己再生動作を達成したただし現在の実装ではライブラリ部分を文字列に変換したものを別に変数 lib に用意しているそのため厳密には同じことを一度だけしか書かないことが達成できていないこれについては JavaScript の持つ tostring() メソッドによって定義済みの関数オブジェクトからソースコードの記述を得られるのでそれを利用すれば解決できるただし改行文字の扱いなどがブラウザにより異なるのでさらなる検討が必要である文献 1) 有澤誠 (1978) プログラミングレクリエーション - ソフトウェア実習のガイド -. 近代科学社. 2) European Computer Manufacturers Association (2009) Standard ECMA-262 ECMAScript Language Specification 3rd Edition. standards/ Ecma-262.htm 3) Taivalsaari A, Mikkonen T, Ingalls D and Palacz K (2008) Web browser as an application platform: the lively kernel experience. Sun Microsystems, SMLI TR: ) eyeos. 5) Gendai G and Xindong L (2010) Simple web OS system based on EXT framework and cloud computing, Intl. Forum on Internet Tech. and App. 2010: ) 金田泰 (1997) Web ページを自己再生産する JavaScript プログラム. 夏のプログラミングシンポジウム. 情報処理学会編. pp ) 後藤正 (2010) スクリプトによる HTML ページの世代交代自己再生プログラムの応用. 神奈川大学理学部情報科学科 2009 年度卒業論文. 8) 東方雄亮 (2011) JavaScript による自己再生プログラム on 内記述のみで作成する方式. 神奈川大学理学部情報科学科 2010 年度卒業論文. 付録関数 :appdiv: 要素を DOM 階層に追加 function appdiv(s){ var top=document.getelementbyid("rootid"); var elm=document.createelement("div"); elm.innerhtml=s; top.appendchild(elm); } 関数 escstr: 文字列エスケープ function escstr(ss){ ss=replreg(ss," "," "); ss=replreg(ss," ""," ""); ss=replreg(ss," r"," r"); return replreg(ss," n"," n"); } 関数 eschtml:html エスケープ function eschtml(ss){ ss=replreg(ss,"&", "&"); ss=replreg(ss," "", """); ss=replreg(ss,"<", "<"); return replreg(ss,">", ">"); } 補助関数 : 文字列 ss 中の正規表現 p1 にマッチするものを全て p2 に置換する. 前二つの関数で使用 function replreg(ss,p1,p2){ return ss.replace(regexp(p1,"g"),p2); } 関数 repva: 文字列中の # に自身を埋込む function repva(a){ return a.replace("#", eschtml('"'+escstr(a)+'"') ); }

Science Journal of Kanagawa University 22 : 75-78 (2011) 短報自己再生型 HTML ページの On 属性フィールド内スクリプトによる構成法永松礼夫 A Construction Method for Self-

\n Title 自己再生型 HTMLページのOn 属性フィールド内スクリプトによる構成法 Author(s) 永松, 礼夫 ; Nagamatsu, Leo CitationScience Journal of Kanagawa Univer Date 2011-06-30 Type Departmental Bulletin Paper Rights publisher

Science Journal of Kanagawa University 22 : (2011) 短報 自己再生型 HTML ページの On 属性フィールド内スクリプトによる構成法 永松礼夫 A Construction Method for Self-Reproductive HT

Science Journal of Kanagawa University 22 : (2011) 短報自己再生型 HTML ページの On 属性フィールド内スクリプトによる構成法永松礼夫 A Construction Method for Self-Reproductive HT