Open7
Flutter プロジェクトをちょっとかっこよくするTipsメモ
kenty (ケンティー)Flutter プロジェクトに絞って Tips をメモしていく。
Flutter 以外にも使える Tips でも、 Flutter プロジェクトで有用なら記載する。
大きくなったら記事にしたい。
そもそもの create コマンドをメモ。
github で repository 作成後、clone してきて以下を実行する。
${hoge} は変数。 例えば僕なら ${組織ID}=dev.kenty、${アプリ名}=barcodeokapi
flutter create --org ${組織ID} --project-name ${アプリ名} .
※ 末尾のdotを忘れないように。プロジェクト生成する場所を示している。
kenty (ケンティー)新規参画者など迷わないよう、PRのテンプレートを登録しておくことができる。
以下を .github/PULL_REQUEST_TEMPLATE.md としてプロジェクトに配置すること。
内容は プロジェクトによって調整して良い。
.github/PULL_REQUEST_TEMPLATE.md
## 概要
<!-- この PR でやったことの要約や、関連するissueを示してください。 -->
AAA の為、 BBB を CCC しました。
issue: #xx
## やったこと
<!-- やったことを箇条書きしてください。多い場合は、PRのスコープを見直してください。 -->
- aaa [コミット番号](コミットURL)
- bbb [コミット番号](コミットURL)
- ccc [コミット番号](コミットURL)
## 相談
<!-- 特に気になる箇所がある場合は記載してください -->
## キャプチャ
<!-- 変更内容がわかるように、キャプチャを貼ってください -->
<img src="" width="300">
## 参考
<!-- 参考にしたサイトや、参考にしたコードがあれば記載してください -->
- [参考にしたサイト](https://example.com)
- [参考にしたissueやPR](https://xxx/issues/xx)
- 参考にしたコード xxx.dart の xx 関数
こんな感じで、次回以降 PR のフォーマットが整う。
kenty (ケンティー)build_runner で自動生成するファイルの差分について、PRで差分を目立たなくできる。
Unity のプロジェクトでも同様のことをした記憶がある。
プロジェクトルート直下に以下を配置する。
.gitattributes
# 自動生成されるファイルの差分をPRで collapse するための設定
*.freezed.dart linguist-generated=true
*.g.dart linguist-generated=true
こんな感じで、 collapse 状態で表示される。必要な時のみ、 Load diff を押下して差分を確認できる。
kenty (ケンティー)README はもちろん記載する。
長くなると読む気が失せるので、全部ここに書くのではなく、 docs/xxx.mdを適宜作成して 1 ファイルの量を減らす。
commit message についてもルールを設けたいので、拙文ですが、 参考として以下を添付してます。
README.md
# ${プロジェクト名}
プロジェクトの概要。画像など含めてわかりやすく。
## サポートプロットフォーム
どのプラットフォーム(ios,android,web...)の、どのバージョンまでサポートするのか。
サポートの周期はどうするか。
## 開発
環境わけについて記載する。IDEごとの実行設定を記載しておく。
### 開発ツール
以下のツールを利用します.
★ のついたツールは招待必須なので, まだの方はメンバーに声をかけて加入してください.
例:
- Flutter 大学 (Slack に join する為に加入必須)
- github (コード置き場, Issue 管理)
- Figma (デザイン置き場)
- ★ Firebase (バックエンドの提供やログの収集)
- ★ Slack (メンバー同士のコミュニケーション)
- ★ Confluence (議事録や要件定義)
- Google meet (週一のMTGや画面共有が必要なコミュニケーション)
...
### アーキテクチャ
クライアントアプリ、バックエンドについて簡潔に。
ディレクトリ構成や状態管理についても触れる。
採用アーキテクチャについて、簡潔に記載。
### ブランチ運用
例：
`git-flow` を採用する. 一旦頻出するブランチのみ列挙する.
| ブランチ名 | 役割 |
| --- | --- |
| main | 本番環境と同じ. このブランチでは作業しない. |
| develop | 開発用ブランチ. このブランチでは作業しない. |
| feature | 作業ブランチ. develop から分岐し, develop にマージする. |
### commit message
commit message の書き方をある程度揃え, レビューの負荷軽減を図る.
[Angular の規約](https://github.com/angular/angular/blob/68a6a07/CONTRIBUTING.md#-commit-message-format) に則ったフォーマットで,
prefix は [commitizen](cz-conventional-changelog-ja) に従う.
頻出する prefix は以下.
```
feat: 新機能
fix: バグ修正
docs: ドキュメントのみの変更
refactor: リファクタリングのための変更（機能追加やバグ修正を含まない）
chore: その他の変更（ソースやテストの変更を含まない）
```
`git log` で過去の commit message を参考にしたり, [commit message で TTNE する方法](https://zenn.dev/ken_ty/articles/417f58aaa67ec3) を参考にしてください.
### 便利なコマンド集
| コマンド | できること |
| --- | --- |
| `open ios/Runner.xcworkspace/` | Runner を Xcode で起動する |
| `flutter pub run build_runner build --delete-conflicting-outputs` | build_runner を実行する |
| `flutter pub run build_runner watch --delete-conflicting-outputs` | ファイルを watch して build_runner を実行する |
.gitignore をいい感じにしておく。
android, ios のみ対応として記載。 web など対応するなら必要に応じて修正する。
.gitignore
# Miscellaneous
*.class
*.log
*.pyc
*.swp
.DS_Store
.atom/
.buildlog/
.history
.svn/
# IntelliJ related
*.iml
*.ipr
*.iws
.idea/
# Flutter/Dart/Pub related
**/doc/api/
.dart_tool/
.flutter-plugins
.flutter-plugins-dependencies
**/generated_plugin_registrant.dart
.packages
.pub-preload-cache/
.pub-cache/
.pub/
build/
flutter_*.png
linked_*.ds
unlinked.ds
unlinked_spec.ds
# Android related
**/android/**/gradle-wrapper.jar
.gradle/
**/android/captures/
**/android/gradlew
**/android/gradlew.bat
**/android/local.properties
**/android/**/GeneratedPluginRegistrant.java
**/android/key.properties
*.jks
# iOS/XCode related
**/ios/**/*.mode1v3
**/ios/**/*.mode2v3
**/ios/**/*.moved-aside
**/ios/**/*.pbxuser
**/ios/**/*.perspectivev3
**/ios/**/*sync/
**/ios/**/.sconsign.dblite
**/ios/**/.tags*
**/ios/**/.vagrant/
**/ios/**/DerivedData/
**/ios/**/Icon?
**/ios/**/Pods/
**/ios/**/.symlinks/
**/ios/**/profile
**/ios/**/xcuserdata
**/ios/.generated/
**/ios/Flutter/.last_build_id
**/ios/Flutter/App.framework
**/ios/Flutter/Flutter.framework
**/ios/Flutter/Flutter.podspec
**/ios/Flutter/Generated.xcconfig
**/ios/Flutter/ephemeral
**/ios/Flutter/app.flx
**/ios/Flutter/app.zip
**/ios/Flutter/flutter_assets/
**/ios/Flutter/flutter_export_environment.sh
**/ios/ServiceDefinitions.json
**/ios/Runner/GeneratedPluginRegistrant.*
# Android
# android/
# ios
# ios/
# web
web/
# macOS
macos/
# Windows
windows/
# Linux
linux/
# Coverage
coverage/
# Symbols
app.*.symbols
デフォルトだと Android で日本語テキストが中華風になるのでフォントを入れる。
インターネット経由だとターミナルでWARNING出たりするので、ttfをダウンロードする方法が良き。
以下を参考にして導入する。