エンプラで SPA で最新 UI ！？よし、作って OSS 化！

Future ArchitectYuzo Hirakawa

平川 裕蔵Qiita@Hirakawa_Yuzo

元バイカー

今ゲーマー

C, C++, HTML, CSS, JavaScriptこのあたりが得意です。

社内では、 UI/UX を専門に技術を深めていっています。

自己紹介

享年 1 ヶ月

http://future-architect.github.io/urushi/

コンポーネント指向オブジェクト指向Material Design大規模開発向け

本日ご紹介するのはこちら

ユーザーは SPA として構築されたアプリケーションを利用。

ユーザー数 72000 人開発規模 300KL 以上

依存ライブラリ群

Urushi

プロジェクト FW

SPA

Web AP DB

ユーザー

構築システム

どういうシステムで SPA 構築したのか

ブラウザサイド

Future のよくあるアプリケーション構築

画面パターン 2

画面パターン 1

画面パターン N

画面部品 1

画面部品 2

画面部品 n

︙ ︙

Java/XHTML SQL

業務処理

• 1 画面に対する機能が多い

• 業務スピード向上

• １０年先でも最新って言えるシステム

SPA を構築した顧客の要件

基本方針を決める

差分描画

ユーザビリティ向上

業務スピード向上

1 画面に対する機能が多い

10 年先でも最新

MaterialDesign？

SPA ！？※Single Page Application

基本方針を決める

SPA ！！

品質

効率性

コスト作る

使う

Object 指向

AMD

画面パターン 2

画面パターン 1

画面パターン N

画面部品 1

画面部品 2

画面部品 n

︙ ︙

Java/XHTML SQL

業務処理

Why SPA

ロジックを分離させたくない

• ユーザーに対するレスポンススピードを向上させる

• ハードウェアスペックへの配慮

Challenge SPA

• 過去に SPA で大規模 Web アプリは構築出来た経験がある今の現場でも導入できるはず

• JavaScript エンジニアを増やしたい

OSS を選定する

時は 2015 年 1 月・・・ JavaScript ライブラリ群雄割拠の時代

Choice

プロジェクトへの導入実現性は？

しかし・・・

設計自由度を持たせつつ、品質を担保する仕組みが欲しいコンポーネント指向型のライブラリとか・・・

？マッチする OSS が見つからない

構成要素をいたずらに増やしたくない

一方その頃

Material Design 面白そう。CSS3 だけで作れないだろうか。

Button, Checkbox とか色々作れそう

サーバーにデモ公開して、プロジェクトに作ったよメール投げてみよ！

もっとやれ！

Me

偉い人

そんなこんなで

Object 指向で開発したい開発者への公開はコンポーネント単位で利用してもらう。HTML で記述するだけにしたいから、パーサーが必要だな。etc ・・・

どうせなら名前つけようぜ！

ロゴ作りました！

Me

2016 年 1 月

正式に OSS 公開

プロジェクトに導入するには

UI ポリシー、開発方法の布教 ソースコード自動生成

Project Framework

画面 A 画面 B 画面 N・・・

認可 コンポーネント制御

画面遷移管理 ｅｔｃ）

プロジェクト向け FW 開発

いざ開発！

プロジェクトに導入して起きた問題

設計担当者

FW は何をしてくれるの？

どこを設計するのかわからない

MaterialDesignわかりません。

プロジェクトに導入して起きた問題

プロジェクトに導入して起きた問題

プロジェクトに導入して起きた問題

画面開発支援デバッグツール

• 作成している画面（ SPA のパーツ）を即時起動してくれるツール

• 画面起動に必要なパラメータは JSON で用意するだけで OK簡易的なパラメータであれば、ドロップダウンから選択するだけ

プロジェクトに導入して起きた問題

プロジェクトに導入して起きた問題

Good！

設計担当者

そして・・・ 2016 年 10 月システムは無事稼働。

見えてきた成果とこれからの課題

性能の向上

コンポーネントの恩恵

カスタマイズが容易

高い期待値を求められる

Material Design VS Enterprise

OSS 化に至ったワケ

技術的な活動は自由に広く。

どんな OSS ？

Material Design

どんな OSS ？

Urushi レンダリングエンジン

buttoninput

panel

インスタンスView

どんな OSS ？

どんな OSS ？

8+

Urushi の今後

• Enterprise 向けに UI デザインを洗練していく

• 依存ライブラリを消去

• Enterprise の UI で困りがちなものへの対応• Grid• Tree• Tab