第10回　アプリケーションコンポーネントの統合

前回までの作業で、ブログアプリケーションを構成する3つのフロー、新規エントリー作成フロー、エントリー一覧フロー、エントリー編集フローが完成しました。連載の最終回となる今回はこれらのフロー(アプリケーションコンポーネント)を相互にリンクし、ひとつのアプリケーションとして統合します。

アプリケーションコンポーネントの統合

ここで第4回で示したブログアプリケーションの画面遷移図を再度見てみましょう。

この図から、当初予定していたアプリケーションコンポーネント間の相互接続ポイントのうち、新規エントリー入力確認画面からエントリー一覧画面、エントリー削除確認画面からエントリー一覧画面の2つについてはすでに動作していることがわかります。よって、残りはエントリー一覧画面から新規エントリー入力画面へのリンクのみとなります。このリンクを実現するには、単にエントリポイントのURLをリンクに埋め込みます。

/path/to/pieceblog/web/webapp/templates/Entry/List.html

<p><a href="{__appRootPath}/new.php">New Entry</a></p>
<h4 class="date-header">List</h4>
<table border="1">
<tr flexy:foreach="entries,entry">
  <td><a href="{__appRootPath}/edit.php?id={entry.id}">{entry.title}</a></td>
</tr>
</table>

これで当初予定していたアプリケーションコンポーネント間の相互接続はすべて完了しました。しかし、アプリケーションの使い勝手を考えると、新規エントリー入力画面からエントリー一覧画面、エントリー参照画面からエントリー一覧画面、その他画面からの各アプリケーションコンポーネントへのリンクがある方が良いでしょう。とはいうものの、全画面のHTMLにリンクを埋め込むのも面倒ですので、ここはレイアウト用のHTMLを使うことにします。

/path/to/pieceblogweb/webapp/templates/Layout/Layout.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <link rel="stylesheet" type="text/css" href="{__appRootPath}/css/default.css" media="screen,projection" />
    <title>Piece_Unity Examples</title>
    <script type="text/javascript" src="{__appRootPath}/js/window_operation.js"></script>
    <script type="text/javascript" src="{__appRootPath}/js/ahah.js"></script>
  </head>
  <body>
    <div id="page">
      <div id="header">
        <h1>Piece_Unity Examples</h1>
      </div><!-- close #header -->
      <div id="content">
        <p><a href="{__appRootPath}/list.php">Entry List</a> | <a href="{__appRootPath}/new.php">New Entry</a></p>
        <p class="message" flexy:if="!__continuation.checkLastEvent()">Sorry, this page does not support the browser's back, forward, and reload buttons. Click a submit button on a form or a link.</p>
        {__content:h}
      </div><!-- close #content -->
      <div id="footer">
        <p>Copyright © 2007 KUBO Atsuhiro <iteman at users dot sourceforge dot net>, All rights reserved.</p>
      </div><!-- close #footer -->
      <div class="clear"></div>
    </div><!-- close #page -->
  </body>
</html>

先ほど変更した/path/to/pieceblog/web/webapp/templates/Entry/List.htmlを元に戻し、動作を確認してみましょう。

これで随分アプリケーションらしくなりました。このように、アプリケーションコンポーネントを統合し、単一のアプリケーションとして動作させるには、それぞれのコンポーネントのURL、つまりエントリポイントのURLを使います。

おわりに

今回はアプリケーションコンポーネントを統合し、単一のアプリケーションとして動作するようにしました。本連載ではPiece Frameworkによるアプリケーション開発の実際のところを、泥臭く面倒な部分まで余すところなく解説しました。

先日リリースされたPiece_Unity 1.3.0では、URLとフローのマッピングのための新しい設定システムやより少ない設定のための階層化サポートにより、大幅な設定の削減が実現されました。また、泥臭く面倒な部分を極限まで減らすべくPiece_IDEの開発も続いています。

現時点でステートフルな特性を持つフレームワークは少数派です。それでも、筆者はステートフルな特性がWebアプリケーション開発において重要な価値があると考えています。そして、Piece Frameworkはまだまだ進化の過程にあります。アプリケーション開発の中心をより本質的な部分にシフトさせるべく、Piece Frameworkの開発は続きます。Piece Frameworkの今後の発展にご期待ください。

ここまで読んで頂いた皆様に感謝いたします。ありがとうございました。