「Android Bazaar and Conference 2018 Spring」に参加してきました

勉強会メモ

知られざる IBM の今、デベロッパーとテクノロジーの交差点

  • 佐々木シモン(IBM)

IBMのやってること

Google I/O 2018 Over view

GoogleIO

  • 7000人
  • 3日間
  • 100セッション

AI

  • Gmail
    • 入力内容の予測
  • Google Photo
    • 画像の加工
  • Google Lens
    • カメラで写したものを検索
  • テキスト抽出
    • 写真でとったものの文字をコピーできる
  • ML Kit for Firebase

Android P

Kotlin

  • 全体の30%くらい
    • 満足度が高い
    • 増えてきてる
  • 去年の6倍

Destribute

  • apkのサイズが大きくなっていてる
    • 6Mあがるごとに1%ダウンロード率が下がる
  • Android App Bundle
    • アップデート時に差分だけダウンロード

Actions

Flutter

  • beta-3が出た

Web

  • chromeOSでLinux対応
  • Lighthouse3.0

Material

  • Materialっぽさ出すぎてしまうのを解消
  • 個性を出しやすいような機能
  • sketchと連携する機能
  • Material Component

VR/AR

  • Mapと連携
  • スマホかざすとどっちに行けばいいか表示される
  • 写ってるものを検索とか
  • 文字起こしとか
  • ARCore
  • CloudAnchors
    • AR空間の共有

Firebase

  • モバイルアプリ向けツール
    • 認証
    • ストレージ
  • ML Kit

PWA 集中勉強会総まとめ！既存サイトの「 PWA 化 」はこれでバッチリ！

PWA

  • ローカルにインストールされたアプリのような挙動
    • インストール
    • オフライン
    • Push通知のようなアプリライク
  • はじめてのプログレッシブアプリ

いいところ

  • アプリとWebのいいとこどり
  • はやい
    • 動作が速い
    • 導入が早い
  • うまい
    • アプリ
      • ホーム画面
      • 通知
      • バックグラウンド
    • Web
      • 検索に載る
      • 更新が容易
      • 多くのプラットフォーム
  • 安い
    • 導入コスト
    • 通信量

あらゆるプラットフォームへ

  • 対応するプラットフォーム
    • ここ数ヶ月で増加
  • safariの対応は日本でインパクト大
  • windows/Edge
    • ストアで配布できる
    • PWA Builder
    • bingがPWA収集して勝手にストアにあげる

デメリットは？

  • 既存サイトを毀損することはない
  • 使えない環境なら従来通り
  • 段階的な導入
    • 全部入れなくても良い
    • SPAでなくてもいい

関連API

  • まずどこでも大丈夫
    • indexedSB
    • cache
  • 要確認
    • background sync
    • push
    • payment
    • web auth

PWAの構成

  • html/css/js
  • manifest
  • ServiceWorker

ServiceWorker

  • イベントリスナー
    • install
    • activate
    • fetch
  • scopeに気をつける

Cache

  • Chacheの運用がPWAの肝
  • 目的
    • 高速化
    • ネットワーク節約
    • オフライン
  • 考慮点
    • 更新
    • 容量
  • 戦略
    • cache first
    • network first
    • no cache
  • API
    • match
    • add
    • put
    • delete
    • keys
  • 同期更新削除は自分で
    • activate時に古いものを削除

フレームワーク

  • PWA Builder
    • microsoft
    • ベースを作るためのもの
  • Workbox
    • google
    • 細かな制御をするためのもの

What is new in Kotlin

googleIOでのデモ

  • サンプルコードが31セッションの内23セッションはKotlin
  • Kotlinが標準
  • 2017
    • オフィシャルにサポート
  • 2018
    • 実質的に標準に

Android開発の標準言語としてのKotlin

  • Playストア上去年の6倍
  • 35%がKotlin
    • 増加傾向
  • AndroidDevelopersのドキュメントもKotlin版提供開始
  • Android KTX
    • Kotlinの拡張関数群
    • googleIOで1.0.0-alpha
  • AndroidKTXの例
  // before
  Uri.parse(url)
  // after
  url.toUri()
  ```

### この一年のアップデート

#### AndroidStudio3.0リリース

- Kotlinプラグインがデフォルトで入った
- Kotlinで開発開始できる
- JavaコードをKotlinに変換する機能

#### AndroidKotlinGuides

- AndroidをKotlinで書く際の指針
    - StyleGuide(Kotlinの書き方)
    - InteropGuide(Kotlin/Java相互運用ルール)

#### Kotlin1.2

- マルチプラットフォームプロジェクト
- コンパイルパフォーマンス25%向上

#### SupportLibraryへのNullable/NonNullアノテーション追加

- Javaのコードに追加していってる
- Kotlinの世界に入ってくるときに役立つ

### Kotlinをどう学ぶ

#### Kotlinの目指すところ

- Javaが使われている環境でより簡潔で生産性高く安全に使えるJavaの代替言語
- 実用主義
    - Javaの考え方
    - 他の言語でうまくいってるものを採用
- 簡潔
    - 読みやすさ重視
    - ボイラープレート削減
- 安全
    - 静的型付け
    - Null安全
- 相互運用性
    - JavaとKotlinの相互互換
    - ライブラリも既存のものを使える

#### 注意点

- 自由度が高い
    - StyleGuide
- 簡潔にしすぎると読みにくくなることも
- 原理な機能が自由度を高める
- まずはNull許容型/Null非許容型の区別に気をつける

#### 学び方

- オフィシャルサイト
    - Kotlin and Android
    - Kotlin Sample
- DroidKaigiアプリ
- Kotlinインアクション
    - Kotlin作った人が書いた本の訳
    - なぜそういう言語思想なのか

### まとめ

- KotlinはAndroid開発の標準言語
- 公式ドキュメントが充実
    - オフィシャルとしての対応が進んでいる
- Kotlinの思想をちゃんと知って始めよう

### サーバサイドKotlin

- FRESHはサーバKotlin
- 事例はたくさんある
- Springもオフィシャルサポート入ったはず

## Web アプリケーションフレームワークにおけるWeb開発の最適化

- 佐川夫美雄(アシラス株式会社)
- https://speakerdeck.com/albatrosary/3da-huremuwaku-angular-react-vue-dot-js-bi-jiao-niyoruentapuraizu-web-apurikesiyonkai-fa-falsezui-shi-hua
- http://albatrosary.hateblo.jp/entry/2018/06/10/204323

### WebApplication

- Webサイトとは違う?
    - 見るだけ
    - インタラクティブに使う
- 必要なもの
    - html/css/js
- SemanticWeb
    - 必要?
- CSS
    - 闇
    - スコープがない
    - ベンダープレフィックス

### プログラムを書きときに気にすること

- 可読性
- テスト
- 再利用性

#### コンポーネント

- Piece
    - Webの場合はコンポーネント
- コンポーネント化して小さくすればいいだけじゃない
    - AtomicDesignのようなものが必要
- デザイナーが作ったAtomicDesignをエンジニアがコンポーネント化

### WebComponents

- CustomElement
    - ピースに名前をつける
- HTMLTemplate
    - ピースの模様
- HTMLImport(ESModules)
    - ピースをパズルにはめる
- **ShadowDOM**
    - ピースであることを主張

#### どんなフレームワークを使うか

- ShadowDOMはまだ実装されてない
    - ScopedCSS
- ほしいのはJSFrameworkじゃないWebApplicationFW
- 大事なのはScopedCSSができるかどうか
    - Agular- ok
    - Vue - ok
    - React - めんどくさいからだけ
        - styled-componentsじゃだめなのか?

### まとめ

- Webアプリケーション開発はコンポーネント指向
- 開発効率をどれだけ上げられるか
- フロントエンドエンジニアこそクラウドサービスをマスターせよ

## デザインツール戦争とMaterial Theme Editor

- 山本麻美(フリーランス)

### 機能で考えるツール選び

- 主なUIデザインツール
    - sketch
    - Adobe XD
    - figma
    - InVisionStudio
- プロトタイピングツール
    - いろいろ
- 状況で判断しよう
    - アイデアを素早く視覚化したい
    - 複数デザイナーで進めたい
    - 開発チームにspecを共有したい
    - 画面遷移図がほしい
- spec
    - UI実装情報
    - レイアウト指示書
- 何でも良いではだめ
    - 課題に合わせて選択

#### 比較

- UIデザイン
    - sketchが抜群に優秀
        - 高度なComponent設計ができる
        - windows版はない
    - InVisionStudioはまだ正式版じゃない
- プロトタイピングツール
    - InVisionだけ進行管理ができる
        - でも多機能すぎて使いづらい
    - XD,Sketchはデザイナー視点だと楽で使いやすい
    - Prottはワイヤーフレーム作ったら画面遷移図もできる
- spec共有ツール
    - Zeplinが一番使いやすい
    - XDだと全部一貫してできるからやりやすい
        - まだbeta

#### ケーススタディ

##### ケース1

- 既存アプリを全面リニューアル
- 構成は決まってる
- 画面遷移図必要
- -> sketch,prott, zeplin

##### ケース2

- 新規プロジェクト
- デザイナーじゃないかも
- -> XDなら経験なくても使いやすい

##### ケース3

- デザイナー確保できない
- エンジニアだけでAndroidアプリ作りたい
- -> Sketch(MaterialThemeEditor)

### MaterialThemeEditorを使ってみた

- sketchはiosテンプレートは充実してる
    - androidは貧弱
    - androidテンプレート??
        - 違った
        - 動かすためにsketchを使ってる
            - それだけ完成度高いものだった
- sketchのポイント
    - Style
        - 要素の色とかサイズを設定する
    - Symbol
        - 要素の集合に対するStylee
    - Resizing
        - デバイスサイズ異なる場合の動き
        - 伸ばすのか固定7日
    - Library
        - 外部CSS的なもの
        - Symbolを複数ファイルで使い回せる

### まとめ

- ツール選びは適切に
- MaterialThemeEditorはsketchのプラグインといより動かすためにsketchを使ってる感じ
- 豊富なだけに探すのは大変
- 自由にカスタマイズするのには向かない気がする

## Flutterアプリ開発入門

- https://www.slideshare.net/kanbara/abc2018springflutter-101476556