> How to create new own controls in OpenUI5(Part 1)

OpenUI5 は UI フレームワークという名前の通り、多くの優れた UI コントロールを持っていますが、場合によっては少しカスタムして使いたいという要望は時々あります。

さて、OpenUI5 にてカスタム UI コントロールを作成する方法は「新規で作成する」「既存の UI を拡張する」の 2 つありますが、少し長くなるので、2 部構成で説明していきます。
前編は新規で作成する方を説明します。

今回のデモはこちらで参照できます。

[http://mitsuruog.github.io/sapui5-showroom/#/controls](http://mitsuruog.github.io/sapui5-showroom/#/controls)



### 目次

こちらの公式ページの内容をもとに書いています。

[Developing UI5 Controls in JavaScript](https://openui5.hana.ondemand.com/#docs/guide/91f1703b6f4d1014b6dd926db0e91070.html)

## 1. 新しい UI コントロールの定義(Definition of UI controls)

新しい UI コントロールを作成するためには、まず`sap.ui.core.Control`を継承する必要があります。以下のコードは新規で`mitsuruog.SayHello`という名前の UI コントロールを定義しています。

```
sap.ui.core.Control.extend "mitsuruog.SayHello",
  metadata: {}
  renderer: {}
```

## 2. UI コントロールメタデータの定義

新しく定義した UI コントロールが持つ特徴をメタデータ(定義情報)として定義していきます。定義できるメタデータの属性は`Properties`、`Events`、`Aggregations(Associations)`の 3 つです。順に説明していきます。

### Properties

Properties とは、その名の通り UI コントロールに外部からアクセスできるプロパティ定義です。例えば、`name`という Properties を定義した場合、UI コントロールを初期化(new)する際に、`name`プロパティにパラメータを渡すことができます。以下の属性を定義します。

- **type**: プロパティのデータタイプを指定します。これを指定する事で OpenUI5 が提供する validation が機能します。デフォルトは`string`です。
- **defaultValue**: デフォルトを指定します。何も指定しない場合は`undefined`です。
  Properties にはアクセスレベルが指定できるようです(未検証)。[Object Metadata and Implementation](https://openui5.hana.ondemand.com/docs/guide/91f29fea6f4d1014b6dd926db0e91070.html)

### Events

UI コントロールから発火するカスタムイベント名を定義します。

### Aggregations(Associations)

UI コントロールに外部からリストを渡したい場合に定義します。`sap.m.List`の`items`や`sap.m.Page`の`content`に相当します。以下の属性を定義します。

- **type**: Aggregations に設定するクラスを定義します。`sap.m.List`の`items`場合は`sap.m.ListItemBase`です。デフォルトは`sap.ui.core.control`です。
- **multiple**: `0..n`の場合は`true`、`0..1`の場合は`false`にします。何も設定しない場合の挙動が面倒なので、必ず設定しましょう。
- **singularName**: 単数の場合の名前を定義します。通常は複数系の`「s」`を取り除いた形を指定します。`items`の場合は`item`です。この辺り、正直 OpenUI5 に慣れてないとピンとこないと思いますので、詳細は割愛します。

実装例)

```

sap.ui.core.Control.extend "mitsuruog.BlueContainer",

  metadata:
    properties:
      boxColor:
        type: "string"
        defaultValue: "#CBE6F3"
    events:
      hover: {}
    aggregations:
      items:
        type: "sap.ui.core.Control"
        multiple: true
        singularName: "item"

    renderer: {}

    onmouseover: (evt) ->
      @fireHover()
```

詳細は公式ベージを確認してください。

- メタデータについての詳細
  [Defining the Control Metadata](https://openui5.hana.ondemand.com/#docs/guide/7b52540d9d8c4e00b9723151622bbb64.html)
- メタデータを定義した場合、使用しない方がいいメソッド名についての注意事項など
  [Adding Method Implementations](https://openui5.hana.ondemand.com/#docs/guide/91f0a8dc6f4d1014b6dd926db0e91070.html)
- Properties の指定方法の詳細
  [Defining Control Properties](https://openui5.hana.ondemand.com/#docs/guide/ac56d92162ed47ff858fdf1ce26c18c4.html)

## 3. レンダラの実装

レンダラとは実際に UI コントロールの HTML を出力する部分です。HTML を書き出す際は、内部的に`sap.ui.core.RenderManager`の各メソッドを呼び出します。良く使いそうなものはこちらです。

- **write**: HTML を出力します
- **writeEscaped**: エスケープして HTML を出力します
- **writeControlData**: OpenUI5 上が内部で UI コントロールを管理するための ID を出力します。これが無い場合、内部のイベントがハンドルできません。結構重要です。
- **addStyle**, **writeStyles**: インラインスタイルを出力します
- **addClass**, **writeClasses**: CSS クラスを出力します
- **renderControl**: 与えられた UI コントロールのレンダラを実行します。Aggregations(Associations)あたりで使うようです。

実装例）

```
sap.ui.core.Control.extend "mitsuruog.BlueContainer",

  metadata:
    # 省略

  renderer: (rm, control) ->

    rm.write "<div"
    rm.writeControlData control
    rm.addClass "blue"
    rm.writeClasses()
    rm.write ">"

    # Aggregations(Associations)のデータはこうやって受け取る
    items = control.getContent()

    for item in items
      rm.write "<div"
      rm.addStyle "display", "inline-block"
      rm.addStyle "border", "1px solid #{control.getBoxColor()}"
      rm.addStyle "margin", "7px"
      rm.addStyle "padding", "7px"
      rm.writeStyles()
      rm.write ">"

      rm.renderControl item
      rm.write "</div>"

    rm.write "</div>"
```

ある程度書き慣れてくると、レンダラについてはお決まりのパターンが見えてくるでしょう。また、似たような OpenUI5 のソースを読むのもいいと思います。
詳細は公式ページを参照してください。

[JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.ui.core.RenderManager](https://openui5.hana.ondemand.com/docs/api/symbols/sap.ui.core.RenderManager.html)

## 4. 配布、利用

配布方法は UI コントロールを 1 つの Javascript ファイルにまとめて`index.html`で読み込めばいいと思います。
OpenUI5 には`RequireJS`のようなモジュールシステムがあるので、以下のようにモジュール化して呼び出し先でロードします。

```
#
# カスタムUIコントロール側
#
jQuery.sap.declare "com.mitsuruog.sapui5.showroom.controls.BlueContainer"

sap.ui.core.Control.extend "mitsuruog.BlueContainer",

  # 以下、省略


#
# 呼び出し側
#
jQuery.sap.require "com.mitsuruog.sapui5.showroom.controls.BlueContainer"

sap.ui.jsview "someView",

  createContent: (oController) ->

    # new でUIコントロールを初期化します。
    blueContainer = new mitsuruog.BlueContainer

    # 以下、省略

```

## 5. まとめ

今回は新しい UI コンポーネントを作成する方法について説明しました。
実装の細かい部分は Github 上のサンプルを参照してください。

- UI コンポーネント側
  - [https://github.com/mitsuruog/sapui5-showroom/tree/master/coffee/controls](https://github.com/mitsuruog/sapui5-showroom/tree/master/coffee/controls)
- UI コンポーネント利用側
  - [https://github.com/mitsuruog/sapui5-showroom/blob/master/coffee/view/Controls.view.coffee](https://github.com/mitsuruog/sapui5-showroom/blob/master/coffee/view/Controls.view.coffee)
  - [https://github.com/mitsuruog/sapui5-showroom/blob/master/coffee/view/Controls.controller.coffee](https://github.com/mitsuruog/sapui5-showroom/blob/master/coffee/view/Controls.controller.coffee)

私が普段利用している OpenUI5 のモバイル用ライブラリ(sap.m〜)では v1.22 の時点で 73 の UI コントロールを持っています。OpenUI5 自体の UI が優れているため、新規で UI コントロールを作成するケースはあまりないように思えます。  
また、レンダラを実装していると Java の taglib を思い出して、軽いめまいを覚えますね。(まぁそこは置いといて。)

経験的にも良くあるケースとしては、既存の UI を少しカスタムしたいケースだと思います。  
その辺りは[後編](/2014/10/sapui5openui5ui/)にて取り上げたいと思います。

[SAPUI5/OpenUI5]カスタムUIコントロールを作成する方法(前編)

自分用メモです。

```
git reset --hard origin/work
git push -f origin master
```

work ブランチで作業していて、コミットログをきれいにしようとして rebase するのですが、ぶっちゃけ個人用リポジトリ(※)なので、master の中途半端なコミットログも最初まで rebase して、master に強制マージ&プッシュする場合の手順。



> (※)公開リポジトリの場合は、コミットのハッシュが変わってしまい、阿鼻叫喚となるので禁じ手。

[Git]workブランチの内容をmasterへ強制マージ

昨年より IT 系のハンズオンをそれなりの回数行ってきて、良かったものから失敗まで様々経験した中で、ノウハウがたまってきましたので、気をつけるべきポイントを 6 つまとめてみたいと思います。

過去のハンズオンで記事にしているものは次の通りです。

- [Web Components ハンズオンをやってみた](/2014/09/web-components)
- [SIer で Node.js 初心者を集めてハンズオンをやってみたという夢のある話](/2013/12/siernodejs)



![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/handson1.png)

## 目次`

## 1. ハンズオンとは

> 体験学習を意味する教育用語。ー(中略)ー 本で学ぶだけでなく実際に行った方が学習効果が上がるという考えに基づく。
> [ハンズオン - Wikipedia](http://ja.wikipedia.org/wiki/%E3%83%8F%E3%83%B3%E3%82%BA%E3%82%AA%E3%83%B3)
> 座学だけではなく、実際に手も動かしましょうという育成方法で、実際に手が動かないといけないエンジニアにとっては最適な育成方法だと思います。

座学では習得に時間が掛かるのですが、経験者の指導の元、集団学習の相乗効果もあり、質の良いハンズオンは短時間で効率的なスキルの習得ができると思います。

## 2. ハンズオンの心得

ハンズオンで最も悩ましいことは、ハンズオンが体験をベースにしているため**「当日にならないと分からないことが多い」**ということです。

ハンズオンは生ものです。参加者も初心者から上級者まで混ざって同じハンズオンを行うことになります。発表形式の勉強会・セミナーや、長時間作業するハッカソンのようなイベントとは全く別次元の難しさがあると思った方がいいでしょう。

さらに主催側での現場判断が非常に多いのがハンズオンの特徴です。そのため、成功させるためには用意周到な準備が必要です。

## 3. 成功させるための 6 つのポイント

では、本題。私が考えるハンズオンを成功させるための 6 つのポイントです。

### ポイント 1. ゴールの設定

ゴールの設定で間違いやすいことは「技術の正確さを伝える」ことがゴールとなっているケースです。経験的に、ハンズオンは「今、覚える技術の価値」に重きを置いて、ハンズオンではその**価値を体験させて感じさせることをゴールにするべき**だと思います。
これはハンズオンを受けた参加者の満足度に最も関わってくるポイントだと思うのですが、後日、参加者が自主的に考えて不足分を学習するように仕向けられるのが理想です。その楽しみをハンズオンで奪ってはいけません。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/handson2.png)

つまり、**魚のつり方ではなく魚を釣ることの価値についてゴールを置くべきです**。

### ポイント 2. 自習型コンテンツ

コンテンツについては**「自習型」「拡張性」**の 2 点です。参加者には様々なレベルがいる事を想定します。特に注意することは**上級者を飽きさせないこと**。上級者が飽きてくると場が白けだします。上級者にはどんどん先に進んでもらって、自分のイマジネーションを膨らませてハンズオンの題材を拡張してもらえるようなコンテンツとなっていることが理想です。

自習型コンテンツはハンズオンに付いて来れなかった人が後日、復習できるためでもあります。また、ハンズオン参加者が後日講師になることも想定しています。

### ポイント 3. タイムキーパー

ハンズオンの章ごとに制限時間があると、**緊張感を保ったままテンポ良く進めることができます**。制限時間があることで、そこまでに内容を終わらせなければなりませんし、周りの状況と比べてることで参加者が自身のレベルを把握しやすくなります。

ただし経験上、講師とタイムキーパーを兼務することは非常に難しいです(中には出来る人がいるようです・・・)。誰か別の人にタイムキーパーを頼んだ方がいいでしょう。講師はタイムキーパーの報告と現場の状況を鑑みて、タイムマネージメントしていく必要があります。

こちらが Web Components ハンズオンを行った際のタイムテーブルです。当日はこれをベースにいろいろ時間のやりくりしてました。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/handson3.png)

### ポイント 4. チューター

制限時間に間に合わなかった場合や、講師が手が開かない場合に参加者のフォローを担当してもらいます。チューターがいる事で、安心して(いろいろ切り捨てて)計画された時間通りにハンズオンを進めてることができます。**ハンズオンが途中で時間切れになってしまうほど、後味が悪いものはありません**。講師はより多くの人をゴールまで導くよう努力しなければなりません。

### ポイント 5. 代替え開発(実行)環境

参加者によって PC や実行環境は異なります。PC 固有の事情で実行環境が動作しなかったり、開発が出来なかったりした場合、そのフォローでハンズオン全体の進行が遅れることさえあります。そのため、**万が一のため、クラウドやブラウザ上で動作するような代替え環境を準備しておく**といいでしょう。

フロントエンド開発のハンズオンでは「[Cloud9](https://c9.io/)」がおススメです。

### ポイント 6. 成果発表会

作ったものは何かしら発表する機会があった方がいいです。その方が参加者同士の刺激になります。講師側も見てて楽しいです。

##︎ 4. 課題

一番の課題は 0 からコンテンツを作る場合のコストです。

ハンズオンの内容にもよるのですが、必ずしもコンテンツを作る必要はなく、海外の Blog とかチュートリアルなどをコンテンツとして利用してみるのもいいと思います。

## 5. まとめ

ハンズオンを成功させるためのポイントについてまとまったものが無かったので、私が考えるハンズオンを成功させるためのポイントを 6 つまとめてみました。

1.  ゴールの設定
2.  自習型コンテンツ
3.  タイムキーパー
4.  チューター
5.  代替え環境
6.  成果発表会

成功のさせるには「ゴールの設定」が最も大事なのですが、現場をうまく回すためには「タイムキーパー」と「チューター」が地味に大事だと思います。

いかがでしたでしょうか。

## 番外

### a. 場を作る

ハンズオンの会場の制約などあって必ずしも出来る訳ではないのですが、「場」というものを常に意識して会場の設営などやってます。こちらのスライドに良くまとまっています。

[夏サミ B5「そろそろ社内研修を活かしませんか？」](https://www.slideshare.net/gaoryu/20130801-devsumi)

IT系ハンズオンを成功させるための6つのポイント

2014/09/09 に美人で有名なおだんみつさんのいる[21cafe](http://www.ni-ichicafe.com/)で「[エンタープライヤーのための Web Components ハンズオン](https://atnd.org/events/55761)」を開催しました。内容は「Web 名刺」を Web Components で作るというものです。

Web Components についての解説記事はそこそこ出てきましたが、ハンズオンだと国内初の試みかと思います。それなりに難しい技術に関するハンズオンでしたが、なかなか好評だったようですので少し振り返ってみます。



![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/wc_handson1.png)

## 目次

## Web Components とは

UI 部品がコンポーネント化して再利用しやすくすることが出来る技術です。詳細は Google のえーじさんが[なぜ Web Components はウェブ開発に革命を起こすのか](http://blog.agektmr.com/2014/05/web-components.html)で書いている記事が分かりやすいかと思います。とにかく将来の Web 開発に革命を起こすと言われる技術です。

## 苦労したポイント

2 時間のハンズオンコースですので、その限られた時間内で結果を出さなければなりません。
今回苦労したポイントは 2 つです。

1.  Web Components のメリットを感じつつ、作ってて面白く、参加者が本気になる題材はなにか。
2.  Web Components の複雑に絡み合った仕様を最短で理解してもらうためには、どうすればいいか。

「題材」については自分のカスタムタグが作れて気軽に配布できると嬉しい「Web 名刺」にしました。
最短で理解してもらうための構成とコンテンツ作りには難儀しましたが、Web Components のコンセプトについては「花の種」を例えて、コンテンツの方は、講師がいなくても出来るように[Github](https://github.com/html5bizj/x-business-card)上に作りました。
(Github のコンテンツについてはかなり試行錯誤して悩んだのは事実です。)

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/wc_handson2.png)

> [エンタープライズな@mitsuruog さんならではの「Web Components は花の種で理解しよう」論いいねっ ∩( ・ω・)∩ ](https://twitter.com/21cafe_shibuya/status/509291557111885825)

参加者からは嬉しい反応もいただけたので、なかなかハンズオンとしては成功だったようです。主催としてはホッとしています。

こちらが当日の様子です。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/wc_handson3.jpg)

> [ 昨日は WebComponents ハンズオンありがとうございました。信じがたいことにあの 2 時間だけでかなり自在に WebComponent が書けるようになりました。(^^;;;](https://twitter.com/shunjikonishi/status/509540957809692672)

> [Web Components すごい](https://twitter.com/ab_lave/status/509320071731109888)

発表資料はこちらです。

[エンタープライヤーのための Web Components ハンズオン](https://www.slideshare.net/mitsuruogawa33/webcompoents)

ハンズオンの内容についてはこちらにあります。

[html5bizj/x-business-card](https://github.com/html5bizj/x-business-card)

## 成功したポイント

成功したポイントはいくつかあるのですが、簡単に言うと[@kara_d さん](https://twitter.com/kara_d)のこの一言、「企画」なのかなと思います。

> [今日は html5 えんぷら部にて web components ハンズオンに参加〜 名刺を作るって企画いいなあ。](https://twitter.com/kara_d/status/509314331154980864)

「企画」が最も大事なのは事実なのですが、裏でハンズオンを成功させるための運営的な小細工をいろいろやっていたので、機会があったらノウハウまとめたいと思います。

## さいごに

今回、[エンタープライヤーのための Web Components ハンズオン](https://atnd.org/events/55761)を開催しました。2 時間で参加者が満足できるハンズオンができるか不安でしたが、なんとか成功させることができたようです。

お忙しい中、参加していただいた皆さんありがとうございました。チューターの[@albatrosary さん](https://twitter.com/albatrosary)、[@can_i_do_web](https://twitter.com/can_i_do_web)さんありがとう！あなた達のフォローがなかったら成功しなかったです。会場提供の[21cafe](http://www.ni-ichicafe.com/)さんもありがとうございました。

作成した Web 名刺

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/wc_handson4.jpg)

最後は参加者で記念撮影

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/wc_handson5.jpg)

September, 2014

[SAPUI5/OpenUI5]カスタムUIコントロールを作成する方法(前編)

[Git]workブランチの内容をmasterへ強制マージ

IT系ハンズオンを成功させるための6つのポイント

Web Components ハンズオンをやってみた