クラウド税務 会計 給与システム開発にスピードを!A-SaaS が Sencha Ext JS / Sencha Test を導入した軌跡 第 36 回エンバカデロ デベロッパーキャンプ アカウンティング サース ジャパン株式会社土田拓也 斎藤はるか 北村圭 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します
アジェンダ はじめに Sencha Ext JS を選定した経緯 Sencha Ext JS で開発したプロダクト紹介 Sencha Test による UI テスト自動化の軌跡 デモ :Sencha Test で UI テストを実装してみよう おわりに 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 2
はじめに アカウンティング サース ジャパン A-SaaS( エーサース ) テスト自動化チーム 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します
https://www.a-saas.com 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 4
本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 5
本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 6
本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 7
テスト自動化チーム プロダクト開発グループグループリーダー土田拓也 開発生産性をあげたくて Sencha を導入した責任者 プロダクト開発グループテストオートメーションエンジニア斎藤はるか QA の負担を減らし品質向上を目指すテスト自動化エンジニア プロダクト QA グループ QA エンジニア北村圭 リソースを理由に品質を妥協したくない頑固な QA プロダクト開発グループフロントエンドエンジニア長谷部 テスト自動化を推進する陰の実力者 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 8
Sencha Ext JS を選定した経緯 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します
税務プロフェッショナル向けアプリケーションクラウド税務 会計 給与システム A-SaaS に求められる要件 動作の安定性 データの整合性 計算結果の正確性 デスクトップアプリケーション並みの高速な操作性 最低でも 7 年以上帳票が出力できることを維持できる保守性 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 10
既存開発技術 :Adobe Flex + Adobe AIR + Rich Internet Application (RIA) 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 11
2020 年末 Adobe Flash Plugin 配布終了 https://theblog.adobe.com/adobe-flash-update/ 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 12
Adobe Flex + Adobe AIR??? こりゃ本気で移行しなきゃなんないね 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 13
新規開発技術 :HTML5 + CSS3 + JavaScript + + Single Page Application (SPA) 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 14
普通の Web アプリケーション ブラウザー 指定 URL を表示 サーバー ページ HTML 画面遷移 ページ リンクのクリック HTML 画面遷移 ページ フォームの送信 HTML 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 15
Single Page Application (SPA) ブラウザー ページ 指定 URL を表示 データの取得 (AJAX) HTML JSON サーバー フォームの送信 (AJAX) JSON http://www.atmarkit.co.jp/ait/series/5303/ 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 16
SPA を実現するために必要なこと マルチブラウザーに対応する サーバーと AJAX で通信する 画面の状態をすべて JavaScript で管理する UI コンポーネントが必要になる 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 17
JavaScript フレームワーク :Angular, React, Vue 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 18
比較表 : 公式コンポーネントの有無 業務アプリケーション向け公式コンポーネント * モバイルアプリケーション向け公式コンポーネント * * 2018 年現在は公式コンポーネントがあるが 2016 年時点はなかった 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 19
JavaScript フレームワーク :Sencha Ext JS 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 20
比較表 : 公式コンポーネントの有無 業務アプリケーション向け公式コンポーネント モバイルアプリケーション向け公式コンポーネント 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 21
本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 22
本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 23
本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 24
本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 25
ビジュアルアプリケーションビルダー :Sencha Architect 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 26
本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 27
包括的なテストソリューション :Sencha Test 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 28
本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 29
Sencha Ext JS で開発したプロダクト紹介 A-SaaS コネクト A-SaaS 会計システム A-SaaS 請求書 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します
本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 31
本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 32
本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 33
Sencha Test による UI テスト自動化の軌跡 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します
Sencha Ext JS / Sencha Test 導入のタイムライン 2016 契約開始 (1 年目 ) 2017 2018 Ext JS 契約開始 (1 年目 ) Test 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 35
Sencha Ext JS / Sencha Test 導入のタイムライン 2016 契約開始 (1 年目 ) 2017 2018 A-SaaS コネクト Ext JS 契約開始 (1 年目 ) Test 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 36
Sencha Ext JS / Sencha Test 導入のタイムライン 2016 契約開始 (1 年目 ) 2017 2018 A-SaaS コネクト Ext JS A-SaaS 会計システム ( 刷新 ) 契約開始 (1 年目 ) Test 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 37
Sencha Ext JS / Sencha Test 導入のタイムライン 2016 契約開始 (1 年目 ) 2017 2018 A-SaaS コネクト A-SaaS フリコミ Ext JS A-SaaS 会計システム ( 刷新 ) 契約開始 (1 年目 ) Test 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 38
Sencha Ext JS / Sencha Test 導入のタイムライン 2016 契約開始 (1 年目 ) 2017 契約更新 (2 年目 ) 2018 A-SaaS コネクト A-SaaS フリコミ Ext JS A-SaaS 会計システム ( 刷新 ) 契約開始 (1 年目 ) 契約更新 (2 年目 ) Test 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 39
Sencha Ext JS / Sencha Test 導入のタイムライン 2016 契約開始 (1 年目 ) 2017 契約更新 (2 年目 ) 2018 A-SaaS コネクト A-SaaS フリコミ Ext JS A-SaaS 会計システム ( 刷新 ) 契約開始 (1 年目 ) 契約更新 (2 年目 ) 空白の期間 Test 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 40
テスト自動化を 1 年間 何もやっていない! Photo by Ben White on Unsplash 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 41
Sencha Ext JS / Sencha Test 導入のタイムライン 2016 契約開始 (1 年目 ) 2017 契約更新 (2 年目 ) 2018 A-SaaS コネクト A-SaaS フリコミ Ext JS A-SaaS 会計システム ( 刷新 ) 契約開始 (1 年目 ) 契約更新 (2 年目 ) 空白の期間 Sencha Test 公式研修受講 Test 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 42
2017 年夏 Sencha Test の公式トレーニング受講 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 43
Sencha Ext JS / Sencha Test 導入のタイムライン 2016 契約開始 (1 年目 ) 2017 契約更新 (2 年目 ) 2018 A-SaaS コネクト A-SaaS フリコミ Ext JS A-SaaS 会計システム ( 刷新 ) 契約開始 (1 年目 ) 契約更新 (2 年目 ) Test 空白の期間 Sencha Test 公式研修受講 検証開始 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 44
2017 年秋 Sencha Test でのテスト実装を検証開始 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 45
Sencha Ext JS / Sencha Test 導入のタイムライン 2016 契約開始 (1 年目 ) 2017 契約更新 (2 年目 ) 2018 A-SaaS コネクト A-SaaS フリコミ Ext JS A-SaaS 会計システム ( 刷新 ) 契約開始 (1 年目 ) 契約更新 (2 年目 ) Test 空白の期間 Sencha Test 公式研修受講 検証開始 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 46
2017 年冬準備事項が多すぎて挫折 独自コンポーネントをテストするライブラリを開発する API をモック化してサーバーの状態変化を回避する Jenkins でテストを日次で実行する 自動テストにすると生産的なテストケースを決定する 自動テストに相応わしいテストケースを量産する 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 47
Sencha Ext JS / Sencha Test 導入のタイムライン 2016 契約開始 (1 年目 ) 2017 契約更新 (2 年目 ) 2018 A-SaaS コネクト A-SaaS フリコミ Ext JS A-SaaS 会計システム ( 刷新 ) 契約開始 (1 年目 ) 契約更新 (2 年目 ) Test 空白の期間 Sencha Test 公式研修受講 検証開始 採用 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 48
2018 年春テストエンジニア採用を開始 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 49
Sencha Ext JS / Sencha Test 導入のタイムライン 2016 契約開始 (1 年目 ) 2017 契約更新 (2 年目 ) 2018 契約更新 (3 年目 ) A-SaaS コネクト A-SaaS フリコミ Ext JS A-SaaS 会計システム ( 刷新 ) 契約開始 (1 年目 ) 契約更新 (2 年目 ) 契約更新 (3 年目 ) Test 空白の期間 Sencha Test 公式研修受講 検証開始 採用 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 50
Sencha Ext JS / Sencha Test 導入のタイムライン 2016 契約開始 (1 年目 ) 2017 契約更新 (2 年目 ) 2018 契約更新 (3 年目 ) A-SaaS コネクト A-SaaS フリコミ A-SaaS 請求書 Ext JS A-SaaS 会計システム ( 刷新 ) 契約開始 (1 年目 ) 契約更新 (2 年目 ) 契約更新 (3 年目 ) Test 空白の期間 Sencha Test 公式研修受講 検証開始 採用 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 51
Sencha Ext JS / Sencha Test 導入のタイムライン 2016 契約開始 (1 年目 ) 2017 契約更新 (2 年目 ) 2018 契約更新 (3 年目 ) A-SaaS コネクト A-SaaS フリコミ A-SaaS 請求書 Ext JS A-SaaS 会計システム ( 刷新 ) 契約開始 (1 年目 ) 契約更新 (2 年目 ) 契約更新 (3 年目 ) 空白の期間 Sencha Test 公式研修受講 採用 テストエンジニア参加自動化チーム発足 Test 検証開始 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 52
2018 年夏テスト自動化チーム発足 テストオートメーションエンジニア斎藤はるか 自動テストのためのインフラを整備する 自動テストやライブラリを実装する QA エンジニア北村圭 自動テストすべきケースを選定する 自動テストを記述する フロントエンドエンジニア長谷部 テストに必要な Ext JS の情報を提供する アプリで対応する事項を開発に展開する 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 53
Sencha Ext JS / Sencha Test 導入のタイムライン 2016 契約開始 (1 年目 ) 2017 契約更新 (2 年目 ) 2018 契約更新 (3 年目 ) A-SaaS コネクト A-SaaS フリコミ A-SaaS 請求書 Ext JS A-SaaS 会計システム ( 刷新 ) 契約開始 (1 年目 ) 契約更新 (2 年目 ) 契約更新 (3 年目 ) 空白の期間 Sencha Test 公式研修受講 採用 チーム発足 Test 検証開始 テスト自動化スタート 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 54
2018 年秋新会計システムの UI テスト実装開始 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 55
デモ :Sencha Test で UI テストを実装してみよう 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します
デモの流れ 1. 出納帳画面の説明 2. インスペクター機能の紹介 3. テストスクリプトのライブコーディング 4. テストスクリプトの実行 5. 実際に使用しているテストスイートの実行 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 57
DEMO 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します
おわりに これからやりたいこと 本日のまとめ 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します
これからやりたいこと QA エンジニアが自動テストを記述できるようにする CI/CD ツール Jenkins での日次テスト実行を実現する テスト管理ツール TestRail にテスト結果を連携する BrowserStack でのマルチブラウザーテストを実現する 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 60
まとめ SPA の業務アプリケーション開発なら Sencha Ext JS にしよう ビジュアル開発できる Sencha Architect で始めよう Sencha Test による自動 UI テストで品質も担保しよう + + 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します 61
THANKS! www.embarcadero.com/jp 第 36 回エンバカデロ デベロッパーキャンプ 本文書の一部または全部の転載を禁止します 本文書の著作権は 著作者に帰属します