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

第62回 開発ツールキットやサウンド再生用ライブラリをオープンソースとして公開

この記事を読むのに必要な時間:およそ 3 分

サイバーエージェントでは,スマートフォン向けWebアプリケーション開発に活用できるツールキット「beez」図1と,ブラウザ向けのサウンドライブラリである「boombox.js」をオープンソースで公開しました。これらの開発に携わった船ヶ山慶氏と平木聡氏写真に,開発の背景やそれぞれの特長などについて伺います。

図1 beez

図1 beez

サイバーエージェントがOSSとして公開した開発ツールキット「beez」⁠GitHubで公開されているのでぜひチェックしてほしい

写真 船ヶ山慶氏(左)と平木聡氏(右)

写真 船ヶ山慶氏(左)と平木聡氏(右)

人気のフレームワークやライブラリを一貫性のあるAPIで使える「beez」

――まずbeezを開発することになった背景から教えてください。

船ヶ山:現在,Webサービスの開発で利用できるフレームワークやライブラリは数多く公開されています。サイバーエージェントには,エンジニアがそれらを自由に選択して使ってよいという文化がありますが,個々のエンジニアが使っているものがあまりにバラバラだとノウハウの蓄積が進まず,また開発速度の面でもマイナスです。実際,そのような背景からトラブルが発生したこともあり,フレームワークなどを取りまとめて使い勝手の良い環境を作りましょう,ということでbeezの開発を始めました。

――beezでは,具体的にどのようなしくみを提供しているのでしょうか。

船ヶ山:Backbone.jsやRequireJSといったフレームワークやライブラリを,一貫性のあるAPIで利用可能にするラッパーとしての機能がまずあります。さらに開発サーバやステージングサーバ,本番サーバといった環境の違いを設定ファイルで吸収し,ビルドやデプロイの手間を軽減するしくみを盛り込みました。画像の圧縮,StylusやHandlebarsの自動コンパイルなどをワンステップで行える機能もあります。

ローカルで使えるWebサーバも組み込みました。たとえば修正したアプリケーションの挙動を見るのに,いちいち開発用のWebサーバにアップロードするのは面倒ですよね。しかしbeezのローカルサーバを使えば,わざわざサーバにファイルをアップロードせずに,ローカル環境で確認できます図2)⁠ファイルの自動リロードにも対応しているため,ソース変更の確認にローカルサーバを再起動する手間もありません。

図2 beezに含まれるサンプルアプリ

図2 beezに含まれるサンプルアプリ

Webサーバも付属しているため,開発した内容を手元のマシンを利用して即座に確認できるなど,開発に便利な機能を多数盛り込んでいる

平木:Backbone.jsなど複数のフレームワークやライブラリを使って開発する場合,多人数になるとどうしてもAPIの使い方やコードの書き方がバラバラになってしまいます。しかし,beezでは一貫性のあるAPIで利用できるため,規約で縛るといったことをしなくても,エンジニアによって大きく書き方が変わってしまう問題を防げます。

また特にチームで開発する場合,モジュール間の依存関係が複雑化してトラブルにつながるケースがありますが,beezではMVCR Managerというオブジェクトコンテナでモジュールを一括管理し,依存関係の問題を解決できるようにしています。このため,特に中~大規模のWebアプリケーション開発では有効ではないかと考えています。

船ヶ山:beezの中で使っているフレームワークやライブラリのノウハウをそのまま使えることも大きな特長です。たとえばBackbone.jsなどであれば,Googleで検索すればさまざまな情報が得られます。beezでは,そうしたノウハウを極力そのまま使えるようにしています。

周りのエンジニアからの要望に対応することで機能を強化

――開発されている中で,こだわられたのはどういった部分でしょうか。

船ヶ山:ソースコードを読まなくても,APIの名前だけで推測できるように一貫性を持たせるといったところには気を配りました。MVCのモデルとビュー,コンテナで同じ機能であれば,APIも同じ名前にするといった部分です。

平木:Webサービスの開発で必要だと思われる機能を採り入れることもこだわりました。Backbone.jsやAngularJSといったライブラリよりも,もう少しサービスを開発するために必要な機能を追加するというイメージです。

――開発中に,周りのエンジニアから要望を受けることはありましたか。

船ヶ山:ありましたね。たとえばbeezに組み込んでいるWebサーバは,最初は単純にファイルを返すだけのものでしたが,実際に利用しているエンジニアからStylusやHandlebarsのコンパイルを自動化してほしいとか,CSSスプライトを自動生成してほしいといった要望があり,それらの声に応える形で機能強化を図りました。スマートフォン向けのゲームやWebサービスを開発するために必要で,なおかつ共通化できる機能はひたすら取り込んでいったという感じです。

――今後のアップデートについては,どのように考えていますか。

船ヶ山:スマートフォン向けのWebアプリケーション開発に必要な機能はおおよそ盛り込めたので,現状では新機能を追加する予定はありません。ただ,たとえば新しいCSSプリプロセッサですごく良いものが登場すれば,それを既存のものと置き換えるといったことはするかもしれません。またバックエンドで使っているBackbone.jsやHandlebars.js,Stylusなどがバージョンアップすれば,それに追従することも検討します。

平木:beezそのものに手を入れるわけではありませんが,jQueryに対するjQueryプラグインのような形で周辺環境は整備していきたいと思っています。実際,私たちの開発チームの中でもユーザインタフェースの開発に使えるプラグインなどをいくつか作っているので,その中から公開できるものをGitHubにアップしていく予定です。

著者プロフィール

川添貴生(かわぞえたかお)

株式会社インサイトイメージ代表取締役。企業サイトの構築及び運用支援のほか、エンタープライズ領域を中心に執筆活動を展開している。

メール:mail@insightimage.jp

コメント

コメントの記入