アニメにタグ付けする機能を作成中／来期アニメ

「来期アニメ」アプリは、「来期のアニメ、何観よっかな〜」をサポートすることを目的とています。

次に何があれば嬉しいかと考えたときに、アニメのジャンルやタグ付けがあると選びやすいと思ったので、タグ付け機能を実装することにしました。

その途中経過をご紹介します。

タグの表示
タグの登録
要素技術
来期アニメ

タグの表示

こんな感じです。関連するタグを複数表示します。
とりあえず私の方でそれっぽくタグ付けしたつもりですが、精度はかなり怪しいです（汗）

タグの登録

全部のアニメの内容を確認して、適切なタグ付けを自分一人で行うのはしんどすぎるので、ユーザーがタグ付け出来るようしようと思います。

上のキャプチャの鉛筆アイコンをクリックすると、タグの追加や取り消しをすることができます。

要素技術

・Notion API／Retrieve a database

タグの登録で、タグの選択肢一覧を取得するために、Notion APIの「Retrieve a database」を初めて使いました。
このAPIは、データベースの構造、つまりスキーマを取得することができます。
この中に、マルチセレクトボックスの選択肢も含まれていました。

役に立つかわかりませんが、Flutterでの実装例（抜粋）を記載します。

Future<AnimeDBInfo?> readDBInfo() async {
   String url = BASE_URL + 'databases/' + ANIME_LIST_DATABASE_ID;

   var response = await http.get(
     Uri.parse(url),
     headers: _headers,
   );

   //debugPrint(response.body);

   AnimeDBInfo? animeDBInfo;
   if (response.statusCode == 200) {
     var body = jsonDecode(response.body);
     animeDBInfo = AnimeDBInfo.fromJson(body);
   }

   return animeDBInfo;
 }
 
class AnimeDBInfo {
 final String id;
 final List<Map> genreOptions;

 AnimeDBInfo({
   required this.id,
   required this.genreOptions,
 });

 factory AnimeDBInfo.fromJson(Map<String, dynamic> parsedJson) {
   Map properties = parsedJson['properties'];

   dynamic Function(Map properties, String property, String type)
       properties2value = (properties, property, type) {
     dynamic value;

     if (properties.containsKey(property)) {
       switch (type) {
         case 'multi_select':
           if (properties.containsKey(property)) {
             value = properties[property]['multi_select']['options'];
           }
           break;
         default:
           break;
       }
     }

     return value;
   };

   List<dynamic> genreOptions =
       properties2value(properties, 'genres', 'multi_select') ?? [];

   return AnimeDBInfo(
       id: parsedJson['id'],
       genreOptions:
           genreOptions.map((e) => e as Map<String, dynamic>).toList());
 }
}

https://developers.notion.com/reference/get-database

Connect Notion pages and databases to the tools you use every day, creating powerful workflows.

・Notion API／Update page properties

タグの登録のために、Notion APIの「Update page properties」を使いました。
こちらは、お気に入り数の登録のときに使ったので２回目です。
前回は”number”、今回は”multi_select”を登録する必要がありましたが、特に問題はありませんでした。

同じくFlutterでの実装例です。

Future<bool> updateAnimeGenres(String pageId, List<Map> genreOptions) async {
   if (!isUUzIDv4Format(pageId)) {
     return false;
   }

   String url = BASE_URL + 'pages/' + pageId;

   String body = jsonEncode({
     "properties": {
       "genres": {
         "multi_select": genreOptions,
       },
     }
   });

   //debugPrint(body);

   var response = await http.patch(
     Uri.parse(url),
     headers: _headers,
     body: body,
   );

   return (response.statusCode == 200) ? true : false;
 }
 
 // genreOptions例
 [
       {
         "id": "a1883558-276c-4094-a720-b895694a9271",
         "name": "異世界転生",
         "color": "brown"
       }
 ]