こんにちは。
Amebaでフロントエンドエンジニアをしております、ふっしー(@fushi_hd)です。
11/19~21の期間 CSSConf.Asia・JSConf.Asiaというフロントエンド系の技術に関する二つのカンファレンスに先輩方と参加させていただいたので、その参加レポートをします。
今年の開催国はシンガポールで、当然ですが全て英語での発表でした。
CSSConfが1日のみ、JSConfが2日間の合計3日間の開催でした。
それぞれ多くのセッションがありましたが、その中でも気になったものをいくつかピックアップして紹介します。
CSSConf
CSSに関する発表で、技術トレンドから導入事例などの発表が行われました。
こちらが会場の様子です。
No More Tools (Karolina Szczur @fox)
この発表では、以下のようなフロントエンド開発効率化のためのツールを多数紹介していました。
- Autoprefixer
- csslint
- cssmin
- npm
- gulp grunt
ツールの導入は簡単であるが、それによりシステムが複雑化し、メンテナンスしづらくなる可能性がある。そのため、チームメンバが協調して利用できるように、環境を整備する事が大切であるということを強調していました。
Performant UIs using CSS magic (Ryan Seddon @ryanseddon)
これはTHE CSS NINJAというブログを書いているの人の発表で、アプリケーションのパフォーマンスを、CSSにより制御する方法に関するものでした。
主にscrollListView.jsという、インフィニティスクロール系のライブラリを例にとり、コンテンツの描画のコストがどのように変化するのかを紹介していました。
CSSのプロパティを変更するとReflowとPaintの処理が走り、それらがどのように描画されるかといったフローの話をしていました。
Inside the Airbnb brand evolution (Fiona Tay @msfionatay)
AirbnbのWebサイトのリニューアルに伴い、既存のサイトを予め拡張性があるように作り直し、HTMLとCSSに新たなコードを書き加える事無く、内部パラメータの調整のみで、新しいデザインへとリニューアルすることができたという話でした。
Bootstrapのようなモジュール化を徹底し、抜本的に設計を見直す事により可能になったそうで、デザイナーとエンジニアの密な連携が無ければと成し遂げられなかった事だと思います。
Cascading Perspectives with THREE.CSS3DRenderer (Joshua Koo @blurspline)
Three.jsのコミッターによる発表で、THREE.CSS3DRendererの紹介でした。
前半でThree.jsの紹介をして、後半でCSS3DRendererの特徴などの紹介をしていました。
Three.jsとは違い、CSS3DRendererではDOMを使って3D表現ができるため、新しいwebページの表現の形として使用することも提案していました。
球体や元素記号のタイルを、縦横無尽に動かして整列させるといったデモをしていて、見ていて面白い発表でした。
JSConf
JavaScriptに関する発表で、フロントエンドに限らずNode.JS(バックエンドに関する技術)やハードウェア(センサ)に関する発表などもありました。
JSConf 1st Day
Building Isomorphic Apps (Spike Brehm, Airbnb @spikebrehm)
Airbnb社の人の発表でした。
Isomorphic Appとは、同じ言語で書かれたソースコードが、クライアント・サーバーの両方で動作するという意味で、ブラウザ環境とNode.js環境で動作するJavascriptを、Isomorphicにしてしまおうという考え方です。
Isomorphic Appに関して
パフォーマンス、SEO、フレキシビリティ、メンテナンス性の4つの観点から議論していました。また、各種フレームワークやライブラリを用いた、実際の導入事例を紹介していました。
Pixel Art And Complex Systems
(Vince Allen, Spotify @vinceallenvince)
ピクセルアートをブラウザで描画する方法に関する発表でした。ピクセルアートの描画について、Canvasなどを使わずに、cssのbox-shadowのみを使っていることに驚きました。一つのDOMにいくらでもbox-shadowをつけられることから採用したそうです。ブラウザのインスペクタで実際のDOMを見たところ、box-shadowのパラメータが大量に設定され、 大変なことになってました。
デモでは、オオカミが羊を追いかけて、それをゾンビが追いかけるといっものなどを発表していました。大変おもしろいデモでした。
こちらに発表に使用されたデモがあるので、見てみると面白いと思います。
Fun With Javascript And Sensors (Jan Jongboom, Telenor @janjongboom)
スマートフォンに搭載された、各種センサにアクセスできるAPIを用いることで、様々な面白い事ができるといった発表でした。光量を調節して音楽を奏でたり、ジャイロセンサで3Dモデルの傾きを制御したり、加速度センサを用いて、ジャグリングの動きを可視化するなど、スマートフォンを用いたデモを交えた面白い発表でした。
また、janOSという独自で作成したOSも紹介していました。
The Art of Less (Martin Kleppe, Ubilabs @aemkei)
JavaScriptをひたすらminify(圧縮)していくといった内容の発表でした。漢字をUnicode形式に変換して分解し、結合し直して意味のあるコードに変換したり、JavaScriptをいかに極限までminifyするかを、段階を追って説明するなど、普通では考えないような発想によるコード生成手法で、大変引き込まれる発表でした。
こちらに各種デモが上がっています。
ライトニングトーク
一人5分発表のライトニングトーク的なものがあり、一緒に参加していた弊社の1000chさん(@1000ch)が発表していました。内容は、フロントエンドのパフォーマンス向上における画像の圧縮化の重要性についてでした。スライドはこちら
今回の発表などについて1000chさんのブログにも載ってます！
JSConf 2nd Day
WebTorrent (Feross Aboukhadijeh @feross)
BitTorentの技術を基礎から説明していてとてもわかりやすい発表でした。
BitTorentはHTTPの様に、サーバー・クライアント型のの通信方式ではなく、クライアント同士が通信するP2Pのプロトコルを用いたものです。高速なダウンロードや多数のpeerの連携による負荷の分散が可能です。
また、BitTorentをWebRTC(Web Real Time Communication)を使って、Web用に拡張したものがWebTorrentです。BitTorentとWebTorrentは通信規格が違うため、仲介役となるクライアントが重要であることも強調していました。 WebTorrentのページはこちら
Versioning, SyncingStreaming Large Datasets Using Dat + Node
(Max Ogden @maxogden)
Node Schoolという、主にNode.jsのワークショップを行う団体の人の発表で、
大規模開発におけるデータの共有や、バージョニングのために使用できるDatの紹介とその使い方に関するものでした。
データベースのダンプファイルを、gitの様に扱うことができ、大容量のデータも簡単に管理することができるといったものでした。
Datのプロジェクトページはこちらです。
Reactive Programming Made Simple (Slava Kim, Meteor@imslavko)
Meteorという、Node.jsをベースとしたJavaScriptのフルスタックフレームワークの開発者による発表で、リアクティブプログラミングを用いて、Webアプリケーションをシンプルにしようという発表でした。
Meteorが開発したTrackerというフレームワークを紹介しており、これを用いる事で多数のライブラリを導入している環境でも、Trackerがすべてのライブラリをラップして、リアルタイムでデータを一元管理することができるといったものでした。
実際のデモでは、tableのデータを書き換えると、グラフのデータがリアルタイムに(ブラウザをリロードせずに)書き変わっており、リアクティブにデータが変化している様子が見て取れました。デモもわかりやすく、質の高い発表でした。
Gibbering At Algoraves: Js in Live Audiovisual Performances
(Charlie Roberts, UCLA)
JavaScriptで音楽とオブジェクト(3Dモデル)を制御できるGibberというライブラリの紹介で、JavaScriptでDJのようにリアルタイムで音楽を生成するデモを行っていました。Gibberのサイトはこちら。ソースコードはこちらにあります。
Gibberは内部で
- audio API
- p5.js (Processingライクにコード- を書くライブラリ)
- Three.js (WebGLの描画に関するライブラリ)
- canvas
をラップしていて、音楽生成の他にもオブジェクトの描画も簡単に行う事ができ、VJのような演出も可能です。デモでは、LiveCodingでリアルタイムで音楽と映像を生成しており、発表終了時、会場は拍手喝采でした。
Let’s Make a Game With Phaser (Gabe Hollombe, Neo @gabehollombe)
HTML5のゲームエンジンとして、Phaserというフレームワークを紹介していました。
通常、ゲームを開発するにはたくさんのアセットをajaxで入手し、入力を検知し、衝突を判定し、といった様々な面倒な処理が必要ですが、Phaserを用いることで、それらを簡単に処理できるというものでした。
Phaserは2Dゲームエンジンで、2DのWebGLレンダラーであるPixi.jsがベースとなっています。
デモではSpriteアニメーションの描画や衝突判定を簡単に行っていました。
総括
さて、先輩からのお誘いで参加させていただいた今回の遠征でしたが、昨今の各地のディベロッパー、エンジニアの話を聞けて、大変有意義なものとなりました。中には既に聞いたことのある話もあったのですが、初めて聞く話が多く、とても勉強になりました。
また、人によって（国によって）プレゼンの仕方が違っていて、様々なプレゼンスタイルがあることを学ぶことができました。
さらに、休憩時間やアフターパーティを利用して各国の技術者とコミュニケーションをとれた事が、貴重な経験となりました。(自分の英語力の自信にもつながりました)
何より、優秀な先輩方と行動を供にすることで、たくさんの技術的な議論を行う事ができ、とても刺激を受けました。
今回のような機会がもっと増えると良いと思います。また機会があれば是非参加させていただきたいと思います！
ありがとうございました！
