Piece Frameworkによるブログアプリケーションの作成

第5回 画面遷移設計とフロー定義(2)

この記事を読むのに必要な時間:およそ 11 分

前回は,ブログアプリケーションの画面遷移設計を行いました。今回は,設計した画面遷移をフロー定義ファイルに落とし込み,実際にPiece_Unityで動作するアプリケーションを作成します。

Piece_Unity 1.0.0から1.1.0へのアップグレード

先日Piece_Unity 1.1.0がリリースされました。作業を始める前にアップグレードを行いましょう。

Piece_Unityのアップグレード

> pear.bat upgrade piece/piece_unity
...
> pear.bat list -a
INSTALLED PACKAGES, CHANNEL __URI:
==================================
(no packages installed)
INSTALLED PACKAGES, CHANNEL PEAR.PHP.NET:
=========================================
PACKAGE             VERSION STATE
Archive_Tar         1.3.2   stable
Cache_Lite          1.7.2   stable
Console_Getopt      1.2.3   stable
HTML_Template_Flexy 1.2.5   stable
Net_URL             1.0.15  stable
PEAR                1.6.1   stable
Structures_Graph    1.0.2   stable
INSTALLED PACKAGES, CHANNEL PEAR.PIECE-FRAMEWORK.COM:
=====================================================
PACKAGE                                          VERSION STATE
Piece_Examples_Basics                            1.0.0   stable
Piece_Flow                                       1.13.0  stable
Piece_Right                                      1.7.0   stable
Piece_Unity                                      1.1.0   stable
Piece_Unity_Component_Authentication             0.13.0  beta
Piece_Unity_Component_Flexy                      1.0.0   stable
Piece_Unity_Component_NullByteAttackPreventation 1.0.0   stable
Stagehand_FSM                                    1.9.0   stable
INSTALLED PACKAGES, CHANNEL PECL.PHP.NET:
=========================================
(no packages installed)

アップグレード完了後,キャッシュディレクトリ/path/to/pieceblog/web/webapp/cache)以下にあるすべてのキャッシュファイル(cache_XXX)を削除してください。

フロー定義ファイルの作成-エントリー一覧フロー

エントリポイントに着目し画面遷移設計を行った結果,アプリケーション全体のフローは新規エントリー入力フロー,エントリー一覧フロー,エントリー編集フローの3つのフローで構成されることになりました。まずはこれら3つのフローのうち,画面がひとつしか存在しない最もシンプルなフローであるエントリー一覧フローをフロー定義ファイルに落とし込んでみましょう。

エントリー一覧フローのステートチャート図

エントリー一覧フローのステートチャート図

上記のステートチャート図は,下記のように表現することができます。

/path/to/pieceblog/web/webapp/config/flows/Entry/List.yaml

firstState: DisplayList

viewState:

  - name: DisplayList
    view: List

フロー定義ファイルは任意の場所に配置することができますが,今回はサンプルアプリケーションで使われているディレクトリ/path/to/pieceblog/web/webapp/config/flows以下にEntryディレクトリを作成し,そこにList.yamlとして配置することにします。

フロー定義ファイルのフォーマットにはYAML※1が採用されています。YAMLでは配列とハッシュ,スカラー(文字列,数値,真偽値など)を組み合わせることでデータが表現されます。firstState: DisplayListはハッシュのキーと値を表します。firstStateがキーでDisplayListが値です。

firstState要素は,フローが実行された際にイニシャルステートから遷移する先のステート,ファーストステートを表します。基本的に,ファーストステートにはフローの最初の画面を表すステートが指定されることになります。エントリー一覧フローの場合,最初の画面であるエントリー一覧画面を表すDisplayListステートがファーストステートとなっています。

viewState要素は,HTMLテンプレートやリダイレクション先のURLなどのビューを表すステートをひとつ以上持つ配列です。YAMLの配列要素は-(ハイフン)で表されます。エントリー一覧フローの場合,最初の画面であるエントリー一覧画面を表すDisplayListステートが,唯一の配列の要素となっています。viewState配列の要素はハッシュとなっており,name要素にはステートの名称,view要素にはHTMLテンプレートのファイル名やリダイレクション先のURLを記述します。Piece_Unityではビューは抽象化されており,ビューがHTMLテンプレートの場合,そのテンプレートのファイル名から拡張子を取り除いたものを指定します。また,ファイル名のパスを含める必要はありません。

なお,本連載中のステートやイベント,イベントハンドラの名称はPiece_IDEで使われている命名規約に従っています。この命名規約では,ビューステートの名称には必ずDisplayという接頭辞が含まれます。

※1 YAML
データ表現に適したフォーマット。詳細については,プログラマーのためのYAML入門(初級編)を参照ください。

エントリポイントの作成-エントリー一覧フロー

では,エントリー一覧画面が表示されるかどうか試してみましょう。Apacheを起動しブラウザからhttp://pieceblog/list.phpにアクセスしてみてください。

http://pieceblog/list.phpへのアクセス結果画面

http://pieceblog/list.phpへのアクセス結果画面

おっと,404 Not Foundの画面が表示されてしまいました。とはいっても,まだlist.phpを作成していないのでこの結果は当然です。

著者プロフィール

久保敦啓(くぼあつひろ)

Piece Frameworkのアーキテクト及びプログラマー。PEARのNet_UserAgent_Mobileの開発者でもある。今春に株式会社アイテマンを設立。

URLhttp://iteman.typepad.jp/

コメント

コメントの記入