Chapter 2: 簡単なアプリを作ってみる

「申請者」が「管理部」に何か申請をしてそれを確認してもらう、という簡単なアプリを作ってアプリ作成の基本を学びましょう。Chpt.1 の「作業依頼フロー」よりずっと単純なアプリです。

「あなた」のアカウントでログインして、ページ右上のユーザ名からアプリ設定を選択してください。アプリ一覧が表示されたアプリ設定画面に移ります。アプリを新しく作るので、タイトル下のアプリ新規作成をクリックしてください。

アプリの新規作成画面が開くので、アプリ名だけわかりやすい名前を入力しておきましょう。表示優先度は 0 のままで構いません。入力が終わったら、新規作成ボタンをクリックしてください。ワークフローアプリのモデラーが起動します。

モデラーも Adobe Flash Player を使用しています。もし起動しない場合、Adobe Flash Player が有効になっているか確認してください。また Flash 実行の許可を求められた場合は許可してください。

さて、アプリは以下の 3 要素で構成されています。

ワークフロー図
業務がどのような流れで進むかを表したもの
データ項目
どのようなデータが取り扱われるかを定めたもの
処理担当者
誰がその処理を担当すべきかを定めたもの

この 3 要素を順番に作っていきましょう。まずはワークフロー図からです。

ワークフロー図の作成

このようなワークフロー図を作成します。まず、開始イベント/終了イベントと各タスクを配置しましょう。左にある basic パレットには、次の 4 種類のオブジェクトが用意されています。

スイムレーン
ヒューマンタスク
開始イベント
終了イベント

ドラッグ&ドロップでオブジェクトを以下のように配置してください。

クリックではオブジェクトをつまめません!

次に各部の名称を変更しましょう。上のスイムレーンは「申請者」、下のスイムレーンは「管理部」、 1 つ目のヒューマンタスクは「申請」、 2 つ目のヒューマンタスクは「確認」という名称にします。各オブジェクトをダブルクリックすると、プロパティウインドウが開きます。

名称を変更して、右上のでウインドウを閉じましょう。ヒューマンタスクは少し違うウインドウが開きますが、名称は同じように変更できます。

このようになりました。あとはフロー(矢印)を引くだけです。各オブジェクトのフチにカーソルを合わせると、フチがオレンジ色にハイライトされます。その状態でドラッグ&ドロップしてみましょう。

このように線が引けますね。矢印の向きに注意して、各オブジェクトの間にフローを作りましょう。

ワークフロー図の完成です!

もし細かい操作がわからなくなったら、チュートリアル動画で確認することをおすすめします。モデラの各種操作について、実際の操作の様子を見ることができます。

描き間違えたときは?

オブジェクトを置き間違えた、フローを違うところに引いてしまったといったときは、そのオブジェクト/フローを削除して置き直しましょう。

オブジェクトやフローを選択した状態でBackSpaceキー/Deleteキーを押すと、ワークフロー図から削除されます。また、オブジェクトやフローを左下のゴミ箱アイコンまでドラッグ&ドロップで持っていっても削除できます。ゴミ箱の上でポンとオブジェクトを離してください。

フローをゴミ箱に捨てるときは、フローの先端か根本のどちらか一方を掴んで持っていくこともできます。

データ項目の設定

では次にデータ項目を設定します。モデラーのタブをデータ項目に切り替えてください。このタブではアプリで取り扱うデータ項目の種類や、タスク処理画面に表示されるフォームの設定などができます。

「件名」は最初から設定されています。今回はこれに、数値日付を追加しましょう。追加のプルダウンメニューから「数値」と「日付」をそれぞれ選択してください。これでもともとあった「件名(文字データ)」に加え、プロセス中で数値データ 1 つと日付データ 1 つが扱えるようになりました。

間違ってデータ項目を追加してしまったときは、その項目を削除してください。データ項目タブ右側に表示されている、項目名の右隣にゴミ箱マークの削除ボタンがあります。いらないデータ項目を左のリストから選択して、削除しましょう。

あとはそれぞれのタスクの処理画面で、各データ項目を書き込めるか/読み込めるかを設定しましょう。

申請 確認
件名 編集可 表示のみ
数値0 編集可 表示のみ
日付1 編集可 表示のみ

データ項目の読み書き権限は上のように設定します。「表示のみ」に指定されたデータ項目は表示することはできますが、編集して書き換えることができなくなります。申請内容を確認するだけのタスクであれば、データ項目を編集する必要はありません。各タスクでのデータ編集許可はオブジェクトのプロパティウインドウから設定できます。ワークフロー図を作成したワークフロー図タブに戻りましょう。

データ項目タブからもデータ編集許可設定ができることに気付かれた方もいらっしゃるかもしれません。はい、実は「データ編集許可」「データ編集許可へ移動」のボタンからも設定が可能です。ただしこれから使う方法と画面のレイアウトがかなり異なるので、今回はそちらの方法は省略します。

「申請」と「確認」のヒューマンタスクをダブルクリックして、プロパティウインドウを開いてください。「データ編集許可」のラジオボタンを正しく編集しましょう。「申請」であれば上のスクリーンショットのようになります。この作業が終わればデータ項目の設定は完了です!

処理担当者の設定

次に、「各スイムレーンの担当者は誰/どの部署/どの役職より上位の社員/etc.なのか?」という設定をします。処理担当者のタブに移動してください。今は「申請者」も「管理部」もアプリ作成に使用しているアカウントになっています。これでは自分で申請を出して、自分で確認することになってしまいますね。まずは「管理部」の担当を変えてみましょう。

「管理部」スイムレーンの担当者設定

今の状態では、スイムレーン「管理部」の担当になっているのは「あなた」です。変更するために、「管理部」スイムレーンの担当者リストから「あなた」を選択して編集ボタンを押し……

「ユーザ」のプルダウンメニューをクリックして、ユーザ選択ウインドウを開いてください。ここでは「カナリア」を管理部スイムレーンの処理担当者に指定しましょう。カナリアを選択して「選択」ボタンをクリックし、ユーザ選択ウインドウが閉じたら「確定」してください。

ここで一旦アプリの動作を見てみましょう。右上の保存ボタンで保存して、隣の閉じるボタンでモデラーを終了してください。

モデラーを終了すると、アプリの詳細画面が開きます。「アプリを実際に動かすには、バージョン 1 をリリースする必要があります。」とある通り、このままでは作成したアプリは「下書き」の状態です。実際に使えるようにするには、「リリース」しなければいけません。開発中のバージョン 1 のリリースをクリックして下さい。バージョンメモを求められますが、空欄で構いません。これで作成したアプリのバージョン 1 がリリースされ、使える状態になりました! さっそく試してみましょう。

ページ上部の「ワークフロー」→左メニューの「新規開始」から作成したアプリを使用してみましょう。プロセスの新規開始は開始ボタンからでしたね。

設定したデータ項目「件名」「数値0」「日付1」の入力を求められているでしょうか。これら 3 つのデータ項目は、「申請」タスクにおいて「編集可」の設定にしたので、この画面で入力ができるようになっています。このようにデータ編集許可設定は、どのタスク処理画面でデータの入力を行うかを管理しているのです。また「日付1」は日付データとして追加したので、カレンダーから日付を選べるようになっていたり、今の日付をワンクリックで入力できたりするようになっています。正しいデータタイプを用いることでデータの取扱いがぐっと楽になります。では「件名」「数値0」「日付1」は適当に設定して、「申請処理完了」しましょう。

さて、先ほど設定したワークフロー図と処理担当者を思い出してみてください。「申請」タスクが終わると、「管理者」のスイムレーンの「確認」タスクに移ります。「管理者」スイムレーンの処理担当者は「カナリア」に変更したはずでした。「カナリア」のアカウントにログインして、「確認」タスクを処理しましょう。

もし「管理者」の処理担当者を忘れてしまった……というときは、アプリの詳細画面を開いてワークフロー図を見てください。モデラーと同じようにダブルクリックで各部のプロパティウインドウを開くことができます。

アカウントを切り替えて「マイタスク」を確認すると、タスクが届いています。確かに指定した処理担当者にタスクが割り当てられました。そして処理画面を開くと、入力できる項目は 1 つもありません。「確認」タスクでは、すべての項目のデータ編集許可設定を「表示のみ」にしたためです。では、ボタンを押すだけなので処理してしまいましょう。作成したアプリはきちんと動作しましたね。このように「ワークフロー図」は処理の流れを、「データ項目」はタスク処理画面に表示される項目を、「処理担当者」はタスクが誰に届くかを制御しています。

処理担当者が複数人いたら?

では、処理担当者が複数人いたらどうなるのでしょうか。作成したアプリを少し改造して確かめてみましょう。アプリを作成したアカウントに戻って、「アプリ設定」からアプリの詳細画面を開いてください。

バージョン 1 はもうリリースしたので、これから編集するのはバージョン 2 になります。編集ボタンをクリックしてモデラーを開いてください。「管理部」スイムレーンの処理担当者を 1 人増やしてみます。「スマトラ」と「カナリア」の 2 人が所属している組織「10 管理部」を処理担当者に指定してみましょう。処理担当者タブの「管理部」スイムレーン設定で、既に担当者として設定されているユーザ「カナリア」を選択して編集してください。

「組織」のラジオボタンを選択して右のプルダウンメニューをクリックすると、組織選択ウインドウが開きます。最上位組織より 1 階層下にある「10 管理部」を「選択」、「確定」してください。「に直接所属するリーダまたはスタッフ」はそのままで構いません。

「管理部」スイムレーンの処理担当者が組織「10 管理部」になりました。これで保存してモデラーを閉じましょう。動作を確認するには、リリースしなければいけません。アプリ詳細画面に戻ったら開発中のバージョン 2 のリリースをしてください。

リリースできたら動かしてみましょう。左上の「ワークフロー」→左メニューの「新規開始」→プロセスの開始ボタンで最初のタスクをまずは処理します。「件名」「数値0」「日付1」は適当に入力してください。処理したら今度は組織「10 管理部」に所属する 2 人、すなわち「スマトラ」と「カナリア」のアカウントでそれぞれログインして状態を確認してみましょう。

「マイタスク」ではなく「引き受け待ち」になっていますね。もう片方のアカウントでもそうなっています。タスク詳細の「処理中の工程」には、このタスクの処理担当者の候補者が表示されています。「引き受け待ち」とはこの候補者のうち、誰かがタスクを引き受けてくれるのを待っている状態のことです。候補者の誰かが「引き受ける」「引き受けて処理開始」のどちらかを選んだ時点でタスクはその人の「マイタスク」となり、他の候補者の「引き受け待ち」から消えます。「早いもの勝ち」ということです。ではどちらかのアカウントでタスクを処理して、プロセスを開始したアカウントの「開始したプロセス」を確認してみてください。

確かにプロセスは終了しています。このように、1 つのスイムレーンに複数の処理担当者を割り当てることもできるのです。

「申請者」スイムレーンの担当者設定

では、「申請者」スイムレーンの担当者設定はどうなっているでしょうか。モデラーで確認してみましょう。「アプリ設定」から出張申請アプリの詳細ページを開き、「編集」ボタンからモデラーを起動してください。処理担当者タブを見てみましょう。

このように、今の状態ではアプリの作成者である「あなた」だけになっています。

実は、「開始イベント」があるスイムレーンとそれ以外のスイムレーンでは、処理担当者の意味が少し違います。「開始イベント」がないスイムレーンでは、処理担当者は「そのスイムレーンで発生したタスクを処理できるのは誰か」という意味になります。対して「開始イベント」があるスイムレーンでは、「該当業務のプロセスを開始できるのは誰か」という意味になります。

つまり今の状態では、プロセスを開始して出張申請を出せるのは「あなた」だけになっている、ということです。しかし先ほどのように、処理担当者の設定に組織を用いれば、全社員を「申請者」スイムレーンの処理担当者に指定することができます。そうすることで全社員がプロセスを開始できるようになり、出張申請を出せるようになるのです。

では「あなた」を選択して「編集」し、「組織」「00 全社」「に直接所属するリーダまたはスタッフ」を選択してみてください。これで社員なら誰でも、「申請者」スイムレーンの処理担当者になれそうに見えます。

しかし「候補者の表示」をクリックすると、「あなた」のアカウントしか表示されません。「00 全社」「に直接所属するリーダまたはスタッフ」という設定は、組織「00 全社」に直接所属している社員のみを列挙するのです。

組織図を見ればわかる通り、組織「00 全社」に直接所属しているのは「あなた」だけです。他の社員は「00 全社」より下位の組織に所属していることになっています。彼らが候補者に挙がるようにするには、「組織」「00 全社」「より下位組織に所属するリーダまたはスタッフ」を処理担当者に「追加」してください。これで全社員が出張申請を出せるようになりました。

「〇〇より下位組織に所属するリーダまたはスタッフ」では組織〇〇の所属社員が対象になりません。この 2 つを組み合わせて、はじめて全社員が対象になります。

ここまでできたら、アプリを保存してリリースしてみましょう。「あなた」以外のアカウントからでも、プロセスの「新規開始」ができますか? どのアカウントからもプロセスが開始できれば設定は成功です。

これで Chapter 2 の内容は終了です。「社員が出した出張申請を管理部が確認する」という簡単なアプリが作成できました。しかし実際の業務を思い浮かべると、これではまだまだ足りませんね。「誰が出した出張申請であろうと、その確認は管理部の担当なのだろうか?」「申請を却下したい場合もあるのでは?」「モノによっては社長に話を通さないといけないかも……」など、アプリを作り込む余地はまだまだありますね! Chapter 3 ではそういった、やや発展的な内容を扱います。ワークフロー図もデータ項目も処理担当者も、まだ紹介していない設定方法があるのです。次のステップでより実用に近付いたアプリを作りながら学んでいきましょう。

「Chpt.3: 出張申請アプリを作る」に続く