「2018年9月定例会「ABC直前スペシャル PPP」」に参加してきました

  • 2018年9月定例会「ABC直前スペシャル PPP」に参加してきました

japan-android-group.connpass.com

  • 来月のABCに向けた直前イベントということで参加しました。AndroidエンジニアではありませんがPWAが気になるところです！

ABC 2018 Autumn in Kawasaki

  • 杉山 由朗さん@ABC 2018 Autumn in Kawasaki 実行委員長

ABC 2018 Autumn

abc.android-group.jp

  • 10/13(土)に開催
  • 今回はハンズオン多め
    • PWA, XR, etc
  • 場所は川崎振興会館
    • 川崎駅から雨でも濡れない

1つ目の「P」：Android Pieの新機能紹介 最適化されていくユーザー体験

  • 杉本 哲さん@日本Androidの会 運営委員

Project Treble

  • 早い段階でPieが利用できるようになる
    • ベンダー実装とOSシステム部分を切り離すことで実現
    • 同一のベンダー実装で新しいバージョンに上げられる

AI

  • AIによるサジェスチョン

Adjust Less

  • 様々なシーン(場所・時間・明るさ)で明るさを自動調整

Scroll Less

  • Digital Wellbeing: デジタル幸福
  • アプリの利用状況を分解しダッシュボードで表示
  • アプリの時間制限を設定できる

Charge Less

  • 頻繁に使うアプリを監視し使ってないアプリを抑制
    • バッテリーの持ちがよくなる
    • 通知はちょっと遅くなる

Tap Less

  • Slices
  • App Actions
  • タブ切り替えたりしなくてもすぐに実行できるようになる

New Navigation

  • iosのような感じ
    • 適用するかは設定で切り替えられる

Slices

developer.android.com

  • UIのテンプレートがある程度用意されてる
  • AndroidStudio3.2以降から使えるようになる
  • サンプルは公式から辿れるgithubにいろいろある

2つ目の「P」：Challenge PWA!! Web の舞台はホーム画面へ進撃する !

PWAおさらい

  • ざっくり言うとWebアプリがローカルアプリになる！
  • ServiceWorker + CacheAPI
  • アプリに向いたものとWebに向いたものの中間を埋めるものになるのでは

モバイルにおけるWebの存在

  • 入り口は検索かSNSが多いのでは
  • PWAによってWebの幅が広がるのでは

WordPressをPWAに

  • SPAじゃない
  • サーバサイドで埋め込まれたデータ

悩みどころ

  • 急がないけど更新を反映したい
  • 即時に反映したい
  • どこをどうキャッシュするか

キャッシュの更新タイミング

  • swはオンライン時に動悸し次回起動で更新されたものが動作
  • Cacheは明示的に更新するかActivate時に削除が一般的

キャッシュの目的

  • 高速化
  • ネットワーク節約
  • オフライン

キャッシュ戦略

  • Cache first
  • Network first
  • No Cache
    • オフラインページだけキャッシュ

PWA4WP

wordpress.org

  • いけてるところ
    • キャッシュの有効期限が設定できる
    • キャッシュの除外が柔軟に指定できる
  • 使い方
    • プラグインとして追加
    • アイコンとかmanifestの内容をGUIから指定できる
      • Cache戦略も選べる
      • フルスクリーンにするならiPhoneで戻れなくならないように注意
  • ソース

github.com

まとめ

  • キャッシュの制御がとても大事
  • いきなり完成形は難しいのでProgressiveに

3つ目の「P」：登壇者の皆様と参加者の皆様でディスカッション

Pixel3

Pixelに期待してること

  • 技適が通ること
  • ロックダウンモード
  • ノッチどうなるの
  • でかい画面もいいかも

「UIT#4 Web in App ネイティブアプリケーションのように振る舞うウェブ」に参加してきました

  • UIT#4に参加してきました。

uit.connpass.com

  • 裏番組(これとかこれ)も気になりましたが、自分的にPWAが最近ホットなのでこちらのイベントに参加してみました。
タイトル 発表者
社内向けサービスを@nuxtjs/pwaでお手軽にdesktop PWA化したら結構よかった話 @kawasako
RNとreactの共有ロジックをmonorepoでつくる @yamatatsu
ページ遷移Animation & Skeleton screenをWebViewアプリに実装した体験談 @shoyo.kyo
デザインと仕様に負けないWeb in Appの作り方 @Jun
  • 以下メモ書きです。

社内向けサービスを@nuxtjs/pwaでお手軽にdesktop PWA化したら結構よかった話

  • @kawasakoさん(LINE)

Desktop PWA

  • Chrome67から使えるようになった
    • chrome://flags/でflagをonにすると使える
  • twitterとかqiitaとかが対応してる
  • 独立したWindowがアドレスバーなしで立ち上がる！

社内アプリ

アーキテクチャ

  • @nuxtjs/pwa
  • workboxも使ってる
    • workboxに渡したswのコードを見るにはnpm run buildしないと反映されない...
      • devではworkboxのswではなく別のを使うようにした
  • web pushも入れてる
    • WebSocket経由で通知をswに渡す

まとめ

  • 一般向けにはまだ厳しそう
    • 社内向けなら試せるからいいかも
  • PWAの定義は曖昧だけど今回作った程度のDesktopPWAならお手軽

RNとreactの共有ロジックをmonorepoでつくる

  • @yamatatsuさん(CureApp)

monorepo

ページ遷移Animation & Skeleton screenをWebViewアプリに実装した体験談

  • @shoyo.kyoさん(LINE)

LINEのフロントエンド

  • WebViewもけっこう使ってる
  • LINEポイント
    • VueでSkelton screenに作り変えた

LINEポイント

  • 生誕5周年
  • WebViewでできてる
  • 積極的にリファクタしてる
  • スパイクアクセスあり
  • 小規模SPAの集合

Skeleton screenを使ったきっかけ

  • SPA化の要望あり
    • +αもほしい
    • LINE漫画でスムーズなページ遷移
      • Skeleton screen + React
      • これをやることに -> 体感速度向上施策

Skeleton screenを入れた効果

実装

  • 美しさ重視で
  • コンテンツが出るエリアをグレーのエリアで最初出す
    • データの内容によっては行数が変わったりしてがたっとなってしまう
    • がたっとなるとこもアニメーションで

課題

  • GPU, CPU使いすぎ
  • ページ切り替えた瞬間に使用率上がる

デザインと仕様に負けないWeb in Appの作り方

  • @Junさん(LINE)

デザインと仕様に負けないエンジニア

  • デザインと仕様に負ける
    • このデザインは作りたくないな
    • この仕様通りに作りたくないな
  • 辛いとは
    • 人ができないことをしなきゃいけない時苦しむ
    • プログラマが頑張っても同しようもない領域
      • ブラウザ/OSの制約

Web in App

  • Webの辛さとAppの辛さ両方味わえる
  • App的なデザインや仕様 + Webの制約

負けない方法

  • 戦わなければ負けない
  • デザインと仕様の段階でWebと合わないと切る
    • 代替は提案できないとだめ

まとめ

  • 開発者が苦しむといいプロダクトはできない
    • チームの皆がハッピーになれないと良いものはできない
  • 快適な開発が快適なUXにつながる

「CTO meet up〜JavaScript（Angular,React,Vue）〜」に参加してきました

  • CTO meet up〜JavaScript（Angular,React,Vue）〜に参加してきました

flexy.connpass.com

  • 以下パネルディスカッションのメモです

JavaScript（Angular,React,Vue）進化しつづける技術について

どうやって技術選定してる?

林さん

  • 最近はAngularとReact使った
  • Angularは管理画面
    • CRUDが多いから
    • ライブラリ選定する時間もなかったから
  • Reactはvmeets
    • WebRTCとのやりとりやりやすいから
  • 3rdパーティのライブラリの量が一つの指針
    • 以下に早く作るかを重視してるから
  • ReactでもTS使ってる
    • Redux使ってるとTSの恩恵大きい
    • ビルドで気付ける
  • 3rdパーティで型定義ちゃんとしてないやつはanyにしちゃう
    • そのうち切り離したいようなものだから
  • AngularのVUPに合わせてライブラリVUP

古川さん

  • 3年前に技術選定してReactを選択
    • 主流になってきていた
    • Reduxも採用
    • たまたまうまくいったからそのまま継続している
  • ある程度の規模を想定して一度作ってしまう
    • ホットペッパー相当のものを作った
    • 当時はReact一択だったから他は試してない
  • 世の中で使われてるかどうかは見る
  • Flow使ってる
    • 80%くらい嬉しいけど20%くらいつらい
    • 3rdパーティのライブラリで型定義されてないとか
      • 3rdパーティのライブラリの型定義が間違ってると最悪
    • 開発体験としてあんまりうれしくない
    • 3rdパーティこそ型ちゃんとしててほしい信頼ならないから
  • greenkeeper使ってる
  • 改善day設けてそこでライブラリアップデートしてる
    • バージョン追従できてるのとできてないのもある

菅原さん

  • 2年前入社時はBackboneだった
  • 1ヶ月でios/android
    • ReactNativeで高速に
    • mobXを採用(Vuexに似てたから)
  • エディタの対応書き心地の良さ
  • 3rdパーティライブラリで悩まされるの嫌だから自前でやってしまう

今の技術の課題・解決方法

林さん

古川さん

  • エコシステムのライフサイクルが短すぎる(特にReact周り)
    • ついていけないとReactやめていっちゃうんじゃないか
  • 従来の技術でなくSPAを作ってるのはパフォーマンスがモチベーションにあるから
    • だからパフォーマンスが悪いSPAだと本末転倒なんじゃないか

菅原さん

  • チャートとか作ろうとすると仮想DOMが邪魔になってしまうこともある
    • それをガリガリやってくれるエンジニアも貴重
  • コンポーネント単位の差分レンダリングmobXだとできるけど追いかけるのつらい

これからのフロントエンドのトレンド・動向を教えて

林さん

  • WebComponents
    • WebComponentsでCSSのスコープができることがいい
      • 今も実現できてる
      • それを使ってビジネスにプラスになるか？薄い
  • WebRTC
    • 最近使えるレベルになってきた
    • SPAでもリアルタイム通信が当たり前になってくるんじゃないか

古川さん

  • WebComponentsに夢を見る？
    • 見ない
    • パフォーマンス速くなると思えない
    • パフォーマンス悪いと本末転倒
    • チューニングしなくてもそこそこ速いのはできるようになるかも
  • PWAは？
    • オフラインで嬉しいアプリだったりそうでないアプリだったり
    • ホットペッパーは予約できるか見ないと意味ない
    • ServiceWorker使うという意味では必要
  • 投機的先読み
    • guess.js
    • ga使って先読み

菅原さん

今、現場に最もほしいフロントエンドエンジニアとは？

林さん

  • 技術+αで何か持ってる人
    • 技術+技術ではなくビジネス的要素とか
  • フロントエンドエンジニアになりたい人に向けて
    • 作って人に見てもらうことが経験値になる
      • 徹底的に悩むこと
  • デザインとJS両方やらせるか？
    • マネジメント視点では適材適所
    • 1エンジニア視点だと知れるものは吸収した方がいい
    • JSエンジニアでも最低限のデザインは知っておくべき
  • フロントエンドエンジニアのキャリアパス
    • 技術以外も含めて＋１が求められる
    • nativeとweb両方できるとコンスタントに生きていける

古川さん

  • フレームワークの奥で何やってるか調べられる人
  • フロントエンドエンジニアになりたい人に向けて
    • 自分の中ではこうしたいのにうまくいかず悩む時間を経験することが重要
  • デザインとJS両方やらせるか？
    • どちらかが得意であってもいいが無関心であってはいけない
    • 垣根がないものとしてできないといけない
  • フロントエンドエンジニアのキャリアパス

菅原さん

  • フレームワークに関係なく能力の高いエンジニア
    • インタラクションを作るエンジニアが希少
  • フロントエンドエンジニアになりたい人に向けて
    • まずデザインからで目線づくり
  • プロトタイプバトル
    • 話し合ってもおさまらないから作ったもので決着をつける
  • デザインとJS両方やらせるか？
    • 本人の志向次第
    • figmaでみんなでデザインの認識合わせ
  • フロントエンドエンジニアのキャリアパス
    • ユーザがすごいと思えるものを提供できてれば勝ちがある

「DevFest 2018 Tokyo」に参加してきました

  • DevFest 2018 Tokyoに参加してきました。

tokyo2018.gdgjapan.org

  • 昨年に続き参加しました。Firebaseは変わらず、加えてFlutterも流行ってるなという印象でした。いろいろな分野の話を聞けてとても勉強になりました。
  • タイムテーブルと公開されてる資料一覧です。
Room A+B(大) Room C+D(大) Room G+H(大) Room I (小) Room J (中) Room K (中)
実践！！Web パフォーマンス改善！
宇都宮 佑亮		 Game Development for Firebase Unity SDK
gremito		 Quick Start GCP
山内 沙織		 Android OSは安全なのか？
タニグチガク		 Flutterアニメーションの実装方法
konifar		 Kubeflowで何ができて何ができないのか?
上田 隼也
Googleアシスタント最新動向
田中 洋一郎		 Flutter Overview
Rui Kowase		 PWAのイマ
takanorip		 Firestore Database Design
1amageek		 Advanced Room
荒木 佑一		 GCP Compute 概要と選定
vvakame
AndroidX時代のHello world
深見浩和 / fkm		 Google AIY Vision kitで遊ぼう　～麻雀牌のリアルタイム識別～
Rio Kurihara		 Firebase Overview for native application
Daiki Matsudate		 GCP のデータベース・ストレージ
apstndb		 Goでネットワークプログラミングするためのよもやま話
竹澤 友博		 FlutterPluginの作り方
kuwapp
Angularの最新情報
laco		 DialogflowとCloud Functions で作る Google アシスタント アクション
flatfisher		 Cloud Kata
sinmetal		 KotlinでFlutterを書けないか色々試してみた
菊池 紘		 Flutterとの1年
najeira		 Growing your app with Firebase
shihochan
TensorFlow Liteで機械学習Androidアプリを超簡単に作る
古川新		 Container
Kuma Arakawa		 新しいMaterial Design と MDC
namiki
joi
yanzm		 Introduction of Polymer 3.0
kazuyoshi kawakami		 Realtime Database for high traffic production application
sota1235		 Generative Modeling in the Wild
Rishabh Gupta
Goらしいコードを業務でも書くために
tom		 TypeScript導入で得られる「変えていく勇気」
okunokentaro		 Transactions APIを使って飲食店の予約が出来るGoogle Assistantアクションが出来るまで
小林 大介		 AndroidThings で CO2 を計測し、警告&サーバーに計測値を投げるシステム
小林 慧		 GCPでつくるデータ処理パイプライン
永井 洋一		 "Fan out" to create twitter like timeline with Cloud Firestore and Cloud Functions
タイラー
Androidパネルディスカッション: AAC実践導入について
magie_pooh
teshi04
shaunkawano
飯島彩輝
松山 純也		 Firebase Realtime Database in Production
青野 健利(ブルーノ)		 機械学習、どこから手をつける？
上総 虎智		 非中央集権ウェブ
aggre		 Auto ML Overview
永井 洋一		 GtugGirlsがヤバいんです
長尾ユリコ
  • 以下聴講したセッションのメモ書きです。

実践！！Web パフォーマンス改善！

  • 宇都宮 佑亮さん(Google)
  • 資料非公開(要点をツイートして頂いていたのでそれを載せておきます)

パフォーマンスを計測する

  • パフォーマンスの計測はLighthouseを使うと良い
    • ChromeのDevtoolから
    • Chromeの拡張もある
    • npmのモジュールもある
  • Chrome68からv3になった
    • 処理速度上がった
    • 解析結果の内容も変わった

サンプルサイトを最適化

  • なるべく軽く同じものは送らない
    • text compress
    • css minify
  • css/jsのカバレッジ
    • devtoolで確認できる
    • 読み込んでるのに使われてないコードは意外と多い
    • bundleしたファイルの内容をorganizationで確認
    • code splitting
    • dynamic import
  • 画像の扱い
    • いろいろツールはある
    • lazy loadする
    • カルーセルはlazy loadしないと重くなるので注意
    • 初期表示に不要な画像は送らない
  • Webフォント
    • 後から読み込まれると適用前のフォントで最初出てしまう
    • <link rel="preload">を使うと良い
  • スクリプトのブロッキング
    • defer
      • 非同期にダウンロードして読み込んだ順に実行
    • async
      • 非同期にダウンロードしてダウンロードした順に実行

参考

Flutter Overview

  • Rui Kowaseさん(メルカリ)

Flutterとは

特徴

開発フロー

setup

  • flutter doctorコマンドで環境が整ってるか確認できる

dev

build/release

CD

  • fastlaneをサポート

Google I/O 2018のセッション

  • Flutter × MaterialDesign
  • Flutter × Firebase
  • Reactive Framework

Flutterの今

  • githubのスター数
    • beta1(2018/3)発表で増えた
    • Google I/O後もまた増えた

Firebase Overview for native application

  • Daiki Matsudateさん(FOLIO)

Firebaseのサービス

  • 20くらいある
  • 3つに分類される
    • build your app
    • improve app quality
    • grow your business

とりあえず入れたいFirebase

Firebase Crashlytics

  • クラッシュ解析ツール
  • クラッシュログ収集解析する

Firebase Paformance

  • パフォーマンスを計測してくれる
  • 滞在時間
  • 描画時間

Google Analytics for Firebase

  • モバイル向けにはFirebase使う

App Index

  • Googleの検索結果にアプリを表示する
  • ダウンロードボタンも出せる

Firebase Prediction

  • GA入れてること前提
  • 7日間のデータから次の行動を予測
    • デフォルトは4つの属性が取れる
      • 離脱しそう
      • 離脱しなさそう
      • 課金しそう
      • 課金しなさそう
  • 離脱しそうなユーザにだけ特定のキャンペーンとか
  • A/B Testingでの対象を離脱しそうな人だけにするとか
  • プッシュ通知を送る対象に指定とか
  • In-App messaging

Firestore

Firebase Realtime Database

  • NoSQL cloud db
    • リレーションは持たせず階層は浅くする
    • クライアント側でjoinしないといけない
  • json
  • offline

Firebase Firestore

  • リレーションがある
    • 参照をセットできる
  • クエリが使える

Firebase Cloud Function

  • Firebaseの更新ややhttpリクエストをトリガーに処理を実行する

Angularの最新情報

  • lacoさん

フロントエンド周り

  • 選定しないと行けないものが多い
  • Angularはこれを解決する

Angularで開発

雛形生成/起動

  • AngularCLIで簡単に雛形作成
  • ng serveで起動
    • ホットリロードも

コンポーネント

テストファイルも作られる

  • ng testで実行できる
    • セットアップ不要

MaterialDesign

  • ng add @angukar/material
    • ライブラリがインストールされる
  • MaterialDesignのコンポーネント用意されてるから使うの簡単

build

  • ng buildでバンドルされる
    • サーバに配置したらデプロイ完了
    • Webpackの設定なんかは不要！

周辺ライブラリ

  • Stackblitz
  • AngularPWA
    • 簡単にPWA対応
  • Ionic
    • WebViewベース
  • NativeScript
    • ネイティブを叩く
  • Angular Universal
    • node上でAngularが動く

今後

  • ivy
    • Smaller/Faster/Simper
  • Angular Console
    • AngularCLIのGUI版
  • Angular for Designers
    • コードを書かずにGUIでアプリを作る

Introduction of Polymer 3.0

  • kazuyoshi kawakamiさん

Polymer Project

  • GoogleのChromeチーム内のプロジェクト
  • driving the web platform forward
  • Web標準を勧めたりライブラリ開発を行う
  • その成果物の一つがPolymer

WebComponents

  • Google I/O 2012で初めて取り上げられた
  • CustomElements
  • ShadowDOM
  • HTML Imports

現在のWebComponents

  • polyfill入れればすべてのブラウザで使える
  • エコシステム
    • WebComponents版のnpm

webcomponents.org - Discuss & share web components

  • 共存できるFW

custom-elements-everywhere.com

Polymerってきもい

  • Polyfillでしょ？
    • 当初はWebComponentsのPolyfill
    • 2.0からはPolyfillを切り離してWebComponentsを作るためのFW
  • bower
    • 今はnpmでも使える
  • HTML Imports
    • HTML Improtsは中止に

Polymer3.0

  • Google I/O 2018で発表
  • Bower -> npm
  • HTML Imports -> ES Modules
  • 3.0できもかった部分が解決された
  • WebComponentsのメインストリームとしてのPolymerが完成

事例紹介

  • 聴き鳥テスト

kikitoritest.jpn.panasonic.com

  • JSFW使ってない
    • Polymer2.0
    • WebComponents
    • Redux
      • WebComponentsでRedux使えるライブラリがある?
    • Web Audio
    • PWA
      • オフライン対応

作ってみて

  • WebComponentsだけでもアプリ作成可能
  • ルーティング周りで苦労
  • JSFW + WebComponentsはあり

TypeScript導入で得られる「変えていく勇気」

  • okunokentaroさん(クレスウェア)

TS採用する理由

昔のTS知ってる人の誤解

  • 型定義ファイルの管理が面倒
    • 今は違う
    • npmで管理できる
    • npm i -D @types/react
  • 途中から導入できない
    • 混ぜて運用できる
    • ただしjs部分は一番ゆるいany型になる
    • .jsならスルー/.tsなら型チェック
  • unknown型
    • 3.0からの機能
    • anyではなくunknown型で

「変えていく勇気」

機械学習、どこから手をつける？

  • 上総 虎智さん(BrainPad)

機械学習で今何できる

  • 自動運転での活用
  • 目をスキャンして心疾患を予測
  • GoogleGlassでスマートファクトリー
    • 手が空かない作業で役立つ

どこから手をつける

  • 動くものをまず作ること
    • やってみないとわからないがつきまとう
    • プロトタイプの難易度は下がってる
  • 機械学習の学習実装
  • 学習済みモデルのデプロイ先
    • TensorFlow Lite
    • ML Kit for Firebase
    • AIY
    • TensorFlow.js
      • なんでブラウザ上で?
        • No device/ No install
        • Interactive
        • Sensors
        • Data stays on the client

プロダクトに仕上げるために

  • 機械学習モデルは使い続けてこそ価値がある
    • 変化を元に再学習が必要
    • 機械学習システムの継続的デプロイ
  • 機械学習モデルの公平性
    • 差別を生み出してしまわないか注意を払う必要がある
    • 再犯率を機械学習で判定

まとめ

  • 機械学習モデルを開発して動かすまでのハードルが下がった
  • 必ずしも難しい手法を使う必要はない
    • シンプルな方法が継続活用しやすい

「NuxtMeetup#4」に参加してきました

  • Nuxt Meetupに参加してきました。

nuxt-meetup.connpass.com

  • 普段はReactエンジニアですが、Vue/Nuxtも興味あるので参加してみました。SSRのつらみ等Nuxtに閉じない話も聞けて勉強になりました。
  • イベント公開から数時間で定員が埋まってしまうところから見てもNuxtは今注目されていることが実感できます。
  • ちなみに次回は10/18だそうです。
タイトル 発表者
LINEとNuxt jun
STUDIOのつくりかた @keimakai1993
で、NuxtのSSRっていつ使うの? @kotamats
Nuxtのプロダクション事例 @AkiraTameto
Nuxtを使うと初心者と上級者の実装差がない @aintek4
リクルートライフスタイルにおけるNuxt.jsの導入事例 @YuG1224

LINEとNuxt

  • junさん

speakerdeck.com

LINEとNuxt

  • LINEでNuxt使ってる
    • WebViewとかもあって意外とある

API/Auth

  • APIや認証サーバは別で作るほうが良い

API

  • host(ドメイン)をどう共有するか
    • /apiパスベースのプロキシ
    • /apiだとAPIサーバ、そうでなければNuxtサーバ
  • SSR
    • axios-module
    • Nuxtサーバ->APIサーバ

Auth

  • LINE Login
  • Authした状態でSSRしたい
    • axios-moduleでできる
  • ログインしてない時に/auth/loginとかにredirect
    • vueのコンポーネントを探しに行ってしまう
    • location.hlefでで認証に飛ばす
    • redirectじゃないので画面が出てしまう
    • login用の空のコンポーネントを用意して対応している

まとめ

  • axios-moduleがいい！

メモ

https://axios.nuxtjs.org/

https://github.com/nuxt-community/axios-module

STUDIOのつくりかた

  • @keimakai1993さん

STUDIO

studio.design

  • デザインだけでWeb制作できるツール
  • GUIベースでデザインが作れる
  • そのままWebに公開できる

STUDIOでNuxtがどう使われているか

  • デザイン編集
    • 内部的にはvue-cli叩いて作ってる
  • ライブプレビュー
    • Nuxt使ってる
    • 変更内容をFirebaseへ
    • それをプレビューに反映してる
  • パブリッシュ
    • Nuxt使ってる
    • GCPにアップ
    • SSRで動作

Nuxt/Vueで良かった点

  • サービスの成長スピードに合わせてプロダクト作れる
  • 出だしの素早さ
  • 軌道に乗ってからの作り込み

Nuxt/Vueで困ってる点

  • SSRしてるのでサーバ負荷が高い
    • Nuxt generate
  • メモリリーク
    • 長時間ページを表示し続けることが多い
    • 4分おきにk8sでNuxtのpodをローリングアップしてる

で、NuxtのSSRっていつ使うの?

  • @kotamatsさん

よくある会話

  • NuxtってSPA,SSR,generateどれ使うのがいいの？
    • generateがいいのかなー
    • SSRは使わなくていいんじゃね
  • generateはめっちゃ楽
    • nuxt generate
    • 初回レンダリング速い
    • 2ページ目以降はSPAモード
    • 動的なページも設定すればgenerateできる

(Nuxtの)SSRは癖がある

  • インフラ面
    • node環境
    • node死活監視
  • コーディング面
    • ブラウザ依存のAPI使えない
      • window``document
      • localStorage``indexedDB
  • フロントエンドエンジニアがあんまり考えたくないところ
    • インフラエンジニアも考えたくない

SSRいつ使うか

  1. CMS系のOGP対応
  2. 認証後のページの表示高速化
  3. Nuxtだけでサーバのセッションを使いたい
    • 認証情報をNuxtサーバで管理とか
  4. generateでできないことをしたい
    • middkeware使いたいとか
    • nuxtServerInit使いたいとか

まとめ

  • 静的サイトの場合はgenerateでどうにかなる
  • 会員制サイトなどはmiddleware使うことが多いのでgenerateだと厳しい
  • SSR固有の要素は代替技術もあるので選定が大事
  • SSR自体はNuxtではとても簡単

Nuxtのプロダクション事例

  • @AkiraTametoさん

どうしてNuxt

  • (Reactより)学習コストが低い
  • (Nextより)Nuxtは快適
  • コミュニティも活発

Nuxtのデメリット

  • 今のところない
  • 情報が少しすくないかなというくらい

事例

おしゃれなさいとがほしい

  • Nuxt + Netlify
  • 状態管理できるのでCSSアニメーション使いやすい

Wordpressのようなブログがほしい

  • Nuxt + Contentful + Netlify
  • Contentfulで簡単にCMS作れる
  • メール送信SendGrid使った

チャット付きのイベントアプリがほしい

  • Nuxt + Firebase + PWA
  • NuxtだとPWA簡単にできた
    • initコマンド的なのでPWA指定できる

Googleスライドのようなツールがほしい

  • Nuxt + Firebase + go + GCP
  • 作成したSVGをFirebaseに保存

快適な求人システムがほしい

  • Nuxt + go + GCP + Apollo
  • GraphQL使ってる

重いサイトをリプレイスしてほしい

まとめ

  • 基本全部Nuxtでいける！

Nuxtを使うと初心者と上級者の実装差がない

  • @aintek4さん

なぜNuxtは初心者と上級者の実装差がないと思うか

  • 実装がシンプル
    • ルーティング
    • 非同期処理
    • 簡単な設定ファイル

ルーティング

非同期処理

  • asyncDataの書き方は3パターン
  • どれを使うかチームで決めておけば分かりやすい
    • Promise
    • async/await
    • callback

簡単な設定ファイル

  • nuxt.config.jsだけ書けばいい
  • そもそもほとんど自分で書かなくていい

Nuxtを使う意義

  • 自分で書く量が少ないからビジネスの本質に時間を費やせる

まとめ

  • Nuxtを使えば初心者でも上級者と同じコードが書ける
  • フレームワーク側で用意してくれてるから実装がシンプルになる

リクルートライフスタイルにおけるNuxt.jsの導入事例

  • @YuG1224さん

Nuxt導入の背景

  • 大規模既存システムの存在
  • じゃらんの新機能追加(既存システムとの連携あり)
    • 既存の技術的負債を広げたくない
    • 負債はAPI Aggregationで吸収させる
    • API Aggregationはexpressで立てた

Nuxtの役割

  • NuxtはSPAとSSR
  • expressはAPI Aggregation

Nuxt採用してよかったこと

  • 既存システムの負債を簡単に吸収できた
  • 今後PWA対応簡単にできそう
  • コード規約が平和的に定まる

Nuxt採用してはまったこと

  • Nuxt内部のデバッグが大変
  • SPA + SSR + API Aggregationの構成が肥大化しそう

まとめ

  • Nuxt + Expressで簡単にSPA + SSR + API Aggregationを実現できた

「Rust LT #2 〜いま使う！Rust〜」に参加してきました

  • Rust LT #2 に参加してきました。

rust.connpass.com

  • Rust書いたことなくて難しかったですがいい刺激になりました。Rustでなにか書いてみようと思いました。
タイトル 発表者
Rustを支えるインタープリター qnighy
Rust の安全性を数学的に証明する 〜最新の研究から学ぶ形式手法と Rust の基礎〜 shiatsumat
lopdfの話 skoji
Rust でクロスコンパイルして Raspberry Pi Zero W で動かす legokichi
インタプリタを作ってまなぶRustらしい書き方 yuki toyoda
Rust 2018とは？〜安定した進化の真の意味〜 Pyry Kontio
この場で使う！Rust 〜アルゴリズムの実装を通して感じる使いやすさ〜 kenkoooo

Rustを支えるインタープリター

  • qnighyさん

miri

miriを使う1

miriを使う2

Chalk

まとめ

Rust の安全性を数学的に証明する 〜最新の研究から学ぶ形式手法と Rust の基礎〜

  • shiatsumatさん

Rustをどう噛み砕くか

  • Rustを単純化したミニマリスティックな言語を一から作る

rustbelt

RustBelt

lopdfの話

  • skojiさん

lopdf

Rust でクロスコンパイルして Raspberry Pi Zero W で動かす

  • legokichiさん

どこでRust

インタプリタを作ってまなぶRustらしい書き方

インタプリタとは

  • ソースを解析して抽象構文木をつくる
  • 木を解析して実行内容を評価する

Rust 2018とは？〜安定した進化の真の意味〜

  • Pyry Kontioさん

Rustのブログのバズワード

  • Stability as a Deliverable
    • 安定性もRustが提供する機能の一つ
  • Stability without Stagnation
    • 常に進化をする

Rust 2018

  • 2018/12リリースする新しいバージョン
  • Rust2015と交換性100%

この場で使う！Rust 〜アルゴリズムの実装を通して感じる使いやすさ〜

  • kenkooooさん

今使えるRust

  • Rustの良さははやさ
  • Webアプリ作ってもいいけどそれはPythonでもいい
  • Rustを使うべきはアルゴリズムの実行

C - 身体バランス

「Meguro.css #2 @ oRo」に参加してきました

  • Meguro.cssに参加してきました

megurocss.connpass.com

  • CSSの勉強会は珍しいので参加してみました。実践的な内容が多く勉強になりました。
  • 会場提供のオロさん、勉強会スポンサーお馴染みのForkwellさんのスポンサートークから始まり、6人のLTが行われました。
    • Forkwellさんの診断やってみたらこんな感じでした

t.co

タイトル 発表者
RSCSS体験談 @mhz_univ
flex: 1; @ryutamaki
CSSでクオリティをよりよくする @umiremix
Dart Sassであそぼう @terrierscript
"いい感じ"にするためのイージング @448jp
CSSでボーン @s14garnet

RSCSS体験談

  • @mhz_univさん

docs.google.com

RSCSSとは

RSCSSの構成

  • Component
    • 一意のクラス名
    • グローバル
  • Element
  • Variant
    • 色違いとか
  • Helper
    • 一時的な上書き
  • サンプル
.search-form {
.search-form {
  > .button { /* ... */ }
  > .field { /* ... */ }
  > .label { /* ... */ }

  // variants
  &.-small { /* ... */ }
  &.-wide { /* ... */ }
}

なぜRSCSS

  • CSS強い人いなかったから4分類だけで入りやすそう

大きさを考えて書く

  • 大きい粒度にしすぎるとつらくなる

1対1を考えて書く

  • 多html 対 多CSS
    • bootstrapのような
    • 影響範囲が大きいから変更がつらくなる
  • 1html 対 1CSS
    • 変更が容易
  • 多html 対 1css
  • mixin/extend
    • 隠れ多対1
    • classは違うけどmixinで実は同じもの使ってる
  • 共通な部品を作りたくなったらコンポーネントを新しく作る

flex:1;

  • @ryutamakiさん

flex

flexの基礎知識

flex-basis

  • flex-itemの主軸方向の長さ
  • max-width > flex-basis (> width)

flex-grow/flex-shrink

  • flex-grow
    • flex-containerの余ったスペースを比率で配分し拡大
    • 数値が大きいほど領域は大きくなる
    • 0だったら元の値より広げることはしない
  • flex-shrink
    • flex-containerからはみ出したスペースを比率で配分し縮小
    • 数値が大きいほど領域は小さくなる

用例

  • sidebar-main
    • sidebarは固定値
    • 余った領域をmain
  • header-main-footer
    • contentが少なければheader/footer固定
    • content多ければfooterはスクロールした一番下

CSSでクオリティをよくする

  • @umiremixさん

umiremix.com

CSSでテキストをより美しく

均等配置

  • テキストの右端を揃える
  • text-align: justify
  • 文字量が大くフォントサイズ小さいテキストに使うと良い

フォントサイズのジャンプ率

  • pxではなくvwでfont-sizeを指定するとジャンプ率が保たれる
  • ジャンプ率：本文サイズに対する見出しサイズとの比率
  • font-size: calc(30 / 640 * 100vw);

折返し

  • 自然な開業を作るか改行をさせない指定
.wrap: { display: block; }
.inner: { display: inline-block; }

アニメーション

  • iPhoneはスタイリングではなくインターフェイスデザイン
    • iPhoneを使っているという感覚ではなく直接情報を触っているという感覚を目指している
  • Webでも存在を意識させない自然なアニメーションを
  • CSSのアニメーション
    • CSS Transitions
      • 0.5s以上かかると違和感ある(ケースバイケース)
    • CSS Animations
  • 複雑だとJSでやった方が向いてる(JS/CSSの併用も)

DartSassであそぼう

  • @terrierscriptさん

Sassの最近

  • ruby-sassがdeprecated
  • 今後はdart-sass

Dart

  • 最近flutterで復活?

Dart Sass

  • ruby-sassより高速

Dart Sassをブラウザで動かす

  • 頑張ったら動いた！

いい感じにするためのイメージ

  • @448jpさん

アニメーションの実装における指示例

  • いい感じにして下さいとよく頼まれる
  • いい感じのアニメーション
    • 好さ + 善さ
    • 美しさメンテナンス性
    • ユーザ/ビジネス課題を解決する

いい感じのアニメーション

  • 90%はイージングで決まる
  • アニメーション調整の優先度
    • イージング > 時間 > 対象
  • RobertPennerのイージング関数
  • cubic-bezier関数がいい
  • http://cubic-bezier.com/

CSSでボーン

  • @s14garnetさん

docs.google.com

ボーンって何?

  • flashや3Dソフトではお馴染みのツール
  • 骨/骨格のイメージ
  • 意識するのは関節
  • CSSだけで腕みたいな動きを作れる！

デモ

codepen.io