はてなのモバイル開発大紹介!「少年ジャンプ+のアプリ開発の裏側」を開催しました! #hatenatech

 こんにちは!マンガアプリチームで、GigaViewer for Appsの開発をしています id:yutailang0119 です。
はてなのGigaViewer for Appsでは、2024年3月から「少年ジャンプ+」のアプリ版を担当しています。
hatena.co.jp

 そんなGigaViewer for Apps、「少年ジャンプ+」の開発についてをお話しする、はてなのモバイル開発大紹介!「少年ジャンプ+のアプリ開発の裏側」を9/19 (木) に開催しました!
hatena.connpass.com

イベントレポート

 今回は各発表を紹介するイベントレポートです。
(※ 本イベントの録画公開予定はございません。)

挨拶&プロジェクト概要の紹介 id:kouki_dan id:daiksy

 イベントの始まりとして、「少年ジャンプ+」アプリのGigaViewer for Apps開発テックリードを務めた id:kouki_dan と、イベント司会の id:daiksy の掛け合いで、プロジェクトをふり返りました。

掛け合いの様子

id:gurrium 作りながら紹介するマンガビューワの機能

speakerdeck.com

 ビューワ機能はマンガアプリで最も重要な機能の一つです。
マンガの花形画面のため、機能は多く、仕様も複雑です。

 この発表では、GigaViewer for AppsのiOSアプリから、実際のビューワ実装の一部を紹介しました。
マンガアプリ特有の横読み、縦読みやズームといった機能を実装し、最小ビューワを再現しています。

質疑応答

プラットフォームごとに実装していますか?

id:gurrium < ビューワーに限らず、アプリ全体でiOS、Androidそれぞれで実装しています。

id:r4wxii マルチテナントにおけるイベント計測の話

speakerdeck.com

 GigaViewer for Appsの特徴の一つは、マルチテナントで複数のメディアに対応していることです。
「少年ジャンプ+」に加えて、株式会社オーバーラップ・プラスの「コミックガルド+」を同じコードベースで提供しています。

 一般的なアプリ開発とは違う観点が必要な中で、イベント計測は複数の計測ツールに送信分けが必要な箇所もあり、複雑な要件をいかに乗りこなしたかを発表しました。

質疑応答

テナント1が計測プラットフォームAを使っているときに、テナント2に提供しているアプリに計測プラットフォームAについてのコードが混ざって、アプリサイズが肥大化したりはしないのか

id:r4wxii < メディア要件の実装が特別大きくなることは少ないです。EventTrackerを抽象化して、メディアターゲットからDIするのでアプリに不要な計測プラットフォームSDKはリンクされないように作っています。

マルチテナント対応するとメディア個別の仕様変更に対応するのが難しくなりそうですが、個別の要求に応えられなかったなどのことはありましたか?

id:r4wxii < 99%はGigaViewer for Appsの仕様と個別の仕様を切り分けた実装にできていて、メディアの仕様変更に耐えられる作りになっています。機会があれば、今後のイベントで紹介します!

id:tokizuoh iOS 曜日ランキングが出来上がるまで

speakerdeck.com

 アプリを起動して最初に目にするホームは、ユーザーの印象に強く残ります。
その中でもトップ表示の曜日ランキングのUIは、実装難易度が高いものでした。

 レイアウト指定に合わせて実装をしてみたものの、操作してみるとなかなかうまくいかないことはありますよね。
曜日ランキングのUI実装の試行錯誤を、追体験できるような発表です。

質疑応答

ビューワや曜日ランキングもすべてOSネイティブで実装されていて、WebViewなどで共通化しなかった理由があるのでしょうか?

id:tokizuoh < GigaViewer for Appsでは、ネイティブアプリの手触り、体験を重視しています!

id:nabe1216 GraphQLとGigaViewer for Apps

speakerdeck.com

 GigaViewer for Appsでは、全面的にGraphQLを使って開発を進めています。
GraphQLクライアントにはApolloを使用していて、マルチテナントの仕組みを支えています。

 この発表では、GigaViewer for Appsでのキャッシュやページング活用事例、GraphQLでの負荷対策について紹介しました。
これから活用したい機能についても言及していますので、GraphQLを使い倒したい方におすすめです!

質疑応答

負荷対策用にユーザーデータ系のデータだけ分離するということは、一つの画面でもクエリが複数になることがあるということでしょうか?

id:nabe1216 < おっしゃる通り、画面によっては複数のクエリを並列実行していることがあります。サーバーサイドのエンジニアとチューニングしています。

RESTではなく、GraphQLだからこそ対応が難しかったことはありましたか?

id:yutailang0119 < GraphQLというか、Apolloのアップデート対応は大変でした!

宣伝

 今回のイベントでは、「少年ジャンプ+」のアプリについて、開発の裏側を紹介しました。
当日のXはこちらをご覧ください。

 来月はサーバーサイド視点からGigaViewerを支える技術の発表を、予定しています。
ぜひ、ご参加ください!!!
hatena.connpass.com

iOS、Androidアプリエンジニア職 転職・中途採用 - 採用情報
iOS、Androidアプリエンジニア職の新卒採用 - 採用情報

はてなでは、今の技術・この先の技術に積極的な仲間を募集しています