ANDPADにおけるVue.js活用事例紹介

とあるイベントのセッションで話す予定だった資料になります。

Transcript

1. ANDPADにおけるVue.js活用事例紹介
2. 藤井 洋平 Twitter @yohei_fujii1127 Yohei Fujii ANDPAD フロントエンドエンジニア 大学卒業後、インドネシア現地企業に就職。営業・ 管理部門職を経験。ジャカルタを中心に４年ほど 勤務。帰国後、エンジニアに転職し、 2019年1月か らOct.incにジョイン。当初は新規開発チームで短 工事サービスの開発をしていたが、今は工程管理 チームで工 程 表 開 発をメインに、フロントエンド業 務に携わる(Vue/Nuxt)。 Web開 発のみならず、プライベートでは筋 肉の開 発にも力を入れている。好きな食べ物は、お寿司 自己紹介
3. 会社名 ：株式会社オクト（Oct.inc） 住所 ：〒101-0022 東京都千代田区神田練塀町 300 住友不動産秋葉原駅前ビル 8階 従業員 ：約150名（内エンジニア約40名、業務委託含む） 　 *2019/10現在 事業内容 ：メディア事業・システム開発 　クラウド型施工管理ソフト ANDPADの開発および運営 会社紹介 今週引っ越したばかりです！
4. 会社紹介 Ruby（Rails）での開発にも力を入れています Ruby Bizにて Ruby Kaigiにて Ruby on Railsコミッター 兼 Rubyコミッターである松田 明氏 に技術顧問として就任して頂きま した
5. は 施工管理アプリです 2016年3月のサービスリリース以来、現場の効率化から経営改善ま で一元で管理していただけるクラウド型建設プロジェクト管理サービ スを提供し、2019年3月現在で1,600社の企業に導入頂いておりま す。 ANDPADとは？
6. ANDPADとは？ 現場の情報を一元管理 案件発生～完工までに関連する情報を集約できる。 個人管理だった情報がANDPADに統一した形式で保存され、会社管理になる。 案件管理 現場までの地図 工程表共有 現場からの報告 写真
7. ANDPADにおける仕様技術 ANDPADエンジニア採用サイト（ https://engineer.88oct.co.jp）より
8. ANDPADにおけるWeb画面 施工管理 引合粗利管理 工程表 などなどまだまだ たくさんの機能画面があります チャット
9. ANDPADにおけるフロントエンドの移り変わり Angular.js v1を使用しており、v2のアップデートにおける大幅な更新をやらなかったために、 v1でのメンテを 余儀なくされていた。 Angularのバージョンを上げてメンテしていくよりも、新しいフレームワークを採用し、作り変えていった方が 早いと判断 当時2018年終わり頃Vueの人気が伸びており興味があったこと、そして 新しい技術は積極的に取り入れて 試してみようぜということからVue.jsを使ってみようとなった。 順次置き換えを行っている段階 （今でも、jQueryやCoffeeScriptが残っている箇所はある）
10. ANDPADにおけるVue.js採用パターン Vue on Rails ANDPAD本体で使っているSlimテンプレート の上に、WebpackerでVueを読み込ませて いる。本体機能のフロントリニューアルから 機能改修の際に利用。 メンテナンス性や開発効率を重視し、今後も 適用画面が増えていくと予想。ページ数が 多く、他プロジェクトとの兼ね合い上、段階的 に対応中。将来的には完全にフロントの切り 出しを計画している部分。 Vue on Nuxt マイクロサービス化の一環として、本体からの切り 出しを行なっている。 Nuxtの恩恵を受けながら開 発を進めることができ、１サービスとして成り立つ 部分であり、リポジトリも別れている。 Atomic Designをベースとしたコンポーネント設計を行って おり、粒度の低いものは社内共通ライブラリにて管 理。 サーバー側（Rails）はAPIを返すだけ。Nuxtはコン テナ化し、Kubernetesで管理。 • 新工程表（ガントチャート） • 写真出力編集ページ • 図面管理ページ • etc... • 短工事 • 真チャット • 真横断工程表
11. ANDPADにおけるフロントエンドの取り組んでいる課題 ① ページ数の多い本体における置き換え ④ 社内ライブラリによる共通パーツ化 ③ マルチブラウザ対応 ② タブレット対応 建築業界ではIEを使っているお客様が まだ多く、一定の割合を占めている。リ ニューアルの際には動作確認を進めな がらの実装が必然となる。 現場監督さんなどが現場でも使える サービスを意識。全ての機能ではな いが、必要な機能には タッチイベント を考慮する必要がある 機能が多く、ページ数も多い。 案件/工程/写真/資料/報告/検査/発注/メンバー/メ モ/カレンダー/設定/etc…… andpad-uiというライブラリをRollupで構 築。デザイン面での統一感も課題 であり、 共通パーツなどを順次、拡張＆適用して いっている。
12. ANDPADにおけるVue.js利用例３つ 1. 写真出力編集画面 カスタムディレクティブと v-forの基本的な問題 2. 新工程表 vue-draggable-resizableの活用とガントチャート作成 3. 新横断工程表 アイテムの一元管理
13. ANDPAD写真出力編集画面におけるVue.js 【特徴】 1. 出力形式と同じ見た目での直感的な編集機能 2. 違ったフォーマット（１ページあたり２枚、３枚、４枚、６枚など）への対応 3. 画像を扱う上での負荷削減処理 1. HTML5で標準的機能となっているdrag イベントを利用。ストアでドラッグ中のア イテムを管理。ドロップするときもその データを使うことでコンポーネントをまた いでのドラッグ＆ドロップ機能を使用。 2. vue-draggableを活用し、行の並び替 えを可能にしている 3. ページを超えた並び替えが必要であっ たため、ページという概念は使わず、 フォーマットによってスタイルを利用して 空白を作り、ページっぽく表現した 実装面
14. ANDPAD写真出力編集画面におけるVue.js ① ② ③ ④ lazyloadを使いたいが、今回のように画像を差し 替えたりする場合は、カスタムディレクティブにお いて、bind（対象の要素に紐づいた時に一度しか 呼ばれない）でやると、見た目上、画像の置換が 行われなかった。 insertedとupdate併用しこれに対応。insertedの時 にvnode.contextに$_apImageSrcという名で画像 のパスを登録しておき、 updateの際に呼び出して 更新することで、画像差し替えや行の並び替えに よる画像の変更に対応した。 またnew IntersectionObserver*を使い、見えてい るものだけオリジナルの画像パスを、そうでない viewport外のものは、1x1のpngに置き換えてブラ ウザへの負荷を減らしている。 *IE動作のためpolyfill対応のものを利用 ポイント
15. ANDPAD新工程表に見るVue.js 【特徴】 1. 工程管理ガントチャート（旧 verからのリニューアル） 2. 画面数は多くないが動的な計算ロジック部分が多く占める 3. ANDPADにおける一番最初の Vue.js適用画面。Slim（Rails）の上に乗っている 1. vue-draggable-resizableの利用 （y軸には制限をかけ、x軸での操 作を可能化） 2. dragとresizeイベントで更新処理 （ただし、外部影響によるバーの 長さ変更は検知しないので、fork してカスタマイズ、もしくは forceUpdateを使う必要がある） 3. canvasを使い文字列の長さを取 得し出し分けを行っている 実装面
16. ANDPAD新工程表に見るVue.js propsで縦横長さ、位置、リサイズのためのハンドル位置が設定できる。 イベントハンドリングも簡単に操作。 slotに様々なものを入れることができるので、付属情報も簡単にカスタマイズできる *サンプルデータ ポイント
17. ANDPAD新横断工程表に見るVue.js 【特徴】 1. 先ほどの案件ベースの工程表を並べて「横断的に」見る機能（旧 verからのリニューアル） 2. 開発背景としては、施工管理会社によっては同時にいくつもの案件を抱えており、横断的にスケジュール を見たいとのニーズから。 3. 新工程表に似ているがこちらは Viewサービスとしての色が強い 実装面 1. Vuexモジュールを「認証」「共通」「画面」に 区分して管理している。 2. 新工程表で課題となっていた日付幅調整 やドラッグ&リサイズ感の改善 3. 案件、担当者、担当会社と並べて表示す ることで同じアイテムを表示する必要性が 出た。連動する必要があるので、「一元管 理」を意識してVuexを利用。
18. ANDPAD新横断工程表に見るVue.js 配列の下にあるオブジェクトをそのまま使うのではなく、 stateに別のオブジェクトとして一元管理した。 参照する際は、gettersを介して、idを投げ、対象のオブジェクトを取得。 こうすることでリアルタイムに変更を別の箇所でも反映されるように。 ← 　state　 → ←getters mutations↓ ポイント こいつの中に存在するアイテム (workloadItem)は直接参照しない chart.js
19. さいごに 仲間を募集しています！ • Vue.jsをがっつりやりたい人 • フロントエンドを引っ張って行くポジションに興 味がある人 • 建築業界に革命をもたらしてみたい人 • リニューアルプロジェクトに興味がある人 テックブログ ：https://tech.88oct.co.jp/ 会社サイト ：https://88oct.co.jp/ 3周年記念サイト ：https://lp.andpad.jp/andpad-3rd-anniversary/ エンジニア採用サイト ：https://engineer.88oct.co.jp/ みんなで議論しながら設計とか技術を決めていく文化です！ 詰まった時に相談できる環境があって、技術顧問もいますのでぜひ ぜひお気軽にお声掛けください
20. ありがとうございました！