はじめに
ChatGPTについて学んでおいたほうがいいよねってことで、ChatGPTを使ってアプリを開発していこうという企画の二つ目の記事です。
実装をどこまでChatGPTに任せられるか？というのをテーマに、ChatGPTを使って実装していこうと思います。
アプリ作成手順一覧
目指すのは、ChatGPTなどを使ったアプリの高速開発をすることなので、やり方を確立させるべく現状考えている手順を書いていきます。
今回の記事は実装部分を書いていきます。
- アプリの方向性決定
- 要件定義
- 設計
- 実装 ⇦今回の記事
- 単体テスト
- 結合テスト
- システムテスト
- リリース
アプリ実装に必要なもの
前回の記事にも書きましたが、アプリの実装に必要なもの一覧です。
今回は「各画面の遷移を実装」から書いていきます。
開発環境のセットアップ
Flutterのインストールと設定
開発用エディタ（例：Visual Studio Code）のインストールと設定
エミュレータや実機でのデバッグ環境の構築
アプリの基本構造の作成
アプリの全体構造を定義するためのコードを作成
各画面の遷移を実装 ⇦ ここから実装していく
デザインテーマや共通スタイルの設定
ローカルデータベースの設定
SQLiteを利用したデータベースの構築
ユーザープロファイル、プログレスデータ
データに関するテーブルとスキーマを作成
各機能の実装
画面の作成
テストとデバッグ
各機能のユニットテストを作成
エミュレータや実機でのデバッグとテストを実施
実装
画面の遷移実装
画面の遷移の実装は下記でお願いしてみました。
各画面の遷移を実装をgo_routerで実装してください
すると、
私はAIアシスタントであるため、コードを直接書くことはできませんが、
Flutterでgo_routerを使用して画面遷移を実装する方法について説明します。
...
という回答が返ってきたので、大人しく自分で実装しようと思います。。。
デザインテーマや共通スタイルの設定
ここでは最初に、配色、フォントを決めてもらおうと思いました。
このアプリに合わせたデザインをマテリアルデザインに則って定義してくれますか？
カラースキーム: 明るく楽しいカラーを使用します。プライマリカラー、アクセントカラー、
背景色などを選択し、カラーパレットを定義します。
タイポグラフィ: タイポグラフィは、アプリ全体で一貫性を保ち、読みやすさを確保するために重要です。
RobotoやNotoなどのマテリアルデザインに適したフォントを選択し、
異なるテキストスタイル（見出し、本文、キャプションなど）に適用します。
アイコン: アプリ内で使用するアイコンは、マテリアルデザインガイドラインに従ったアイコンセットを選択します。
必要に応じてカスタムアイコンを作成することもできますが、
できるだけマテリアルデザインの原則に沿ったデザインにしましょう。
レイアウト: マテリアルデザインでは、コンポーネント間に一貫性のある間隔を設けることが推奨されています。
8dpのグリッドシステムを使用し、要素間のマージンとパディングを調整します。
また、レスポンシブなデザインを実現するために、画面サイズやデバイスに応じて
レイアウトが適切に調整されるようにします。
コンポーネント: マテリアルデザインでは、様々なUIコンポーネントが提供されています。
ボタン、カード、リスト、ダイアログなどのコンポーネントを適切に使用し、
アプリ内で一貫したスタイルを保ちます。カスタムコンポーネントを作成する場合も、
マテリアルデザインのガイドラインに従ってデザインしてください。
アニメーション: マテリアルデザインは、自然で直感的なアニメーションを重視しています。
画面遷移、要素の表示/非表示、インタラクションなどにアニメーションを適用し、
ユーザーエクスペリエンスを向上させます。ただし、アニメーションは過剰にならないように注意し、
パフォーマンスへの影響も考慮してください。
実際の配色やフォントが欲しかったので続けて、
マテリアルデザインに沿った配色例を出してもらえますか？
とお願いすると配色例が出てきました。
テキストなので視覚的にレビューできませんが一旦これでいこうと思います.
続いて、
この配色例をFlutterのコードにできますか？
と聞いてコードに変換してもらいました。
Theme Dataのクラスと、それをどう使うかまで説明してくれてめちゃくちゃ便利です。
class AppTheme {
static ThemeData get theme => ThemeData(
primaryColor: Color(0xFF4CAF50),
primaryColorDark: Color(0xFF388E3C),
primaryColorLight: Color(0xFFC8E6C9),
accentColor: Color(0xFFFFC107),
textTheme: TextTheme(
headline1: TextStyle(color: Color(0xFFFFFFFF)),
headline2: TextStyle(color: Color(0xFFFFFFFF)),
headline3: TextStyle(color: Color(0xFFFFFFFF)),
headline4: TextStyle(color: Color(0xFFFFFFFF)),
headline5: TextStyle(color: Color(0xFFFFFFFF)),
headline6: TextStyle(color: Color(0xFFFFFFFF)),
subtitle1: TextStyle(color: Color(0xFF757575)),
subtitle2: TextStyle(color: Color(0xFF757575)),
bodyText1: TextStyle(color: Color(0xFF757575)),
bodyText2: TextStyle(color: Color(0xFF757575)),
caption: TextStyle(color: Color(0xFF757575)),
),
backgroundColor: Color(0xFFFFFFFF),
scaffoldBackgroundColor: Color(0xFFFFFFFF),
errorColor: Color(0xFFF44336),
);
}
ただ、上記のコードの一部は、現在のバージョンでは非推奨となっていたので、適宜変更する必要はありましたが、実装すると以下のような配色となりました。
続いて、フォントも決めてもらいます。
このアプリで使うフォント例を出してくれますか？
するとご丁寧にフォントのダウンロード方法やプロジェクトへの導入方法まで教えてくれました。
特にフォントにこだわりがなかったので、決めてくれたフォントで実装していこうと思ったのですが、このフォントに関しては日本語のフォントの考慮がされてないと思ったので、
アプリのフォントですが日本語のことも考慮してますか？
すみません、日本語フォントの考慮が抜けていました。日本語のフォントに対応するには、以下の手順で設定を変更します。
まず、日本語に対応したフォント（例: Noto Sans JP）をpubspec.yamlファイルに追加します。
...省略
思った通り、日本語のことは考慮されていませんでした。
今回のアプリの要件は子供向けなのですが、Noto Sans JPはスタイリッシュすぎるなと思い、
このアプリで使う日本語フォントなんですが、他におすすめはありますか？
GoogleのFont以外でも大丈夫です。
と聞いてみました。Google以外と指定したのはマテリアルデザインに準拠しているのでそれ以外のフォントが出てこなかったからです。
もちろんです。以下にいくつかのおすすめ日本語フォントを紹介します。ライセンスや利用条件に注意してください。
M+ FONTS (M+フォント)
M+ FONTSは、シンプルで軽量なデザインが特徴の日本語フォントです。複数のウェイトが用意されており、様々な用途に適応できます。
IPAフォント (IPAゴシック / IPA明朝)
IPAフォントは、情報処理推進機構 (IPA) が開発したオープンソースの日本語フォントです。クリーンでシンプルなデザインが特徴で、ウェブやアプリケーションなどで広く利用されています。
GenJyuuGothic (源柔ゴシック)
GenJyuuGothicは、源ノ角ゴシックをベースにした、独特の丸みを帯びたデザインが特徴の日本語フォントです。子供向けのアプリにも適したデザインで、ウェブやアプリケーションで利用できます。
Rounded M+ (丸角フォント)
Rounded M+は、M+ FONTSをベースにした丸角フォントです。丸みを帯びたデザインが特徴で、子供向けのアプリにも適しています。
あおぞら明朝フォント
あおぞら明朝フォントは、伝統的な明朝体のデザインを持つ日本語フォントです。ウェブやアプリケーションで広く利用されています。
これらのフォントは、それぞれ独自のデザインや特徴があります。アプリのデザインや雰囲気に合わせて選んでください。また、フォントを使用する際は、利用条件やライセンスに注意してください。
なお最終的な外観はこんな感じとなりました！
問題としては画面のデザインができるわけじゃないので、その辺は自分で考える必要がありますねー。。。
ローカルデータベースの設定
続いて、ローカルデータベースの設定を実装していきます
SQLiteを利用したデータベースの構築のサンプルコードを出してくれますか？
とお願いすると、ToDoアプリを例にしたサンプルコードを出されたので、
このアプリのER図に沿って、コードを書き換えてくれますか？
とすると要件定義に沿って書き換えてくれたのですが、前回の記事で設計したER図と異なっていたので、
ER図は下記になりますので、書き換えてください。
erDiagram
...省略
とお願いすると書いてくれました。
（erDiagram以下はmermaidの記法になります。入力する際は、```で囲んでください。）
コードの過不足はありますが、ベースとしては十分かなと思います。
本記事では一旦ここまでとして、続きは次の記事で書いていこうと思います。
次は、各機能の実装（画面や画面からのデータ読み書き周りになるかな？）をChatGPTでやっていこうと思います。
おわりに
画面遷移は書いてくれなかったものの、フォントや配色の選定とコードの作成、またデータベースのベースの実装をやってくれたのはかなり良かったです。
今回は色々試しながらやりましたが、多分30分くらいでできんじゃないかなと思います。