エンジニアのM.Fです。私は今期弥生に中途で入社したばかりの新人で、フロント開発の経験はゼロ。前職ではいわゆるコボラー(※1)をやっておりました。そんな正真正銘フロント初心者の私ですが、この取り組みを通じて非常に多くの知識と経験を学ぶことができたので、取り組みをご紹介したいと思います。(※1)コボラー:COBOL言語の開発を行う人を指す言葉。2.フェーズ2のゴールフェーズ1(※2)では、基本的なマークアップスキルの習得として、HTML5,CSS3を活用したレスポンシブデザインの作成を行いました。フェーズ2ではその応用として、実際に利用できるWebアプリ画面の作成をゴールとしています。(※2)フェーズ1の詳細は「フロントエンドエンジニア育成(序章)」をご覧ください。私のチームでは、現状メールで運用されている社内の勤怠連絡を、「Webアプリ上で一元的に管理・参照できるようにすること」を最終的なゴールとし、今回の取り組みではその一画面の作成を行うことにしました。きっかけは私の上司のこの言葉でした。「勤怠連絡と管理をもっと楽したいよね。当日の早退・遅刻の状況が把握できるように、毎朝メールで部内に配信されています。この一覧はすべて特定の担当者が個々のメール連絡を受けて作成します。毎日のことなので作業に掛かる負荷も高く、担当者が不在の時は代行で誰かがやらねばなりません。リーダーにとって、メンバーの勤怠状況は常に把握しておきたいもの。そこで、フロント開発の勉強も兼ねて、作成してみよう!というわけです。「どんな利点(ベネフィット)をもたらすか」という視点で分析を行い、「カスタマージャーニーマップ」を作成しました。このマップでは、想定されるユーザー(ターゲット・セグメント)がこのアプリを通じて行う行動や思考・感情などをフェーズごとにプロットしたもので、どのようにこのアプリを知り、触れて、継続して使ってもらうかというシナリオを立てています。4.つまずいたことカスタマージャーニーマップも作ったし、早速画面のイメージを作ろう!となるわけです。作成した画面カンプはこちら。この画面は、当日の出勤状況を確認するための画面です。表示したいチームや人を絞り込むための検索フィールド勤怠の明細一覧という構成になっています。あとは作成したカンプの通り画面を作るだけ!・・・なのですが、初のフロントエンド開発ということもありなかなか思い通りにいきません。勤怠連絡を表示する明細のコンテナ部分には非常に苦労しました。下記につまづいた点の一部をご紹介。・IEで表示するとスペースが詰まる!htmlでアイコンや文字の間に少し広めのスペースを入れたい。考えた私はhtmlに"&emsp"を記述することにしました。IEで表示すると、なんと!スペースが全て詰まってしまいました。いえ、"&nbsp"を何回も繰り返すのもイヤだし・・・結果、下記のように記述。すればIEでも空白が反映されるし、何回もhtmlに"&nbsp"を繰り返す必要もありません。実装してみると、クリックできない(というか見えない)問題が発生。F12キーを押して、ブラウザ開発者ツールで原因を特定します(使い方教えてもらいました)。怪しいと思われるコンテナをクリックして指定を確認。すると、cssに記述していないoverflow:hidden;が指定されていました。Liteのコンポーネントを使用したため、cssに記述しなくてもデフォルトで指定されてしまうようです。そこで、style.cssに以下の通り記述。overflow:visible;が適用され、無事表示することができました。最終的に完成したhtmlはこちら。5.取り組みから学んだこと本フェーズでは画面の枠組み作成をゴールとしたため、表示される明細の表示方法や内容の処理ロジックをどうするか?DBの管理はどうするか?等課題は山積みですが、ひとまずはhtmlとcssを使ってカンプのレイアウト通りに画面を作ることができました。スケジュールも予定通り、4日間の業務時間外でなんとか作り終えることができました。フェーズ1では調べものにかなりの時間を費やしていましたが、本フェーズではブラウザ開発者ツールを活用する、ペアプロで調べものを分担するなどを意識することで、作業を効率化できました。簡単な画面ではありますが、この取り組みを通じてフロントエンド開発の土台となる基礎スキルを習得できたと感じています。勤怠管理アプリの完成に向けて、引き続きトライしてゆきます。AppSyncについて勉強してみたこんにちは、弥生の八木です。...2018-12-21UWSCでデスクトップアプリの自動テストこんにちは。Ad...2018-12-18Slackのログ分析してみたこんにちは。弥生エンジニアの白井です。この記事はMisoca+弥...2017-12-11カレンダー作成トレーニング完成!!こんにちは、近頃体重が増えたせいで趣味のボルダリングに支障...2017-09-26Adobeのセミナー「Webやアプリ開発のために。アーカイブはてなブログをはじめよう!yayoiTechさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。