IBMのやってること
GoogleIO
AI
Kotlin
Destribute
- apkのサイズが大きくなっていてる
- Android App Bundle
Actions
Flutter
Web
- chromeOSでLinux対応
- Lighthouse3.0
Material
- Materialっぽさ出すぎてしまうのを解消
- 個性を出しやすいような機能
- sketchと連携する機能
- Material Component
- Mapと連携
- スマホかざすとどっちに行けばいいか表示される
- 写ってるものを検索とか
- 文字起こしとか
- ARCore
- CloudAnchors
Firebase
PWA 集中勉強会総まとめ！既存サイトの「 PWA 化 」はこれでバッチリ！
PWA
- ローカルにインストールされたアプリのような挙動
- インストール
- オフライン
- Push通知のようなアプリライク
- はじめてのプログレッシブアプリ
いいところ
- アプリとWebのいいとこどり
- はやい
- うまい
- 安い
あらゆるプラットフォームへ
- 対応するプラットフォーム
- safariの対応は日本でインパクト大
- windows/Edge
- ストアで配布できる
- PWA Builder
- bingがPWA収集して勝手にストアにあげる
デメリットは？
- 既存サイトを毀損することはない
- 使えない環境なら従来通り
- 段階的な導入
- まずどこでも大丈夫
- 要確認
- background sync
- push
- payment
- web auth
PWAの構成
- html/css/js
- manifest
- ServiceWorker
ServiceWorker
Cache
- Chacheの運用がPWAの肝
- 目的
- 考慮点
- 戦略
- cache first
- network first
- no cache
- API
- match
- add
- put
- delete
- keys
- 同期更新削除は自分で
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
