webアプリの
UIパターン管理
効率化ツール
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
am-mocktimes@1.0.19
を、小型案件で使ってみたお話
自己紹介
---
フリーランスエンジニア@3年目 / 独学@6年
---
twitter / @am_nimitz3
github / @ampcpmgp
facebook / akira.hayatake
取り掛かった案件
- 小型案件をこなしていました
- 中~大規模開発の一員としても
開発体制
- サーバーエンジニア (1人~複数人)
- フロントエンドエンジニア (1人)
- デザイナー(1人)
- Dir(1人~複数人)
- QA・テスターさん(1人~複数人)
UIパターン管理ツール
導入前の開発フロー
デザインリニューアル案件
ミッション
- スマフォでの見栄えを良くする
- アプリっぽくする
- サーバーサイド処理をjsにうつす
デザインが上がってきたとき
デザイナ「よろしくねー」
自分「きれいなデザインですね! 👍」
要件定義を見ると
Dir「D1とD2は切り替わるので、お願いね」
自分「承知しました。問題ないです。 🙂」
クライアント要望
クライアント様の声
「D1に、条件によりボタンを表示し、
押すとE2を表示してほしい」
自分「なるほどです😲 やります。💪」
テスト中
A
B
Setting A
C
D1
hidden C
hidden D
Setting B
E
QA/テスターさん
「既存仕様が反映されていないです。
Setting A / B が切り替わり、
hidden C / D が、条件により出現します」
\(^o^)/
理想
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
どこを取っても壊れない
現実
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
どこかを取ると盛大に崩れる
もちろん気合で何とか乗り切りましたが、
今後どんどん機能追加されていくと・・
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
そこで作ったのが、今回紹介する
UIパターン管理ツールになります
am-mocktimes
元々は社内ツールの1つとして作っていたものを
オープンソース化したものです。
何ができるものか
- パターンを作りながら開発できる
- e2e的に開発が進められる
導入
推奨環境はこちら
ファイル構造
パターンの作成には、 mockディレクトリにある
2つのファイルを編集していきます。
簡単なwebアプリ(ライツアウト)でご紹介
デモ / ソース
2画面構成
UIパターン一覧 |
webアプリのモック |
 |
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
|
コードの書き方を、5ページで、ざっくりと
UIパターン定義
mock/pattern.yml |
UIパターン一覧 |
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
|
 |
UIパターン定義(switch)
mock/pattern.yml |
UIパターン一覧 |
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
|
 |
UIパターン定義(action)
mock/pattern.yml |
mock/config.js |
 |
 |
配列にaction名と引数を入れると、固有なURLを生成、
そのURL内容を、config.jsが見ていて、実行されます。

黄色いラインが紐づき、緑の部分が引数として渡ります。
親の設定から順に、呼び出されます。
mock/config.js の特徴
- webアプリの状態を変えるもの
- webアプリ本体のjsと、同じmoduleを共有
- async関数が使え、後続処理を待たせられる
詳しくはドキュメントにて
↓に、サンプル有り
riotxでのサンプル
直接actionを呼び出すことができます
jQueryでのサンプル
本体と同じjQueryを読み込んでいるため、
clickイベント等、triggerさせることができます
(参考までに)dobjsのご紹介
am-mocktimesでは、状態管理ツールに、
dobjsを採用しています。
このツールは、ES2015/Proxyを利用したもので、
IE11は未対応ですが、楽に状態管理ができます。
要約すると
複雑なことはツールに任せて、
短いコードで、様々なパターンを作れます
本日最も伝えたいところ→
導入して、何が変わったか
- 開発時の操作が、ほとんど不要になる💡
- 仕様変更に強くなる💪
- URLを貼るだけで簡単に共有できる😊
何を意識して作ったか
- Riot.js以外の開発も行えること
- 開発スピードを上げること🚄🚄🚄
- 製品としての質を落とさないこと
am-mocktimes + Riot.jsでサクサク開発し、
プロダクトの規模が大きくなっていったものの
弱点
- 一覧ページは、IE11非対応
- OSS化したばかりで、使われていない😿😿
プロダクト規模の拡大に伴い
求められたもの
- 組織横断性
- 設計書作成・レビュー
- ユニットテスト
- コードレビュー
- e2eテスト
工数は3~5倍、堅牢性が上がり、柔軟性がダウン
中~大規模開発での利用ツール
- 設計書作成
- パーツ作成
- ユニットテスト
- コードレビュー
- E2E
am-mocktimes の今後
中~大規模開発にも耐えられるよう、
画面キャプチャ取得など、機能改善を進める
- こういった機能があれば使ってみたい😺
- こういった所が使いにくそう😟
などありましたら、github issueやtwitter等
連絡もらえれば、前向きに対応します!
「何を使ったかでは無く、何を作ったか」
を、自分は意識していたい
ご清聴ありがとうございました。
ツール・デモのURL一覧