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

勉強会メモ

Google CloudのGenAIサービスで「AIにファッションを褒めてもらうアプリ」を作ってみよう

  • 中井 悦司さん(Solutions Architect)

GCPの生成AI機能

  • 画像を認識して字幕を出したり
  • Visual Q&A
    • アップした画像に対してどんな情報がほしいかチャットでやり取りできたり
  • PaLM2
    • 多言語に強い
    • 日本語のダジャレを英語で説明できたり

個人アプリ開発（メンテナンス）14年の歴史

個人でのAndroidアプリ開発

  • Androidアプリは2009年からで2009年の終わりには個人アプリを出してた
  • 個人開発のモチベーション
    • 使ってくれてる人がいる（課金してくれてる人も）
    • 自分でも使ってる
    • 新機能の実験台にできる
  • 2012年にAndroidMarketからGooglePlayに
  • 2013年にAndroidStudioが出た
  • 2017年にKotlinサポート発表
  • 気をつけるといいこと
    • READMEちゃんと書くといい
      • 自分で書いたことでも忘れる
    • ライブラリの自動更新便利
      • 年単位でメンテしないとかあるので自動化するといい

大画面デバイスにどう向き合えば良いのか？

大画面デバイス

大画面デバイスだと

  • アプリ作成の前提が変わる
    • 横向きで使われる
    • マルチウィンドウで使われる
      • 画面サイズが頻繁に変わる
    • タッチだけでなくキーボードやマウスなども使われる

大画面デバイスのサポートレベル

  • 3段階で規定されてる
    • Tier3:Basic
      • 壊れずに動くレベル
    • Tier2:Better
      • 大画面に最適化された状態
    • Tier1:Best
      • 大画面の特性を活かしてる

2023年のウェブ

2024のWeb

  • 3rd p cookieのブロックを実感できるようになる
  • パスキーの浸透
  • chrome拡張のv2が2024/6に動かなくなる
  • a11y元年(2024/4法改正がある)

2023/1

  • lh
    • 高さを行数で指定できる
  • MathMML

2023/2

  • :picture-in-picture
    • PinPの擬似クラス
  • launch_handler
    • PWAの起動
  • credentialless iframe
  • コンテナクエリをFFでもサポート

2023/3

  • View Transitionn API
  • Safari16.4
    • Web Push

2023/4

  • CSS nesting
  • PWA要件のハンドラーが空だったら無視するようになった

2023/5

  • WebGPU
  • ファーストパーティーセット
  • Google I/O
    • WebGPU
    • パスキー
    • Baseline
      • 主要ブラウザでサポートされてる技術をまとめて故障(ex. Baseline 23)

2023/6

  • text-wrap: balance
  • CHIPS
    • クッキーの話
  • Popover

2023/7

  • Scroll-driven Animation
  • fencedframe
  • Topics API

2023/8

2023/9

  • transition-behavior
  • Safari17

2023/10

  • @scope
  • prefers-reduced-transparency

2023/11

  • Cookieの有効期限
    • 昔に発行されたものも400日期限に
  • :user-valid/:user-invalid

2023/12

  • CloseWatcher API
  • detailsタグのname属性

Compose 時代のパフォーマンス感覚

  • 荒木 佑一さん(デベロッパー リレーションズ エンジニア)

View時代の感覚からの脱却

  • ViewGroupのネストは最小限にすべき
    • 子の大きさを測って配置する
      • Compose:Layout、View:ViewGroup
      • ViewGroupは2回測られるので累乗で増えていってしまう
      • LayoutはIntrinsic Measurementと計測で別れてる
        • ->Composeならネストはそんなに気にしなくていい
  • ランタイムとGC
    • GCでとまるのはDalvik(APIレベル19)まで
    • Composeなら小さいオブジェクトなッッらGCそんなに気にしなくていい
  • 計算結果のキャッシュ
    • rememberでmemo化できる
  • Composeのフェーズ
    • Composition
      • ソースからUIのツリーを作る
    • Layout
      • どれをどこにどの大きさで配置するか
    • Drawing
      • 描画する
    • コードブロックがどのフェーズで実行されるか意識するといい
      • stateの値取得を後のフェーズでできるならその方が再実行する量が少ないのでいい

New in Angular

v16(2023/5)

  • Standalone API
  • Signals
    • reactivityのための機能
    • 他のライブラリでもあるのと同じ感じ
    • v17でstable
  • Hydration
    • SSRされたHTMLを破棄して一から作ってた
    • SSRされたHTMLを使いまわして動かせるようになった
  • esbuild-based build system
    • webpackをesbuildに変えて高速化した
    • v17からデフォルトに

v17(2023/11)

  • Angular.dev
  • Built-in Control Flow
    • @if/@for/@switch
    • v17ではdeveloper preview
    • @forの@emptyが特徴的
    • 書き方が変わるだけじゃなくてパフォーマンスが大幅に改善
  • Deferrable Views
  • New SSR Developer Experience
    • 雛形生成で簡単にSSR作れるようになった
    • ng new --ssr

2024のロードマップ

  • Angular.devの完全移行
  • Zone-less
  • SSRデフォルト有効化
  • PartialHydration対応
  • AngularMaterialのMaterial3対応

2023 Flutter/Dart Summary

Impeller

  • 新しいレンダラー
    • パフォーマンスがいい
    • 明らかに起動が速い
  • iOSはデフォルトになった
  • Androidはプレビュー版でまだSkiaがデフォルト

Material3

  • Material3のコンポーネントが追加された
  • 画像などからColorSchemeを作成できるようになった

Web

  • Flutter WebでFragment Shadersが使えるようになった

Dart3

  • Record
    • return ('a', 'b') みたいに複数値を返せる
  • Patterns
    • swich文で便利
  • Class modifies
    • クラスが増えた
  • DevTools Extensions
    • DevToolsを独自拡張できるようになった
  • Skwasm
    • SKottie
      • SkiaでLottieを動かすためのSkottieをWasmで動かせる

ページ遷移の高速化 2023 年最新のページナビゲーション事情

  • 弘田 百合子さん(Partner Solutions Engineer)

ページ遷移

  • 1度の訪問で4.6ページ
  • 直感的で高速なページ遷移

View Transitions

  • ページ遷移時にフェードイン/アウトがつく
    • document.startViewTransition(() => ...)
  • 仕組み
    • 遷移すると最初のページのoldが上にかぶさる
    • 下のページが切り替わる
    • oldと下の間に新しいページのnewができる
    • newができたらoldからnewにフェード
  • zoom in/out
    • CSSでview-transition-nameをつける
    • ページ感で同じnameがついてるとそれらを連動させて遷移できる
  • 挙動の確認
    • devtoolsのAnimationsタブでアニメーションのスピードを遅くしたり止めたりできる
  • MPAでの利用
    • 今はchromeでflagを建てないと使えないが対応は進んでる
    • metaタグでname指定したりする

Prerendering

  • preloadingの技術
    • prefetch
      • リソースを事前に取得するだけ
    • prerender
      • ページを表示する準備を整えるところまで
  • Speculation rules APIで実装する
    • prefetchとprerenderどちらでも使える
    • 対象のページのURLを <script type="speculationrules"> で指定する
  • 挙動の確認
    • devtoolsのApplicationタブの中のSpeculations
    • prerenderしてるページが並んでる
    • prerenderingされたページのinspectも見れる
      • domが見えたりネットワークタブも見れる

Back Forward Cache

  • デスクトップは10回に1回、スマホは5回に1回のページ遷移は「戻る」
  • 遷移前のページをメモリに持っておいてそれを返すから戻ったときの表示が速い
  • BFCacheの有効化
    • Aviod unload handlers
    • 専用のheader?

Google Marketing Solutions のGithub から学ぶ Google Style Guides

  • Sho Tanaka (tsho)さん(Technical Solutions Consultant, Google)

Google styleguide