1 pixel｜サイバーエージェント公式クリエイターズブログ

サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。

Entries Next >>

アメーバピグのアクションができるまで


Theme:
みなさま、初めまして。
アメーバ事業本部ピグディビジョン所属、Flashディベロッパーの矢澤(@Akichi )です。

ピグの広告や、アライアンスの担当をしています。
広告やアライアンスの案件でピグのアクションを制作することが多いです。
（もちろんコードを書くこともあります！）

今回は、ピグのアクションがどのようにできているのかを、
少しでもお伝えできればと思います。

ピグのアクションってどんなの？

ピグのアクションは大きく2つに分けられます。

・通常アクション
使用回数の制限がなく、使ってもなくならないアクション
（基本的にピグの動きだけで表現できるもの）

・消費アクション
ポケットウィンドウから利用でき、使用回数の制限があるアクション
（広告商品アイテムなどに使われます。）

1 pixel｜サイバーエージェント公式クリエイターズブログ-ウィンドウ

今回は通常アクションに関して説明します。


ピグの身体の仕組み

まずはベースとなるピグがあります。
身体のパーツはざっくりですと「頭、体、上腕、前腕、手、足」の5つが基本です。
細かく分けたものを図で用意しましたのでこちらをご覧ください。

表面
1 pixel｜サイバーエージェント公式クリエイターズブログ-ピグパーツ表

背面
1 pixel｜サイバーエージェント公式クリエイターズブログ-ピグパーツ裏
ピグの身体は膝がなかったり、つま先が曲がらないようになってます。


制作時に気をつけること

下記の３つのことを考えながら制作します。

1「ピグで可能な動きか」
2「動きとして自然であるか」
3「ピグの世界感にあっているか」

1ピグの動きはFlashで制作していますので、Flash上での深度が重要となってきます。
レイヤーの順序は下図のようになっています。

表面レイヤー
1 pixel｜サイバーエージェント公式クリエイターズブログ-タイムライン表

背面レイヤー
1 pixel｜サイバーエージェント公式クリエイターズブログ-タイムライン背面

ピグが表面の時は、右手は体よりも前には出せない仕様になっていますので、
作ってから表現不可能にならないよう気をつけています。

背面の時は、右手は髪と顔の間の深度になりますので、
基本的には右手を大きく振るなどはできません。

ただ、右手をあたまの後ろにもってくる場合、表面は特に問題なく作成できてしまうので、
事前に背面でも制作可能であるかの判断をしなくてはなりません。


2ピグだけではなくアニメーションを作る上で意識している部分ですが、身体の動きが自然に動いているか、ピグの身体はパーツごとに動いているので、途中で崩れていないかどうかも重要です。

3現実にある動きを作る際に気をつけているのですが、現実では動きが速かったりするものも、ピグ上ではある程度デフォルメしたり、大げさに表現することで、「ピグがこの動きをしたらかわいい、かっこいい」といった感じに突き詰めていきます。


アクション制作

今回は、すでにリリースされている通常アクションの中から、
プロレス技の「飯伏乱舞」を参考に説明させて頂きます。

参考動画（8:24～）

http://www.youtube.com/watch?v=8_1egHilZ-Q#t=504s


まず、参考動画を見て、動きの中で重要となるポイントをいくつか決めます。
ポイントごとにキーフレームを作っていきます。

今回はこんな感じでしょうか。

「ファイティングポーズ」→「右手で殴る」→「左手で殴る」→「右足で蹴る」→「回し蹴り」→「ファイティングポーズ」

キーフレーム
1 pixel｜サイバーエージェント公式クリエイターズブログ-キーフレーム


キーフレームごとのピグの動き
1 pixel｜サイバーエージェント公式クリエイターズブログ-ピグ表アクションコマ

人それぞれ作り方は違うと思いますが、私は大枠を作ってしまい、動きの流れをつかんでから細かい部分を補完していくタイプなので、先に重要となる大枠を作ります。
大枠ができたら、キーフレームの間を補完&調整していきます。

調整が完了したらピグに表情をつけていきます。
ピグには最初から用意された表情などがあり、インスタンスを追加するだけで表情を変えることができます。

フラグ一覧
1 pixel｜サイバーエージェント公式クリエイターズブログ-表情フラグ

目：上げ閉じ・・・・・目を上中心に閉じる
目：下げ閉じ・・・・・目を下中心に閉じる
まゆげ：怒・・・・・まゆげをつり上げる
まゆげ：哀・・・・・まゆげを八の字にする
くち：スマイル・・・・・口を笑顔にする
くち：へ・・・・・口をへの字にする
くち：あける・・・・・口をあける
座るモード・・・・・ピグを座らせる
まばたき用・・・・・目がまばたきする
右に90度回転・・・・・ピグを90度右回転させる
左に90度回転・・・・・ピグを90度左回転させる
180度回転・・・・・ピグを180度右回転させる

今回はプロレス技ということで、気合いが入っている感じを出したいので、
「まゆげ：怒」「くち：へ」「くち：あける」を使い、
回し蹴りに勢いをつけるので「右に90度回転」を使います。

調整&表情をを追加したものがこちら。
1 pixel｜サイバーエージェント公式クリエイターズブログ-調整&フラグ

こちらを実際に動かすとこんな感じになります。
1 pixel｜サイバーエージェント公式クリエイターズブログ-飯伏表

ここで、一旦テスト環境で実際のピグの動きを確認します。
実際のピグ上での確認は、ピグに服を着せて動きの確認をします。
そのあとにピグのディベロッパーにチェックを受けて、問題なければ背面の制作に入ります。

アクション制作（背面）

背面も表面と同じように大枠を制作し、表情などを追加していきます。
背面の場合、表情は見えないのでインスタンスの追加はしませんが、今回は90度回転を使っているので追加します。

できあがった背面
1 pixel｜サイバーエージェント公式クリエイターズブログ-飯伏裏

背面もディベロッパーに確認してもらい、問題がなければ本番リリースとなります。

まとめ

ここまで読んでいただきありがとうございます。
ピグの世界には通常アクション、消費アクションが数多くあり、ユニークなものもたくさんあるので、ぜひユーザーとの交流に使っていただければと思います。


アメーバピグはこちら
http://pigg.ameba.jp/
最近の画像つき記事 [ 画像一覧へ ]
なうで紹介 mixiチェック ツイート
Peta |  Pocket

アメーバピグ海外対応！「Pico World」と「小人国」


Theme:
こんにちは、Social Apps Divでデザインを担当している松田 (@_reiko_matsuda) です。
今回は、海外向けサービス「Pico World」や「小人国」の制作秘話をしたいと思います。
最後の方では、CyberAgent America（サンフランシスコ）オフィス風景等もご紹介します。

Pico Worldと小人国について

1 pixel｜サイバーエージェント公式クリエイターズブログ

■「Pico World」は、Facebook / Mochimedia / ameba.netの
プラットフォームで展開するオンラインコミュニケーションサービスで、
海外ユーザー数は現在４００万人を超える規模となっています。

「Pico World」は、こちらからどうぞ！
http://apps.facebook.com/amebapico/
http://pico.ameba.net/

■「小人国」は、中国最大級のSNSのKaixin001とweiboにてサービスを開始して、
現在それぞれ１９万人超のユーザーがいます。

「小人国」は、こちらから！
http://game.weibo.com/xiaorenguo


国ごとに工夫したデザイン

イラストとUIを担当しながら、下記の点を強く意識して制作を進めました。
「アメリカやインドネシア、フィリピン等の多くの国のユーザーが利用しているので、
国や文化を超えて好まれるデザインをする」

■UIについて
UIにおいては、各国共通で同じものを使用していこうと考えていましたが、
それぞれの国によって考え方や感覚等が違ってくるので、
それをふまえた上で、その国に合わせたデザインをしていく事にしました。

国が変われば言葉も文化も違い、流行も違う。
大げさかもしれませんが、その国の情勢などの背景も知り、
より深く理解し求めながらデザインをしていく事が大事だと感じました。

一例として、中国のweiboのユーザープロフィールを見ると、
ほとんどの人がバッチリ決めた自分の写真を使用！この点はわりと日本とは違うところ。
写真で自分を上手にアピールする人が多い事に注目し、
新しいコミュニケーションの可能性も含め、
プロフィールのUIにプロフィール写真を大きく取り入れる事にしました。

小人国の世界観を崩してしまわないか、細心の注意を払いながらの試みでしたが、
結果、このプロフィールUIがきっかけでユーザー同士がより仲良くなったり
ユーザー自ら新しい楽しみ方など発展できる可能性を作り出せた思います。

1 pixel｜サイバーエージェント公式クリエイターズブログ-Pico Worldと小人国(プロフィールUI）

■イラストについて
アバター自体はほぼピグと同じですが、アイテムは海外ユーザー向けに制作しています。

一例として、「和」をテーマにアイテムを制作する時、
「海外の人がイメージする日本」を念頭にアレンジを加えて制作しました。
日本の「落ち着いたわび・さびのイメージ」か「極彩色の豪華絢爛なイメージ」か など、
プロデューサーや他のデザイナー陣とミーティングを重ねながら制作します。
資料集めは日本の資料はもちろん、海外の資料も集め、海外のユーザー目線を追求します。

下記は江戸の豪華絢爛な色彩のアイテム。

1 pixel｜サイバーエージェント公式クリエイターズブログ-Pico Worldと小人国(アイテム）

Pico Worldと小人国は、多数の国のユーザーがいて考え方も様々。
その国ごとにローカライズが必要だと思えば対応していきます。
ただ、「楽しい」「良い」と感じるのは万国共通だと思うので、どの国の人も楽しめるデザインを目指していきたいと思います。

CyberAgent America（サンフランシスコ）オフィス風景

ここで少しサンフランシスコオフィスをご紹介しますね。
1 pixel｜サイバーエージェント公式クリエイターズブログ
現在、約20名以上の社員が働いています。

1 pixel｜サイバーエージェント公式クリエイターズブログ
メンバーによっては、サンフランシスコオフィスとのやり取りがあり、
日本オフィスとサンフランシスコオフィスを行き来する社員もいます。

1 pixel｜サイバーエージェント公式クリエイターズブログ
ネイティブ社員もかなり増えてきました。
ハロウィンなどのイベントは、本場なのでかなり盛り上がるとのこと！
（日本オフィスも負けてはいませんが！）

国を超えて同じ志を持ち、団結して取り組み切磋琢磨できる環境は貴重だなと思いました。


今後は、更に多言語化対応中！

世界中の人々をつなぎ合わせ、日本発の最も楽しめるコミュニティーサービスを目指して
さらに展開していきたいと思います！

最後まで、読んで頂きありがとうございました！

「Pico World」は、こちらからどうぞ↓
http://apps.facebook.com/amebapico/
http://pico.ameba.net/

「小人国」は、こちらから↓
http://game.weibo.com/xiaorenguo
なうで紹介 mixiチェック ツイート
Peta |  Pocket

JavaScriptで始める関数型プログラミング 1 - 3


Theme:
みなさまこんばんは。
前回に引き続き、平松 @co_sche (co-sche)です。

この連載では、先日社内で行われた「HTML5, CSS3を舐め回す会 Vol.2 - JavaScript Day -」で私がお話した「JavaScriptで始める関数型プログラミング」の内容を元に、記事にまとめたいと思います。

想定している読者は、
  • JavaScriptの基本的な構文を理解している方
  • JavaScriptで関数を定義・使用したことのある方
  • LLと総称される言語を扱っているが、関数型プログラミングを意識したことのない方
です。

はじめに

前回は、関数型プログラミング(以下、たまにFP)を学ぶ上で欠かせない、関数の特徴について学びました。
今回は、実務にありがちな例を挙げてFP的なアプローチ方法を見て、FPのメリットを実感してみましょう。

今回のサンプルコードの出力には、console.logを使うことにしますが、環境に応じてprintなりdocument.writeなりに読み替えてください。

ありがちな例

XMLが文書とはとても呼べないデータを扱う用途に使われだしたり、JSONが発明され、言語を超えて普及したりと移り変わりはあるけれど、最近はMVCの概念の普及に伴い猫も杓子もWeb APIになっていますね。
そんな時代ですので、
  • サーバーに商品のリストを問い合わせ、JSONで受け取る
  • わりと忙しいサーバーなので、ちょっとしたフィルタリングやソート、集計はクライアントでやって欲しい
という要件はかなり頻出するケースなわけです。
DBから取ってきたデータをキャッシュし、後で再フィルタリングというケースも多々ありますので、サーバーサイドのプログラマも無関係ではありません。さて、
[
　　{
　　　　"code": "pink_shirt",
　　　　"name": "ピンク色のシャツ",
　　　　"description": "「ハネムーン」の文字と共に、ハートをあしらいました。",
　　　　"price": 2000,
　　　　"category": "tops"
　　},
　　{
　　　　"code": "green_keyholder",
　　　　"name": "エメラルドグリーンのキーホルダー",
　　　　"description": "ひらがなの「ぶ」をかたどり、上品な色に仕上げました。",
　　　　"price": 1500,
　　　　"category": "accessory"
　　},
　　.....
]
こんなデータを受け取って、itemsと名前を付けたとしましょう。
これに対してありがちな要件として、以下のような物があります。

アクセサリーの個数を表示したい

var accessoriesCount = 0;
var itemsCount = items.length;
for (var i = 0; i < itemsCount; i++) {
　　var item = items[i];
　　if (item.category == 'accessory') {
　　　　accessoriesCount++;
　　}
}
console.log(accessoriesCount);

キーホルダーの名前を一覧表示したい

var itemsCount = items.length;
for (var i = 0; i < itemsCount; i++) {
　　var item = items[i];
　　if (item.code.indexOf('keyholder') != -1) {
　　　　console.log(item.name + "\n");
　　}
}

関数にまとめたい

上記のようなバリエーションがポコポコと増えていくわけですが、それぞれの処理について
function (items, categoryName) {
　　var c = 0;
　　var imax = items.length;
　　for (var i = 0; i < imax; i++) {
　　　　var item = items[i];
　　　　if (item.category == categoryName) {
　　　　　　c++;
　　　　}
　　}
　　console.log( c );
}
という風にまとめて、関数の名前どうしようとか、console.logは副作用だからcを返すだけにしようとかという汎用化・抽象化の進め方もあるにはあります。
が、今回はもうちょっと「関数脳」寄りな考え方を使ってみましょう。

共通部分はどこ？

  • 集合の特定条件に合う要素に対して何かしている
FP的な考え方では、さらにこれを
  • 集合から特定条件に合う要素のみを抽出した新しい集合を作る (フィルタリング)
  • 要素全てに対して何かを行う
と分割します。

違う部分はどこ？

  • 抽出条件
  • 合致時に行う作業
  • 元の集合も、時によって違うかもしれない

共通部分・違う部分を踏まえて

FP的に書くとそれぞれの処理はこうなります。
// アクセサリーの個数を表示
print(reduce(filter(items, isAccessory), countup, 0));
// キーホルダーの名前一覧を表示
print(reduce(filter(items, isKeyholder), joinNameByNL, ''));
一見ぽかーんとしがちですが、
  • itemsをisAccessoryかどうかでfilterして、0を初期値としてcountupでreduceしたものをprint
  • itemsをisKeyholderかどうかでfilterして、''を初期値としてjoinNameByNLでreduceしたものをprint
というルー語テイストにトランスレイトすれば雰囲気はつかめるのでは無いでしょうか。

下準備は必要です

isAccessory、isKeyholder、countup、joinNameByNLは以下のような関数です。
function isAccessory(item) {
　　return item.category == 'accessory';
}

function isKeyholder(item) {
　　return item.code.indexOf('keyholder') != -1;
}

function countup(a, b) { return a + 1; }
function joinNameByNL(a, b) { return a + "\n" + b.name; }

ちょっと待て

filterって何だ

  • 集合と述語関数を引数に取り
  • 集合の要素それぞれに対して述語関数を適用し
  • 条件に合致した(trueが返った)要素の集合を返す
関数です。集合はこのケースの場合itemsです。
述語関数とは、真偽値を返す関数(isAccessoryやisKeyholder)です。

reduceって何だ

  • 集合と結合関数と初期値を引数に取り
  • 再帰的に集合が空になるまで左から結合する
関数です。
断りもなく「再帰的に」という言葉を出したので、勉強会の際にはこの部分で混乱を招きました。
かと言ってここで説明はしませんが、reduceがどう計算されるかのイメージを以下に記載します。
reduce([a, b, c, d], f, i)
=> reduce([b, c, d], f, f(i, a))
=> reduce([c, d], f, f(f(i, a), b))
=> reduce([d], f, f(f(f(i, a), b), c))
=> reduce([], f, f(f(f(f(i, a), b), c), d))
=> f(f(f(f(i, a), b), c), d)
もっと具体的に、
var add = function(a, b) { return a + b; };
reduce([1, 2, 3, 4], add, 10);
=> reduce([2, 3, 4], add, add(10, 1));
=> reduce([3, 4], add, add(11, 2)); // 11はadd(10, 1)の評価結果
=> reduce([4], add, add(13, 3));
=> reduce([], add, add(16, 4));
=> 20
という具合です。
この原理で、上記で定義した countupやjoinNameByNLが効いていく様を確認してください。

これらの関数(filterやreduce)は自分でも作れますが、非常に汎用性の高い抽象なので、いろんな言語で既に用意されています。

reduceについては、言語によってfoldやinjectと様々な名前で定義されています。
また、結合関数によっては右から結合した時と左から結合した時で結果が異なる(割り算を考えてみてください)ため、foldLeftやfoldRightなどでそれぞれ定義されていることがあります。
先のreduceの説明で、わざわざ「左から結合」と言ったのは、このためです。

さらに定義済みの関数をいくつか

挙げておきましょう。
集合の全てに関数を適用した結果の集合を返す map、集合の要素数を返す countやsizeやlength、文字列の集合を特定の文字で結合する joinやimplodeも多くの言語で定義済みです。
ここに挙げた3種は全てreduceを使って定義できます。実際、上記のreduceとjoinNameByNLの組み合わせは、joinを具体化したものとも見なせますね。
filterやreduceも含めて、これら関数の実装については今後の連載で紹介できればと思います。

話は戻って

先ほどの
// アクセサリーの個数を表示
console.log(reduce(filter(items, isAccessory), countup, 0));
// キーホルダーの名前一覧を表示
console.log(reduce(filter(items, isKeyholder), joinByNL, ''));
をJSらしく書くと、それぞれ
console.log(items.filter(isAccessory).length);
console.log(items.filter(isKeyholder).map(getName).join('\n'));
こうなります。

filterやmapなどの関数が配列のメソッドになってぶら下がっているので出現順は変わっていますが、やっていることは変わりません。
また、console.logの中身を評価していく段階では副作用が無いことにも注目して下さい。
filterもmapもjoinも、元の配列や外の環境に何の影響も与えません。

ちなみに、定義済みの関数以外をリテラルで書くなら、
console.log(item.filter(function(item) {
　　return item.code.indexOf('keyholder') != 1;
}).map(function(item) {
　　return item.name;
}).join('\n'));
という風になります。
引数として渡す関数が汎用的でなく、且つ短く書けるのであれば、いちいち名前を付けずにこのように書くことも可能です。

何をしてきたか

さて、元のfor文とif文の組み合わせと比べると、随分すっきりしたコードになりましたが、何をしたのかをおさらいしましょう。
  • 着眼点を集合とその要素に分けた
  • 共通部分(抽象)を関数にまとめた (reduce, map, filterなど)
  • 違うデータや処理を引数として受け取れるようにした (items, isAccessoryなど)
  • 結果、モジュール(部品)化ができた

今回のまとめ

はい、実務でありがちなデータや処理について、FP的なアプローチで改善をはかる様子を見てきました。
また、様々な関数型言語で用意されている汎用的な抽象も幾つか学びました。

今回は、第一回でお約束したメリットの振り返りをしてまとめとしたいと思います。

1. コードの見通しがいいよ！

今回のケースでは、元のコードのほとんどが本質以外のことで埋め尽くされていました。
配列のインデックスをインクリメントして…というのは実はやりたいことと無関係ですよね。

それに対して、FP的な考え方で記述したコードの本体では、
items.filter(isKeyholder).map(getName).join('\n');
と、やっていることの本質が短く表れ、重複が少なくなっています。
本質以外とみなされていた処理は集合の操作へと抽象化され、filterやreduceなどの関数にまとめられています。

2.テストしやすいよ！

モジュール(部品)化したことによって、それ毎にテストが出来ます。

元のコードで、あるキーホルダーと思われるアイテムが列挙対象に入っているかどうかをテストするには、
var itemsCount = items.length;
for (var i = 0; i < itemsCount; i++) {
　　var item = items[i];
　　if (item.code.indexOf('keyholder') != -1) {
　　　　print(item.name + "\n");
//　　　if (item.code == itemMaybeKeyholder.code) {
//　　　　　debug('0K');
//　　　}
　　}
}
などのようにコメント行部分を挿入するのがお手軽です。
が、テストのためにロジック内部に手を入れるのは、なんとも気が引けます。

対して、モジュール化したコードでは
debug(isKeyholder(itemMaybeKeyholder) === true);
と、単体でテストが可能です。

3.バグを作りにくよ！

上記2つのメリット(コードが見やすくテストしやすい)から、自明です。
また、静的型システムと融合すると、さらにこのメリットは強くなります。(JSでは期待できませんが)

4.思考の道筋が増えるよ！

今回のように意識してプログラミングをしていると、次第に抽象や部品が先に見えてくるようになります。
そこから関数型で書いても良いし、ベタ書きに落としても良いです。
例えば、配列を見ていきなりfor文で回して…ではなく、集合に対して何かをするんだという見方が出来るだけで、かなりやりたいことの見通しは良くなるはずです。

また、抽象化・部品化が上手にできることによって、設計や実装のより効果的な分散が可能になるのはオブジェクト指向と通ずる利点です。

5.楽しいよ！

…あれ？楽しくなかったですか！？

純粋関数のシンプルな特徴から、様々な抽象・具象が生み出される様は見ていてワクワクしませんか？
魔法のようなreduceの実装がどうなっているのか、覗いてみたくなりませんか？

次回以降の勉強会では…


今回の勉強会では、FPそのものについてとそのとっかかり部分について話をしました。
関数型プログラミングを使いこなすには、汎用性の高い抽象を見つけるセンスと、それをプログラムに落とすテクニックを磨く必要があります。
…なので、次回以降は以下のようなことを話せたらよいなぁと思っています。

ラムダ計算・クロージャ

すべての基礎
α変換、β簡約 etc…

カリー化

高階関数との組み合わせでさらに便利に

再帰

繰り返しの基礎となる
Yコンビネータ、末尾再帰 etc…

関数合成

関数と関数を関数で糊付け

遅延評価

無限の概念をプログラミングに持ち込んだり、パフォーマンスを上げたり

メモ化

パフォーマンスチューニングに使う
参照透明性との関係 etc...

勉強会でお話しした内容は、またこのブログでまとめたいと思いますので、今回の連載でFPに興味を持っていただけた方は[読者になる]や[RSS]機能でチェックしてみて下さい。
では、またお会いできる日までっ！

--

この連載では偉そうに講釈してますが、実は私も勉強中だったりします。
自分が分かりにくかった点を噛み砕いて可能な限り正確に説明しているつもりですが、万一間違いやトンデモ理論が飛び出した時はAmeba Pocket等ブックマークコメントでビシバシツッコミをいただければ幸いです。


JavaScriptで始める関数型プログラミング 関連記事
JavaScriptで始める関数型プログラミング 1 - 1
JavaScriptで始める関数型プログラミング 1 - 2
なうで紹介 mixiチェック ツイート
Peta |  Pocket

JavaScriptで始める関数型プログラミング 1 - 2


Theme:
みなさまこんばんは。
前回に引き続き、平松 @co_sche (co-sche)です。

この連載では、先日社内で行われた「HTML5, CSS3を舐め回す会 Vol.2 - JavaScript Day -」で私がお話した「JavaScriptで始める関数型プログラミング」の内容を元に、記事にまとめたいと思います。

想定している読者は、
  • JavaScriptの基本的な構文を理解している方
  • JavaScriptで関数を定義・使用したことのある方
  • LLと総称される言語を扱っているが、関数型プログラミングを意識したことのない方
です。

はじめに

前回は、関数型プログラミング(以下、たまにFP)の定義から関数とはなんぞやというところまで掘り下げて学びました。
今回は、もう一つの下ごしらえとしてFPにおける関数の特徴を学びましょう。

いっちょまえな関数を知る

FPを学ぶ上で重要な「関数」の特徴、扱いをここで抑えておきましょう。
FPにおける関数について、「第一級関数」「関数が第一級オブジェクト」と表現されることがあります。
これは、関数を数値や文字列等の値と同等に扱えるということを示しています。
どういうことか、他の値と比較しながら見ていきます。

リテラル表現 (値そのものを表す)

数値そのものを「1」や「2」や「0xffcccc」、文字列を「"ロマンス"」と表現するのと同じように、関数そのもの(関数値)を示す記法があります。
前回も紹介しましたが、
function(a) { return a + a; }
です。関数そのものなので、名前もありません。

ところで、行頭にfunctionキーワードがあるとJSでは関数宣言文として解釈されます。
関数宣言文の場合は、お馴染みかと思いますが
function 関数名 (引数群…) { }
というようにfunctionキーワードと引数を括るカッコの間に関数名を書く必要があります。
関数リテラルのつもりで書くと、関数名が無く、いきなり"("に遭遇したよという構文エラーになってしまいます。
このため、宣言文では無く式であることを明示するために
(function(a) { return a + a; })
とカッコで括って書くことが多いです。
以降、関数リテラルのみを表記する際にはカッコで括りませんが、試して見るときには必要に応じてカッコを補ってください。

その場で適用(実行)するなら、
(function(a) { return a + a; })(3);
となります。

変数に代入

前回、「厳密なFPに代入はありません」と言ったばかりですが、上記リテラル表現の意味をより理解するためにはこれも紹介するべきでしょう。
文字列の場合、代入は
var label = "ハネムーン";
です。同様に、関数も
var double = function(a) { return a + a; };
と表記できます。上記リテラル表現と併せて見て、関数値を代入しているという意味をかみしめて下さい。
functionキーワードの位置が行頭ではないので、リテラルを( )で括らなくても式と評価されますが、括っても構いません。
関数の実行結果ではなく、関数そのものを代入していることに注意してください。
double(2); // 4
と適用(実行)して、結果を得ることができます。

ここで、λ計算について少し。
λ計算でも関数に名前を付けることはありますが、それは単純に紙面を節約するための名前だと考えて下さい。
いつでも元の関数に戻して書き起こせるぞ、というスタンスです。
以降のJSコードでも関数に名前を付ける際に代入を行いますが、このスタンスに則ります。

引数として受け取る・渡す

数値を引数として渡すのは、
double(5);
という字面になりますが、同様に関数値を引数として渡すことも可能です。
$(function() { console.log('loaded!'); }); // Document
jQueryを利用したことのある方にはお馴染みの表記かと思います。
そうでない方も、「$」という関数を、関数値を引数として渡して実行していることを確認して下さい。
引数に渡している関数値に名前をつけて、
var f = function() { console.log('loaded!'); };
$(f); // Document
としても意味は全く変わりません。

これらは、$関数が関数を(も)受け取ることが出来るように定義されているからこそ可能な表現です。
と言っても、関数を引数として受け取るのに特別な記法は要りません。例えば、
function(f, a) { return f(a) + f(a); }
このようになります。

そのまま実行するなら
(function(f, a) {
　　return f(a) + f(a);
})(function(n) {
　　return n * n;
}, 10); // 200
です。関数値の表現に改行・インデントが入りましたが、混乱せずに読み解いて下さい。

それぞれの関数に代入を使って名前をつけるなら、
var g = function(f, a) { return f(a) + f(a); };
var h = function(n) { return n * n; };
g(h, 7); // 98
となります。こちらの方が読み解き易かった方は、最下行のg,hを、それぞれ上2行の代入文の右辺で置換してみてください。「そのまま実行」の時とほぼ同じ形になります。

もっと例を挙げましょう。
g(function(s) {
　　return s.length;
}, "かみました"); // 10

g(function(a) {
　　return a.join('e');
}, 'dltr'.split('')); // "deleterdeleter"


戻り値として返す


数値を戻り値として返す関数は、今まで何度も出てきていますが
function(n) { return n * n; }
と表現されます。もっと直載的に
function() { return 2; }
という関数があってもいいでしょう。この関数は、引数として何も受け取らず、2という数値を返す関数です。

名前をつけるなら、
var createTwo = function() { return 2; };
となります。しつこいようですが、関数の実行結果ではなく、関数そのものを代入していることに注意して下さい。
値を取り出すには、
createTwo(); // 2
と、実行する必要があります。

では、関数を戻り値として返す関数を記述してみましょう。
function() {
　　return function() {
　　　　return 2;
　　};
}
です。
数値を返すときとあまり変わりはなく、returnキーワードの後ろに関数値が入ります。
名前をつけるなら、
var createCreateTwo = function() {
　　return function() {
　　　　return 2;
　　};
};
となります。見ての通り、createCreate2は「2を返す関数を返す関数」です。

実行してみましょう。
createCreateTwo(); // function() { return 2; }
中身の関数が返されます。

名前をつけて、さらに実行します。
var anotherCreateTwo = createCreateTwo();
anotherCreateTwo(); // 2
いっぺんに実行することもできます。
createCreateTwo()(); // 2

応用編として、「引数として受け取った数値を返す関数を返す関数」を定義・実行してみましょう。
var createCreateN = function(n) {
　　return function() {
　　　　return n;
　　};
};

var createFour = createCreateN(4);
createFour(); // 4
createCreateN(5); // function() { return 5; };
createCreateN(6)(); // 6
(function(n) { return function() { return n; }; })(7)(); // 7
ややこしく見えますが、評価される様子を1行1行読み解いてください。

高階関数

上記の「引数として関数を受け取る関数」や「戻り値として関数を返す関数」をまとめて、高階関数と呼びます。FPの説明で頻出する用語ですので、意味と一緒に覚えておいてください。

高階関数を定義・使用する際に注意したいのが、関数の型(引数・戻り値の型を合わせたもの)です。
例えば、
function(f, a) { return f(a) + f(a); };
のfには、「任意の型の値aを受け取って、+演算が使える型の値を返す関数」が期待されています。

逆に言うと、それだけの制限しかありません。JSでは関数の型を宣言出来ない上に、暗黙の型変換が強力に効くので、
(function(){}) + (function(){}); // "function () {}function () {}"
という無茶も出来てしまいます。
また、高階関数の場合は直接呼び出すわけではないので、「関数の型」が見えづらいということも挙げられます。

だからこそ、高階関数を定義する際は、関数を引数として取る・戻り値として戻すことだけでなく、その関数の型が何であるかが分かりやすいコードを書きましょう。ドキュメントに書くという手もあります。
また、使用する際はそれを的確に読み取るようにしましょう。

今回のまとめ

はい、関数型言語においては数値や文字列などと同等に関数も値なんですよーというお話でした。

関数型言語では…
  1. 関数そのものを示す表記(リテラル)がある。
  2. 関数を関数の引数として渡す・受け取ることができる。
  3. 関数を関数の戻り値として返すことができる。
  4. 2,3のような関数を高階関数と呼ぶ。
  5. 関数の型(引数の型・戻り値の型)は重要。
「関数の実行結果」と、「関数そのもの」の違いを認識しコードから見分ける必要があるということも今回の隠れ重要ポイントです。

最後に

かなりくどくどと例を挙げて書きましたが、最後の方の説明まで「そんなの当たり前じゃん」を維持して読み進めていただけたなら本望です。

次回は、実務にありがちな例を挙げて1週目にお約束したメリットを具体的に説明したいと思います。
お楽しみにっ！

--

この連載では偉そうに講釈してますが、実は私も勉強中だったりします。
自分が分かりにくかった点を噛み砕いて可能な限り正確に説明しているつもりですが、万一間違いやトンデモ理論が飛び出した時はAmeba Pocket等ブックマークコメントでビシバシツッコミをいただければ幸いです。


JavaScriptで始める関数型プログラミング 関連記事
JavaScriptで始める関数型プログラミング 1 - 1
JavaScriptで始める関数型プログラミング 1 - 3

なうで紹介 mixiチェック ツイート
Peta |  Pocket

JavaScriptで始める関数型プログラミング 1 - 1


Theme:
みなさま初めまして。
私、2011年4月に中途で入社、現在はアメーバ事業本部でピグ×スマホ×Webの開発を担当している平松 @co_sche (co-sche)と申します。
家では楽器を弾いて自力で疲れを癒すアラサー男子です。

この連載では、先日社内で行われた「HTML5, CSS3を舐め回す会 Vol.2 - JavaScript Day -」で私がお話した「JavaScriptで始める関数型プログラミング」の内容を元に、記事にまとめたいと思います。

想定している読者は、
  • JavaScriptの基本的な構文を理解している方
  • JavaScriptで関数を定義・使用したことのある方
  • LLと総称される言語を扱っているが、関数型プログラミングを意識したことのない方
です。

はじめに

早速ですが「関数型プログラミング」という字面が長く、タイピングが辛いので所々FP(Functional Programming)と略させて下さい。
同様にJavaScriptもJSと略記します。

さて、昨今「分散並行コンピューティングに向いている」という触れ込みや、「Java7がFP的手法を取り込むか」と思いきや見送りになった件などでFPに注目が集まっています。
が、実はこの手法は特に目新しいものではなく、既に様々な形で私たちの使用している言語に溶け込んでいます。
JSでイベントハンドリングをする際に頻出する、
document.addEventListener('DOMContentLoaded', function(event) {
　　console.log('うむ。');
}, false);
あるいは、jQueryを利用した
$(function(){
　　console.log('準備はよいな。');
});
というようなコードは、FPのエッセンスをJSが受け継いでいるからこそ可能な芸当なのです。

この連載ではJSに注目して、FPに触れてみましょう。
今回の記事の目的は主に「下ごしらえ」です。

関数型プログラミングのメリットをリストアップ！

プログラマというのは現金なもので、メリットが無いとなかなか学習意欲がわかないものです。

という訳で早速。
  1. コードの見通しが良いよ！
  2. テストしやすいよ！
  3. バグを作りにくいよ！
  4. 思考の道筋が増えるよ！
  5. 楽しいよ！
私個人としては、4と5が特に大きなメリットだと思っています。
今まで、使っていても意識していなかった関数の考え方とその応用を学ぶことになりますので、プログラミングを行う際の思考パターンは確実に増えます。
1,2,3は、連載中(3週目)に実例を挙げて説明させて頂くつもりです。

関数型プログラミングってなんだ

では本題に入りましょう。「FPとはなんぞや」です。Wikipediaによると、
"λ計算の概念をプログラミング言語として体現したものである。すべての計算は関数の評価によって行われる。"
だそうです。
最初の一語が意味不明ですね。でも、ここがポイントです。掘り下げて行きましょう。

λ計算ってなんだ

再びWikipediaによると、
"関数を文字ラムダ (λ) を使った式によって表記する。アロンゾ・チャーチとスティーヴン・コール・クリーネによって1930年代に考案された。"
随分昔に考案されたようですねぇ。
λ式の字面としては、
(λf. (λx. f (λy. x x y)) (λx. f (λy. x x y))) g
と、こんな感じです。

ざっくりと書くと、上記のように表記し、α変換・β簡約(・η変換)といった規則を使って計算を進めていく計算体系です。
数値・演算・集合・制御構造すら関数で表現しようという一風変わった計算体系ですが、チューリング完全であることが証明されています。
これらの記法・変換規則についても連載中に紹介する予定ですが、今はそれほど重要でないので読み流して下さい。

ただ、このλ計算が現在の関数型言語に息づいているということ、もっと言えば「JSの関数式でλ式をそのまま表現できる」ことだけは頭に留めておいて下さい。
ちなみに、上記のλ式をそのままJSの関数式で表現すると、
(function(f) {
　　return (function(x) {
　　　　return f(function(y) {
　　　　　　return x(x)(y);
　　　　});
　　})(function(x) {
　　　　return f(function(y) {
　　　　　　return x(x)(y);
　　　　});
　　});
})(g);
となります。

んじゃ、そもそも関数ってなんだ (ココ重要！)

ココ重要です。なので、JSコードを眺めながらその意味をかみしめましょう。

念のため、JavaScriptの関数式の記法をおさらいしておきます。
function(a) { return a + a; } // --- (1)
OKですか？引数aを受け取って、それを2倍した値を返す関数です。

FPの世界で言う関数は「数学的な関数(純粋な関数)」で、値(引数)を食って、計算して、新しい値(戻り値)を吐くものです。
上記(1)は、まさに数学的な関数です。
引数3にこの関数を適用する式は、
(function(a) { return a + a; })(3); // --- (2)
こうです。この式は全体で数値の「6」と評価されます。
是非、お手持ちの実行環境で試してみてください。

この時に重要なのが、「値を食って計算して吐く」以外は関数外の環境に何の影響も与えないということです。
関数外への影響とは、例えばグローバルな変数への再代入や画面への表示、ファイルポインタやネットワークソケットへの書き込みなどです。
上記(1)に副作用はありません。再代入も、画面への表示も明記されていないことを確認して下さい。
処理系によっては、(2)のように評価した際に、任意の出力に評価結果が表示される場合がありますが、それはあくまで処理系の「親切」ですので気にしなくて大丈夫です。

万一影響を与える場合、それを副作用と呼び区別します。厳密なFP(純粋関数型言語)では原則として、副作用は起こりえません。
副作用のあるコードも見ておきましょう。
var a = 0;
(function (b) {
　　a = a + b;
　　document.write(a);
　　return a;
})(4);
結果何が起こるか、どれが副作用か、上の説明から確認してください。

もう一点、数学的な関数は「引数が決まれば戻り値も決まり、何度評価してもこの組み合わせは変わらない」という性質を持ち、これと副作用が無い性質を合わせて参照透過性と呼びます。
例として、Math.sinは参照透過ですが、Math.randは参照透過ではありません。

一般に、副作用を目的とした(gotoのシンタックスシュガーとしての)「サブルーチン」と、上記のような「数学的な関数」をまとめて「関数」と呼ぶ言語が多いですが、これらをしっかり見分けるようにしましょう。

つまり関数型プログラミングとは

すべての計算は(純粋な)関数の評価によって行われる。
つまり、
  • 参照透過ってことは代入はない(必要ない)ぜ！
  • 副作用が無いってことは画面への出力も無いぜ！
  • でもチューリング完全なんだぜ(どやっ)！
ということになります。

うーむ…、それって実用に耐えうるの？

今回のまとめ

上記は関数型プログラミングの大原則ですし、実際にこれに則った(実用的な)言語もあるようですが、この連載ではそんな極端なことは言いません。
事実、多くの「関数型言語」とカテゴライズされる言語では、副作用も代入も可能なようになっています。
まして、DOMの変更やユーザーとの対話を主とするクライアントサイドJSにおいては、副作用なしに何かを成し遂げることは不可能です。

ただ注意深く観察すると、副作用なしに抽象化を行うチャンスは実はたくさん転がってるんです。

ということで、今回の大事なポイントは以下の4つ。
  1. 本来の関数の作用(値を食って計算して吐く)と、副作用(関数外に影響を与える)は意識して区別するようにしよう
  2. 副作用を最小回数・最小範囲に留めよう
  3. やりたいことを抽象化し、モジュール(部品)に分け、関数にまとめる癖をつけよう
  4. FPのエッセンスを自分のプログラミングスタイルに取り込もう
です。
連載中に具体例をお見せする予定ですが、これらのポイントを心がけてプログラミングすることによって、最初に挙げたFPのメリットが活きてきます。

最後に

JavaScriptで始めると銘打っておきながら、今回はJSコードがあまり出て来なかったですね…。
次回はJSコードを交えつつ、残りの下ごしらえ工程を終わらせようと思います。

是非、お楽しみにっ！

--

この連載では偉そうに講釈してますが、実は私も勉強中だったりします。
自分が分かりにくかった点を噛み砕いて可能な限り正確に説明しているつもりですが、万一間違いやトンデモ理論が飛び出した時はAmeba Pocket等ブックマークコメントでビシバシツッコミをいただければ幸いです。


JavaScriptで始める関数型プログラミング 関連記事
JavaScriptで始める関数型プログラミング 1 - 2
JavaScriptで始める関数型プログラミング 1 - 3
なうで紹介 mixiチェック ツイート
Peta |  Pocket

2013年度新卒採用サイト“CAnvas”


Theme:
こんにちは。

Ameba事業本部でデザイナーをしております奥泉 (@oku1979) です。

今回は弊社の2013年度新卒採用サイト「CAnvas」が出来上がるまでをご紹介したいと思います。


採用サイトのコンセプト


どんなクリエイティブでもそうですが、まず、2013年度の採用サイトを製作するにあたり、

人事、開発メンバーで合宿を行い、コンセプト固めから入りました。

まず始めに“伝えたいもの”をチームで話し合いました。

CyberAgentの強みは“人材”です。働いている社員の活き活きとした表情や自分の仕事に

やりがいを持って働いている様子を少しでも学生の皆さんに見て欲しい、感じて欲しい、

というのが一番の肝でした。

これをうまく伝えるにはどの様な表現がいいのか？をみんなで考え、

「どんな仕事があり、どんな事をやっている、ではその人の魅力がうまく伝わらない、

CyberAgentで描きたい事を表現しよう。」となりました。


タイトルはCAnvasに。



コンセプトが決まり、次はタイトルの作成です。

「描く」というコンセプトを元にCyberAgentのCAと真っ白な土台のキャンバスをかけ、

タイトルはCAnvasに。

また、見て頂ける学生へのメッセージとして、自分の未来を考えるきっかけに

なって欲しいという気持ちも込めて、「未来を描くのは、自分。」としました。

$1 pixel｜サイバーエージェント公式クリエイターズブログ


写真、BGM



今回の採用サイトは写真、BGMにもとことんこだわりました。

プロカメラマン300人ほどの候補の中から、人物撮影がとても素敵だった

小林紀晴さんに依頼。

CyberAgentの社員の魅力を引き出し、イメージ通りの撮影を行って頂けました。

余談ですが、小林紀晴さんは「ハッピーバースデイ 3.11」という作品を手がけられており、

その写真が年末の紅白歌合戦でも使用されていました。

また、BGMは一緒に制作を行ったメンバーの紹介で、adidasのskycomicを手がけた下村温都史さんに依頼。

常に流れる音楽なのでうるさくなく、かつイメージが広がる音で、ピアノとストリングスを中心に、

という依頼のもとこちらもイメージ通りの楽曲を作成頂けました。



クリエイティブ



“CAnvas”というタイトルから、まず、デザインを行う上で決めたのが、

■デッサンで使うキャンバスに掛けてはいるが、あくまでイメージとしてのキャンバスにする。

■CyberAgentから伝えたい事を表現する以上に、見てくれる人に自分に置き換え、感じてほしい。

■“情報”としてではなく、“伝えるクリエイティブ”にする為にテキストは控えめに。

この3点を常に頭に置きながら制作を行いました。

1 pixel｜サイバーエージェント公式クリエイターズブログ


$1 pixel｜サイバーエージェント公式クリエイターズブログ


「ツール」としてのスマートフォン版



今回、サイトに合わせてスマートフォンの対応も同時に行いました。

“CAnvas”を一番見て頂きたいのは学生の皆さんです。

どんな時でも気軽に見て頂きたいため、PCのイメージはそのままに

極力シンプルに仕上げ、お気に入りの社員を8人まで登録出来る仕組みを取り入れたので、

面接などの際に「話のネタ」などにも使って頂き、

ツールとして見てもらえるように仕上げました。

1 pixel｜サイバーエージェント公式クリエイターズブログ


また、スマートフォン版ではAdobeのEdgeを使用しています。

EdgeはHTML5+JavaScript+CSS3ベースのWebアニメーションを制作できるソフトです。

詳しくはこちらでスマートフォン版の制作を一緒に行った大谷が記事を書いていますのでご覧ください。


まとめ



年々、各企業は工夫を凝らした新卒採用サイトをリリースしています。

技術的に面白いモノ、デザインが素敵なモノ、奇を衒ったモノなど様々です。

学生の皆さんが見たい、知りたいのは「社風」であったり「情報」であったり

「自分が働けるかどうか」です。

今回の“CAnvas”はCyberAgentという会社で働いている社員それぞれが

「どんな未来を描きたいか」を表現するとともに、見て頂いた方に

同じテーマを投げかけています。

学生の方はもちろん、それ以外の方にも将来を考えるきっかけになって頂ければ幸いです。

まだご覧になっていない方は是非ご覧ください。

一人でも多くの方々に見て頂きたいです。

【for PC】
http://www.cyberagent.co.jp/recruit/canvas/

【for Smart Phone】
http://www.cyberagent.co.jp/recruit/canvas/sp/


-team “CAnvas” -
Planning : 小川 璃紗 risa ogawa
Artdirection / Design : 奥泉 将章 masaaki okuizumi
Direction / Interaction : 大庭 俊介 shunsuke oba
Development : 大谷 剛 go ohtani
Network Architect : 古田 陽介 yosuke furuta
Network Architect : 奥田 順子 jyunko okuda
Network Architect : 井野岡 代之 shiroyuki inooka
Adviser : 渡邉 靖彦 yasuhiko watanabe
Photo : 小林 紀晴 kisei kobayashi
Sound Design : 下村温都史 atsushi shimomura


最後まで読んで頂き、ありがとうございました。
なうで紹介 mixiチェック ツイート
Peta |  Pocket

入社からピグギフトがリリースされるまで


Theme:
こんにちは。
アメーバ事業本部ピグディビジョンで、アメーバピグ基盤機能開発を担当している金原です。
前職では航空関係のシステムエンジニアをしており、2011年5月に中途入社しました。

今回は中途入社した私のピグギフト機能リリースまでの記事になります。

ピグのディベロッパーはどんな仕事をしているのかを少しでもお伝えできればと思います。

ピグの機能開発


私の所属しているグループでは主にアメーバピグの基盤機能開発を行っています。
具体的にはポチくじ、カレンダー、ピグギフト等の新機能の開発を行いながら、既存機能の改修や、テスト運用を行っています。
開発メンバーは主にディベロッパー、デザイナー、エンジニアから構成され、私はディベロッパーを担当しています。
ディベロッパーの担当業務は主にas3.0での開発とアニメーションの作成になります。

それでは、入社からピグのギフト機能リリースまでに携わった主なプロジェクトをご紹介します。

ポチくじ機能開発


入社して最初に携わったプロジェクトで、アニメーション部分を担当しています。
デザイン素材とポチくじのストーリーを元にアニメーションを作成しました。

1キャラクターＡが大金持ちになる夢を見ている。
2キャラクターＢがキャラクターＡの鼻ちょうちんを割ると夢から覚める。
3夢から覚めると、そこには！？

何度も修正を重ね、以下のポイントを意識しながら作成を進めています。
・ピグらしいキャラクターの動き
・夢から現実に切り替わる際の演出
・コインが当たったときのワクワク感

1 pixel｜サイバーエージェント公式クリエイターズブログ
新規・既存ユーザーも毎日の習慣として使うコンテンツをコンセプトに開発

カレンダー機能開発


カレンダーを表示する機能を担当しています。
入社して1ヶ月が経過したころのプロジェクトで、アイデアの案出しから携わっています。
どんなデザインにするか、アイコンの動きはどうするか、表示する情報はどのようなものにするかを話し合って開発を進めていきました。
また、初めてas3.0での本格的な開発を行ったプロジェクトになります。

1 pixel｜サイバーエージェント公式クリエイターズブログ
ピグの今後の予定が一目でわかるようなカレンダーをコンセプトに開発

ギフト機能開発


入社して2ヶ月半が経過したころに携わったプロジェクトで、プロジェクトの発足から携わっています。
開発メンバーのディベロッパー、デザイナー、エンジニアは全員5月入社で、試行錯誤を重ねながら開発を進めていきました。

ディベロッパーはデザイン関連でデザイナー、サーバー関連でエンジニアと関わるため、なんども話し合いをしました。

1 pixel｜サイバーエージェント公式クリエイターズブログ
プレゼントをきっかけとした、新しいコミュニケーションをつくるをコンセプトに開発

その後、ギフト機能は運営からギフトを贈る機能を追加し、多くのユーザーに喜んで頂きました。

※ピグギフト発足の理由等は前回の記事[ピグギフトがリリースされるまで]をご覧ください。

まとめ


入社して数ヶ月の間に、多くのプロジェクトに携わりギフト機能リリースまで怒涛の勢いで過ぎていきました。その中で主観ではありますが、私が感じたことを３つほどご紹介します。

1ユーザーの反応がダイレクトに伝わる
リリースまではユーザーにどう受け止められるか不安ですが、リリース直後にユーザーの反応がダイレクトに伝わるのはピグならではだと思います。
私自身がサイバーエージェントに転職した理由の1つでもあります。

2入社年数に関わらず自分のアイデアや意見を出せる
自社サービスのアメーバピグでは、職種や入社年数に関わらずアイデアを出せる場面が多々あります。
そのため、プロジェクトに深く関わることができ、とてもやりがいがあると思います。

3多くのクリエイターと一緒に仕事が出来る
現在ピグでは多くのFlashクリエイターが在籍しています。
新しい技術やモノづくりが好きな方が多いのでとても刺激を受ける環境です。
純粋に技術が好きで、自分でこういうものを作りたい！という人には良い環境だと思います。

これからも沢山のユーザーに喜んでもらえるピグのサービスを開発していきたいと思います。

最後まで読んで頂き、ありがとうございました。

アメーバピグはこちら
http://pigg.ameba.jp/
なうで紹介 mixiチェック ツイート
Peta |  Pocket

ピグギフトがリリースされるまで


Theme:
こんにちは、Ameba事業本部ピグディビジョンでデザイナーをしております八田勧生 (@Kansway) です。
前職では、家庭用ゲームソフト開発会社でUIデザインとキャラクターモデリングを行っており、2011年5月に中途入社しました。

入社してから１年経っていないにも関わらず、ピグ内のカレンダー機能、某大物アニメ会社様とのコラボエリアの制作など、約半年間のあいだに数々の大きなプロジェクトに携わる機会に恵まれました。

今回は、携わってきたプロジェクトの中でも特に大きいプロジェクトであった『ピグギフト』について記事を書かせて頂きます。


ピグギフト発足の理由


ピグギフトがリリースされる以前は、自分以外のピグにプレゼントをあげたい場合ピグプレゼントという機能を使う必要があったのですが、それを使った場合のフローが

ピグのショップウィンドウのフッターからAmebaへ飛ぶ
↓
Ameba内で贈る物や宛先などを決める
↓
受け取り人となっているピグにギフトが届く

という、ピグの世界でのやり取りにも関わらず、一旦別のウィンドウで贈り物の設定をする必要がありました。

それを解決することで利便性を高め、当時優先して強化を進めていた非同期系サービス(ログインしていなくても変化が起こる)にもつながることから発足したのが『ピグギフト』プロジェクトです。

デザインをする前に


私たちは普段から、ピグというサービスにとって一番最適な実装を考えながら開発を進めています。ギフト機能開発時もチームのメンバーで大事にしたのは、

①　ピグ内で贈り合えるとこんな楽しさがある、という『ならでは感』
②　使いやすく設計されたギフト用ＵＩ

といったものでした。

①の『ならでは感』に関しては、ピグという仮想空間でギフトを贈り合う意味を活かすために、自分の部屋にプレゼントが届き、開封できるという仕様を選択しました。

■部屋でギフトを受け取る様子
$1 pixel｜サイバーエージェント公式クリエイターズブログ

しかし、贈り物が届いた時に部屋に箱を表示させる現在の仕組みは非常に難しい実装が絡み、開発途中、届いたプレゼントを部屋に表示しない方法での実装も検討されました。

②のＵＩ設計に関してはまず、ギフトを贈る際に欲しい機能を選ぶところから始めたのですが、前身である『ピグプレゼント』の把握や他社のギフト関連のサービスの調査などをし、欲しい機能のアイデア出しをしました。そこから使いやすいように機能を絞った結果、ギフト用のＵＩに実装する機能として

・ラッピングの選択
・メッセージの編集
・お届け日指定(二次開発)

が選出されました。

■実装されているＵＩ
$1 pixel｜サイバーエージェント公式クリエイターズブログ

デザイン作業


ピグのギフト機能に関連するデザインは大きく分けて３つ、

①　ギフト用ＵＩの設計・作成
②　ラッピング及び開封時のエフェクト作成
③　受け取り時のＵＩ

の作成をしました。

①　ギフト用ＵＩの設計・作成
これに関してはまず、前述した機能をどの順番で選ばせるか、どのように選ばせるか、それを実現するためにはどのウィンドウサイズが最適なのか、ショップウィンドウとは別のウィンドウで操作させるのか、ショップ内で完結できるＵＩにすることはできるかなど、あらゆる可能性の模索と検証を行いました。

■ＵＩ案出し(抜粋)
$1 pixel｜サイバーエージェント公式クリエイターズブログ

最終的に現在のデザインに決まった理由としては、１アクションに付き１画面の方が使いやすいだろう、という判断からでした。例えば、宛先選択時はギフトウィンドウ上では宛先選択しかできず、「次へ」のボタンを押すまで次のフローにいかせない、といったものです。

②　ラッピング及び開封時のエフェクト作成
こちらに関してはまず、ラッピングの種類をどうするかの検討から始まりました。
現実の世界にあるラッピングの画像を集め、その中から、無料・アメ・有料の３種類の用途に合うようにラッピングのデザインをチューニングしました。

■ラッピングの案出し
1 pixel｜サイバーエージェント公式クリエイターズブログ

③　受け取り時のＵＩ
こちらに関しては、受け取りＵＩ単体で発想を広げることはせず、ラッピングの雰囲気に合うようにデザインを考えました。

■ギフト受け取りＵＩ案(抜粋)
1 pixel｜サイバーエージェント公式クリエイターズブログ

ギフト実装による効果


ギフト機能の利用者は現在、アイテムチームによるギフト専用アイテムの投入やシーズンイベントに合わせたラッピングの投入など様々な施策により、現在毎日数万人、月に数十万人以上の方に使って頂いている機能となりました。先月のクリスマスイベントも大盛況でした。


実装された月には、社内による表彰でグッドスタートプロジェクト賞を受賞し、このプロジェクトに関わる事ができ、本当に良かったです。

■チームメンバーの写真
1 pixel｜サイバーエージェント公式クリエイターズブログ

アメーバピグはこちら
http://pigg.ameba.jp/
なうで紹介 mixiチェック ツイート
Peta |  Pocket

Web標準技術でのアニメーション - Adobe Edge


Theme:
はじめまして。
主にスマートフォン向けサービスのフロントサイドの開発を行なっております、大谷(@GO_OHTANI)です。

今回は、今年の10月にアメリカのLAで行われたAdobeMAXというカンファレンスでも注目コンテンツのひとつとして発表された「Adobe Edge」についてご紹介させて頂きます。

AdobeMAXのレポート記事もアップされていますので、こちらも読んで頂けると幸いです。

「AdobeMAX1日目!基調講演リポート」
「AdobeMAX2日目!基調講演リポート」
「AdobeMAX3日目最終日!～フォトログ～」

「Adobe Edge」とは


Adobe Edgeとは、Adobe Systems社が提供する、HTML5+JavaScript+CSS3ベースのWebアニメーション制作ツールです。
Adobe Labsにてダウンロードして実際に試してみることができます。

注意点として、Adobe Edgeはまだ正式版としてリリースされておらず、現在はPreview3版として公開されています。

UI面は
1 pixel｜サイバーエージェント公式クリエイターズブログ

のようにタイムラインベースとなっています。
FlashやAfter Effectsと似たUIになっていますね。

「Adobe Edge」の使用例


「THE ADVENTURES OF TIMMY: RUN KITTY RUN」
Adobe Edgeの使用例としてAdobeMAXでも多くのセッションで紹介されていました。
Adobe Edgeでここまで出来るなんて素晴らしいですね！

「Adobe Edge」の特徴


Flashとか既にアニメーション制作ツールがあるのに、どうしてわざわざAdobe Edgeを使用する必要があるの？と感じた方もいるかもしれません。
以下にAdobe Edgeの特徴を挙げてみます。

1.web標準技術のアニメーションであること
一番大きな特徴として、生成されるアニメーションがHTML5+JavaScript+CSS3ベースであることが挙げられます。
スマートフォンの登場によりweb標準であることの重要度が高まっている近年ですが、
FlashPlayer等のプラグインを一切必要としないので、iPhone上でも問題なく動作する点は非常に大きなメリットですね。

2.直感的にアニメーションを制作できる
HTML5+JavaScript+CSS3ベースなので、もちろんAdobe Edgeを使用しなくても同じアニメーションを制作することは可能です。
ですが、自前でアニメーションを制作する場合にはアニメーションの完成イメージを頭で描きながらプログラミングする必要があります。
複雑なアニメーションを全て自前でプログラミング。。。考えただけでゾッとしますね。

3.基本的なイージングが準備されている
到達点に対して「ゆっくり近づく」、「バネのような動きで近づく」、「バウンドするように近づく」動きを実現させるためのイージングがツール内に用意されています。
ツール内で部分的にプレビューしながらアニメーション制作を進めていけるので、ベストな動きをトライ&エラーで探せるのは良いですね。

スマートフォン向けサイトで利用する際の注意点


僕もAdobe Edgeを実際の業務で利用してみました。
その際に感じた改善してほしい点や注意点を挙げてみます。

1.高解像度ディスプレイへの対応
iPhoneのRetinaディスプレイ等の高解像度ディスプレイで画像を綺麗に表示させるために、大きめの画像をCSSで縮小して配置するテクニックが使われます。
Adobe Edgeにはまだスマートフォン向けのアニメーション制作を支援する機能は備わっていないので、高解像度ディスプレイに対応するには生成されるファイルを後から編集する必要があります。
全ての画像サイズを大きくすると読み込み時間が遅くなってしまうので、優先度をつけて対応するのが良いと思います。

2.HTTPリクエスト数を減らす
Preview3版では、アニメーションで使用する画像はスプライト画像として一つの画像ファイルにはまとめられていません。
つまり、素材画像を10個使用すれば10のHTTPリクエストが走ることになります。
ページロード時間を遅延させる最大の要因がHTTPリクエストであることとスマートフォンの回線の弱さを考えると、スプライト画像化は必須な作業でしょう。
関係者に聞いてみたのですが、スプライト画像化は正式版のAdobe Edgeに追加が予定されている機能のひとつのようですね。

さいごに


Adobe Edgeはまだ正式版としてリリースされていませんが、十分に実務レベルで利用できると思います。
先日行われたイベント「ADC MEETUP ROUND03」でもAdobe Edgeが紹介されています。
Adobe Edgeに関する内容ではありませんが、僕もこのイベントで公演を行いましたので、こちらも見て頂けると有難いです。

当記事が今年最後の記事になります。
それではみなさん、良いお年を！！

大谷
なうで紹介 mixiチェック ツイート
Peta |  Pocket

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


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

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

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


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

$1 pixel｜サイバーエージェント公式クリエイターズブログ
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の紹介



$1 pixel｜サイバーエージェント公式クリエイターズブログ
つりポン！
⇒ダウンロードはこちらから
http://itunes.apple.com/jp/app/id473532809?mt=8


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

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

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


$1 pixel｜サイバーエージェント公式クリエイターズブログ
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を紹介させていただきました！
また新しいアプリリリースされた際には紹介させていただきます！最後まで読んでいただきありがとうございました！
なうで紹介 mixiチェック ツイート
Peta |  Pocket
Entries Next >>
ページトップへ戻る