kumamotone’s blog

iOS/Android アプリエンジニアです https://twitter.com/kumamo_tone

LINEヤフー Development with Agents Meetup #1 に参加しました #dev_with_agents

LINEヤフーの社内のAI駆動開発研修ギルド Orchestration Dev Guild による Meetup とされる、「LINEヤフー Development with Agents Meetup #1」 に参加しました。会場は紀尾井町オフィス。

新卒でヤフーに入社した身としては、紀尾井町オフィスで興味のある分野の勉強会があるのはとても嬉しいです!

lycorptech-jp.connpass.com

Orchestration Dev Guildなる存在は、LINEヤフー Tech Blog でもオープンになっており、個人的に昔からお世話になっているgiginet先輩も講師をされていたというブログ記事で聞きかじっておりました。このワークショップでは、AI駆動開発を 見るだけでなく、一緒に体験できる 社内ハンズオンイベントとして、2025年10月から月1〜2回開催されているそうです(頻度すげ〜〜〜)。

www.lycorp.co.jp

LINEヤフー Development with Agents Meetupでは、AIエージェントや生成AIを活用したプロダクト・開発が、実務の現場でどこまで進化しているのか、LINEヤフーのエンジニアが、実際のプロダクト・開発現場におけるAI活用事例をもとに、具体的な取り組みや学びを共有する会になるとのことです。以下、聴講した内容になります!

はじめに・LINEヤフーにおけるAI駆動開発組織のプロデュース施策 / 山岡滉治さん

社内外技術イベントの運営、社内向けAI駆動開発セミナー Orchestration Development Workshop の運営、全社的な生成AI活用コミュニティ「GENERATIVE AI LOUNGE」の企画運営を担当されている山岡さん。オープニングとなるこのトークでは、会の趣旨や注意点などをクイックに共有いただきました。

生成AI活用によるPRレビュー改善の歩み / 福山怜史さん

Yahoo!プレイスというサービスの開発チームで、バックエンドのテックリードを担当していた福山さん。その時期、レビュー依頼が自分に集中しやすくなってしまっていて、実装とレビューを同時に進めるという日々が続いていたそうです。

個人の努力だけでは改善しづらいという状況であることを実感して、根本的な見直しが必要だと感じ、まずPRをプロンプトで要約することを試したそうですが、運用は続かず、数週間ほどで使わなくなってしまったそうです。

しかし2025年夏ごろにClaude Codeが社内で使えるようになり、状況が大きく一変。コードベースを横断して文脈を横断できるので、AIがレビューの一次チェックとして実用的に機能するレベルになり、「AIスクリーニングレビュー」として運用されているそうです。

AIスクリーニングレビューでは、レビューの一次チェックとして、主に次のような点をAIに確認させているそうです。

  • 変更内容と影響範囲の要約
  • コーディングスタイルのチェック
  • 潜在的なバグやパフォーマンス、セキュリティ面の懸念
  • レビュアーが実装意図を伝えるためのコメント案の提案

プロンプト化し、Cloud Codeでスキル(当時はコマンド)として登録することで、必要な時にすぐ実行できる形にしているそうです。

Claude Codeのカスタムコマンドなどは、以下の記事でも紹介されているようです。

techblog.lycorp.co.jp

Agentic Codingによる開発効率化と、チームへの導入 / 平野敬祐さん

2020年に入社して以降ヤフーファイナンスに関連したプロダクトの開発に担当されている平野さん。

2024年頃までのAIコーディングは、人間が細かく指示してAIは補助的に提案・生成する使い方が中心でしたが、先進的なエージェンティックコーディングでは、人間は「実現したいゴール」を渡し、AIが仕様整理→コード調査→実装→テスト→結果反映まで、完了に向けて自律的に進めることが、徐々に可能になっています。

平野さんはエージェンティックコーディングをシンプルに体験することを目的に、社内でワークショップを行ったそうです。

ワークショップの内容は大きく3ステップ。

  1. 実装計画の作成: Jiraチケットや Confluenceの仕様書から情報収集し、実装計画を立てるスラッシュコマンドを用意。当時はPlan Modeが各ツールに存在しなかったため独自に用意したが、現在は多くのツールが同等機能を提供している。

  2. 実装〜PR作成: 実装計画をもとにコーディングし、テスト・ビルドを確認した上で、テンプレートに沿ってPRの説明文を生成・作成するコマンドを実行。

  3. AIレビュー&指摘対応: 作成したPRに対してレビューコマンドを実行し、指摘箇所をそのまま修正。レビューコマンドは福山さんが第1回で紹介したものを再利用している。

平野さんはAIの習熟度に自信のない方や、AIを活用する時間が取れない方に対して、新しい技術や複雑な仕組みではなく、「体験を通じた理解」に重点を置いた設計のワークショップを提供することで、学習者が効率化と知識習得の好循環に乗せることを目指したそうです。

大規模な組織におけるAI Agent活用の促進と課題 / 井上秀一さん

2024年に新卒入社し、現在は社内向け Kubernetes as a Service である FKE チームで開発業務に従事しつつ、生成AI関連の活動にも従事している井上さん。

発表ではまず、Multi-Agentの概念について説明。Multi-Agentは、複数のエージェントが連携して動く仕組みで、役割分担が可能で、例えば分析をする人やレポートを書く人など、エージェントに専門性を持たせて動かすことができ、トークン消費が増えたり、エージェント間の協調が複雑になるというデメリットもありつつも、業務フローを作る中で難しいタスクや複雑なものにはマルチエージェントが有効とのことでした。

Multi-Agent用のフレームワークとしてGoogle Cloudの「Agent Development Kit(ADK)」に注目されているとのこと。Google Cloudを使わなくても、OSS単体で動くそうです。

developers.googleblog.com

ワークショップでは、Jiraで管理してるプロジェクトの進捗状況を自動で分析、レポートを作成する例を紹介されたそうです。

ワークショップでは、2000人の方がリアルタイムで参加し、アンケートでは約7割の参加者が「近い将来に試す予定がある」と回答したそうです。

生成AIを活用したモバイルアプリケーション開発のテスト改善 / 山手政実さん

Yahoo!乗換案内・Yahoo!マップのiOS開発を担当されている山手さん。AIとの協業において、実装スピードの速いAIに対して人間の判断がボトルネックになりがちな中、CLAUDE.mdの整備やMCPサーバーによる仕様書の読み込みといった「共通認識づくり」に加え、AIに視覚を与えることで残りの差を埋めるアプローチを提唱されていました。

具体的には、iOSシミュレーターMCPでスクリーンショット取得を自動化したり、Xcode 16.3のXcode MCPでコンポーネント単位のプレビュー画像を取得したりすることで、AIが自ら画面の状態を確認できる環境を構築。デモではYahoo!乗換案内のトップ画面がHIGに準拠しているかをAIに自律評価させる実例も紹介されていました。

さらに山手さんは、Maestro MCPを使ってYahoo!乗換案内の画面遷移テストフローを自律的に組み立てるデモや、冬休みの宿題としてClaude Code主体で開発したという自作のスナップショットテスト用MCPサーバーも紹介。

スクリーンショットをもとにAIが次の操作を判断しながらテストケースを構築し、結果はHTMLで視覚的に確認できる仕組みになっているとのことです。完璧ではなく人間のサポートは必要ですが、テスト維持の工数削減と、人間が本来やるべき作業への時間捻出が狙いだそうです。

LINEアプリ開発のためのClaude Code活用基盤の構築 / giginet/三木康暉さん

LINEアプリのモバイル開発者体験向上チームに所属するgiginet(三木)さん。200万行超・数百モジュールというLINEアプリの巨大コードベースでClaude Codeをどう活用するかについて紹介されていました。

スーパーアプリならではの課題として、ビルドに10分以上かかるイテレーション速度の問題、3万ファイルから目的のコードを探す難しさ、領域ごとに異なるドメイン知識の必要性を挙げた上で、関連モジュールだけを単体ビルドする仕組みなど、AIが効率的にフィードバックループを回せる基盤づくりを進めているとのことです。

三木さんはClaude Codeの各機能に書くプロンプトをInstructionと総称し、設計原則として「コンテキストウィンドウの最適化」「ガードレールの設計」「継続的な改善」の3つを挙げられていました。

特にコンテキストウィンドウの最適化にフォーカスし、CLAUDE.mdは150行程度に収めること、そのため、行数の節約のために、AIが既に知っている一般的なiOS/Androidの知識は書かず、LINEプロジェクト独自の部分だけを盛り込むことが重要とのこと。さらに、ビルド方法などの具体的な手順はCLAUDE.mdに直接書かず、スキルやサブエージェントに隠蔽して必要時のみ読み込ませることで、コンテキスト消費を抑える設計にしているそうです。

CLAUDE.mdに何を書いているかというと、まず絶対フルビルドを禁止(w) 。部分ビルドやUnitTestの部分実行用のスキルを用意してイテレーションに組み込んでいるそうです。ファイル数が膨大なためディレクトリ探索の仕組みやクリーンアーキテクチャの知識もスキルとして整備し、コンテキスト消費量を抑える工夫をされていました。

スキルについては「Reference Contents(コーディング規約やドメイン知識など、知識を与えるもの)」と「Task Contents(特定の処理をシーケンシャルに実行するもの)」の2種類に分類できるという整理も紹介。ゲームに例えるとパッシブスキルとアクティブスキルのような関係、とのことでした(わかりやすい)。

続けて三木さんは、スキルの実践的な運用方法を紹介。Reference Contents(知識系)のスキルは、サブエージェントを立ち上げてその中で知識を展開して処理する形が適しているとのこと。例としてLINEアプリ社内のクリーンアーキテクチャの設計レビューをサブエージェント内で行うケースを挙げていました。

一方Task Contents(操作系)のスキルは、コンテキストフォークでサブエージェントを起動して処理を実行する形で、ビルド実行をメインエージェントで行うと大量のログでコンテキストが埋まってしまうため、サブエージェント内でビルドを実行し、結果だけをメインエージェントに返す仕組みにすることでコンテキスト消費を抑えているそうです。

発表内容の一部は、以下のブログでも紹介されているとのことです。

techblog.lycorp.co.jp

おわりに

個人的に、正直いままで行った生成AI系の勉強会って、あんまり印象良くないものが多かったりしました(勉強会そのものが悪いというわけではなく、対象者が広すぎるからか、いちエンジニアとしてはどのようにエンジニアリングで活用しているのかみたいな具体的なテクニックが聞けず、物足りないみたいなことが多かった)。

今日に関しては、LINEヤフーで実際に開発を行っている方々のお話が聞けて、忖度なくたいへん刺激になりました!

高頻度で骨太講師の社内ワークショップが開催されているのはなんとも羨ましい…自分もブログなど拝見しつつ、取り入れられるところを積極的に取り入れていきたいです!

第9回 FlutterGakkai に参加しました #FlutterGakkai

第9回 FlutterGakkai に参加しました。会場はスタディプラス株式会社さん。

YouTube Live でもストリーミングされていて大変ありがたい!(聞き逃しを振り返れるので)

www.youtube.com

オリジナルWebアプリでスムーズにアンケートやベストプレゼンテーション賞の投票もできるようになっていたり、気合の入りようもすごい

maestro mcpでFlutterアプリでもフィードバックループを回そう / K9i a.k.a. たこさん

k9i-0.github.io

アクセンチュア㍿ / ゆめみ所属のFlutterエンジニア、Claude Code推しの方。Claude Codeの開発者いわく、最も必要なのは「フィードバックループ」。重要フィードバックループとは やった結果を見て、次をどうするか修正・調整し続けるサイクル。

ループに人間が介入するところを減らしたい。そのために「UI検証」のMCPを使っていきたい。

調べると、3つぐらい候補となるMCPがあった。

Maestro MCPは、MaestroというE2E実績のあるCLIツールのMCP版。maestro CLIに統合済みで、E2EシナリオのYAMLが再利用できる。

Mobile MCPというのもあって、マルチプラットフォームMCPの先駆者といえる。npxでインストールできて、アップデート頻度が高い。

Marionette MCPというのもあって、LeanCodeが出してる。これは前の2つと違って、iOS/Android以外のプラットフォームにも対応していて、Flutterパッケージとして実装されている。Flutter内部の仕組みで動作するので、他とアプローチが異なる印象。

それぞれ触った結果、これ一択という感じではなかった。

Dart MCPというのもあるが、これは上記のUI検証MCPとは結構毛色が違って、ランタイムエラーやウィジェットツリーは取れるが、スクリーンショットとか撮ったりできないので、これらを組み合わせると良さそう。トークン消費量は合わせて5%ぐらいなので大丈夫そう。

Maestro MCP/Mobile MCPと、Marionette MCPとはアプローチが違って、Maestro MCP/Mobile MCPiOSだとXCUITest、AndroidだとInstrument Test→UIAutomatorかadb shellをラップしている形になる。

TextやButtonはアクセシビリティラベルが自動でつくから良いが、状況に応じてつけてあげると、MCPくんにもやさしいかも。Marionette MCPWidget Treeを直接操作できるのでSemanticに頼らなくても大丈夫な場面が多いが、TextFieldにはValueKeyが必要だったりした。

UI操作の対応状況を比較すると、3つとも基本操作(タップ/スクロール/入力)はOKだが、Maestro MCP/Mobile MCPはネイティブなので少しできることが多い。Maestro MCPはrun_flowみたいなツールがあって、E2Eシナリオを参考にMaestroの力技でUI操作ができたりするのも強み。

StudyplusにおけるFlutterアプリのApple Watch対応事例 (スポンサーセッション) / こういちさん

speakerdeck.com

学習アプリStudyplusのFlutterアプリに加えて、FlutterでApple Watchにも対応したアプリをリリースした。

教材を選択すると、学習時間をストップウォッチ、タイマーで計測して、学習記録をスマホと連携できる。

得られた結果や、実装においてハマりどころも紹介。ビルドエラーの解消方法や、XcodeだとiOS、watchOSアプリを実行すると片方のログしか確認できないが、macの場合は「コンソール」アプリで両OSのログを確認できることなど。

zenn.dev

Zennで書籍も出されている。(無料!)

connpass.com

3月13日(金) にイベントも開催予定!

Flutter×BLEでプロフィール交換機能を作った話 / YEH CHIHCHUNG さん

台湾出身で、YOUTRUSTでアプリエンジニアをされている。Flutter歴3年。元々は愛媛で草刈りの組み込みエンジニアをされていて、BLEなどの通信技術に馴染みがあるとのこと。

スマホをタッチして名刺交換みたいな機能を作った。BLEで、両方のスマホでCentral+Peripheralを動かす。

pub.dev

プラグインbluetooth_low_energyを使用。RSSI(電波強度)とかも取れる。MTUがAndroidだとデフォルトだと23バイトしか送れないので日本語だと数文字ぐらいになってしまうので注意(設定で512バイトぐらいであれば拡張できる)。

Codemagic さんスポンサーセッション / Masaki Sato さん

Codemagicはモバイルアプリ開発に特化したCI/CDサービスで、Flutterに対応していて無料枠も豊富!(存じ上げております)

お楽しみでルーレット抽選会も実施いただきました(すごい)

株式会社SODAさんスポンサーセッション / [今城 洸幸 (@imasirooo)さん]

ブログ版

zenn.dev

GestureDetector のいろんな引数などについて解説。

onDoubleTap

  • 1回目のタップから2回目のタップまでの間隔が40ms~300msであればダブルタップとして認識する。
  • そのため、onDoubleTapが定義されているとonTapは300msだけ反応が遅くなる

GestureDetectorのonPanStart、onPanUpdate、onPanEnd

GestureDetectorのonPanStart、onPanUpdate、onPanEndを使うと、iOSのメールアプリの複数選択とか、ピクチャインピクチャのUIとかが実現できる。さらに、SpringSimulation を使うとさらにそれっぽさを増すことができる。

Squircle: ClipRSuperellipse について

ほぼ RoundedRectangle なのだが、 SwiftUI の .continuous corner style に近いやわらかい角丸が表現できるClipRSuperellipseというのがFlutter 3.32から入っている

api.flutter.dev

全体的に目の付け所がすごい!

Flutterで実現させる、オンライン診療の着信体験 / 開沼 達也 / ぬまたつ さん

株式会社Linc'well所属。健康管理アプリ「クリフォア」開発チームにてFlutterリードを担当されているベテランエンジニア。

アプリにビデオ通話の着信機能をつけれると、色々便利なので追加した。

機能(MVP)としては以下のようなものを想定。

  • 予約管理システム(ブラウザ)で「発信」を押す
  • 患者さんのアプリが着信する
  • 応答すると、そのままビデオチャットが開始される

実装自体は flutter_callkit_incomingを使って割と簡単に実装実装できた。

pub.dev

が、サイレントプッシュを使ったデモをやってみたが、成功率が低くて困った。サイレントプッシュはアプリがバックグラウンド or フォアグラウンドのときのみ届く。アプリが完全終了(キル)されていると届かない可能性が高いし、OS側で配信が遅延・抑制されることがある。デモやるときはおすすめできない。

iOSでは、ビデオチャットに接続するためのセッション情報等は、VoIPプッシュのペイロードデータで受け取るしかない。Swift側のEngineで保存したローカルストレージへの情報は、Flutter側のEngineでは参照することができないという問題があった(シグナリング問題)。解決するために、MethodChannel経由でFlutter側からSwiftへ問い合わせる方式にした。

Androidでは、Priorityパラメータにhighを設定すると概ねうまくいったが、通知の一種なので事前にユーザーによる通知の許諾が必要になる点は注意。

おわりに

AIエージェント基本的に超かしこいけど、たしかにUIは意外と何回もスクリーンショット渡してラリーしないと完成しないがちな気がするので、UI検証のMCPに関しては個人的にも使い比べたり情報ウォッチしていきたいな〜と思いました。

そのほかの発表ではFlutterなのにApple Watchと連携させちゃったりDart経由でBLE使ったり、CallKit使っちゃったり、本当にFlutterって制限を感じさせないほど何でもできるなとあらためて感じました。

ClipRSuperellipse などマニアックなクラスなども知れて、普通にかなり勉強になりました!また参加したいです。

potatotips #94 iOS/Android開発Tips共有会に参加しました #potatotips

potatotips.connpass.com

最近仕事はクロスプラットフォーム(Flutter)のツールを使った開発が多く、potatotipsの現地参加/ブログまとめは久しぶりなのですが、個人的に思い入れのあるイベント(connpass見たら過去16回参加していた)、過去居た職場(YOUTRUST)、推しスピーカーが発表される(hiragramさん、y.imajo(https://x.com/yimajo)さんなど)など色々重なったので参加してみました。ナンバリングが随分進んでいて、94回目か…となりました。

github.com

当日にハッシュタグつきで投稿された発表資料はこの記事でも見つかる限り添付しましたが、公式に以上のWikiにまとめてくださっているのでご参考まで!

OSSとなったswift-buildでXcodeのビルドを差し替えられるため自分でXcodeを直せる時代になっている / y.imajoさん

speakerdeck.com

swift-buildがオープンソースになったから、Xcodeのビルドの結果が疑わしいときにビルドの過程をデバッグ実行できて便利!らしい

LTでは概要のみで、詳細はSpeakerDeckにありますんでという斬新な発表スタイル

Skipが完全無料・オープンソースになったらしい / Kurogoma4D さん

SwiftUI書いたらiOSだけでなくAndroidJetpack Compose)にもビルドしてくれるSkipというツールがある

skip.dev

github.com

ほかのクロスプラットフォームとの比較もされていて、最終出力がネイティブコード(Jetpack Compose)なのが.NET MAUIとかと意外と近いのでは?みたいな話もされていた(うろ覚え)

5分で慣れるVariadic Generics / ooba さん

www.docswell.com

SwiftのVariadic Generics は、ジェネリクスの型パラメータを可変長で扱えるようにする仕組み ViewBuilderは昔はタプルをいっぱい宣言して実装されてたが、今はこれで実装されていて、10個までの制約もなくなった Swift 5.9から使えるが、Not documented yet

資料では書き方についても細かく解説されている

地図SDKjQueryを目指すMapConductorの紹介 / wf9a5m75 さん

docs.google.com

docs-android.mapconductor.com

統一的なインターフェイスで複数の地図プロバイダを扱えるMapConductorというOSS/プロダクトのご紹介。

GeminiとVeoを使ったとされる動画を交えて発表されているのがわかりやすいのが印象的でした!

www.youtube.com

VRTと真面目に向き合う / hiragram さん

speakerdeck.com

Claude Code などのツールでゴリゴリAIコーディングされているhiragramさん 

github.com

BarredEwe/Prefireは、SwiftUI の Previewを書くと、Sourceryが読んでくれてスナップショットテストやPlaybook、ドキュメントなどを自動生成してくれるツール

Dangerと組み合わせると自動でPRも作ってくれる

生成AI時代のプログラミング、VRTとかE2Eテストのうまみが相対的に上がっているのではというのは非常に共感がある

Riverpod3.xで実現する実践的UI実装 / fumiyasac さん

speakerdeck.com

Riverpod を使って、具体的なサンプルを交えて状態管理付きのUIをどう組むかというトピック。

buttons_tabbar(タブ切替)と dropdown_search(検索+単/複数選択)を組み合わせて作った検索UIの具体的なサンプルの実装のポイントをご紹介されていました。

github.com

iOS単語アプリと課金実装の壁+賞金300万円×7ハッカソン / 湯川 昇平 さん

Geminiを使って単語から自動でフラッシュカードを作るアプリを作られているそうです。自分も似たようなアイデアがあってLLM使ったフラッシュカードのアプリ欲しいな〜と思っていたのですが形にされていてすごい

デザイナーから転向された方で、はじめての課金の実装に詰まっているようで、アイデアなどを募集されていました。

BiDiってなんだ? / tomorrowkey さん

speakerdeck.com

STORESではE2Eテストに力を入れており、決済領域では Appium を使って Android/iOS 共通のE2Eテストを構築している。

Appiumは WebDriver互換のAPIでブラウザ操作できるツール。

BiDi(WebDriver BiDi)は従来のWebDriverが弱かったリアクティブなイベントの捕捉などの双方向通信を可能にする仕様。発音はバイダイ。現時点では難所はあるが、BiDiがもっと使えるようになると、より柔軟で面白いテスト定義ができそう!

まとめ

久しぶりの参加でしたが、良い発表が多くてたのしかった!!こういう会が続いていることに感謝…また参加したいです

ZOZO × ゆめみのコラボイベント Flutter ZY に参加しました #FlutterZY

https://yumemi.connpass.com/event/309316/

ZOZO × ゆめみ のFlutterがテーマのコラボレーションイベント「Flutter ZY」に参加しました!ガーデンテラス紀尾井町は個人的に新卒のとき通っていて思い入れ深いので久しぶりに来れて嬉しい!

内容聞いたメモ書きを共有いたします

FlutterKaigi 2025公式アプリ&WebサイトのCI/CDについて語る

  • mainブランチに push すると、アプリがデプロイされるようなGitHub Actionsを組んでいる
  • 鍵の管理に sops 、ツールのバージョン管理に miseを使っている
  • Apple系の証明書の管理に Cloud-managed certificates を使っている
    • 年に1度の更新の作業が不要なやつ
  • GitHub Action でインジェクションとかができないようにLintしてくれる仕組みがあるらしい
  • Google Workload Identity というのも使っている
    • サービスアカウント鍵をセキュアに扱える

FlutterKaigiのブースで出したミニゲームについて

ZOZOマッチを支えるGraphQL実装の裏側

  • ZOZOマッチでは GraphQL を使っている
  • GraphQL を使って大変だったところ
    • graphql_codegen で生成されたコードの理解が大変だった
    • GraphQL Subscription の疎通
      • WebSocketの認証失敗時にログが出力されないために原因特定が難しかった
  • 工夫したところ
    • 楽観的更新
      • GraphQL の Mutation を送ってから Subscription で変更を検知することで実装
    • アプリバックグラウンドにするとSubscriptionが切れてしまう問題
      • ライフサイクルで復帰時に Query を投げるのに加えて、graphql_flutterSocketClientConfigautoReconnect というのがあるので設定

ブログ版と思わしきもの: https://techblog.zozo.com/entry/zozomatch-realtime-message

新しい風。SolidFlutterで実現するシンプルな状態管理

こんな感じ

import 'package:flutter/material.dart';
import 'package:solid_annotations/solid_annotations.dart';

class Counter extends StatelessWidget {
  Counter({super.key});

  @SolidState()
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Date: ${DateTime.now()}'),
            Text('Counter is $counter'),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => counter++,
        child: const Icon(Icons.add),
      ),
    );
  }
}
  • モダンでシンプルで良い感じ
  • コード生成が不安定な部分もあるらしい

パネルセッション

LTで発表された4名に、モデレーターにゆめみの @K9i_apps さんとZOZOの @Horie1024 さんを加え、パネルセッションがありました。以下の話題がありました。

  • Flutterとの出会い
  • LT振り返り
  • FlutterKaigi について
  • 各自の会社で働いてみての所感

感想

和やかな雰囲気でたのしく参加できました!LYのオフィスでFlutterの勉強会あるのはなんか新鮮ですね

FlutterKaigi のリポジトリは色々参考になりそうなところが多いな〜と読み直していて思いました

#FlutterKaigi 2025 に参加しました

2025年11月13日(木) に開催された FlutterKaigi2025 に参加しました。

聴講したセッションの内容や会場の様子についてご紹介します!

[Keynote] The Flutter Effect

数年前まではドイツで大学生として生活していたルーカス(@LucasGoldner)さん。 Developer Expert(GDE)となっていろいろな経験をするに至ったかについて、バタフライエフェクトにちなんでお話されていました。 (このあたりのストーリーは以前投稿されていたブログ記事にも書かれていました)

ルーカス氏は自分がYOUTRUSTにいたときに運営していた勉強会(YOUTRUST x ゆめみ Flutter LT会)に参加してくれていて、そのとき以来よく話したりする仲でいてくれているのですが、そのときの体験にもポジティブに触れてくれていて、個人的に嬉しかったです。

一発目にふさわしい、爽やかでコミュニティに関わることに前向きになれる内容でした!

あの日のHot reloadはなぜ動かなかったのか? 〜OSセキュリティ(W^X)とJITコンパイラの攻防〜

iOS26.0 beta1の公開直後、FlutterのHot reloadが未満で実機では動作しない問題が発生した。(3.35.0で解決)なぜこのようなことが起きたのか?

前提: Flutterアプリをビルドするとき、 .dartファイルが字句・構文意味解析してASTを生成して、KernelIR(.dill)が作られる。 ここからはrelease modeならAOT、debug modeならDart VM が Kernel IR を読み込み、JIT compilerがhost deviceにあわせて必要なマシンコードを都度メモリにマッピングして実行される。このように都度実行しているのでHot Reloadで差分のIRから処理を差し替えることができる。

2025/02/14、iOS 18.4 beta1で実機デバッグできないというIssue が立った(flutter/flutter#163984)。Dart VM は Hot Reloadするために同じメモリをRX→RWにしてJITの生成コードを書き込んでいたが、これをまたRXに戻そうとする挙動がiOS側で制限されてしまった。

2025/03/05、iOS 18.4 beta2 でこの制限は一旦撤回され、動くようになった。が、「一旦」なので時は流れ…

2025/06/10、iOS26.0 beta1の公開で問題が再発。iOS26では同一のメモリで権限をRXからRWに切り替えることがNGになった(RW=書き込み可能にできなくなったので、JITコンパイル結果がパッチできなくなり、Hot Reloadできなくなった)。W^X(Write XOR Execute)という考え方があり、これに従った形。 https://en.wikipedia.org/wiki/W%5EX

まず、flutter/flutterでは、Simulator fallbackという小さいパッチが入った。JIT が OS の制約でどうしても動かない場合には、ネイティブ実行をあきらめて VM の中のシミュレータで命令を解釈実行するモードにフォールバックするようになった。しかし、これは遅いので最終手段になる。

もうひとつ根本的な解決としては、Dual Mappingという方式がDart VMに取り入れられた。W^X を守りつつ JIT するために、書き込み専用ページと読み取り+実行専用ページを別々の仮想アドレスとして用意し、内部的には同じ物理メモリにマッピングする方式に切り替えた(この切り替えは、vm_remapで実現)。

2025/06/21、これらの修正が適用され、masterに取り込まれる(ここまで11日!)

複雑な話ではありますが、前提を丁寧に説明してくれている上にスライドがよくまとまっていてわかりやすく、とても興味深く拝聴しました!

スライド: https://speakerdeck.com/chigichan24/a-day-hot-reload-was-not-working

Impeller で何が変わったか?

・カスタムシェーダーが扱いやすくなり、Liquid Glass Rendererなどの新しい表現が安定して動くようになった ・Flutter GPUが安定して動くようになった(Impeller を前提に設計されている) ・シェーダーが事前コンパイルされ、初回描画ジャンクが解消された ・Flutterと同じチーム&リポジトリになり開発がしやすくなった

Skia/Impellerはレンダリングエンジンだが、内部でグラフィックスAPIを使っている。グラフィックスAPIには色々ある。OpenGL, Metal, Vulkanとか。OpenGLは歴史的に神のGraphics APIだったが、1992年策定なので、現代のGPUアーキテクチャと比べると非効率な部分や制約があり、問題が指摘されるようになった。Appleは独自の専用グラフィックスAPIとしてMetalを策定して運用、その他のプラットフォームではOpenGLの後続として登場したVulkanが使われるようになった。Skiaは主にOpenGLを使っていたが、ImpellerはMetal/Vulkanを前提としている。

グラフィックスAPIの本質はシンプルで、どの APIOpenGL / Metal / Vulkan)でも基本的には以下の3つの仕事しかしていない。

  1. 座標上に点を置く
  2. 点をつないで三角形にする
  3. 描画(レンダリング)

3のレンダリングを実際に行うためにシェーダーが使われる。GPU は並列処理は得意だが、柔軟な処理は苦手なので、シェーダーという明示的なプログラムで仕事を細かく指示する必要がある。

Skiaは超すごいオープンソースの2D描画エンジンだが、大きな問題として、Metalとの相性の悪さがあった。Skiaはシェーダーをランタイムコンパイルする設計で、Metalにはキャッシュの仕組み自体はあるが、初回スクロールでカクつく影響(ジャンク)が出たりしていた。

Impellerでは、シェーダーをビルド時に事前コンパイルし、Metal/Vulkanに最適化された中間表現としてバンドルする方式に切り替えたことにより、ランタイムでのシェーダーコンパイルが不要になり、初回描画やスクロールでのジャンクが解消された。

Impeller導入の背景に関しては簡単に自分でも追っていましたが、背景情報含めて今回のお話を聞きながら自分の中でも整理できて良かったです!

ハンズオンセッション

ハンズオンセッションはUI にアニメーションやデコレーションを追加する知識を学ぶという内容で、 リポジトリをチェックアウトして、src/presentation/ui_widget/challenge ドキュメントにしたがってchallenge段階的に実装をコメントアウトしていくことによって、関連するクラスの仕様や仕組みが分かるような内容になっていました。アニメーションの実装方法について興味があるけど触ったことがない方は、流れを追っていくだけでいろいろなAPIを見ることができるので、勉強になるのではないかと感じました。

ボリューム感を想像せずに軽い気持ちで申し込んだハンズオンでしたが、思ったより長時間でかなりの大ボリュームでした…! 裏でやっていたセッションも面白そうだったのですが、泣く泣く断念😭

スポンサーブース

スポンサーブースではいろいろな方とお話することができました。初見のスポンサーブースでは開発しているアプリのデモを見せていただいたり、ランダムに出会った顔見知りの方とお話したりしました。

ノリノリでピースしてくれるma_freudさん

見たセッションについての話題になったときは、Jesse Ezell(@jezell)さんのようなFlutterコントリビューターのポストが起点となり、Skia Graphite の話や、Impellerを指摘する議論スレッドがあるという面白そうな情報を教えてもらったりしました。

おわりに

個人的にFlutter開発の経験値がある程度溜まってきて、あまりコミュニティで勉強したいことが思いつかないなと正直思い始めているタイミングでもあったのですが、参加してみると、やはり色々なことを調べようと思う起点になるし、興味深い話や深堀れる話もたくさんあると感じました。また来年もあればぜひ参加したいと思います!

CA.flutter #4 に参加しました

cyberagent.connpass.com

サイバーエージェントさんのイベント CA.flutter #4 に参加しました。最近は勉強会出不精のわたくしですが、何気に皆勤賞でございます

過去の参加レポート

Android 16KBページサイズ対応をはじめからていねいに

概要

developer.android.com

2025年11月以降、Google Playにアプリをアップロードする際に、16KBページサイズに対応が必須になった(今までは、4KB)。厳密に言うと target SDK を API35(Android 15) にした場合に必要になるのだが、この対応も2025年8月31日までなので、どちらにしろ11月頭までにどちらも必須になるという感じ。

サードパーティ製ライブラリについて、対応状況について調べたところ Firebase関連、datadog_flutter、geolocatorはすべて対応済み、shared_preferences などよくあるライブラリは対応していた。

Rive と image_picker に関しては少し手間取ったとのこと。

対応方法

対応状況のチェック

まず普通にリリース版をビルド

flutter build apk --release

check_elf_alignment.sh を使って (ここで紹介されているやつ https://developer.android.com/guide/practices/page-sizes?hl=ja)チェックすると、ALIGNEDかUNALIGNEDかが出てくる。UNALIGNEDなら対応が必要

arm64-v8aとx86_64が対応されていれば良くて、32bit系(armeabi-v7a, x86)などは対応不要

build.gradle の設定

targetSdk/compileSdkを 35 に設定して、AGP バージョン 8.5.1 以降にアップグレードする

NDK28+ではない場合はリンカーフラグの設定をする必要がある (https://developer.android.com/guide/practices/page-sizes?hl=ja#compile-r27 このあたり)

また、androidx.coreの更新も必須で、 androidx.core 1.16.0 以降が16KBページサイズに対応している。

確認

16KBテスト環境は、Google公式の推奨環境があるらしく、丁寧にやるなら Pixel 8/8a以降でAndroid 15 を Flash Tool で書き込むか、 Android Studio Iguana 以降で 16KB page size system image というのを使う

adb shell getconf PAGE_SIZE で 16384が出て、アプリが普通に起動できればOK!

スライドのソース

github.com

つまずいたところ

  • INSTALL_FAILED_INVALID_APK になった場合はクリーンビルドを試す
  • AGP のバージョンが上がってるか gradle-wrapper.properties をチェック
  • NDK がインストールされてるか SDK Manager でチェック

マッチングアプリにおけるフリックUIで苦労したこと

Koigram というマッチングアプリでフリックUIを作った

ChatGPT にUIのコンセプトの図を渡して、アルゴリズムを説明してもらいながら作った

苦労したところ1. 縦スクロールとかぶる

外側のWidgetではまずGestureDetectorで、スキップ or いいねのフリック判定、回転角度、フリック速度の計測を行う

内側のWidgetでは、スクロール操作より先にタッチイベントを受け取るためにRawGestureDetectorを利用して、内側のスクロール操作を有効にしていいかどうかを制御した。縦方向であれば何もしなくてもいいが、横方向のスクロールであれば、SingleChildScrollViewのphysicsをNeverScrollableScrollPhysicsにすることによって親Widgetがフリック操作を拾えるようにした

苦労したところ 2. 連続タップされても画像がちゃんと出てほしい

アップロードした画像そのままでは、画像がデカすぎる まず画像のクオリティを調整した sharp で WebP+quality:60 で配信しているが、このあたりはRemote Configで後からでも調整できるようにした

フリックされてもうユーザーに見せる必要がなくなった画像のロードはキャンセルするようにした

Figma Dev Mode MCP Serverを用いたUI開発

Figma Dev Mode MCP Serverを使いたい(わかります)

  • Code Connect という機能を使うと、サービス上のコード紐づけることができ、精度向上が見込めるらしい
    • が Flutter でやる方法がまだ良くわかっていない
  • プロジェクト側のルールは整備しておくと良い(できるだけクラスコンポーネントで作ってとか)

試してみたところ、思ったよりちゃんと実装されている。色、タイポグラフィも定義されているものを使っている。細かいTypographyが違ったりバッジの位置などを勝手に変えられたりはしている

脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性

前置き

Riverpod は素晴らしいライブラリです

Riverpod の問題点

  • 依存が根深すぎる
  • 自動生成を推奨しているが、コスト大

もっと薄い状態管理パッケージがほしい

fqueryの紹介

よくApp StateとEphemeral Stateとか言ったりするが、実際には Server state というサーバーデータのキャッシュを分けて考えたほうがいいのではという主張がある (ref. https://tanstack.com/query/latest/docs/framework/react/overview, https://zenn.dev/taisei_13046/books/133e9995b6aadf/viewer/573083)

これに基づいて制作されているライブラリがTanStack Query(旧React Query)で、これをFlutterに持ち込んだのが fquery。

使い方

useQuery, useInfiniteQuery(無限スクロールとか), useMutation(データ更新)などのメソッドが用意されている

キャッシュ管理したいという観点でいうと、全然違う文脈だがGraphQLでも同様のことはできる

課題に思った点

  • query keyの管理が難しい
    • Reactにはquery-key-factoryというのがあるが、Flutterにはない。これを管理するためのコードを作ったりcustom_lintでチェックしたりするようにした
  • Selector に対応していない
    • APIから受け取った値をUIに都合の良いモデルに変換するのをよくやる
  • テスト方法について明記がない
    • createQuery のように query 部分を切り出すと切り出すことができる

おわりに

今回も勉強になりました Android 16KBページサイズ対応はどちらにしてもやることになると思うので予習できてよかった フリックUIの話は画像の扱い方とか参考になりました Figma MCPサーバーはめちゃ期待しているので続報を期待したい fqueryは初めて知ったのですがめちゃ課題には共感できるので知れて良い視点が得られました 立派な会場で配信もあって非常に快適でした 運営の方々もいつもありがとうございます!

デジタルデトックスチャレンジ 2025/03 版 経過報告

kumamotone.hatenadiary.jp

これ書いてから1週間経った。経過報告

Xの閲覧に関してはかなり改善した。家のWiFiではXを一切開けなくするというルールを追加しただけだが、個人的には効果てきめんだった。1日平均2時間以上削減できている。macで見る時間はカウントされていないが、体感増えている感じはない。(PCでは縦スワイプで動画を見る機能がなく、おすすめタブの非表示も比較的簡単にできるので、タイムラインを表示するだけだとそこまで無限に時間を使えない)

スマホゲームに関してもアンインストールしたままなので、こちらも使用時間ゼロ。まだ全然ではあるが、比較的クリエイティブな活動や個人の開発に多く充てられたと思う。また、運動に時間を割けたため、比較的気分的な不調は抑えられたんじゃないかと思う。

Digital Wellbeing アプリに比べると時間が不正確で小さめに出やすい気がするのだが、StayFreeで統計を取って見るのはモチベーションになる。Apple MacアプリとChrome拡張機能もある。アクセシビリティの権限を渡さないといけないのはやや心配な感じがするが、アメリカの大きめの企業だし基本的に匿名化して扱ってくれている感じはする。

本当にTrusted by Appleなのか

営業日はかなり生産的に過ごせたなという気持ちがある一方、休日の過ごし方は結構気をつけないといけないなと思う。大きめのストレスが掛かると何もかもやる気が無くなって自暴自棄になったりする(今週のTwitter視聴はほぼこのタイミングだった)ので、ここだけミスった感じがする。

これへの対策はなかなか難しく、なんか抽象的なアイデアしか思いつかないが、以下のようなところを今週は心がけてみたい。

  • ランチは極力控え、粗食で済ませる
  • 昼間に運動、長めの掃除などをしない(疲れて夕方に横になってしまうのを防ぐため)
  • (ストレスを避け自分のペースを保つことを心がける)

うーむ抽象的なプランしかないとやはり心配だ…。ともかく家でスマホでXを開かないは継続で!