「MANABIYA #2 - day2」に参加してきました

MANABIYA #2に参加してきました。

manabiya2.peatix.com

10/19-21まで3日間開催されるイベントの2日目の参加レポートです。
このイベントは以下の2つの特徴がありました。
- 全てパネルディスカッション形式
- 2つの分野のプロフェッショナルが同時に登壇しそれらを組み合わせることがテーマ
私はWebエンジニアですが普段の勉強会では深入りされないようなところまで聞けて勉強になりました。
- たとえばアプリ開発の効率化についてAIの専門家が、それくらいなら近い将来できるようになる等即答してくれたり
あとは、ディスカッション形式ということで各分野の先駆者の思いをふんだんに聞くことができたのも良かったです。

時間	タイトル
0限目 (11:20 - 11:30)	【2-0】オープニング
1限目 (11:30 - 12:10)	【2-1】Web × インフラ
2限目 (12:30 - 13:10)	【2-2】モバイル × XR
3限目 (13:30 - 14:10)	【2-3】Web × AI
4限目 (14:30 - 15:10)	【2-4】Special Session：Datadog
5限目 (15:30 - 16:10)	【2-5】XR × AI
6限目 (16:30 - 17:10)	【2-6】プログラミング × インフラ
7限目 (17:30 - 18:10)	【2-7】Special Session：ジーズアカデミーTOKYO
8限目 (18:30 - 19:10)	【2-8】Web × XR
9限目 (19:30 - 20:10)	【2-9】モバイル × AI
10限目 (20:30 - 21:10)	【2-10】プログラミング × Web
放課後 (21:30 - 21:40)	クロージング

以下ディスカッションのメモです。Web以外は素人なので正確でないところもあるかもしれません。

【2-1】Web × インフラ

登壇者

Web
- 古川陽介さん(@yosuke_furukawa)
- 森久太郎さん(@qsona)
インフラ
- 池添正隆さん
- 田中邦裕さん(@kunihirotanaka)
- 長尾俊さん(@shun_metal)

議題

レイヤーの違う人/チームはどのように連携をとるのがいいのか？各現場ではどのような工夫をしているのか？
コンウェイの法則があるが、各現場ではどのような組織構造にし、どのようなコミュニケーションフローをとっているのか？
フロント、インフラの人たちがそれぞれ歩み寄るにはどうしていくべきか？

BFF

Backends for Frontends
- フロントエンドのためのサーバ
- 誰が面倒見る？
- 組織構造にも関わってくる
docker使う
フロントエンドはビルド周りがすぐ変わる
- なんで変わってるのかちゃんと共有すれば理解し合える

https

https everywhere
Let's encrypt
- 自動で更新してくれるのがいい
広告業界はhttpsでないと配信できなくなってる
- mixed contentになる心配はない
- httpsしか対応しないというGoogoleからの圧力
ハードウェアアクセラレーターを使っていると新しいWebの仕様に対応できない
内部の通信までhttpsにするか
- そこまでできた方がセキュアではある
- でもそこまで考えられてない現場の方が多そう

フォールトトレランス

カオスエンジニアリング
- 本番のサーバをあえて落としてみる
- それでもうまくいくことを確かめる
バックアップしてるけどリストアちゃんとできるか

【2-2】モバイル × XR

登壇者

XR
- 比留間和也さん(@edo_m18)
- 西川美優さん
- 福田浩士さん(@okomesan)
- 森本俊亨さん(@ok_totti)
モバイル
- 七島偉之さん(@jollyjoester)

議題

ざっとしたVR・ARの現在の情勢おさらい
XRモバイルアプリの最前線では、どのようなアプリが出現しているのか？
スタンドアローン版も目立ってきている中で、そうでないものとどう棲み分けていくのか？
モバイルでのXRアプリ開発には、どのような技術を使うのがベストか？
HMD(ヘッドマウントディスプレイ)もコントローラーも6DoFとなるものの登場も予定されているが、それによりXRはどう変化するのか？

AR

リアルタイムに遠くにいながら落書きを共有できるサービスとか
空に絵が書けるとか
ARの方が技術詳しくない人にもわかりやすいコンテンツが多い
- ポケモンGOがARの筆頭
今は若い層が多く使われてる
ARだと思わないで使われてるのも多い
- snowとか

モバイル

インカメラのAR
アウトカメラのAR
スマホにどんなセンサーがあるか
ARKitは空間を認識するだけ
- コンテキストを理解して何を出すか考えないといけない
- そうしないと継続して使われない

ARの活用

ARが当たり前になるとあらゆる産業に影響を与える
体のあらゆるところにセンサーつけて動きをトラッキング
- それらのコントローラとしてスマホ
ARグラスいつくる
- 世界をだいぶ待たせてる
- いろんな課題
スマホ -> HMD -> ARグラス

【2-3】Web × AI

登壇者

Web
- 古川陽介さん(@yosuke_furukawa)
- 倉見洋輔さん(@quramy)
AI
- 五木田和也さん(@kazoo04)
- 廣瀬一海さん(@kazumihirose)
- 横井羽衣子さん

議題

Tensorflow.jsがあるが、なぜあまり現場で使われないのか？Tensorflow.jsは今後はどう展開されていくのか？
AIの活用で、Webプロダクトにおけるユーザー体験を向上させるようなことは何かできないのか？
AI関連のWebプロダクトを開発するときに気をつけなければならないことは？

WebパフォーマンスとAI

Webには光の速度の壁がある
- 予測して先読みでそれを超えられないか
SPAはビルドしてバンドルするのが必須
- どういうサイズでバンドルするか
タップしたら認識するんじゃなくて加速度検知して読み込みを始める
- dev.toの例
- GoogleMapは下にスクロールしてると、次も下だろって先読みする
  - そいういことを普通のWebでもできないか
ゲームとかの方が進んでる

AIを活用したプログラミングの効率化

マイクロソフトのAI lab
- ここにいろいろある

www.ailab.microsoft.com

手書きの画面をHTML化

sketch2code.azurewebsites.net

github.com

github上のコードを学習し悪い書き方を指摘したりコード補完したり
- VisualStudioのプラグインある

visualstudio.microsoft.com

www.publickey1.jp

被写体選択
- 背景を切り取る
- Adobeの人工知能「Adobe Sensei」
  - 裏側はAzureのAI

stand-4u.com

職員室(本編の後の個別ディスカッション)

いろはす問題
- 特徴がなさすぎていろはすを判別するのが難しい
- 独自でボトルの形状とかを考えてモデルを作ったらうまくいっている
  - 特徴点が少ないものは自分でモデル作ったほうがいい
モバイルでAIを動かす
- デモであったMSのサービスだとTensorflowでエクスポートできる
  - Tensorflow.js使えばすぐに動かせる
- サイズの大きさが課題
- 圧縮したら数十MBとか数百KBまで減らすことはできる
  - ただし精度がさがってしまう
- 5Gが来たら重いものはサーバ側に戻る時代も来るかも
AIが判断する根拠をどうやって説明するのか
- 自分がバナナをバナナと判断するロジックを説明できるかというとできない
  - 人間の脳がベースだからそれと同じ
- モデルのバースとなっているのは世の中にあるデータ
  - AIの判断が性差別とかするのは世の中のデータを映している

【2-6】プログラミング × インフラ

登壇者

プログラミング
- 清水智公さん(@chikoski)
インフラ
- 田中邦裕さん(@kunihirotanaka)
- 仲山昌宏さん(@nekoruri)
- 松本亮介さん(@matsumotory)

議題

IaC(Infra as Code)という言葉がよく出てくる「DevOps」や「SRE」とは、それぞれ一旦何なのか？どう違うのか？
SRE / DevOpsは現場では実際どのように行われているのか？ハマりポイントはあるのか？
IaCについて
    設定とコードは何が違うのか？
    作ったコードの正しさはどう担保するのか？
    インフラのデバッグはどのようにやるのか？
    コードの再利用は効くのか？
    アセットストアのようなソリューションストアが将来できると思うか？できた時にインフラエンジニアは存在しうるのか？

IaC

infrastructure as Code
インフラの設定をコード化する

DevOps

AWS等が出てダイナミックにインフラを作れるようになった
- どう管理するかが課題になった
- コードで書いた
  - どうテストするか？
  - 開発のプロセスと一緒だね
  - DevもOpsも同じ考え方でできる

SRE

Googleが提唱
DevOpsの中の一つのアプローチ

開発スキルと運用スキル

ある程度までは広く知っておくべき
車の運転のしかた一通り知ってないと免許持てない
- エンジンの解体はできなくてもいい
全員に無理やりプログラミングさせるのもよくない
- プログラミングで改善したいと思ってる人ができるように

IaCの信頼性

コードで書くと信頼性の不安になる要素を増やすことになる
クラウド使うならクラウドベンダーが担保してくれてる

【2-7】Special Session：ジーズアカデミーTOKYO

山崎大助さん
ジーズアカデミー主席講師
デジタルハリウッド大学員准教授

テーマ

Output learning

G's ACADEMYの紹介

youtu.be

G's ACADEMYの学び

記憶力
判断力
独創力
- 想像力(Imagination)
- 創造力(Creative)
- ここが重要
いろんな課題が週に2回
- みんな課題よりもっとすごいのを作ってくる

プログラミング学習のポイント

とにかくコード書く
- 理解 < 体験
作りたいものを作る
- 考える < 行動
スポーツで例えると
- 最初は試合して楽しむこと
- 試合で困ったことがあれば練習で補う
- 試合・・・コードを書き作ること
- 練習・・・基礎知識を調べる
学習のスパイラル
- まず試すDEMO作る(学習)
- 実際に動かしてみる(検証)
- 足りない部分に気づく(分析・新しい学習)

【2-8】Web × XR

登壇者

XR
- 比留間和也さん(@edo_m18)
- 古林克臣さん(@korinVR)
- 杉本雅広さん(@h_doxas)
Web
- 古川陽介さん(@yosuke_furukawa)

議題

WebとXRをかけあわせることで、どんな良いことがあるのか？
WebXRはどうやって作っているのか？
WebVR/AR、どんな実例が生まれてるのか？
WebVR/ARの課題はどのようなもの？
WebエンジニアがWebVR/ARエンジニアになることはできるのか？

WebとXR

WebGL × XR

WebXRどうやって作る

WebVR API
- HMDとブラウザをバイパスるもの
- 傾きをブラウザへ伝えたいとか
- 表示する内容があってそれをどこに出すかの制御
WebXR
- もっと広い
60fps出さないとダメなの？
- 60じゃ足りない
ダウンロードにかかる時間
- ローディングが長くなる
- 見られる前に閉じられちゃわないか
- webpackaging活用できないか
  - 一部をp2pで一部をダウンロードしてマージするとかできたら高速化できそう
  - -> 現状ではまだそこまで仕様は進んでない
- ServiceWorkerでできるだけキャッシュしておくとか
safariでUSDZと入れるとVRが体験できる

#MANABIYA usdzすごい！！ pic.twitter.com/WzYlJzVSnz
— Yosuke FURUKAWA (@yosuke_furukawa) 2018年10月20日

WebエンジニアがWebVR／ARエンジニアになれるか

難しい
3Dがまず難しい
Unity使うと容易にできる

WebVR/ARの未来

インストールなしで使えるのがいい
ハイパーリンクの機能
- VRコンテンツに対してリンカブルなのがいい
- VR空間を閉じずに維持したままリンクで移動できる
- VR in ARとかできたりしないか

【2-9】モバイル × AI

登壇者

モバイル
- 七島偉之さん(@jollyjoester)
AI
- 我妻幸長さん(@yuky_az)
- 五木田和也さん(@kazoo04)
- 小西祐介さん
- 染谷悠一郎さん

議題

端末側に機械学習を組み込むことはできるのか？
モバイルへのAI活用実例
研究レベルの最先端ではどのようなことが考えられているのか？
今後、モバイルにおいて、AI/機械学習をどのように活かしていくべきか？

モバイルとAI

モバイルに入れる場合モデルサイズの問題がある
大きなファイルの配信は避けたい
重い処理はクラウドでやってくのが技術的にも普通
ニューラルネットワークの蒸留というテクニック
- 圧縮みたいなもの
- 精度が上がることもある(謎)

どこで処理をする

基本はモデルはクラウドにある
- 学習したり計算したりは重い
モバイル端末の計算能力上がってきてる
- エッジデバイス上で完結させたいというニーズもある
- リアルタイム性が求められる場面
エッジデバイス上でやるならモデルをダウンロードしないといけない
端末上でも学習できたら面白い
- 既存のモデルに微調整
- 個人にカスタマイズ
端末上でやるとバッテリー消費激しいという課題もある
ケースバイケースで使い分けないといけない
端末側で処理するとモデルの中身が見られちゃうというリスク

プライバシーについて

画像の判定をするには画像をサーバにあげないといけない
- ユーザは勝手にクラウドに上げられるのは怖い
- 運用者も画像を持つのはリスク
端末側で完結すればアップロードの必要がなくなる
画像から抽出できる特徴量の状態にしてサーバに送る

多数のデバイスで分散して学習

Webページ開いてる間裏でマイニングしてた件みたいに、裏で機械学習させるとかはないか
課金したら広告消すみたいな感じで裏での機械学習を許可したら広告消すとか
分散して学習をさせるメリットがどれだけあるか

【2-10】プログラミング × Web

登壇者

プログラミング
- 清水智公さん(@chikoski)
- Linda_ppさん(@Linda_pp)
Web
- 古川陽介さん(@yosuke_furukawa)
- 川口和也さん(@kazu_pon)

議題

WASMの近況はどうなっている？
WASMの利用例について知りたい！
    vim.wasmの話
        移植してみての苦労話
        追加したコードと、消したコードについて
    Vue + WASMの話
        フレームワークでの利用例
        WASMをフレームワークに組み込む理由
WASMのこれからはについて教えてください！
    Webアプリに計算スピードは必要？
    使えるとしたらどこなのか？
    開発には組み込まれていく？
    どう組み込むといいのか？

WebAssemblyとは

ブラウザで動かすにはJSじゃないとダメだった
WebAssembly形式もブラウザは処理できる
- メジャーなブラウザなら使える
- node上でも動く
特徴
- バイナリ
- コンパイルして作る
- いろんな言語から作ることができる
  - RustとかGoとかKotlinとか
- コンパイルしてるので速い
- Cの資産を使える
- 足し算掛け算とかの単純なことしかできない