変奏現実

パソコンやMMORPGのことなどを思いつくまま・・・記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。

この画面は、簡易表示です

javascript

JavaScriptでクラス定義

JavaScriptにclassというモノは無いけど、
クラスっぽくていいから使いたい時もある。
参考1(Google流)参考2参考3
コンストラクタは 普通に関数の文法で

function aaaa (param) {
this.p = param;
}

と書いてもいいけど、
ドコかで名前aaaが重なると、かなり厄介なことになるので、

var aaa = function (param) {
this.p = param;
}

と、後でパッケージする気が起きやすい書き方にした方が良さそうだ。
クラスの継承に関しては、function を作成すると 自動生成される function の prototype を使って
Object.setPrototypeOf(子クラス.prototype, 親クラス.prototype);
※2015/04/09 現在、リンク先はまだ和訳されていません。
が良さそう。
 
 



【JavaScript】 IFRAME

うかつに使うとCSSやコードページが設定できず痛い思いをするIFRAME。
サンプル
urlを打ち込んで【Add IFRAME】ボタンを押すと小窓が開く。
urlが空ならTextAreaが出てくる。
localStrageでurlもTextAreaの中身も覚えるので便利に見えるかもしれない。
かといって、いつまでの残っていると困るので、All IFRAME erase で全部忘れる。



【JavaScript】Selectors API

たまにjQueryを使うようになると、画面の中の必要なデータをJSON形式にまとめて送信するのが一番楽で、初期表示もJSON形式にまとまったデータを展開する方が簡単だ。こうなると、servletとJavBeanとJSPとタグライブラリィを使って器用にHTMLをでっち上げるMVPなんて「手間がかかる無駄飯食い(GUI)」でしかない。
MVPってホスト全盛だった前世期の『構造化プログラミング』であって、今風のアジャイルな思い付きの「変更後しか画面に出てなかったけど、変更前と変更後の内容を併記する」という様な、ネストの差替えが伴う仕様変更には滅法弱い。
Beanは丸ごと下位のクラスに押し出して、元のクラスのメンバーにし、servletは丸ごとリファクタリングしてループすればいいけど
画面に直結するJSPはサクっと直すとダラダラと長いコードにしかならないので書き直すしかないのは、ホスト全盛だった前世期と同じだ。
jQueryは、IEを使うと、JavaScriptでデータを展開した結果のHTMLを見るのは難しいけど、FireFoxでCtrl+Aで全画面を選択し右クリックで「選択した部分のソースを表示(E)」すれば見れる。
しかし、JUnit系のテストツールでは、HttpRequestが送ったHTMLコードを保存する様で、画面に展開した後のHTMLはファイルとして残らない。
ところが、jQueryを使えば、「classごとにイベントをまとめて登録することが常識」と云うことで押し切れる世の中であるが、何でもかんでも「classごとにイベントをまとめて登録すること」になってしまうところが『常識』の恐ろしい処でもある。(笑
そのjQueryを使わなくても、ブラウザのSelectors APIで十分になったらしい。
既存のAPIとの違いと云えば、 APIに渡すパラメータに疑似クラス名が使え、API で返される内容がリストからイテレータになっている様で、~. style.bold = true;  参照すれば、要素の分だけ、勝手にループしてくれるので、簡単なことは簡単に書ける。
但し、boldもitalicもunderscoreもfontのポイントも変えたいとか色々変える場合は不向きな感じがするから、cssを絡めクラス名を差し替える様な「短いコード」にした方がいいだろう。
「短いコード」で十分なら、jQueryも特に使わなくても良さそうだ。※非同期通信は使用しない条件付きで…
そうすることで、FireFoxでオブジェクトを選択してソースを見れば、classの内容で、仕様通りのクラス名に変わっているハズなので、デバッグが捗るというものだ。
振り返ってみると、Java系WEB Serverの仕様って、本当に「黒歴史」ばかりなのには・・・驚きを隠せない。



[JavaScript] LocaleStrageのサンプル

長らくブラウザのクライアントで記録するものと云えばクッキー(cookie)しかなかった。
記憶容量も4KBぐらいまでだった。
今ではLocalStrageという変数がdocumentのurlのドメインごとに記憶してくれる。
でも5MBぐらいまでらしい。
なので、サンプル(あて名書き)を作ってみた。 あて名を書くだけのメモ。
※htmlファイルをパソコンの同じフォルダにダウンロードしても使用可能。ただウチでは「iden_bs.js」というファイルが混入してくる。
先のJSFIDDLEも、一見サーバーに保持している様に思えるが、実はLocalStrageでセルの値や式を保存している。
パソコンの方で情報を記憶しているので、ネットが繋がらなくても、暫くの間は記憶してくれる。
でも、いつ何時消えてしまうか判らないので、この手のモノは皆CSVの出力と読込みは必須な気がするのでCSVの出力と読み込みも付けてみた。
CSVを読込むとLocalStrageを全部設定しなおすので列名は好きに替えられるので使い道は案外あるのかもしれない。
とは云え、LocalStrageのセキュリティ上の安全性はよく解りません。
大切な情報のメモには使えませんね。(大笑
また、CSVをSJISで出力するにはコード変換テーブルを組み込まないと無理というのが定説らしいけど、コード変換テーブルさえ作れれば何とかなる。それが あて名書き2 だ。
トンでもなく量のコード表をjsファイルに埋込むのが嫌で、JavaScriptでUint8ArrayとUint16ArrayでSJISのコード表を作ってみた。
これをBlob形式にして JavaScriptのFileReader .readAsText(b,”SJIS”) で読取らせれば 何気にUTF16テキストに変換してくれるので、元のSJISコード順さえ覚えているなら、Key:UTF16コード、Value:SJISコードなマップを作れる。
うん、readAsTextで指定できる文字エンコーディングには

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

のcharsetで指定できるものなら使えるらしいので、EUC や JIS も使えそう。
先のマップを使ってUTF16のテキストをUint16Arrayに変換すれば、バイナリーデータをダウンロードするコードでSJISコードページのテキストファイルに保存できる。但し、文字サイズが16ビット固定になってしまうハズなので・・・MS Office 365のEXCELで読めるけど古いバージョンでも読めるのかは不明。
またCSVのデリミタはタブ(\t)からカンマ(、)に変えてある。
しかし、数万回ループするので、ローコストなパソコンやスマフォでは、あて名書き2 は開かない方がいいかもしれない。
一応、SJISコード表をダウンロードするコードも残して置いたのでPopupWindowに挿しこんで自動的に読むようにしてみたり、コード表をLocalStrage に保存しておけば、2度目に開いた時は遅くないかもしれない。
SJISは、使用不可な文字領域が多いので、8ビット版 と 2区画(8140~9ffc  、e040~effc、下位バイトが7fの場合を除く )の 16ビット版 で作成したけど、足りないのかもしれない!(大笑
追加
あて名書き3

  • IFRAMEにテーブルを収めてみた。※関連ソースは思いっきりFireFox系なのでIEやChromeでは動かなさそう。
  • ダウンロード用のコード変換部分をsjis.jsに分離。

document.createElementでIFRAMEにタグを書いても
IFRAMEの中は
<html><head></head><body></body></html>
という文字列にしかならなかったので、

iframe.contentDocument.open();
iframe.contentDocument.write(' ');
iframe.contentDocument.close();

でHTMLの基本的なタグを作ってもらう。
でも、dummy.htmlの<link rel=”stylesheet” href=”atenagaki.css” type=”text/css” /> が無駄になり、JavaScriptでまんま追記する。

var link = document.createElement('link');
link.rel='stylesheet';
link.href='atenagaki.css';
link.type='text/css';
iframe.contentDocument.querySelector('head').appendChild(link);

無駄すぎる。

  • 半角文字が空白+半角のままだったので、無駄な空白を取った。
  • CSV読み込み時、CSVのデリミタ(カンマかタブ)、改行(CrLf,Lf,Cr)を判定。

後はUTF8やSJIS、EUCを自動判定できればいいかな。




top