児玉工房
2004 — Bytecode, running again

Java アプレット、
ふたたびブラウザで動く

Java アプレットは 2017年以降どのブラウザでも動きません。ですが 2004年に公開した .class ファイルはサーバに残っているので、 JavaScript で書いた JVM がそのバイトコードを読み、1命令ずつ解釈して実行しています。 下の 2本は、いま動いているものです。

プログラムの出どころ。2004年のページのうち 2本はアプレットとして公開されていて、.class がサーバに残っています ——それは当時のバイトコードそのものとして動いています。 残り 36本は講義ページで、プログラムは画面写真の中に写っています。そちらは写真からソースを読み取り、 javac に通して、同じ JVM で動かしています。いまのところ 36本中 18本ができていて、このページの一番下にあります。

Applet 01 — ml.Applet1

Standard ML on Java?

Java で書いた小さな ML 処理系。字句解析・構文解析・評価器が入っていて、let / val と四則演算が使えます。 式を書いて「実行」を押してください。まず「雛形」を押すとお手本が入ります。

19 classesclass major=46 (Java 1.2) Swing の部品 → 本物の DOM 部品

4つのボタンは javax.swing.JButton、入力欄は JEditorPane、出力欄は JTextArea で、 いずれも本物の DOM 部品に対応づけてあります。字句解析は java.io.StreamTokenizer で、 JDK の仕様どおりに書き直しました(「字句解析」で Number: 10.0 と出るのはそのためです)。

当時のアプレット・ページ(もう動きません) / そこからリンクしていた javadoc はサーバから失われています

Applet 02 — tiny.Applet1

仮想空間?

一人称視点の 3D 仮想空間。地図は vf.data をネットワーク越しに読み、 壁・天井・ボール・時計・ジャンプ台・スイッチといった部品は Class.forName で名前から作られます。 壁の時計は、いまの時刻を指しています。
絵の下にある赤い矢印 6個が操作ボタンです。押している間だけ進みます (左から 左を向く/左へ寄る/前へ/後ろへ/右へ寄る/右を向く)。

16 classesclass major=46 (Java 1.2) GridBagLayout → CSS gridvf.data をネットワークから読む

java.awt.Canvas は自分の <canvas> を持って自分で描き、GridBagLayout は CSS grid に写しています。 java.net.URL.openStream() が返すのは、アプレットを始める前に取っておいた地図です (この JVM は同期で動くので、あとから取りに行けません)。Class.forName のために部品クラスは先に全部読んでいます ——動的に読まれるクラスは定数プールに名前が出てこないからです。

ボタンについて。これは普通のボタンではなく、1個ずつが tiny.Can—— 自分で矢印を描く 30×30 の java.awt.Canvas です。押すとスレッドが立ち、 離すまで 5ミリ秒ごとに Main.virtualFamily() を呼び続けます。 2004年のバイトコードに最初から入っていましたが、この JVM が 「すでにアプレットに繋がっている入れ物に貼られた Canvas」しか描画対象に登録していなかったため出ていませんでした ——この6個は、あとから貼られる Panel の中に先に入るからです。直したうえで、 mousePressedmouseReleased も届くようにしました。

当時の javadoc(16クラス)当時のアプレット・ページ(もう動きません)

From the screenshots — 35 applets

画面写真から読み取って、動かしたもの

これらは .class として公開されたことがなく、残っているのは講義ページの JBuilder の編集画面を写した GIF だけです。1本ずつ画像から読み取って javac に通し、 同じ JVM で実行しています。ボタンは本当に効きます。

36本の講義ページから 35本が動きます。残り6本のうち2本(直線の描画・タートルグラフィックス)は、 別の週にもう一度出てくる同じプログラムなので、すでにここにあります。 あとの4本——JBuilderの起動/ラベルの生成/2次方程式の解/標準体重の計算——は コードの画面写真が無く、できあがった画面の写真しか残っていないので、読み取るものがありません。 写真に写っていないところ(部品の位置や大きさ)は、同じページにある実行画面の写真に合わせています。

線分の回転(問題11)

「回転」を押すたびに π/20 ずつ回ります。 出典: ex011.html

タートルグラフィックス(問題12)

向きを選んで「進む」。「初期化」で矢印を描き直します。 出典: ex012.html

ローン計算(問題13)

「初期化」→「1年間」を繰り返すと、年利4%が付いて返済が進みます。 出典: ex013.html

素数の計算(問題14)

エラトステネスの篩。1から入力値までの素数を並べます。 出典: ex014.html

繰り返し1(1〜n の和)

1+2+…+n を for 文で足し上げます。 出典: ite001.html

繰り返し2(n・n²・n³・√n の表)

DecimalFormat で桁を揃えて表にします。 出典: ite002.html

ユークリッドの互除法(問題15)

引き算だけで最大公約数を求め、途中経過を全部出します。2つめの見出しが「最大公約数」なのは当時のままです(実際は最小公倍数)。 出典: ex015.html

分数の計算(問題16)

通分して足し引きし、約分して答えます。真ん中のボタンで + と − が切り替わります。 出典: ex016.html

繰り返し3(約数)

2から20までの約数を並べます。 出典: ite003.html

素因数分解(問題17)

1003456 = 2*2*2*2*2*2*15679。当時の画面と同じ答えが出ます。 出典: ex017.html

簡単なソート(問題18・最小法)

「初期化」で乱数を10個作り、「ソート」を押すたびに1回ぶん最小法が進みます。赤い数字がいま見ている位置です。 出典: ex018.html

最大値と最小値(問題19)

「入力」で数を1つずつ足していき、「計算」で最大・最小を出します。 出典: ex019.html

文字列の検索(問題20)

動物の和英辞書。配列を順に見て一致を探します。シカの英語が beer(deer の誤り)なのは当時のままです。 出典: ex020.html

動的配列(問題21・お札と小銭)

支払金額を並べておいて「計算」。当時の画面と同じ 31・2・7・2・6・4・11・2・9 が出ます。 出典: ex021.html

モンテカルロ法(問題23)

先に「初期化」を押してください。「1 点」「100点」で乱数を打ち、四分円に入った割合から円周率を出します。 出典: ex025.html

リストボックスと文字列(問題24・星座)

誕生日を選んで「星座は」。この作例は jbInit が写真に全部写っていたので、部品の位置も当時の値そのままです。 出典: ex026.html

再帰定義(問題22)

再帰で 1〜n の和を求め、戻りがけに途中経過を出します。同じページには出力を再帰の前に置いた版も載っています。 出典: ex022.html

コッホ曲線(グラフィックス1)

「最初から」で1段目、「1段ふやす」で段を深くします。深くしすぎると線分が1画素未満になり、Point の整数丸めでつぶれます——当時のコードのままの挙動です。 出典: gex01.html

回転体を描く(グラフィックス3)

断面を Y 軸まわりに 36°ずつ回して回転体を作り、x-y/y-z/z-x の3面に投影します。このページは本文が失われていて、残っていたのは画面写真だけでした。 出典: exchange.html

回転体を回す(グラフィックス3)

「平面」で断面、「回転体」で立体。x/y/z を選んで「回転」を押すと、その軸まわりに 12°ずつ回ります。 出典: revolution.html

正多角形の応用(問題25)

頂点数を入れて「多角形」。「対角線」ですべての頂点を結びます。 出典: ex027.html

ソート1(最小法)

乱数300個を「初期化」で作り、「整列」で最小法。300本の棒が階段になります。 出典: sort001.html

ソート2(バブルソート)

同じ300個をバブルソートで。隣どうしの交換を SIZE 回まわします。 出典: sort002.html

ソート3(挿入法・5個)

5個だけで、挿入法を1回ずつ。赤い数字がこれから挿入する要素です。 出典: sort003.html

ソート4(挿入法・300個)

同じ挿入法を300個で。「挿入」1回につき1個ぶんしか進まないのは当時のままです。 出典: sort004.html

ボタンの生成とイベント(問題2)

3つのボタンで挨拶が変わります。 出典: ex002.html

時間の計算(問題3)

秒数を時・分・秒に分けます。3725秒 → 1時間1分5秒。 出典: ex003.html

トグルボタン(問題6)

押すたびに ON と OFF が入れ替わります。 出典: ex006.htm

一次直線の描画(問題8)

ax+by+c=0 を y=◯x+◯ に直して描きます。1・-1・10 で y = 1.0x + 10.0 ——当時の画面と同じ値です。 出典: ex008.html

半径を選んで円を描く(問題9)

右のコンボボックスで one〜four を選ぶと、その大きさの円を描きます。この作例も jbInit が写真に丸ごと写っていました。 出典: ex009.html

不定回数の繰り返し

1円が毎日倍になると10万円を超えるのは何日目か。17日目・131071円。 出典: ex014-1.html

いろいろな図形

線・矩形・楕円・弧を、色を変えて並べます。 出典: ex010-1.html

簡単な図形

円を61個ぐるりと並べ、3ビットで色を回します。 出典: ex010-2.html

タートルグラフィックス(2)

「初期化」のあと「進む」を繰り返すと、144°と-72°を交互に曲がって星形になります。 出典: ex010-3.html

ドラゴン曲線(グラフィックス2)

折り返しの向きを交互にして段を深くします。コッホ曲線と同じ骨格で、曲がる向きだけが違います。 出典: gex02.html

Lecture pages

残りは講義ページ(アプレットではありません)

これらは「JBuilder でこう作る」という手順を書いたページです。ソースは画面写真の中に写っているので、 1本ずつ画像から読み取って compile し直さないと動きません。ページ自体は当時のまま残してあります。

基本的なアプレット 16

グラフィックス 5

ソート 4

その他 11