Inside GigaViewer for Apps 総集編 ~ のぼりはじめたばかりのアプリ開発坂

技術グループ長のid:daiksyです。いつもInside GigaViewer for Appsを読んでいただきありがとうございます。この企画の編集長を勤めています。

今年の2月にスタートしたこの連載も、今回の15回目の掲載で最終回を迎えることになりました。これまではてなが誇るソリューションのひとつである、「GigaViewer for Apps(以下 GigaApps)」の開発に携わるディレクター、エンジニア、デザイナーが、さまざまな切り口で惜しみなく開発の様子を書き連ねてくれました。

最終回である今回は、そんなこれまでの14回(+番外編1回)の連載記事を、企画・編集に携わってくれたid:yutailang0119id:kouki_danid:koudenpaの3名がコメントを添えながら紹介する総集編としてお届けしようと思います。

今後も続々と新しい展開を予定しているGigaViewer for Appsの裏側をお楽しみください。

第1回 "『Inside GigaViewer for Apps』連載開始!技術と開発の舞台裏 #GigaViewer"

developer.hatenastaff.com

id:kouki_dan 『Inside GigaViewer for Apps』が始まりました。僕はずっとGigaAppsの開発に携わっていて、その中でいつかやりたいと思っていた連載企画です。第1回は、ディレクターとプロダクトマネージャーに筆を取ってもらいました。GigaAppsは技術的にも挑戦的なプロダクトですが、その手前に、実現したい価値と未来があります。Developer Blogへの掲載ではありますが、最初にエンジニアではない視点からの記事を書いてもらえました。少し古いですが、こちらのインタビュー記事もあわせてご覧ください!

hatena.co.jp

第2回 "様々なマンガアプリを素早く開発できる「GigaViewer for Apps」のしくみ iOS 編"

developer.hatenastaff.com

id:yutailang0119 マルチテナントで機能を多く有するiOSアプリの開発についてまとめました。 自身も長く関わったプロダクトで、アーキテクチャや技術選定には自分のエッセンスも詰まっています! iOSのGigaAppsは、近年のマルチモジュール化開発の起こりの頃に開発が始まり、試行錯誤の繰り返しでした。 開発は進んでいて、第2回でご紹介した内容から変わっている部分も多くあるので、またの機会にご紹介したいと思います!

第3回 "様々なマンガアプリを素早く開発できる「GigaViewer for Apps」のしくみ Android 編"

developer.hatenastaff.com

id:daiksy GigaViewer for Appsは同一コードでマルチプラットフォームを実現しているのではなく、iOSとAndroidをそれぞれ別のプロダクトとして実装しています。第2回のiOS編に続いて、Androidでの実装を紹介したのがこの回でした。第2回と第3回を読み比べることで、プラットフォームごとの実現方法の違いを見ることができる構成になっています。

第4回 "様々なマンガアプリを素早く開発できる「GigaViewer for Apps」のしくみ バックエンド編"

developer.hatenastaff.com

id:koudenpa 多くのスマートフォンアプリにはバックエンドがあります。サーバサイドとも言ったりするでしょうか。『GigaViewer for Apps』にもバックエンドがあるため、連載にもバックエンド目線の記事を寄稿しています。1本目はGigaViewerの大きな特徴であるマルチテナントに注目してもらいました。

改めて読み返してみても

アクセス数のピークはサービスによって分散する

つい先日もSNSプロモーションの結果アクセス数が一気に増えても特に問題なくさばけていた例がありました。実態のあることが書かれていて大層よかったです。

第5回 "マルチテナントアプリで行うイベント計測のしくみ"

developer.hatenastaff.com

id:kouki_dan マンガアプリの開発において、新機能の効果検証やコンテンツの方向性を決めるためなど、データ分析は非常に重要です。GigaAppsにおいてはマルチテナントアプリであるため、様々なメディアが要求する要件を実装するために、イベント計測の仕組みを柔軟に設計する必要がありました。重要で複雑な機能を実装するために、注意深く設計した内容を公開しているので、ぜひご覧ください!

第6回 "「GigaViewer for Apps」に既存のテナントを受け入れるデータ移行: 少年ジャンプ+の場合"

developer.hatenastaff.com

id:koudenpa やってみて大変だったことは自慢したいですし、大変だったことをどう解決したのか? は公共の知識にしたいです。大規模なシステム移管に当たってのデータ移行は、所要時間や整合性の担保に気を使ったプロジェクトでした。他の場でも発信しているのですが、ブログ記事という形でテキスト資料として参照できるナレッジを発信できて非常によかったです。

番外編 "はてなのマンガアプリ開発の舞台裏がNotebookLMとAIの力でポッドキャストになったぞ!"

developer.hatenastaff.com

id:daiksy この連載企画は、かなり早い段階からどの回でどの話題を書くか。それをいつ公開するか、などの全体計画が決まっていました。そんな折、NotebookLMのポッドキャスト機能が公開され、評判になりました。今、この瞬間を逃すと1日経てば面白くなくなるまさに旬のものである、という判断のもと、番外編として公開直後の機能でこの連載を紹介する、ということやったのでした。今となっては懐かしい企画です。

第7回 "「GigaViewer for Apps」 iOS アプリにおける VRT とユニットテスト"

developer.hatenastaff.com

id:yutailang0119 GigaAppsでは開発開始当初から積極的にユニットテストを書く習慣がついています。 一方でVisual Regression Testing(VRT)は欲しいと思いつつ、なかなか取り組めていなかった課題でした。 GigaApps iOS開発ではpointfreeco/swift-snapshot-testingを選択したことで、小さなコストでワークできています。 ぜひご参考にしてください!

第8回 "VRTから静的解析まで ─ GigaViewer for Apps Androidのテストをご紹介"

developer.hatenastaff.com

id:kouki_dan 自動テストは品質の高いソフトウェアを構築する上で重要な要素です。GigaAppsでも、自動テストを通じてソフトウェアの品質を高める取り組みをさまざま行なっています。第8回では、AndroidアプリにおけるVRTや静的解析の取り組みを紹介しています。仕組みは進化を続けていて、現在はより改善されたテストが日々動いていて、僕たちの開発プロセスを支えてくれています。また別の機会でご紹介させてください!

第9回 "GigaViewer for Web における Flaky Test に対する取り組み"

developer.hatenastaff.com

id:koudenpa 理想と現実だと現実派の自分としては、長年積み重ねてきたテストがしばしば失敗して困る現実と真摯に向き合っていい感じにしたこの取り組みはとても気に入っています。全く同じ状況でなくても開発を進めるうえでの困りごとにどう対応していくのか? の参考となるのではないかと思います。

第10回 "マルチテナントアプリにおけるデザインコンポーネントの管理方法"

developer.hatenastaff.com

id:yutailang0119 GigaViewerの理念を語る上で、デザイン面での解説は必要だろうと思い、執筆のオファーをしました。 出版社様のこだわりとプラットフォームの思想をうまく調和させ、維持するデザイナーたちです。

『GigaViewer for Apps』はメディアごとの固有機能がありつつも、マンガアプリとして共通化を進め、横展開や新規アプリの開発をなるべく低コストで実現することを理念に、「マルチテナントアプリ」として提供しています。

『Inside GigaViewer for Apps』連載開始!技術と開発の舞台裏 #GigaViewer - Hatena Developer Blog

マルチテナントアプリという例の少ない開発のデザインを如何に支えているか、ぜひご覧ください。

第11回 "GigaViewer for Webにおける開発の進め方"

developer.hatenastaff.com

id:koudenpa バックエンドではこの連載への寄稿に当たって「こんな感じのテーマで好きに書いてくれ!」と記事の内容は執筆担当にほぼ丸投げしていました。開発の進め方に関しては「タスクが生えてからリリースまでの流れを紹介して欲しい」くらいで書いてもらっています。読めばわかるのですが、記事では開発の流れの周辺事情にまで触れられており、自分の想定より網羅度の高い内容になりました。企画の担当者としてはそうした各自の注目点の差も面白みがあってよかったです。

第12回 "マルチテナントアプリの「GigaViewer for Apps」を支えるGraphQL"

developer.hatenastaff.com

id:daiksy REST時代からGraphQLへの移行の話題からはじまり、Apolloの活用、キャッシュの扱い方、スキーマ駆動開発によりアプリ側とバックエンド側の非同期な開発をうまくやる方法などGraphQLを中心として多岐に渡る内容を紹介しています。個人的にはスキーマ駆動の開発によって曖昧な要件を早期に明確化するコミュニケーションにも作用するところをおもしろく読んでいました。

第13回 "大規模トラフィックを支えるGigaViewer for AppsのAPI負荷対策"

developer.hatenastaff.com

id:yutailang0119 アプリのリプレイスに際して、「ユーザーが不便を感じないように」はチーム全体が意識したポイントでした。 特に応答速度を気にさせないことには、パワーをかけて取り組みました。 リリース当日サービスインの瞬間は、とても緊張したことを覚えています。 さらに快適にできる改善ポイントはまだまだあるので、これからの進化にもご期待ください!

第14回 "GigaViewer for Web の新サービス開発時に考えていること"

developer.hatenastaff.com

id:koudenpa 本編〆の記事がバックエンドでよいのか? という気もしますが、GigaViewerで提供されているサービスはこれまでブラウザ版(GigaViewer for Web)を中心に増えていきました。一方でアプリ版(GigaViewer for App)の展開準備も整い、今後はアプリ版もどんどん増えていく見込みです。相対的に新サービス立ち上げ回数の多いバックエンドとしてどのような心持で開発に当たっているのか? が素直に書かれていています。GigaViewer関係者一同は今後も色々考えながらサービス開発、運用に当たっていきます。是非ご期待ください。

hatena.co.jp

さいごに

いかがだったでしょうか?

Webのマンガを支えるソリューションの開発や技術の一端が垣間見えたでしょうか。

GigaViewer for Appsは今後もさまざまなマンガサービスへの導入が期待されています。わたしたちは、ようやくのぼりはじめたばかりなのです。このはてしなく遠いアプリ開発坂を。

今後の展開にもぜひご期待ください。