後1年ちょっとで定年になるのを期に、このブログを再開したいと思います。以前、YawdbaというWebデーターベースシステムを開発していることを書きましたが、その後のWeb開発状況が変わってきたので、Yawdbaについて方向性が変わってきています。
以前の話では、javaのサーブレットで、ブラウザに返すHTMLによりテーブル表示など行うようにしていましが、Ajaxの有効性が判明したり、その後HTML5が公開されたことから、Web画面表示をHTMLベースからJavascriptベースの変えようと思っています。
そのため、Yawdbaで表示する数値フィールドや日付フィールド、テーブル表示などをjavascriptの関数で生成できないか考えています。そこで、javascriptによるWeb部品生成プラットフォームを開発しています。
4.1.Yawdba JavaScript Toolにインタフェース仕様を書き出しました。できれば、グラフ表示のプラットフォームなどについても開発したいと思います。良かったらご覧ください。
また、このブログでは、今までコンピュータに関する話を多く書いていましたが、それ以外の話題でも書いていきたいと思います。よろしくお願いします。
2013年1月4日金曜日
2011年1月12日水曜日
ダイアログ画面を表示するJavaScriptツールキットを作りました。
通常、モーダルダイアログを表示するには、showModalDialog等を使って表示することになりますが、ブラウザ毎に動作が微妙に異なるケースがあります。そこで、Htmlのdivタグを使って、ダイアログ画面を表示するツールを作ってみました。
次のように、様々なブラウザからでも同一のインターフェースを用意するYawdbaBrowdwerクラスのインスタンスhywを用意した後、このhywインスタンスやタイトル名、ダイアログのサイズを引数にして、YawdbaDialogクラスインスタンスのdialogを作成します。
dialog.show(100,200);
詳しくは、私の「Webデータベース開発のもう一つのアプローチ」サイトの「Yawdba JavaScript Tool」をご覧ください。
サンプルも掲載しています。
次のように、様々なブラウザからでも同一のインターフェースを用意するYawdbaBrowdwerクラスのインスタンスhywを用意した後、このhywインスタンスやタイトル名、ダイアログのサイズを引数にして、YawdbaDialogクラスインスタンスのdialogを作成します。
var hyw = new YawdbaBrowser();
var dialog = new YawdbaDialog(hyw, 'YawdbaModal', 'タイトル', 200, 400);
ダイアログを表示するには、dialogインスタンスのshowメソッドを呼び出します。dialog.show(100,200);
詳しくは、私の「Webデータベース開発のもう一つのアプローチ」サイトの「Yawdba JavaScript Tool」をご覧ください。
サンプルも掲載しています。
2010年12月30日木曜日
JavaScriptのツールキット開発を始めました。
久しぶりの投稿です。
現在、VMLエディターをSVGでも利用できるように改造中です。この改造にあわせて、JavaScriptでのツールキット開発も行っています。
今まで、JavaScriptは、ブラウザ組み込みのスクリプト言語としてしか思っていませんでしたが、JavaScriptでのクラス定義が可能なので、使いやすいツールキットの開発をはじめてみました。
クラスを利用すると、ツールキットとして使いやすいインタフェースが提供できる点が大きなメリットですが、JavaScriptの欠点としては、ブラウザ毎で仕様が異なることにあります。
そこで、各ブラウザ毎の動作を自動的に判断するクラスとメソッドを用意する予定あり、大体次のようになります。
/* UnifiedBrowderクラス内で、ブラウザのタイプを調べ、各メソッド処理を決定します。作成しれたクラスインスタンスは、myUBに代入されます */
myUB = new UnifiedBrowser();
/* myUBインスタンスのメソッドであるgetMouseButtonを呼び出します。getMouseButtonでは、各ブラウザ毎に異なる処理により左ボタン・右ボタン(例えば、左ボタンなら'L', 右ボタンなら'R')を返却します。このようにすることで、ブラウザ間で異なる処理を一つのメソッドで処理します。*/
var button = myUB.getMouseButton(e);
これだけだと、クラスまで利用せずに、関数で処理すれば良いように思えますが、関数だと、その都度簡単に関数を沢山定義することになり、収集がつかなくなってしまいます。クラスを使うと、このようなブラウザ依存を解消する処理群をメソッドとして、一つのクラスの配下にまとめることができるのが一番のメリットです。
そこで、クラスを有効に活用したJavaScriptツールキットを開発することにしました。Yawdbaデータベースシステムも、このJavaScriptツールキットを利用して構築したいと思っています。
現在、VMLエディターをSVGでも利用できるように改造中です。この改造にあわせて、JavaScriptでのツールキット開発も行っています。
今まで、JavaScriptは、ブラウザ組み込みのスクリプト言語としてしか思っていませんでしたが、JavaScriptでのクラス定義が可能なので、使いやすいツールキットの開発をはじめてみました。
クラスを利用すると、ツールキットとして使いやすいインタフェースが提供できる点が大きなメリットですが、JavaScriptの欠点としては、ブラウザ毎で仕様が異なることにあります。
そこで、各ブラウザ毎の動作を自動的に判断するクラスとメソッドを用意する予定あり、大体次のようになります。
/* UnifiedBrowderクラス内で、ブラウザのタイプを調べ、各メソッド処理を決定します。作成しれたクラスインスタンスは、myUBに代入されます */
myUB = new UnifiedBrowser();
/* myUBインスタンスのメソッドであるgetMouseButtonを呼び出します。getMouseButtonでは、各ブラウザ毎に異なる処理により左ボタン・右ボタン(例えば、左ボタンなら'L', 右ボタンなら'R')を返却します。このようにすることで、ブラウザ間で異なる処理を一つのメソッドで処理します。*/
var button = myUB.getMouseButton(e);
これだけだと、クラスまで利用せずに、関数で処理すれば良いように思えますが、関数だと、その都度簡単に関数を沢山定義することになり、収集がつかなくなってしまいます。クラスを使うと、このようなブラウザ依存を解消する処理群をメソッドとして、一つのクラスの配下にまとめることができるのが一番のメリットです。
そこで、クラスを有効に活用したJavaScriptツールキットを開発することにしました。Yawdbaデータベースシステムも、このJavaScriptツールキットを利用して構築したいと思っています。
2010年9月20日月曜日
VMLを使った簡単な図形エディターを作ってみました。
久しぶりです。今、JavaScriptを使って簡単な図形エディターを作っています。図形の描画については、マイクロソフトが作ったVMLを使っていますが、今後は、SVGにしないといけないかもしれません。ステップ数は、430ステップです。図形描画として直線、矩形、楕円だけですが、グラデーションや立体化、図形の移動などもマウスでできるようになっているので、結構コンパクトにできたと思っています。
文字列や多角形描画機能を入れても1000ステップぐらいになるかと思います。
使い方は、マウスドラッグにより、画面左のメニューに従って、直線・矩形・楕円を描画します。
また、図形をマウスで選択して図形の移動が可能ですが、さらに、マウス右ボタンで描画属性を変えたり、図形を消すこともできます。
図形が作成できたら、画面の中ほどにある「ソース」ボタンをクリックしてVMLタグリストを取り出し、Webページに貼り付けることで図形描画が可能となります。
このエディターを拡張したいとも思いますが、次には、SVG対応のエディターを開発することを先にしたいとも思います。
私のサイトに、このJavaScriptプログラムをアップしました。YawdbaサイトのJavaScriptのVMLエディターから添付ファイルをダウンロードしてIEで動作することができます。一息ついたら、プログラム解説を載せます。お待ちください。
文字列や多角形描画機能を入れても1000ステップぐらいになるかと思います。
使い方は、マウスドラッグにより、画面左のメニューに従って、直線・矩形・楕円を描画します。
また、図形をマウスで選択して図形の移動が可能ですが、さらに、マウス右ボタンで描画属性を変えたり、図形を消すこともできます。
図形が作成できたら、画面の中ほどにある「ソース」ボタンをクリックしてVMLタグリストを取り出し、Webページに貼り付けることで図形描画が可能となります。
このエディターを拡張したいとも思いますが、次には、SVG対応のエディターを開発することを先にしたいとも思います。
私のサイトに、このJavaScriptプログラムをアップしました。YawdbaサイトのJavaScriptのVMLエディターから添付ファイルをダウンロードしてIEで動作することができます。一息ついたら、プログラム解説を載せます。お待ちください。
2010年9月11日土曜日
JavaScriptと図形エディターを作成することができます。
ひさしぶりです。今、JavaScriptを勉強しています。
HTMLのタグでは、テーブルや文章、水平線しか表現できないと思っていましたが、VMLやSVGを使うと図形を描画することができます。これらのタグを使ってグラフを書くこともできます。まずは、VMLで開発しています。
VMLは、IEでしか使えませんが、今後はSVGでの開発も考えています。VMLについては、とほほのVML入門をご覧ください。
そこで、これらの機能を使ってJavaScriptで簡単な図形エディターを作れないか検討しています。マウスドラッグにより図形を描画できるようにしました。
マウス位置は、onmousedownイベント発生時のマウスのXY位置を取得と、マウス移動後のonmouseupイベント発生時のマウスのXY位置から図形の開始位置と終了位置を決定し、document.createElementでVMLタグを作成し、appendChildでdivタグ追加しました。
マウスドラッグの際には、マウスを移動するたびに図形枠を表示していますが、スムーズに動作しており問題はなさそうです。
現在、図形の塗りパターンや線パターンなどを追加していますが、作成できたらソース公開しますので待っていてください。
HTMLのタグでは、テーブルや文章、水平線しか表現できないと思っていましたが、VMLやSVGを使うと図形を描画することができます。これらのタグを使ってグラフを書くこともできます。まずは、VMLで開発しています。
VMLは、IEでしか使えませんが、今後はSVGでの開発も考えています。VMLについては、とほほのVML入門をご覧ください。
そこで、これらの機能を使ってJavaScriptで簡単な図形エディターを作れないか検討しています。マウスドラッグにより図形を描画できるようにしました。
マウス位置は、onmousedownイベント発生時のマウスのXY位置を取得と、マウス移動後のonmouseupイベント発生時のマウスのXY位置から図形の開始位置と終了位置を決定し、document.createElementでVMLタグを作成し、appendChildでdivタグ追加しました。
マウスドラッグの際には、マウスを移動するたびに図形枠を表示していますが、スムーズに動作しており問題はなさそうです。
現在、図形の塗りパターンや線パターンなどを追加していますが、作成できたらソース公開しますので待っていてください。
2010年8月16日月曜日
javaのsqlアクセスメソッドgetStringで文字化け(2)?
以前にjavaプログラミングで、MSAccessデータベースにアクセスする際の文字化けについてお話しました。どのようにコーディングするのかコメントがありましたので、私がYawdbaで使用しているコードの抜粋を説明します。
◆以下のコーディングでODBCデータソースにアクセスします。
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
cnn = DriverManager.getConnection("jdbc:odbc:" + "データソース");
◆取得したODBCデータソースコネクション(cnn)クラスのcreateStatementメソッドを呼び出し、SQL文を実行するStatementインタフェースを以下のように取得します。
stmt = cnn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,
ResultSet.CONCUR_READ_ONLY);
◆StatementインタフェースのexecuteQueryメソッドにより、SQL Query文を実行します。
rset =stmt.executeQuery("SELECT * From myTable");
◆SQL文が実行したら、取得したResultSetインタフェースオブジェクト(rset)を使って取得するレコード行を設定した後、レコード内のカラム位置(1~)を指定してデータを取得します。
このとき、このデータの型によって動作が異なります。
> データ型がVARCHAR以外なら、通常のgetStringメソッドを使ってデータを取得します。
val = rset.getString(カラム位置);
>データ型がVARCHARなら、ストリームを使ってデータを取得します。
/* データ取得するためのリーダー(myReader)をgetCharacterStreamメソッドで取得します */
Reader myReader = rset.getCharacterStream(カラム位置);
/* 取得するデータの表示サイズをgetColumnDisplaySizeメソッドで取得し、そのサイズ分のStringBufferを確保しておきます */
StringBuffer sb = new StringBuffer(該当フィールド表示サイズ);
try {
int c;
/* 取得したmyReaderを使ってreadメソッドで1文字づつ取得します。*/
while((c = myReader.read()) != -1) {
if(c != 0) /* c == 0の場合には、文字列データとして不正なのでスキップ */
sb.append((char)c); /* 取得した文字列をStringBufferに追加します */
}
}
catch (Exception e) {
エラー処理
}
val = (sb.length() == 0)?null:sb.toString(); /* StringBufferを文字列に変換します。 */
}
現在開発しているYawdbaもある程度形になれば、Yawdbaのサイトで公開したいと思いますが、暫く時間をください。
◆以下のコーディングでODBCデータソースにアクセスします。
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
cnn = DriverManager.getConnection("jdbc:odbc:" + "データソース");
◆取得したODBCデータソースコネクション(cnn)クラスのcreateStatementメソッドを呼び出し、SQL文を実行するStatementインタフェースを以下のように取得します。
stmt = cnn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,
ResultSet.CONCUR_READ_ONLY);
◆StatementインタフェースのexecuteQueryメソッドにより、SQL Query文を実行します。
rset =stmt.executeQuery("SELECT * From myTable");
◆SQL文が実行したら、取得したResultSetインタフェースオブジェクト(rset)を使って取得するレコード行を設定した後、レコード内のカラム位置(1~)を指定してデータを取得します。
このとき、このデータの型によって動作が異なります。
> データ型がVARCHAR以外なら、通常のgetStringメソッドを使ってデータを取得します。
val = rset.getString(カラム位置);
>データ型がVARCHARなら、ストリームを使ってデータを取得します。
/* データ取得するためのリーダー(myReader)をgetCharacterStreamメソッドで取得します */
Reader myReader = rset.getCharacterStream(カラム位置);
/* 取得するデータの表示サイズをgetColumnDisplaySizeメソッドで取得し、そのサイズ分のStringBufferを確保しておきます */
StringBuffer sb = new StringBuffer(該当フィールド表示サイズ);
try {
int c;
/* 取得したmyReaderを使ってreadメソッドで1文字づつ取得します。*/
while((c = myReader.read()) != -1) {
if(c != 0) /* c == 0の場合には、文字列データとして不正なのでスキップ */
sb.append((char)c); /* 取得した文字列をStringBufferに追加します */
}
}
catch (Exception e) {
エラー処理
}
val = (sb.length() == 0)?null:sb.toString(); /* StringBufferを文字列に変換します。 */
}
現在開発しているYawdbaもある程度形になれば、Yawdbaのサイトで公開したいと思いますが、暫く時間をください。
2010年8月4日水曜日
構造化プログラミングと抽象化について
私は、プログラミングを始めてから長い間、構造化プログラミングによる設計を行ってきました。この経験のなかで、処理の抽象化による設計が大切であることが分かってきました。今回は、これについて話したいと思います。おそれく、処理の抽象化とオブジェクト指向プログラミングは、近い関係にあるかと思います。
入社後、2年程たってサンディエゴに出張してUCSD-pSystemlの内部構造を勉強することになりました。UCSD-pSystemには、Pascalコンパイラーだけでなく、ファイルシステムやプログラム実行環境、スクリーンエディターが用意されていました。プログラミングに関して勉強になったのは、そのファイルシステムのモジュールの作り方でした。詳しくはこのリソースをご覧ください。
下位のモジュール(では、フロッピーのディスク内のシリンダー番号やセクター番号から物理セクターを読み込んで、メモリ内に読み込むだけにし、この下位モジュールを呼び出す上位モジュールでは、実際に物理セクターを読み出す下位モジュールを使ってファイルシステムが使用する論理ブロック(ブロック長は固定の512バイト?)を実現していました。さらに、その上のモジュールでファイル名の管理などを行う実際のファイルシステムを構築しています。このような構造は、通常のオペレーティングシステムの開発方法としては一般的ですが、下位モジュールに行くに従って実施のディスクアクセスを物理動作を行っています。
この方法のメリットとしては、仮にセクターの管理するバイト数が変更されたとしても、下位モジュールを修正するだけで上位モジュールに手を加えることなく動作できることにあります。同様のシステム構成としては、プロトコルレイアの階層として一般的なOSI参照モデルがあります。このOSI参照モデルの下位層である物理層やデータリンク層から上位に行くに従って、データにやり取りが抽象化されています。
このように、処理やデータを抽象化することにより、仕様変更に強いシステムの構築が可能となります。
なお、私が尊敬する「ニクラウス・ヴィルト」も、プログラミングに関する抽象化の大切さを著しています。
登録:
投稿 (Atom)