フロントエンドエンジニアの勉強会「LIGFE’S」を開催しました

こんにちは。フロントエンドエンジニアのほりでーです。

これまでLIGでは、デザインチームが開催する「LIGSHIP」にはじまり、取締役のづやとバックエンドチームが主催する「づや会」、ディレクターチームによる「Dig Up Direction」、 日本ディレクション協会とのコラボレーションである「LIG’s DIRECTION shool」、Pooleチームによる「待たない採用戦略」など、バラエティに富む勉強会イベントを開催してきました。

LIGSHIP vol.2「ママ＆パパデザイナーの働き方を考える会」を開催しました！

今話題のBotをNode.jsで作れる？！LIGエンジニアで勉強会してみた！

“ディレクター”を掘り下げて考えるイベント【Dig Up Direction】vol.01開催しましたレポート

クライアントの満足を引き出すコミュニケーション術とは？LIG’s DIRECTION school 2016開催レポート

【イベントレポート】人事担当者向け勉強会！Retty×クルーズの「待たない採用戦略」

でも、まだ何かが足りない……。そう、わたしたちフロントエンドエンジニアのイベントがなかったのです。

過去には、Angular/Angular2をテーマにした「ngcurry」「ng2curry」というイベントもありましたが、フロントエンドチームとしてのイベントはありませんでした。

LIG主催のAngularJS勉強会 #ngCurryが開催されました

そこで立ち上げたイベントが、LIG Front-end’s Fest、略してLIGFE’S（リグフェス）です！

LIGFE’Sとは

制作系のWebフロントエンドエンド領域では、デザインからエンジニアリングまでの幅広い領域に加え、デザイナーの領域ともエンジニアの領域ともつかない、インタラクションデザインや、プログラミングならではの表現といったものも対象となっています。

こうしたWeb制作の領域に関わる人たちに向けて、LIGのフロントエンドチームが中心に主催した、第一回のLIGFE’Sが、4月26日に上野いいオフィスで開催されました！

• LIGフロントエンドの勉強会LIGFE’S – connpass
  http://lig.connpass.com/event/29824/presentation/

当日は多くの方にご来場いただきました！

司会は、ほりでーが務めました。

登壇者以外のFEメンバーも手伝いに来てくれました！

第1回LIGFE’S発表のダイジェスト

LIGFE’Sで発表した内容をダイジェストでご紹介します。

Snap.svg.jsを使ったJSアニメーション

発表者：せいと

SVGフレームワーク「Snap.svg.js」を使ったアニメーション表現に関する発表。はるばるフィリピンのセブ島からビデオ会議で発表をしてくれました！

線画が滑らかに表示されていくような、いかにもSVGらしい表現がjQuery風の表記で簡単に実装できるのが魅力的でした。

• Snap.svg：http://snapsvg.io/

マイクから音声情報を取得してブラウザ（JS）から使ってみた

発表者：つっちー

既に、一部のブラウザでWebAudio系のAPIが標準装備されていることはご存知でしょうか？ 音楽畑出身のつっちーが、丁寧なコードレビューと一緒に、ChromeのWebAudio系のAPIを使った新しい表現を紹介してくれました。

発表のアウトラインと、ソースコードは下記のGitHubページからご覧ください。

lig-dsktschy/ligfes20160426

Adobe Animate CCを使ってcanvasアニメーションを作ってみた

発表者：ゆたろう

以前はフラッシュデベロッパーであったゆたろうが、Adobe Animate CC（旧Adobe Flash）を使ったCanvas・WebGLアニメの書き出し機能を紹介！

かつては多くのWeb開発者を魅了したFlashですが、型を変えて生き残ってほしいと思うのは私だけでしょうか……。

• HTML5ベクターアニメーションソフト | Animate CC（Flash Pro）：
  http://www.adobe.com/jp/products/animate.html

本当に使える！破綻しないMindBEMing

発表者：じぇしー

CSSフレームワークの一種であるBEM。みなさんはどれくらいご存知でしょうか？

じぇしーがBEMの公式ドキュメントを読み解いて勉強した、BEMの基本的な考え方や、よくやってしまいがちな間違った運用方法について説明してくれました！

• Methodology / BEM：
  https://en.bem.info/methodology/

フロントエンドだからこそ気を配りたいアニメーション

発表者：店長

ひとくちにアニメーションといっても、その表現手法や目的はさまざまです。店長の発表では「ユーザーインターフェースとしてのアニメーション」と「雰囲気を伝えるためのアニメーション」という、大きな2つの目的を説明。

「とりあえず」「ただなんとなく」といった曖昧な理由ではなく、きちんと目的を意識した表現が、完成度の高いデザインに繋がっていくのかもしれません。

• Introduction – Material design – Google design guidelines：
  http://www.google.com/design/spec/material-design/introduction.html

エンジニアの「お茶会」開催します！

LIGのフロントエンド／バックエンドの各チームでは「LIGの開発者のことをもっと知りたい！」という方に向け、エンジニア向けの「お茶会」を開催しようと思っています。

近々、LIGブログにて告知するので、もう少しお待ちください〜！