Polymerでワークフローベースのアプリケーションを構築

ほとんどの方が Nuxeo REST APIとオートメーション APIについてよくご存じで、当社のStudio でワークフローエンジンを試したことがあると思います。今日は、これらをすべて魔法の大釜に入れ、PolymerとMaterial Designとを使用して、シンプルで見やすい単一ページのアプリケーションに変換する方法を説明します。さあ、始めましょう！

Polymer アプリケーションを起動します

スケルトンを生成します

ボイラープレート、スキャフォールディング、コピペ - アプリケーションをブートストラップする多くの言葉があります。JavaScript の世界でよく知られているツールをご紹介します。Yeoman。

Yeoman は、生産性を維持するためのベストプラクティスとツールを定めて、新しいプロジェクトの開始をサポートします。

プロジェクトの開始には役立ちそうです。Yeoman を使用してPolymer ボイラープレートを生成してみましょう。

まず、ノードとYeomanがお使いのシステムに適切にインストールされているか確認します（OSX を使用していることを想定しています）。

$ brew install node
$ npm install -g yo generator-polymer

それから、プロジェクトを生成します。

$ yo polymer

さて魔法をかけましょう。npm と Bower の依存関係をすべてインストールしたら、新しく生成されたアプリケーションを起動してみましょう：

$ cd app
$ gulp serve

ジャーン！これで、あなたの新しい Polymer ベースのアプリケーションのカスタマイズを開始することができます。

Nuxeo Platform のプロキシ

当社のターゲットアプリケーションは Nuxeo Platform サーバ内でホストされるので、開発中に、環境をシミュレートし、実行中の Nuxeo Platform を開発サーバ上の/nuxeo パスの背後に維持する必要があります。

そのために、ファイルの処理中にプロキシを作成するために gulpfile.js を微調整します。

プロキシミドルウェアモジュールをインストールし、dev dependencyとして保存します。

```
 $ npm install --save-dev proxy-middleware
```

gulpfile.js でサーバタスクを探し、次の行を追加します。

```
// 次も参照してください： https://github.com/nuxeo/nuxeo-timeoff/blob/96d09c478bef6da38c27ae80d59dfbb877851ae7/nuxeo-timeoff-web/gulpfile.js#L255-L256
// setup our local proxy var proxyOptions = require('url').parse('http://localhost:8080/nuxeo');
proxyOptions.route = '/nuxeo';
```

プロキシをサーバミドルウェアに追加します。

```
// 次も参照してください： https://github.com/nuxeo/nuxeo-timeoff/blob/96d09c478bef6da38c27ae80d59dfbb877851ae7/nuxeo-timeoff-web/gulpfile.js#L276 middleware: [historyApiFallback(), require('proxy-middleware')(proxyOptions)],
```

Nuxeo Platform を起動し（http://localhost:8080/nuxeo 上で）、gulp serve を実行してアプリケーションを起動します（http://localhost:5000/上で）。[http://localhost:5000/nuxeo](http://localhost:5000/nuxeo)で Nuxeo Platform にアクセスできます。

ワークフローエンドポイントのクエリ

作業用の Polymer アプリケーションを備えたので、Nuxeo Platform およびワークフローエンジンと対話したいと思います。

魔法の仕上げ

インフラストラクチャの準備ができて、素晴らしくカスタマイズされた（隣人よりも優れた）JavaScript エディタを開いて、コーディングを開始することができます。しかしその前に、Nuxeo Platform サーバを要求するために当社のコンポーネントを使用することができますので、依存関係に nuxeo 要素を追加します。

$ bower install --save nuxeo/nuxeo-elements

当社のサンプルアプリで実行したように、要素のリストを app/elements/elements.html に追加します。ここで、オペレーション、REST エンドポイント、ワークフローなどを呼び出すために、コンポーネントを追加することができます。

魔法の呪文、アブラカダブラ！

実際の使用事例を使用してトリックを説明したほうがずっと簡単なので、その事例をご紹介します！timeoff-pending.htmlウェブコンポーネントを開いて、手順を説明します。

認証

対象は、Nuxeo Platform 内で実行するアプリケーションです。つまり、当社の認証フィルタのほかに、現在のユーザがすでにその HTTP セッションで認証されていると想定できることになります。したがって、この構成において認証について心配する必要はなくなります。

nuxeo-resource エレメント

ソースからサンプルを取り上げます。

<nuxeo-resource id="nxoPending"
                auto
                path="workflow"
                response=></nuxeo-resource>

この要素は、応答をデータプロパティに結合させる、id nxoPending を有するワークフローエンドポイントに対する要求を定義します。コンポーネントがロードされたときに自動的に実行されます。Nuxeo プレイグランドワークフローエンドポイントのマニュアルでは、データプロパティには現在のユーザが起動したワークフローインスタンスがすべて含まれていることを確認することができます。

データプロパティのループ

ソースから別のサンプルを取り上げます。データに何かが含まれていて、その上にループがある場合、プロパティ結合を使用して、テンプレート要素がレンダリングされます。

<template id="tmpl_entries" is="dom-repeat" items='[[data.entries]]' as="item" filter="timeOffWkf">
<div class="request flex">
<timeoff-entry data$=[[item]] id="entry_[[item.id]]"></timeoff-entry>
<div class="actions">
<button-edit-workflow class="button" on-edited="refreshTasks" workflow="[[item]]"></button-edit-workflow>
<button-delete-workflow class="button" on-deleted="refresh"
workflow-id="[[item.id]]"></button-delete-workflow>
</div>
</div>
</template>

各エントリについて、現在のワークフローの状態を表示する、時間外のエントリコンポーネントがレンダリングされます。現在のワークフローに結びついているワークフロー編集とワークフロー削除のアクションを処理するのに、同じ規則を使用していることが分かると思います。

ワークフローをすべて表示したいわけではないので、注意してください。また、表示された項目をフィルタする DOM リピート属性フィルタを使用します。

これで完成！

このようにして、ワークフローエンドポイントを要求するコンポーネントを使用して、現在のユーザインスタンスをすべて有し、それらをフィルタリングし、他のコンポーネントを使用してそれらを表示することができます。魔法のようではないですか？

もっと試してみる

タスクの検証や拒否など、ワークフロー API で他のことも試してみたい場合、時間外の保留タスクコンポーネントや、もっと正確には、時間外の承認タスクまたは時間外の否認タスクを確認することができます。さらに、タスクの検証、ワークフローの作成、コンテンツ拡充機能を含んでいる当社サンプルアプリケーションのnuxeo-timeoffのクローンを作成します。

Polymer のテクニック

Polymer の理解が深まってきたところで、役立つテクニックをもう少し紹介いたします。

動作

これは本当に役立ちます。動作を使用してコードを共有するのは便利です。

たとえば、当社の時間外のヘルパー動作で実行したように、複数のコンポーネント間の非ライフサイクルメソッドを簡単に相互化することができます。または、当社の時間外のタスクコメント動作のように、いくつかのプロパティまたはライフサイクルメソッドの共有など、さらに良いものを実行することができます。これにより、コメントを変数に保存するワークフロー API の要求を作成する能力を有する複数のコンポーネントを持つことが可能になります。

一度記述すると、どこでも使用できる！Polymer 動作メカニズムを使用する場合は、自分で考えなければなりません。

カスタムプロパティのスタイリング

特にシャドウ DOM で、ご自身のスタイルでハードコーディングする手間をかけたくない場合は、カスタムプロパティのスタイリングは役立つでしょう。時間外エントリのユーザがそのユーザのイニシャルのカラーを処理する方法を詳しく見ていきましょう。

目標は、ユーザ名にユニークなカラーを付けることです。ハードコーディングされたカラーの単純な配列を使用して、ユーザ名の簡単なインデックスを計算し、そのカラーを選択すれば、終わりです。しかし、もっと良いやり方があります！CSS は、Polymer に実装される可変システムを提供し、Polymer は Material Design で役立つカラー変数を提供します。しかし、コンポーネントのライフサイクルのために、CSS の変数はレンダリングされてからロードされた状態になり、前もってユーザ名を知ることができません。したがって、ユーザ名のカラーを計算し終わった際に、コンポーネントのスタイルを再計算する必要があります。そこで、カスタムプロパティ APIが助けに来てくれます。

CSS:
#badge {
background: var(--user-color);
}

JavaScript Observer:
_userChanged: function() {
// names[this.username].color contains a CSS variable name
this.customStyle['--user-color'] = this.getComputedStyleValue(names[this.username].color) + ';';
this.updateStyles();
},

完全にnuxeo-timoffプラグインで実行したい場合、公開のNuxeo パッケージとして利用できます。インストールし、http://localhost:8080/nuxeo/timeoffをブラウズして、お楽しみください！