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 ユーザ体験を提供できる可能性を秘めているのではないかと思います。

業務系アプリケーションに特化したSAP社製「SAPUI5」を触ってみた

[デブサミ 2014](http://event.shoeisha.jp/devsumi/20140213/)のエンタープライス向けのショートセッションにて
10 分間という短い時間ですが、私の「Story」「Action!」についてお話させていただきました。

Yet Another Your Story (Enterprise TED 3)
[http://event.shoeisha.jp/devsumi/20140213/session/401/](http://event.shoeisha.jp/devsumi/20140213/session/401/)



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

講演前の TED メンバー。みんな緊張してます w。（撮影：荒井さん）  
（上段左から、高柳さん、中野さん、梅澤さん、川添さん）  
（下段左から、高野さん、わたし、平栗さん）

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

講演前の準備風景（撮影：荒井さん）

資料は 5 分で読める内容ですので、悩める業務システムエンジニアの方は、読むと少しエネルギーをチャージできると思います。

内容は、35 歳からフロントエンジニアへキャリアチェンジした、私の小さなサクセスストーリーについてです w。
ちなみに読者の自発的な「Action!」を促す仕様であるため、自己啓発本のような即効性のあるものではありません。
でも、共感できる方には内側からじんわり効いてくる内容だと思います。

資料はこちらです。

[35 歳無名のシステムエンジニアが 1 年半でフロントエンジニアになるために行った 3 つの成長戦略](https://www.slideshare.net/mitsuruogawa33/35-31190170)

では、少し言いたかったこととか背景とか補足しますね。

## 伝えたかったのは「自分主体」への転換

伝えたかったことは「SI 最高！」ではありません w。
あまり資料の中では語られてないのですが、自分の中で 1 年半でもっとも変わった部分があるとすると「思考停止しなくなった、情報に流されなくなった」ところだと思います。

今でも「SI オワコン」と言われている世の中ですが、
それを聞いて「オワコン」と感じるかどうかは、自分受け取り方次第なのです。

資料中で成長戦略を見直すとか、現職に残って頑張るとか言ってますが、
大事なことはすべて自分で考えて決断することだと思います。

## 35 歳以上だからできること

今回は私と同年代をターゲットにしていますが、
それには私なりに SI 業界の悲しい現状を意識した明確な意図があります。

というのは最近、情シスや SI は役割を攻めに変えなければ！というような流れになってきて、号令をかけるだけの上の人たちはイケイケになっている訳ですが、
その一方で、現場では過去の負の遺産や無理難題を背負わされて身動きが取れない所も少なくはありません。
まさしく崖っぷちです。

こんな崖っぷちの状況をなんとかするためには、
業務システムの開発現場や動いているシステムの現状を知っていて、未来の話を考えられる前向きなエンジニアの力が必要なのではないでしょうか？

このような役割ができるのは、はっきり言って今の 35 歳以上の人たちだけです。

## SI だから出来る日本の未来の為に出来る事

ところで 20 年後、日本の未来は明るいのでしょうか？
うーん。

私には 3 歳になったばかりの娘がいるのですが、
娘が大きくなったときに日本がどうなっているのか心配でなりません。

良くも悪くも、今までの企業システムは SI が支えてきました。
そして、これからも SI は日本の企業システムを支えていくでしょう。
世界と戦う企業のために、武器となる IT サービスを SI が提供できなければ、やっぱり「オワコン」の SI はそこに頼っている企業共々終わってしまうと思います。
SI だけだといいのですが、企業まで共倒れさせてしまうのはいかがなものかと。。。

まじ SI 頑張れ。

## 最後に

とはいえ、SI を取り巻く状況は年々厳しくなってきたのも事実です。
いつぞやのガードナー予測にあった通り、今後いくつかの SI は姿を消すかもしれません。
そんな状況の中、保守的な SI 業界にいるとついつい弱気になってしまいがちですが、私が会社の同僚に口を酸っぱくして言っていることが 1 つあります。

> 「全体の 2 割を変える、2 割が変わると全体が変わる。」

> 「一度に全体を変るのは難しい。まず 2 割の有望な人を変えるように試みる。その 2 割の人を使って全体にアプローチしていこう。」

これは、会社の中だけではなく、SI 業界、元気を失った日本社会全体にも言える事なのかもしれません。そんな熱くて前向きなオッサン増えるといいですね。

まじオッサン頑張れ。

## 謝辞

川添さん、高柳さん、資料作成詰まった時、助けていただき本当にありがとうございました。
皆さんのサポートがなければ、この発表は世に出なかったと思います。

それから TED メンバーの皆さん、素晴らしい時間を共有できて本当に有り難かったです。
これからもそれぞれのフィールドでのご活躍お祈りしています。

###️ で、宣伝 w

そんな、悩める SI のシステムエンジニア皆様へ、私が所属する社外コミュニティ「html5j エンタープライズ部」にて HTML5 に関するカンファレンスを 2/28 に開催することにしました。

[「Enterprise×HTML5 Web Application Conference」](http://conference.html5biz.org/2014spring/)

無料です。ビールまで奢ります w。

ここでは、「HTML5 を使っていかに安全にアプリケーションを構築するか」に特化したベンダー系セッションと
「HTML5 を実際の企業システムで使う上でのノウハウ」が一杯詰まったオープン系セッションの 2 つを準備しています。

これからの SI を背負う熱意のあるエンジニアの皆さんの参加をお待ちしております。
（平日開催です。まじめな内容ですので、有給ではなく堂々と業務時間でお越しください。）

次はあなたの Action！

February, 2014

業務系アプリケーションに特化したSAP社製「SAPUI5」を触ってみた

デブサミ2014で35歳からフロントエンジニアにキャリアチェンジして35歳定年説を覆した話をしてきた