MAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT apps

小規模～大規模のシステム構築を検討するにあたり、システムを階層化して構築することが多くなっています。人は、複雑なものをまとめて理解することはできません。そこで、階層化しそれぞれの階層に意味づけを行うことにより対象物を理解しようというわけです。そこで本連載では、今さらかもしれませんが、n階層アーキテクチャアプリケーションについて説明したいと思います。 n階層アーキテクチャアプリケーションのメリット・デメリット n階層化アーキテクチャとは、アプリケーションを表示、業務処理、データ等、複数の階層で分割する分散アプリケーション設計手法のことを指します。 階層化にはどのような視点で分割するかによって、大きく「論理的役割」による分割と「物理的役割」による分割に分類できます。 論理的役割による分割とは、画面表示部、業務ロジック部、DB、ファイルなどのデータ格納部といった各階層の役割を意識して分割される場

アプリケーションをレイヤ分割した場合、 プレゼンテーション層 -> ビジネスロジック層 -> データアクセス層 のように分けるのが一般的ではないかと思います。 ここで、矢印は、依存関係を表しています。例えば、プレゼンテーション層は、ビジネスロジック層に依存していて、ビジネスロジック層は、データアクセス層に依存しています。 矢印の向いていないほうには依存していません。例えば、ビジネスロジック層は、プレゼンテーション層に依存していません。 誤解が多いんじゃないかと思うのは、レイヤとモデルを混同することです。一番多く見られるのは、ビジネスロジック層とドメインモデルの混同です。 モデルは、各層を流れていくデータ(+ ロジック)であり、どの層にも依存しません。逆に層はモデルに依存することになります。 モデルは、プレゼンテーションモデルとドメインモデルに分かれます。本当は、ERモデルもあるのですが、こ

過去に「 ロバストネス図113枚!!」でも取り上げたが，最近ロバストネス分析を設計の入り口にすることが多くなった。バウンダリ，コントローラ，エンティティという３つのステレオタイプは，今日のWebアプリケーションのアーキテクチャにかなりしっくりとくる。統一プロセスでも，ユースケースからクラスの発見をするために，ロバストネス分析をすることが推奨されている。 ロバストネス分析の結果のロバストネス図は，かなり直感的にシステムの構造と流れを示してくれるので，あまり実装に詳しくない人でも理解可能なようだ。システムの構造や設計に興味を持っているお客さんであれば，十分使用に堪えるシンプルさがあると思う（興味を持っていれば，が重要）。 僕が設計書と実装をできるだけ近づけるために，自動生成が効果的だと思っていることは，このエントリを読んでいる方々はご存知のことと思う。クラスを見つけるためのロバストネス分析が基

要件定義→外部設計→（アーキテクチャ）→内部設計→コーディング→単体テスト→結合テスト 今回はアーキテクチャについてです。 レイヤー構成について、3パターンほど私が考える案を紹介します。 各コンポーネントの役割については、別途説明したいと思います。 Full Pattern 特徴 大規模アプリケーション向け。 コンポーネントを最も細分化したパターン。画面とロジックを分担して共同開発したり、フロー制御や他システム連携が多かったりするシステムに向く。 Serivceがトランザクション境界となる。 レイヤー構成 プレゼンテーション層 Action、Page、Dto サービス層 Service、Dxo ドメイン層 Logic、Dao、Entity Middle Pattern 特徴 中規模アプリケーション向け。 画面ロジックとドメインロジックを2つのレイヤーに集約させたパターン。大抵のシステムは、

第 10 回目は「CSSで文字サイズを変更するボタンを設置する」です。 今回は「styleswitcher.js」でCSSを切り替えて、サイトの文字サイズを変更するボタンの設置方法を解説します。 「styleswitcher.js」は複数のスタイルシートファイルを切り替えて読み込むことができ、クッキーに保存できる優れもののライブラリです。 実装手順は以下の通りです。 1. styleswitcher.js をダウンロード 「styleswitcher.js」を以下のサイトからダウンロードします。 「A List Apart: Articles: Alternative Style: Working With Alternate Style Sheets」のエントリーの中にある Download styleswitcher.js からダウンロードできます。 2. font-sizeの値が異な

集中連載「使える CSS テクニック」も第 9 回になりました。 今回は CSS だけで画像ギャラリーを作ります。 画像の挙動は、（IE6 でも同様の表示ができるように）a タグの擬似クラスだけで設定しています。 サンプル XHTML <div id="album"> <ul> <li><a id="photo01" href="#slide"><em><img src="css_album/img/photo01.jpg" /></em><span>日本大通り駅</span></a></li> <li><a id="photo02" href="#slide"><em><img src="css_album/img/photo02.jpg" /></em><span>指路教会</span></a></li> <li><a id="photo03" href="#slide"><em><i

第 8 回目は「CSSを使った見栄えの良いフォーム」です。 フォームまわりは、各ブラウザによってかなり差異があります。 よって CSS だけで見栄えをよくしようとすると、結構手間だったります。 例をあげると magin・paddingが異なる borderの線がでない 背景が画像があたらない などなど そんな時に便利なのが 「niceforms」 という javascriptライブラリです。 すいませんが、今回だけは javascript を使わせてください。 niceforms のサンプルはこちら 導入方法 まずは、niceforms をダウンロードします。 次に、必要な jsファイル および cssファイル をインクルード。 <script language="javascript" type="text/javascript" src="niceforms.js"></script>

第 7 回目は「CSSを使った見栄えの良いサイトマップ」です。 今回は、Web サイト構成をすばやく確認できるように見栄えのいいサイトマップを紹介したいと思います。 以下のようなツリー構造のサイトマップを作成してみます。 sample 1.画像を用意 以下のような画像を使用します。 アイコンから伸びる点線はなるべく長くします。 2. XHTML はリストの入れ子で XHTML <ul> <li><a href="#">ホーム</a> <ul class="category"> <li><a href="#">会社案内</a> <ul class="page"> <li><a href="#">会社概要</a></li> <li><a href="#">コンセプト</a></li> <li><a href="#">沿革</a></li> <li><a href="#">社長挨拶</a></l

第 6 回目は「CSSを使った見栄えの良い表組み（table）」です。 Web サイトのレイアウトがすべて table でコントロールされていた時代がありましたが、今そんなことをしたら嘲笑を買う時代です。 本来の「複数のデータを表示･比較の際にわかりやすいよう見せる表組み」のためのテーブルを、CSSを使って見栄えよくしてみましょう。 1. CSS のみで見栄えよくしてみる 線と塗りだけで表現する、一番シンプルなテーブルを作ってみます。 [HTML] <table id="table-01"> <tr> <th>本体名称</th> <th>スタンド名</th> <th>スピード</th> <th>持続力</th> <th>精密動作性</th> <th>成長性</th> </tr> <tr> <td>空条 承太郎</td> <td>スター・プラチナ</td> <td>A</td> <td>A<

使える CSS テクニック第 5 回、「CSS で DL を float して表組みのように表現する」です。 何かと便利な定義リストですが、今回は dt と dd を並列に並べて、テーブルのように表示する方法をご紹介します。 よく使われる定番の方法で、難しいものではないですが、少しだけクセがあります。 ベーシックなテーブル まずは下のような、会社紹介などに使われる汎用的なテーブルです。 基本的に dt に float を設定して、dd は dt に乗っかる形になります。 [サンプル] 会社名 株式会社シーブレイン 住所 横浜市中区尾上町 5-77-2 馬車道ウエストビル 8F 電話番号 045-650-6210 [HTML] <dl> <dt>会社名</dt> <dd>株式会社シーブレイン</dd> <dt>住所</dt> <dd>横浜市中区尾上町 5-77-2 馬車道ウエストビル 8F<

使える CSS テクニックの第 4 回は「CSS で実現するプルダウンメニュー」です。 確認ブラウザは IE7、Firefox2、Opera9、Safari3.1 です。 CSS のみでは IE6 対応が不可能ですが、IE の独自機能（DHTML）を併用することで IE6 でもプルダウンメニューを実現しています。 まずは、以下のサンプルをご覧ください。 シーブレイン コーポレート WEBサイト制作 マニュアル制作 ローカライズ 検索エンジン Yahoo! Japan Google Goo excite Biglobe 週刊少年漫画 少年ジャンプ 少年マガジン 少年サンデー このサンプルの HTML は以下のようになっています。 <ul id="pulldown-menu"> <li><a href="#">シーブレイン</a> <ul> <li><a href="http://c-brai

第 3 回目は「タブナビゲーションを CSS で実現してみよう」です。 タブナビゲーションはサイトのメニューに多く使われ、ビジターに「ここはクリックできますよ」とわかりやすく伝えるためにロールオーバすることが多いです。 ロールオーバに JavaScript を使用する方法もありますが、CSS ならもっとスッキリ！ 1.テキストリンクを生かしてタブナビゲーションを実現してみる テキストリンクを生かしたまま、背景に画像を表示させることでナビゲーションに見せる方法です。 [サンプル] [HTML] ソースはこんな感じになります。 <div id="tabnav-00"> <ul> <li id="menu01"><a href="#">メニュー01</a></li> <li id="menu02"><a href="#">メニュー02</a></li> <li id="menu03"><a hr