SlideShare a Scribd company logo
GMOインターネット株式会社
提箸 浩志
ConoHa WINGを支える技術(UI編)
ConoHa コントロールパネル
コンパネの基礎となる
「3つの柱」
使
い
や
す
さ
速
さ
美
し
さ
「使いやすい」 WING!
ユーザーテスト
UIがなかなか決定しない…
ツールを駆使して何度も検討!→ようやく完成!
すでに開発期間が
始まってるんだけど・・・
○○のUIを
別のものに変更し
てください!
△△のUIをこっち
からこっちへ移動
してください!!
××のUIは不要に
なったので削除し
てください!!!
ロジックとUIを分離して柔軟に対応(ドヤァ
UI
ロジック
つ「バグ・仕様変更」
結局UI・ロジックともに
最後まで修正しまくり
「速い」 WING!
VPSと同じ仕組みでいきたい(新しく作るの面倒だし
遅い!
モッサリ!
固まる!
鋭意対応中です
WINGはページ遷移が多いので、もっと苦情がきそう…
部分的にSPAの仕組みを導入
速くなった!
けど、全部
「美しい」 WING!
VPS側のUI
美しい(゚∀゚)
WING開発メンバー ≠ VPS開発メンバー
VPSのときと同じ感じで作ってね
既存の画面パーツをコンポーネント化
これでVPS側と統一感のある美しいUIを作れる!
全部コンポーネント使って作ってね
はーい
半分もコンポーネント化
できなかった
結局、詳しい人が
個別に指示&総チェック
できあがったものが…
今後の予定
機能追加、改善
スマホアプリ
個人的な趣味
ご清聴ありがとうございました

More Related Content

What's hot

日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます
日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます
日曜プログラマーがHtml5とかで通信対戦ゲームを作ってますYuusuke Takeuchi
 
MVVM開発をさらに加速させる ノンコーディングUI開発
MVVM開発をさらに加速させる ノンコーディングUI開発 MVVM開発をさらに加速させる ノンコーディングUI開発
MVVM開発をさらに加速させる ノンコーディングUI開発
c-mitsuba
 
プログラマのためのPC自動化
プログラマのためのPC自動化プログラマのためのPC自動化
プログラマのためのPC自動化
高見 知英
 
Plan 9 MEETS "YUREX" 発動篇
Plan 9 MEETS "YUREX" 発動篇Plan 9 MEETS "YUREX" 発動篇
Plan 9 MEETS "YUREX" 発動篇
Go Saito
 
JSでファミコンエミュレータを作った時の話
JSでファミコンエミュレータを作った時の話JSでファミコンエミュレータを作った時の話
JSでファミコンエミュレータを作った時の話
sairoutine
 
Touhou Project on JavaScript
Touhou Project on JavaScriptTouhou Project on JavaScript
Touhou Project on JavaScript
sairoutine
 
ゲーム開発とMVC
ゲーム開発とMVCゲーム開発とMVC
ゲーム開発とMVC
Takashi Komada
 
(たぶん)やさしいUnity
(たぶん)やさしいUnity(たぶん)やさしいUnity
(たぶん)やさしいUnity
dj_kusuha
 

What's hot (8)

日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます
日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます
日曜プログラマーがHtml5とかで通信対戦ゲームを作ってます
 
MVVM開発をさらに加速させる ノンコーディングUI開発
MVVM開発をさらに加速させる ノンコーディングUI開発 MVVM開発をさらに加速させる ノンコーディングUI開発
MVVM開発をさらに加速させる ノンコーディングUI開発
 
プログラマのためのPC自動化
プログラマのためのPC自動化プログラマのためのPC自動化
プログラマのためのPC自動化
 
Plan 9 MEETS "YUREX" 発動篇
Plan 9 MEETS "YUREX" 発動篇Plan 9 MEETS "YUREX" 発動篇
Plan 9 MEETS "YUREX" 発動篇
 
JSでファミコンエミュレータを作った時の話
JSでファミコンエミュレータを作った時の話JSでファミコンエミュレータを作った時の話
JSでファミコンエミュレータを作った時の話
 
Touhou Project on JavaScript
Touhou Project on JavaScriptTouhou Project on JavaScript
Touhou Project on JavaScript
 
ゲーム開発とMVC
ゲーム開発とMVCゲーム開発とMVC
ゲーム開発とMVC
 
(たぶん)やさしいUnity
(たぶん)やさしいUnity(たぶん)やさしいUnity
(たぶん)やさしいUnity
 

ConoHa WINGを支える技術(UI編) 「コンパネの基礎となる3つの柱」