カレンダー作成トレーニング完成!!

こんにちは、近頃体重が増えたせいで趣味のボルダリングに支障を来しているエンジニアのR.Oです!

現在引っ越しを検討しているのですが、検討先の家のすぐ近くにボルダリングジムがあることを知り、「通いすぎて上達しちゃうかな~」と妄想することが最近のマイブームです。

★宣伝★12/21(木)に社外向け勉強会を開催します。

冒頭からタイトルと関係がなくてすみませんm(_ _)m

弥生では毎月第3木曜日の夜に外部のエンジニア向けの勉強会「もくテク」を開催しているのですが、今月も開催するのでその宣伝です。
今回の勉強会のタイトルは「弥生のフロントシステムって?~UX向上と品質改善の取り組みについて~」です。

以下のURLから詳細の参照と参加が可能なのでご興味のある方は是非!!

https://mokuteku.connpass.com/event/73499/

セッション内容は、弥生が取り組んだUX改善や品質改善、ヒートマップを使った自社サービス解析などを予定していて、 私R.Oも「AWSを使ったメッセージングサービスの性能改善で苦労したこと」についての発表を行います。

カレンダートレーニング完了報告

本題のカレンダートレーニングの後半についてです。

前回の内容

前回は、カレンダーを一先ず完成させました。
2017-12-05_184524

そこで得た学びは「事前のHTML設計が予期せぬレイアウト崩れを防ぐ」です。
HTML作成とCSS適用の作業を交互に行う手間を減らすためにはHTML設計が重要であることを痛感しました。

今回の内容

今回は、カレンダートレーニングの完成報告と、フロントエンジニア強化施策全体を通して得た学びや気づきについて報告の行います。

カレンダー完成報告

前回作成したカレンダーに対する運営チームからレビュー指摘があったので、対応して完成させました。
指摘内容は、主に以下の2点です。
1. クラス名がBEMに則っていない
2. レスポンシブデザイン対応してみよう

クラス名がBEMに則っていない

BEMは「block」、「element」、「modifier」という3つの概念をアンスコやハイフンで繋げることでクラス名を作るのですが、「各概念はクラス名の中に一つまで」というルールに違反するクラス名がいくつか存在したため修正しました。
今後は以下の形式以外の名前をクラスにつけないように気をつけます。

「block」
「block_element」
「block--modifier」
「block_
element--modifier」

※BEMの概要やメリットについては前回の記事を参照してください。

レスポンシブデザイン対応

前回作成したカレンダーは卓上カレンダーを原寸大で再現しただけなので、レスポンシブデザイン対応してみようと指示されました。

レスポンシブデザインとは、ウィンドウサイズ(ブラウザサイズ)によってWebページのレイアウトが最適の形で調整されるデザインのことです。
具体例は、完成したソースコードを後述のURLからダウンロードして確認してみてください。
※因みに、ウィンドウサイズに合わせて単にフォントが大きくなったりするものはレスポンシブデザインとは呼びません。

最近のWebサービスではレスポンシブデザイン対応していることが当たり前になっていて、弥生のポータルサイトマイポータルWebでも今年の春に対応しました。
※マイポータルWebはログインが必要ですが、ログイン画面もレスポンシブデザインです。

実現イメージ

レスポンシブデザインの実現イメージですが、ウィンドウサイズによって以下の三段階のレイアウトに変わるようにします。

  1. ウィンドウサイズ大(横530px以上&縦710px以上):卓上カレンダーを原寸大で再現
  2. ウィンドウサイズ中(横380px以上&縦530px以下 or 横710px以下&縦380px以上):ウィンドウサイズによって要素のサイズが動的に変わる
  3. ウィンドウサイズ小(横380px以下&縦380px以下):作成元カレンダー上部の小さなカレンダーを再現(画像参照)
    20170818194656

実現に必要なもの

今回レスポンシブデザイン対応を実現するにあたって利用したのは、CSSのメディアクエリとflexboxです。 以下の手順でウィンドウサイズによって各要素のサイズを動的に変えることができました。

  1. メディアクエリを使って3つのウィンドウサイズ毎にCSSを適用できるようにする
  2. 3つのウィンドウサイズ毎にflexプロパティを適用する

完成したカレンダー

以上の対応でカレンダーは完成です! 各ウィンドウサイズのレイアウトはこちらです。

ウィンドウサイズ大

2017-12-05_184524

ウィンドウサイズ中

2017-12-05_184518

ウィンドウサイズ小

2017-12-05_184511

ソースコードはこちらからダウンロードできます。 ※マルチブラウザ対応していないので、必ずGoogle Chromeで確認してください。

フロントエンジニア強化施策を通して得たこと

今回のカレンダートレーニングの終了をもって、フロントエンジニア強化施策の第二弾は終了です。
施策全体を通して得た学びもまとめたいと思います。 

施策参加時に習得したいと思っていたスキル

4.のSass以外のスキルは本施策を通して身につけることが出来ました。

  1. HTMLとCSSの基礎
    今回のカレンダーをイチから作成する技術を身につけることができた。
    また、疑似クラスを使えばJavaScriptなしでhoverやfocusを検知してレイアウトを動的に変更できることなども知ることができた。
  2. flexbox
    カレンダー作成ではflexboxが大きく威力を発揮した。 例えば、日付や祝日などの要素を縦並びや横並びで配置するのはflex-directionプロパティで実現。
    また、レスポンシブデザイン対応に必要な、ウィンドウサイズによる要素の伸縮の割合もflexプロパティで実現した。
    弥生のWebサービスも引き続きレスポンシブデザイン対応していく予定なので、積極的にflexboxを利用していきたい。 ※ただしflexboxにはバグが存在するようなので過信は禁物。詳しくはコチラの記事などを参照。
  3. BEM(MindBEMding)
    カレンダーは、「外枠(月)の中に日付用の枠」、「日付用の枠に日付や六曜」と階層がどんどん深くなっていったので、 HTMLを作成していて混乱することがあったが、BEMを使うことでHTMLの構造がわかりやすくなった。
  4. Sass
    今回はスケジュールの関係上利用することができなかったが、業務で機会があったので学習中。BEMとの親和性が高いことを知り感動。

気付き

ペアプロの効果

今回ペアプロで施策を実施しましたが、当初は「普段関わりのないメンバーと仲良くなれるきっかけになるな」程度にしか思っていませんでした。 ところが、以下のようなメリットがあることを知りました。

  • お互いのスキルや知識の把握と共有がスムーズになる
    →躓いたらすぐ相手に分かるので、後輩の「わからないけど聞きにくい」や先輩の「ちゃんと理解できているのかな」が防ぐことができる。
  • ナビゲータは、人に指示したり教えることを経験できる
  • ドライバは、一人では気付くのに時間がかかる「勘所」や「経験者にとっての常識」をナビゲータから教わることができる
    →初心者が「CSSが想定通りに適用されない原因がブラウザだった」などで大きくハマってしまうのはあるある
  • 「自分がしっかりしないと」という責任感(ペアもしっかりしていましたが笑)や「一緒に成し遂げよう」といった連帯感が生まれてモチベーションが上がる
    などなど...

ただし、ペアプロでの開発のみだけではなく、ドライバ一人での開発もさせたほうが一人で達成する力などが身に付いていいのかなと思いました。(ナビゲータのハンドリングが上手ければ必要ないかも??)

総括

今回報告したカレンダートレーニングで、フロントエンジニア強化施策第二回は完了となりました。
弥生はこれからWebサービスを拡張していく予定なので、今回身につけたフロントエンド開発のスキルや知識をゴリゴリ活用していくつもりです。
また、施策の中ではほぼ使用しなかったJavaScriptも使ってリッチなWebサービスの開発を目指していきたいです。

今後について

フロントエンド関連以外のテーマでも記事を投稿していきたいと思っているので、引き続きよろしくお願い致します!

もくテク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