グリーとデベロッパーが語り合う最新技術と業界動向

グリーは2013年3月8日、IT業界の先駆者やGREEパートナーを招き、最新の業界動向について情報交換するイベント「GREE Technology Conference 2013」を開催。そこではインターネットサービスに関する技術トレンドが語られた。その概要を紹介する。

（取材・文／中村仁美　総研スタッフ／宮みゆき　撮影／佐藤聡）作成日：13.03.27

グリー株式会社 CTO
藤本真樹氏

　グリーでは2011年より半年に1回、GREE Platform上でアプリを提供しているデベロッパーを対象に「GREE Platform Conference」を開催している。今回、同イベントと併催という形で、「GREE Technology Conference 2013」が初開催された背景には、同社CTO藤本真樹氏の強い思いがあった。

　それは「GREE Technology Conference 2013」の冒頭、挨拶に立った藤本氏の言葉からわかる。過去のイベントでももちろん技術セッションはあったが、さらに技術に特化したスタイルでやりたかったのだという。
「スーツなど着なくともラフな服装で参加ができ、エンジニア同士がもっと情報交換ができるカンファレンスをやりたくて新設しました。この業界を盛り上げ、いままで以上にいいサービスをつくっていきましょう」

　このように藤本氏が同イベントを新設した背景を語り、「GREE Technology Conference 2013」のセッションが始まった。

　最初に登壇したのは、米Treasure Data（トレジャーデータ）CTOの太田一樹氏である。テーマは「大規模行動ログ解析サービス」。太田氏は日本のHadoopユーザー会を設立するなど、19歳の頃からオープンソースの発展に関わってきた人物だ。その太田氏をはじめ米レッドハットで勤務経験のある芳川裕誠氏（現CEO）、ログコレクター「Fluentd」を開発した古橋貞之氏らによって、2011年6月に設立されたのがTreasure Dataである。Hadoopをベースにした大規模データ解析基盤を開発し、クラウドサービスとして提供している。
「私たちがこだわっているのは、大量のログを解析して価値のある形でレポートするまでの時間を、サインアップしてからいかに早く提供できるかなのです」

　どれだけ短期間でビッグデータ活用が可能になるのか。その例として太田氏はSpry Fox（米シアトルにあるネイティブゲームの開発会社）を紹介。同社の場合、サインアップから3日間で解析できる仕組みを構築した。またMobfoxというヨーロッパの最大級のモバイル広告の会社のケースでは、毎月200億のインプレッションレコードが蓄積されていく大規模データ分析システムだったが、約2週間で構築できたという。

　その驚異的な解析機能を可能にしているのが、同社の技術だ。ログコレクター「Fluentd」をはじめ、RDBなど行動化されたデータを収集するバルクアップローダー、データストアの「Columnar Storage」、さらには解析結果をダッシュボードにプッシュする仕組みなども提供している。「Fluentd」や「Columnar Storage」については、典型的なアーキテクチャなども紹介した。

　ビッグデータ活用における問題は技術的な面だけではない。
「ビッグデータの活用や運用においては、解析チームと開発チームの意見が対立することも多い」と太田氏。トレジャーデータはそれを解決するため、ログをJSON形式で残すという技術的アプローチを採用している。「こうすればそのログデータが何のデータか説明できるから」と太田氏。このようにトレジャーデータでは、ビッグデータ活用にまつわるさまざまな問題解決に取り組んでいる。

米Treasure Data（トレジャーデータ）CTO
太田一樹氏

グリー株式会社
開発本部インフラストラクチャ統括部
アプリケーション基盤開発部
パロット･ジェイソン氏

　次に登壇したのはグリー開発本部インフラストラクチャ統括部アプリケーション基盤開発部のパロット･ジェイソン氏である。ジェイソン氏はカナダ出身。British Columbia Institute of Technology、Webシステム開発会社を経て2011年1月グリーに転職。グリーではJavaScriptやHTML5の知識を生かし、ソーシャルアプリ開発のためのミドルウェアの開発に携わっている。セッションテーマは「HTML with JavaScript Performance～Rendering,Layout,Animation～」。

　Webサービスで重要になるのはパフォーマンスである。どんなに楽しいソーシャルゲームでもユーザーが期待したとおりに動いてくれないと、継続して遊んでくれなくなるからだ。では、パフォーマンスとは何か。ジェイソン氏はウィキペディアの解説を引用した上で、「何かしら結果が得られるまでのスピード、つまりWeb上で素晴らしい速さのスピードで表示されることがパフォーマンス」と、定義づけた。ではどうすればパフォーマンスがよいWebサービスが実現するか。そのために欠かせないHTMLでのレイアウト、Painting、コンポジティング、JavaScriptではDOMの使い方、Canvasの効率的な処理手法について紹介した。

　まずはレイアウトについて。例えば「Yahoo! JAPAN」では、2153もの要素で構成されており、最適化されている。このように平均的なWebサイトでも多数のレイアウト要素が含まれているからだ。

　HTMLでCSSレイアウトを行う際、staticやabsolute、relative、fixedなどのpositionプロパティをよく使う。

static：: 配置方法の指定はしないので最もシンプル。ボックスはコンテナーの中に作られる。top、bottom、left、rightは適用されず、初期値に配置される。

absolute：: 絶対位置への配置。親ボックスにstatic以外の値が指定されている場合は、親ボックスの左上が基準位置となる。最も速い。

relative：: 相対位置への配置。top、bottom、left、rightが適用できる。staticレイアウトが基準レイアウトとなる。

fixed：: 絶対位置への配置。absoluteとの違いはスクロールしても位置が固定されること。

float：: ボックスを右か左へのフローティング指定。Webデザイナーがよく使うレイアウトだが、理解するのが難しい。遅くなったり速くなったりする。

　これらpositionプロパティのどれを使うかによっても、パフォーマンスは変わるとジェイソン氏は言う。
「速さの順位はfixed > absolute > static > relative > floatとなる。fixed、absoluteは最も速いが、モバイルデバイスでは非対応のモノもある。PC版の場合はぜひ、使ってほしい。最もお勧めできないのはrelativeポジション。これは使わないで済むのなら使わない方が得策だ」

　JavaScriptのレイアウトについても注意が必要だ。なぜならJavaScriptを用いるとさまざまなことができる反面、重い処理が発生するため、スピードが遅くなりがちだからだ。ジェイソン氏はよく使うOFFSET変数やClient propertiesを提示し、「これらはすべて処理を遅くする」と説明。実際、このサイトのページを例に（http://jsperf.com/offsetwidth）、表示スピードのベンチマークを行うというデモを実施した。

　解決する手段としては、まずは「値が変わらないときはキャッシュを使うこと、エレメントを追加する前にエレメントのプロパティを変更すること」とジェイソン氏は紹介した。だが、それ以外にも方法がある。例えば、通常私たちはこのように書きがちだ。

var element, body = document.body;
        for (var i = 0; i < 500; i++) {
          element = document.createElement('div');
          body.appendChild(element);
          element.style.width = element.style.height = '40px';
        }

　これを次のように要素をDOMの中に入れるようにすると、パフォーマンスは大きく変わる。

var element, body = document.body;
        var fragment = document.createDocumentFragment();
        for (var i = 0; i < 500; i++) {
          element = document.createElement('div');
          element.style.width = element.style.height = '40px';
          fragment.appendChild(element);
        }
        body.appendChild(fragment);

　ここで注目したいのは、「appendChildを指定した後にプロパティの編集をしないこと」と「DocumentFragmentを使ったこと」である。DocumentFragmentは面白いノード（node）だ。使うことで、ほかのどんなものよりも速くなるからだ。
「最近のブラウザではappendChildと同程度の速さとなるが、DocumentFragmentを使うと、CSSのそれぞれのStyleやレイアウト系のpropertyは実際に計算しない。一度「window.getComputedStyle」で試して欲しい」と、ジェイソン氏。

　ネット上には「これから編集するノードのグループをDOMツリーから抜き、編集したノードをDOMツリーの元の場所に戻した方が速くなる（Remove/Re-add Rule）」という記事がよくある。しかし「この方法が本当なのはケースによる」とジェイソン氏は言う。ジェイソン氏がテストしたところ、GPUモードのレンダリングではそうとは言えない結果が出たというのである。つまり「GPUモードではRemove/Re-add Ruleは使えない」というわけだ。

　次にPaintingについて。ジェイソン氏は「最適化するのは難しい」と語る。何が起こっているのか、まずは確認することだ。Google Chromeであれば、開発ツールを使い、「Timeline panel」をチェックする。確認することが必要だという。

　第三はコンポジティングでのパフォーマンス改善である。
「最近のブラウザはすべてのことをGPUで実行しているので、コンポジティングのパフォーマンスを上げるには、できる限りGPUモードを使うことだ」とジェイソン氏。しかしながらデバイスによってはGPUモードにバグが出るので、「使う際にはチェックが必要だ」と語る。また、「Remove/Re-add RuleはGPUモードでは使わない」という方法がデモと共に紹介された。

　最後はHTML、Canvasでのパフォーマンス改善について。こちらも「GPUモードを使うことが重要」とジェイソン氏。そしてお勧めは「drawlmageメソッドを使う」ことだという。drawlmageメソッドとはCanvas上にイメージを描画する際に使用するメソッドだ。これを使うといかに速くなるかを、デモを実施してアピールした。
「drawlmageを使うとDrawing pathsよりも断然速くなる。これを使わない手はない。ブラウザはどんどん進化している。パフォーマンスを最適化する方法も変わる可能性があるので、最新情報はどんどん入手したいですね」

講演スライドはこちらから → http://gree.github.com/techconf2013/

　またソーシャルアプリケーションの未来を技術面から占うパネルディスカッションも開催された。パネリストとして登壇したのは、KLabの取締役・人事部長の天羽公平氏、オルトプラスのUI&UX部長小林陽介氏、グラニの取締役・最高技術責任者である福永尚爾氏、モデレータはグリーCTOの藤本氏が務めた。

　最も多くの時間を使って語られたのが「ネイティブとブラウザ、今後どちらの方向に進んでいくか」。最初に口火を切った福永氏は「業界の流れがネイティブに向かってもWeb、ネイティブ両者に対応できるように、開発言語をC#にする」と、現時点のPHPで書いたソースをC#に移行しているという。また小林氏の会社ではWebViewでの開発が増えており、「ネイティブは一部のプロジェクトのみ」だという。天羽氏は「ネイティブかブラウザかというのは手段であり、目的に応じてどちらが適しているかが変わってくる。どんなマーケットにどんなアプリをつくっていくかという各社の戦略に応じて適したものを選択することになる」と、指摘した。

　「3Dゲームの登場など、ブラウザでできることには技術的に限界があるのでは？」と藤本氏。それに対して小林氏は「ネイティブにはかなわないところはもちろんあるが、だからといってそれが最適なユーザー体験を提供しているかは別だ。演出の派手さではなく、ユーザーの体験でネイティブアプリと勝負することができるはずだ」と言う。

　ただネイティブに注力したくてもなかなかできない事情は各社あるという。Webアプリをネイティブアプリに移行するには、難しい面もあるのは事実。それは人材確保の問題だ。だからこそグラニはC#を選択したのだ。それについて天羽氏は言う。
「高等な言語や便利なフレームワーク、ミドルウェアなどのツールが沢山ある。それらの使い方を知識として得るだけでなく、内部構造を理解した上で適した利用をしたり、目的を満たすためのアルゴリズムを定義する能力を重視している。そこを鍛えることで利用する要素技術が変わっても柔軟に対応できる組織を目指している」（天羽氏）

　ネイティブとブラウザ。今後どちらが主流になるかについて明確な答えはなかったが、それぞれが狙うマーケット、実現するサービスなどは違ったものになりそうだ。パネルディスカッションではそのほかにも、UI/UXの現状や各社の今後の戦略などが語られ、ソーシャルゲームが進む方向性が見えてきた。

KLab 取締役人事部長
天羽公平氏

オルトプラス UI&UX部長
小林陽介氏

グラニ取締役・最高技術責任者
福永尚爾氏

　1日という短い時間ながら、盛りだくさんなセッションが行われた「GREE Technology Conference 2013」。技術情報だけではなく、業界の動向までも入手することができた。また「GREE Technology Conference 2013」の後には、特に技術的に先進的なことや面白いことに取り組んできたデベロッパーを表彰する「GREE Technology Award 2013」も開催。今回は4社が表彰された。

　このようなイベントが開催できるのは、グローバルな環境でのサービス提供、大量データの分析、スマートデバイス向けコンテンツの表現リッチ化、ユーザーエクスペリエンスの向上など、ソーシャルサービスをとりまくさまざまな課題に真摯に取り組み、業界をリードしてきた「技術に強いグリー」だからこそ。同イベントはグリーパートナーを対象としたイベントだったが、「GREE Tech Talk」など一般のエンジニアを対象としたオープンな技術イベントも多数開催している。

　進化の激しいインターネットの世界。その技術情報を自分一人で仕入れるのは至難の業だ。グリーの技術イベントをチェックし、参加してみてはいかがだろう。きっと新しい発見があるはずだ。

このレポートに関連する企業情報です

グリー株式会社（東証一部上場）の求人・転職情報

2004年2月に、ソーシャル・ネットワーキング・サービス (SNS) 「GREE」を公開、日本だけでなく米国・欧州などグローバル展開を進め、世界で億単位のユーザー数を目指すソーシャルメディア事業をはじめ、ソーシャルアプリケーション事業、プラットフォーム事業、広告・アドネットワーク事業等を展開しています。続きを見る

あなたを求める企業がある！

まずはリクナビNEXTの「スカウト」でチャンスを掴もう！