サイバーエージェントを支える技術者たち

第68回主力の「Amebaアプリ」ネイティブ化!

ニュースや芸能人のブログ、最新のエンタメ情報など、幅広いカテゴリの最新情報がチェックできるほか、アメーバブログへの投稿機能も備えたAndroid/iOSアプリが「Ameba」です。従来、この「Amebaアプリ」は、アプリ内でWebコンテンツを表示する「WebView」クラスを使って開発されていましたが、今回のアップデートではネイティブアプリとして開発されました。このアップデート作業に携わった4名のエンジニア、藤原 聖氏写真1⁠、藤田 琢磨氏写真2⁠、田坂 和暢氏写真3⁠、レ ヴァン ギア氏写真4に、ネイティブアプリ化した理由や苦労した点などを伺いました。

Androidの「65K問題」に苦闘

─⁠─まず、「Amebaアプリ」がどのように変わったのかを教えてください。

藤原:昨年の夏頃から、Android/iOS向けに提供しているアプリのネイティブ化を推し進めて、よりリッチで使い勝手のよいものをユーザに提供しようという動きが社内で広まりました。⁠Amebaアプリ」もその流れを受け、それまでWebViewで作っていた部分をJavaに置き換えることを決めました。

─⁠─実際に手を付け始めて、たいへんだったのはどういった部分でしょうか。
写真1 藤原 聖氏
写真1 藤原 聖氏

藤原:Android版で言えば、最初に決めたクラスや方針を変更して根本的なクラスを書き換えるという作業を2?3回行うことになってしまいました。ListViewと呼ばれるクラスにネイティブのUIパーツを格納しているのですが、最初のやり方ではアプリの規模が大きくなると、管理のしかたやコードが煩雑になることが見えてきたんです。それで⁠この形ならどうか⁠と根本的に改めたのですが、それでも処理が煩雑だったのでもう1回書き換えました。1日程度の作業ですが、影響範囲がすごく大きかったのでたいへんでしたね。

写真2 藤田 琢磨氏
写真2 藤田 琢磨氏

藤田:もう1つ苦労したのが、dexファイルのメソッド数が65536を超えるとAndroid 2.x系の端末にはインストールすらできなくなるという問題で、65K問題などと呼ばれているものです。もともと機能をかなり増やそうとしていたところだったので、何とか65Kに納めるために不要なライブラリを削ったり、一部でしか使われていないライブラリの切り出しやメソッドの簡略化などを行ったりしました。バージョンアップしたけれど、メソッド数が増えることからバージョンダウンしたライブラリもあります(笑⁠⁠。ここもけっこう苦労したポイントです。

iOS版「Amebaアプリ」はSwiftで開発

─⁠─iOS版の「Amebaアプリ」はどのように開発が進められたのでしょうか。

田坂:実はWebViewからネイティブ化する前に、動画投稿の機能を追加してリリースした際、対応OSをiOS7以上にしました。そうした背景もあり、言語をそれまでのObjective-CからSwiftに移行したんです。今回の新しい「Amebaアプリ」もSwiftで開発していますが、去年のWWDCで公開されたばかりの言語ということもあり、全然情報がないんですね。それで週1回程度でSwiftの勉強会を実施し、みんなが持ち回りで発表しながら、まずこの言語に対する理解を深めることから始めました。

そういった苦労はあったのですが、Swiftを選択したこと自体は後悔していません。ただ実際に開発している中でつらいのは、ビルドが遅いことです。Objective-Cと比べると、100倍ぐらい違います。Objective-Cでは変更箇所だけ再ビルドがかかるのに対し、現状のSwiftのコンパイラでは一部を修正してもすべてが再ビルドの対象となるためです。現在、がんばってObjective-Cで開発した部分をSwiftに置き換える作業を進めていますが、作業が進むほどビルドが遅くなるというジレンマが発生しています(笑⁠⁠。

ギア:デバッグモードとリリースモードの動作が違うことにも驚きました。デバッグモードでは問題がなかったので、リリースモードでビルドしてQAのメンバーにテストを依頼したところ、こういうバグが発生していますとレポートが送られてくるんです。でも、私たち開発メンバーがそれを確認しようとしても再現できない。その原因はデバッグモードとリリースモードの違いだったわけですが、最初はそれがわからず、ちょっと苦労しました。

─⁠─Android版「Amebaアプリ」はLollipop(5.x)にも対応したのでしょうか。

藤原:がんばって対応しました。マテリアルデザインにして、Rippleなどのエフェクトも使っています。Rippleを使おうとすると、5.x系と4.x系でUIパーツを読み分けるような実装となるのでめんどうな部分もありましたが、やっぱり楽しかったです。これからのAndroidはマテリアルデザインの5.x系が主流になっていくので、そこに前もって対応するのはエンジニアとして良い経験になりました。

─⁠─ちなみに、アプリをLollipopに対応させる場合、どういった点に注意すべきでしょうか。

藤原:できるだけ早いタイミングで、デザイナーと擦り合わせをすることでしょうか。UIでどのようなアニメーションが使えるかなどといったことは、やっぱりエンジニアしかわからないと思いますし、マテリアルデザインではカラーパレットも決める必要があります。それで早めにエンジニアとデザイナーで一緒に議論しながら、お互いに足りない知識を補ってプロジェクトを進めていく必要があります。

誰も手を付けていない領域に果敢にチャレンジ

─⁠─とくにネイティブアプリとしてAndroidとiOSの両方でアプリを作る場合、どうしてもOSごとの差が出てしまうと思いますが、そのあたりはどのように判断したのでしょうか。

藤原:見た目的なところではできるだけ共通化するように心がけていますが、デザイン面や操作性についてはそれぞれのOSの方針に準拠する形で進めています。そのため、細かい部分でどうしても違いが生じるので、AndroidチームとiOSチームでお互いが開発しているものを触り比べて、⁠ここはこうすべきだよね」とか「ここは違うけれど、これでいいよね」といった擦り合わせをよくやりました。

─⁠─WebViewからネイティブ化を進めていくうえで、とくに難しさを感じたのはどういったところでしょうか。

藤田:とくにLollipop対応では、従来よりもアニメーションが増えるなど動きが大きくなったので、そこの作り込みはたいへんだと感じました。今まで誰も手を付けていない部分なので、難しい部分はありましたね。

ギア:「Amebaアプリ」は情報量が多く、その分サーバに対するリクエストも増えます。そのリクエストの管理や、リクエストの優先順位の判断はたいへんでした。また、ネイティブ化するとエラーハンドリングがたいへんになります。ネットワークに接続できない、あるいはサーバがメンテナンス中といったケースを想定し、それにどう対処するのかをチェックすることも必要です。

写真3 田坂 和暢氏
写真3 田坂 和暢氏

田坂:ギアが話したように、1画面を表示するために複数のAPIにアクセスする必要があり、それがすべて成功すれば問題はありませんが、たとえば4個中2個は成功する、というようなケースにどうすべきかの判断は難しかったです。また、ページが長いので、まず最初に表示する部分のAPIにアクセスし、それが終わったら画面の下のほうで表示するコンテンツのAPIをたたくというところのハンドリングは苦労した部分です。

ネイティブ化して画面がリッチになった結果、入門書に載っているような実装のしかたではコードが肥大化してしまうため、メンテナンス性や品質の低下につながりかねません。そうした問題を改善できるライブラリをギアが作ってくれたおかげで、なかなか気持ちよく開発することができています。

ギア:シンプルなライブラリですが、GitHubでnghialv/Hakubaとして公開しているので、興味があればぜひ見てください。

ネイティブアプリならではのメリット

─⁠─開発側として、ネイティブ化のメリットを感じるのはどういった部分でしょうか。
写真4 レ ヴァン ギア氏
写真4 レ ヴァン ギア氏

藤原:まず1つは、アニメーションなど動きのある部分でできることの幅が広がることです。ネイティブだとキャッシュが使えるのも大きいですね。WebViewの場合、ネットワークの状況に左右される部分が大きくなりますが、ネイティブであれば更新頻度がそれほど高くないものはキャッシュして次回も使えます。現状はチューニング中という状況ですが、そういったところを作り込めるのもメリットです。

多分世の中でよく使われているアプリは、起動したらまず前回の状態が再現されて、そのあとにサーバに接続して新しい情報をマッピングするという処理がほとんどだと思います。こういった作りにできるのはネイティブならではの部分で、⁠Amebaアプリ」もその方向で開発を進めています。

また、WebViewよりもネイティブのほうが機種依存の内容は少なくなると感じています。Androidは端末によって各社がOSに手を加えている部分はありますが、使えるAPIは同じです。ただ、WebViewは端末によって違いがあり、そこをアプリ側で吸収しなければなりません。最近のAndroidではOSごとの差分を吸収するサポートライブラリが提供されていますが、その中にWebViewが含まれていないのも苦労するポイントです。ネイティブ化により、こういった部分の負担が減るのは大きいですね。

─⁠─最後に、今後の展開について教えてください。

田坂:iOS版の「Amebaアプリ」では、動画を強化していこうという話があるので、要件が固まり次第対応する予定です。実はブログ投稿に動画機能を付けていて、それが非常に評判が良いので、その動画を使ってよりリッチに見せたり、あるいは動画を加工して投稿できるようにするなど、動画投稿の機能を強化していきたいです。

また、現状は画面遷移をOS標準にしていますが、iOS7からカスタマイズが可能になり、海外のソーシャルメディア系アプリの中には従来とは異なる画面遷移を実装しているものがあります。今後はそういったところにもチャレンジしていきたいですね。

藤原:今回は時間に余裕がない中でとにかく出し切ったという印象ですが、まだまだ完成度は高められると思っています。たとえば先ほどお話したように、ネイティブだからこそできること、具体的にはキャッシュの活用や、UI/UXをもっとリッチにしたりするというところで、改善を重ねていくつもりです。

おすすめ記事

記事・ニュース一覧