Flutterハンズオン 1

Transcript

1. Flutterハンズオン 1 2024/08/06 社内勉強会 えばた あや
2. 今日話すこと 1. Flutterとは？ 2. 環境構築 - 最後まで終わらなかったら宿題です（結構ボリューミー） - 時間がかかる部分もあるのでゆるく話しながらやりましょう〜
3. 1. Flutterとは？
4. Flutterとは - Google によって開発、サポートされているオープンソースの フレームワーク - Dart（コンパイル型言語）で開発 - クロスプラットフォームに対応（⇔ ネイティブ） - iOS、Android、Web、Linux、macOS、Windowsが開発できる
5. ネイティブアプリケーションとは - AndroidやiOSなどの特定のプラットフォーム向けにアプリケーション をコーディングすること - 各プラットフォーム向けに開発するため、多くのコードとエンジニアが 必要
6. クロスプラットフォームアプリケーションとは - 1つのプログラミング言語と1つのコードベースで複数のプラット フォーム用のアプリケーションを構築できる - よって、コストと時間が削減できる
7. Flutterの利点 - ネイティブに近い高速で効果的なパフォーマンス - ユーザーがアプリケーションへのアクセスに使用するプラット フォームに関係なく一貫したビジュアルを提供 - 使いやすさを重視 - ホットリロード - ウィジェットインスペクター: UIレイアウトと状態を可視化
8. 2. 環境構築
9. 事前準備 Android Studio - https://developer.android.com/studio?hl=ja からインストールする - 以下をインストール時に選択する - Android SDK Platform, API 34.0.5 - Android SDK Command-line Tools - Android SDK Build-Tools - Android SDK Platform-Tools - Android Emulator
10. 事前準備 Xcode - App Storeで「Xcode」で検索してインストール（時間かかるかも） - Xcodeを起動してライセンスにAgree
11. 事前準備 エディタ - VSCodeで実装したい場合は入れておいてください！
12. 大まかな流れ 1. Flutter SDKをインストール 2. Android Studioの設定 - Androidのエミュレータを使えるようにするため 3. Xcodeの設定 - iPhone（iOS）のシミュレータを使えるようにするため 4. お好きなエディタにFlutterの設定をする - 実装時に使用する
13. 対応エディタ - お好きなの選んでください！ - VSCode - Android Studio - IntelliJ IDEA（今回は扱わない）
14. Flutter SDKをインストール - Flutter SDKをzipでダウンロードして構築をする（今回はこっち） - VSCodeから構築をする - Homebrewでインストール $ brew install --cask flutter https://docs.flutter.dev/get-started/install/macos/mobile-android#use- vs-code-to-install-flutter
15. Flutter SDKをインストール 0. Rosettaをインストールする（Apple Siliconのみ） $ sudo softwareupdate --install-rosetta --agree-to-license
16. Flutter SDKをインストール 1. Flutter SDKのzipをダウンロードする https://docs.flutter.dev/get-started/install/macos/mobile-android#downl oad-then-install-flutter
17. Flutter SDKをインストール 2. developmentディレクトリにてzipを解凍する $ unzip ~/Downloads/flutter_macos_arm64_3.22.3-stable.zip \ -d ~/development/
18. Flutter SDKをインストール 3. パスを通す ~/.zshenvにパスを追加 $ echo export PATH='$HOME/development/flutter/bin:$PATH' \ >> ~/.zshenv $ source ~/.zshenv 以下でflutterコマンドが使えるようになってることを確認 $ flutter --version
19. Android Studioの設定 1. SDK Managerで必要なものを確認する 1. More Actionsまたは三点リーダからSDK Managerを開く 2. 以下が入っているか確認 3. なければチェックを入れてApplyでインストール SDK Platformsタブ - Android SDK Platform, API 34.0.5
20. Android Studioの設定 SDK Toolsタブ - Android SDK Command-line Tools - Android SDK Build-Tools - Android SDK Platform-Tools - Android Emulator 確認したらOKで設定画面を閉じる
21. Android Studioの設定 2. Androidエミュレータの設定 1. More Actionsまたは三点リーダからVirtual Device Managerを開く 2. +ボタン押下 3. 適当なデバイスを選んでひたすらNextからのFinishを押下
22. Android Studioの設定 3. Androidのライセンスに同意する 以下を実行してひたすらy $ flutter doctor --android-licenses
23. Android Studioの設定 4. Androidの環境が構築できていることを確認する 以下を実行してAndroid toolchainの項目にチェックが入っていたらOK $ flutter doctor
24. Android Studioの設定 5. AndroidでFlutterアプリが起動できることを確認する 1. Device Managerで先ほど入れたデバイスの▶を押して起動する 2. 以下を実行（ディレクトリを作成したい場所で） $ flutter create sample $ cd sample $ flutter run 3. カウンターアプリが表示されたら成功
25. Android Studioの設定 参考 https://docs.flutter.dev/get-started/install/macos/mobile-android
26. Xcodeの設定 1. インストール済みのXcodeのバージョンでコマンドラインツールを 使うように設定する $ sudo sh -c \ 'xcode-select -s /Applications/Xcode.app/Contents/Developer \ && xcodebuild -runFirstLaunch'
27. Xcodeの設定 2. Xcodeのライセンスに同意する 以下を実行して最後にagreeする $ sudo xcodebuild -license
28. Xcodeの設定 3. iOSのシミュレータをインストールする $ xcodebuild -downloadPlatform iOS 以下で起動 $ open -a Simulator
29. Xcodeの設定 4. CocoaPodsをインストールする ネイティブiOSコードを含むFlutterプラグインを使用する時に 必要になってくる $ sudo gem install cocoapods $ echo export PATH='$HOME/.gem/bin:$PATH' >> ~/.zshenv $ source ~/.zshenv 場合によってエラーが出るのでエラー指示通りにコマンドを打っていく
30. Xcodeの設定 5. iOSの環境が構築できていることを確認する 以下を実行してXcodeの項目にチェックが入っていたらOK $ flutter doctor
31. Xcodeの設定 6. iOSでFlutterアプリが起動できることを確認する 1. 先ほど作成したsampleディレクトリ内で以下を実行 $ open -a Simulator $ flutter run 2. カウンターアプリが表示されたら成功
32. Xcodeの設定 参考 https://docs.flutter.dev/get-started/install/macos/mobile-ios
33. お好きなエディタにFlutterの設定をする VSCode 1. 先ほど作成したsampleアプリをVSCodeで開く 2. Flutterのプラグインを入れる（タブの　　から検索！） 3. 先ほどの手順通りにAndroidエミュレータ/iOSシミュレータを起動 4. コマンドパレット（F1）で「flutter: Select Device」を入力 5. 起動しているデバイスを選択 6. VSCodeのタブから「実行とデバッグ（Run and Debug）」を押下
34. お好きなエディタにFlutterの設定をする Android Studio 1. 先ほど作成したsampleアプリをAndroid Studioで開く 2. Flutterのプラグインを入れる 3. デバイスを選択して実行 - Android StudioからもiOSが実行できる！
35. まとめ - Flutterはクロスプラットフォームでのアプリケーション開発が可能 - Android StudioのAndroidエミュレータを使って開発する - XcodeのiOSシミュレータを使って開発する
36. 参考資料 - 本家の環境構築サイト - https://docs.flutter.dev/get-started/install - Roadmap（学習のためのロードマップサイト） - https://roadmap.sh/flutter - DartPad（web上で実装できる） - https://dartpad.dev/