自分のまとめです。

Reactの最新動向とベストプラクティス

@koba

speakerdeck.com

この内容の通りです。https://getstorybook.io/とかhttps://storybooks.io/は視覚的に確認できるのがめっちゃ便利だと思いました。

あと会場内でのReact体験者 - React業務経験者＝だいぶ少ない印象でした。

webのグラフィックス2016

WebGL事例 - @mattari_panda

Webのグラフィックス2016 WebGL事例 from Daisuke Shigyou

www.slideshare.net

コロプラの中の人。今回はサイトで使うWebGL（というかThree.js）の紹介。簡単なものから導入してみるのはよいことですね。

WebGLパフォーマンス - @emadurandal

https://www.icloud.com/keynote/09q5bI7F3WA9tdK17J6BIt4hg#HTML5%E3%82%AB%E3%83%B3%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9WebGL%E9%80%9F%E5%BA%A6%E6%9C%80%E9%81%A9%E5%8C%96

パフォーマンスを測る方法など。CPU側とGPU側でボトルネックになり得る箇所があるかもなのでそこを履き違えないようにという感じ。

CPU側（Javascript部分とか）は描画処理以外でもネックになりえている可能性があるので調査は割としやすいかもだけど、自分はGPU側はあまり知り得てないので使うときには軽く触れておくといいかもしれない。

あとThree.jsなどのライブラリには内部にWebGL命令が書かれているので最適化は難しいが、チューニングの仕方を知ったりやノウハウを集めていく（Stackoverflowとかで）やり方がよい。

他資料は以下より参照 https://www.icloud.com/keynote/000hhaE2RGqEe9gdi1evUinqA#GLSL%E6%9C%80%E9%81%A9%E5%8C%96%E3%81%B8%E3%81%AE%E9%81%93

Material Design for Web

@taquo

Google Developer Relations所属。プレゼンというか間のとり方上手いなという印象だった。

様々なデバイスへの対応

PC
スマートフォン
タブレット
ウェアラブル
テレビ
カーナビ…

歴史

４，５年前

Gmail、Android Gmail、Mobile Web Gmail 実はデザインはすべてバラバラ

2011

Project kennedy - ユーザー体験を統一化しようプロジェクト黒帯メニュー部分がプロジェクトの集大成

Holo フレームワークが登場 ↓ デスクトップとAndroidで違う…

2014

Material Design誕生異なるプラットフォームでアクセスしても平等なアクセスが出来る ↓ Googleサイト、アプリ以外にも様々なサードパーティでも利用できるようにマルチデバイス・クロスブラウザ問題の解消をすすめる

Tangible Surface (物質的なデザイン) → デジタルな紙で表現
Print Like Design (印刷物デザイン) → グリッド計算　1dp → 約8px
Meaningful Motion（意味のあるモーション) → 現実世界の動きに準ずる

アプリケーションコストを下げられるのではないだろうか？

Use Case

inbox : google
Google Cultural Institute
Google I/O
PESTO

Framework

PolymerPaper Elements
Angular Material
Material Design Light

Layouts

ai frameworks
Device metrics
Resizer

Fonts

Google Fonts
Noto Sans

Icons

Material Icons

Summary

design.google.com

デザインフレームワークに縛られてほしくない

Anouncement

コミュニティ（Slack） http://design-jp.herokuapp.com

協働のためのデザイン思考の再構築

@yhassy

デザイナー　エンジニア各自のコミュニケーションが永遠の課題

デザインとコードの同時進行が最近の動き「デザイナーはコード書くべき、ビジネスを知るべきだ！」ニーズ

ツールで解決

Sympli

パターンを考える

UI構築のスピードアップ

一定以上の品質担保

ある程度のパターン言語を作るべき
ユーザーが最低限満足するツールを作るため
あらゆる状況に対応できるように汎用性のあるもの

パターン言語

ATOMIC DESIGN

デザインの最小要素とは何か？

MATERIAL DESIGN

Bootstarp

フォースプラットフォーム、すべてで同じ体験をする

自社スタイルガイド、パターン言語をつくる

例：MailChimp

利用者ニーズに最適化するUI
製品・サービスに合う名称

そもそもの大きな問題

デザイナー… 全体構成から詳細部分をつくる → 部品から作れない

エンジニア… パーツ単位から全体のサービス → 一貫性がないと二度手間

プロトタイプツール

invision

考え方を合わせるアプローチ

スタイルガイドの作成など ← ただし必ずうまくいく訳ではない

今考えられる解消の仕方

エンジニア

ドメイン駆動設計 DDD（言葉のズレの解消）

ドメインモデルーーーーーユーザーの目的

デザイナー

オブジェクト指向UX

ユーザー像 → シナリオ → オブジェクト化

コンテンツモデル（例）

レビュー

タイトル
本文
概要
日付
アイテム --- 名前、概要、価格、発売日、メディア、ブランド
タグ
評価
筆者

オブジェクトで考えよう、言葉を合わせよう

いったいどういうコンテンツを設計しようとしているのか？

JOB TO BE DONE

イノベーションのジレンマ

JOB

どの製品・サービスでもお客様に「仕事を与えられている」という考え

ユーザー属性は違う…でも同じ目的がある（20代女性、40代男性でも自分の写真を「知人に共有させたい」）

Facebookの写真機能は知人と一緒に見て楽しむ

ユーザーの動機、求められる結果を突き詰める

状況 … レストランで"食べ物"がきた時
動機 … 美味しそうな"写真"が撮りたい
結果 … いい"場所"を知っていると思われたい・"お店"に来て欲しい…願望

ユーザーインタビュー, 仮設検証

こんな機能はどうだ？こう使って欲しい

↓

ユーザーの求めている結果に対して詰めてゆく！

Atom、Sublime Text、WebStorm に Visual Studio Code、四大エディター真夏の大決戦！

それでは皆さんには殺し合いをしていただきます #html5j_c pic.twitter.com/5GNYv9JDz9
— やまのく (@yamanoku) 2016年9月3日

Sublime Text派なんですが、推しの人がそこまで推しておらずいいかげんにしろって感じだよ（怒る）。WebStormは有料だからすごかった。

Atom

中島滋 ledsun

Github製
Win Mac Linux対応
カスタマイズしやすい
2014/05 OSS化

マルチプラットフォーム

Win 44%
OS X 43%
Linux 13%

ユーザー数 100万人 1500万ダウンロード

標準機能

パッケージマネージャ
ファイルシステムブラウザ
ウィンドウ分割
シンタックスハイライト
オートコンプリート
検索・置換

カスタマイズ方法

エディタ設定
snippet
パッケージ4600以上
テーマ1500以上

パッケージの例

atom-beautify

コードフォーマッター

hyperclick

関数・変数定義へのジャンプ
言語毎のサブパッケージ ex:js-hyperclick

やっててよかった話

１　マークダウンで書きたい

markdown-preview（標準機能）
標準機能（ctrl+shift+m）

２　Railsアプリケーションの修正、slim記法をやるとき

language-slim
シンタックスハイライトとスニペット追加

３　html文章を組む時全角半角が混ざっている時

japan-util
選択範囲を修正

Sublime Text

こもりまさあき

基本概念

必要最低限の機能だけが搭載されたテキストエディタ

いまどきのGUIエディタの大本

何気にかゆいところに手が届くもの

拡張性の高さ

今はいろんなエディタにも対応されているが…

言語や技術にも素早い対応