radioc@?

レディオキャットハテナ

【勉強会メモ】Mobile Act OSAKA #10

勉強会 Android iOS Swift Flutter

mobileact.connpass.com

  • 日時：2019/07/26(金) 18:40 〜 21:30
  • 場所：Osaka Innovation Hub (大阪イノベーションハブ)

前回は予定が合わず、久々となりましたがMobile Actに参加してきました。いつもはiOSネタが多い印象がありましたが今回はFlutterあり、UI/UXネタありと幅広いテーマで面白かったです。別の用事があって懇親会はほとんど参加できなかったのが残念でした（いつもおいしいビールが出るので…）。エチゴビールの新製品は自分で買って飲みます。

なお、次回もすでに募集が始まっています。

mobileact.connpass.com

TakuyaOhashi 「5分で振り返るFlutter」

Flutter

flutter.dev

  • Dart
  • XMLやstroyboard
  • ホットリロード

使い方

React/Native,Xamarinと何が違う？

  • ReactでもC#でもない
  • レイアウトのパーツはすべて自前

iOSとAndroid同じデザインにしたい

  • 全く同じにできる

アクションシート

ネイティブのコードでそれぞれ実装する場合

  • MethodChannel
  • Event
  • PlatformView

PlatformViewWidget

  • ネイティブのViewをFlutterの画面に描画できる
  • AndroidView,UiKitView

Flutter Webはどう？

  • まあまあいい感じに動く
  • Chrome以外は不安定

SwiftUIとかJetpacComponse

  • SwiftUIはiPadOS,Macまでできる
  • AndroidやWebまでやるならFlutter

Unity UI Widgets⇒こんなのもあるらしい

  • Flutterから派生してUnityでFlutterっぽく記述

github.com

KatsukiNakatani 「Android Material Component 1.1」

Material Design

  • Googleが提唱しているデザインシステム
  • Androidだけのものではない
  • I/O 2018で大幅なアップデート

material.io

Material Components

  • マテリアルデザインを実現するためのUIライブラリ
  • 旧ADSL（Android Design Support Library）
  • appCompatのAndroidX移行とともにADSLもMaterialComponentに
  • Refactor to AndroidXを実行するとAndroidX化とともに変換される

バージョニングの変更

  • 1.0.x
    • 基本的にネームスペースが変わっただけ
  • 1.1.x
    • 大幅に変わる
    • まだAlpha版

テーマ継承元の変更

  • 1.0.x
    • Theme.AppCompoat
  • 1.1.1
    • Theme.MaterialComponent
    • 柔軟なAttributeが増えている
    • 例）アイコンのテーマやカラーなど
    • 今までになかったAPI

まとめ

  • AndroidXへ移行してMaterialComponentに変更
  • 新しいスタイルも増えて柔軟にデザインできる1.1.xはおすすめ

usami-k 「SwiftUI による ViewController からの解放」

speakerdeck.com

Swift UIとは

特徴

  • 宣言型シンタックス
  • デザインツール
    • コードとプレビューの同期
    • コードでもプレビューでも編集できる
    • 複数のプレビューを同時に確認できる
  • すべてのAppleプラットフォームで

SwiftUIとViewController

UIKitからみた場合

  • ViewControllerがない
    • 重要な役割だった
    • 扱いが難しく厄介な存在
    • 実装がふくれあがる傾向
    • アーキテクチャ設計を使う最いどの立ち位置で扱うのが難しい
    • ViewControllerで悩まなくていい

役割

  • 画面の管理
    • UIパーツのレイアウト
    • 画面のライフサイクル処理
  • 画面とデータとの連携
    • ユーザーからの入力受付
    • データの変更を画面に出力

SwiftUIでは

  • View
    • UIパーツのレイアウト
    • 画面のライフサイクル処理
  • Combine
    • ユーザーからの入力受付
    • データの変更を画面に出力

役割の分離

各種アーキテクチャの実装の再考

  • MVC,MVVM,Clean Arc.,FluxなどでViewCOntrollerをどこに位置づけるか難しい
  • ⇒その悩みから開放
  • ただしデータバインディングの扱いは今後の課題

SwiftUIとUIKit

UIKitを利用する

  • UIKitでできていたことがSwiftUIでできないケースがある
  • UIコンポーネントが足りない
  • 部分的にUIVIewやUIViewControllerの助けを借りる必要がある

UIViewの利用

  • UIViewRepresentable protocol
  • 公式ではMapKitのMKMapViewをSwiftUIのViewとして扱う例が紹介されている

UIViewControllerの利用

  • UIViewControllerRepresentable protocol
  • 公式では（以下略

結局ViewController使ってる

  • とはいえSwiftUIのViewの役割

まとめ

  • 悩みが減った
  • シンプルな実装でUIが作れる
  • データバインディングは今後の課題

numa08 「What/Why/How MVVM」

What

  • iOSアプリ設計パターン

iOSアプリ設計パターン入門

iOSアプリ設計パターン入門

※追記
Amazonでは取り扱っておらず こちら から購入可能とのこと。
著者のかたからご連絡を頂きました。

Why

  • そこそこのメンバーと画面の開発をする
    • コンポーネントが分割されているのでコンフリクトしにくい
    • レイアウトとろ実行実装を並行
    • コードがパターン化するので学習コスト低い
    • デバッグしやすい

How

  • FWを分けた
    • 想定していない依存が生まれないように
    • ビルドの高速化
  • すべての画面をUIViewCon
  • ViewModel
    • Input
    • Output
    • bind
  • StoryBoardを用意

ai 「SoftwareDesignerのしごと」

speakerdeck.com

みんなSoftwareDesigner

  • UI Designer
  • UI Engineer
  • DesignEngineer
  • UX Designer
  • Graphic Designer
  • UX Engineer

ソフトウェアは何でも作れる

  • 道具と人
  • 人と道具は共進化

道具

  • 創造的で自由な道具
  • 抽象度の高い道具
  • Modal⇒抽象度 低
  • Modeless⇒抽象度 高

抽象度の低い道具

  • Model

抽象度の高い道具

  • 初めてなのによくわかる使いこなせる

できるだけModelessで作ろう

原則

  1. Object-Verbの操作構文
  2. 対象が見えていて、任意の順序でアクセスできる
  3. 直接的かつ可逆的な操作
  4. 状態変化をリアルタイムにフィードバック

ソフトウェアは何でも作れる

  • 何でもObjectにできる
  • 何でも実在化できる

何をエンパワーするか？

  • それをデザイナーがする

参考

paper.dropbox.com

Modeless and Modal

modelessdesign.com

itok 「Background App Refresh Taskがやってきた」

speakerdeck.com

Background App Refresh Taskがやってきた

  • 30秒間動ける
  • アプリを最新の状態に保てる
  • background fetchのAPIはdeprecated
  • macOSは旧APIで動かないからiPadOS+Catalyst使うならこれに移行

Background Processing Task

  • 数分動ける
  • DBのメンテナンスとかMLの学習とか

準備

  • capability→background modes

  • タスクの識別子を列挙

  • タスクを登録する

  • 投入する
  • 実行
    • キャンセル処理ができる
  • パラメータ
    • earlistBeginDate
      • 遠すぎる未来はだめ
        • 1週間以内くらいが望ましい
        • 最短なので実行されるとは限らない
    • processing task
      • requiresNetworkConnectivity
      • requiresExternalPower
      • CPUを使う仕事をする場合はtrue

デバッグ

  • デバッガからタスクの実行や期限切れをテスト可能

fukumoto 「本当にあったハイブリッドアプリの怖い話 納涼スペシャル」

恐怖!死者のプラグイン

怨霊?!無人のはずのプロジェクトにビルドエラーの影

  • Monaca上のプロジェクトが突然ビルドできなくなった
  • Gitログでは改変されていない
  • Monaca上のソースを確認
    • cordova-plugin-firebaseがGoogle側の仕様変更でビルドエラーになる

怪奇!音もなく消えるプラグイン

  • 要件に合うプラグインを探していた
  • 見つからなかったので有償のプラグインを購入
  • 事前の動作確認はしていた
  • いざ実装するとメソッドはない
  • Androidのみバージョンがあってなくてビルドエラーを起こさずに静かに除外されていたことが判明
  • Monacaではビルド成功時、ログがあとから見れない

阿鼻叫喚！恐怖の公式issues

  • 有償プラグイン
  • どうしてもうまく実装できていない
  • しばらく検証
  • 公式のバグを疑い始める
  • 高圧的な公式サポートで助けを求めれなかった

プラグインによる怪奇現象があとを絶たない

  • お参り（サポート常用確認）
  • 供養（廃止と実装のやりかえ）

↑が必要

いい加減な気持ちでサードパーティ製のプラグインを導入すると呪われる

yukihiko_a 「iOSで3Dの姿勢推定のONNXモデルを使ってUnityちゃんを動かしてみた」

  • 姿勢推定（Pose Estimation）
  • RGB画像から人体の姿勢を推定する
  • 顔認識のからだ版
  • 関節一（肘や手首）の部位を特定
  • 主に DLを使う

ONNXとは

  • Open Neural Network Exchange
  • DLのフレーム枠感で学習モデルを好感する
  • すべてのFWをサポートしているわけではない
  • 新しい論文の技術が取り込まれるには時間がかかる

姿勢推定を学習→ONNX→COreMLToolで変換→CoreMLで実装

実際に作ってみたアプリ

  • A12プロセッサ前提（他のプロセッサは遅い）
  • Unity+OpenCV+ONNXでつくった
  • 理論上はAndroidでも動くはず（今後試したい）

リンク・転載は法令・公序良俗に反しない範囲で自由です／著作権は全て著作者に帰属します