JSオジサン#6のLTメモ

昨夜行われたJSオジサン #6に参加してきました!
LT内容をメモしたので記事にして残します。


個人的にはWebVRが一番の関心事でしたが、vue.jsやドローンの制御辺りも気になります。
ちゃんとnode.jsも勉強しないとなあ。
ともあれ皆様お疲れ様でした!

以下LTメモです。

SOP との闘い

hebikuzure (村地) さん

SOPが生まれるまでjsエンジニアは平和に暮らしていた
Frameで読み込んだ他人のコンテンツにやりたい放題した
→SOPに従ってプログラミングしなさい!
Same Origin Policy
以下の3つが同一であること
FQDN
スキーム
ポート番号
問題:別ドメインのコンテンツとマッシュアップができない
対策1サーバーサイドでアクセス
webサーバーの負荷が増える
対策2 JSONP
JSONPはjavascriptの正しいコード
対策3CROS
XHRを拡張
クライアントとサーバーがお互いに認めればOK
対策4postMessage
その他対策
WebSocket
WebRTC

注意:外部から取得したデータは基本的にunsafeとして考えること
入力値検証を行う
エスケープをきちんと行う

色で色々遊ぼう

右寺 隆信 @migiさん Goodpatch

webの人にとって色とは?
0~255の値をとるRGB
身の回りの
数値で表せる3つで一組のもの
は色で表せますよね

アプリ作りました
スマホの傾きをとって色を変化させてお題の色と一致させる

スタイルガイドジェネレータ作った(仮)

nakajmg さん PixelGrid

StyleDecco 死亡
KSS 記法が変
Hologram Rubyに依存

ほしいもの
変な記法はなくしたい
Rubyに依存しない

つくりました
aigis
hologramの機能をほぼもらった

nodeで動く
マークダウンでかける
HTMLのハイライトが効く

codegridというサービスはaigisを使っている
コードサンプルもある

使ってみてフィードバックください
ドキュメント整備も力入れてます

underscore.jsのソースコードのお話

早瀬まこと さん 大塚ビジネスサービス

jQuery(john resig)とbackborn.js()の人の接点について
underscore.jsのテンプレート機能に接点がある
ソースコードの中にコメントで
「レシグさんの本、javascript ninjaの84ページを参考にしたよ」と記載があった
コメントが充実してる
まとめると、ソースコードを見るとワクワクしました

vue.jsコンポーネントのススメ

菅原孝則 さん asoview!

スタイルどこで書いてるか探すのだるい・・・
css,js,htmlファイルがそれぞれある
そこでvue.js
ワンファイルにテンプレートロジックスタイルを書く
クソコードが1ファイルに集まる!
クソの局所化!!
react,polymarでもできる
でもこっちはIEとかに強い

導入が会社的に厳しい
vue.jsコンポーネント
独自タグを作れる
に差し込まれる

これでSEOもインタラクションもバッチリ

Angular 1.5 の機能使ってTODOリスト作ってみたので紹介がてら話してみる

can_i_do_web さん フリーランス

Angular 1,Angular 2がある
界隈の人は1、2で使い分けて話す
Angular1.5の新機能
文字や画像などをスワップできる
使い所が限定される気がする・・・

Angularはコードを晒す人が少ない

iOSおじさんはjsおじさんをこれからも覗きに来る話

佐藤 さん piece of cake

Webフロントエンドの技術的なパラダイムが少し遅れてiOSサイドに流れてくる感
コールバック地獄を避けたい
プロミスな書き方をしよう
PromiseKit

データバインディング
ビューとモデルの分離
SwiftBond
データバインディングのライブラリ

Android Marshmallowでバインディングが標準搭載
xml形式で書く

AltJS
ESLint
PowerAssert

SourceKit
Swiftのパーサ
リンカーなど搭載

Redux Fluxアーキテクチャの一つ
今一番人気ある?
Single State Tree

SwiftでもReduxを触ったりしてる
スマホアプリケーション開発に導入されるかはまだわからない

jsでSKYHACK! node.jsとDroneたち

@ta__miyan (田宮幸子) さん ギークス

skyhack is so easy!

災害救助や配達、広告などに使える
空の産業革命
安価になった(1万円前後)
オープンソース化
スタートアップの参入

日本では規制がかかった
東京23区では飛ばせない
200グラム以下なら大丈夫
もしくは申請する
3年以内にドローン特区

nodeを使って簡単にハックできる

ARDrone
6万弱
SDK公開中
socket.ioで通信してる
写真も撮れる

初飛行は感動
風圧が強い
途中でエラー吐くと止められなくなる
node.jsの知識があると速攻で開発できる

腕時計型セルフィー用ドローンも開発が進んでいる
声や画像認識で操作も

ヤフオクやメルカリで中古のドローンを買うと安い

基板とブラウザと私

若狭 正生 さん 若狭企画

去年はオーディオAPIを使って制御するブラウザアプリを作成
グーグルの音声認識を利用

今回はバージョンアップした
動作はブラウザのみで制御
QRコードを読み込むだけでロボットを制御
Web標準搭載の性能すごい
Androidを除いて合計1万円くらいで作った

headtracker.jsを使用
Web MIDI API
arduino

動くもの
Chromeが動いてUSB端子があるもの
Bluetooth MIDIはiOSが最強説

MIDIはキーボードイベント違って127段階で取得できるVelocityというパラメータがある
レイテンシが非常に少ない

MIDIはChromeでサポートされている
USBさしたら自動的に認識するものがMIDIだった
1983年に発表された企画
Android MarshmallowでMIDI制御APIが標準搭載される

・ブラウザ開発のメリット
ブラウザだと開発環境構築も環境のインストールもいらないのが最大のメリット
ロボットのプロトタイプをお手軽に作る
webエンジニアがロボットの世界に
メモ帳でも開発できる

いよいよ本番。(斜め上)活用例から見るWebVRの使いドコロ

比留間 和也さん カヤック

WebVRなら普通のブラウザでOculus Riftが使える
firefoxが一番VRに対して対応が早い
mozvrというサイトでVRがブラウザ上で実行できる

体験型コンテンツならUnityやUEを使った方が手軽で簡単

WebVR
Webならではのよさがあるはず
Webは、いつどこでだれがどんなデバイスでアクセスするかわからない!
つまりVR体験も今までのブラウザ太陽と同じようにどんな環境でも動くように
WebVrはステーキに対する寿司。レスポンシブなVRを目指す。
モバイルやPCの垣根なく
モバイル???
->最近ではスマホで使えるゴーグルもでてきてる
スマホ向けのVRゴーグル
スマホはジャイロセンサーを使うことでだいぶそれっぽく見える

カヤックはVR部という部活がある
VR部のサイトはOculusを使うことでしか見れないコンテンツがある
スマホでも見れるしOculus Riftでもみれる

WebVR入門のAdvent Calendarで連載書いてます

いよいよ本番=firefoxの最新安定版にWebVRの機能が搭載されている
来年はVRデバイスの製品版がぞくぞくリリースされます!

Oculus RiftでみるにはOculus Runtimeをインストールする必要があるので注意
ポジショントラッキングも可能
スマホVRの動作は意外と軽快
1ソースでOculus RiftにもスマホVRにも対応可能
---
以上です。

この記事へのコメント


この記事へのトラックバック