先日、Piece_IDE 0.4.2をリリースしました。Piece_IDE 0.3.0を昨年の夏にリリースして以来、約半年ぶりのリリースです。当初の予定ではバージョン 0.4.0 は昨年秋にリリースすることになっていましたが、アーキテクチャに大幅な変更を加えることになったため、リリースまでに半年を要する結果になりました。その甲斐あって、ページフローエディター Piece_IDE Flow Designer (以下、単にFlow Designer)の操作性はかなり向上しています。今回は開発中の苦労話を交えながら、バージョン 0.4.x を使いこなすために欠かせないFlow Designerの新たな特徴についてご紹介します。
GEFからGMFへ
Flow Designerの新たな特徴をご紹介する前に今回行ったアーキテクチャの変更についてお話します。Piece_IDEではグラフィカルエディターを作成するためのフレームワークとして、バージョン 0.3.0 まではGEF(Graphical Editing Framework)を使っていたのですが、バージョン 0.4.0 からその役割を担うフレームワークをGMF(Graphical Modeling Framework)に変更しました。GMFはモデリングと自動生成を重視したフレームワークであり、エディティングフレームワークとしてGEFを利用しています。
GEFやらGMFやら似たような言葉が出てきて混乱してしまいますが、簡単に表現すると モデリングを重視したフレームワークに変更した ということになります。
ページフローの視覚化だけでなく、その他のDSLエディターの提供も目標とする今後のPiece_IDEにはモデリングの技術と概念が不可欠となることから、今回GMFを採用したわけですが、GMFベースのグラフィカルエディターはその豊富な機能により操作性の向上ももたらしてくれます。
Piece_IDE 0.4.xをインストールする
Piece_IDEのインストールに関しては、インストールマニュアルをご覧ください。(Eclipse 3.3以前をお使いの方はこちらのインストールマニュアルをご覧ください。)
インストールには非常に時間がかかることがあります(場合によっては数時間)が、大抵の場合正常に動作しているため問題ありません。どうしても上手くいかない場合は、ミラーサイトの無効化を試してみてください。
Piece_IDEをインストール済みの場合は更新サイトが登録されていると思いますので、その更新サイトからアップグレードすることができます。ただし、Eclipse 3.4.xではフィーチャーの情報がキャッシュされ、旧バージョンのフィーチャーが表示される場合があります。その場合は [Refresh] ボタンをクリックし更新サイトから最新のフィーチャーを取得してください。
Flow Designerでページフローを作成する
ただ機能を紹介するだけというのも味気ないので、本ブログでお馴染みのユーザ登録アプリケーションのページフローを実際に作成しながら、Flow Designerの機能を紹介していきます。最終的なページフローは以下のようになります。
ページフロー生成ウィザード
それではユーザ登録アプリケーションのページフローを作成していきましょう。従来どおり空の.flowファイルから作成することもできますが、バージョン 0.4.0 からはウィザードを利用することもできます。[File]->[New]->[Other...] を選択することで、ページフローを作成するためのウィザードを実行できます。
ここではファイル名を Registration.flow として作成します。
ステートと遷移イベントの作成
ウィザードが終了するとイニシャルステートのみのページフローが表示されます。まずはビューステートを作成しましょう。エディターの右側に表示されているパレットから ビューステート をクリックし、続けてエディター上の任意の場所をクリックします。この操作によりビューステートが作成されます。
バージョン 0.4.0 からステート、ビュー、遷移イベントが直接エディター上で編集できるようになりました。ステート、遷移イベントは必須となっており、名称を入力しないと他の作業はできません。ここではステートを Form, ビューも Form とします。
次に Validation という名称の アクションステート を作成し、先ほどのビューステートFormからアクションステートValidationへの遷移イベントを作成します。エディターの右側に表示されているパレットから 遷移イベント をクリックし、続けてエディター上の遷移元ステートをクリックします。この時マウスのボタンから指を離さないように注意してください。そしてそのまま遷移先ステートまでカーソルを移動しマウスのボタンから指を離します。この操作により遷移イベントが作成されます。
なお、バージョン 0.4.0 からページフローダイアグラム上に遷移イベントが表示されるようになりました。より効果的になった視覚化を活用するために、遷移イベントには適切な名称を付けるように心がけてください。
筆者らは現在、ステートの名称にステートの種類を表すプリフィックスを付加せず、そのステートの目的を表すシンプルな名称をつけることを推奨しています。(これまではビューステートの場合にはDisplay, アクションステートの場合はProcessをプリフィックスとして付加することを推奨していました。)
これは、Flow Designerではステートの種類を視覚的に認識することができるため、あえてプリフィックスを付与するメリットがないことが理由です。
では残りのステートと遷移イベントを作成しましょう。最終的に作成するステートと遷移イベントは以下のとおりです。
| ステートの種類 | ステート | ビュー |
|---|---|---|
| イニシャルステート | - | - |
| ビューステート | Form | Form |
| ビューステート | Confirmation | Confirmation |
| ビューステート | Finish | Finish |
| アクションステート | Validation | - |
| アクションステート | Registration | - |
| ファイナルステート | - | - |
| 遷移イベント | 遷移元ステート | 遷移先ステート |
|---|---|---|
| Start(固定) | イニシャルステート | Form |
| validate | Form | Validation |
| invalid | Validation | Form |
| valid | Validation | Confirmation |
| reedit | Confirmation | Form |
| register | Confirmation | Registration |
| done | Registration | Finish |
| End(固定) | Finish | ファイナルステート |
これらのステート、遷移イベントを作成した後のダイアグラムは以下のようになります。
ステートや遷移イベントについて 名称を入力しないと他の作業ができないテキストボックス を実装するのはかなり難しいものでした。GMFのデフォルトのテキストボックスは何も入力がない場合空文字として処理を行います。空文字はnullでないため、対象の要素がモデル上で必須と設定されていたとしてもその制約をパスしてしまいます。Piece_IDEでは、文字が入力されないとフォーカスアウトできないテキストボックスを独自に実装することでこの問題に対処しました。
レイアウト
バージョン 0.3.0 までは、ステートなどの画面上の要素が細かく動きすぎるため位置の調整が難しいという問題がありました。バージョン 0.4.0 からはグリッド単位で動かすことができるので、手動でも比較的容易に調整することが可能になりました。
また複数のオブジェクトを選択して整列させる機能も追加されました。先ほど作成したページフローのビューステートの上下の位置を調整してみましょう。まず、Shiftキーを押しながらFormビューステート、Confirmationビューステート、Finishビューステートの順番で選択します。次にツールバーから Align Middle を選択します。これでFormビューステート、Confirmationビューステートの上下の位置がFinishビューステートの位置に合わせて調整されます。
Activityの自動調整
筆者らは現在、遷移イベントに対するアクション(イベントハンドラ)やEntryアクション, Exitアクションといったイベントハンドラは基本的に使わず、Activityのイベントハンドラのみを使うことを推奨しています。これに合わせて、使うことになるアクションがActivityのみになるため、Activityのイベントハンドラの名称に on + ステート名 という命名規約を推奨しています。(これまでは do + ビルドインイベント名 + On + ステート名 という命名規約を推奨していました。)
では、ビューステートFormのActivityを設定してみましょう。命名規約に従って onForm とします。
ステート名はページフローを進化させる過程でどんどん変化していきます。そのたびにActivityの設定を変更するのは面倒で煩雑であり、タイプミスなどでエラーを引き起こすことにも繋がります。そこでバージョン 0.4.0 からはActivityが on で始まる名称を持つ場合、ステート名を変更したときに自動的にActivityが変更される機能が追加されました。
この機能はプロジェクトごとに有効にするかどうかを設定することができます。プロジェクトを右クリックし、[Properties] を選択します。次に [Piece_IDE]->[Flow Designer]->[リファクタリング] を選択し、[ステートのActivityが"on"で始まる場合、ステート名変更時に"on"+ステート名に自動的に調整する] にチェックを入れて、OKボタンをクリックします。
このように設定をしておくと、例えばビューステートFormの名称を Form2 に変更したときにActivityが自動的に onForm2 に変更されます。
この機能の実装もなかなか大変でした。単純にステート名を変更したときにActivityを変更するだけなら簡単なのですが、実際にはUndo/Redoのことも考慮しなければなりません。GMF/GEFではCommandフレームワークが用意されており、すべての変更をCommandフレームワークを経由して行うことでUndo/Redoに対応することができます。そこでFlow Designerではステート名をセットするコマンドが発行されるタイミングでActivityをセットするコマンドも一緒に発行することで、Undo/Redoに対応しています。
苦労して実装した機能でしたが、まだ不完全でしたorzプロパティーシートからステート名を変更した場合に対応していませんでした。これは次のバージョンで対応したいと思います。
便利な機能
以上でページフローは完成ですが、Flow Designer 0.4.0には他にも便利な機能が用意されていますので、いくつかご紹介しましょう。
ズーム機能
ユーザ登録アプリケーションぐらいの規模のページフローでしたら一画面に収まりますが、ちょっとしたアプリケーションのページフローを作成すると一画面に収まらない大きなフローになってしまいます。ズーム機能を利用すると一部を拡大したり、縮小して全体を表示することが可能です。また、[Zoom to Fit] を選択すると全体を表示できる最大の倍率に自動的に設定してくれます。
アウトラインビュー
一画面に収まらないページフローを作成しているときに、ズーム機能と並んで便利なのがアウトラインビューです。アウトラインビューのオレンジ色の矩形が現在グラフィカルエディターが表示している部分を示しています。この矩形をドラッグして移動することで、グラフィカルエディターの表示部分を移動することが可能です。
以下の画像で画面左下のアウトラインビューとグラフィカルエディターの表示位置が連動していることがおわかりいただけると思います。
画像ファイルの出力と印刷
Flow Designer 0.4.0からページフローを画像ファイルとして保存したり、印刷したりできるようになりました。ページフロー上でコンテキストメニューを表示し、[File]->[Save As Image File...] を選択すると画像ファイルとして出力することができます。同じくコンテキストメニューで [File]->[Print...] を選択するとページフローを印刷することができます。
以下は今回のユーザ登録アプリケーションのページフローをPNGファイルとして出力したものです。
0.4.1リリース
Piece_IDE 0.4.0を2月26日の夜にリリースしたのですが、翌日重大な不具合が発覚し、急遽Piece_IDE 0.4.1をリリースすることになりました。重大な不具合というのは、「ステート名を入力しようとするとNullPointerExceptionが発生する」というものでした。これではページフローが作成できません。正確にはプロパティーシートを使えば作成できるのですが、重大な不具合であることには違いありません。というわけで、Piece_IDE 0.4.1を2月27日にリリースしました。
Flow Designerの自動テストの手法が確立されていれば回避できた問題なのですが、グラフィカルエディターのテストは難しく、今後の課題になっています。
なにはともあれ、生まれ変わったFlow Designer。ぜひ使ってみて、ご意見をお聞かせください:-)