「ほっ」と。キャンペーン

カテゴリ:XAMPP( 26 )

JavaScriptの人気のフレームワーク

HTML の select 要素の option を全て削除するスクリプトは、次のようになる。

function clearOptions(select) {
  for (i = 0; i < select.length; i++) {
    select.removeChild(select.lastChild);
  }
}

これをネットで探し出すのが大変だったので、select.clearOptions() というふうにはできないのかと考えた。JavaScript のクラスを作る方法は良く知らないので、ネット検索したら、Diasper Journal のページに行き当たった。たまたま、そこのリンクに「JavaScript Framework 人気があるのはどれ?」という記事があったので行ってみた。すると Dojo は3位で、1位は script.aculo.us だった。

script.aculo.us を見たが、すごい。また、RoR との連携もできるらしい。Ajax の進歩を追いかけていったらきりがない。Dojo をやっと使えるようになるのに1ヶ月もかかったというのに、これも学習したらどうなるのだろうと思うとめまいがしてきた。

どの分野でも専門家の世界は広くて遠い。とにかく今やっていることをぼちぼちやるしかない。

誰かどうしても使いたくてたまらなくなるような電子カルテを作ってくれないかなぁ。
[PR]
by tnomura9 | 2007-12-03 08:24 | XAMPP | Comments(0)

3文字コード

よく使う慣用句を辞書に登録するのはだれでもやっているだろう。たとえば、「拝啓 時下ますますご清栄のこととお喜び申し上げます。」という文も「はいけじ」という読みで登録しておくとキー入力がずいぶん節約できる。

しかし、このような短縮形もだんだん増えてくると覚えきれなくなってしまうという欠点が出てくる。そこで3文字コードというものを考えてみた。

つまり、「短縮形を作るときにその文字数を原則3文字とする。」、「できるだけ原文の先頭の音をそのまま使う。」、「原文が長すぎて二つに分解しないといけないときは最初の部分のコードに1を残りの部分に2をつける。」、「拗音・撥音・長音は省略する。」などの簡単な規約を作っておくのだ。たとえば、

  1. でて1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. でて2: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. えちは: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
  4. へどは: <head>
  5. めた1: <meta http-equiv="Content-Type" content="text/html; charset=
  6. めたし: shift_jis">

などと作っておけば、

でて1でて2えちはへどはめた1めたし

と入力するだけで、HTML文書のはじめのほうが書けててしまう。3文字コードを考えるときはいったん漢字変換してみて普通の言葉に変換されないかどうか確認しておいたほうが良い。普通の文書を作ろうと思っているのに上のような変換が頻繁に現れたら煩わしいからだ。

3文字だと50音+数字10種の3乗の組み合わせだから、216000通りの組み合わせになるので表現力は十分だし、入力もひらがな入力から切り替えないので変換効率が上がる。変換先の冒頭の音をなぞるようなコードにすることで想起も容易だ。結構実用的なのだ。

このエントリーをどのカテゴリーに入れようか迷ったのだが、HTML文書をたくさん作る機会が多いから XAMPP のカテゴリーにいれた。
[PR]
by tnomura9 | 2007-11-10 07:20 | XAMPP | Comments(0)

ブラウザでワープロ

患者さんを他の病院へ紹介するときの書式に診療情報提供書というものがある。フォーマットが決まっていてそこを埋めるだけなのだが、ワープロやエクセルで作るのは重くて仕方がない。XAMPPを利用したら、form 入力と php ファイルの二つの文書だけで、簡単に作れるようになった。

IE7.0ではセキュリティーのため辞書への単語登録や漢字変換が制限されているので Fire Fox で使う。

syokai.html 入力用のフォーム
shokai.php 出力用の php ファイル

両方のファイルは htdocs 以下のディレクトリに納めて Apache で送信できるようにする。

syokai.html のフォームに記入して、作成ボタンを押すと shokai.php でHTML文書に変換してブラウザに表示してくれる。ブラウザの戻るボタンを押すと元のフォームに戻って編集をつづけることができる。

フィールド内の改行は <br> タグを使う。処方のフィールドには薬品名のリストを入力するが、<ol> </ol> タグの中にデータが納まるようにしているので <li> タグを薬剤名の先頭につけると、自動的に番号がふられる。フィールドからフィールドへの移動は Tab と Shift + Tab でできる。

文書の印刷はブラウザの印刷機能を使う。文書の保存はブラウザの「ページを名前をつけて保存メニュー」を使う。

今朝思いついて、今日一日でできてしまった。XAMPPに感謝。
[PR]
by tnomura9 | 2007-11-08 20:26 | XAMPP | Comments(0)

Ajax プログラミングの要件

このところ XAMPP をたまたまインストールしたのが刺激になって、とりつかれたように Ajax プログラムを試してみたが、そろそろ、時間も体力もなくなったのでお休みしないといけない。ただ、アマチュアの悲しさで、いつも扱わなくなってしばらくすると全く分からなくなってしまっている。そこで、覚えているうちに Ajax プログラミングの要件をまとめてみることにした。

1.HTML文書を作ることができるか

クライアントプログラムを作るのにブラウザの操作をできなければならないので、これは必須だ。特に フォームやボタンなどの記述ができなければどうにもならない。しかし、ちょっとやらないと、フォームを作る機会はあまりないので忘れてしまう。

2.JavaScript + DOM で HTML 文書の要素のデータの取得や変更ができるか。

JavaScript も、単に画面に流れるテロップを流したりなどのスクリプトでは使えない。HTML 要素のデータを自在に取り出したり変更したりできるようになっていなければならない。DOM は解説書を見ると何のことを言っているのかさっぱり分からないが、サンプルスクリプトを何個かいじっているうちにどうすればデータを操作できるのか分かってくる。

3.イベント駆動型のプログラムに慣れているか。

JavaScript を使ってプログラムを作ろうとしたら、イベント駆動型のプログラムになれていなければならない。一本のプログラムに全ての処理を書いてしまうフロー駆動型のプログラムと違ってイベント駆動型のプログラムは、イベントが発生したときにのみ処理を行う関数をたくさん作っていかなければならない。Ajax の心臓部の Ajax.Response() 関数はサーバーからの送信が終了したときにイベントを発生してコールバック関数を起動するようになっている。ここの、仕組みがなんとなく分かっていないと、どうやってサーバーからのデータが取得できるのかが理解できない。

4.オブジェクト指向プログラムの感じがつかめているか。

オブジェクト指向プログラムの大体のイメージがつかめていなければならない。クラスという雌鳥からオブジェクトという卵が生まれ、その卵にいろいろと話しかけると返事が返ってくるというイメージで十分だ。

5.CGI の仕組みが分かっているか。

Ajax といえども HTTP というプロトコールで通信が行われている。そのときの決まりを大まかでも知っていなければならない。例えば GET のときにクライアントからどのようなデータがサーバーに送られるか、そのときにエスケープしなければならない文字コードがどのように処理されるかなどだ。GET と POST の違いもなんとなく分かっている必要がある。

6.Apache の設定をすることができるか。

XAMPP がほとんどをやってくれているが、自分で書いた HTML をどのディレクトリに置いてどうやってアクセスするか。Apache の設定を変更するにはどのファイルをいじったらいいか位は知っていなければならない。

7.MySQL に接続してデータベースの操作ができるか。

コマンドプロンプトから mysql を使ってデータベースサーバに接続し、データベースやテープルを作ったり、SQLで簡単なクエリを発行できなければならない。

8.サーバーサイドスクリプトでプログラムを書くことができるか。

PHPを使うと割りに簡単にサーバーサイドプログラムを書くことができる。それだけでなく、クライアントから取得したデータをどうデータベースにつなげていくかを知っておく必要がある。

9.PHP や Perl、Ruby などで、文字列の処理ができるか。

Ajax では文字列の中から特定の文字を探したり、あるいは置き換えたり、結合したり、分割して配列にしたりなど、文字列の処理をすることが多い。スクリプト言語であまり苦労せずにそれができるようになっている必要がある。とくに、正規表現がつかえることが必須。

10.そのほか日本語処理をするときの文字コードセットの知識も必要だ。

半年もプログラムをしないとすっかり忘れていることが多いので、これらの要件からはじめなければならない。またやってみたくなったらこの覚書を見返して検討してみよう。

余談だが、プログラムを作るときは、個々の命令をはっきりと知っていることよりも、なんとなくどんなことをしているのかなというイメージのほうが大切だ。今回の一連のプログラミングで PHP は初めてだったにもかかわらず、あまり困らなかった。今までの Ruby や C のプログラミングの経験でなんとなくどういうことをするのかというイメージが湧いたからだ。この、なんとなくという感じが思いのほか大切だ。
[PR]
by tnomura9 | 2007-11-04 18:38 | XAMPP | Comments(0)

Ajaxの通信をJSONに統一する。

クライアントとサーバの通信をJSONに決めてしまうと、関数にオブジェクトを渡して、返信をオブジェクトで取り出すことができるので、Ajax部分のプログラムを簡略化できる。

通信を分担する関数にオブジェクトを引数として渡して、戻り値をオブジェクトで得るような方式を考えていたが、Ajaxは関数呼び出しよりもっと高度な非同期通信なので普通の関数のような考え方はできない。とりあえず prototype.js の Ajax.Request を利用して、オブジェクトを引数にする

jsonAjax(url, obj, callback)

関数を作った。url は処理を依頼する PHP ファイル、obj は送信するためのオブジェクト、callback は返信が来たときの処理関数。jsonAjax 関数は使いまわしできるように jsonajax.js というファイルにした。デモプログラムは、

prototype.js
json2.js
jsonAjax.html
jsonajax.js
echoback.php

で動作する。

これで一応Ajaxのプログラムを作るための部品がそろった。もう少し簡単になると良かったのだが、実際のAjaxははるかに高度な仕組みで動いているのだろうから仕方がない。

注意しないといけないのは、文字コードのエスケープ処理の問題だ。デモの echoback.php 関数では、単にエコーバックするだけでなく、stripslashes() 関数を使ってアンエスケープ処理をしている。最初エスケープ処理をしないで単にエコーバックするようにしていたら、クライアントから送った hello という文字列が \"hello\" になって帰ってきた。どの段階のエスケープ処理が問題なのかは調べていないが、実際にプログラムを書くときは注意する必要があるかもしれない。
[PR]
by tnomura9 | 2007-11-03 21:29 | XAMPP | Comments(0)

JSON.stringify(object)

PHP5 にはオブジェクトを JSON にしたり、逆に JSON をオブジェクトにしたりする関数が追加された。

JavaScript の場合も JSON をオブジェクトにするのは、セキュリティを考えなければ、

obj = eval(”(” + JSONstring + ”)”);

で変換できる。しかし、今のところオブジェクトを JSON にする関数はなく、json.org のライブラリ json2.js の JSON.stringify(object) 関数を使わなければならない。この関数を試してみるデモプログラム

jsonTest.html

もできた。

フィールドの key と value のペアに適当な文字列を入力して to JSON ボタンを押すと、JSONを作成してくれる。

Ajax 経由のJSONパイプラインまであと一息だ。
[PR]
by tnomura9 | 2007-11-03 18:20 | XAMPP | Comments(0)

Ajaxプログラム用テンプレート

Ajaxプログラムを作るためのテンプレートを作りました。動作には prototype.js が必要です。

AjaxTemplate.html Ajaxの送受信を実験するためのテンプレート。テキスト入力フィールドに文字列を入力して、send ボタンを押すと、送信した文字が、AjaxEchoback.php から返送され、echoback テキストエリアに表示されます。

AjaxEchoback.php AjaxTemplate.html から送信されたデータをエコーバックする php スクリプト。

AjaxTemplate.html では prototype.js で拡張された機能を使っているので、詳しくは、prototype.js v1.5.0 の使い方を参照してください。
[PR]
by tnomura9 | 2007-11-03 16:21 | XAMPP | Comments(0)

なぜ素人プログラマにAjaxが必要か?

ネットワークプログラミングは、主にセキュリティの問題から素人プログラマが手を出さないほうがいい。自分のプログラムをネットに公開したばかりに、大事なサーバーが簡単にハッキングされてしまうかもしれないからだ。セキュリティを考えたプログラムを組むためにはそれ相応の知識と情報源がいるし、自分も含めて素人プログラマには荷が重過ぎる。

それにもかかわらず、素人プログラマが XAMPP のプログラムを使って Ajax 的なプログラムに挑戦する意義はおおいにある。それを説明する前に、デモプログラムを新しいタグで開いてみてほしい。そうして、このページに戻って、適当なところをコピーしてデモプログラムのメモ欄にペーストしてみていただきたい。もちろん、デモプログラムではコピーしたデータの保存はできないが、Ajaxを使うことで、ウェブ上のサンプルプログラムを集めるのに便利だろうことは想像がつくだろう。

管理人がパソコンを使う時間の大半は最近はブラウザ上で過ごしている。したがって、ブラウザのブックマークからプログラムを起動できればずいぶん使い勝手がいいのだ。それに、最近のAjaxブームで分かったのだが、Javascript + DOM はブラウザのおまけなどではなく、立派なプログラミング言語なのだ。つまり、これからは、素人のプログラマもプログラムをするのなら、ブラウザ上で動くものを作るほうが絶対に便利だということだ。

しかしながら、JavaScript では、データの保存ができない。Ajax はその弱点も補ってくれるので完璧にデータ保存のできるプログラムを書くことができる。これだったら、デスクトップ上やキャラクターターミナル上のプログラムを組むのと機能的になんら変わりがない。おまけに、Ajaxをつかえば、データをデータベースに取り込むことができるのだ。並べ替えや、検索など複雑なデータ処理を、ほとんどプログラムを書かずに実行できる。

もうひとつは、JSONの存在だ。構造化したデータを非常にシンプルな書式でやり取りできる。どんなデータ構造を使うにしても、パーサーを全く書かずに使うことができるのだ。Unix のパイプラインでは、データ全てをテキストデータとして扱うことで、色々な機能のプログラムを組み合わせて使うことができる。JSONはそれと同じようなことを、フラットなテキストデータだけでなく、構造化されたデータにも適用できるのだ。

ブラウザ上に実現したクライアントプログラムとサーバーとの通信をJSONを使うと決めておけば、クライアントとサーバとをほとんどシームレスにつなげることができる。これで、ずいぶんプログラムの手間が省けるはずだ。

わがままな素人プログラマが望むのは、できるだけ少ない手間で、できるだけ自分にあったプログラムが欲しいということだ。一見難しそうな Ajax もちょっと使い慣れてくると、簡単に「使える」プログラムを書く道具になってくれる。

XAMPP をインストールして、127.0.0.1 からしかアクセスできない設定の Apache と、MySQL、PHP、PerlかRuby 、JavaScript、prototype.js と JSON が使えるようになれば、素人プログラマは毎日幸せな気分に浸ることができるのだ。
[PR]
by tnomura9 | 2007-11-03 04:08 | XAMPP | Comments(0)

Ajax サンプル

Ajax のサンプルの一応のテストができたので紹介します。リンクの右クリックでダウンロードできます。名称は「簡単QアンドA」です。簡単なQandAのデータをデータベースで管理するプログラムです。あくまでも Ajax の実験のためなので、機能はそんなにありません。検索は id からしかできません。

デモページを用意しました(デモではAjaxは使っていません)。

このソフトはフリーウェアです。複製改造全く自由です。また、このソフトは全く無保証です、動作は使用者の責任で行ってください。また、prototype.js が必要ですので同じフォルダーにダウンロードしておいてください。また、このプログラムは XAMPP for Windows がインストールされていることを前提にしています。

create_table.txt データベースを作成するためのバッチファイル
QandA.html クライアントプログラム
insert.php フィールドの挿入を担当する PHP プログラム
update.php フィールドデータの更新を担当するプログラム
query.php データの検索を担当するプログラム

使い方は次のようになります。

  1. mysql で create database test_data; のようにテスト用のデータベースを作成します。
  2. mysql で use test_data; としてデータベースを選択します。
  3. mysql で source create_table.txt; としてテスト用のテーブル sample を作成します。
  4. *.php のうちのデータベース接続のパラメータを設定します。mysql_connect('localhost', 'root', 'password'); の部分です。
  5. ブラウザ(FireFox でしか動作確認していません)で、QandA.html を開きます。

クライアントの使い方はボタンを押してみると分かると思いますが次のようになります。

  1. [表示ボタン] 解答を表示したり隠したりします。
  2. [前へ] 前の画面に戻ります。
  3. [次へ] 次の画面へ進みます。
  4. [リセット] 入力用のボックスを全てリセットします。
  5. [検索] id に数値を入力したあとクリックするとその番号のフィールドに飛びます。
  6. [更新] 表示されているデータの内容を変更できます。
  7. [新規] 新しいフィールドを作成します。


XAMPP の記事はこれで終わりです。睡眠不足と疲労で本業に支障が出そうだからです。では、おやすみなさい。
[PR]
by tnomura9 | 2007-11-01 02:01 | XAMPP | Comments(0)

意外と簡単 Ajax

XAMPPのデフォールトのPHPはPHP5だ。PHPにはjson_encode()関数が付いているらしい。これを使うとAjaxが劇的に簡単になることに気がついた。

ちょっと時間がないので詳しい検討は後にするが、こういうことだ。

PHPの連想配列が $a に入っているとする。そうすると PHP 側から JSON を送るのには次のようにすればよい。

echo json_encode($a);

たったこれだけだ。次に JavaScript から prototpe.js の Ajax クラスを使ってコールバック関数の obj という変数に受信した JSON を保持するオブジェクトが渡されたとする。そうしたら、コールバック関数の中で、

json = obj.responseText;
data = eval(”(”+json+”)”);

とすれば、データをオブジェクトとして取り出すことができる。

送信に一行。受信に2行だけで、完璧なAjaxを楽しむことができる。
[PR]
by tnomura9 | 2007-10-31 19:13 | XAMPP | Comments(0)