もくテクvol.06「品質について悩める人の会~手戻り減らして定時で帰ろう!~」を開催しました

弥生では、もくテクと題した勉強会を2016年にスタートし、2017年6月からは月1回のペースで開催しています。

2017/10/26(木)には第6回となる 「品質について悩める人の会~手戻り減らして定時で帰ろう!~」を開催しました。 ご参加いただいた皆様、本当にありがとうございました。

f:id:oha-ryo-y2i:20171102144228j:plain

前回に引き続き、今回も多数のご応募をいただきましたが、座席の関係でご参加いただけなかった方もおられました。 今後も品質に関するテーマで開催したいと考えていますので、次回ご参加いただければと思います。

今回は品質・プロセスをキーワードに、弥生の変革や品質に対する考え方、現在のプロセスについて紹介いたしました。

f:id:oha-ryo-y2i:20171102144234j:plain

「プロセスを作り、浸透させる側の人」や「プロセスを使う側の人」など異なる立場の方にご来場いただきました。 セッション中での質問の回答から、それぞれの立場で品質やプロセスについて 何らかの悩みや課題を感じられている方が多いと感じました。

今回ご紹介した内容が少しでも参考になれば幸いです。

また、弊社の話だけではなく第三者の視点で株式会社SHIFT様からPMO支援の紹介や LT枠として現場からのプロセス改善についてもお話いただきました。 スピーカーの皆様、ご協力いただきありがとうございました!

f:id:oha-ryo-y2i:20171102144244j:plain

次回は11/30(木)に「サポートコンテンツから考えるUX改善」のテーマで開催いたします。 ご興味のある方は、connpassよりお申し込みをお願いします。

詳細はこちら▼▼▼ https://mokuteku.connpass.com/event/68130/

Adobeのセミナー「Webやアプリ開発のために。UIデザインとプロトタイプ作成の基礎・実例」に参加してきました

こんにちは、弥生の狩野です

社内の業務では、UI/UX検討チームとして、日々UXデザインを考えたり フロントエンジニアの育成等をしています

今回は、先月、弥生が参加したAdobe様のセミナーレポートを掲載します

参加したセミナー

Webやアプリ開発のために。UIデザインとプロトタイプ作成の基礎・実例

201708-designer.creativecloud.adobeevents.com

f:id:suikasansan:20170922181831j:plain

セミナーの概要

弥生では、 お客さまに提供する、製品やサービスについて 「かんたん、あんしん、たよれる。」というコンセプトで進めています

そんな魅力的な製品やサービスを実現するための施策として プロトタイピング駆動を重視しており、新しい製品やサービスを中心に開発へ組み込んでいます

社内で早期に合意形成がとれることの恩恵や、より良い製品やサービスが提供できる喜びを 少しずつ感じているところです

弥生ではプロトタイピングツールとして、Adobe XDを導入しています

Adobe XDの詳しい説明はコチラ

直近のプロジェクトでは、弥生の業務アプリケーションのポータルサイト(マイポータル)の開発に Adobe XDを導入してプロトタイピングを実施しました

今回は、弊社の田中が、

「弥生品質を支える開発プロセス プロトタイピングが成すべきこと」

というタイトルで

チームが思い描く製品やサービスを生み出すための 弥生のプロセスと、プロトタイピングの重要性、Adobe XDの導入事例についてお話をさせていただきました

私の参加目的は、

  • プロトタイプには、どんな人が興味をもっているのか、また、その中で、同じ悩みを抱えている方と接点を持ちたい
  • 今後、Adobe XDには、どんな機能が追加されていくのか、どう活用していけばよいか

のような思いで参加しました

また、今回は、弊社の田中がプロトタイピングの実例を紹介するので、 その発表の反応にも興味がありました

セミナーに参加して

会場の様子

参加人数は、満員(130人)で、プロトタイプへの期待が非常にうかがえるセミナーでした

  • デザイナーの方が多く参加されているように感じました(服装や客層から独断と私見で判断!)
  • UXデザインを決定するうえで、合意形成のためにAdobe XDへ期待されている方が非常に多くいらっしゃいました

Adobe XDの製品紹介に関して

製品紹介で、紹介されていたプロトタイプの履歴機能に関しては、非常に待ち望ましいです

  • 別ファイルで、開かなくても前日のプロトタイプと比べる等の、作業がやりやすくなりそうです
  • 現状は、バージョン管理ソフトで1つ前に戻して比較しています。非常に手間で、面倒です

これまでは、1つのXDファイルを1人でしか編集できませんでしたが、複数人で共有して編集が可能になります

弥生のAdobe XD導入紹介に関して

プロトタイプで関係者間の認識齟齬を早い段階でなくすことで、設計~実装の手戻りを最小限にできる

  • 後続のフェーズに集中してしまう大きな仕様変更を、早期に発見することができます

弥生の品質への取り組みに対して共感をえることができた

  • 弥生では、「ダサいはバグだ!」をあたりまえ品質とし、線の1pxずれや、細かい文言のずれも障害として扱っています

さいごに

今回、縁あってセミナーに参加させていただきましたが、 肌で、プロトタイピングの重要性を感じることができました

今後も、スピーティーに合意形成することができるAdobe XDを要チェックです!

ノベルティをいただきました。ありがとうございます! f:id:suikasansan:20170922181823j:plain

カレンダー作成トレーニング実施中!!

はじめまして、エンジニアのR.Oです!
前回の記事でT.Aさんが紹介したトレーニングに続き、

tech.yayoi-kk.co.jp

「カレンダー作成トレーニング」に挑戦中なので、その途中経過を報告します。

自己紹介

まずは、自己紹介をさせていただきます。

私は今年の春に弥生に中途入社し、現在はWebサービスの開発チームでフロントエンドとサーバーサイドの開発を担当しています。
プライベートではAWSを使ったWebチャットアプリケーションの開発に挑戦中です。

趣味は飲酒とボルダリングです。
ボルダリングは昔に少しやっていて、二ヶ月前に再開しました。
最近は6級であればほぼ一発で登れます。
今年中に4級を安定して登れるようになることが目標です。

因みに、ボルダリングで何が一番楽しいかというと、 難しい課題に何度も挑戦してやっと登れた時!! ではなくボルダリング終わりにお酒を飲むことです。

強化施策に参加したきっかけ

弥生に入社する前は、サーバーサイドの開発経験がメインだったので、フロントエンドの開発も行うチームに配属されたことに不安を抱いていました。
また、前述の通り、Webのチャットアプリケーションを作成したいのにフロントエンドの知識がなくて困っていました。

そんな時に本施策の第一弾が社内で行われているのを目にし、渡りに船と第二弾のメンバーとして手を上げたことが参加のきっかけです。

強化施策を通して身につけたいもの

フロントエンド開発における以下のスキルを身に着けたいと考えています。

  1. HTMLとCSSの基礎(HTMLタグの使い方やCSSのセレクタなど)
  2. flexbox
  3. BEM(MindBEMding)
  4. Sass

1.と2.に関しては前回のトレーニングで学習できたので、今回のトレーニングでは3.のBEMを身に着けたいと考えています。

BEMはクラスの命名規則の一つです。
今まではクラスに対して、フィーリングで名前をつけていたので、後で見返した時に「これってなんのために作った要素だっけ?」となってしまうことがありました。
そういった問題を、BEMの命名規則をうまく活用することで解決できるらしいです。また、チームで作業する際にクラス名のブレを防いだり、拡張性の高いコンポーネント作成を行えるようにもなるらしいので、是非身に着けたいです。

因みに、クラスの命名規則の中ではデファクトスタンダード扱いされているらしく、CSSフレームワークで人気のBootstrapでも採用されています。

BEMの詳細については以下の記事などを参考にしてください。
http://qiita.com/kitaro729/items/3189ded5647475bc2ae7

トレーニングの概要

作成するもの

卓上カレンダーをHTMLとCSSで再現します。

以下の画像が実際の卓上カレンダーの写真です。

f:id:oha-ryo-y2i:20170818194656j:plain

実施方針

  • ヒントや正解となるコードはなし
  • ペアプログラミングで作成する
  • クラスはBEM(MindBEMding)に則って命名する(※私のチームのみ)

実施レポート

HTMLの作成段階で悩む

「前回のトレーニングで学んだCSSセレクタやCSSプロパティの知識を総動員してサクッと作成するぞ!」と意気込んで着手したのですが、HTMLの作成段階で悩んでしまいました。
なぜならカレンダーには枠、日付、六曜、祝日などの多くの種類と要素があります。

default

また、種類が沢山ある=要素に設定するクラスが多いので、命名するのも一苦労です。

CSSは順調!・・・かと思いきや!?

ペアとあれやこれやと相談しながらHTMLが書けたので、CSSでスタイルを適用していきます。 カレンダーの様なグリッドスタイルは、前回のトレーニングで身につけた(と思い込んでいる)flexboxにとってはお手の物です。
スタイルが適用され、真っ白だったページが順調にカレンダーになっていきます。

と思いきや、問題発生です。

カレンダーの左下を再現しようとするとレイアウトが崩れてしまいます。

f:id:oha-ryo-y2i:20170809202804j:plain

原因は、HTMLの構造にありました。

修正前のHTMLとCSS

左下の日付の枠のHTML

<div class="halfbox__container boxcommon sun">
    <div class="halfbox">
        <div class="day"></div>
        <div class="rokuyou"></div>
    </div>
</div>

それ以外の日付の枠のHTML

<div class="week__body__box boxcommon sun">
    <div class="day"></div>
    <div class="rokuyou"></div>
</div>

CSS

.halfbox__container {
    padding:5px
}
.week__body__box {
    padding:5px
}

HTMLのタグ構造の深さが異なります。

修正後のHTMLとCSS

左下の日付の枠のHTML

<div class="halfbox__container boxcommon sun">
    <div class="halfbox">
        <div class="day"></div>
        <div class="rokuyou"></div>
    </div>
</div>

それ以外の日付の枠のHTML

<div class="week__body__box boxcommon sun">
    <div class="week__body__box__child">
        <div class="day"></div>
        <div class="rokuyou"></div>
    </div>
</div>

CSS

.halfbox {
    padding:5px
}
.week__body__box__child {
    padding:5px
}

HTMLの構造の深さを統一し、CSSでスタイルを適用した結果うまくいきました。

ひとまず完成

スタイルの設定も完了し、本物のカレンダーの見た目を再現できました。

スクリーンショット f:id:oha-ryo-y2i:20170809202921j:plain

なんと、上部の穴も再現しています!(無駄

ソースコード
https://github.com/ykk-yos1982/yayoi/tree/team4_calender_complete(not_responsive)

コードレビューについては次回の記事で報告します。

学んだこと

まだコードレビューが完了していませんが、今回のトレーニングでは以下のことを学びました。

事前のHTML設計が予期せぬレイアウト崩れを防ぐ

カレンダーのレイアウト崩れが発生した時に、CSSを色々変えてもうまくいかなかった原因は、CSSを適用するHTMLの構造にそもそも問題があるからでした。
歪んだ骨組みに、無理に肉付けをしてもうまくいくわけがないですね・・・。

その結果として、HTML作成→CSS適用→HTML修正→CSS適用という手戻りが発生してしまいました。

この失敗を学びとして、今後は以下の流れで画面レイアウトを作成しようと思います。

※カレンダー作成を例にしています。

  1. 作るレイアウトの構成を理解する
    例:「枠が沢山並んでいて、それぞれの枠の中に日付、祝日、六曜が存在する。祝日は日付と横並びだが、六曜は日付と縦並びになっている」

  2. 理解した構成に合わせてHTMLを設計・作成する
    例:「枠となる要素を沢山作り、それぞれの枠の中に日付、祝日、六曜となる要素を作る。まずは日付と祝日の要素が横並びになる要素を作り、その要素と六曜が縦並びになる要素を作る」

  3. HTMLに合わせてCSSを適用する
    例:「枠要素にはborderプロパティを適用、日付と祝日の要素が入っている要素にはflexプロパティのrowを適用、日付+祝日の要素と六曜の要素が入っている要素にはflexプロパティのcolumnを適用」

上記の流れに則って作成すれば、今回のトレーニング実施で発生したような手戻りを防ぐことができるはずです。

また、今回の経験で、設計という工程がHTML作成においても重要だと気付くことができました。

次回予告

次回は、カレンダートレーニングの実施完了報告として、コードレビューの結果とレビュー指摘への対応、カレンダー作成トレーニングを通して学んだことを報告する予定です。

引き続きよろしくお願いします!