山田くんとLv999の恋をするのGANMA!の紹介と最近導入したGraphQLのお話

こんにちは。FLINTERSでGANMA!の開発をしている宗像です。

先日セプテーニグループのトライコーン社とFLINTERS社合同の勉強会をしました。テーマは「新卒入社社員によるプロダクト紹介LT会（最近導入・気になる技術を添えて）」ということで私からはGANMA!の紹介と最近導入したGraphQLのお話をしてきました。以下に発表時のスライドを貼りながら内容を簡単にまとめます。

GANMA!は、今年で10周年を迎える漫画アプリで、iOS、Android、Webブラウザ版の３プラットフォームで展開しています。動画広告を見ることで１日の制限なく漫画を読むことができます。また、GANMA!プレミアムでは月額680円で、広告なし、完結作もすべて読めるほか、最新話が先読みできます。人気な漫画の１つには、『山田くんとLv999の恋をする』があり、累計発行部数が100万部を超え、TSUTAYAコミック大賞でも大賞を受賞しています。

人気作の『山田くんとLv999の恋をする』はこの4月からアニメの放送が始まっています。各局土曜24:30~放送中です。また各種配信プラットフォームでも配信中です。

GANMA!は、セプテーニグループのコミックスマート社とFLINTERS社が協力して運営しています。コミックスマートには漫画の編集者がいて、作家さんと契約して漫画を作っています。FLINTERSは、開発全般を担当し、iOS、Android、ブラウザなど、多くのプラットフォームでの運用や、バックエンドやインフラ、利用データの分析などを行っています。

2022年の夏ごろ、GANMA!はホーム画面のアップデートを行いました。旧画面はパネルをたくさん敷き詰めるデザインで、運用担当者が毎日パネルを設定する必要がありました。新画面では、ランキングや閲覧履歴、タグなどの情報を使って漫画を並べ、運用コストを削減しました。また、横スクロールを取り入れることで、画面に表示する漫画の数を増やしました。このホーム画面を実装する際に、新たな技術としてGraphQLを取り入れ、以降のAPIもGraphQLで実装されています。

GraphQL導入の背景を実例を交えて説明します。GANMA!では、縦読みフルカラーの漫画「G!TOON」の連載が増え、ピンク色の専用バッジをつけるようにデザインが変わりました。このようなデザインの細かい調整が多く発生するため、既存の画面ごとのREST APIだと使わなくなった情報がAPIレスポンスに残ってしまったり、新しい情報を表示するには必ずサーバーのAPIの変更が必要になってしまいます。そこで、GraphQLを導入し、APIを柔軟かつ効率的に変更できるようにし、開発の効率化を図りました。

GraphQLを使うには、まずサーバーとクライアントでGraphQLのスキーマを定義します。サーバーはスキーマを元にAPIを実装し、エンドポイントは一つにまとめられます。クライアントはHTTPリクエストのボディにクエリを指定してリクエストを送信し、スキーマに定義された情報を取得します。GraphQLを使うことで、サーバーの改修なしにクライアント側でクエリを変更できるため、開発の効率化につながります。より詳しい技術的な話は、FLINTERSの他のブログ記事 GANMA!にGraphQLを導入した話 - FLINTERS Engineer's BlogやiOS アプリから GraphQL API を利用する - FLINTERS Engineer's Blogにも書かれています。

GraphQL導入の良さがでた例としてiOS 14から機能が追加されたウィジェットがあります。これはアプリを起動せずに一部の機能が使えるような仕組みですが、GANMA!ではホーム画面で今日の総合Top10という機能を提供しており、それをウィジェットにも表示することになりました。ホーム画面でつかっていたクエリを流用することで、サーバーの新たなAPIの実装をすることなく素早く開発をすすめることができました。