大盛況だった第1回に続き、リクルートスタッフィング主催による「第2回マークアップエンジニアの方に向けたスキルアップイベント」が、11月10日に渋谷ヒカリエで開催されました。今回のテーマは「ページをより楽しく印象的にするアニメーション」。CSSアニメーションを学べるということで、キャリアアップのために新しい技術を学びたいエンジニアの方たちにお集まりいただきました。
最新のCSSアニメーションを学ぶ
「現場で使うCSSアニメーション実践」について講義していただいたのは、DeNAのフロントエンドエンジニアである大津直樹さん。現在、『戦国ロワイヤル』、『ワンピース グランドコレクション』のマークアップ、アニメーション、JavaScript、CSSの実装を中心に担当されています。
株式会社ディー・エヌ・エー Japanリージョンゲーム事業本部 デザイン部
熊本出身。福岡のWeb制作、メディア運営会社にてFlash、フロントエンドエンジニアとして従事。その後、2014年に上京し現職。主にソーシャルゲームのフロントエンドエンジニアとしてマークアップ、アニメーション、JavaScript、CSSを中心に担当。Twitter:@melo
Webでのアニメーションを実現する方法は、旧来PCでよく使われたFlash（PCからスマホ用にCanvasに変換するときなど）から、Canvas、SVS、JavaScript、スプライトシート、CSSアニメーションなどさまざまあります。今回はその中からDeNAの現場でも活用されているCSSアニメーションを講義と簡単な実践方式で学んでいただきました。
CSSアニメーションとは
CSSアニメーションには、「transition」と「animation」という2種類の実装方法があります。特徴としては、JavaScriptに比べてパフォーマンスがよく、実装方法が簡潔。Developer Toolsでデバッグしながらの実装できるという点が挙げられます。
●transition/CSSアニメーション
値から値への直球的なアニメーションができるが、hoverやクラス追加などの変化がないと、アニメーションが実行されない、ループ処理ができない。hoverではなく、元の要素に記述するのがポイントである。IE9以下を除く、幅広いブラウザに対応。
●animation/CSSアニメーション
@keyframesを使った複雑なアニメーションが可能で、ループ処理できる。こちらもIE9以下を除きブラウザ対応しているが、古いスマートフォン機種（Android2系など）には不具合が出ることが多い。
ハンズオン形式でCSSアニメーションを作る体験も
イベントは実際にCSSアニメーションを作ってみるハンズオン形式で開催されました。こちらは完成品のアニメーションのように、昼から夕方、夜へと背景色をループで変化させ、背景画像は右から左にループ移動させます。さらに、キャラクターをふわふわさせながら、 翼が羽ばたく動作や、一定間隔でまばたきする動きを表現する手法も。
例えば、昼→夕方→夜と背景色をループで変化させるには、下記のようにCSSのwrapperにwebkitを「-webkit-animation: wrapper-animation 20s infinite ease-in-out;」というように追加し、背景色を、keyframesでbackground-colorとパーセンテージを指定してあげると、20秒単位で背景色が変わっていきます。
さらに、イベントでは、「背景画像を右から左にループ移動」「キャラクターをふわふわさせる」「翼が羽ばたく」「一定間隔でまばたきする」といったCSSアニメーション要件を体験しました。
最後に、大津さんからCSSアニメーションを実装する際に注意すべき点が、次のように挙げられました。
1. Android2系など古い端末は、animationが動作しなかったりと不安定
2. 古い端末までサポートするのであれば、animationよりtransitionが○
3. シャドウやグラデーション+アニメーションは高負荷
4. パフォーマンス改善には、CPU・GPUの理解が必要
DeNAフロントエンドエンジニアの特徴は？
続いて、大津さんからDeNAのフロントエンドエンジニアがどのような開発環境、スタイルで開発をしているのかが紹介されました。技術はそのサービスに適した最新技術を採用し、バージョン管理やプルリク、コードレビュー、wikiなどを用途に応じて開発状況や情報共有に活用しているとのこと。社内では積極的に勉強会なども行われているそうです。
* 自動化は、GruntやGulp
* CSSは、Compass,Sass
* gitでのバージョン管理
* バグ、ベストプラクティスなどwikiにまとめる文化
* Backbone,Angularなどは、要件に合わせて
* 勉強会を積極的に実施
* プルリク、コードレビューやってます
イベントに参加した方の感想は？
今回参加していただいた方たちは、こうしたフロントエンドの最新技術について興味があり、自身のスキルアップにつなげたいと考えている人がほとんどでした。ハンズオンイベントのあとの座談会では、実際の開発現場の体制やスタイルなどの質問が多く寄せられ、とても盛り上がりました。
保険・時給・キャリアアップは？意外と知らない派遣という働き方
座談会の前に、リクルートスタッフィングより「エンジニア派遣とは？」というLTがありました。エンジニア派遣について、まず不安に感じるのは保険や有給休暇などの待遇。意外と知られていないようなのですが、雇用保険や社会保険の加入、有給休暇の取得ももちろん可能です。
気になる時給については、マークアップエンジニアであれば1400～2500円。リクルートスタッフィングのエンジニア向けサイト『ITスタッフィング』サイトに掲載されているDeNAのマークアップエンジニアのお仕事は1900円～と例を挙げて紹介されました。
キャリアアップを望む方には、ITスタッフィングの職種専門コーディネーター（仕事紹介担当）が登録者の方のライフステージに合わせて相談に乗ったり、案件を紹介することができます。11月からは、来社せずにご自宅で派遣登録が完了するオンライン登録もスタートしました。
■オンライン登録はこちら
座談会で本音トーク！派遣エンジニアとして働くって？
ハンズオンセミナーのあとは、DeNA社員のエンジニアの方を囲んでの座談会が行われました。開発環境から職場の様子、勤務時間などがざっくばらんに語られ、笑い声が響く楽しい会となりました。
DeNAでは業務の効率化を大事にしており、残業も意外と少なく、19時頃に帰ってプライベートを楽しむ人も少なくないのだとか。社内のプロジェクトや開発状況などに関する共有はwikiを使うことが多く、プロジェクトの進め方や開発のトラブルに悩んだときは、キーワードなどで検索すると多くの事例を見ることができる。社内のやりとりはSlackを活用し、全体共有やグループ単位など、気軽なコミュニケーションが活発に行われているそうです。
朝会などのリアルなコミュニケーションも活発で、勉強会も自主的に行われているのだそう。最新技術に関する内容はもちろん、ドローンや人狼・テレビゲームなど、業務に関係ないイベントで盛り上がることも多いそうです。また、数十種類の中から無料のお弁当が毎日選べたり、座り心地が良い椅子のことなど、待遇や福利厚生制度も紹介されました。
キャリアアップだけではなく、快適な職場・開発環境が整っていることが伝わってきました。
最後に、座談会で寄せられたQ&Aをいくつか紹介します。
Q.マークアップエンジニアとフロンドエンドエンジニアの仕事は分かれていますか？
A.プロジェクトにもよりますが、HTML/CSS/JavaScriptはフロントエンドと一緒にやることが多いですね。デザイナーがSwiftを書くこともありますし、こういうことをやりたいと言えば、好きにやらせてもらえます。
Q.朝会ではどのようなミーティングをしていますか？
A.昨日何かやったか、今日何をやるかなどのタスク確認や進捗報告が中心です。議論をする場合はスタンドアップスペースでやることが多いです。
Q.CIテストはどのようなツールを使っているのでしょうか。
A.部署にもよりますが、Jenkinsを使ったり、QAチームというテスト専門部隊に依頼したりします。Jenkinsは通知もSlackで来るように設定しているので、安心です。
開催されたイベントの概要
9月に大盛況で終わった第1回に続き、 ITスタッフィングを運営する株式会社リクルートスタッフィングが主催する マークアップエンジニアの方に向けたスキルアップイベントです。当日は、2部構成で行われました。
1部は、株式会社ディー・エヌ・エーで働くマークアップエンジニアの方々を複数名お招きし、 皆さんの進捗を気にしながら進めていくフォロー体制で ハンズオン形式の講義を実施しました。
技術を高める機会としてご活用していただくべく、株式会社ディー・エヌ・エーで実際に使われている開発手法を紹介しながらの講義となりました。
2部は、「DeNAで、派遣エンジニアとして働くって？？」をテーマに、座談会を実施。DeNAの社員の方々にもご同席いただき、 実際の技術環境に関することはもちろん、 社内の雰囲気や1日の業務の流れ、残業がどのくらいあるのか等、 具体的にざっくばらんに聞ける場をご用意しました。
興味を持っていただいた方は、ぜひ次回のセミナーにご参加いただき、実際にマークアップエンジニアとしてご活躍されている方の生の話を聞くことで ご自分のさらなるスキルアップに繋げてみてはいかがでしょうか？
▼派遣登録をご検討される方は、２つの登録方法があります！
オンライン登録／来社登録 ご自分にあった登録方法をどちらかお選びください。
