HTML5 CONFERENCE 2016参加レポート | サイバーエージェント 公式エンジニアブログ

こんにちは。サイバーエージェント17卒内定者で現在アメーバブログでアルバイトをさせていただいている柳耕太です。
少し日は空いてしまいましたが先日行われたHTML5 CONFERENCE 2016のレポートを書かせて頂きました。

 

基調講演

基調講演前半

 

基調講演は前後半に別れており、前半は慶應義塾大学環境情報学部教授でW3Cサイトマネージャーでもある中村 修教授が登壇しました。


中村教授はWEBというものが世の中に現存する媒体(雑誌、カタログ、ニュース)を表現するものにとどまるのではなく、新しいデバイスやデータの扱い方等をハンドリングしてユーザーに提供しなければならない。といった今後進化する技術にWEBが対応すべきであるという話、そして最近よく聞かれる IoT, ビックデータ, 人工知能等 という技術はWEBという基盤の上に成り立っているものであり、地球を取り巻く大規模なOSと化しているWEBが抱えている問題を解消するために行われている活動や作業についてのお話をしていました。
 

ものすごくスケールの大きな話で、自分も含めホールでお話を聞いていた全員がWEBが社会でも重要な役割を占めていることを再認識していました。

[動画]

 

 

基調講演後半

 

後半にはGoogleでChrome開発に携わった経験を持つIncrements株式会社の及川卓也さんが登壇しました。


及川さんは アプリケーションとしてのWEB, メディアとしてのWEB, 基盤技術としてのWEB, といった3つの側面から見たWEBについて以下のことをお話していました。

  1. 紙としてのメディアを超えたコンテンツにするためのAPIが増えてきている
  2. 現代人はスキマ時間でスマホをいじるようになりニュースキュレーションサイト等の利用が増えているが、WEBには純粋なコンテンツ意外のリソースや外部リソースなどが多いのでアプリに流れがちといった今のWEBの問題点
  3. WEBがこれからも重要であり続けるために、一旦立ち戻って「WEBに再投資すること」さらには「WEBを再発明すること」で正しい技術の発展の仕方を考えるべきである

そして、WEB広告の問題点を解消するためにAMPというものがあるが、CMSやツールなどが対応を阻害し対応したくても対応出来ない会社も多いというWEBの進化を阻害する要素についてもお話してくれました。

 

WEBの光と影をわかりやすく説明していただけたので、今現在どういうことが問題になっていて、どういう対策が講じられているのかがよく分かるお話でした。

[動画]

 

Reactの最新動向とベストプラクティス(株式会社TOLOT:小林 徹)

 

近年良く耳にするFacebook制製のJSライブラリ「React」がどういったプロダクトに使われているのか、Reactの歴史、Reactの特徴などを話した後、開発をサポートするツールについてやアップデートの際、破壊的な変更は無く非推奨のメソッドなどは1つ前のメジャーバージョンで警告をしてから廃止される。といったReactを実際のプロジェクトに組み込む際に気になる部分についても触れてくれました。


そして、今後はDOMの差分の検出・適応が同期的に行われているものを、優先度の高い処理と低い処理のレンダリング方法を変えるためにアルゴリズムの全面書き換えが行われていると言ったこれからのReactについてもお話してくれました。

 

React.PureComponentがshouldComponentUpdateの書き間違えによる、データは更新されてるのに再レンダリングされないという罠にハマるのを解消してくれそうな存在だと感じました。(良くハマるのは自分だけでしょうか)

資料

 

HTML5/JSモバイルアプリ最前線 (アシアル:田中 正裕)

 

Stack Overflowが行っている普段どういう言語を使っているかという調査によると、JavaScriptは総合1位、フロントエンド開発1位、バックエンド開発1位となっているが、モバイル開発ではJSは全然人気では無いというお話をした後、JSでモバイル開発を行うためのソリューションの歴史のお話をしてくれました、その中でも Cordova, ReactNativeについて深掘りして話してくれました。

 

Cordovaはすでに太いレールが敷かれているが、新しさは無く動きは活発ではなく、React Nativeはみんながバラバラにレールを引いているが、刺激的で動きが活発であるというのが所感だそうです。


そして、Googleが提唱するProgressive Web Appsという開発パターンの特徴についてお話した後三者の比較をしてくれました。

[比較画像]

それぞれの技術について色々な側面からのお話が聞けて、JSモバイルアプリ開発を行う際、技術選定に困ったときに参考になるお話でした。

資料

 

Material Design を使ったマルチデバイスに対応するデザインの作り方(Google:鈴木 拓生)

 

現在、様々なデバイスでWEBページを表示できるが、デバイスによって見た目がバラバラでユーザー体験が統一化されていないのを解決するために「Material Design」というデザインフレームワークが誕生したというお話の後、Device metrics, Resizer, といったMaterial Designの考えを組み込んだレイアウトを考えるためのツールや Google Fonts, Noto Fonts, Material Icons, といったフォントやアイコンなども紹介してくれました。


そして、フレームワークを使うことをゴールとするのではなく、フレームワークを使った上で何をするかが大事である。とデザインフレームワークに縛られるのも良くないと話を締めくくりました。

 

今回のお話はこちらに書いてあることを抜粋したものだそうです。

用意されたUIを使うことでどうUXを向上させるかという部分に集中して考えることができるので、このようなデザインフレームワークがあるとものすごく助かります。

お話の中にもありましたが、デザインフレームワークに縛られるのではなくそれを使って何ができるのかを今後考えていきたいと思いました。

 

TechFeedのつくり方 - Angular2 / Webpack / Ionic2 / Cordova実践入門(株式会社オープンウェブ・テクノロジー:白石 俊平)

 

今後Webはコンポーネント指向になる!という断言からスライドが始まり、TechFeedというサービスを作るために何故 Cordova, Angular2, Ionic2, Webpack, といった技術を選定したかというお話をした後、どういう開発フローで開発が行われているのかというお話をしていました。この開発のメリットとしては、Web, iOS, Androidのコードが統一できるため1人のエンジニアが横断的に様々なデバイスに携われることですが、1人のエンジニアが全デバイスの面倒を見なければならなくなるというデメリットもあるというお話もしてくれました。


そして、今回開発に使用した Cordova, Angular2, Ionic2, Webpack, について実際に開発に使ってみて見えてきたそれぞれのメリット・デメリットについてわかりやすくまとめてくれました。

 
実際に開発に使用し、サービスをリリースしている方からCordovaやIonic2のお話を聞ける機会は中々無いので、今回のお話はとても良かったと思います。
特にコードが統一できるため1人のエンジニアが全デバイスの面倒を見なければならなくなるという実際に導入してみて見えてきた問題点などを知れて良かったです。
 
Progressive Web Appsの導入基盤(株式会社リクルート住まいカンパニー:片山 雄介)
 

カンファレンス中に何度か耳にした「Progressive Web Apps」についてのお話を、実際に導入しているリクルート住まいカンパニーの片山さんから聞くことができました。
 
ホーム画面にWEBページを追加し、起動時にスプラッシュ画面を見せることでよりアプリっぽく見せられるということや Push Notification, Offline Cache, などの実装方法の基礎的な部分のお話をした後、サービスワーカーを利用したキャッシュの使い方や、Viewとデータを完全に切り離してビューだけキャッシュしておいて、表示する内容だけをAPIから取ってくるというApp shellアーキテクチャを実装することでよりネイティブアプリに近づけられるというお話をしていました。
 
App shellアーキテクチャをインドのECサイトFlipkartが導入しており、高速かつネイティブっぽさが出ているサイトになっているという事例もあるようです。
 
お話が終わり、質疑応答の時間ではSUUMOはアプリもあるのに何故WEBの方にも力を入れるのかという質問に対し片山さんは、今後WEBが勝つのかアプリが勝つのかわからない状況のためどちらにも力を入れており、勝敗がハッキリした時に勝った方に注力するのが1番だと考えている。と回答していました。
 
アプリの優れたUIや仕組みをWEBに取り入れることにより、ダウンロード不要で利用できるネイティブアプリケーションを作ることができるのではないか、と夢が膨らみました。
 
感想
今日一日でWEBというものがこれまでどういうことを実現してきてこれからどういう方向に進化するのか、その具体的な方法や技術、それを使った事例やサービスについて深く知ることができました。
今後もサービス開発者として新しい情報のキャッチアップを行いながら、WEBというものをどう活用すればユーザーに価値が提供できるかを考えて行きたいと思います。