カテゴリー

最新の記事

最近のコメント

最近のトラックバック

月別アーカイブ

ブログ検索

RSSフィード

ブロとも申請フォーム

この人とブロともになる

スポンサーサイト

スポンサー広告
--.--.--
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ベンチャーブログのランキングに参加しています。
下のバナーをクリックして応援していただけると嬉しいです。
にほんブログ村 ベンチャーブログへ

PHPフレームワークもどき「PnF」(3)~サンプルアプリを作ってみよう

PHP
2008.11.24
「PnF」は、複数のビューコンポーネントで構成された「非モーダル型」のWebアプリケーションの作成を、容易にするために開発されたものです。しかし理屈をいくら並べても、具体的なイメージはつかみにくいと思います。そこでまず簡単なサンプルアプリケーションをお見せします。そしてその後に、これが「PnF」でどのように開発できるのかを示したいと思います。

ここでサンプルとして取り上げるのは、名簿作成アプリケーションです。まず下の画面をごらんください。

サンプル画面1

このアプリケーションはふたつのカラムで構成されており、左側にメニュー、右側に入力済みの名簿データが表示されるようになっています。まだ「登録されているアイテム数」はゼロです。画面下に表示されている数値は、サーバー内処理の実行時間です。PnFコアが自動的に出力します。

さっそく「アイテム追加」をクリックし、アイテムを追加してみましょう。「アイテム追加」をクリックすると、右側のカラムに入力フォームが表示されます。

サンプル画面2

ここでデータを入力するのですが、「名前」欄と「メールアドレス」欄は、空欄のままではエラーになるように設定されています。試しにそのままの状態で「登録」をクリックしてみます。

サンプル画面3

それぞれのフィールドの上に、エラーメッセージが表示されます。また「メールアドレス」欄は、メールアドレスとしておかしい文字列を入力して「登録」をクリックした場合も、エラーが表示されるようになっています。

サンプル画面4

それではデータの登録を行いましょう。適切なデータを入力して「登録」をクリックすると、「登録されているアイテム数」がインクリメントされ、そのデータのうち「名前」と「メールアドレス」で構成されたリストが表示されます。なおこのサンプルでは「登録」時にフォームデータをクリアしていません。

サンプル画面5

おなじ要領で、いくつかのデータを登録していきます。

サンプル画面6

フォームの「キャンセル」をクリックすると、フォームが消えます。この時フォームの内容がクリアされます。つまり次にフォームを開くときには、まっさらな状態のフォームが出てくるというわけです。

サンプル画面7

これで3人分のデータが登録された名簿ができました。各アイテムは「名前」と「メールアドレス」しか表示されていませんが、「詳細を表示する」をクリックすると、先ほど入力した「詳細」部分のテキストが表示されます。この機能はそれぞれのアイテムで独立して動き、複数アイテムの詳細を同時に表示することも可能です。たとえばこんな感じで。

サンプル画面8

ここでちょっと注目していただきたいのが、「いじわるねずみ」の詳細記述にスクリプトが記述されていることです。しかしPnFコアによってタグがエスケープされているため、タグが文字列として表示されています。

「リストをクリア」をクリックすると、これらのアイテムがすべて削除されます。

サンプル画面9

これでまた最初の状態に戻りました。

このサンプルアプリは、非常に単純なものです。しかし注目すべきポイントがひとつあります。それは「登録」「表示」「削除」を「大きな画面遷移なしで」実行している点です。つまりユーザーは、ひとつの画面で複数の機能を使っているように感じるというわけです。これはユーザビリティを高める上で、非常に重要なポイントだと考えています。もちろん「編集」も、そのための機能を追加すれば、問題なく同じ画面で実装できます。

もちろんこのようなアプリケーションを、PnFを使わずに作成することも可能です。この程度の複雑さであれば、それほど苦労することはないはずです。しかしPnFを利用すれば、ビューコンポーネントの独立性を高めることができるため、アプリケーションの複雑さが増してもコードの複雑さを抑制できます。
スポンサーサイト

ベンチャーブログのランキングに参加しています。
下のバナーをクリックして応援していただけると嬉しいです。
にほんブログ村 ベンチャーブログへ

FC2Ad

相続 会社設立

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。