jiyuujin

• 複雑なUIを作るのが好きです
  • Vue/Nuxt/React/Next/Scala/Swift
• スタッフとして色々と参画中
  • JAWS DAYS 2021 個人スポンサー
  • Flutter Japan User Group (Osaka)
  • v-kansai / kansai.ts
  • PWA night
• プロフィールサイト
  • https://yuukit.me
• 技術ブログ
  • https://webneko.dev

喋り相手

募集中

Flutter Japan User Group

東京・大阪

それぞれに運営スタッフ

主な活動内容

• 東京運営
  • ミートアップを中心に開催
• 大阪運営
  • ミートアップに限定していない
  • もくもく会を毎月開催
  • ハンズオン企画を 2-3 月おきに開催
  • 最近では Twitter Spaces を使った活動など幅広く

ハンズオン企画

Flutter アプリを作る

Flutterとは

• Google社が開発・提供しているクラスプラットフォーム対応アプリ
• ネイティヴアプリのみならずWebやデスクトップアプリも製作可能

簡単にデモを

エミュレータ起動

• Android Studio を使うにしても VSCode を使うにしてもGUI操作を簡単に使える
  • flutter run
  • (必要に応じて) flutter pub get

こういう経緯から始めた

• バックボーンに自分自身が勤怠管理アプリ (ChangeNotifier) を製作していた経験
• 決め手は「フロントエンドカンファレンス関西2019」で登壇者だった大西優司さんとの出会い
• この詳細についてはブログをご確認ください

2019年11月下旬始動

これまでに重ねること計8回

リアタイ延べ70名

満足度平均8.64Pt

実際の様子って

初回に限りオフラインそして今のコロナ禍

辞書アプリを作る

• アプリは Firebase 周辺技術を使う
  • Firestore に単語（英語・日本語）を保存する
  • Firebase Extension のひとつ Translate Text を利用して入力した単語の翻訳を行う
• テーマは自ら当時 Firebase に触れていたのを理由に、Firebase をテーマに選定した
  • 2回目以降はアンケートに基づいてテーマを選定した

辞書アプリ以外で

今の流行りに乗ったり

お誘いを受けたり

当初は不安を抱えるも

オンラインを武器に

具体的にやったことは

オンラインを進める上での武器

• オンライン形式の開催ルールを設定する
• ドキュメントサイトを製作する
• ターゲットを極力絞り定めた工程をこなす

オンライン形式の開催ルールを設定する

1️⃣

それぞれの役割は

• Zoomで音声のやりとりを補佐
  • 配信用Zoom、YouTube連携もここで
  • メンターと参加者はブレイクアウトルームを切って、3〜4名のチームごと動いてもらう
• Slackで文字情報のやりとりを補佐
  • その日限りかつ各メンターさん専用のチャンネルを準備する

ドキュメントサイトを製作する

2️⃣

公式でも分かり易い

当企画のテーマにより合った解説があると

ドキュメントサイト

https://flutter-osaka.netlify.app/

VuePress + Netlify

VuePress をこう活かす

• そもそも VuePress とは
  • Markdown ベースで書ける静的サイトジェネレータ
  • ナビゲーションメニューが用意されている
  • コードハイライトも書ける
  • Vue Component を作ってカスタマイズしたい箇所のデザインを書ける
• ビルド・静的サイトジェネレートは vuepress build 一発かまして Netlify に上げる

色々と使えて便利

当サイトの主な用途は

• ハンズオンの事前準備に利用する
  • 当日までに行うべき環境構築を記載
    • Firestore をテーマにした回では、事前に Firebase アカウントの作成を済ませることなど
  • 配信動画（あらかじめ収録しておいた動画を YouTube にアップ）のリンクを記載
  • 成果物となるサンプルリポジトリのリンクを記載
  • 解説書と称した用語集のリンクを記載
• ハンズオン当日に気持ち良くスタートできるようにする

配信動画について

• 当初はリアルタイム配信を行っていた
  • その理由はハンズオン当日に起こる予期せぬエラー（その多くは環境依存に伴うエラー）でメンターの負担が増えた
  • メンターだけで上記の課題が解決すればまだ良いのだが、先生の配信にも影響し全体として時間通りに物事が進まない場面が増えた
• 一部「事前収録」を取り入れたりその解消に努めた

それでも環境構築してこない方もいて

一週間前周知の他無し

💡

ターゲットを極力絞り定めた工程をこなす

3️⃣

あくまでアプリを動かす目的で余計なコストを払いたくない

Flutterアプリを動かすこと

• 実機による挙動の確認は行わない
  • もし実機デバッグをしたい場合は、ハンズオン企画の後で #handson や #questions などで聞くようにお願いしている
• Android エミュレータで挙動を確認する
  • iOS エミュレータでは挙動を確認しない
  • MacOS 利用者だけではなく Windows 利用者もいる
  • 基本的には iOS エミュレータでも動作すると思うが動作保証していない
• エディタに Android Studio を使う
  • 最近では VSCode を使う方が増えているので、今後変わる可能性も否定できない

Androidエミュレータに絞る

• アプリの挙動を確認する方法が参加者によってバラバラになるのを防げる
• 事前に準備するドキュメントの範囲を Android Studio のセットアップに限定できる
  • メンター・スタッフの作成する手間を省ける
  • 参加者の構築する手間を省ける
• 絞る代わりに、MacOS / Windows 双方の動作確認など念入りに準備を進める

それでもぶち当たる

Androidエミュレータが起動しない

その他色々あって

• 環境依存に伴うエラーが多かった
  • HAXM / Hardware Accelerated Execution Manager のエラーに伴いエミュレータが起動しない
  • エミュレータは起動している。しかしエミュレータ実行でコケる
• ローカルに落としてきたDartバージョンと、とあるFlutterプロジェクトに限って使っているDartバージョンの不一致に伴い、エミュレータが上手く動かない
• 環境構築が上手く行かない、ハンズオン当日このような類のエラーに出会してしまう

最後に自分なりのDevRelを簡単にまとめ

• コミュニティのプラットフォームにSlackを活用
  • あくまで目的はアプリを動かすこと
  • ドキュメントを一から作ること
• イベントのスタッフ・登壇者に潜り込もう
• カンファレンスに参加しよう、可能なら懇親会まで

今後の野望も