Tensor flowとCloudMLとか、Reactive、ＲｘＪａｖａとかＣＳＳとか、すごい動画とか・・

１０月９日、DevFest Tokyo 2016に行ってきた
その内容をメモメモ

---

■あいさつ
　　Google　鈴木さん
　　東京電機大学の岩井先生
　　　ワールドトレードセンターとか作ってくれた人
　　　東京電機大学、拡大中！採用とか共同研究とか
　　

・Devfestってなに？
　GDGコミュニティで世界各地でほら枯れるデベロッパー向けイベント
　世界各地で技術者のお祭り
　　→他の国でもやっている　東京は今日、関西は１１月
　コミュニティのお祭り：コミュニティが主催

■コミュニティ紹介
・日本androidの会　目的：注目度をあげる→いや、もうあがってる（＾＾；）
　　１１月１９日（土）　ABCやるよ！
・Shibuya.apk　Androidアプリ開発者のためのコミュニティ
　　１１月２２日（火）　GMO Yours connpassで募集。キャンセルも多い
　　１６：２５～セッション（ライブラリ対談２０１６）
・DroidKaigi ひつじさん　年次会議
　　DroidKaigi 2017 セッション公募
　　マサカリ飛んで来るところではないので、ぜひ
・GCP
　　GCPUG
・TensorFlowユーザーグループ：１０月８日発足！
　　登録すると、２回目から連絡来る
・Webコミュニティ
　　html5j
　　　部活動も盛ん
・codelabs紹介
　　GTUG Girls：初心者向けハンズオン
　　　unity,
・アンカンファレンス
　ってなに？
　　みんなでつくるカンファレンス
　　話したいことを話す
　　このあと、セッションを決めるセッションを話す
・Firebaseコミュニティ
　　ないんです。興味ある人は、こえかけてね！

・お願い
　アンカンファレンスとなごみえりあだけ
　アンケートに協力してね！
　写真係が写真取る
　コミニティに入りたかったら、スタッフTシャツ着てる人へ！
　コンパスのページ見てね！
　まよったら、ハッシュタグ#DevFest16でつぶやけ

---

■Modern CSS:architecture,future specs and build flow
・自己紹介
・会社紹介
　　Qiita,Team
・１９９４年１０月１０日
　　CSSが生まれた日（提唱した日、１９９６年ごろ実装）
　　CSSは５００年後もよめるはず
・最近のCSS：ふえた（まともにつかえないものも）
・CSSで表現できた事は増えたが変わらないこと→こわれる
・CSSの問題点
　CSSの基本についてのおさらい
　　カスケーディング：より下の要素が有効
　　値が継承されるプロパティ
　　セレクタの詳細度　#id＞.class,[attr]＞Element
　　リファレンスを見ながらかける→すぐに破綻

・問題点
　　簡単＝構文が貧弱：抽象化・構造化できない・グローバル
　　ルールセット
　　社会的側面：CSSなめられすぎ
　　　プログラマに敬遠、デザイナーに雑、片手間
　　CSSはただのWebでざいんでなく
　　　　CSSもソフトウェアの一部

・設計手法
　１．よいCSSコードを書く
　２．既存の手法
　３．本質

１．よいCSSコード
・読んで最短
・第三者が読んだとき１人が書いたように
・メンテナンス

・コーディング規約
　Google HTML/CSS スタイルガイド
　idiomatic CSS
　CodeGuide by @mdo
　CSS　Guidelines(ハリーロバーツ）

・不吉なにおい「Code smiles in CSS]　ハリーロバーツより
　スタイルの取り消し：スタイル適用が早い、スタイルは付け足すほうがよい
　ハードコーディング：％　CSSカスタムプロパティーズ

２．既存のCSS設計手法
　OOCSS
　BEM
　ITCSS

・OOCSS：ニコールさりばん
　２つの原則
　　　構造と見た目の分離
　　　　　構造：display,float,width,margin
　　　　　見た目：background-color,font-weight・・・
　　　コンテンツとコンテナの分離
　　　　　CSSのセレクタはHTMLの構造に依存すべきでない
　れ具を組み立てるようにCSS

・BEM：Block element modifier：Yandex
　ページを構成する要素の分割と、その要素の名前を決めるための指針
　　　Block
　　　Element
　　　Modifier
　めいめい規則：MindBEMding はりーろばーつ

・ITCSS いんばーてぃっど・とらいあんぐる・CSS（いっくす）
　詳細度を上手く管理し、ルールセットの影響範囲を狭くする
　詳細度グラフの凹凸：CSSの複雑度を評価する指標　
　　　横軸：CSSファイル内のルールセットが存在する位置

　スタイルの分割
　　Settings：Sassなどの変数を使って定義
　　Tools：MixinやFunction
　　Objects：草食を含まないレイアウトのパターン
　　Compornents:装飾を含んだUI要素
　　Utilities：汎用クラス

３．CEE設計の本質（個人の感想）
　どうしたら壊れないか→デザイン理解
　「デザインの意図」がわかれば、自然とセレクタ名が決まる
　意図を理解すると破綻しにくい
　デザイン理解とスタイルの分割

　ECSSIST
　　「CSSの設計手法なんて色々歩けど、自分自身の考え方

CSSの新しい使用

・Flexible Box Layout
　柔軟なレイアウト：モダンなブラウザでは使える
　Flexboxのモデルの理解が重要
　　Flexコンテナのプロパティ
　　Flexアイテムのプロパティ
　覚えるこつ：モデルを理解する
　注意：Flexboxのバグ（特にIE,Safari）
・CSS カスタムプロパティーズ for カスケーディングバリアブル
　IEとEdge以外は使える→Edgeははじめた
　--ではじめる任意のプロパティを作れる
　注意：カスケーディングの対象、var()の実行

・tabatkins/specs
　Nesting,will-changeなど

でもまだまだつかえないんでしょ
　つかえますPostCSSを使えば

CSSモダンビルドフロー
・プリプロセッサの利用が当たり前
　　SassLessStylus
　→PostCSSでできるよ！
　Node.js製CSSパーザー
　CSSパーサーとAPIを提、すべてプラグインが担当
　プリプロセッサーとしてのPostCSS
　　言語拡張用プラグイン：cssnext
　メリット
　　　必要な機能、カスタマイズ容易、パフォーマンス

その他のCSSプラグイン
　autoprefixer
　　Can I Useのデータを参照
　　Cssnano
　　stylelint　csslint
　　stylefmt

　PostCSS.parts

---

■初心者のためのRxJava
・Androidアプリ開発
　(ReactiveExtention)のJava実装
　Reactive Programmingとは
　定義あいまい：環境からリアクティブ
　データフローを定義して、

・従来のプログラミング
　　トランスフォーメーション
　　　A=2;
　　　B=3；
　　　C=(A+1)x(B-1)

　　リアクティブ
　　　AとBとCの関係を定義してから、値を入れる

・なぜ、Androidアプリ開発でRPが注目されるのか
　コールバックを渡す
　１画面１アクティビティ→生きているかどうかチェック
　UIスレッド
　→全部マネージするのは大変
　　データのフローを定義

・RXとは
　非同期とイベントベース
　　サブスクライブ→オブザーブ

　　さいごコンプリート

　observable：サブスクライブできる
　subscriber
　composing

　　ダブルタップ

　operatorについて

　リストなら・・
　　.filter
　　.map

　イベントリストも同じように

・RXJavaで何が出来るの
　非同期処理
　UIイベント処理
　非同期＋UIイベント処理

　flatMap

・UIイベント処理
　RxJavaを使わなくても・・・
　状態変数を持たなくていい

非同期＋UIイベント
　　非同期処理
　　カウント０になったら結果表示

メリット
・イベントや非同期処理が扱いやすい
デメリット
・直感的とは限らない。使いこなすには慣れが必要
・ワナがある（仕組みを理解していないと）

なぜ学習コストが高いのか
・オペレーターがたくさんある
・ややこしい概念

学習法
・ドキュメント
　ReactiveX/RxJava Wiki
　Introduction to Rx

・オペレーターの動きを心で理解する
　RxJSで試す
　　ES2015(BABEL)
　ラムダしき使える

・オペレーターのカテゴリを知る
　１つ以上のObservableを使いたい？・・・

・ライブラリを利用する
　たいていのものは、ライブラリにある
　どうしてもない場合はObservable.fromX()を使う
　　fromEmitter()
・楽しむ
　頭の使い方が異なる
　android-jp slackへ

RｘJavaのこれから
・RxJava　２．０　RC2
　・Reactive Streamsベース
・Reactive Streams
　Java9での標準化

参考文献
　Speakersデッキみてね
　JJUGないとセミナー

Rｘバインディングでビュー周り
ジャッジの境目：個人的には、UI＋非同期
ユニットテスト：スケジューラーが問題になる
　→フックポイント
　→２．０で改善
　テストサブスクライバー
これからRxJava:勉強なら２．０、開発の場合、まだ対応していないことも

---

■エンジニアとして知っておくと幸せになれる（かもしれない）機械学習とTensorFlowのこと
資料は公開済み：https://goo.gl/o8gBB1

・自己紹介
・TensorFlowUserGroupについて
　meet up は公開３時間で満席
　https://goo.gl/NzrHei　つくりました
・最近、機械学習とか人工知能がものすごいブームですね
・人工知能すごい！というイメージ
　　自動運転　alpha go　簡単に使えそうな雰囲気
・結果こういうながれ
　人工知能をやりたまえ
　APIあるじゃない
　APIをつかってみる
　ビジネスニーズにフィットしない
　スクラッチでやるしか
　機械学習むずい
　最近の８０％は困ってる？
・人工知能がキーワード、使えそうな案件、プレッシャー、興味
・エンジニアも機械学習っぽい話
・入門編に近い話：わかった気になる

・まずは、機械学習
　よくあるはなし
　　機械学習とか分析を勉強したい
　　データサイエンティストにきけば
　　そもそも、どうやって勉強？

・Step1
　　賢いブラックボックスとして使う
　　　→おもしろくない

・Step2
　　用途別に呼びだす手法を判断できる
　　　用途別のアルゴリズムの選択 scikit-learn algorithm cheet-sheet
　　　→私の考えているものとは違う

・Step3
　　得られた結果の判断とパラメーターのチューニング
　　デモサイトある
https://playground.tensorflow.org
　　　入力を加工する
　　　結果を見て、今のパラメータがよいかを判断
　　　赤いところを問題にあわせて、いい感じに調整する
　　　異なるアルゴリズム
　　　　→難易度上がりすぎ

・Step３以降に行くには
　数学から逃げずに、硬派な本を読む
　　機械学習理論入門
　　Python機械学習プログラミング

・深層学習
　いままで：アルゴリズムが扱えるデータフォーマット変換
　　　フィーチャーエンジニアリング
　　→ここをどれだけがんばるかが結果に大きく影響を与える
　ここは深層学習は楽
　　→でもパラメーターチューニングが難しい
　　Inception-V3
　　ImageNetという画像分類のベンチマークにGoogleが発案したモデル

・Step4以降の話しには行かずにTensorFlowのお話

・TensorFlowとは
　Googleによって2015年11月に公開されたオープンソース
　　Google内部で多数の使用実績があるらしい

・Tensorflowは深層学習に特化したツールである
　データフローグラフを利用した数値計算のためのオープンソースの
　ソフトウェアライブラリである

・入力から出力まで、グラフを意識しながら処理を記述して、
　最後にどぴゃっと実行する
　　→後発の分散処理エンジン

・TensorFlowのパラダイム
　はじめにテンソルの演算グラフを作る
　グラフの実行単位をセッションという
　定数・変数・プレースホルダーを宣言できる
　作ったグラフはデバイスに展開して実行する
　分散処理も可能である

・ここだけ押さえれば
　　１＋２＝３の足し算
　カウントアップ
　プレースホルダー：いろんな値を入力する
　　→入力を外から外挿できる
　セッション
　高ランクなテンソルの話

ここまでの話を多次元の値に拡張できる

　ランク０：すから
　らんく１：べくとる
　らんく２：ぎょうれつ
　らんく３；３次元配列
　　　：

・TensorFlowで押さえるべき基本は以上です

・深層学習について
　多層構造のニューラルネットワークを用いた機械学習である
　tensorFlow（正確には機械学習全般）で屋ry場合の深層学習

　入力　途中の演算　アルゴリズムからの出力　理想的な出力値

　　　　　　　　　　　　　　　　　　　　　　フィードバック
　　　　　　　　学習結果

・中間層が３層だと
　irisを使っている→４次元
　重み、バイアス、活性化関数を定義：４次元で１０個
　重み、バイアス、活性化関数を定義：２０個
　重み、バイアス、活性化関数を定義：さいごは３つに分けたいので３個

　学習：いい感じに収束するようにtf.Variableの値を探すこと

・TensorFlowに関する事実
　こういう評価
　Chainerよりつかいにくい・・・
　→Googleは数学わかる！

・tf.contrib.learn（旧skflow）
　グラフなどを意識
　keras　深層学習用のDSL

・なんとなく、この流れはHadoopと同じ
　生のMapReduceX→Hive

・CloudMLの話もすこし
　CloudMLでできること
　　マシンパワーがたくさん使えるので、分散処理や
　　ローカルで動かす：CloudMLも絡めたワークフロー
　　深層学習が普及していくとかなりのキラーコンテンツ

・もう一度告知

・しつもん TensorFlowのSpark対応
　

---

■WebGL事例とアニメーションのアイデア
・実務的なテクニックはあまり語られません
・事例の説明と、主観的に面白いかどうかみたいな話
・自己紹介
・プログラムを使って面白い画像を作りたい

・いろいろWebGLで作ってきました
　WebGL+three.js
　　プラグインなしでHTML5のCanvasに
　　→PC,スマホのブラウザで３Dが動く
　　　手軽
　　　ウェブに公開できる
　three.js
　　WebGLのラッパー
　　簡単さと奥深さの両立
　作ったもの
　　ネイマールのやばい技を残す
　　しんごじら：あなたもゴジラになれる
　　個人サイト
　WebGLでリアクティブなVJ
　　DMM VRシアター
　　音に反応・透明なスクリーン
　　前面スクリーンと背景スクリーン
　　マイクで入力：
　　Socket.ioで同期

・なぜつくるのか
　クリエーティブコーディング
　ジェネラティブアート
　「ジェネラティブデザイン」という本
　コードだから出来るグラフィックの美しさやたたづまい

　ジョン前田

　教え子がProcessing

　モリサワのポスター

　中村勇吾　えことのは

　プログラミングでアニメーションやグラフィックを作るのは楽しい

・面白いポイントベスト５
　面白ポイント１：データによって駆動する
　　データ化できるものをコンピューターに入れて、アニメーションを作る
　　複雑なデータをすばやくアニメーションに変換
　　例：データのビジュアライズ
　　　フライトパターン：
　面白ポイント２：乱数
　　コンピューターといえば無機的？
　　しかし乱数はとらえどころのない生き物
　　例：ランダムに動くへたくそストローク
　　　　ランダムなコラージュ
　　偶発性
　面白ポイント３：パラメータ化
　　どこまでの範囲で変数にするか
　　簡単に多くのバリエーションが作れる
　　BEYONDCODE
　　大量に出す、パリエーション
　面白ポイント４：アルゴリズム
　　手順の定式化
　　アルゴリズム・数学の直結　BOIDS

　　アルゴリズムが可視化されるとさらに面白い
　　考え方が動き出す：佐藤雅彦
　　Housefly

　　スピログラフ

　面白ポイント５：コラージュ
　　ライブラリの寄せ集め
　　組み合わせの妙
　　実写＋ジェネラティブアート

　　モザイク画＋絵文字＋動画

　　異なる文脈どうしが組みあわさることによって

　　SPEACE_TAKAMI 高見盛と宇宙の組み合わせ

　　一番よくないのがウマヘタ

WebGLは手軽だし高速VJもできる
コードで動かすアニメーションは面白い

エッジコンピューティングによる重要データの抽出がかぎとなる

１０月７日CEATEC 2016に行って

　　インダストリアルIoTの実現に必須のセンサー計測とエッジコンピューティング
　　講師：ナショナル　インスツルメントの人

を聞いてきた！ので、その内容のメモメモ
（表題は、下記メモより）

---

・会社概要
　測定器・制御用装置　GPIB
　LabView(らぼびゅー）：バーチャル計測器
　幅広い業種
　　ひっぐす粒子からマインドストームまで

・NIが提供するIoT向けエンドツーエンドソリューション
　　センサーを作っているのではない
　　計測ソフトウェア
　　FA,ロボット制御：センサー計測がキー
　　高い接続性

・The　Internet of things
　ビジネスメリットがポイント→産業向けと一般向け
　産業向け：スマートファクトリー(Industry4.0)、スマートグリッド・・
　　セキュリティの違い、バスの違い（EtherCAT,PROFIBUS)

・CPS/IoT
　黎明期からインダストリアルIoTに関与
　　２００６年
　　ビッグアナログデータ
　コンソーシアムの活動
　　IIC　６月会議
　　IIC　テストベッドプロジェクトにて活動中
・莫大なデータを処理しきれないセンサー＋クラウド
　　　センサー　→　System of Ststem → クラウド
　なぜ、クラウドで上手く取り扱えないか
　　Bigデータに３種類
　　　　・業界のデータベースに入っているデータ
　　　　・社会的データ（ソーシャル）
　　　　・センサーデータ→ビッグアナログデータ
　　ビッグアナログデータ
　　　　アナログ現象から、センサーでデジタル化したデータ
　　　平均で全データの５％しか解析されていない
　　　　例：自動車データ
　　　　　　だれがどういう条件で測定したのかわからない
　　　　　　タグ付けされていない

　　エッジコンピューティングによる重要データの抽出がかぎとなる
　　（１）莫大なデータを演算処理し、意味のある情報に変換
　　　　スペクトラム、平均値、最大・最小、タグ付け
　　（２）データ管理
　　センサー計測状態監視における昨今の課題
　　　・複数のセンサー信号の同期計測
　　　・データ表示・解析・管理
　　　・産業向けのデータサイエンティスト

　　例：予知保全
　　　　サーモグラフィー（動画）とセンサー信号の同期計測
　　　　　DIAdem AVIで時間タイミングを埋め込んでいる

　　産業向けデータサイエンティスト
　　　→一般消費者と違う知識
　　　　予知保全：こわれたことがない
　　　　　→故障モードがわからなければX
　　→現場の人とペアで取り組む
　　　　例：ベアリングの損傷診断

・事例
　エッジコンピューティング
　　インダストリアルIoT
　　　　発電所もにたりんぐ
　　　　特殊なセンサー：サーモグラフィーとオイル
　　エアバス
　　　　スマートファクトリー：ねじあなの締め付け→品質保証

　なぜNI：マイコン・PLCでは？
　　IoTを実現する上で最適なプラットフォーム
　　　→高い接続性、様々な工業用バス、計測制度
　　　　施策に向いている

　銭高組のIoTシステム
　　トンネル工事の安全管理と省エネを同時に実現
　　電力のピークカット　６６００Vの電気
　　作業員の位置：安全管理

　HPE（ひゅーれっとぱっかーどえんたーぷらいず）との協業
　　EdgeLine　IoTのために専用開発されたプラットフォーム
　　現場でデータ処理

・まとめ
　　課題：データの大半が解析されず眠っている
　　解決：エッジコンピューティング、同期計測、データ表示