サウンド制作の裏側～iPhoneアプリについて～

こんにちは。
アメーバ事業本部で、サウンドを担当している倉科です。

Amebaではアメーバピグやアプリの音楽、SEも内製しています。今回はAmebaのサウンド制作の取り組みから、iPhoneアプリの制作秘話、制作環境などを紹介させていただきます。

Amebaの音楽への取り組み　～ Ameba PACO / 2010年1月 ～

ブログがメインだった当時、広告案件以外での音楽の提供はほとんどありませんでした。サービスとして音楽を初めて内製した曲がAmeba PACOです。


Ameba PACO
http://paco.ameba.jp/

WEBのサービスに音を乗せるのことはユーザビリティの面から敬遠されますが、PACOではユーザーの好意的な意見が多く聞かれました。PACOの音楽がユーザーに受け入れられたことで、Amebaでも音楽でユーザーを楽しませることができると学べたように思います。
その後PACOがきっかけとなり、アメーバピグのカジノエリアやアメーバプレゼントのメロディ付きプレゼントなどリリースすることができました。

iPhoneアプリでのサウンド制作について

【制作環境】
OS：Mac OS X
DAW：Cubase 6 32bit

CubaseユーザーでMacの方は非常に少ないと思いますがあまりお薦めしません（笑）。Windows7のほうが安定して起動するかと思います。

ミキシング系プラグイン
・WAVES L3 Multimaximizer
EQ・コンプレッサーはCubaseのものを使うことが多いですが、マスタートラックにはWAVES L3のマキシマシザーを使っています。容量の軽量化が常に求められますが、限られた容量のなかいい音で聞かせるのがとても大事ですので、音質にはこだわって納品するようにしています。

【アプリ制作でのポイント】
アプリでの制作の場合デバイスのスピーカーの特性と容量に関しての制限が非常に大きいので常にこの2点には注意しています。スマートフォンの多くの端末はスピーカーの音域が非常に狭く低音の音域がほとんど聞こえません。スピーカーでの聞こえ方とイヤホンでの聞こえ方が全く異なるようだとアプリの印象も大きく異なったものになってしまうので主旋律は高い音域を聞かせるようにしています。また、ベースなどの低音パートにも必要があれば音を重ねます。
容量ですが、iPhoneの場合アプリの容量が20MBを超えると端末からダウンロードできなくなってしまうので音源の容量もなるべく小さく抑えなければいけません。圧縮ファイルを使う場合はmp3ではなくcafというファイルを使います。聞きなれないファイル名ですが、Macではコマンドにafconvertというオーディオのコンバータがあるのでこちらで簡単に変換できます。

$ afconvert -f caff -d aac -b 44100 sound.wav

ターミナルからこちらのコマンドを打つとaac圧縮、サンプリングレート44100のsound.cafというファイルができます。

つりポン！、Cubie Houseの紹介

つりポン！
⇒ダウンロードはこちらから
http://itunes.apple.com/jp/app/id473532809?mt=8


【使用音源、プラグイン、VST】
・HALion SONIC

Cubase6の内蔵音源のHALion SONICですが、サンプルの多さやエディットのし易さなどから楽曲制作のメイン音源として使用しています。読み込みもストレス無くMIDIの使い勝手も非常に良いです。

【制作のポイント】
つりポン！ですが、ピグと釣り（海）という要素が個々のモチーフから伝わるように意識して制作しています。ボタンの一つにも水の要素入れ込み、SEとBGMの音選びも統一感を持たせるようにしています。



cubie House
⇒ダウンロードはこちらから
【iPhone版】
http://itunes.apple.com/jp/app/cubie-house/id438860513?mt=8

【使用音源、プラグイン、VST】
・FabFilter Twin 2

HALion SONICとFabFilter Twin 2をメイン音源として使っています。オシレータ３つありフィルターも豊富なのでいろんな音色を作成できます。プリセットが多く、SEに一味足したい時など便利です。高音も太くていい音が出るのでベル系などのSEによく使います。

【制作のポイント】
キャラクターの世界観がはっきりしているので、アナログシンセの持っている柔軟な音色とかわいい音をイメージして制作しています。SEに関しても生音は一切使用せず、音声に関しても加工して人っぽさを出さないように工夫しました。
BGMですが、メインの画面でずっと流れているのでユーザーにストレスを与えないようシンプルになるよう心がけました。最低限の音数で世界観を構築できるよう制作しています。

つりポン！とCubie Houseを紹介させていただきました！
また新しいアプリリリースされた際には紹介させていただきます！最後まで読んでいただきありがとうございました！

PiggをiPhoneアプリで動かすまで

皆様お初です。

私はAmeba事業本部　Smart Phone Division所属
interaction designerの @sagarakun (30歳独身貴族)です。

今回は私が制作に当たった
つりポン！ by アメーバピグ
について書きます。


こんな感じのiPhoneアプリです。

弊社にはジギョつくという社内イベントがありまして、
そちらに「PiggでiPhoneのゲームやりたいんですけど！！」
という案を出したら、通りましてやらせてもらうことになりました。

とはいえ、AmebaPiggはFlashで作られているサービスなので、
iPhone用に最適化するためにいろいろやること多かったです。

こちらcocos2dというObjective-Cの2Dゲーム用フレームワークを採用して作りました。
他にもUnity3D使う案とかcoronaSDK使う案とか
そもそもAmeba PiggはFlashで出来ているので、
FlashのPackager for iPhoneを使う案とかあったんですが...

企画の発足当時(2011年3月時点)で
まだiPhoneで使うPiggAPIが出来てなくて
どこまで開いてもらえるかわからないという不安がありまして
多少無茶出来る環境で作らないと「できない」コトが増えるので
厳しいんじゃないかという予想と
Piggはゲームだけで使うには惜しいモチーフなので
今後色々使い回せるようにやっぱネイティブな感じで詰めといた方が良いよね
という試行錯誤の末

僕が元々はPiggのFlashDeveloperだったというのもあり
書式がActionScriptに似てて
iPhone用の2Dゲーム作るのに特化しているcocos2dフレームワークを
採用して制作することに決めました。

cocos2dについて

Flashに似てるObjective-Cのフレームワークです。
cocos2dに関しては私が始めた当時と違って
今はもう和書でこの本がでてるのでコレ読んでください。
コレ一冊でokです。

cocos2dで作る iPhone＆iPadゲームプログラミング/Steffen Itterheim

￥3,990
Amazon.co.jp

このFlashにめっちゃ似てる構造をうまいことなんとかして
FlashからPiggのアニメーションのデータ抜いてきてcocos2dで
再構成できたらすんごい楽なんだよなーと思って、抜き出す仕組みを考えました。
というかココできないと先進まなかったので一番始めにここに取り組みました。

あとになって色んな人に話を聞いてみたら、
割とポピュラーなやり方みたいなんですが、
Flash使ってる人がほとんどいなかったり、みんなAfterEffects使ってたり、
あんまソース落っこちてないし、ちゃんとやり方まで言及してるの見たことないんで、
これからObjective-CでiPhone用ゲームアプリつくるぞーって方の後押しになれば幸いです。

ちょっとてきとーかもしれないけどこーなります

Flashからアニメーションを抽出する

1) : Textureの作り方

まず中で使う用のTextureを用意するのにはおなじみの
TexturePacker
を使います。

こちら今はswfのアニメーションもまんま取り込んでくれるんですが、
swfそのまんまだとコマアニメの状態になり、あっという間にTextureがスゴい数になるので
あんまおすすめできません。
なのでFlashのPiggと同じように各部位のパーツだけTextureにします。



アプリの容量は20MB以内に押さえないと3G回線でのDownLoadができないので
小さいサイズにこしたことないです。

2) : 座標系の違い

Flashとcocos2dの間で決定的に違うのは座標系です。
Flashがスクリーン座標(左上が基点)なのに対してcocos2dではデカルト座標(左下が基点)です。



なので左下を基点にした座標が欲しいので
こんな感じに入れ物にするMovieClipを作ってあげてそいつを左下座標に合わせてあげます。



Flashのx座標がx = 20の時cocos2dのx座標はx = 20で同じになりますが
Flashのy座標がy = 20の時cocos2dのy座標はy = -20になります。
だからFlashから持ってきたY座標値には-1をかけてあげる必要があります。



こんな感じのmethod一個噛ませてあげればokです。
ちなみに2で割ってる理由はcocos2dの特性で、retinaだろうが3gだろうが
Stageサイズを480*320として計算しちゃうというのがあって
座標のずれを最小限にしたいからFlash上では960*640のretinaDisplay用として配置して
小数点まで含んだ数値を２で割って480*320のDisplay上の計算に戻しているからです。

3) : Flashでのレイアウトを移植

つりポン！ではFlashをレイアウトのツールとして使いました。
で、いちいち色々やるのめんどくさかったので、
Flashの構造から自動で配置状態まで
Objective-Cのクラスにしてくれる制作補助用AIRを作って使ってました。
こんな感じでやってました。

MovieClipの構造はroot/Container/PiggAvatar/

中身はこんな感じ。

で、中にはこんな感じのレイアウト変換用ASを使います。

※これは単に出力パネルに表示されるようにしただけのやつです。
仕様きまったらAIRにしちゃったほうが楽ですよ。

でそこから出力パネルに書き出されたのがコチラです。

これをcocos2dのソースにコピペしてやればFlashと同じ位置に配置されます。
同じようにして各bodyパーツ用のCCSpriteをインスタンス名のStringと連結したりあれこれして、自動生成してやってます。

で、出来上がりがこちら

これやっとけばこんだけの量のソースを書かないでも良くなるんです。
らくちんですよね。

4) : Flashのアニメーションを移植

上記と同じ方法で全フレーム分の座標を各レイヤー毎にCCSpawnにしてから
全部のCCSpawnをCCSequenceに納めます。
詳細まで書くとすんごく長くなっちゃうのでCCActionのことはググってみてください。

motion用.mにこーいうmethod入れといた方がいいです。
理由はいれとかないと無駄にsrcが長くなるからです。


で、このmethodがある前提でこーいうASを書きますよ。


上記で使われてるPiggMotionParts.as


まとめた文字列を書き出すmethod


出来上がりはこんな感じになります。

このmethodが何をしてるのかというと
各間接パーツを任意の秒数でフレーム毎の座標にtweenしてます。
これをまとめて呼び出せばさきほどの動画みたいなアニメーションするといった感じです。

上記のすげーてきとーなソースでもpigg40体くらいはfps60～52くらいで動きますよ！


と、大分ざっくりになりましたが、
こんな感じでFlashからレイアウトとかアニメーションを抜き出して.mと.hを吐き出す
制作補助用AIRアプリを作って、cocos2dで使ってました。

今はこーいう静的なアニメーションは
チームの人が作ったCCNodeのinterfaceを維持した独自クラスを使ってて、
(CCSequenceは重い！！と言ってました。)
動的なアニメーションだけcocos2dの仕組みで動かしてたりします。
※pigg100体くらい動かしたいみたいです。すげーこと考えるなー。


cocos2dは簡単なので初心者でもすぐ始められて
タダだからお金かけないで試せるし
コードベースなのでsvn等での多人数開発ができるし
MITライセンスなので好きに使えるし
Objective-Cなのでいくらでも拡張出来るし
いいことづくめです。

これを見てFlash屋さんがcocos2dからiPhoneアプリの開発に興味持ってくれると嬉しいです。
長くなりましたがこんな感じでした！！！

iPhoneアプリ開発楽しいですよ！！

第１回 HTML5,CSS3を舐めまわす会 レポート<後半>

みなさんこんにちは。
サイバーエージェントでスマートフォン向けのデザイナーをしております、新卒の阿部です。

前回に引き続き、9月下旬に行われた「HTML5,CSS3を舐めまわす会」についてのレポートを
お届けします！

午前中はHTML5についての話題でしたが、
午後はCSS3についてのセッションが開催されました。

３　CSSセレクタについて

①属性セレクタ

CSS3からは、属性の一部を抜き出してくれるセレクタが一気に追加されました。以下一覧です。


　　E[foo^="bar"]　　　　属性fooの値が「bar」で始まる場合に適用
　　E[foo*="bar"]　　　　属性fooの値の一部に「bar」が含まれる場合に適用
　　E[foo$="bar"]　　　　属性fooの値が「bar」で終わる場合に適用
　　(※以下、Eは要素(タグ名のことです)を指しています)


例えばdivタグの中の「idがmenuから始まるものだけ」に対して文字を赤くしてみます。
今まではそのタグに「class="red"」と指定する・・なんてことをしないといけなかったのですが、


　　div[id^="menu"] {
　　　color: red;
　　}

　　　　
と書けばできるようになりました。

②擬似クラス

CSS3で追加された主な擬似クラスは以下のとおりです。

　　E:nth-child(n)　同じ親要素内の最初からn番目の要素に適用
　　E:nth-last-child(n)　　同じ親要素内の最後からn番目の要素に適用　　
　　E:only-child　　　　　指定した要素が親要素内で唯一の場合に適用
　　E:first-of-type　　　　同じ親要素内の最初の要素に適用
　　E:last-of-type　　　　同じ親要素内の最後の要素に適用
　　E:nth-of-type(n)　　　同じ親要素内の最初からn番目の要素に適用
　　E:nth-last-of-type(n)　同じ親要素内の最後からn番目の要素に適用
　　E:only-of-type　　　　指定した要素がひとつの場合に適用
　　E:empty　　　　　　　空の要素に適用


擬似クラスを使うと、例えばリストの１行目だけ灰色にして太字にしたい！とか、リストの奇数行目を白に、偶数行目を黄色にしたい！ということが簡単に実現できるようになります。

リストの１行目だけ灰色にして太字にする

　　li:nth-child(1) {
　　　　background-color: gray;
　　　　text-weight: bold;
　　}


と指定すればできるようになります。
簡単ですね！

奇数行目が白、偶数業目が黄色の、交互に色のついたリストを作る

nth-child を応用して、
　

　　li:nth-child(odd) {
　　　　background-color: white;
　　}　
　　li:nth-child(even) {
　　　　background-color: yellow;
　　}
　　　　

と指定すれば、１行ごとに交互に色がついたリストを作れるようになりました。
ほかにも便利なクラスがたくさんあります。特にリストなどの同じ要素がたくさん続くHTMLに対してスタイルを適用するときに便利になりそうです。

③スマフォはほとんど対応しているが、PC版のブラウザは要注意

Android、iPhoneではほとんど対応していますが、一部のPCブラウザではほぼ全滅のようです。PCサイトの場合ユーザーの使っているブラウザシェアを見極めながら判断したほうがよさそうですね。

４　CSS3のプロパティについて

気になる機能はスマフォでもチェックしていました！

ここでは特に重要だと思った「box」、「border-radius」、「shadow」に絞ってまとめてみようと思います。

①新しいレイアウトの考え方「Box」

CSS2ではレイアウトを作るとき、ボックス要素に対してfloatを設定し、横並びにさせて・・・としてきましたが、CSS3からは新しく「ボックスレイアウト」という考え方が登場しました。

横並びレイアウトにしたい要素達をまとめる「１つ外側の要素」に対してdisplay:box を使うことで中の要素が横並びになり、floatではうまくできなかった各要素の高さも一番高いものに合うようになります。各要素を%指定で横ならびに配置して、さらにマージンを指定・・なんてこともできるようです。

(現状ではdisplay: -webkit-box; (おもにsafariやchrome、iOSやAndroid向け)、display: -moz-box; (おもにfirefox向け)というようにブラウザごとに設定します。)

Boxでで使える主なプロパティ

「box-original-group」
中に作られたブロック要素の表示順を変えることができます。HTMLの記述に関係なく順序を変えられます。

「box-flex」
中の要素で横幅を可変にしたいものがある場合、ブラウザが自動的に横幅を計算して適切な長さを指定してくれます。

「box-sizing」
CSS2まではpaddingとmargin(ボックスの余白)が横幅とは別に計算されていたため横並びのレイアウトの時にうっかり計算間違いをするとうまくレイアウトができなかったのですが、「box-sizing」プロパティを使うと横幅の値にmarginやpaddingを含めるかどうかCSS側から指定できるようになりました。

②枠線を角丸に「border-radius」

CSS3からは枠線の角の丸みをCSSからコントロールできるようになりました。

角の丸さはピクセル数で指定でき、また角ごとに別の値を指定することもできるので便利です。

(これも現状では-webkit-border-radius: 10px; (safariやchrome、iOSやAndroid向け)や-moz-border-radius: 10px; (おもにfirefox向け)とブラウザごとに設定しておいたほうが丁寧なようです。)

Androidでは要注意
Androidではborder-radiusを指定すると表示に時間がかかってしまい、スクロールしたときにカクカクした動きになったり、スクロールに追いつかなくなることがあるのでスマフォ用のサイトに使うときは注意が必要なようです。

③文字や枠に影を設定する「shadow」

シャドウには


　・text-shadow(テキストに影をつける場合)
　・box-shadow(ボックス要素に影をつける場合)


の２つしかありませんが、


　・影の色
　・ずれ具合(ピクセル単位)
　・ぼかし具合
　・ぼかし距離


を設定することができ、複数の影も指定することができるので、うまく組み合わせれば

　・エンボスのように浮き出て見える効果
　・光っているような効果
　・暗闇にぼやっと浮かび上がるような効果

が、CSSだけで作れるようになりました。

実例が載ったサイトがたくさんありますので、
「CSS3 シャドウ」で是非検索してみてください！
　

５　CSS3のアニメーションについて

休憩時間には海をながめながらゆっくり。夕日がきれいでした！

①大きく分けると２種類

CSS3のアニメーションは

　・プロパティの変化を操る CSS3 Transitions
　・フレームを操る　CSS3 Animations

　
の２種類に分けられます。

どちらもCSSで設定されたプロパティを設定した時間にあわせて少しづつ適応させてくれるすごく便利な機能なんですが、指定方法が少し違います。


　　CSS3 Transitionsは
　　　「背景色を３秒かけて白にして！エフェクトはease-inで！」
　　CSS3 Animationsは
　　　「背景色をキーフレームに従って３秒かけて実行して！繰り返しは４回！」


・・わかりませんよね。。

②Transitionsの設定

　　Transitionには「transition-timing-function」という指定ができます。


「エフェクトはease-inで！」のところです。
これは「イージング」とも呼ばれていますが、「最初ゆっくりで次第に早くなって最後まやゆっくり」とか「ボールがバウンドするような動き」といった変化させるタイミングやその割合のパターンのことです。何も指定しないと一定のスピードで次第に変化していくアニメーションとなりますがこれを指定することで変化に動きをつけて、リアルなアニメーションを手軽に作ることができるようになります。

③Animationsの設定

　　Animationでは「transition-timing-function」の代わりに
　　「キーフレーム」に従ってアニメーションを作ります。


「キーフレーム」はCSSに記述することができるので、お手軽さはなくなりますが、より細かい動きを指定して動きを細かくコントロールできるようになります。また回数の指定もできるので、繰り返しアニメーションを動かすことがかんたんにできます。

こちらも実例がたくさんありますので
「CSS3 animation」で検索してみてください！
　　
長々と書いてしまいました。
１日缶詰になって集中したおかげで、飛躍的に理解が深まった気がします。最後までお付き合いいただき、ありがとうございました！

第1回 HTML5,CSS3を舐めまわす会 レポート<前半>

みなさんこんにちは。
サイバーエージェントでスマートフォン向けのデザイナーをしております、新卒の阿部です。

今回は9月下旬に行われた、「HTML5,CSS3を舐めまわす会」についてのレポートを
お届けします！
「HTML5,CSS3を舐めまわす会」は、以前このブログにも記事を書いた弊社原 (@herablog)を中心としてはじまった自主勉強会で、社内でHTML5を使って開発をしているデベロッパー・デザイナーの情報共有や交流を目的としています。

場所はお台場にある弊社のミーティングルーム。業務から離れ、渋谷からも離れた場所で合宿を行うことでまとまった時間がとれ集中して勉強できます。
第1回目の今回は「vol1 -マークアップ編-」と題して、HTML5とCSS3にどっぷりと浸かった濃密な１日になりました！

１ まずはじめにHTML5のコンテンツモデルとアウトラインについて

HTML5では新しく「コンテンツモデル」と「アウトライン」という考え方が導入されました。
「コンテンツモデル」とは、「ある要素のなかにどの要素が入れられるのか」の定義

　　(x)HTMLには

　　・「ブロックレベル要素」(<h1>などの見出し要素や<div>などの段落要素など)
　　・「インライン要素」(<span>や<img>など)

　　の２タイプがありましたが、
　　HTML5ではそれらが拡張され、「コンテンツモデル」として定義されています。
　　また、要素の内部に記述できる要素についてもしっかりと定義されました。

　　定義されているコンテンツモデルのカテゴリはおおまかに言うと以下のとおりです。

　　・「メタデータ・コンテンツ」(<link>、<meta>などのメタデータ関連)
　　・「フロー・コンテンツ」(<div>、<img>など本文にくるもの全般)
　　・「セクショニング・コンテンツ」(<section>、<nav>など区切りを示すもの)
　　・「ヘッディング・コンテンツ」(<h1>、<hgroup>など見出しを示すもの)
　　・「フレージング・コンテンツ」(<b>、<span>などテキスト関連)
　　・「エンベディッド・コンテンツ」(<embed>、<video>など画像やビデオを
　　　　コントロールするもの)
　　・「インタラクティブ・コンテンツ」(<button>、<section>などユーザーが
　　　　操作できるもの)

　　例えば<p>は「ブロックレベル要素」でしたが、
　　HTML5からは「フロー・コンテンツ」というカテゴリに属し、
　　「フレージング・コンテンツ」のみ、タグ内に記述できるようになりました。
　
　　具体的には・・・
　　　<img>タグはフレージング・コンテンツなので
　　　<p><img・・・ ></p>と記述できますが、
　　　<h2>タグはヘッディング・コンテンツなので<p><h2>テキスト・・・</h2><p>
　　　とは記述できません。

　　　また、HTML5から新設された<hgroup>タグは内部に<h1>～<h6>のみ記述できるので
　　　<hgroup><p>テキスト・・・</p></hgroup>とは記述できません。


　　<a>タグは以前は「インライン要素」でしたが、
　　HTML5では「フロー・コンテンツ」というカテゴリに属し、
　　「トランスペアレント」という特殊なコンテンツモデルを持つようになりました。
　　「トランスペアレント」とは簡単にいうと
　　　「親のコンテンツ・モデルと同じモデルをその場に応じて持てる」ということです。
　　　そのため、例えば
　　　<section>
　　　　<a href="◯◯">
　　　　　<p>テキスト<img・・・ ></p>
　　　　</a>
　　　</section>
　　　のように、以前ブロックレベル要素と言われていたタグを<a>でマークアップすることも
　　　できるようになりました。
　　　(この場合、<a>タグは<section>タグのモデルを引き継ぐため
　　　<section>タグ内部に記述できるタグが<a>タグでも使えます)

　　すべてのタグはどれかのコンテンツモデルに属し、
　　内部に記述できるコンテンツモデルのカテゴリが決まっているのですが
　　<br>タグのように複数のコンテンツモデルに属するものもあります。
　　(<br>タグは「フロー・コンテンツ」、「フレージング・コンテンツ」に属します)

　　また、上の例に上げた<hgroup>タグのように内部にカテゴリではなく特定の要素
　　(hgroupであれば<h1>～<h6>)のみ記述できるタイプのタグもあります。

　　細かく見るともっと奥が深くてややこしいのですが、この考え方がHTML5の中心と
　　なっているのでここは是非理解しておきたいところだと思いました。

「アウトライン」を利用してより構造的なマークアップを！
　　
　　HTML5からは新しい要素「セクショニング・コンテンツ」を使って
　　マークアップできるようになりました。

　　今までは<div>を使ってセクションを区切っていましたが、これは単に
　　コンテンツを区切るだけで、文章の構造上は何の意味もありませんでした。
　　HTML5からは
　　　<header> <footer> <nav> <section> <article>
　　などのセクショニング・コンテンツを利用し、より情報のしっかりした、
　　構造的なページ構造が作れるようになります。

　　検索エンジンに対しても効果的になるのでは・・と言われています。


みなさん真剣です

　HTML5を理解する上でとても重要なセッションだったため、質疑応答では
　アウトラインやセクショニング・コンテンツについて、多数の質問が出ました。　
　　
　　とくに
　　HTML5の新要素、セクショニング・コンテンツ（<section>や<article>など）の
　　使い分けをどうするか？についての議論が盛り上がりました。

　　　・<section>は見出しやまとめなど、構造の区切りとして使う
　　　・<nav>は文字通りナビゲーションだが、あまり使いすぎないほうがいい。
　　　　メインのナビゲーションに使用すべき。記事一覧やコンテンツ一覧は
　　　　<article>を使う方がよい
　　　・<article>もその名の示す通りブログの記事など、タグ内で１コンテンツ
　　　　として成り立つものをマークアップするのに使う
　　　・IE8以下では無視されるので、javascriptを利用しながらマークアップする必要あり
　　　
　　セクショニング・コンテンツについてはまだまだ使い方に個人差があるので、
　　最新情報をきちんとキャッチしたり社内でガイドラインを作ったりして、
　　ベストなマークアップを探していかなくてはいけないなと感じました。

２ つづいて原を中心に、HTML5の新機能についてみんなで舐めまわしました

細かく見ていくとほんとうにたくさんの変更点があり
　ここにはとても書き切れないので重要だと思った部分だけ箇条書きで書いてみます。

　・<html>タグにmanifest属性ができた。
　　　application-cache(オフライン用にキャッシュを保存できる機能)用のファイルを
　　　別に指定できるようになったが、うまく動かずコントロールが難しいようです。

　・<meta>タグにviewport属性ができた。
　　　(スマートフォン用)画面サイズの調整やページの拡大・縮小の設定を行える
　　　ようになりました。

　・セクショニング・コンテンツの新要素
　　　・<nav><section><article>をどう使い分けるのが一番ベストなのか。
　　　　前のセッションでも大きな話題になりましたが、使い方に関してはまだまだ
　　　　個人差があるようです。
　　　・<section>ごとに見出し要素をリセットして設定できるようになったことが
　　　　個人的には大発見でした。

　・<input>のtype属性が一気に増えた
　　　・searchやurl、email、rangeなど。
　　　　しかし、ブラウザの実装がまだまだ進んでいないようです。
　　　　スマートフォンのほうがサポートは速く、type="search"はずいぶん普及しています。
　　　・テキスト入力フォームに「名前を入力してください・・・」といった初期値を入れて
　　　　おく機能が「placeholder属性」として実装され、javascriptを使わなくても実装
　　　　できるようになりました。
　　　・実装されてない属性を指定するとtype="text"になるようです。

　・<address>要素を正しく使おう
　　　・<address>は
　　　　「ドキュメントやドキュメントに対する情報をいれる」ところ。
　　　　　・サイトの運営者を書く場合
　　　　　・記事の作者を書く場合。
　　　　に使われる。

　　　・まちがった使い方
　　　　・住所を示すタグではない
　　　　　任意の住所を示すために<address>タグを使ってはならない。

　・<em>と<strong>と<i>と<mark>と<b>の細かい使い方の違い
　　　文字を強める要素には<em>と<strong>と<i>と<mark>と<b>
　　　があり、以前から使い分けに関してはいろいろと議論がありましたが、
　　　この会でもつっこんだ議論が行われました。
　　　
　　　・<i>は「代替の声」(外国の単語や技術用語が想定されます)を表す要素ですが、
　　　　では顔文字は<i>でマークアップ可能か？という議論に
　　　　→顔文字に嬉しい意味があればよい　(<i>＼(^o^)／<i> ならば良い)
　　　　　という意見が出ました。

　　　・<b>は「意味的に区別したい」テキストを表す要素になりました。
　　　　「重要性はないが意味的に区別したいとはどういうことか？」について
　　　　　→文節がわかりにくくなって「」で区切る場合に<b>が使えるかもしれない

　　　・<em>と<strong>の違いについて
　　　　<em>は強調・強勢、<strong>は強い重要性を表す要素です。
　　　　→重要性を訴えるには<strong>をつかい、強調を含めずにイタリックにしたいなら
　　　　　<i>をつかい、エラーや警告メッセージなどは<em>を使うと良い
　　　　　ネストして重要度の度合いを調整する。
　　　　　<strong>に関しては使いすぎるとSEO的に弾かれる危険性あり

　　　・中でも心に残ったのが「<i>と<b>をきちんと使い分けているサイトを
　　　　見かけるとオシャレだなあと思ってしまう」というマークアップエンジニアの
　　　　何気ない言葉。

　　　　HTMLやCSSを使っているデザイナーとして、こういう美意識を持って
　　　　ものづくりをしていきたいなあと思いました。


１日まるまる勉強会に時間を使えたおかげで、実りの多い時間を過ごすことが出来ました！
ーー後編につづくーー

CAMP ad:tech tokyo出展準備レポート

こんにちは。
ネットビジネス総合事業本部 CAMP事業部でクリエイティブを担当している岡崎です。
今回は、CAMPが ad:tech tokyo というイベントに出展するにあたり、色々な準備をしてきた様子を紹介させていただきます。

と、はじめたところで、「そもそもCAMPって何？」「アメーバ以外にもクリエイターがいるの？」と思われる方も多いでしょう。そこで、まず私達のサービスから紹介させて頂きます。

CAMPについて

http://www.ca-mp.jp/

「CAMP(CyberAgent Marketing Platform)」とは：
株式会社サイバーエージェントが提供する、シンプルで使いやすいインターネットマーケティングプラットフォームです。これまでCAMPは、ディスプレイ広告やリスティング広告の効果測定に特化してまいりましたが、本年、新たに広告配信機能 (第三者配信、RTB）、広告効果最適化機能 (LPO、EFO) の提供を開始したことにより、広告の運用サイクルを 1 プラットフォームで完結させ、迅速な広告の効果改善を実現できる統合プラットフォームへと発展いたしました。
さらにこれからも、より機能の拡充を図ることで、更なる進化が見込まれるインターネットマーケティングの分野において広告主に対し最適なインターネット広告ソリューションを提供してまいります。

というのがちょっと固いご紹介。
柔らかく言うと、みなさんが色々なサイトを訪問したときに目にする、バナーなどの広告を配信したり、掲載された広告のクリック率や成果率を測定して、広告効果の改善に役立てられるデータを提供するプラットフォームを設計/開発しています。
CAMPは、アメーバのように一般ユーザ向け (B to C) のサービスではなく、企業 対 企業 (B to B) で販売/利用されるサービスなので、直接みなさんの目に触れるチャンスはありませんが、そんな仕組みがインターネット広告の裏側で動いているという事に興味を持っていただけると嬉しいです。

CAMPのクリエイティブについて

現在、CAMPには 7名のクリエイターが在籍しています。普段はエンジニアやサポートと連携して、CAMPの管理画面の情報設計、制作、改善を進めていくことなどが主な業務です。
直感的なナビゲーションや、操作しやすい設定画面、カラムが多いデータの表示処理、運用負荷やヒューマンエラーを削減するための工夫など、細部まで使いやすさにこだわったプラットフォームづくりを心がけて制作しています。

そうして進化を続けているCAMPですが、どんなに素晴らしいサービスを作っていても、クライアントのみなさまに知っていただかなくては活躍の場がありません。ということで、より多くの方にCAMPの魅力をお伝えするため、昨年に引き続き ad:tech tokyo への出展を決めました。

ad:tech とは、デジタルマーケティングに関するサービスやテクノロジーの共有を目的として、多数の企業やマーケッターが集まる B to B のイベントです。東京の他、全世界8都市で開催される、業界最大級のイベントです。
http://www.adtech-tokyo.com/ja/

イベント当日にセミナーを開いたり、訪れた方々への説明を行うのは、セールスチームの仕事になりますが、イベントに向けて、展示ブースや配布物を準備/制作したり、イベントの告知を行うのはクリエイティブチームの仕事です。普段の業務とはだいぶ毛色が異なりますが、これもCAMPブランドを世界にアピールするための重要な仕事になります。

ad:tech に向けて制作したもの

全体的なコンセプトは、CAMPのイメージを今までの効果測定ツールから、CyberAgentが提供する総合マーケティングプラットフォームへ発展したことを正しく伝え、昨年よりもより強くブランディングすることでした。

約 2ヶ月前から、それぞれの制作物について、目的、必要な要件、スケジュールなどを考え、制作を進めていきました。CAMPとしての ad:tech 参加は 2回目ですが、わたし自身はイベント参加も、業務でリアルな制作物に関わることも初めてだったので、手探りでのスタートとなりました。

1. facebook page

まず、今回初の試みとして、CAMPでも facebook page を開設/運用しました。もちろん目的は、CAMPが ad:tech に出展することを広く知っていただき、多くの方に当日ブースに訪れていただくことです。
開設時には、弊社 Facebook Marketing Lab の藤後に、運用の注意点や、「いいね!」獲得の施策など、アドバイスをもらいました。
個人的にも普段からかなり facebook を利用していたこともあり、ページの準備はスムーズに進められました。
ad:tech 出展準備の様子を伝えたり、出展内容の告知をしながら、沢山の「いいね!」獲得を目指して、各ページを作成していきました。

▼ welcome ページ

welcome ページは、facebook page に初めて訪れたユーザに対して、このページの説明と「いいね!」を促すことが目的です。今回は、簡単にCAMPの説明を入れつつ、ad:tech 出展の告知を全面に押し出した内容にしました。

デザインは配属されたばかりだった、新卒 1年目の青木に担当してもらいました。
「仮配属されてすぐの仕事だったので、とても悩みました。ひたすらラフを作ってチェックを受けるという行程を何度か繰り返し、周りの方々に助けてもらいながら完成しました。このページをデザインしたことで、CAMPやネット広告について学ぶきっかけになりました。」(青木)
と語ってくれたとおり、初仕事ながら目的に沿った効果的なデザインに仕上げられたと思います。

その他にも、facebook developers を利用し、「ad:tech 出展内容」「CAMPについて」「アドテクノロジー用語集」など、いくつかのタブページを用意、通常の PRサイトとは違なり ad:tech に特化した内容でまとめました。

▼ facebook advert の運用

さらに、開設した facebook page を、facebook 上のターゲットユーザに告知するため、facebook advert も利用しました。最初に 5種類のバナーを用意し、インターネット広告関連に興味があるターゲットユーザに対して配信し、インプレッションが良い物を残して運用を続けていきました。結果、目標数には達しなかったものの、430あまりの「いいね!」を獲得できました。
一般的な facebook page と比べると少ないと思われるかも知れませんが、特定の条件に当てはまる人をターゲットにしているサービスの性質上、情報を届けたいユーザにはほぼ伝えることができたのではないかと思います。

http://www.facebook.com/camp.jp

2. 展示ブース

ブースの設計や設営は昨年と同じ専門の業者に依頼し、プロデューサーの内波がイメージを伝えながら準備を進めていきました。
「担当者の方と打ち合わせを重ね、デザインや、壁やカーペットの色/材質、ロゴの配置/大きさ、設置する機材など様々な要素を決めていきました。昨年よりも、じっくり時間をかけて準備ができたので、クオリティーを追求することができました。」(内波)

▼ 打ち合わせ風景

ブースのデザインは、オープンな雰囲気を残しつつ一部を壁で囲み、内側に解説のパネルとPCを設置、落ち着いてCAMPのデモ画面を体験していただけるように考えられています。

▼ ブース設計図

3. ノベルティ : ノート

そしてイベントといえばノベルティです。みなさんも出かけたイベントで素敵なノベルティがもらえると、その商品やサービスがちょっと好きになりますよね？
単なるオマケではなく、ノベルティはブランドのイメージアップという大事な任務を背負っています。

昨年に続き、今年も 1つ目はノートになりました。アメーバでもお馴染みのノートですが、去年とは志向を変えて、サイズ、方向、表紙の色や材質、リングの種類、ロゴの入れ方など細部にまでこだわって、今のCAMPブランドに似合うクオリティを追求しました。
市販のノートを研究するなど検討を重ねた結果、B6 ヨコ、黒い厚紙の表紙にCAMPロゴをシルバーで刻印、中紙は厚めの中性紙で、使いやすいようにあえて無地を選びました。

また、表紙と裏表紙を開いた 1枚目には、CAMPならではのコンテンツをプリントし、オリジナリティーを出しました。表側が ad:tech tokyo のCAMPブース案内図、裏側が「その場で役立つアドテクノロジー用語集」となっています。

仕上がりは、「これは自分でも使いたい！」と思える、期待通りのイメージに出来たと思います。実際、イベント当日も評判が良く「ノートいただけますか？」と声をかけていただけたのは、やはり嬉しかったです。

4. ノベルティ : 風呂敷

ノベルティ 2つ目、昨年のCAMPラーメンも好評でしたが、今年は「風呂敷を広げる」にひっかけて、オリジナルの風呂敷を作成することに決まりました。
いくつかの制作会社からサンプルを取り寄せ、風呂敷のサイズ、素材、納期、価格などを詰めていった結果、実用性を重視し、90 x 90cm の大判サイズにしっかりした材質を合わせることで決定。
こちらのデザインも新卒 1年目の青木に任せ、CAMPのロゴを入れるという以外の制約は設けずに、自由に提案してもらいました。

▼ 実寸でプリントしてパターンを確認

青木にとっても初の制作物となりましたが、プレッシャーを感じながらも楽しんでデザインできたおかげで、とてもクオリティが高いものに仕上がりました。
「デザインの期間が短かったので、方向性が決定するまでとにかく焦りました。とにかく『好きにつくっていい』という感じだったので、嬉しさ反面プレッシャーが大きかったです。去年のノベルティのデザイン担当にも相談しました。大まかなデザインが決定してからは風呂敷にもの凄く愛着がわき、『こうしたい』という考えが明確になってきたので楽しく進めることができました。会場に山のように届いた風呂敷を見て『自分がデザインしたものが実物になってる。。。』と感動しました。」(青木)

▼ CAMP風呂敷 完成☆

また、少し遊び心のある「風呂敷の使い方」を封入することでオリジナリティを追加、こちらのデザインも青木が担当しました。
「得意分野のイラストだったのでアイディアが出しやすかったです。また、今まではとにかく手探りで進めていたので、アドバイスをなんでも受け入れようとして混乱することが多々ありましたが、このときは最初から自分の意見を持って進めることができました。」(青木)
という言葉の通り、簡単なイメージを伝えただけで期待以上のデザインに仕上げてくれました。

風呂敷もノート同様に好評をいただき、自分たちが使いたいと思えるクオリティを極めると共感してもらえるという点では、WEBもリアルも同じであると実感できました。

5. パンフレット

そして、CAMPを正しく魅力的に伝える上で重要な役割を果たすのがパンフレットです。
こちらは昨年のデータを元に、新たに加わった機能や、進化したCAMPの立ち位置を伝えるため、中身を全て見直しました。
デザインテイストは既に決まっているので、伝えたいこと/伝えるべきことを、できるだけ簡潔にわかりやすく、文章と図で表現し、美しくレイアウトするというのが課題でした。
まず、自身がサービスについて詳細まで正しく理解しなければ人には伝えられないということで、セールスシートなども読み込み、理解を深めるところから始めました。

特に難しかったのが、RTB (Real Time Bidding) を使った広告配信について説明する図でした。
参考になる図がどこにもなかったので、プレイヤーと流れを考えながらたたき台を作成、それをもとに確認/修正して進めていきました。
最終的には「これはわかりやすい」と言っていただける図になり、自分でも配信システムについて理解が深まったので、とても有意義だったと思います。

▼ リーフレット 3枚とファイル

またファイルの内側には、左にCAMPの全体感、右にCAMPの未来を表現、それぞれの図を青木が担当しました。この図については、イメージがかなり固まった状態で依頼出来たため、スムーズに完成度の高いものが上がって来ました。
「最初に浮かんだイメージをそのまま描いたところ、思いのほか見栄えが良くなったのでスムーズに進みました。風呂敷のデザインとは逆で詳細のバランスを決めるのが難しく、何度も確認して頂きました。最後は、入稿する色が出力してもイメージ通りにならないというトラブルもありましたが、去年に引き続きカッコいいパンフレットになって良かったです。」(青木)

また、昨年思い通りにならなかった色校正についても細かく確認して進めた結果、コーポレートカラーがきちんと再現され、機能が増えたことで、昨年よりも充実した内容のパンフレットに仕上げることが出来ました。

ad:tech 会場の様子

ad:tech tokyo 前日の夕方に、青木と二人で設営の確認や展示の仕上げを行うため、会場のザ・プリンスパークタワーに向かいました。会場がホテルのコンベンションホールだったので、非常に場違いな空気を感じつつ、パスの発券を完了して入場しました。
会場の内外では急ピッチで準備が進められていて、およそホテルらしくない雰囲気でした。

▼ ほぼ仕上げ段階に入ったCAMPブース

1. ウォールの仕上げとパネルの確認

まず、Illustratorのデータで納品したパネルやウォールがイメージ通り再現できてているか、どきどきしながら確認しました。
パンフレットのデータを利用しながら、CAMPの「配信機能」「効果測定機能」「その他の機能」について、それぞれA1サイズの説明パネルを準備しました。
PCのデモ画面と共に見ていただくという想定だったので、字を少なくしてなるべく図解で表現する、色や文字サイズを工夫して読みやすくするなどの点に気をつけて作成しました。

▼ CAMPの機能説明パネル

また、CAMPの全体感については、ブースの壁に直接プリントするという方法を試みました。
パネルとは違った表現が求められたので、データ納品前に実寸でプリントしては社内の壁に貼って確認/修正するという作業を何度も繰り返しました。
社内にどーんと貼っていることで、多くのメンバーから意見をもらうことができ、時間がない中でも細部まで調整ができたと思います。

▼ CAMPの全体感 (左 : 社内で実寸確認中、右 : 完成図)

また、CAMPの未来図については、ブースの壁に直接手描きするという試みを行いました。こちらはパンフレットに引き続き、青木が担当しました。

▼ 下描きと、実寸練習の様子

まずブースの壁とロゴのサイズを確認し、表現したい内容を手元で下描き。
次に、大きな紙を準備し、社内の広い壁を使って、実寸の壁を再現しました。
同時に白い画材を数種類用意し、表現と相性の良い画材を選択。
実際の大きさで壁に描いてみるという練習を繰り返しました。

練習の結果、「何もないところから描き始めるのは時間がかかって難しい」という問題が判明し、プロジェクターを使って下描きを投影し、その線に沿って描いていく方法に切り替えました。

▼ 完成したCAMPの未来

入念な準備の結果、当日はあっと言う間に壁画が完成。満足のいく出来となりました。
自分の iPhone からスライドを投影していたため、パイプ椅子に乗って製作する青木の姿を残せなかったのが心残りです。

2. CAMPブース完成

配線や、証明、モニター、デモPCなどの設置も終わり、夜 9時頃にCAMPブースが完成!
ブランドロゴもしっかり映えるCAMPらしいブースに仕上がりました。

ブース本体以外にも、各ノベルティの納品状況や、来場者パスの発行、音声や電源、鍵など、様々な確認事項をチェックして、会場を後にしました。
青木もわたしも、こういったイベントに設営段階から関われたのは、大変よい経験になりました。

3. イメージムービー

また、パンフレットに使用した「CAMPの未来」の素材を元に、佐藤がFlash ムービーを作成し、ブースのモニターで流しました。
実際に流す環境を推測して作成はしていましたが、準備の日にモニターに映してみると、解像度やアスペクト比に再調整が必要な事がわかり、イベント当日の朝に会場で再調整を行いました。

▼ CAMPの未来ムービー

4. 開催中の様子

10/27,28 の ad:tech tokyo 開催両日は、沢山の方にブースに訪れていただき、CAMPの魅力をお伝えすることが出来ました。

▼ 左 : ミニセミナー開催中、右 : お客さまに説明中

ad:tech を終えて

普段、WEB上のサービスを作っているわたし達にとって、イベント参加や、リアルな制作物は少々勝手が違いましたが、目的に合わせて最適なデザインを考えていくという部分は同じです。

ただ、リアルな制作物ならではの納期、サイズ、再現性など様々な制約や、仕上がりをイメージをしながら進める (WEBのように手元で確認できない)という部分では、経験のなさから苦労することも多かったです。
イベント全体を意識しながらも、開催日までは締め切りに追われながら次々にデザインを上げて行くという日々で、実際に仕上がりを見るまでは不安もありました。1つミスをしたら 1000個の実物に傷がつくというプレッシャーも感じていたので、それぞれ納品された物を確認した時は、とてもほっとしました。

レポートの中で名前を挙げた以外にも、事業部内外の沢山のメンバーの協力のおかげで、ひとつひとつコンセプトに沿った制作物を形にすることができ、最終的にCAMPのブランディングを正しく伝えることにも貢献出来たのではないかと思います。

今回、初期段階から準備に関わり、イベントにも 3日間足を運んだことで、次回へ向けての課題や反省点も色々見えてきました。人に伝えようとすることで、自分たちのサービスに対する理解を深めることも出来ました。

今後もCAMPブランドを世界にアピールしていくという課題は続いてくので、この経験を生かしていきたいと思います。

ゲーム開発に役立つ？数学

こんにちは。アメーバ事業本部でピグの開発を担当している堀江優（@yu_horie）と申します。
この度、ピグに新たに誕生しました「昭和の町」エリア内で遊べる「めんこゲーム」の開発を担当させていただきましたので、その内部的な仕組を紹介させてください。

自作物理演算エンジン

ピグめんこゲームではリアルかつ直感的なインタラクションを実現するために、
めんこが叩かれてめんこがひっくり返るまでを計算する物理演算エンジンを自作しました。
実際の動きは上の動画を見ていただくとして、めんこが叩かれてからどのような計算をしているのかを簡単に解説します。

ステージ上のめんこは（薄い立方体として）3D描画しています。
（ちなみにピグはFlashPlayer9向けにビルドされていますので、Matrix3D、Point3DやdrawTrianglesといったクラスやメソッドは今回FP9用に自作しています。）
各めんこにかかる力（回転量・移動量）を叩きつけられためんこの侵入スピード÷距離（E/d、図参照）というシンプルな方法で導き出し、さらにベクトルv（図参照）によって移動方向・X軸に回転する角度とY軸に回転する角度を導き出しています。
最終的に導きだした回転量を元にX軸・Y軸方向に回転する行列を作成、与えられた行列に応じて座標変換を行ってめんこの回転を描画しています。
流れを図式化すると下記のようになります。

計算式

自作した物理エンジンですが、サーバサイド（言語：java）に移植するために、
例えばglobalToLocalメソッド（グローバル座標からローカル座標に変換するメソッド）AS3独自のメソッドなどは使えませんでした。
使用した計算式を羅列していきます。主に座標計算系です。

2点間の距離を計る（ASでいうPoint.distanceメソッド）

private function getDistance(x1:Number, y1:Number, x2:Number, y2:Number):Number
{
var d:Number = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
return d;
}

4点間の交点を計る

private function getCrossPoint(p1:Point, p2:Point, p3:Point, p4:Point):Point
{
var s1:Number = ((p4.x-p2.x)*(p1.y-p2.y)-(p4.y-p2.y)*(p1.x-p2.x))*0.5;
var s2:Number = ((p4.x-p2.x)*(p2.y-p3.y)-(p4.y-p2.y)*(p2.x-p3.x))*0.5;

var cp1:Number = p1.x + (p3.x-p1.x)*(s1/(s1 + s2));
var cp2:Number = p1.y + (p3.y-p1.y)*(s1/(s1 + s2));

return new Point(cp1, cp2);
}

ローカル座標を計る（ASでいうglobalToLocalメソッド）

var radian:Number;
if (localStage.rotation > 0) radian = Math.PI/180 * localStage.rotation;
else if (localStage.rotation < 0) radian = Math.PI/180 * (360 + localStage.rotation);
else if (localStage.rotation == 0) radian = 0;
//ローカルx
var localX:Number = Math.cos(radian)*(p.x-localStage.x)+Math.sin(radian)*(p.y-localStage.y);
//ローカルy
var localY:Number = -Math.sin(radian)*(p.x-localStage.x)+Math.cos(radian)*(p.y-localStage.y);

回転後の座標を計る

private function getRotatePoint(xx:Number, yy:Number, cx:Number, cy:Number, rot:Number):Point
{
var cos:Number = Math.cos(rot*Math.PI/180);
var sin:Number = Math.sin(rot*Math.PI/180);
var _x:Number = cx+cos*(xx-cx)-sin*(yy-cy);
var _y:Number = cy+sin*(xx-cx)+cos*(yy-cy);

return new Point(_x, _y);
}

スマートフォンの普及も手伝ってゲーム開発のシーンは今後も増え続けていくと思います。
あらゆる数式を理解する必要はありませんが、このようにメモしておくと便利かもしれません。


気になった方はめんこゲームで遊んでみてください！
タイムトラベルエリア内の「昭和の町」エリアで遊べます！

アメーバピグはこちら
http://pigg.ameba.jp

Flashデベロッパーによるチーム開発 / アメーバピグ

こんにちは。
アメーバ事業本部ピグディビジョンで、アメーバピグ基盤機能開発を担当している冨塚(@sixgraphica)です。

アメーバピグでは現在12名のFlashデベロッパーが在籍してます。アバターアニメーションの作成、エリアロジックやサーバーサイドのエンジニアと連携し、新機能開発・ゲーム開発を主な業務としています。作業環境はMac OSが10名Windows環境が2名、ソースコードのバージョン管理にはSVNを採用し、エディタはFlash Builderを使用しています。

今回は12名のFlashデベロッパー間でどのように作業を分担し、チーム開発を行っているかをご紹介いたします。

アメーバピグの構成について

アメーバピグ起動画面

上記がアメーバピグの起動画面です。これを機能別に分けるとメインモジュール・クォータービューモジュール・ウィンドウモジュールの大きく三つに分けることができます。


モジュール別解説図

【メインモジュール】ヘッダー・フッターなどメインUIを管理。またサーバー通信をこのモジュール集約。

ヘッダー


フッター

【クォータービューモジュール】アバター移動やアニメーション・チャットなど、ユーザーのアバター操作を管理。





クォータービューモジュール

【ウィンドウモジュール】上記以外の機能。主にウィンドウ単位で管理されており、ゲーム機能なども含む。



各種機能別ウィンドウモジュール

上記のようにいくつものモジュールが共存し、アメーバピグは動いています。
各モジュールはそれぞれ単体のswfファイルとなっており、各担当デベロッパーがプロジェクト単位で分担し、開発をしています。例えば5人のFlashデベロッパーが別々の開発を行っていた場合、下記のような作業範囲となります。



作業範囲解説図（一つのモジュールを一人のFlashデベロッパーが担当）

では実際にどのようにチーム開発を実現させているか、技術側を解説していきます。
アメーバーピグの開発では二つのテストステップがあります。

モックテスト

（モジュール単体テスト。本来、サーバー通信を行う箇所を、仮データで動作させて、デベロッパー単位で開発）



モックテスト画面

結合テスト

（モックテストと同じソースでサーバー通信を行い、本番環境で確認）

結合テスト画面

まったく同じソースコードを用いながら、モックテストと結合テストを切り分けを可能にするために、アメーバピグではデザインパターンの一種、DIパターンを採用しています。

DIパターンとは

DIパターン説明図

Dependency Injection = 依存性の注入。JavaのDIコンテナの考え方を継承したデザインパターンの一つ。
"クラス間の依存関係をソースコードから取り除くことで，プログラムの実行時までクラス同士が依存関係を持たないようにするデザインパターンです。例えば，あるクラスAの中で別のクラスBのインスタンスを生成して利用しているとき，AはBに強く依存してしまっています。つまり，Bを別のクラスに差し替えたときなどにはAも変更しなければなりません。このような依存関係は，AとBを別の人が作っている場合などに特に困ります。こうした依存性をクラスから取り除くのがDIパターンです。 via ITpro"

アメーバピグではクラス間だけでなく、DIパターンの考え方に基づき、自前実装でモジュール間で動作させております。これによってモックテストと結合テストの切り分けを実現し、チーム開発を可能としています。

まとめ

アメーバピグではFlashとサーバー間の通信が行われるので、モックテストと結合テストを切り分けることによって、Flashデベロッパーとエンジニアが並行して開発を進められることが制作の柔軟さを高めている。
また少人数で動作テスト、確認、情報共有しながら開発が行えるので、プロジェクト進行に一定のスピードを保ちながら、制作していけることがチーム開発の最大メリットだと感じます。

アメーバピグはこちら
http://pigg.ameba.jp/

PiggFighter出展レポート＠dotFes2011京都

みなさん、こんにちは。
アメーバ事業本部ピグディビジョンでデザイナーをしている西原です。

2011年10月16日に行われた、dotFes2011京都についてのレポートをお届けします。
以前の記事でもご紹介させて頂いた通り、dotFes2011京都にてPiggFighterを出展してきました。PiggFighterは、KinectとFlashを使用し、アメーバピグと連動させた体験型対戦格闘ゲームです。（Ameba・アメーバピグの正式なサービスではなく、実験的なプロジェクトです）

PiggFighterのFacebookページはこちら

dotFesとは

dotFesは、インタラクティブな時代のものづくりの魅力を、時代を牽引するクリエイターたちの考え方や制作テクニック、作品や表現に触れることで、 たっぷりと学び、感じとってもらうためのイベントです。「クリエイティブステージ」と「テクニカルステージ」の2トラック（会場）によるプレゼンテーショ ンをはじめ、インタラクティブな作品展示やインスタレーション、最新技術のショーケースなどが、さまざまな会場で楽しめます。

今回は京都精華大学（黎明館）にて行われました。
PiggFighterはインスタレーションルーム02にて展示をしました。
こちらが受付です。Amebaウォーターも置いて頂きました。

展示風景

こちらが展示風景です。
大きなパネルが目印です。


テーブルにはiPadを置き、社内の写真が見れるスペースを作りました。

こちらにPiggFighterが掲載された「フィジカルコンピューティングを仕事にする」という本も展示しました。
PiggFighterの作り方を知りたい方は、こちらも是非チェックしてみてください！

フィジカルコンピューティングを「仕事」にする/小林茂

￥3,990

Amazon.co.jp

遊び方を指導しています。


展示は朝の11時から夕方の4時まで行われ、約40組のプレイヤーに遊んでいただきました。

追加機能

今回このdotFesに出展するにあたって、PiggFighterに3つの機能を追加しました。

①ランキング機能
一回の試合に対し「ファイトポイント」というポイントがつくようになり、それがランキングとして表示されます。


②Twitterつぶやき機能
最後に撮られたスナップショットとファイトポイントが自動的に「#PiggFighter」につぶやかれる機能です。
「PiggFighter」のTwitterはこちら

③人物認識の改善
KinectのプログラムをOpenNI/NITEからKinect for Windows SDKに変更したことで、
キャリブレーションポーズ └(＾o＾)┘ をしなくても遊べるようになりました。

サイバーエージェント・ラボ部について

サイバーエージェント・ラボ部（仮）では、通常業務以外でラボ的な活動として新しいデバイスやユーザーインターフェースを使った実験的な作品をいろいろとつくったりしています。
今後もイベント等で発表し、活動を広げていきたいと考えています。

クレジット

PiggFighterプロジェクトのクレジットです。
Programmer : @uranodai
Direction+Flash : @bao_bao
Flash : @tessonn
Flash : @sixgraphica
Designer : @eriiiiiiiiiiii
Fighter : @mooky1213
Sound : Takahiro Kurashina
Voice : Yuriya MorisakiSpecial
Thanks : Emi Baba, Tasuku Uno

【関連記事】
PiggFighter / Kinect Hack with Flash
PiggFighterがdotFes 2011 京都に出展します！

スマートフォン向け無料セミナーを開講します

こんにちは
サイバーエージェント技術推進本部にてクリエイターの採用や育成を担当している渡辺です。

今回の1pixelは、これからスマートフォン業界で活躍したいと思っている方向けの無料スキルアップセミナー『クリエイティブアカデミー』のお知らせをしたいと思います。

『クリエイティブアカデミー』とは、Web業界で働くクリエイターのスキルアップを支援し、未来のインターネットサービスを創るクリエイターを育成するプログラムなんですが、希望される方には弊社採用にもつなげていくという採用連動の育成プログラムになっています。

今回の『クリエイティブアカデミー』は、今後必須で必要となるスマートフォン開発の講座を2コース同時開講することにしました。

つ目は『HTML5/CSS3/JavaScript開発講座』。

スマートフォンでは既に標準採用されている技術のため、スマートフォン開発にチャレンジしたい方には必須の技術です。
Flashに代わってダイナミックな表現が可能だったり、AndroidもiOSも共通して使えることから、今やっておくと非常に強いスキルアップにつながります。

つ目は『iPhoneアプリ開発講座(cocos2d)』。

いままでFlashを利用して開発していたデベロッパーが取り組みやすいと評判のcocos2dを使ってiPhoneアプリの開発を行うコースです。
Flashのスキルがある方対象のコースとなりますが、スキルチェンジしたいと考えている方にはピッタリのコースだと思います。

両コースとも休日開講なので、仕事を続けながらの通学も可能です。
興味のある方は下記リンクから詳細ページを確認の上、参加申込を行ってください。

ご応募お待ちしております！

「第21回 HTML5とか勉強会」イベントレポート

こんにちは

サイバーエージェント技術推進本部

スマートフォン技術部門の統括をしている矢内(@yanakun)です。

弊社は現在スマートフォン開発の技術に注力しています。

そんな中で、html5-developers-jpの管理人の白石さんと出会い、

白石さんが運用しているHTML5の勉強会の第21回を,弊社渋谷マークシティーで行うことになりました。

そして去る9/27日に行われた第21回のテーマは

「HTML5+ゲーム」

ということでラインナップは

「Smartphone向け HTML5 ゲームの作り方」　DeNA 城戸さん

「スマートフォン版アメーバピグのつくりかた」　弊社サイバーエージェント原

「HTML5 Game with Web UI」　GREE 米川さん

「JSクイズゲームの作り方（HTML5実力テストの紹介）」 面白法人カヤック 吾郷さん

「enchant.js HTML5 + Javascript Based Game Engine」 ユビキタスエンターテインメント 伏見さん

前半３つのメインセッション、後半2つのショートセッションにて構成されています

今回はUST中継もされ、HTML5DevelopersJPさんがyoutubeにも上げてくれているので、

その動画を掲載します。深い内容は是非動画をチェックしてみてください。

「Smartphone向け HTML5 ゲームの作り方」　DeNA 城戸さん

DeNAさんは「HTML5+CSS3」「Canvas」「ExGame」の３つの手法でスマフォゲームを制作していて、

今回は「HTML5+CSS3」中心のお話でした。

ActionScript3風にかけるarctic.jsが近日公開とのことでこちらもまた勉強会などでお話聞けたらなと思います。

「スマートフォン版アメーバピグのつくりかた」　弊社サイバーエージェント原

以前このブログで紹介したこの内容をブラッシュアップしたものになります。

あの手この手での軽量化、高速化へのアプローチを紹介しています。

「確かに面倒ではあるが，プロである以上はやれることはやるべき」

という投げかけは、聞いていた人みんなに改めて響いたんじゃないでしょうか？

「HTML5 Game with Web UI」　GREE 米川さん

Native＋WebViewのハイブリッドと呼ばれる手法の紹介。

利点としては

・マルチプラットフォーム対応が容易
・A/Bテストが簡単にできる
・運用でイベントになど打ちやすいなどなど

これから増えてくる手法の1つであることは間違いないと思います。

「JSクイズゲームの作り方（HTML5実力テストの紹介）」 面白法人カヤック 吾郷さん

これみなさんやりましたかね？

話題のJSクイズサイトのお話です。

実はもともと4/1にエイプリルフールネタ用でつくったらしいです。

裏HTML5実力テストもあるらしく、自信のある猛者は挑戦してみては？

資料が公開されていてその中に導線があります　講演資料

「enchant.js HTML5 + Javascript Based Game Engine」 ユビキタスエンターテインメント 伏見さん

「早くて，軽くて，気持ちよく」をコンセプトにしているゲームエンジンenchant.jsの紹介。

ライブコーディングは会場も大変盛り上がりました。

見ていて作りたくなってきました。

10月にはenchantPROを公開予定で，Nativeにもアクセスできるようです。 講演資料

セッションのあとはピザとビールで簡単な懇親会をしました。

懇親会の時間が短くなってしまったのは申し訳なかったですが

いろいろな人と話せる懇親会までセットの勉強会っていいですよね。


全体的に内容も濃く、大盛況にて終了しました。

現場制作者としては良いサービスを作るために、

どこも同じように苦労して同じようなところで悩んだりして制作しているんだなあと実感しました。

白石さんはじめhtml5-developers-jpのみなさまありがとうございました。

弊社は社内の勉強会も活発に行っていますが、

社外の人と技術交流するような場もどんどん増やしていきたいと思っております。

今回のように場所の提供等もやっていますので@yanakunへDM、もしくはメールで気軽にお声がけ下さい。