Post on 21-Mar-2017
エンプラで 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