自分のまとめです。

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エディタの大本

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

拡張性の高さ

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

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

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

すごいSublimeのプラグイン、笑
#html5j_c pic.twitter.com/IF4OSpE475
— .Hiroya◆9/3HTML5conf (@Soten_Bluesky) 2016年9月3日

WebStorm

山本裕介 @yusuke

JetBrains製のIDE
拡張・カスタマイズ不要
有料 ¥5,940~

機能例

Github Isuue検索できる
ブランチ作成できる
コミットのブランチをする
color Pick

WebStormすげぇ！ #html5j #html5j_c pic.twitter.com/8NDtqQgbAk
— 山本裕介 (@yusuke) 2016年9月3日

Visual Studio Code

井上章　Microsoft エバンジェリスト

Window Mac Linux
OSS

機能

エディタ
Git
タスク実行
runtimes
拡張機能

ルート起点でcode .で起動

terminal起動してコンパイラーを走らせられる

Nodeや.NET/ASP.NETほかウェブブラウザでの環境でもデバッグできる

Visual Studio Code Extensions | Visual Studio Marketplace

個人的なこととしてはプロスマブラーの人が来ていたり、@Stocker_jpの中の人が目の前の席に座っていたのですげーってなりました。

twitter.com

色々他にもセクションはあったと思うのでそこらへんのまとめは他の人にまかせる。というか普通にセッションスライドまとめとか公式で作って欲しい。

こちらからは以上になります。

2016-07-18

XSS対策のセキュアJSについて（基本編）

社内ブログでまとめた内容をこっちでも書いてみる。ただ、フレームワーク使ったりしている中級者以上にはあんま参考にならないと思いますが基本編みたいなノリで御覧ください。

エスケープをする

すぐできる対策であり、割と効果的なものがエスケープ処理です。これは問題を起こしうる特殊文字を文字参照に変換して、実行させないようにする処理です。対応する特殊文字は「＆」「＜」「＞」「”」「’」の５つです。

function escapeHTML(str) {
 str = str.replace(/&/g, '&amp;');
 str = str.replace(/</g, '&lt;');
 str = str.replace(/>/g, '&gt;');
 str = str.replace(/"/g, '&quot;');
 str = str.replace(/'/g, '&#39;');
 return str;
}

ちなみにES6であればテンプレートリテラル（=Template strings）を使用して下記処理もできます。

function escapeHTML() {
 var raw = String.raw.apply(null, arguments)
 var safe = raw.replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"').replace(/'/g, ''');
 return safe
}
var input = "<img src=# onerror=alert(1)>";
var html = escapeHTML`<div>${userinput}</div>`;

テンプレートリテラルの使い方は「｀」（バッククオート）で囲むだけです。

URLはhttpおよびhttpsスキーム

URLを取り出し、それをデータとして扱う際に気をつけたいことは、javascriptスキームなど複数のスキームを介在させないために、リンク先がhttp：//かhttps：//なのかを判断して挿入するようにすることです。

var url = decodeURIComponent(location.href);
if( url.match( /^https?:\/\// ) ){
    var elm = document.getElementById("link");
    elm.setAttribute("href" url);
}

javascriptスキームはいわゆるブックマークに登録して便利な機能として使うというのが一般的ですが、それをXSSとして使用されるのを防ぐための策であります。

JSONPの取り扱い注意とJSON.parse

JSONPはクロスドメイン、つまり同一のドメインのデータでなくても引っ張ってこれるもので便利なものではありますが、同時に他者が仕組んだ悪意のあるJSONPデータも入り込む可能性があります。

JSONPをまったく使用するな、ということではないのですが使用する際は信頼のあるデータであることを証明した上で使用するのが吉です。

そしてJSONほか外部データを使用する際は必ず JSON.parse関数を使用してください。これは文字列を JSON として解析するためのものなので、eval関数だとJSONの中に実行文が紛れていると実行されてしまう恐れがありますので意識して使いましょう。

レンダリングメソッド使用廃止

主に下記のソースになります。これは上述したエスケープ処理がない場合、確実にXSSの標的になり得ますし、この部分を使って悪用されるおそれがあるかもしれないからです。

element.innerHTML = “…”;
element.outerHTML = “…”;
document.write(…);
document.writeln(…);

jQueryに頼り過ぎるな

jQueryはjsライブラリの１つですが、煩雑なコードを容易に記述しやすくして、デザイナーさんにも扱える簡単なもので今も制作会社で広く使用されていると思われます。

実はjQueryでもXSS対策はできるものがあり、それは text() です。受け取る値をテキストデータにエスケープしてくれる代物なのでinputでの入力を即出力するものには適しています。

$('input').on('keyup', function(e){
 $('.hoge').text($(this).val());
});

しかしながら、jQuery自身の長所でもあり弱点としても見られる「DOMの直接操作」部分が割とネックとなってきています。つまりDOM操作によるXSSの介入が起こりうる可能性があるのです。

以前のver.1.6では $(location.hash) の脆弱性が指摘されており、要素の検索や作成などを引数の文字列で判断するため、$()内でスクリプトを記載すると#idで指定したものがそのまま要素として判断されることがありました（ver1.6.3にて修正済み）

http://my-web-app/#<img onerror="alert(1)" src="xxx">
$('#<img onerror="alert(1)" src="xxx">') //ハッシュ値で判断すると左の値で取得する
//<img>タグで処理されるようになってしまう。

jQuery自身もver3.0の更新（2016年5月）があったように、日々使いやすくかつ脆弱性を潰してきて、簡単な装飾程度であれば使用する面では問題無いかもですが、セキュリティ面を考えた上でwebサイト・アプリに使い続けるというのは難しい選択のようにも思えます。

なのでjQueryのみに頼り続けるのは危ないかも、というのを念頭に置いておくと良いかもしません。（※使用をやめろ！と固く禁じる訳ではないです）

こちらからは以上です。つまりReact.jsについてちゃんとやれということでした。

2016-06-12

マテリアルデザインについて学ぶ社内勉強会

Webデザインマテリアルデザイン資料

先週の水曜日に初主催の社内勉強会でマテリアルデザインについてやりました。

正直なところ曖昧な部分でしかしれてなかったので自分の勉強と改めて理解する・社内として共有知識にするみたいな感じでスライドつくりました。あくまで基本的な要点だけなので詳しく突っ込まれると、つらい。

speakerdeck.com

結局一番伝えたい部分はデザインのフレームワークはいっぱい出来てきたけど、流行りのために使うのではなく、自分たちの発信がどのようなものでそれに合うにはどういうフォーマットがいいか、ということを見失ってはいけないなということです。アーリーアダプターみたいな感じでもいいけど、ユーザーは皆そういう感じではないので。

2016-05-15

初夏のJavaScript祭2016 行ってきた。

JavaScript node.js イベント ES2015 leapmotion

jsfes.net

個人的には参考になった。jsってやっぱ色々できるんだな。

以下発表順メモなど

node.jsでデスクトップアプリをつくる

@CHIHIRO_KAASAN

仕事中に自動で開発コストをかけずにいろいろできるものをつくる。

実行環境の準備
猫ファイルを取得
jsonで保存
Electronで実施

cheerio-httpcli スクレイピングを実行する。

www.npmjs.com

moduleを呼び出す。ダウンロードする。

画像、自分のほしい文字列を指定してあげる。

qiita.com

セレクタで呼び出す。セレクタはjqueryライク。each文でまわす。
JSON作成
デスクトップアプリ→Electronで動かす

npm パッケージをつくろう

@anticyborg

小規模のwebページ、LP制作について

製作期間が短い
html, css, jsも同じような記述が多い
jsのui実装はだいたい自作・・・
ライブラリの解析・カスタムにかける時間で作れる

npm パッケージ化でいけそう！

npm アカウント作成
パッケージ名
実装
リポジトリ用意
package.jsonの用意

package/${name}

普通に実装してもgulpビルドやBabelでもOK。common.jsスタイルで書くといろいろと楽。

パッケージを使う時

npm i packagename -D

呼び出し方法

htmlにスクリプトタグ
gulpfile.jsにconcatする
main.jsでrequire (browserify)

バージョンの管理：セマンティックバージョニング

セマンティックバージョニング 2.0.0

speakerdeck.com

APIの呼び出し回数に制限があって困ったのを、SEQ-QUEUEを使ってどうにかした話

@ampersand_xyz

ハッカソンで優勝した作品をローンチすることになった

fashionhack.jp

ハッカソンで使っていたAPIを実際ローンチするために使うのは無理。PUXがAPIを提供。

PUX「APIリクエストは3秒に1回まで」

APIとは？

アプリケーションの機能を利用するための入り口

つまり仕事を頼むのは3秒に1回までね

処理手順

アップロードファイル受け取り
iMageMagickでサイズ調整・保存
APIリクエスト
APIレスポンス処理
一時ファイルの削除

www.npmjs.com

seq-queueはsetTimeoutのように処理時間を調整できるキュー数を取得して処理が多かったらsubmit前に混んでいるかどうかを知らせる

#jsfes pic.twitter.com/XLx3Rdm3lh
— やまのく (@yamanoku) May 14, 2016

JAVASCRIPTでLEAPMOTION事始め

@kuwk

www.leapmotion.com

v1は割と動作が糞
2014にv2リリースして、手の動きなどが詳細的になった。
VR対応までできた

github.com

SDKは色々ある

JavaScript SDK Documentation — Leap Motion JavaScript SDK v2.3 documentation

デモの様子

#jsfes pic.twitter.com/XZbSLfFK4j
— mokelab (@mokelab) May 14, 2016

#jsfes pic.twitter.com/uwzgOY4JWQ
— mokelab (@mokelab) May 14, 2016

ES2015の今とこれから

@lion_man44

ES2015
ES Next

ES2015の今とこれから from lion-man

www.slideshare.net

ES2015, ES6でそれぞれQiitaで検索するとES6のが検索数が多い

ES2015https://t.co/6Dd7uQP7Qf
ES6https://t.co/vgVPTxnYzb #jsfes
— やまのく (@yamanoku) May 14, 2016

ES2015仕様に関する議論

GitHub - tc39/ecma262: Status, process, and documents for ECMA262

ES2015の各ブラウザサポート状況

ECMAScript 6 compatibility table

JAVASCRIPTでデバイス連携してみて出会える技術！広がる知識！

http://www.1ft-seabass.jp/memo/

2016初夏のJavaScript祭り20160514 from Seigo Tanaka

www.slideshare.net

連携の流れ　IFTTT → heroku → milkcocoa

milkcocoaだとjsでリアルタイム通信が開発できる

2016-05-08

CSSプロパティの記述順について - CSScomb解決編

CSS node.js CSScomb

yamanoku.hatenablog.com

以前CSSプロパティの記述順に対してどうするかなどと悩んでいましたが、１つの解決策を見つけました。

CSScombを使用してみる

自分で記述順を悩むなんてアホくさいので機械に全部処理してもらうということになりました。というわけで以下をインストール。

CSScomb: Makes your code beautiful

npm install csscomb --save-dev

CSScombってどういうものなの

CSScombはcssのプロパティの整形をしてくれるプラグインで、sublimeTextにもパッケージがあります。整形はpleeeaseでもできそうな気がしたけど、思っているプロパティ整理はなさそうなので有用そうなものを使用してみました。

以下はgulpを使っているので他の記述とは異なる箇所もあるのでご了承ください。

gulpfile.js

var conf = require('./config.json');
var gulp = require('gulp');
var comb = require('gulp-csscomb');

gulp.task('style', function() {
  gulp.src(conf.PATH.css)
    .pipe(csscomb())
    .pipe(gulp.dest('./src' + conf.URL + 'css'))
});

// 僕の環境ではこんな感じ
gulp.task('stylus', function () {
  gulp.src(conf.PATH.stylus)
  .pipe($.plumber())
  .pipe($.stylus({
    use: function(style) {
      for(key in conf) {
        style.define(key, conf[key]);
      }
    }
  }))
  .pipe($.pleeease({
    autoprefixer: ['last 2 versions','iOS >= 8','Android >= 4'],
    rem: false,
    mqpacker: true,
    minifier: false
  }))
  .pipe(comb())
  .pipe(gulp.dest('./src' + conf.URL + 'css'))
});

config.json

{
      "TITLE": "test",
      "URL": "/",
      "hostname": "localhost",
      "PATH": {
            "css"        : ["css/**/*.css", "!css/_**/*.css"],
            "stylus"    : ["stylus/**/*.styl", "!stylus/_**/*.styl"],
      }
}

出力先のdestとかPATH設定とかは各自ご自由に。comb()追加するだけでやってくれます。

整形の設定を変えたい

gulpを走らせて、保存すれば自動的にcombしてくれるのですがこんな感じです。

f:id:cardboarder:20160508211041p:plain

いわゆるデフォルトのソート順であったり、それぞれのプロパティの関連順に整列して1段空きがあったりなど、整形はしてくれたけど見た感じは微妙な感じかもしれません。また、このデフォルトの記述欄整形では他の人との連携でルールが明確で無いのでやりづらいのでこのままでは求めている記述順の正攻法にはなりません。

なのでCSScombの設定（config）をいじります。以下にアクセスどうぞ。

CSScomb: Build config

ここではどのような整形ルールにするかを設定できます。やってほしいrulesetを選んで順々に進めていきます（計２４個）すると設定をしてくれたjsonを吐き出すのでこれを .csscomb.json と命名して、gulpfile.jsと同じ階層のディレクトリに保存します。（もしくはプロジェクトのルートフォルダ）

んで整形したのが以下の感じです。

f:id:cardboarder:20160508212012p:plain

アルファベット順の整形、ベンダープレフィックスの頭揃え、カラーコードは小文字で３文字省略できるものは省略するなどでいじりました。

ちなみに自分で設定した.csscomb.jsonはこんな感じです。ご参考までにどうぞ。

{
    "remove-empty-rulesets": true,
    "always-semicolon": true,
    "color-case": "lower",
    "block-indent": "\t",
    "color-shorthand": true,
    "element-case": "lower",
    "eof-newline": false,
    "leading-zero": false,
    "quotes": "double",
    "sort-order-fallback": "abc",
    "sort-order": ["..."],
    "space-before-colon": "",
    "space-after-colon": " ",
    "space-before-combinator": " ",
    "space-after-combinator": " ",
    "space-between-declarations": "\n",
    "space-before-opening-brace": " ",
    "space-after-opening-brace": "\n",
    "space-after-selector-delimiter": " ",
    "space-before-selector-delimiter": "",
    "space-before-closing-brace": "\n",
    "tab-size": true
}

これでcssだけ弄る人でもconfigルールを明確にしとけば、混乱はないんじゃないのかなと思います。テンプレートと素のcssとの併合とか考えだすとめんどくさくなるのでひとまずこれでいきましょう。

余談ではありますが

もしアルファベット順ではなく独自の記述順がある際は sort-order で設定できたりします。なんかより分かりづらくなりそうですが。

"sort-order": [
    [
    "font",
    "font-family",
    "font-size",
    "font-weight",
    "font-style",
    "font-variant",
    "font-size-adjust",
    "font-stretch",
    "font-effect",
    "font-emphasize",
    "font-emphasize-position",
    "font-emphasize-style",
    "font-smooth",
    "line-height"
    ]
]

割とスッキリできたので皆様もご参考にどうぞ。こちらからは以上です。

参考

qiita.com

blog.sakurachiro.com

katoken.hatenadiary.jp

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

@koba

webのグラフィックス2016

WebGL事例 - @mattari_panda

WebGLパフォーマンス - @emadurandal

Material Design for Web

@taquo

様々なデバイスへの対応

歴史

４，５年前

2011

2014

Use Case

Framework

Layouts

Fonts

Icons

Summary

Anouncement

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

@yhassy

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

ツールで解決

パターンを考える

パターン言語

ATOMIC DESIGN

MATERIAL DESIGN

Bootstarp

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

そもそもの大きな問題

プロトタイプツール

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

今考えられる解消の仕方

エンジニア

デザイナー

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

JOB TO BE DONE

JOB

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

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

標準機能

カスタマイズ方法

パッケージの例

やっててよかった話

Sublime Text

基本概念

拡張性の高さ

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

WebStorm

機能例

Visual Studio Code

機能

エスケープをする

URLはhttpおよびhttpsスキーム

JSONPの取り扱い注意とJSON.parse

レンダリングメソッド使用廃止

jQueryに頼り過ぎるな

node.jsでデスクトップアプリをつくる

npm パッケージをつくろう

小規模のwebページ、LP制作について

npm パッケージ化でいけそう！

呼び出し方法

APIの呼び出し回数に制限があって困ったのを、SEQ-QUEUEを使ってどうにかした話

ハッカソンで優勝した作品をローンチすることになった

APIとは？

処理手順

JAVASCRIPTでLEAPMOTION事始め

SDKは色々ある

デモの様子

ES2015の今とこれから

ES2015仕様に関する議論

ES2015の各ブラウザサポート状況

JAVASCRIPTでデバイス連携してみて出会える技術！広がる知識！

CSScombを使用してみる

CSScombってどういうものなの

gulpfile.js

config.json

整形の設定を変えたい

余談ではありますが

参考

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