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

[前回](/2014/09/sapui5openui5ui)に引き続き、OpenUI5 にてカスタム UI コントロールを作成する方法の後編です。今回のパートは「既存の UI を拡張する」方法についてです。

今回のデモはこちらで参照できます。
[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 コントロールの継承

既存の UI コントロールを継承した新しい UI コントロールを作成していきます。基本的には extend することで継承が可能です。
下の例は、sap.m.Input を継承して「mitsuruog.NoisyInput」という UI コントロールを作成しています。

```
jQuery.sap.declare "com.mitsuruog.sapui5.showroom.controls.NoisyInput"

sap.m.Input.extend "mitsuruog.NoisyInput",
  metadata: {}
  renderer: {}
```

## 2. 新規機能の追加

継承した UI コントロールに対する新機能の追加は、新しい UI コントロールの追加と変わりません。
こちらは先ほどの mitsuruog.NoisyInput 新しい機能を追加する例です。

NoisyInput は、focusin した際に UI コントロールを左右にアニメーションする新しい Input コントロールです。外部から`beQuiet=true`を受け取ることで静かになります。

```
sap.m.Input.extend "mitsuruog.NoisyInput",

  metadata:
    properties:
      beQuiet:
        type: "boolean"
        defaultValue: false

  onfocusin: (evt) ->
    unless @getBeQuiet() then @addStyleClass "shake"

  onfocusout: (evt) ->
    unless @getBeQuiet() then @removeStyleClass "shake"
```

既存 UI コントロールの既存機能(イベントハンドラなどの関数)を上書きする場合は、同名の function を宣言した上で継承元の prototype 関数を呼び出します。

```
sap.m.Input.extend "mitsuruog.NoisyInput",

  metadata:{}
  # 省略...

  init: ->
    sap.m.Input.prototype.init.apply @, arguments

  onBeforeRendering: ->
    sap.m.Input.prototype.onBeforeRendering @, arguments
```

上の例は既存の init と onBeforeRendering に対して機能を追加する例です。この例では実際に機能を追加していませんが、雰囲気は掴めると思います。

## 3. レンダラの変更

新しい UI コントロールの新しい UI を作成します。基本的には renderer を定義して、中で既存 UI コントロールの renderer を呼び出しすれば良いです。

```
sap.m.Input.extend "mitsuruog.NoisyInput",

  metadata:{}
  # 省略...

  renderer: (rm, control) ->
    rm.write "<div class='mitsuruogNoisyInput'>"
    sap.m.InputRenderer.render.apply @, [rm, control]
    rm.write "</div>"
```

ただし、実態は既存 UI コントロールの renderer がどのように実装されているかに依存している場合が多く、確実に実装するためには OpenUI5 側のソースを一度確認したほうがいいです。
OpenUI5 のコンロールの場合は、コントロールクラスの近くに「`〜Renderer-dbg.js`」があるのでこれを見ます。(-dbg)が付いているものが minify されていないものです。

例）
Input.js -> InputRenderer-dbg.js
Label.js -> LabelRenderer-dbg.js

既存の renderer を確認すると、外部から renderer のライフサイクルに対してフックするための I/F を備えているもの(sap.m.Input など)があります。
その場合は新しい UI コントロールの renderer 内から I/F 名を指定して機能を追加していきます。

次の例では、既存の addInnerStyles が実行される前に、Input コントロールの外見を変更する指定をしています。

> (inner や outer があるのは、OpenUI5 の UI コントロールは外側を div コンテナで囲う場合が多いからです。外側のコンテナを outer、内側の UI コントロールを inner と表現しています。)

```
sap.m.Input.extend "mitsuruog.NoisyInput",

  metadata:{}
  # 省略...

  renderer:
    addInnerStyles: (rm, control) ->
      rm.addStyle "background-color", "#23AC0E"
      rm.addStyle "border-radius", "7px"
```

ただし、既存の renderer を変更することは良くありません。既存の renderer の前後に機能を追加するか、フック用の I/F を利用するようにしてください。
既存の renderer を変更する必要な場合は、継承せず新規で UI コントロールを作成した方がいいと思います。

## 4. 配布、利用

配布方法は、新規 UI コントロールを作成する場合と変わりありません。

継承元のクラスがロードされていないケースを想定し、予防的に`jQuery.sap.require`にてクラスをロードする記述を書いておいた方がいいと思います。

## 5. まとめ

2 回に分けて OpenUI5 にて新しい UI コントロールを作成する方法を紹介しました。
OpenUI5 はフレームワーク側の仕組みが複雑であるために、正しい方法を理解せず、カスタムしようとすると必ず手痛い失敗をします。(経験談)

OpenUI5 多くの優れた UI コントロールを持っているため、本来であれば無理にカスタムせず、OpenUI5 のコンポーネントの機能の範囲内で UI を構築していく方がベストですが、カスタムの方法も知っておくと、一気に利用の幅が広がると思います。

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

> 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コントロールを作成する方法(前編)

> How to internationalize the smart in OpenUI5/SAPUI5

エンタープライズ利用を想定した「[OpenUI5](http://sap.github.io/openui5/)」には、企業システムで有用な多くの UI コンポーネントを持っています。  
しかし、OpenUI5 の価値は豊富な UI だけではありません。OpenUI5 の本当の価値は、エンタープライズ利用を想定した HTML5 ベースのアプリケーションを作成するために、必要な機能を含んだオールインワンかつハイスペックな UI フレームワークということです。  
今回は、その中でも OpenUI5 が持つ強力な国際化機能について説明します。



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

## 目次

本記事で利用するデモはこちらで参照出来ます。  
Demo here :).  
[http://mitsuruog.github.io/sapui5-showroom/app/#/locale](http://mitsuruog.github.io/sapui5-showroom/app/#/locale)

## 1. OpenUI5 での国際化

OpenUI5 にて国際化するための手順は「リソースモデルファイルの作成」「リソースモデルをロード」「コントロールへデータバインド」の 3 つです。
順に説明していきます。

### リソースモデルファイルの作成

まず、国際化用の「**リソースモデル(ResourceModel)**」を作成し、その中に国際化したいメッセージを定義していきます。ファイルはこちらを参考にしてください。

```
title = ロケール
text = 吾輩は猫である。名前はまだ無い。
changeLocale = ロケール変更:
button = これはボタンのテキスト
```

このリソースモデルは Java の「java.util.Properties」クラスと同等のもので、中に「key/value」ペアで値を設定していきます。ファイルの拡張子は「\*.properties」です。
（マルチバイトの場合であってもファイルが UTF-8 で作成されていれば、Unicode エスケープする必要はないようです。）

Web ルート直下に「i18n」フォルダを作成して、ファイルを配置するのが慣例のようです。まず、最低限ロケールなしの場合に利用される「**messageBundle.properties**」を作成します。各ロケールごとのファイル名の例は以下の通りです。

- messageBundle_en.properties
- messageBundle_ja.properties
- messageBundle_zh_CN.properties
- messageBundle_zh-Hans-CN.properties

ロケールの言語コードについての詳細はこちらを参照してください。

[Identifying the Language Code / Locale](https://openui5.hana.ondemand.com/#docs/guide/91f21f176f4d1014b6dd926db0e91070.html)

[言語の対応付け - Windows app development](http://msdn.microsoft.com/ja-jp/library/windows/apps/jj673578.aspx)

### リソースモデルをロード

次に、リソースモデルをアプリケーションにロードしていきます。こちらのコードを参考にしてください。

Locale.controller.coffee

```js

sap.ui.controller "com.mitsuruog.sapui5.showroom.view.Locale",

  onInit: ->
    i18nModel = new sap.ui.model.resource.ResourceModel
      bundleUrl : "i18n/messageBundle.properties"

    @getView().setModel i18nModel, "i18n"
```

ロードする場所は、「Component.js」の`init()`か、国際化対象 View の Controller の`init()`がいいと思います。`i18n`という名前付き Model としてロードして、後のコントロールへのデータバインドの際に利用します。

### コントロールへデータバインド

最後にコントロールの国際化したプロパティへメッセージをデータバインドしていきます。こちらのコードを参照してください。

Locale.view.coffee

```js
sap.ui.jsview "com.mitsuruog.sapui5.showroom.view.Locale",

  getControllerName: -> "com.mitsuruog.sapui5.showroom.view.Locale"

  createContent: (oController) ->
    @page = new sap.m.Page
      title: "{i18n>title}"
      subHeader:
        new sap.m.Bar
          contentRight: [
            new sap.m.Text
              text: "{i18n>changeLocale}"
          ]
      content: [
        new sap.m.Text
          text: "{i18n>text}"
      ]
      footer:
        new sap.m.Bar
          contentRight: [
            new sap.m.Button
              type: "Accept"
              text: "{i18n>button}"
          ]

    @page
```

こちらが国際化した結果画面の例です。日本語と英語で画面の項目名などが変化していることが分かると思います。

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

より詳細な内容は公式ページを参照してください。

[Step 4: Internationalization](https://openui5.hana.ondemand.com/#docs/guide/b6d1a9511f994b3a86e2f34a32e40a34.html)

[Translating SAPUI5 Applications](https://openui5.hana.ondemand.com/#docs/guide/91f217c46f4d1014b6dd926db0e91070.html)

## 2. ロケール判定の優先度

次に、OpenUI5 へのロケール指定の方法とロケール判定に優先度について説明します。こちらが一覧です。上から優先度が高い設定です。

- プログラムからの直接設定
- URL パラメータからの指定
- アプリケーション Config での指定
- window.navigator.userAgent での指定(Android のみ)
- window.navigator.language での指定
- window.navigator.userLanguage での指定(IE のみ)
- window.navigator.browserLanguage での指定(IE のみ)
- デフォルトのロケールは「**en**」

かなり細かい指定ですが、大きく分けると以下の 5 つになるかと思います。

- プログラムからの直接設定
- URL パラメータからの指定
- アプリケーション Config での指定
- 端末固有設定(window.navigator.language など)
- デフォルト「**en**」

この中で、プログラマブルに設定する可能性がある「プログラムからの直接設定」「URL パラメータからの指定」「アプリケーション Config での指定」について順に説明します。

### プログラムからの直接設定

プログラム上で OpenUI5 のロケール情報を参照する場合は、`sap.ui.getCore().getConfiguration().getLanguage()`を利用します。
ロケールの変更を行う場合は、`sap.ui.getCore().getConfiguration().setLanguage(local)`を利用します。引数の`local`にはロケールを文字列で設定してください。`null`を設定することはできません。

### URL パラメータからの指定

URL パラメータに`sap-language`を設定することでアプリケーション呼び出し時に特定のロケールを指定することができます。
こちらがその例です。

[http://mitsuruog.github.io/sapui5-showroom/app/?sap-language=en](http://mitsuruog.github.io/sapui5-showroom/app/?sap-language=en)

URL ハッシュが付く場合はこちらです。

[http://mitsuruog.github.io/sapui5-showroom/app/?sap-language=de#/locale](http://mitsuruog.github.io/sapui5-showroom/app/?sap-language=de#/locale)

### アプリケーション Config での指定

アプリケーション Config でロケールを設定することも出来ます。こちらは`sap.ui.core.Configuration`を利用するもので、詳細については割愛します。後日機会があれば別途取り上げたいと思います。

興味がある方はこちらの公式ドキュメントを参照してください。

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

## 3. まとめ

OpenUI5 での国際化の方法について説明しました。OpenUI5 はグローバルでの利用を想定した強力な国際化の機能を持っています。

このような国際化の仕組みは、OpenUI5 がエンタープライズ利用を想定したものであり、それを提供する SAP 社がグローバルカンパニーであるであるからこと出来たと考えています。  
簡単に国際化することができることも、OpenUI5 の魅力の一つですね。

[SAPUI5/OpenUI5]スマートに国際化する方法

国内での OpenUI5 の注目度の低さに涙が出そうです。でも頑張ります。  
今回は「OpenUI5 と OData を使ってどのように Web システムを作成するか」というチュートリアルを作って見ました。

内容はこちらです。  
[http://mitsuruog.github.io/Openui5-with-OdataService/](http://mitsuruog.github.io/Openui5-with-OdataService/)

Gtihub：  
[https://github.com/mitsuruog/Openui5-with-OdataService](https://github.com/mitsuruog/Openui5-with-OdataService)  
良かったら Github で Star 付けたり、SNS でシェアしてくださいね。



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

> (2014/11/13 追記)  
> このネタで[HTML5Experts.jp](http://html5experts.jp)に寄稿しました。こちらの方が分かりやすく書いてあると思います。  
> [実例から考える、HTML5 時代のエンタープライズ・アーキテクチャ | HTML5Experts.jp](http://html5experts.jp/mitsuruog/9518/) > ![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/exjp_odata.png)

## 目次

## 1. OData とは？

OData とは、  
「Web システムにおける、フロントエンドとバックエンドとの面倒な Ajax 問い合わせの手続きを標準化したプロトコル」

皆さん、Web システムを構築する際に WebAPI に渡すパラメータを独自設計していると思いますが、パラメータを含めたバックエンドへのデータアクセスの手順を標準化しているものです。

Web 版、ODBC と例えるとイメージしやすいと思います。

## 2. なぜ OData と OpenUI5 なのか？

なぜ、OData と OpenUI5 なのかという背景についてです。

OpenUI5 は SAPUI5 という SAP 社が作成した HTML5 ベースの UI フレームワークです。  
OpenUI5 はオープンソースですが、SAPUI5 は「SAP Netweaver Gateway（以下、Gateway）」の UI アドオンとして配布されています。元々、Gateway は ERP に代表される SAP Suite と呼ばれるバックエンドの SAP 製品群と接続し、WebAPI のインターフェースを簡単に作成するための製品（ミドルウェア）です。

SAP 自体が OData の業界標準化に向けて力を入れていることもあり、Gateway は元々 OData サポートしてました、SAPUI5 は Gateway 上で動作する前提で作られている関係で
OData を標準でサポートしています。  
このような経緯もあり、SAPUI5 の流れを組む OpenUI5 は OData と非常に親和性が高いのです。

## 3. 注目度が低い OData

ところで OData 知ってましたか？

私は OpenUI5 を触るまで OData の存在を全く知りませんでした。検索しても WCF など.Net 系の情報が少しヒットするくらいで、フロントエンドを絡めた日本語の情報はほとんどヒットしません。

OData の仕様は一見非常に難解です。OData の仕様に則ったデータアクセスの URL を見てみましょう。

こちらは「CompanyName」を「Alfr」で前方一致検索するためのクエリです。

```
http://services.odata.org/Northwind/Northwind.svc/Customers?$filter=startswith(CompanyName, ‘Alfr’) eq true
```

こんなものもあります。

```
http://services.odata.org/OData/OData.svc/Categories?$select=Name,Products&$expand=Products
```

`$select`とか`$expand`とは一体どんな意味があるのでしょうか。。。（詳しくはチュートリアルの中で触れています。）

OData はデータアクセスの方法を標準化することにより、様々なデータアクセスの要求に対して柔軟に対応できます。

昨今のアジャイル的な開発スタイルが増える中で、バックンドへのデータアクセス要求の変更が与える影響が URL パラメータで吸収できるポテンシャルがあることは、非常に興味深い仕様です。

しかし、この OData 独特のクエリをフロント側で生成することが非常に骨が折れるため、あまり普及しなかったように思います。

## 4. OData ＋ OpenUI5 の可能性

そこで現れたのが OpenUI5 という UI フレームワークです。

ここで言う UI フレームワークとは UI コンポーネントも持つもので、WebAPI から取得したデータを元に自動で UI を構築し、UI 側の操作をダイレクト URL へ変換してバックエンドに連携できる機能を持っています。（以下、双方向データバインディング）

OData が持つデータアクセス方法の標準化と UI フレームワークの双方向データバインディングが組合わせることで、フロント部分の多くがフレームワークで隠蔽できます。

従来のオープンソースを組み合わせた場合と比べ、データアクセスに関わる非常にセンシティブで難易度が高い部分実装がかなり省け、大規模なシステム開発においても比較的管理しやすく、安全に開発ができる可能性があり、非常に惹かれるものがあります。

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

## 5. まとめ

OData と OpenUI5 について少し関心を持っていただけたでしょうか？

昨今は、AngularJS が最も注目される Javascript フレームワークです。私も非常に大好きです。

しかし、企業向け Web システムとして見た場合、様々なオープンソースを組み合わせて構築するより、様々な機能を統合した「エンタープライズ UI フレームワーク」の方が、向いているのではないかと思っています。

そう考えると、フロントエンド開発の一般的な事例と我々エンタープライズでは少し評価の観点が違いますね。

非常に興味深いです。

[SAPUI5/OpenUI5]ODataとOpenUI5でWebシステムを作るチュートリアルをつくりました

SAPUI5/OpenUI5 関連の小ネタです。
複数のプロパティをデータバインドする方法についてです。



XMLView の場合、複数プロパティは以下のように割と簡単に実現できるのですが、JSView の場合はどうすればいいのでしょうか？

```html
<text text="{Width} x {Depth} x {Height} {DimUnit}"></text>
```

答えはこちらです。

```js
new sap.m.Text({
  text: {
    parts: [
      { path: "Width" },
      { path: "Depth" },
      { path: "Height" },
      { path: "DimUnit" },
    ],
    formatter: function (width, depth, height, dimUnit) {
      return width + " x " + depth + " x " + height + " " + dimUnit;
    },
  },
});
```

通常の formatter を使ったデータバインドは`path`と`formatter`プロパティをセットすればいいのですが、複数プロパティの場合は`path`を`parts`の中に含めればできます。

最近、公式のサンプルを見る限り View は XMLView を使って書くべきみたいな流れになっていて、JSView のサンプルが減ってきていますね。。。

こちらに載っていた情報です。

[javascript - SAPUI5: How to directly bind two data properties into one control property using OData model? - Stack Overflow](http://stackoverflow.com/questions/22320475/sapui5-how-to-directly-bind-two-data-properties-into-one-control-property-using)

[SAPUI5/OpenUI5]複数のプロパティをバインドする

SAPUI5/OpenUI5 を使った場合、SAP のバックエンドのデータと、様々なオープンデータや Web サービスを組み合わせてクライアントマッシュアップさせたくなります。  
（今回は OpenUI5 を使いました。）

まず定番は GoogleMap でしょうか・・・  
普通に Page に Map を表示するサンプルは探せばあるのですが、ダイアログで Map を表示するサンプルが無かったので作ってみました。



サンプルはこちらです。

「Open Map」ボタンを押すと東京駅を中心としたマップが表示されます。

> サンプル jsbin で作成していたのですが、消えてしまいました。（残念）

## 目次

## 1.説明

基本的には、OpenUI5 の index.html に GoogleMap の API を利用するために Javascript を読み込むだけで準備は OK です。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta name="description" content="sap.m.DialogでGoogleMap" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8" />

    <title>SAPUI5/OpenUI5 Google map Sample</title>

    <script
      id="sap-ui-bootstrap"
      src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
      data-sap-ui-libs="sap.m"
      data-sap-ui-theme="sap_bluecrystal"
    ></script>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
  </head>

  <body class="sapUiBody" id="content" />
</html>
```

次に、ダイアログを作成します。

```js
@dialog = new sap.m.Dialog
  title: "Google Map"
  content: [
    new sap.ui.core.HTML
      content: "<div id='mapConteiner'></div>"
  ]

  #ダイアログ閉じる処理
  beginButton: sap.m.Button
    text: "close"
    press: (evt)->
      evt.getSource().getParent().close()

  afterOpen: (evt)->
    #座標の作成
    latlng = new google.maps.LatLng 35.681382, 139.766084
    #マップの設定
    options =
      zoom: 15
      center: latlng
      mapTypeId: google.maps.MapTypeId.ROADMAP
    #MAP初期化
    map = new google.maps.Map document.getElementById("mapConteiner"), options

    #マーカーをマップにプロット
    marker = new google.maps.Marker
      position: latlng
      map: map

button = new sap.m.Button
  text: "Open Map"
  press: [(evt) ->
    @dialog.open()
   , @]

button.placeAt "content"
```

以下、ダイアログを作成する際に初期設定でなにを行っているかの説明です。

- content
  - GoogleMap を表示させるコンテナを作成します。ここでは`sap.ui.core.HTML`を使って直接`<div>`タグを出力しています。
- beginButton
  - 閉じるボタンの処理です。
- afterOpen
  - ダイアログが表示された後に Map を初期化して、座標をプロットしています。

Map 初期化のタイミングですが、Map コンテナの DOM が生成される前に初期化するとエラーになるので注意が必要です。
ちょっとしたら、Map コンテナの afterRendering イベントでも初期化できるかもしれません（未検証）。そっちの方が作りとしては奇麗な気がします。

## 2.最後に

今後、企業の社員にタブレットなどのモバイル端末を配布して、外での業務活動に活かすケースはますます増えると思います。  
GoogleMap との連携はよくありそうなシーンなのですが、他の Web サービスや既存の社内システムの情報などをマッシュアップすることで、変化の激しい時代に適応した、モバイルを有効活用したまったく新しい企業システムが誕生するのかと思うと、少しわくわくします。

以下、参考情報です。

### OpenUI5API

- [JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.m.Dialog](https://sapui5.netweaver.ondemand.com/sdk/docs/api/symbols/sap.m.Dialog.htm)
- [JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.ui.core.HTML](https://sapui5.hana.ondemand.com/sdk/docs/api/symbols/sap.ui.core.HTML.html)

### GoogleMap 関連

GoogleMap の使い方についてはこちらが丁寧です。  
（AjaxTower さん、毎度ありがとうございます！）

- [Google Maps 入門(Google Maps JavaScript API V3)](http://www.ajaxtower.jp/googlemaps/)

GoogleMap の API のスタートガイド（公式）

- [スタート ガイド - Google Maps JavaScript API v3 — Google Developers](https://developers.google.com/maps/documentation/javascript/tutorial?hl=ja)

### SAPUI5/OpenUI5 と GoogleMap のサンプル

- [【第 1 回】SAPUI5 と SAP NetWeaver Gateway によるマッシュアップ開発入門（序章） - SAP 技術ブログ | SAP ソリューションの REALTECH Japan（リアルテックジャパン）](http://solution.realtech.jp/blog/2013/10/sapui5sap-netweaver-gateway.html)
- [SAPUI5 Gateway and Google Maps | Experiences with SAP Gateway](http://mysapgw.wordpress.com/2012/05/19/sapui5-gateway-and-google-maps/)  
  （コードは中のリンク「google code」に入ってます。）
- [SAPUI5 with Google Maps | SCN](http://scn.sap.com/people/konstantin.anikeev/blog/2013/02/11/sapui5-with-google-maps)

[SAPUI5/OpenUI5]GoogleMapと組み合わせる

小ネタです。

SAPUI5/OpenUI5 では UI コントロールのイベント（press、tap、select など）が発火した場合、Controller にあるイベントハンドラを実行するような処理をよく書きます。  
この時にイベントハンドラに、自分がセットしたパラメータを渡したいケースがたびたびあるのですが、やっと方法が分かったのでメモしておきます。



## 目次

## 1.イベントインターフェースについて

まず、SAPUI5 でのイベントインターフェースについて説明します。  
SAPUI5 では View の中にボタンなどの UI コントロールを配置していくのですが、この時に UI コントロールから発生するどのイベントを処理するか定義することが出来ます。

公式ドキュメントを参照すると、必ず次の 3 パターンの I/F があるはずです。

1.  fnListenerFunction
2.  [fnListenerFunction, oListenerObject]
3.  [oData, fnListenerFunction, oListenerObject]

1 のパターンは View などにてイベントとイベントハンドラを同時に書く方法です。2 はイベントハンドラを Controller へ移譲する場合、3 が今回やりたいイベントハンドラにパラメータを渡す方法です。「oData」となっている部分にパラメータオブジェクトを設定してください。

I/F のパラメータの詳細については次の通りです。

- fnListenerFunction
  - イベントハンドラで実行される function です。イベントによって若干差異があるかもしれませんが、イベントハンドラの I/F は次のようになっていることが多いです。
- oListenerObject
  - イベントハンドラ実行時のコンテキストを指定します。イベントハンドラ内の this が指し示すオブジェクトを指定します。
- oData
  - イベントハンドラに渡すパラメータです。オブジェクトを設定してください。

## 2.イベントハンドラにパラメータを渡す

では実際にサンプルを動かしてみます。  
「Action」ボタンを押した場合に表示されるメッセージダイアログに「Hello :)」というメッセージを渡すようにしています。

サンプルはこちらです。

> サンプル jsbin で作成していたのですが、消えてしまいました。（残念）

Button の press イベント発火時の第 1 引数にオブジェクトを渡しています。分かると簡単です。この例では press イベントの中にイベントハンドラを記述していますが、Controller に処理を委譲する場合は次のようにしてください。

```js
press: [ message: "Hello :)", oController.doPress, oController]
```

```
button = new sap.m.Button
  text: "Action!!"
  press: [message: "Hello :)", (evt, param) ->
    jQuery.sap.require "sap.m.MessageToast"
    sap.m.MessageToast.show param.message
  ]

button.placeAt "content"
```

```html
<!DOCTYPE html>
<html>
  <head>
    <meta name="description" content="[add your bin description]" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8" />
    <title>SAPUI5/OpenUI5 Sample</title>
    <script
      id="sap-ui-bootstrap"
      src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
      data-sap-ui-libs="sap.m"
      data-sap-ui-theme="sap_bluecrystal"
    ></script>
  </head>
  <body class="sapUiBody" id="content" />
</html>
```

## 3.最後に

基本的なことなのですが、探すのにとても時間が掛かりました。公式ドキュメントの量が非常に多いので、欲しい情報を探すのに毎度苦労します。:(

ちなみに、この内容はこちらのやり取りを参考にしています。

[SAPUI5: How do I pass values to an eventhandler | SCN](https://archive.sap.com/discussions/thread/3442827)

[SAPUI5/OpenUI5]イベントハンドラにパラメータを渡す

Backbone.js や AngularJS に代表される JavascriptMV＊系で構築された SPA（Single page application）は、Struts などで構築された従来の Web アプリケーションと異なり、1 つの HTML5 の中に複数画面（View）を持ち、画面遷移時に Javascript にて View を切り替えるため、通常はブラウザのリフレッシュを伴いません。

その際に問題となるのが、画面遷移時にリフレッシュを伴わないため、URL が変らないことです。

URL が変わらないということは、すべての画面の URL が同じになるということで、ブックマークから特定の画面を開くことができなくなります。

そこで SPA では通常、URL の後ろに「ハッシュ」と呼ばれる開く対象となる URL を付け加え、Javascript にてハッシュと一致する View を表示するようにコントロールする「router」「routing」と呼ばれる手法を行うことが一般的です。

今回は、SAPUI5/OpenUI5 での routing の基本的なことについて紹介します。



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

## 目次

## 1.ルーティングテーブルの定義とルーターの初期化

ルーティングするためには、URL の「ハッシュ」とそれと対応して表示する View を定義する必要があります。ここでは便宜上「ルーティングテーブル」と言います。

まず、「Conpoment.js」内の「metadata」にルーティングテーブルを定義します。

```
#! Component.js

sap.ui.core.UIComponent.extend "com.mitsuruog.sapui5.Component",

  metadata:
    routing:
      config:
        viewType: "JS"
        viewPath: "view"
        targetControl: "navConteiner"
        targetAggregation: "pages"
        clearTarget: false
      routes: [{
        pattern: ""
        name: "First"
        view: "First"
        targetAggregation: "pages"
      }, {
        pattern: "second"
        name: "Second"
        view: "Second"
        targetAggregation: "pages"
      },

      # ...省略

```

ちなみに「config」はすべての routing 共通の設定で、「routes」内には、それぞれのハッシュと対応する View 定義、カスタムする振る舞いなどが定義出来ます。

細かい設定等はこちらです。簡単に紹介します。

[Configuration Parameters for Navigation](https://sapui5.hana.ondemand.com/sdk/#docs/guide/902313063d6f45aeaa3388cc4c13c34e.html)

- pattern
  - パターンマッチするハッシュを文字列で指定します。ルーティングテーブルの中で最も大事な設定です
- name（必須）
  - ルーテリングテーブルの中で一意な名前を設定します
- view
  - pattern にマッチした場合に表示する View 名です
- viewType
  - View のタイプです。HTML、JS、JSON、XML があります
- viewPath
  - View のリソースがあるところまでのパスです。例えば、「view/someView」の場所に View が存在する場合は、「view」を指定します
- targetParent
  - 後述する targetControl の親要素を ID で指定します
- targetControl
  - view を表示するコンテナを ID で指定します
- targetAggregation
  - targetControl で指定したコンテナのどのプロパティに View を設定するか指定します。次のように指定することが多いです
- subroutes
  - ネストしたルーティングを実現する場合に routes と同じように設定します。（まだ詳しく検証してないです。
- clearTarget
  - View を追加する前に View をクリアする必要がある場合、true を設定します。
- callback
  - pattern にマッチした場合に実行される Callback を指定します。

どのルーティング定義にもマッチしないものに対して NotFound ページを表示する場合は、pattern に「`:all*:`」を設定してください。

ルーティングテーブルを定義した後に、同じ「Conpoment.js」にて router のライフサイクルを定義します。「init」で初期化して、「destory」時に破棄します。

この辺りのコードはお作法だと思ってコピペしましょう。

```
#! Component.js

  # ...省略

  init: ->
    jQuery.sap.require "sap.ui.core.routing.History"
    jQuery.sap.require "sap.m.routing.RouteMatchedHandler"

    sap.ui.core.UIComponent.prototype.init.apply @

    router = @getRouter()
    this.routerHandler = new sap.m.routing.RouteMatchedHandler router
    router.initialize()

  destory: ->
    if @routerHandler
      @routerHandler.destroy()
    sap.ui.core.UIComponent.prototype.destory.apply @

  # ...省略
```

## 2.ルーティング

それでは実際にルーティングしてみましょう。

サンプルの例では、次のように呼び出す URL にハッシュを追加することで、望みの画面を表示させることが可能です。

- [http://mitsuruog.github.io/sapui5-showroom/app/routing/#/second](http://mitsuruog.github.io/sapui5-showroom/app/routing/#/second)
- [http://mitsuruog.github.io/sapui5-showroom/app/routing/#/third/1/tab2](http://mitsuruog.github.io/sapui5-showroom/app/routing/#/third/1/tab2)

では、プログラムから View を切り替え時にハッシュも変更するためにはどうすればよいでしょうか？

プログラムから View を切り替え時にハッシュも変更するためには、先ほど定義した router を取得してハッシュを切り替える命令を出す必要があります。ハッシュパラメータを渡す場合は、第 2 引数に key-value 形式でハッシュパラメータのオブジェクトを渡します。

```
#! ButtonのPress処理などController.jsにて書いている想定。

nextPage: ->

  router = sap.ui.core.UIComponent.getRouterFor @

  #パラメータを伴わない場合
  router.navTo "Second"

  #パラメータを伴う場合
  router.navTo "Second",
    someParam: "hoge"
```

## 3.ルーティングマッチと View でのパラメータ取得

URL のハッシュ値を変えることで View を切り替えることができましたが、ハッシュに含まれるパラメータをそれぞれの View にて取得するためにはどうすれば良いでしょうか。

View にてハッシュに設定されたパラメータを取得するためには、ルーティングマッチした際に発火するイベントにフックする必要があります。

```js
#! routing先のController.jsにて書いている想定。

sap.ui.controller "view.Third",

  onInit: ->
    @router = sap.ui.core.UIComponent.getRouterFor @
    @router.attachRoutePatternMatched @_handleRouteMatched, @

  _handleRouteMatched: (oEvt) ->

    #viewNameが一致しないものはFilterする
    unless "Third" is oEvt.getParameter "name"
      return

    #Hashパラメータを取得
    #以下のようなURLを想定
    #/some/{id}
    #/some/:id:
    hashParams = oEvt.getParameter "arguments"
    id = hashParams.id

```

ルーティング時に渡したパラメータは getParameter にて取得します。すべてのパタメータをオブジェクトとして取得する場合は、getParameters を使います。

（getParameter の引数に arguments が使われている辺り、中の実装がどうなっているか予想できます w）

## 4.最後に

SAPUI5/OpenUI5 でのルーティングについて基本的なことを書きました。

ちなみに SAPUI5/OpenUI5 では、最近までは EventBus を使った Navigation を使うことが一般的でした。（たぶん、1.20 になってから変わったと思います。）

EventBus では、ブックマークからの特定画面を起動することが難しかったので、個人的には待ちに待った機能でした。

1.20 になってから他にも大きな変更点がある SAPUI5/OpenUI5 ですので、機会があればまた紹介していきます。

## X.デモやソースコードはこちらです。

### デモ

SAPUI5/OpenUI5 routing Sample

[http://mitsuruog.github.io/sapui5-showroom/app/routing/](http://mitsuruog.github.io/sapui5-showroom/app/routing/)

### ソースコード

sapui5-showroom/app/routing at master · mitsuruog/sapui5-showroom

[https://github.com/mitsuruog/sapui5-showroom/tree/master/app/routing](https://github.com/mitsuruog/sapui5-showroom/tree/master/app/routing)

### 参考リンク

- [(SAP/Open) UI5 with Routing Tutorial - YouTube](https://www.youtube.com/watch?v=YZqtx2KJ2To)
- [(SAP/Open) UI5 with dynamic Routing Tutorial - YouTube](https://www.youtube.com/watch?v=hMEkV1ECf2c)
- [Navigation](https://sapui5.hana.ondemand.com/sdk/#docs/guide/3d18f20bd2294228acb6910d8e8a5fb5.html)
- [Step 3: Navigation and Routing](https://sapui5.hana.ondemand.com/sdk/#docs/guide/688f36bd758e4ce2b4e682eef4dc794e.html)

[SAPUI5/OpenUI5]URLでのルーティングの基本

先日、SAPUI5 のバージョンが 1.20 になりました。

SAPUI5 にて UI 部品が多い View を構築する場合、すぐに 1000 行を超えるような巨大 Javascript ファイルになってしまうのですが、Fragments と呼ばれる UI をパーツ化して再利用するための機能があります。

今回は、この Fragments について実際の利用シーンをイメージしながら紹介します。



## 目次

## はじめに

最近、SAPUI5 を生の Javascript で書くと「}」とか「)}」とかしんどいので coffeeScript で書いて楽しています。また、すべてのソースコードをのせると非常に冗長なため、抜粋したソースコードを載せています。実際に動作するサンプルとソースコードは GIthub 上にありますので、そちらを参照してください。

サンプル
<http://mitsuruog.github.io/sapui5-showroom/#/fragment>

ソースコード

- CoffeeScript
  - [https://github.com/mitsuruog/sapui5-showroom/tree/master/coffee](https://github.com/mitsuruog/sapui5-showroom/tree/master/coffee)
- Javascript
  - [https://github.com/mitsuruog/sapui5-showroom/tree/master/app](https://github.com/mitsuruog/sapui5-showroom/tree/master/app/view)

## 1.Fragments とは

「Fragments」とは「断片、破片」という意味で、文字通り UI をパーツとして分割する機能です。公式ドキュメントはこちらです。

[https://sapui5.hana.ondemand.com/sdk/#docs/guide/36a5b130076e4b4aac2c27eebf324909.html](https://sapui5.hana.ondemand.com/sdk/#docs/guide/36a5b130076e4b4aac2c27eebf324909.html)

SAPUI5 での Fragments とは View と同じようなものですが、Controller を作成する必要がありません。従って、基本的に UI 部分をパーツ化して再利用するために利用するものです。ロジックまで再利用したい場合は、素直に View にしてしまった方がいいでしょう。

## 2.基本的な使い方

Fragments を使うためには、まず「sap.ui.jsfragment」を継承してオリジナルの Fragments を定義していき、Fragments を View（以下、ownerView）にて呼び出して初期化し、View のコンテンツとして追加します。

まず、Fragments を定義していきます。

Edit.fragments.coffee

```
sap.ui.jsfragment "util.Edit",

  createContent: (oController) ->

    # ここに普通のJSViewのcreateContentと同様にUIコントロールを追加して
    # 最後にreturnします。

```

次に、ownerView 側で Fragments を呼び出します。

Fragments1.view.coffee

```
sap.ui.jsview "view.Fragment",

  getControllerName: ->
    "view.Fragment"

  createContent: (oController) ->

    @page = new sap.m.Page
      title: "Fragment Sample"

    # Fragmentsを呼び出します
    fragment = sap.ui.jsfragment "util.Edit", oController
    @page.addContent fragment

    @page

```

Fragments を初期化する際の第 2 引数の oController は、Fragment にて参照する Controller を渡してください（詳細は後述）。参照が無い場合は、当然 null となります。（渡した方が後のこととか考えると無難です。）
また、この例の場合、SAPUI5 が呼び出す際のエイリアス名が「util.Edit」となるため、物理ファイル名と配置場所は「util/Edit.fragment.js」となります。〜fragments.js が接頭語だと思ってください。物理ファイルの配置場所とファイル名には特に注意が必要です。

基本的は使い方は以上です。

## 3.実際の利用シーン

では、実際のアプリケーションでの使いどころとしてはどのようなシーンがあるでしょうか。少し触って見た感じだと、以下の 2 つで使えそうです。

### 3.1 画面内での入力 UI と参照 UI の切り替え

このケースでは、1 画面で入力 UI と参照 UI の切り替え。用途としては、登録（変更）処理後に参照画面に切り替わるような、業務システムでよくあるシーンです。
SAPUI5 にてアプリケーションを構築した場合、MVC コンセプトに基づき View 部分と実際の表示データである Model は完全に分離され管理されています。
入力用と参照用の UI にて同じ Model を参照している場合、1 つの View 側で UI を切り替えた方がスマートだと最近考えています。

まず、参照用の Fragments を定義していきます。登録用の Fragments は先ほどの「Edit.fragments.coffee」を使います。

Detail.fragments.coffee

```
sap.ui.jsfragment "util.Detail",

  createContent: (oController) ->

    # ここに普通のJSViewのcreateContentと同様にUIコントロールを追加して
    # 最後にreturnします。

```

最後に、controller にて Fragments 呼び出し処理を行います。

Fragments2.controller.coffee

```
sap.ui.jsview "view.Fragment",

  getControllerName: ->
    "view.Fragment"

  createContent: (oController) ->

    @page = new sap.m.Page
      title: "Fragment Sample"

    # Fragmentsを呼び出します
    # -> controllerで呼び出すようにします
    #fragment = sap.ui.jsfragment "util.Edit", oController
    #@page.addContent fragment

    @page

```

次に、ownerView 側のボタンで UI の切り替えを行うため、ownerView で行っていた Fragments 呼び出し処理を、controller で行うようにします。

Fragments2.view.coffee

```
jQuery.sap.require "sap.m.MessageToast"

sap.ui.controller "view.Fragment",

  _fragments: {}
  _mode: "Detail"

  _getFragments: (name) ->
    #fragmentsを取得してキャッシュ
    unless @_fragments[name]
      @_fragments[name] = sap.ui.jsfragment "util.#{name}", @
    @_fragments[name]

  _toggleFragment: (name) ->
    fragment = @_getFragments name
    container = sap.ui.getCore().getElementById "fragContainer"
    #コンテナの0番目にfragmentsで取得したFormを追加します
    #[MEMO]ここではViewの中のContentはfragmentsのみの想定で書いています
    #[MEMO]Contentが複数ある場合は、removeContentとinsertContentのindexを変更してください
    container.removeContent 0
    container.insertContent fragment, 0
    @_mode = name

  onInit: ->
    @_toggleFragment "Detail"

  #入力用と参照用のFormを切り替る処理
  pressedToggle: (oEvt) ->
    if @_mode is "Detail"
      @_toggleFragment "Edit"
    else
      @_toggleFragment "Detail"
```

ここでの removeContent と insertContent は View の中で Content となる UI パーツが Fragments1 つのみの前提で書いています。
また、Fragments を切り替えるコンテナを作成して、固有の ID を振って Javascript 側からいつでもフックできるようにするといいでしょう。

### 3.2 ダイアログ UI の再利用

このケースでは、選択用などのダイアログ UI を再利用します。単純なものではなく少し UI パーツが多いダイアログを再利用するとさらに効果的です。
先ほどと同様にダイアログ用の Fragments を定義していきます。

Dialog.fragments.coffee

```
sap.ui.jsfragment "util.Dialog",

  createContent: (oController) ->

    dialog = new sap.m.Dialog
      title: "Dialog"
      content: [

        #入力用のFragmentsを再利用します

        sap.ui.jsfragment "util.Edit", oController
      ]
      beginButton: new sap.m.Button
        type: "Accept"
        text: "OK"
        press: [oController.pressedOk, oController]
      endButton: new sap.m.Button
        text: "NG"
        press: [oControl

```

ダイアログの中身のコンテンツは先ほど定義した Edit.fragments.js を再利用しています。こんなところでも Fragments いい仕事しています。

Fragments 側から Controller の function を呼び出していると思います。
これは、Fragments を初期化する際に Controller の参照を渡す事で、Fragments 側から OwnerView の Controller の function を呼び出すことが出来ます。

> この場合、OwnerView 側で Fragments が使う function を知っていて実装する必要があります。Java でいうインターフェースと同じような感覚なのですが、いかんせん動的型付け言語なのでチェックが緩いです。Controller に function が存在しない場合は当然、実行時に落ちます。
> 次に ownerView の controller にて Fragments を呼び出します。ownerView にてダイアログを開くボタンを押した際にダイアログを open します。

Fragments3.controller.coffee

```
jQuery.sap.require "sap.m.MessageToast"

sap.ui.controller "view.Fragment",

  _fragments: {}

  _getFragments: (name) ->
    #fragmentsを取得してキャッシュ
    unless @_fragments[name]
      @_fragments[name] = sap.ui.jsfragment "util.#{name}", @
    @_fragments[name]

  onInit: ->

  #ダイアログを表示します
  openDialog: (oEvt) ->
    dialog = @_getFragments "Dialog"
    dialog.open()

  #ダイアログでOKをPressした時の処理
  pressedOk: (oEvt) ->
    oEvt.getSource().getParent().close()
    sap.m.MessageToast.show "pressed OK"

  #ダイアログでNGをPressした時の処理
  pressedNg: (oEvt) ->
    oEvt.getSource().getParent().close()
    sap.m.MessageToast.show "pressed NG"
```

Fragments にて OK/NG ボタンを押した場合の処理は、Controller に記述して処理させています。

## 4.まとめ

Fragments とは以前から SAPUI5 にあった機能ですが、「Experimental（実験的）」な機能に分類されていました。1.20 からはめでたく Experimental でなくなったので、やっと実戦で投入できるようになりました。

SAPUI5 にて UI 部品が多い View を構築する場合、すぐに 1000 行を超えるような JS ファイルになってしまうのですが、このように Fragments を使うことで UI 部品をパーツで切り離して利用できるようになります。  
（行数が多いのは SAPUI5 に限ったことではありません、Javascript で View を作成する UI フレームワークはそうなりやすいです。）

また、UI を部品化することでアプリケーション内での再利用が進み、開発効率と品質面で一定のアドバンテージがあると思います。
巨大化しやすい View をいかにパーツ化して再利用しながらアプリケーションを構築していくのが、SAPUI5 に限らず UI フレームワークでアプリケーションを構築する際のポイントだと最近感じています。

[SAPUI5/OpenUI5]大きくなりがちなViewのコードをFragmentsでパーツ化して賢くViewを構築する

様々な Web サービスをフロント側で組み合わせて 1 つのアプリケーションを作成することを「クライアントマッシュアップ」と言います。クライアントマッシュアップを行う上で避けて通れないのが、様々なドメインのリソースをフロント側で利用する場合の同一生成元ポリシー違反です。

同一生成元ポリシー違反の回避方法は色々あるのですが、今回は Fiddler2 を用いたリバースプロキシで回避する方法を紹介します。



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

1.  背景
2.  grunt-connect-proxy を使う
3.  Fiddler2 のリバースプロキシ機能を使う

## 1.背景

最近、SAPUI5 という SAP 製の UI フレームワークをよく使っています。バックエンドは SAP Netweaver Gateway が提供する ODataService を使うのですが、SAP 環境が手元に無い場合は、OData の Mock サーバの様なもので代替えする必要があります。ところが、無料で使える OData の Mock サーバって意外と無いんですよね。

という訳で、行き着いたのが NorthWind の無料 ODataService でした。

[http://services.odata.org/Northwind/Northwind.svc/](http://services.odata.org/Northwind/Northwind.svc/)

正攻法で攻めると localhost で実行している Web アプリケーションに対して、services.odata.org のドメインから取得したデータをマッシュアップするので、立派な同一生成元ポリシー違反が成立します。

そこで今回はリバースプロキシサーバーを立てて、サーバーで受け取ったリクエストの中で、特定の URL の一部（例えば「`http://localhost/Northwind`」の「`/Northwind/`」）にマッチしたリクエストを、NorthWind の OdataService に代わりに要求します。そして結果をフロント側に返します。

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

異なるドメインへのリクエストを裏でプロキシサーバーが代替わりしてくれるため、フロント側から見ると、サーバーは localhost しか見えないようになり、同一生成元ポリシー違反にならないのです。

## 2.grunt-connect-proxy を使う

まず最初に試したことは、使い慣れた Grunt タスクを使うことでした。幸い、「grunt-contrib-connect」の兄弟分で「grunt-connect-proxy」というリバースプロキシが使えそうでしたので、試してみました。

- [gruntjs/grunt-contrib-connect](https://github.com/gruntjs/grunt-contrib-connect)
- [drewzboto/grunt-connect-proxy](https://github.com/drewzboto/grunt-connect-proxy)

ところが、何度も試行錯誤したのですがうまく行きません。調べて見るとこんな Issue が w。（まじ、windows で動かないってなんなのー！orz）

[Can't get proxy working with a basic test odata service: ECONNREFUSED · Issue #46 · drewzboto/grunt-connect-proxy](https://github.com/drewzboto/grunt-connect-proxy/issues/46)

という訳で違う方法を試すことにしました。

## 3.Fiddler2 のリバースプロキシ機能を使う

Windows には Windows の作法がある！早速、Microsoft 謹製のデバック用プロキシツール「Fiddler」を使う事にしました。
Fiddler2 でのリバースプロキシ作成方法の公式ドキュメントはこちらです。

[Use Fiddler as a Reverse Proxy](http://docs.telerik.com/fiddler/configure-fiddler/tasks/usefiddlerasreverseproxy)

レジストリを変更する方法と、直接ルールを変更する方法の 2 種類あるのですが、今回は URL に対する細かい指定を行いたいので、直接ルールを書き換える方法にしました。

Fiddler のメニューから「Rules > Customize Rules.」を選択すると、ルールを定義している設定ファイルが開くので、OnBeforeRequest の部分を書き換えます。書き換えると Fiddler にて自動的に新しいルールを読み込んでくれます。

ルール定義は次のように書きます。

```js
static function OnBeforeRequest(oSession: Session) {

  // ...

  //services.odata.orgへのリバースプロキシ設定
  //
  //localhostdで/Northwind/というコンテキストがある場合に
  //services.odata.org:80ドメインへリクエストを投げます。
  if (oSession.HostnameIs("localhost") && oSession.uriContains("/Northwind/")) {
    oSession.host = "services.odata.org:80";
  }

  // ...

}
```

これで、Web アプリケーションから「`http://localhost/Northwind/Northwind.svc/Categories`」にリクエストを投げた場合、プロキシサーバにて「`http://services.odata.org/Northwind/Northwind.svc/Categories`」のリソースを取得してくれます。

こちらの記事も参考になりました。

[Using Fiddler as a Reverse Proxy - Stack Overflow](http://stackoverflow.com/questions/9831044/using-fiddler-as-a-reverse-proxy)

ルールファイルの細かな設定方法はこちら。（ちょっと読みにくいです。）

[Fiddler Web Debugger - Script Samples](http://fiddlerbook.com/Fiddler/dev/ScriptSamples.asp)

リバースプロキシって素敵。

## 補足

ちなみに、SAPUI5 の eclipse プラグインには「SimpleProxyServlet」と呼ばれるリバースプロキシが内包されているので、Fiddler2 にてわざわざリバースプロキシを作成する必要はありません。これについても機会があれば紹介します。

Fiddler2でリバースプロキシしてNorthWindのOdataサービスをテストで使う

SAP 社では 2013 年 12 月に[SAP Mobile Platform \- Wikipedia](https://en.wikipedia.org/wiki/SAP_Mobile_Platform)を公開しており、本格的に HTML5 に力を入れてきました。  
今回はその流れの中で、SAP のモバイル戦略を下支えする HTML5 ベースの UI フレームワーク「SAPUI5」を少し触ってみます。



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

## SAPUI5 とは

SAPUI5 とは「SAP UI Development Toolkit for HTML5」の略称で、業務系アプリケーションに特化した機能豊富な UI コンポーネントを含んだ UI フレームワークです。  
2013 年 12 月に SAPUI5 をオープンソース化した[OpenUI5](https://openui5.org/)が発表されています。

特徴は、Publickey さんの方で語られていますので、こちらを参照してください。

[SAP、業務アプリ用の JavaScript 製 UI ライブラリ「OpenUI5」を公開。レスポンシブ対応でモバイルデバイスにも － Publickey](https://www.publickey1.jp/blog/13/sapjavascriptuiopenui5.html)

## SAPUI5 と OpenUI5 の違い

では、SAPUI5 と OpenUI5 の何が違うのかと言ったところですが、簡単に両者の違いを話ます。

SAPUI5 はもともと「SAP NetWeaver Gateway」の UI アドオンの 1 つとして提供されていました。基本的には「SAP NetWeaver Gateway」を購入したユーザーでないと使えませんでした。

「OpenUI5」は SAPUI5 をオープンソース化したもので、開発者からすると嬉しい限りですが、利用する際はいくつか注意点があります。（今のところ）

### 1. SAPUI5 とはリリースサイクルが異なる

> (2014/02/20 追記) 2014/02/20 に OpenUI5 も最新版の 1.18.8 にアップデートされました。とはいえ使う時はバージョンちょっと注意してくださいね。（ブログ見てくれたのかな w）

OpenUI5 の中身は基本的に SAPUI5 と同じものですが、SAPUI5 より若干古いバージョンが提供されているようです。それに伴っていくつかの UI コンポーネントが使えません。

2014/2/17 現在で以下のようになっています。

- OpenUI5
  - 1.16.7
- SAPUI5
  - 1.18.6

これに伴い、開発者用のドキュメントも分かれています。ご注意ください。

- SAPUI5 SDK - Demo Kit
  [https://sapui5.hana.ondemand.com/sdk/#content/Overview.html](https://sapui5.hana.ondemand.com/sdk/#content/Overview.html)
- OpenUI5 SDK - Demo Kit
  [https://openui5.hana.ondemand.com/#content/Overview.html](https://openui5.hana.ondemand.com/#content/Overview.html)

### 2. Theme Designer がない

それから SAPUI5 では「Theme Designer」という GUI でデザインを変更できるツールがあるのですが、OpenUI5 には（いまのところ）付属してないようです。

OpenUI5 のダウンロードしたファイルの中を見ると、less を書き換えるとテーマの変更ができると思いますが、かなり Hackey です。

### 3. Experimental features を実戦投入しない(2014/02/20 追記)

API の中には、`Experimental features`（実験的機能）が含まれています。予告なく変更・削除される恐れがありますので、実戦投入しないようにしてくださいね。

ドキュメントを見ると「`Experimental features`」って書いてあります。

## 実際に試してみる

実は、SAP にて SAPUI5 の CDN が提供されており、お試し程度であればこれで十分です。  
こちらの URL にていつでも最新バージョンのライブラリを利用することができます。

[https://sapui5.hana.ondemand.com/resources/sap-ui-core.js](https://sapui5.hana.ondemand.com/resources/sap-ui-core.js)

では、実際に SAPUI5 を試してみましょう。  
SAPUI5 ではデスクトップ用途の「`sap.ui.commons`」とモバイル用途の「`sap.m`」の 2 系統の UI コンポーネントが提供されています。今回はモバイル用の UI コンポーネントを使用します。

HTML ファイルを準備して以下のように記述してください。（ライブラリは 2014/2/17 現在の最新版 1.18.6 を使っています。）

コードはこちらです。

```js
//3.0.3以降
$myModal = $('#myModal').modal({}, {
  person: 'mitsuruog'
});

$myModal.on('show.bs.modal', function(e) {
  var name = e.relatedTarget.person;
}
```

実際に動くアプリケーションはこちらです。

[Hello SAPUI5](https://jsbin.com/gur)

## まとめ

SAP 社では 2013 年 12 月に[SAP Mobile Platform \- Wikipedia](https://en.wikipedia.org/wiki/SAP_Mobile_Platform)を公開しており、本格的に HTML5 に力を入れてきました。

Platform 3.0 では「Sybase Unwired Platform」をはじめ、「SAP NetWeaver Gateway」、GUI で画面開発ができる「App Builder」などいくつかのモバイル向けソリューションの統合が行われています。  
HTML5 ベースの UI フレームワーク「SAPUI5」は、そのような SAP のモバイル戦略を下支えするものです。

SAPUI5 を使うことで、他の Web サービスとのマッシュアップ開発など柔軟に行えるようになり、まったく新しい SAP ユーザ体験を提供できる可能性を秘めているのではないかと思います。

Tag: openui5