🏄

Flutter & ChatGPT モバイルアプリ開発(2)

2024/02/12に公開

Android

2日目

引き続き指示を投げ続けます。

左から右へのフリック動作で、BoardListPageから最初の画面に戻るようにすることは可能でしょうか？
フリック動作が上手く検出できていないようです。どこか見直すところはないでしょうか？
フリックの検出がかなり厳しいようです。緩やかなフリックでも戻れるように調節できますか？
離した瞬間に少し左に動いているのを検出しているのではないかと思います。フリック動作の軌道全体を見て、最後にほんの少し戻るのは無視するようにできないでしょうか？すなわち、タッチしてから離すまでの全体の軌道が左から右へのフリックである、という検出をして欲しいです。

フリックを検出するときはタップした瞬間の位置を記憶しておいて、指を離した場所との位置関係でどの方向に動いたか判断する必要があるのですね。

最初にGPT-4が書いたコードではなかなかフリックが判定されず、何故かなと思ったら指（というかシミュレータではマウス）が離れる瞬間に左に動いてしまっていて、右から左へのフリックと判断されていたのでした。

素晴らしい！これで上手く動作しました。ちなみに以下のように修正するように警告がでます。"Constructors in '@immutable' classes should be declared as 'const'."とのことです。記憶してもらえますか？

  const BoardListPage({Key? key, required this.categoryName}) : super(key: key);

残念ながらこういったことは記憶してもらえないようです。

@immutableアノテーションはどこで付けられているのですか？

どうやら継承している親クラスでついているようです。さてどんどん投げ続けましょう。

main.dartで扱っているmenu_listは以下のようなオブジェクトの配列です。ここからcategory_nameを抽出してカテゴリ一覧を作成しています。BoardListPageへ遷移する時にカテゴリ名だけではなく、このオブジェクト自体を渡すように修正してください。その後で、board_nameのリストを作成して最初の画面と同じ様に表示します。

{
  "category_number": "1",
  "category_content": [
    {
      "url": "https://headline.5ch.net/bbynamazu/",
      "category": 1,
      "category_name": "地震",
      "directory_name": "bbynamazu",
      "category_order": 1,
      "board_name": "地震headline"
    },
    {
      "category_name": "地震",
      "category": 1,
      "url": "https://egg.5ch.net/namazuplus/",
      "board_name": "地震速報",
      "category_order": 2,
      "directory_name": "namazuplus"
    },
（中略）
  ],
  "category_total": 5,
  "category_name": "地震"
}

CategoryクラスとBoardクラスは別のファイルとすべきでしょうか？
以下のselectedCategoryはどのように取得しますか？main.dartのコードを記述してください。

// カテゴリをタップした際の動作
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => BoardListPage(category: selectedCategory),
  ),
);

Androidエミュレータで実行すると漢字が中華フォントになっています。正しい日本語フォントにする方法はありますか？

どうでもいいことかもしれないですがテストしているときに中華フォントが気になって仕方がありません。フォントをアプリに組み込むことはできるようですが面倒なので取りやめにしました。

60分ほどで板一覧表示までできました。まだ縦にずらっと表示させるだけでグリッド線もありません。フリックはできるようになっています。

今回のまとめ

単にフリックと言っても忖度してもらえないので、厳密にというか細かく指示する必要がありました。また、JSONなんかはそのまま丸ごと与えて構造の認識はGPT-4に任せた方が良いようです。

ここまでのコードです。

続きはこちら。

React Native版はこちら。

2日目

今回のまとめ

Discussion