プロセス管理の設計情報をテキストで表示してみよう

フォローする

 (著者:Cstap 瀧ヶ平 充

はじめに

こんにちは、サイボウズスタートアップスの瀧ヶ平です。

2016年12月のアップデートプロセス管理の設定の取得APIが追加されました。

お客様にkintoneアプリを納品する際など、アプリの設計書を提出しなければいけないというケースも多いかと思います。そこで、今回はプロセス管理の設定をHTML形式で表示して、ラクラク設計書を作ることができるTipsを紹介します。パース処理の仕方の勉強にもなるかと思います。

完成イメージ

アプリ

赤枠で囲っている設計書のダウンロードボタンができます。

作成したHTML

「設計書のダウンロード」ボタンをクリックすると、HTML形式でプロセス管理の設計情報が表示されます。

Excelへの貼り付け

上記をキャプチャでとって設計書への貼り付けも可能ですが、設計書はExcelで記載するケースが多いかと思います。上のものをそのまま貼りつけると以下のようになります。

使用するAPI

アプリの準備

このTipsでは、「旅費精算申請アプリ」(アプリストアから利用可能)を用いて説明します。

アプリの設定

旅費精算申請アプリは初期状態ではすべてのレコードを承認できてしまうので、事前に制限条件を設定します。

今回は 「電車」または「バス」の利用で金額が「10,000円」以下の申請を承認対象とするため、まず「承認」アクションの実行条件を次のように設定します。

  • 「手段」フィールドを「次のいずれかを含む」に設定し、「電車」または「バス」を選択
  • 「金額」フィールドを「≦(以下)」に設定し、「10000」を入力
  • 「すべての条件を満たす」を選択

次に、領収書がある申請のみを経理確認できるように、「経理確認」アクションの実行条件を設定します。

  • 「領収書」フィールドを「次のいずれかを含む」に設定し、「あり」を選択

ここまで設定したら、以下のような設定になると思います。

カスタマイズ

以下のステップでプロセス管理の設定をHTML化し、ヘッダーメニュースペースにダウンロードリンクを作成します。

  1. アプリのレコード一覧表示後イベントで、
    REST APIからアプリのプロセス管理画面の設定を取得する。
  2. 取得した情報からアプリの実行条件を解析し、HTMLにしやすい形式のデータを作成する。
  3. データをもとにHTMLを作成する。
  4. HTMLのデータをファイル化し、ダウンロードリンクを作成する。

1. アプリのレコード一覧表示後イベントで、REST APIからアプリのプロセス管理画面の設定を取得する

アプリのプロセス管理の設定の取得を利用して、プロセス管理の設定を取得します

2. 取得した情報からアプリの実行条件を解析し、HTMLにしやすいような形のデータを作成する

ドキュメントによると、REST APIから返ってきたデータは次のような構造になっています。

このデータのactionsは以下の項目を含む配列になっています。

この配列のfilterCondにあるクエリは扱いにくいので、使いやすいデータに変換する関数を実装します。

また、ステータス一覧とアクション成形後データを格納する変数を、REST APIのコールバックに定義しておきます。

3. データをもとにHTMLを作成する

ステータス順序つき配列、ステータス一覧表、アクション表、これらを生成する関数を定義し、これらを利用して全体のHTMLを生成する関数を定義します。
HTMLを作成する際には記号のエスケープ処理が必要なので、こちらの関数も用意します。

記号のエスケープ処理をする関数

statesオブジェクトのサンプル

ステータス順序つき配列の生成

ステータス一覧テーブル作成関数

アクション表を作成する関数

4. HTMLのデータをファイル化し、ダウンロードできるようなリンクを作成する

ここまででHTMLは生成できたので、次はこのHTMLをダウンロードできるようにします。

今回は文字列からファイルを作成してダウンロードするためにURL.createObjectURL を利用します。引数として与えたFileオブジェクトまたはBlobオブジェクトを表すURLを生成する関数です。

まず、先ほど作成したHTMLの文字列をFileオブジェクトに変換します。これによってhtmlFile変数にファイルとして先ほどのHTMLを格納することができます。

次にURL.createObject URLでURLを作成し、このURLを開くボタン要素を作成します。これでファイルを実際にダウンロードできるようになります。

最終的にREST APIのコールバックは以下のようになります。

サンプルコード

注意事項

  • サンプルコードはその動作を保証するものではありません。
  • 一部のブラウザではURLの代わりにwebkitURLを利用する必要があります。また、古いバージョンのブラウザでは動作しない可能性があります。
  • アクションの表の「作業ユーザー」には「作業ユーザーのログイン名」が入ります。
  • このサンプルコードではアクションの実行条件やフィールドコード、フィールドの選択肢に" or "または" and "が含まれる場合正しく動作しない可能性があります。必要に応じてコードを修正する必要があります。

サンプルコードの拡張

サンプルコードを拡張することで以下のようなことができます。

  • HTMLの生成部分を変更して文字や背景や枠線の色などを自由に変更できます。
  • bootstrap以外のCSSを読み込むことでもレイアウトを自由に変更できます。

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。
Powered by Zendesk