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でのルーティングの基本

2014/5/19 に[HTML5fun](http://html5fun.jp/)の立ち上げイベントで話す機会をいただきまして、「エンタープライズでの HTML5」について最近思うことを、割と自由に話してきました。イベント開催レポートはこちらです。

[HTML5fun -全国に HTML5 の楽しさを-](http://html5fun.jp/event/event_001.html)

また、2014/5/22 に行った[Java Day Tokyo 2014](https://oj-events.jp/public/application/add/170)での内容も絡めて、少し補足したいと思います。



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

1.  エンタープライズで HTML5 は必要なのか？
2.  IoT とバリューチェーン
3.  最後に

発表したスライドはこちらです。よかったら「Like」してください。

[エンタープライズと HTML5〜エンタープライズで HTML5 って本当に必要なのか？](https://www.slideshare.net/mitsuruogawa33/html5-34860465)

## エンタープライズで HTML5 は必要なのか？

答えは「Yes」です。

ただしモバイルの活用の方法の１つとして「HTML5」があるという位置づけになると思います。また、企業でのモバイル活用は今もっともホットなキーワードの一つです。

最近の企業システムの入力系は業務に特化されたのも少なくなく、バーコードリーダーなどの外部機器接続、センサー、認識系（画像、音声）など、ネイティブという選択肢も捨てられないです。そこで最近注目しているのが、PhoneGap や Cordova に代表される HTML5 とネイティブを組み合わせた「ハイブリッド」アプローチです。
ただ、モバイル用途として、参照や簡単な入力がメインであれば、HTML5 だけで割とライトな形で作って問題ないと思います。

## IoT とバリューチェーン

昨年辺りから、IoT（Internet of Things）や IoE（Internet of Everything）というキーワードを耳にする機会が多くなったように思えます。

国内でもモバイルを持つ人口が増えていることは周知の事実ですが、スマートメーター、スマート家電、スマート TV など「スマート〜」が流行ってきており、様々なセンサーが使われてこれまた、Web に繋がるようになって、将来的に企業システムは IoT に対応して行く事になるでしょう。

その一方で、IoT 時代の企業システムが生み出すバリューチェーンについても改めて考える必要があると感じています。
その象徴的なものが、Java One Tokyo 2014 の基調講演にて Nandini Ramani 氏が語ったこのスライドでしょう。

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

両側に「データセンター」「デバイス」があって、その間を「繋ぐ」３層レイアーになっています。

デバイスで発生したデータをクラウドへ転送して、最終的に価値にしていく構図です。

HTML5 の中でも特別扱いされている感がある「Websocket」も、このバリューチェーンをイメージすると理由が分かり易いと思います。

「データセンター」と「デバイス」の 2 つのレイアーを接続するために、現状、もっとも適しているのがインターネット（Web）の HTTP であり、それをさらに効率良く行うための方法が「Websocket」です。

（Java One Tokyo 2014 でも Websocket について多く語られていました。）

つい我々フロントエンドをやっている人たちは、デバイスレイアーに注目してしまいがちなのですが、このバリューチェーンを意識するかどうかで、モバイル導入の目的や効果が明確になっていいと思います。

## さいごに

企業システムのフロントエンドエンジニアなりたいという人が少しでも増えるといいなと思っています。これからも微力ながら活動していきたいです。

[HTML5fun](http://html5fun.jp/)のスタッフの皆さん本当にありがとうございました。  
全国に HTML5 の楽しさを伝えるような活動を今後も行ってください。

HTML5funで「エンタープライズでのHTML5」について最近思うことを話してきた

先日、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 フレームワークでアプリケーションを構築する際のポイントだと最近感じています。

May, 2014

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

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

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

HTML5funで「エンタープライズでのHTML5」について最近思うことを話してきた

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