弥生開発者ブログスマートフォン用の表示で見る弥生開発者ブログ2017-12-11カレンダー作成トレーニング完成!!こんにちは、近頃体重が増えたせいで趣味のボルダリングに支障を来しているエンジニアのR.Oです!現在引っ越しを検討しているのですが、検討先の家のすぐ近くにボルダリングジムがあることを知り、「通いすぎて上達しちゃうかな~」と妄想することが最近のマイブームです。★宣伝★12/21(木)に社外向け勉強会を開催します。_)m弥生では毎月第3木曜日の夜に外部のエンジニア向けの勉強会「もくテク」を開催しているのですが、今月も開催するのでその宣伝です。今回の勉強会のタイトルは「弥生のフロントシステムって?~UX向上と品質改善の取り組みについて~」です。私R.Oも「AWSを使ったメッセージングサービスの性能改善で苦労したこと」についての発表を行います。本題のカレンダートレーニングの後半についてです。前回は、カレンダーを一先ず完成させました。そこで得た学びは「事前のHTML設計が予期せぬレイアウト崩れを防ぐ」です。HTML作成とCSS適用の作業を交互に行う手間を減らすためにはHTML設計が重要であることを痛感しました。今回は、カレンダートレーニングの完成報告と、フロントエンジニア強化施策全体を通して得た学びや気づきについて報告の行います。したカレンダーに対する運営チームからレビュー指摘があったので、対応して完成させました。指摘内容は、主に以下の2点です。レスポンシブデザイン対応してみようクラス名がBEMに則っていないBEMは「block」、「element」、「modifier」という3つの概念をアンスコやハイフンで繋げることでクラス名を作るのですが、「各概念はクラス名の中に一つまで」というルールに違反するクラス名がいくつか存在したため修正しました。今後は以下の形式以外の名前をクラスにつけないように気をつけます。※BEMの概要やメリットについては前回の記事を参照してください。前回作成したカレンダーは卓上カレンダーを原寸大で再現しただけなので、レスポンシブデザイン対応してみようと指示されました。レスポンシブデザインとは、ウィンドウサイズ(ブラウザサイズ)によってWebページのレイアウトが最適の形で調整されるデザインのことです。具体例は、完成したソースコードを後述のURLからダウンロードして確認してみてください。※因みに、ウィンドウサイズに合わせて単にフォントが大きくなったりするものはレスポンシブデザインとは呼びません。最近のWebサービスではレスポンシブデザイン対応していることが当たり前になっていて、弥生のポータルサイトマイポータルWebでも今年の春に対応しました。※マイポータルWebはログインが必要ですが、ログイン画面もレスポンシブデザインです。実現イメージレスポンシブデザインの実現イメージですが、ウィンドウサイズによって以下の三段階のレイアウトに変わるようにします。横710px以下&縦380px以上):ウィンドウサイズによって要素のサイズが動的に変わるウィンドウサイズ小(横380px以下&縦380px以下):作成元カレンダー上部の小さなカレンダーを再現(画像参照)実現に必要なもの今回レスポンシブデザイン対応を実現するにあたって利用したのは、CSSのメディアクエリとflexboxです。以下の手順でウィンドウサイズによって各要素のサイズを動的に変えることができました。各ウィンドウサイズのレイアウトはこちらです。ウィンドウサイズ大ウィンドウサイズ中ウィンドウサイズ小ソースコードはこちらからダウンロードできます。Chromeで確認してください。フロントエンジニア強化施策を通して得たこと今回のカレンダートレーニングの終了をもって、フロントエンジニア強化施策の第二弾は終了です。施策全体を通して得た学びもまとめたいと思います。施策参加時に習得したいと思っていたスキル4.のSass以外のスキルは本施策を通して身につけることが出来ました。今回のカレンダーをイチから作成する技術を身につけることができた。疑似クラスを使えばJavaScriptなしでhoverやfocusを検知してレイアウトを動的に変更できることなども知ることができた。flexboxカレンダー作成ではflexboxが大きく威力を発揮した。日付や祝日などの要素を縦並びや横並びで配置するのはflex-directionプロパティで実現。レスポンシブデザイン対応に必要な、ウィンドウサイズによる要素の伸縮の割合もflexプロパティで実現した。弥生のWebサービスも引き続きレスポンシブデザイン対応していく予定なので、積極的にflexboxを利用していきたい。※ただしflexboxにはバグが存在するようなので過信は禁物。詳しくはコチラの記事などを参照。HTMLを作成していて混乱することがあったが、BEMを使うことでHTMLの構造がわかりやすくなった。Sass今回はスケジュールの関係上利用することができなかったが、業務で機会があったので学習中。BEMとの親和性が高いことを知り感動。今回ペアプロで施策を実施しましたが、当初は「普段関わりのないメンバーと仲良くなれるきっかけになるな」程度にしか思っていませんでした。ところが、以下のようなメリットがあることを知りました。お互いのスキルや知識の把握と共有がスムーズになる→躓いたらすぐ相手に分かるので、後輩の「わからないけど聞きにくい」や先輩の「ちゃんと理解できているのかな」が防ぐことができる。ナビゲータは、人に指示したり教えることを経験できるドライバは、一人では気付くのに時間がかかる「勘所」や「経験者にとっての常識」をナビゲータから教わることができる→初心者が「CSSが想定通りに適用されない原因がブラウザだった」などで大きくハマってしまうのはあるある「自分がしっかりしないと」という責任感(ペアもしっかりしていましたが笑)や「一緒に成し遂げよう」といった連帯感が生まれてモチベーションが上がるなどなど...ただし、ペアプロでの開発のみだけではなく、ドライバ一人での開発もさせたほうが一人で達成する力などが身に付いていいのかなと思いました。今回報告したカレンダートレーニングで、フロントエンジニア強化施策第二回は完了となりました。弥生はこれからWebサービスを拡張していく予定なので、今回身につけたフロントエンド開発のスキルや知識をゴリゴリ活用していくつもりです。施策の中ではほぼ使用しなかったJavaScriptも使ってリッチなWebサービスの開発を目指していきたいです。AppSyncについて勉強してみたこんにちは、弥生の八木です。...2018-12-18Slackのログ分析してみたこんにちは。弥生エンジニアの白井です。この記事はMisoca+弥...2018-10-09もくテク「最近のWeb技術についてワイワイ語る会」を開催しました!こんにちは。前回の記事でT.Aさんが紹...2017-08-18初めてのフロントエンド初めまして、開発本部のT.Aです。アーカイブはてなブログをはじめよう!yayoiTechさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。