<!-- 画面パターン管理ツールをriot.jsで作ってみたお話 --> <!-- 小型案件で利用したriot製パターン管理ツールの話 --> <!-- riotでの開発事例と、am-mocktimesのご紹介 --> <!-- プレゼン 何のためか # ◎便利さを伝えたい 〇開発しやすい環境を提供したい # am-coffee-timeを伝えたい 〇使ってみてほしい 〇フィードバックが欲しい 何を伝えるか ◎日常業務で困った点を伝え ◎それが、どう解決したかを伝える ◎サクサク作れて楽しいことを伝えたい 〇作る上で追及したもの 〇上記の、楽しさ 〇後で見た時のわかりやすさ 〇捨てやすさ ◎riotで作られていますが、アプリはどんなフレームワークでも使用できます どうやって伝えるか 困った状況を、サンプルのhtmlを作って共有する 1. 共有しきってから、解決策を提示 2. 共有しながら、解決策を提示 3. 1 -> 2の順で、提示 * 実際に作っているところを見せたい。 画面を切り替え、２画面並べる 実際の想定フローを共有する * 開発フローを並べるだけにする パターン駆動開発の共有 ライブコーディング形式で、 パターン列挙 コーディング開始 必要なイベントを作成 パターンを作っていく 完成★ プレゼンは相手に行動させるためにするべし * am-mocktimesを軽く触ってもらえるようにする * riot以外も含むならこっちしかない * am-coffee-time-starterを軽く触ってもらえるようにする * riotだとこっちか？ * フォルダ構成を、react/ducks交えながら話す これを聞いたあとに、何をすればよいのか npm install am-coffee-time parcel-bundler npx am-coffee-time generate-template npx am-coffee-time start # # edit generated files プレゼンの核「聴衆がプレゼンの後で、他の人にワンセンテンスで内容を説明出来るもの」 * パターン管理で便利そうなもの見つけたよ。 * 楽に開発出来そうだった。 * am-mocktimes 面白そうだったよ。 自分ならではの「核」 速さ 一度定義すると、勝手にパターンを再現してくれること 共有のしやすさ URLでパターンが出来ているため、貼って送るだけでOK 楽しさ 何度も同じことを繰り返さなくて良い心地よさ am-mocktimes に名前変更 アクションを明確にする フロントエンド開発者が、 複雑なSPAのパターン開発を、 楽に早くしていけるようにする # フロントエンドには、デモ版やアルファ版など、 プロダクト側から、一層の開発パフォーマンス（スピード・質） の向上が求められてきていると思われる。 それを解決する手段の一つとして、進めていこうという話。 フィラーと呼ばれる口癖には気を付ける。 →「えーっと」の多用や →「基本的に」のあとに続く言葉のほうが複雑な話をしていたり →「要するに」のあとのほうが要していない長い話だったり →→口癖を気にする余裕を持つ --> <!-- style定義 http://runstant.com/am-akira/projects/62321df8 --> <style> div._rs_progress { display: flex; flex-direction: column; border: solid 1px #555; margin: 10px; } div._rs_box { display: flex; width: 100%; } ._rs_box > * { flex: 1; } span._rs_item { min-height: 60px; } span._rs_item_last { min-height: 45px; } ._rs_A { background: rgba(255, 255, 0, 0.4); } ._rs_B { background: rgba(0, 255, 255, 0.4); } ._rs_C { background: rgba(255, 0, 0, 0.4); } ._rs_C._rs_box { min-height: 60px; display: flex; } ._rs_D { background: rgba(0, 255, 0, 0.4); } ._rs_D1 { background: rgba(0, 128, 64, 1); display: flex; flex-direction: column; justify-content: center; } ._rs_D2 { display: flex; flex-direction: column; justify-content: center; background: rgba(64, 128, 0, 1); transform: rotateY(180deg); } ._rs_D1-sub { display: flex; align-items: center; } ._rs_E { background: rgba(0, 0, 255, 0.4); } ._rs_target { border: solid 4px deeppink !important; } ._rs_target_blue { border: solid 4px blue !important; } ._rs_flipper { animation: 2s ease-in 0s infinite normal both running flip; transform-style: preserve-3d; perspective: 1000px; position: relative; } ._rs_flipper._rs_4 { animation-duration: 4s; } ._rs_flipper > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; } ._rs_client { height: 50px; } ._rs_fader { animation: 2s ease-in 0s infinite alternate both running fadeout; } ._rs_reverse { animation-direction: alternate-reverse; } @keyframes flip { 0% { transform: rotateY(0); } 10%, 50% { transform: rotateY(180deg); } 60% { transform: rotateY(0); } } @keyframes fadeout { 0% { opacity: 1; } 90% { opacity: 0; } } </style> <!-- こういった場で登壇するのが初めてで、かなり緊張しているんですが 出来るだけ楽しく、紹介していきたいなと思いますので、よろしくお願いします パターン管理効率化ツール このツールの導入前と、導入後、紹介を含めて、 お話させていただこうと思っています。 自己紹介 取り掛かった案件 jQueryが多かったのですが、それをアプリっぽくしたいという要望のときに、riotを使っていました。 本日話すのは、主に 上のほうになります。 最後のほうに、ちらっと、react周りの話もしたいなと思います 主な開発体制 こんな感じになっていて、最初は５人程度と、小さいチームでした。 それから徐々に増えて、１０人、２０人と、規模が大きくなっていきました。 導入前の開発フロー を、まずはざっくりと、お話しようと思います デザインリニューアル時 ガラケーデザインのサイトを綺麗にする、といった感じですね。 デザインが上がってきたとき こういった感じの、シンプルで綺麗なデザインをもらって さすがデザイナーだなーと思って、取り掛かります。 要件定義を見ると アプリだしある程度の分岐はあるだろうなぁと思って、取り掛かります。 クライアント要望 こういった感じで、複雑な機能を追加してほしい ちょっと大変そうだなと思いつつ、何とか頑張ってやりますと お伝えし、取り掛かりました。 テスト中 開発終盤の、納期まで３日くらいのとき。 Dirもデザイナも知らなかった、既存仕様を指摘されます。 あれ、さっき、D1の下にボタン追加したんだけど、どっちが上なんだっけ・・・。 ＼(＾o＾)／ あっこれ、終わったやつだ、 理想 綺麗に並んでいて、どこを取っても、壊れない 現実 乱雑に並んでいて、どこかを取ると、盛大に崩れる もちろん気合で（残業5時間とかして）何とか乗り切りましたが、 今後どんどん機能が積み重なっていくと、どこかで大きく崩れるのでは・・。 この積み重なっていく１つ１つが、機能、といった感じですね そこで作ったのが、今回紹介する 何ができるものか 詳しくは後ほど、デモを用いて紹介します 導入 は簡単で、３コマンドで、起動までいけます。 推奨環境は、リンクを貼っていますが、npxが必要です。 node.jsやnpxなど、ちょっと新しめな環境が必要です。 ファイル構造 先ほどのコマンドを打つと、以下のファイルが出来て パターンを作るのは、mockディレクトリにある、二つのファイルを編集していきます。 ライツアウトを知らない方が、うちの会社だと多かったので 簡単に説明します。 こういったボタンが並んでいて、全てのライト、光を消せばクリアといったものです 簡単なwebアプリ(ライツアウト)でご紹介 まずはデモを使って、簡単に説明します。 開いたこのページが、パターン一覧画面になっていて、 （何も開かずに） 例えば、3x3を押すと、3x3のライツアウトアプリ画面が出てきます。 10x10だと、こんな感じです。 階層を持つこともできます。 （・・・） スライドに戻って ２画面構成 左側が、パターンの一覧が並んでいく画面です。 左側の7x7キューブをクリックすると、 右側の画面が出て、縦横のアイテムが、7x7のアプリが出てきます。 コードの書き方を、ざっくりと UIパターン定義 （デモ）ここにただ、並べて表示するだけです。 UIパターン定義(switch) switchという定義を書くと、パターン一覧画面に、該当の要素が出てきます。 僕はこの機能を、多言語化したときに実装しました。（日本語/英語/中国語）といった感じで切り替え出来ます。 UIパターン定義(action) この黄色い枠で囲ってるところで、アクション名を定義します。 （デモを開く）ここのURLが変わっていて、それmocktimes側でキャッチして、モックの切り替えをしています。 次のページ このように、黄色いラインが紐づいていて、緑の部分が、引数としてわたります モックアクションの特徴として アプリの状態を変えるもの 3x3/5x5のように初期状態を切り替えたり、UI上の操作により見た目の状態を変えることができるものです。 webアプリ本体のjsと、同じmoduleを共有 これが重要で、riotxのような状態管理ツールを呼び出したり、axiosの設定を変えたり出来ます。 async関数が使える これにより、非同期な状態変更も、直感的に書けます。 UIだと、この部分です。 下に行く dobjs サンプルコードでは、 dobjsを使ったactionを、importして、呼び出しています。 要約すると 慣れると、直感的に書くことができると思います 導入して、何が変わったか 開発時の操作が、ほとんど不要になる クリック操作、入力操作が無くなります 大変なものだと、１０以上の操作をしないと、たどり着けない状態もありますが 一度定義すると、ページを開くだけでその状態を再現できます。 仕様変更に強くなる パターンが簡単に作れて、影響のある他の状態も、すぐに見て確認できるので、柔軟な対応ができます URLを貼るだけで簡単に共有できる デザイナさんに、困った状態を、楽に共有出来るので、サクサク進み、楽しくなりました （このパターン管理ツールで） 何を意識して作ったか riot以外のフレームワークでも、利用できる jqueryやvue、reactでも利用できる 開発スピードを上げること サクサク作れると、楽しくなってくる 弱点 流行ってない プロダクトが大きくなってくると、こういった点を指摘されるようになりました プロダクト規模の拡大に伴い 組織横断性 ぼくは外部社員として入っていたので、 社内のreact勢、vue勢に対して、優位性を明確することが出来なかった。 reactに寄せられてしまった感じです これらの施策により、工数は３～５倍 プロダクト側はサクサク作ることを求めはしますが、 上記を全部やるのであれば、どうしようもないっていう感じでした。 am-mocktimesの今後 今、reactとは別に、このツールを使えそうな案件があって、 そのプロダクトの規模が大きくなっても、運用に耐えられるものにしたいなと思っています。 こういった機能があれば 前向きに対応するので、よかったら是非、おねがいします 最後になるんですが 「何を使ったかでは無く、何を作ったか」 という意識を持って、開発をしていきたいなと思います。 ご清聴ありがとうございました。 --> # webアプリの<br><span style="color: rgb(0, 255, 0); font-size: 0.8em">UIパターン管理</span><br>効率化ツール  [am-mocktimes@1.0.19](https://github.com/ampcpmgp/am-mocktimes/) を、小型案件で使ってみたお話 --- ## 自己紹介 `---` フリーランスエンジニア@3年目 / 独学@6年 `---` *[twitter / @am_nimitz3](https://twitter.com/am_nimitz3)* *[github / @ampcpmgp](https://github.com/ampcpmgp/)* <span style="color: skyblue">*facebook / akira.hayatake*</span> --- ### 取り掛かった案件 * 小型案件をこなしていました * jQuery -> Riot.js * 中～大規模開発の一員としても * React --- ### 開発体制 * サーバーエンジニア (1人～複数人) * <span style="color: yellow">フロントエンドエンジニア (1人)</span> * デザイナー(1人) * Dir(1人～複数人) * QA・テスターさん（1人～複数人） --- UIパターン管理ツール ## 導入前の開発フロー --- ### デザインリニューアル案件 ミッション * スマフォでの見栄えを良くする * アプリっぽくする * サーバーサイド処理をjsにうつす --- ### デザインが上がってきたとき <div class="_rs_progress"> <div class="_rs_box"> <span class="_rs_item _rs_A">A</span> <span class="_rs_item _rs_B">B</span> </div> <div class="_rs_box"> <span class="_rs_item _rs_C">C</span> <span class="_rs_item _rs_D">D</span> </div> <span class="_rs_item _rs_E">E</span> </div> デザイナ「よろしくねー」 <span style="color: yellow"> <!-- .element: class="fragment" data-fragment-index="1" -->自分「きれいなデザインですね! 👍」 </span> --- ## 要件定義を見ると <div class="_rs_progress"> <div class="_rs_box"> <span class="_rs_item _rs_A">A</span> <span class="_rs_item _rs_B">B</span> </div> <div class="_rs_box"> <span class="_rs_item _rs_C">C</span> <span class="_rs_item _rs_D _rs_flipper _rs_target"> <span class="_rs_D1">D1</span> <span class="_rs_D2">D2</span> </span> </div> <span class="_rs_item _rs_E">E</span> </div> Dir「D1とD2は切り替わるので、お願いね」 <span style="color: yellow"> <!-- .element: class="fragment" data-fragment-index="1" --> 自分「承知しました。問題ないです。 🙂」 </span> --- ## クライアント要望 <div class="_rs_progress"> <div class="_rs_box"> <span class="_rs_item _rs_A">A</span> <span class="_rs_item _rs_B">B</span> </div> <div class="_rs_box"> <span class="_rs_item _rs_C">C</span> <span class="_rs_item _rs_D"> D1 <div class="_rs_D1-sub _rs_client _rs_target"> Button </div> </span> </div> <span class="_rs_item _rs_E">E</span> <span class="_rs_E _rs_target _rs_client">E2</span> </div> クライアント様の声 「D1に、条件によりボタンを表示し、 押すとE2を表示してほしい」 <span style="color: yellow"> <!-- .element: class="fragment" data-fragment-index="1" --> 自分「なるほどです😲 やります。💪」 </span> --- ## テスト中 <div class="_rs_progress"> <div class="_rs_box"> <span class="_rs_item_last _rs_A"> A </span> <span class="_rs_item_last _rs_B"> B </span> </div> <div class="_rs_target"> Setting A <div class="_rs_box"> <span class="_rs_item_last _rs_C">C</span> <span class="_rs_item_last _rs_D">D1</span> </div> <div class="_rs_box _rs_target_blue"> <span class="_rs_item_last _rs_C">hidden C</span> <span class="_rs_item_last _rs_D">hidden D</span> </div> </div> <div class="_rs_item_last _rs_D1 _rs_target"> Setting B </div> <span class="_rs_item_last _rs_E">E</span> </div> QA/テスターさん 「既存仕様が反映されていないです。 <span><!-- .element: class="fragment" data-fragment-index="1" -->Setting A / B が切り替わり、 </span> <span><!-- .element: class="fragment" data-fragment-index="2" -->hidden C / D が、条件により出現します」</span> --- # ＼(＾o＾)／ --- ## 理想  どこを取っても壊れない --- ## 現実  どこかを取ると盛大に崩れる --- もちろん気合で何とか乗り切りましたが、 今後どんどん機能追加されていくと・・ <span> <!-- .element: class="fragment" data-fragment-index="1" --> <img src="https://i.imgur.com/MwvqZW3.gif" /> </span> --- そこで作ったのが、今回紹介する UIパターン管理ツールになります [am-mocktimes](https://github.com/ampcpmgp/am-mocktimes/) <span style="font-size: 0.7em; color: #999"> <!-- .element: class="fragment" data-fragment-index="1" --> 元々は社内ツールの１つとして作っていたものを<br> オープンソース化したものです。 </span> --- ### 何ができるものか * パターンを作りながら開発できる * e2e的に開発が進められる --- 導入 ```shell npm i am-mocktimes parcel-bundler -D npx am-mocktimes generate-template # テンプレートファイル生成 npx am-mocktimes watch ``` <br> 推奨環境は[こちら](https://github.com/ampcpmgp/am-mocktimes/#recommended-environment) --- ファイル構造 ```shell .am-mocktimes/ # 出力ファイル (.gitignore推奨) mock/ # モック pattern.yml config.js src/ # アプリケーション本体 index.html app.js ``` <span style="font-size: 0.8em"> <!-- .element: class="fragment" data-fragment-index="1" --> パターンの作成には、 mockディレクトリにある<br> ２つのファイルを編集していきます。 </span> --- 簡単なwebアプリ(ライツアウト)でご紹介 [デモ](https://ampcpmgp.gitlab.io/plane-puzzle/pattern.html) / [ソース](https://gitlab.com/ampcpmgp/plane-puzzle) --- ### 2画面構成 | UIパターン一覧 | webアプリのモック | | -- | -- | |  | <img src="https://i.imgur.com/u4gny4l.png"> | --- コードの書き方を、５ページで、ざっくりと --- ### UIパターン定義 | mock/pattern.yml | UIパターン一覧 | | -- | -- | | <img src="https://i.imgur.com/Gx4C0kr.png" width="80%" /> |  | --- ### UIパターン定義<span style="color: #00ffff">(switch)</span> | mock/pattern.yml | UIパターン一覧 | | -- | -- | | <img src="https://i.imgur.com/YkcmuGm.png" width="60%" /> |  --- ### UIパターン定義<span style="color: #00ffff">(action)</span> | mock/pattern.yml | mock/config.js | | -- | -- | |  |  | <span style="font-size: 0.8em"> <!-- .element: class="fragment" data-fragment-index="1" --> 配列にaction名と引数を入れると、固有なURLを生成、<br> そのURL内容を、config.jsが見ていて、実行されます。 </span> ---  <span style="font-size: 0.8em"> <!-- .element: class="fragment" data-fragment-index="1" --> 黄色いラインが紐づき、緑の部分が引数として渡ります。<br> 親の設定から順に、呼び出されます。 </span> --- ### mock/config.js の特徴 * webアプリの状態を変えるもの * webアプリ本体のjsと、同じmoduleを共有 * async関数が使え、後続処理を待たせられる 詳しくは[ドキュメント](https://github.com/ampcpmgp/am-mocktimes/#config-mockconfigjs)にて <span style="color: #555">↓に、サンプル有り</span> ---- <!-- .slide: data-transition="fade" --> #### riotxでのサンプル 直接actionを呼び出すことができます ```javascript import mock from 'am-mocktimes' import riotx from 'riotx' mock({ action (storeName, actionName) { riotx.get(storeName).action(actionName) } }) ``` ---- <!-- .slide: data-transition="fade" --> #### jQueryでのサンプル 本体と同じjQueryを読み込んでいるため、 clickイベント等、triggerさせることができます ```javascript import mock from 'am-mocktimes' import $ from 'jquery' mock({ click (selector) { $(selector).click() } }) ``` ---- <!-- .slide: data-transition="fade" --> #### （参考までに）dobjsのご紹介 [am-mocktimes](https://github.com/ampcpmgp/am-mocktimes/)では、状態管理ツールに、 [dobjs](https://github.com/dobjs/dob)を採用しています。 ```javascript import mock from 'am-mocktimes' import actions from '../src/actions' // dob actions mock(actions) ``` <span style="font-size: 0.8em"> <!-- .element: class="fragment" data-fragment-index="1" --> このツールは、ES2015/Proxyを利用したもので、<br> IE11は未対応ですが、楽に状態管理ができます。 </span> --- ### 要約すると 複雑なことはツールに任せて、 短いコードで、様々なパターンを作れます --- 本日最も伝えたいところ→ --- ## 導入して、何が変わったか * 開発時の操作が、ほとんど不要になる💡 * 仕様変更に強くなる💪 * [URL](https://ampcpmgp.gitlab.io/plane-puzzle/pattern.html#%7B%22mockUrl%22%3A%22mock.html%3F__amMocktimes__%3D%25255B%25255B%252522setInitialColors%252522%25252C3%25255D%25252C%25255B%252522sleep%252522%25252C1000%25255D%25252C%25255B%252522advanceColorValuesAround%252522%25252C0%25252C0%25255D%25252C%25255B%252522sleep%252522%25252C1000%25255D%25252C%25255B%252522advanceColorValuesAround%252522%25252C4%25252C4%25255D%25252C%25255B%252522sleep%252522%25252C500%25255D%25252C%25255B%252522advanceColorValuesAround%252522%25252C0%25252C4%25255D%25252C%25255B%252522sleep%252522%25252C2000%25255D%25252C%25255B%252522advanceColorValuesAround%252522%25252C4%25252C0%25255D%25255D%22%7D)を貼るだけで簡単に共有できる😊 --- ## 何を意識して作ったか * Riot.js以外の開発も行えること * 開発スピードを上げること🚄🚄🚄 * 製品としての質を落とさないこと --- am-mocktimes + Riot.jsでサクサク開発し、 プロダクトの規模が大きくなっていったものの --- ## 弱点 * 一覧ページは、IE11非対応 * OSS化したばかりで、使われていない😿😿 --- ### プロダクト規模の拡大に伴い 求められたもの * 組織横断性 * <span style="color: #00ff00">riot? vue? react?</span> * 設計書作成・レビュー * ユニットテスト * コードレビュー * e2eテスト <div style="font-size: 0.8em"> <!-- .element: class="fragment" data-fragment-index="1" --> <br> 工数は３～５倍、堅牢性が上がり、柔軟性がダウン </div> --- ## 中～大規模開発での利用ツール * 設計書作成 * [confluence](https://ja.atlassian.com/software/confluence) * パーツ作成 * [(React) storybook](https://github.com/storybooks/storybook) / スタイルガイド * ユニットテスト * [mocha](https://github.com/mochajs/mocha) / [jest](https://github.com/facebook/jest) * コードレビュー * [github enterprise](https://enterprise.github.com/home) / [Jenkins](https://jenkins.io/)等 * E2E * [cypress](https://github.com/cypress-io/cypress) / [testcafe](https://github.com/DevExpress/testcafe) / [selenium](https://github.com/SeleniumHQ/selenium) --- ## am-mocktimes の今後 中～大規模開発にも耐えられるよう、 画面キャプチャ取得など、機能改善を進める --- * こういった機能があれば使ってみたい😺 * こういった所が使いにくそう😟 などありましたら、[github issue](https://github.com/ampcpmgp/am-mocktimes/issues)や[twitter](https://twitter.com/am_nimitz3)等 連絡もらえれば、前向きに対応します！ --- 「何を使ったかでは無く、何を作ったか」 を、自分は意識していたい --- ご清聴ありがとうございました。 --- ツール・デモのURL一覧 * [am-mocktimes](https://github.com/ampcpmgp/am-mocktimes/) * [ライツアウトのデモ](https://ampcpmgp.gitlab.io/plane-puzzle/pattern.html) * [ライツアウトのソース](https://gitlab.com/ampcpmgp/plane-puzzle)