| 【概要】 |
IE9（インターネット・エクスプローラー第９版）がcanvas機能をサポートしたのを機に、
javaアプレットをhtml5に移行しました。この移行の過程で得た知識、ワザ、ノウハウ相当の事柄を移行メモ
として残したのが本ホームページです。移行したアプリは以下で、移行に要した期間は約２週間でした。 移行No. 1 季節時計 移行No. 4 WEB版_時差アナログ時計 移行No. 6 ローンと個人年金のシミュレーション 移行No. 7 厚生年金の繰上げ受給シミュレーション 追加 移行No. 8 レジ待ちシミュレーション（html5バージョン） 追加 移行No. 9 信号待ちシミュレーション（html5バージョン） 追加 移行No.10 タクシー待ちシミュレーション（html5バージョン） 追加の３つはオブジェクト指向プログラミングでしたので移行に更に２週間ほどかかりました。 |
| 移行メモ１ |
【ノウハウ丸見え】 canvas機能はjavascriptで記述して使うのですが、javascriptはソースが見えてしまいます。つまり、ロジック丸見え、 ノウハウ丸見えです。javaでは隠せました。この点はjavaに劣ります。 ロジックを秘密にしたい場合、javascriptでの公開は控えましょう。 |
| 移行メモ２ |
【座標系は同じ】 画面の左上が原点、右下がハイポジションの考え方はjavaアプレットと同じです。従いましてjavaでの 座標計算のロジックがそのまま使えます。これは有りがたかったです。約２週間で移行が済んだ のも、座標系が同じだった為と思います。 |
| 移行メモ３ |
【wait命令が無い】 図形をゆっくり描きたい場合があります。例えば利息の増え具合を棒グラフで示す場合ですが、 瞬時に描くよりもゆっくり描く方が臨場感を出せます。この様な場合、javaであれば、wait 命令で「間（ま）」を入れられたのですが、javascriptには、wait命令がありませんでした。 代わりに提供される命令が、setTimeout命令と、setInterval命令。 試行錯誤の末にこれらの命令を使える様になりましたが、気を付ける点があります。 wait命令は本当に待つのです、wait命令の所で待っていて、指定した時間が経過するまで先には 進みません。 でも、setTimeout命令やsetInterval命令は違うのです。遅延起動の関数をキック して、直ぐに先に進んでしまうのです。例えば、ループ回数が100回のループの中で、setTimeout命令を 発行すると、ループは瞬時に終わってしまいます。そして、100個の遅延起動の関数が瞬時にキック されるのです。 そこで注意点ですが、キック時点と関数実行時点でタイムラグがあるので、 変数の値が変わっている場合が有る点です。良くある間違いは ループの制御変数を関数の中で使う間違いです。関数実行時点ではループの制御変数は最終の値に なっていますから、意図した結果を得られません。注意しましょう。 尚、setTimeout命令と、setInterval命令の違いですが、setTimeout命令は「一回限り実行」の遅延起動 関数をキック。setInterval命令は「無限回くり返し実行」の遅延起動関数のキックです。 これらの使い分けですが、遅延時間が同じで良い場合はsetInterval命令、遅延時間を各々に変えたい場合は setTimeout命令でしょうか。小生のアプリではローンと個人年金のシミュレーション でsetInterval命令を、深呼吸ナビゲーターでsetTimeout命令を使っています。 この移行メモの長い文章を読むよりも、アプリのソースを見て頂いた方が理解が早いかも知れません。 |
| 移行メモ４ |
【図形のスタイル指定が二種類】 strokeStyle指定と、fillStyle指定。図形の輪郭、つまり図形の「縁取り」に対する指定がstrokeStyle、 図形の内側に対する指定がfillStyleなのだそうです。ですので、例えば塗りつぶした円弧を別の色で縁取りする場合、 縁取りの色はstrokeStyleで指定し、塗りつぶしの色はfillStyleで指定する事になります。でも常に二種類を指定 する必要はありません。表示に凝らない限り、矩形や文字は塗りつぶし指定だけでしょうし、線分は輪郭指定だけでしょう。 |
| 移行メモ５ |
【変数に型が無い】 文字と数値の区別どころか、整数と実数の区別すらありません。ですので、例えば、変数Ａに「10」、変数Ｂに「20」が 入っていた場合、Ａ＋Ｂの結果は「1020」となってしまう場合があります。これを避ける為には「parseFloat」関数を使用 して意識的に数値化する必要があります。 |
| 移行メモ６ |
【エラーを教えてくれない】 javaでは翻訳作業の結果として文法エラーを取得できましたが、javascriptでは翻訳作業が無いので文法エラーが分かりません。 文法エラーを知るツールも存在する様ですが、小生は最も原始的な以下の方法を採りました。 確認方法；怪しげなコーディング部分をカットしてＲＵＮさせるのです。変化があれば、カットした部分に問題が有った事になりますし、 変化が無ければ問題は別の箇所と判断できます。原始的ですが（翻訳作業が無いので）カットの結果が直ぐに得られる利点があります。 勿論、オリジナルのコーディングはカット前に保存しておく必要はありますが。 |
| 移行メモ７ |
【デバッグはalert文にて】 javaでは「System.out.println」文にて変数の値を確認していましたが、同様の作業に「alert」文が使えます。 ポップアップで表示されるので、大変に使い易いです。但し、公開前には削除する事をお忘れなく。 |
| 移行メモ８ |
【bodyタグでinit()呼び出し】 javaアプレットでは（自分だけかも知れませんが）init処理を記述してました。初期処理を行わせる為です。 htmlではhtmlファイルが呼び出された時に、任意の関数を実行できる機能が有ります（bodyタグの「onload」指定） ので、これを使って初期処理を指定すると、コーディングがすっきりします。 |
| 移行メモ９ |
【ＮＯＰ（ノーオペレーション）受け】 テキストボックスに文字が入力された時点、あるいはセレクトボックスから一つが選択された時点で 関数を呼び出せるのですが（selectタグやinputタグのonchange指定）、その関数はＮＯＰ （ノーオペレーション）でも良いみたい。 ＮＯＰと言う組み込む関数は無いのですが、function nop(){} の記述で簡単に作れる何もしない関数です。 入力された時点、或いは選択時点ではＮＯＰで受け、使う時点でチェックする手順。 少なくとも今回の移行では、この手順で問題ありませんでした。 |
| 移行メモ１０ |
【参考書】 以下の書籍を購入して知識を得ました。理由は薄い（約２００ページ）、安い（８００円）。 書籍名；情報演習13(新)JavaScriptワークブック 著 者；相澤 裕介 発 行；株式会社 カットシステム 以前、3千数百円の分厚い書籍を購入したのですが、読む気になれなかったので、安くて薄い本を探した所、 今回の書籍に出会いました。この本だけで移行できた訳ではありませんが、基礎固めには多いに役立ったと 感謝しております。 |
| 移行メモ１１ |
【オブジェクトは関数として定義】 ・オブジェクトは関数として定義 ・プロパティは関数の中の変数、 ・メソッドは関数のなかで更に関数として定義 がjavaと異なります。プロパティの参照方法やメソッドの呼び出し方法は同じでした。 言葉での説明は難しいので、興味ある方は今回移行したレジ待ちシミュレーション（html5バージョン）をご覧下さい。 javascriptですので、ソースが見えます。プログラムの中ではお客様をオブジェクトと見做し、「並べ」とか「前へ進め」などのメッセージをお客様に対して飛ばしています。 |
| 移行メモ１２ |
【niftyでは動かない】 小生は複数のプロバイダーの会員になっていて、それぞれでホームページを開設しているのですが、 niftyにアップロードした今回の移行バージョンは動きませんでした。表示はされるのですが、ボタンクリックが反応しません。 何が悪いのかわかりませんが、メモとして残しておきます。 補足；まったく同じものが別のプロバーダーでは動きます。 |
| 移行メモ１３ |
【２次元オブジェクトも使えた】 平面上の各点をオブジェクトとするプログラムを組んでみました。平面ですので２次元です。 オブジェクト名は「field」で、「強度(value)」と「傾き(grad)」と「長さ(lngth)」のプロパティを持たせました。 メソッドはありません。オブジェクト作成手順は以下。 手順１；２次元の配列を作成。 手順２；オブジェクトを定義。 手順３：２次元の配列にオブジェクトを割り当て。 興味ある方は２本の直流電流（同じ向き）による磁界の分布を覗いてみて下さい。 |
| 移行メモ１４ |
【Math.atan2の引数はｙが先】 物理のシミュレーションなどを作っていますと、角度の計算が頻繁に発生します。そんな時に便利な関数がMath.atan2でして、ｘ方向の長さとｙ方向の長さ を指定すると、角度を返してくれます。しかし、どなたも一度は間違えるのではないかと思われる事項がありますので、ここに載せました。それは「引数はｙが先」 の規則です。Math.atan2(x,y)ではなくて、Math.atan2(y,x)なのです。ご注意を！ 参考までにMath.atan2を使ったサンプルを以下に示します。 興味ある方はソレノイドによる磁界の分布を覗いてみて下さい。 |
| コンテンツ作成者の紹介 | 以上 |