長らくPC用のサービスとして展開されてきたサイバーエージェントのアメーバピグだが、外出中でもピグ内で誰かとコミュニケーションしたり、あるいはゲームを楽しんだりしたいというニーズは強い。そうした声に応えるべく、iPhoneとAndroidの両方に対応した、スマートフォン版のアメーバピグがリリースされるという。

そこで今回は、この開発に従事しているアメーバ事業本部 スマートフォンディビジョンの原氏と平松氏にお話を伺った。

HTML5をフルに活用しスマートフォン対応を実現

―― まず、現状担当されている業務を伺わせていただけますか？

原：現在はスマートフォン向けのアメーバピグの開発をしています。基本的にはWeb技術者ですので、HTMLとCSS、JavaScriptを主に使って制作しています。

平松：私はもともとサイバーエージェントが独自に展開しているAndroidマーケットである「Ameba AppMarket」の開発をしていましたが、2011年7月半ばからアメーバピグのスマートフォン対応を進めているチームにジョインしました。

―― 以前、サイバーエージェントではAdobe AIRを使い、Flashで開発されているPC版アメーバピグをAndroidに移植されていましたが、それとは別に、スマートフォン向けのアメーバピグを実現する新たな取り組みということでしょうか？

原：はい、新たなプロジェクトですね。今回はFlashやAdobe AIRではなく、HTML5の技術を使ってフロントエンド部分を開発しています。PC版のFlashを移植するという考え方もありますが、PCとスマートフォンでは画面の大きさもまったく異なるため、どちらにしても開発し直す必要があります。その開発における技術の選択として、今回はFlashではなくHTML5を選んだというわけです。

―― そうすると、HTML5を使って改めてアメーバピグを作り直すというイメージでしょうか？

原：そうですね。当然流用できる部分は流用していきますが8割ぐらいは作り直すので、新たなスマートフォン向けサービスをつくるというイメージですね。

平松：FlashからHTML5に変換するコンバータもいくつか登場していますが、精度や変換後のパフォーマンスの観点から、現状ではまだ実用段階ではないかなと考えています。データのフォーマットから画像の切り出し方など、さまざまな部分でHTML5向けに工夫して開発しなければならないという状況です。

―― スマートフォン向けということですが、これはiPhoneとAndroidの両方に対応するということでしょうか？その場合、それぞれのOSに搭載されているWebブラウザの実装レベルの差は気にならないのでしょうか？

平松：両方に対応します。実装レベルの差は、やはり気になる部分はありますね。たとえばパフォーマンス面で、この部分はAndroidのほうが速いけれど別の部分はiPhoneに分があるといったことがあるので、どうやってバランスを取っていくかはつねに考えています。共通の実装をしてパフォーマンスに違いが出るのは避けたいのですが、一方でなるべく同じコードで両方に対応したいという気持ちもあります。そのため、共通部分をどう取っていくかというノウハウも必要です。

従来になかったさまざまな仕組みを採り入れ、 単にWeb「ページ」を作成するだけでなく、Web「アプリケーション」を開発するためのプラットフォームとしての役割も担うHTML5には、多くの技術者が注目しています。ただ、現状では正式な勧告に至っていない状況であり、またWebブラウザの実装にも差があることから、本格的にHTML5を採用するケースは多くありません。こうした状況であるにもかかわらず、HTML5を選択した点は注目に値するでしょう。

プラットフォームごとの実装差やバグを乗り越えて開発を進める

―― HTML5でのアプリケーション開発はまだまだ事例も少ないのですが、実際に開発されていて気になる点はありましたか？

平松：今回、HTML5のCanvasという仕様を使って描画を行っている部分がありますが、Flashに用意されていてCanvasになくて不便だと感じるのはレイヤーやスプライトの仕組みですね。また、仕様ではなく個々のWebブラウザの実装というところでは、たとえばAndroidでアルファチャンネルのレンダリングにバグがあるなど、エンジン的にもまだ未成熟な部分があると感じています。

原：アルファチャンネルのバグは驚きましたね。まったく使えないわけではないのですが、実際に利用すると極端にパフォーマンスが落ちるといったことがありました。

平松：パフォーマンスだけでなく、画像、CSS、Canvasに共通して、アルファチャンネルを使うと想定したとおりに描画してくれないという問題にも遭遇しました。そのため、アルファチャンネルのブレンディングについて、手計算で対応するといったことも行っています。

原：CSS3で追加された「border-radius」を使うと、描画のパフォーマンスが極端に低下するという現象も起こりましたね。

平松：画像やCanvasであればスクロールするときにレンダリング結果をビットマップ化してキャッシュするので、スクロールもすばやく行えるのですが、CSSとして表現すると毎回背景との重なりなどを再計算しながらレンダリングしてしまうんですね。それがパフォーマンス低下の原因だったようです。

―― 現在注目されている技術について教えてください。

原：私はApplicationCacheやWeb Storage、Web SQL、IndexedDBなどといったローカルキャッシュ系の技術ですね。今回のスマートフォン向けアメーバピグのプロジェクトではWebStorageを使っていますが、今後も含めてクライアント側にデータを置くことによって高速化したり、使い勝手を改善したりできるのではないかというところで注目しています。ただクライアント側とサーバ側のデータに整合性を取る必要があるため、慎重に使わないといけません。

平松：私はWebSocketですね。現状ではスマートフォンではまだ実用段階ではないというか、ほぼ使えないのですが、通信部分のコンパクト化やリアルタイム性を向上できるという点で注目しています。たとえば3人のユーザで話しているときに、WebSocketであれば、誰かが起こしたアクションをサーバ側で受け取ったら、セッションを保持している複数のクライアントにマルチキャストで配信することが可能です。それによってCometなどの応用技術と比べて、より素直に相方向性、リアルタイム性のあるアプリケーションを開発することができるのではないかと考えています。

―― 最後に、エンジニアとしてサイバーエージェントで働くことのメリットについて伺わせてください。

原：1つは周りに技術者が多くて、切磋琢磨しながらスキルを磨いたり、気軽に質問できたりすることですね。

平松：私は中途入社なのですが、以前の会社ではわからないことはWeb上で調べるのが当たり前だったのに対して、サイバーエージェントでは気軽に相談できる雰囲気があります。それと話し合ってより良い方法を引っ張り出したり、あるいはこちらからも提案できたりする環境があるのは本当にすばらしいと思いますね。

原：もう1つは、会社の中にアイデアがいっぱい転がっていることですね。技術者もそうでない人もそれぞれにアイデアがあって、それを単に開発するだけでなく、一緒にサービスを作り上げていくという感覚はサイバーエージェントならではだと思います。

平松：エンジニア同士だけでなく、たとえばサービスの運用担当者やデザイナーなどに対して、こうした方がいいのではないかと提案できて、実際にアイデアが採用されることもあります。こうしたコミュニケーションは、エンジニアとして広い視点を持つのに役立っています。

印象的だったのは、エンジニア同士で気軽に話し合うことができ、さらに切磋琢磨できるという原氏の言葉です。こうした土壌があるからこそ、HTML5などの新たな技術にも果敢にチャレンジすることができるのではないでしょうか。

サイバーエージェント公式エンジニアブログ

URL：http://ameblo.jp/principia-ca
エンジニアの生の声を週替わりでお届け中！