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

Flash Toolkit for CreateJSを試してみるその2

Ameba事業本部ソーシャルゲームディビジョンで
ディベロッパーをしておりますコサカです。

前回からの続きです。

今回は実際にFLASHを使ってHTML5出力をするスクリプトを書いていきます。

まずはアニメーションやスクリプトの前に、

パブリッシュされたHTMLがどのように記述されているか見てみましょう。

実際のサンプルはコチラ

上記のように、

ステージ上にパスデータとgifデータを配置して、

前回のようにHTMLでパブリッシュしてみました。

アニメーションもスクリプトもないわけですから問題なく表示されます。

iPhoneでもAndroidでも確認できました。

(余談ですがSEOなどを考慮しないでいいならば、静的なページデザインを
HTMLコーディングする、最も楽チンで最速な方法なのでは？)

さて先ほどの画面のソースを見てみましょう。

まずは47行目

stage上のオブジェクトはすべてcanvasで出力されているのが分かります。

次に17～26行目あたり

stageに読み込ませていた画像データをプリロードしています。

gifデータがimages配下にpngに変換されて読み込まれています。

39行目では

フレームレートが指定されていますね。

その他の細かいことは置いておいて、
sample-1.js を覗いてみましょう。

10～20行目でテキストデータの定義

25-27行目でパスデータだったアメーバロゴの定義がされています。

ざっくりとでしたが、このように

stegeの情報をHTMLとjsで書き出してくれるのが特徴ですので、

スクリプトをあとから修正することも可能なのです。

次にアメーバロゴを動かしてみます。

前回のエラー一覧にあったように、

クラシックトゥイーンを含むレイヤー上には、シンボルインスタンスを 1 つしか配置できません。ですので、アメーバロゴを1レイヤーに置き、MCに変換してからクラシックトゥイーンで動かしてみます。

アメーバロゴが上から落ちてきてバウンドして止まる

という簡単なアニメーションです。

動くサンプルはコチラ

イージングもちゃんと再現されていますね。

注意点が一つあります。

このアニメーションのスクリプトを一部抜粋したのが以下です。

// symbols:

(lib.シンボル1 = function() {

this.initialize();

// レイヤー 1

this.instance = new lib.トゥイーン4("synched",0);

this.instance.setTransform(32.5,33.5);

this.addChild(this.instance);

}).prototype = p = new Container();

シンボルやトゥイーンに名前を付けないと

上記のように日本語がそのまま変数名になってしまいます。

それでも問題なく動くようなのですが、文字化け対策のために、

全てのシンボル、トゥイーンに英数で名前を付けたほうが良いです。

さていよいよ、アニメーション制御のスクリプトを書いてみます。

まずはもっともよく使う？指定位置に飛ばすスクリプトです。

■AS

//trace("end");

this.gotoAndPlay(1);

これをJSで書くと

■JS

/* js

//alert("end");

this.gotoAndPlay(0);

ほとんど一緒ですね。

JSを書くときは、

スラッシュ、アスタリスク、半角スペース、"js"

で始まり、

アスタリスク、スラッシュ

で終わります。

書く場所は、従来通り、タイムライン上のアクションウィンドウを開いて書けばOKです。

/*で始まるのでコメントアウト扱いになって、少し読みにくくなってしまうのが難点です。

ここで一つ注意点

フレーム番号は 1 ではなく 0 から始まっています。

ですのでJSとASでは数字ずれます。

ラベルは使えますので

this.gotoAndPlay("repeat");

といった具合にラベルを付けるのが無難かと思います。

swfとHTML両方で書き出すなら下記のように記述すればOKです。

//trace("end")
this.gotoAndPlay(1);

/* js

//alert("end");

this.gotoAndPlay(0);

もちろんJSですので、アニメーション関連だけでなく

自由にスクリプトを追加することもできます。

アニメーションのコールバックやタイマーを利用せず、

タイムライン上に好きなタイミングでJSでスクリプトがかけるのが

Toolkit for CreateJSの最大の魅力ではないでしょうか？

次にサンプル3のように

amebaロゴが順番に色をランダムに変えながら落ちてくるサンプルを作ります。

ここで必要なポイント

■thisの省略ができない。

ASではstop();のようにターゲットがカレントのとき省略できましたが

JSでは省略できません。

■_rootはexportRoot

ASではrootの変数やメソッドを取りたいとき

_root.hoge

でしたが

JSでは

exportRoot.hoge

と記述します。

■親オブジェクトはparent

サンプルでは未使用ですが、親オブジェクトを制御したいときは

this.parent.gotoAndStop("repeat");

といった具合に記述します。

サンプル3のスクリプト抜粋
●rootのタイムライン

stop();

cnt=0;

this.logo0.gotoAndPlay(2);

function nextAmeba()

{

cnt++;

n=cnt%3;

ran=Math.floor(Math.random()*4)+1;

this["logo"+n].logoIn.gotoAndStop(ran);

this["logo"+n].gotoAndPlay(2);

}

/* js

this.stop();

this.cnt=0;

this.logo0.gotoAndPlay(1);

this.nextAmeba=function(){

this.cnt++;

n=this.cnt%3;

this["logo"+n].gotoAndPlay(1);

//this["logo"+n].logoIn.gotoAndPlay(ran);

//↑これが効かない。

}

●MC上で、下に落ちた時のスクリプト

_root.nextAmeba();

/* js

exportRoot.nextAmeba();

一か所スクリプトがうまく動かない箇所がありました。

this["logo"+n]のように連想配列で取得すると、

その子オブジェクトはなぜか参照できませんでした。

そのためロゴのオブジェクトの2フレーム目に同様の乱数を入れました。

サンプルは以上ですが他にも

/* js

this.hoge.onClick = function() {

alert("hogeをクリック");

}

のようにクリックの処理を追加したり、

出力HTMLのinit()に
Ticker.addListener(window);
と加筆し、
さらに

function tick(){

exportRoot.logo0.x+=0.1;

}

のように記述すれば、

ステージのエンターフレーム的な記述の代用もできるようです。

詳しくはEaselJSの仕様を調べてみてください。

今回のサンプルは

http://stat100.ameba.jp/1px/toolkitforcreatejs/sample-1.fla
http://stat100.ameba.jp/1px/toolkitforcreatejs/sample-2.fla
http://stat100.ameba.jp/1px/toolkitforcreatejs/sample-3.fla

よりダウンロード可能です。

まとめ

Toolkit for CreateJSのほんの導入部分だけの検証でしたが

JSの知識もASの知識も少し必要なので抵抗がある方もいるかもしれませんが

しかし逆に言えば、どちらも少しの学習でできるようになると思いますので

これを機にASの人がJSを、JSの人がASを触ってみてもいいかもしれません。

前回も記載しましたがToolkit for CreateJSはFLASHで作ったものをそのまま

HTML5+JSで書き出すツールではありません。
しかし、ほんの少しの留意点と、

コーディングの拡張で、FLASHで作ったアニメーションを

再現する優秀なツールであることは確認できたと思います。

Flash Toolkit for CreateJSを試してみる関連記事
Flash Toolkit for CreateJSを試してみるその1

Flash Toolkit for CreateJSを試してみるその1

はじめまして。

Ameba事業本部ソーシャルゲームディビジョンで

ディベロッパーをしておりますコサカです。

iPhoneがリリースされてから

クライアントサイドの開発者はみなさん、

苦労しているのではないでしょうか？

言うまでもなくiPhoneのFlash非対応の件です。

モバイルデバイスの

アニメーションをFlash以外の方法で実現するために

日々、検討、検証されている方も多いと思います。

選択肢としては

■自前でFlash⇒HTMLコンバーターを作る

■スクラッチでゼロからCSS3アニメーションとjsを駆使して作る。

■Adobe Edge

■Flash(swiffy書き出し)

■Sencha Animator

などでしょうか。

ここでは言及しませんが、それぞれ一長一短があるかと思いますが、

■Flashのなめらかなアニメーション

■軽量さ

■工数をかけることなく変換する

残念ながら、

これらをすべて満たすものはまだなく、

ケースバイケースで最適な方法を選ぶしかないと思われます。

そんな中先日リリースされました、

Adobe Flash CS6のHTML5(create.js)書き出しについて少し触れていきたいと思います。

結論から言うと、上述のいくつかの選択肢が一つ増えたというところでしょうか。

残念ながら、ActionScriptでコーディングされたソースを

ボタン一つでHTML5書き出しでできる！といったものではありませんでした。

現状ではあくまで選択肢の一つとして考えていただくのがよいと思います。

前置きが長くなりましたが。

どのようにFlash CS6からHTML5書き出しをするのかをまとめたのでご紹介いたします。

まずは、

Flash Professional Toolkit for CreateJS

をこちらからダウンロード

http://www.adobe.com/jp/products/flash/flash-to-html5.html

手順に従ってこの拡張機能をインストールすれば準備完了です。

手元にある適当なflaファイルをさっそくHTML5書き出ししてみましょう。

コマンド＞Publish for CreateJs

をクリックすると、

パブリッシュするにはToolkitfor CreateJSパネルを開いておく必要があります。

とアラートがでます。

その時にパネルを開いてくれればいいのに！というツッコミは置いておいて、

ウィンドウ＞他のパネル＞Toolkit for CreateJS

で下記のようなパネルを表示させ、

パブリッシュしてみましょう。

いかがでしょう？

警告が出なかった人はそれでOKです。

しかし、ほとんどのケースでは再現されないはずです。

その場合、出力パネルにエラーが出力されているはずですので確認してみましょう。

幸い？なことに通常のエラーに比べて非常に親切にエラー項目が書き出されています。

他にもあるでしょうが、頻出のものをここに挙げてみます。

■クラシックトゥイーンを含むレイヤー上には、シンボルインスタンスを 1 つしか配置できません。

■放射状グラデーションは真円形状のみをサポートしており、楕円形状はサポートしていません。

■トゥイーンの変形点を変更すると、予期しない結果になる場合があります。

■EaselJS のフレーム番号は 1 ではなく 0 から始まっています。これは gotoAndStop や gotoAndPlay などのメソッドの呼び出しに影響します。

■テキスト関連機能のサポートは制限されています。通常は、テキストを HTML エレメントとして含めることを推奨します (DOMElement を参照)。

■テキスト入力および静止テキストのテキストフィールドはダイナミックテキストとしてパブリッシュされます。

■サポート範囲外の機能が使用されています : カラー効果

かなりいろいろ制限されているようですが、

これらをクリアすればOKです。

以上を踏まえて、

Toolkit for CreateJSは

現段階ではアニメーションを

そのままHTML出力してくれるツールではなく

新たに最適化した書き方をすればHTML5に出力できるようになる。

といったところでしょうか。

次回は実際にFlashを使ってHTML5出力をする

タイムラインjsの書き方を紹介します。

Flash Toolkit for CreateJSを試してみる関連記事

Flash Toolkit for CreateJSを試してみるその2

クリエイティブサマーインターンシップ2014

この夏、インターンシップにチャレンジしたいとお考えの学生の皆様へ。
サイバーエージェント「クリエイティブサマーインターンシップ2014」のご紹介！

皆様、お久しぶりです。
アメーバ事業本部経営本部局の小林です。

本日は、徐々にサイバーエージェント夏の風物詩となってまいりました「クリテエィブサマーインターンシップ2014」の紹介にまいりました

「インターンシップ」は聞きなれているけど、頭についている「クリエイティブ」って？と疑問に思われている方もいるかと思いますので、簡単にサイバーエージェントでのクリエイティブインターシップについてご説明させていただきます！

10日間の短期集中実践形式

サイバーエージェントのクリエイティブインターンシップは10日間という短い期間で実際のサービスに活かすことができるクリエイティブ制作にチャレンジしていただく実践型のインターンシップです。

「実践形式」と謳うだけあって、一般的なインターンシップとは異なり、社風や業務内容を知って頂く事ももちろんですが、皆さんに集中して作業をしていただきサイバーエージェントの現場レベルで通用するスキルを身につけて頂く事に重きを置いています。
なので、我々社員もノウハウに関して出し惜しみはしません！

現場で活躍している当社社員、内定者が技術メンターとして学生のみなさんに生のアドバイスをさせて頂きますので、短い期間でも実際のサービスでも通用するクリエイティブに関するノウハウの習得が可能です。

物作りが好きで好きでたまらない！新しい事にチャレンジしてみたい！そんな学生さんにピッタリの内容となっております。
もちろん「サイバーエージェントに興味がある」という学生さんもウェルカムです！両手を広げてお待ちしております！

ソーシャルゲームコース

日程：2012年8月1日(水)～8月14日(火)
定員：15名
書類締め切り： 7月13日(金)必着
応募に関する詳細はコチラから

スマートフォンコース

スマートフォンコース日程：2012年8月21日(火)～9月3日(月)
定員：15名書類締め切り： 7月13日(金)必着

応募に関する詳細はコチラから

是非、皆様のご応募お待ちしております！！

クリエイティブインターンシップに参加して

さて、ざっと概要をご紹介させていただいたところで、実際に一昨年インターンシップに参加した2012年の新入社員に感想をお話してもらいましたのでご紹介したいと思います！

2012年度入社でデザイナーの山幡大祐です。

私は2010年の7月に行われたクリエイティブサマーインターンシップに参加しました。まずはインターンシップに参加して感じたメリットの中から特に大きかった２つを紹介します。

【雰囲気を肌でを感じられる】
一つ目は、まだ就職活動も本格的に始める前の状況で、サイバーエージェントという会社にはどんな人がいて、どういう雰囲気で、どういう風に制作をしているのかが体感できることです。
当たり前だと思われるかもしれませんが、社内で社員の方と一緒に時間を過ごす事はインターンシップでもない限りはほとんど無いのではないでしょうか。百聞は一見にしかずと言いますが、まさに「体験してみて分かる貴重な経験」が沢山ありました。

【熱い議論で打ち解ける】
もう一つは、そのインターン中グループワークで競い合って、議論した仲間とは今でも飲みに行ったり話をし合える仲間でいることです。
私が参加した2010年のインターンシップでは「Amebaの新規会員登録数を増やす施策とページを考える」というミッショのもと、前半では制作に必要なデザインの方法論などの講義を受け、後半は数名で一つのグループを作り、ミッションをクリアするためのアイデア出しから、制作までの全工程を体験し、最終日には制作した作品をインターン生、先輩社員の前でプレゼンしました。

全チーム共通のミッションが与えられていたので、時にはグループの垣根を越えてインターン参加者全員で議論してみたり、そこからさらに他のチームに負けないアイデアを出すために、こっそりチームで話し合ったりと、制作に打ち込める本当に素敵な一夏でした。各班についてくれたトレーナー社員は、一緒に熱く議論をしてくれて、「会社に入ってもここまで楽しく議論できるんだなぁ。」とさらに楽しくなりました。

【インターンシップが決め手】
インターンシップでの経験が決め手となり、2012年の今年、満を持してサイバーエージェントに入社しました。
そして、いつかは運営側としてインターンに参加し「あの熱い一夏を過ごしてみたい！」と思っていた矢先！早くも今年のインターンシップに社員代表として参加できることになりました！

今度はサイバーエージェントの一員として、このインターンシップを盛り上げて行きますので、サイバーエージェントがどんな会社か気になっている人や、ものづくりに打ち込む一夏を過ごしたい人はぜひ参加して欲しいと思います！
一緒におもしろいものを作りましょう！インターンでお待ちしてます。

今年の夏、皆様と会えることを楽しみにしております

JavaScriptのテスト手法

みなさんはじめまして。

2011年11月に中途で入社し、現在はAmeba事業本部でスマートフォン版Ameba（通称デカグラフ）の開発をしている川口（facebook）と申します。

スマートフォン版Amebaではサーバー部分のNode.jsとフロント部分のJavaScriptを担当しています。趣味はWEBサービス制作で、最近の楽しみはぁゃぴ日報を読むことです。(社内ネタですすいません)

もともとは福岡のベンチャー企業で働いていたのですが、弊社が福岡に開発局を設けるということで福岡勤務を希望して応募したところ、なぜか東京の本社勤務となった次第です。

今回の記事では、JavaScriptのテスト手法ということで、フロントでのテストを前提として現在JavaScriptでよく使われているテストフレームワークと実際のテストコードの書き方を紹介していきます。

JavaScriptにおけるテストフレームワーク

JavaScriptにおけるテストフレームワークとしては、有名なもので現在以下のものがあります。

●JsUnit
Javaのテストフレームワークとして有名な「JUnit」を参考に作られたテストフレームワークです。

●QUnit
もともとjQueryをテストするために開発されたフレームワークですが、現在ではjQueryへの依存が無くなっているためjQuery以外のライブラリを使ったプロジェクトでも使用できます。

●Jasmine

RubyOnRailsでの開発でよく用いられる「RSpec」というフレームワークを参考に作られたテストフレームワークです。

ビヘイビア駆動開発(BDD)という概念に基づいて設計されており、テストコードそのものが要求仕様書のように見えるという特徴を持つフレームワークです。

●Mocha

Node.jsのフレームワークとして有名な「Express」と同じ作者が制作したテスト用のフレームワークです。

Jasmineと同じようにBDDの概念に基づいて設計されており、Expressとの親和性も高いため、Node.jsでのテストでは最有力のテストフレームワークの一つです。

フロントエンドでの使用も可能ですが、アサーション関数(テスト結果をチェックするための関数）が用意されていないため自前で用意する必要があります。

Jasmineを用いたテスト（準備編）

今現在の流れで言うと、全体としてはBDDの機能をもったテストフレームワークに人気が集まっていると感じています。

そのため、今回はJasmineを用いてフロントエンドのテストコードを書いていきます。

●使用するライブラリ
・jQuery（1.7.2）
・Jasmine（1.2.0）

●テストを実行するサンプル
JSのテスト手法を解説したブログなどを見ていつも思っていたことなのですが、細かい関数単位でのテストの書き方は解説していても、全体の動きを通したテストの書き方を解説しているところは少ないと感じていました。（そもそもそういうテストはSeleniumを使えと言われるかもしれませんが・・・）

そのため今回は全体の動きを通したテストとして、モーダルウィンドウを表示するサンプルをテスト対象として使用していきます。

HTML
<div id="root"></div>

JavaScript（modal.js）

(function(w) {

var exports = {};

var event = {

documentReady: function() {

$('#root').append(view.main);

// ボタンのイベントをセット

view.button.click(event.showModalWindow);

view.main.append(view.button);

showModalWindow: function() {

model.getDetail(function(detail) {

view.modalWindow.find('.title').append(detail.title);

view.modalWindow.find('.description').append(detail.description);

view.main.append(view.modalWindow);

});

}

};

var model = {

// 詳細情報の取得用関数

getDetail: function(callback) {

$.get('./detail.json', function(data) {

callback(JSON.parse(data));

});

}

};

var view = {

main: $('<div id="main"></div>'),

button: $('<button>Show Modal Window</button>'),

modalWindow: $('<div class="modal"><p class="title"></p><p class="description"></p></div>')

};

$(document).ready(event.documentReady);

// テスト用

exports.event = event;

exports.model = model;

exports.view = view;

return exports;

})(window);

サンプルの動きとしては、
１．ボタンをクリック
２．モーダルウィンドウが表示され、そこに商品などに関する詳細情報が表示される

というよくある流れです。

Jasmineを用いたテスト（実行編）

●テストを実行するための関数の用意
ここで、テストを実行するためのユーティリティ関数を用意していきます。
関数の内容としては以下の通りです。

・$.test.require
　　テストの対象となるJSファイルを動的に読み込むための関数です。
　　スクリプトタグを追加する形を取らず、$.getで取得したJSの文字列をevalで実行すること
　　によって即時関数の返却値を取得し、テストを実行するためだけにグローバルな関数を
　　定義することを減らすためのものです。

・$.test.exec
　　Jasmineのテストを実行するための関数です。

Javascript（test.js）

(function(w) {

var slice = Array.prototype.slice;

$.test = $.test || {};

function isObject(o) {

return o instanceof Object;

}

// テスト対象のJSを動的に読み込むための関数

$.test.require = function() {

var args = slice.apply(arguments);

var callback = args.pop();

var len = args.length;

var i = 0;

var scripts = {};

var exec = function() {

var url = args[i];

var beforeEval = null;

var name = null;

if (isObject(url)) {

beforeEval = url.beforeEval;

name = url.name;

url = url.path;

}

$.get(url, function(script) {

if (beforeEval) {

script = beforeEval(script);

}

var resEval = eval(script);

scripts[name || url] = resEval;

i++;

if (i === len && callback) {

callback(scripts);

} else {

exec();

}

});

};

exec();

};

// テストの実行

$.test.exec = function() {

var jasmineEnv = jasmine.getEnv();

jasmineEnv.updateInterval = 1000;

var htmlReporter = new jasmine.HtmlReporter();

jasmineEnv.addReporter(htmlReporter);

jasmineEnv.specFilter = function(spec) {

return htmlReporter.specFilter(spec);

};

jasmineEnv.execute();

};

})(window);

●テストコード

全ての準備が整いましたので、ここでやっとテストコードを書いていきます！
テストの流れとしては、

１．ボタンをクリック
２．表示されたモーダルウィンドウの状態をチェック

という風になっています。

JavaScript（spec/modal.js）

(function() {

var modal = null;

var event = null;

var model = null;

var views = null;

$.test.require(

// modal.jsの読み込み

{name:'modal', path:'../js/modal.js', beforeEval:function(script) {

// veiw.mainの#rootへのappendが実行されないようコードを削除

return script.replace("$('#root').append(view.main);", '');

}

function(module) {

modal = module.modal;

// modal.jsでexportsしておいたオブジェクトをここで取得できる

event = modal.event;

model = modal.model

view = modal.view;

// テストの実行

$.test.exec();

}

);

var base = null;

describe('モーダルウィンドウテスト', function() {

var temp = null;

var cnt = 0;

beforeEach(function() {

// １度だけ実行されるようにする

if (cnt > 0) { return; }

// 詳細データ取得用の関数を一時的に書き換え

temp = model.getDetail;

model.getDetail = function(callback) {

callback({title:'テスト・タイトル', description:'テスト・説明'});

};

// ボタンのクリック

view.button.click();

model.getDetail = temp;

cnt++;

});

describe('表示チェック', function() {

it('ウィンドウ', function() {

expect(view.main.find('.modal').length === 1).toBe(true);

});

it('タイトル', function() {

var title = view.modalWindow.find('.title').text()

expect(title === 'テスト・タイトル').toBe(true);

});

it('説明', function() {

var description = view.modalWindow.find('.description').text();

expect(description === 'テスト・説明').toBe(true);

});

});});

})();

テストの結果はどうでしたでしょうか？
無事成功していれば以下のような画面が表示されると思います。

今回のサンプルをGithub上に上げていますので、よければそちらもご覧ください。

github|1pixelTestSample

おわりに

コードが多めの記事になってしまったため見づらかったかもしれませんが、最後までお付き合いいただきありがとうございました。
これを機にJavascriptでのテストに興味を持っていただければ幸いです。

実際にこのテスト手法を取り入れてスマートフォン版Amebaをリニューアルしていますので、よければご覧ください。

スマートフォン版Ameba

データ管理で作業効率がUPするデザインワーク

こんにちは！
スマートフォンプラットフォームDivという部署でデザインを担当しているおばたです。
モック作りを進めていって、デザインの方向性がなんとなく見えてきたら
その後の開発は、デザインデータの管理・運用で作業効率がずいぶんと違ってきます。

今回は、スマートフォン向けAmebaのデザインデータの管理・運用方法について書いてみます。

はじめに

Fireworks CS5.1を使い、Subversion（SVN）で管理しています。
データの管理は、忙しいとついつい後回しにしてしまいがちです。
しかし、放っておくと気づけばカオスになっていることもしばしば・・・
ちょこちょこ整理するようにすると、すてきな感じになります。

Subversionについて

Subversionって！？
SVNなんて呼ばれているツールで、ファイルのバージョン管理ができるものです。
チーム内のデベロッパーも同じものを使っています。

こんなことができちゃいます
・バックアップ作成
　共有フォルダに日付をつけてpsdを保存していかなくてもよくなります
　先祖返りとかもうこわくない！
・ファイルの競合がわかります
　他のデザイナーと作業が競合したら、それを知ることができます
・デベロッパーとの共有もスムーズ
　htmlファイルと同じ管理方法にすればデベロッパーも喜びます（たぶん）

基本的に、ファイルを編集したらコミットする。
編集内容をメモする。というルールの元運用します。

グラフィックデータはバイナリデータなので変更点を比較できないため
何をしたかを書いておく必要があります。
メモを残しておかないと、他の人との共有やチェックの際に困ることになります。

こんなかんじ

historyからバックアップを取り出せます。

Fireworks＋コンポーネントについて

パーツを一つのpngファイルにまとめます。
こんなかんじ

コンポーネントファイル一つを最新にしておき、ここを参照します。
以前のプロジェクトでは、こういった管理方法ではなかったため、
・すでに存在しているパーツを新しく作っていた
・同一のアイコンで古いものと新しいものが混在していた
など全体で統一感を取るのにも苦労していました。。
このファイルを作っておけば、引き継ぎなんかも楽々です！

既にあるものはコンポーネントファイルからドラッグして使うようにします。

★シンボルについて
共通化するパーツはシンボル化しておきます。
オリジナルの情報を保持したままリサイズ可能

角丸が保持されたままサイズを変更できます！

※シンボルを解除した時に、角丸が崩れる場合があるので
ファイル名にメモしておくと便利です

複数配置したインスタンスは一括修正が可能
背景色を変更します

他のライブラリへも適用！

シンボル使用時についての注意点
・拡大縮小するシンボルを作成するときは基準点を左寄せ(X0Y0)にしておきます。
そうしないとシンボル自体がブレやすくなります。
・外部ファイルのパスを変更するとリンク切れになるので、シンボル名は最初に決めておきます。
今回あとからディレクトリ名を変更してしまい、各画面のリンク切れのシンボルをコピペしてしまい、別シンボル扱いとなり後から修正するのが手間でした。。

リッチシンボルの扱い
テキスト編集可能なシンボルは、見出しなどに便利です。

メリット
デザインを統一しつつ各画面で必要な設定を作成できます
デメリット
テキスト編集可能なシンボルはテキストの一括置換で修正できません

★iconのfont化
今回、使用アイコンはfont化しました。

フォントファイルもSVNで管理します。

更新があった場合は、それをローカルへインストールするだけで全画面に適用されるので
らくらくですね！

デザイン上で使用するサイズを考慮した上で作り始めます。
例）30px
30の倍数で大・中・小　といった具合。
キー入力の範囲でしか、登録ができません。それ以上になると、元データからコピペで配置することになってしまいます。

メリット
・font 更新すればデザイン修正が反映される
・デバイスごとの各画像を書き出さなくてよい
デメリット
・css fontを使用できない古いデバイスで使用できない。
・細かいデザインを指定できない(グラデつけられないとか)

まだまだ細かいところは色々あるのですが、今回はこの辺まで。

デザイナーで、バージョン管理ツールをご存知でない方や、データ管理でお悩みの方に
少しでも興味をもっていただけたら嬉しいです！
最後までお読みいただき、ありがとうございました！

イラストレーターズ・ワークショップ「ピグチャレンジ！」レポート

はじめまして、アメーバ事業本部経営本部局の小林です

今日は、先日2回目が開催され大好評だったイラストレーター向けの1ＤＡＹワークショップ「ピグチャレンジ！」についてのレポートを書かせていただきます！

さて、レポートを始める前に「何それ？」という声がちらほら聞こえそうなので「ピグチャレンジ」について簡単にご説明させていただきます。

「ピグチャレンジ」はその名の通り、一般の方をお招きして「ピグ」の実務を体験してみよう！というイベントです。「ピグってどうやって作っているの？」「ピグを描いてみたい」といった嬉しい声を多くいただくようになった事もあり、第１回[(４月開催)と第２回(５月開催)は「ピグのイラストレーションについて」というお題で「実際のピグをもとにオリジナルのピグアイテムを描く」という事にフォーカスした内容となりました。

気になる

1日の流れはこんな感じです。

10：00　ピグイラストレーターの仕事について・ピグイラスト制作(1)
13：00　お昼休憩
14：00　ピグイラスト制作(2)
18：00　作品発表・作品に対する講評・質疑応答
18：50　ワークショップ終了
PCはMacbookを1人1台を用意し、ペンタブの持ち込みも可能としました。

座学から実際の制作も含め、かなり盛りだくさんな内容となっております

ワークショップはアメーバピグ全体のアートディレクションをしている青山を講師として、アメーバピグのアイテム制作におけるレギュレーションと世界観について実例を用いた説明でスタートしました。

(アメーバピグのアイテム制作におけるレギュレーションについてはコチラでもご覧いただけます)

レギュレーションと世界観について説明が終わった後はお待ちかねの制作です！

制作は当日発表されるお題に沿ったオリジナルのピグアイテムの制作となっており、お題は当日まで秘密！発表されるまで参加者の皆さんにはドキドキしていただきましたｗ

ちなみに第２回目のテーマは「

初夏コーデ+家具～夏を感じるアイテム」という事で、初夏にピッタリなアイテムを皆さんに描いていただきました。WEBで参考資料を検索しながら皆さん黙々と作業をされていました。

また、制作タイムには青山の他にも実際にピグのイラストを担当しているデザイナーが講師として、参加者の皆さんからの質問やイラストレーションについてのアドバイスに回らせていただきました！第２回目のこの日は入れ替わり立ち代わり８名のデザイナーが講師役として参加しました。

参加人数も10名と少人数にしているので、参加者の皆さんと現場のメンバーとのコミュニケーションもとりやすくアットホームな雰囲気の中作業を進める事ができたのではないかと思っております。

制作の合間には、他の参加者の方の作品を見る時間もあり皆さん真剣に他の参加者の方々の作品を見て回られていました。普段、自分や社外の人の作品を間近に見る機会は実はあまりないので、この試みは大変好評でした。

そんなこんなで、制作を終えたあとは作品発表です

参加者の皆さんにはお一人ずつ、自分の作品の紹介とともに、こだわった箇所や苦労した箇所などを発表していただきました。

途中経過からガラリと印象が変わった方、より作りこみをされた方など、本当に短い制作時間ですが力作が並びました！

作品の発表に合わせ青山から各作品にコメントが入り、それを踏まえての全体講評をむかえピグチャレンジの全てのカリキュラムが終了となります。

1日にぎゅぎゅっと凝縮した内容ではありますが、説明、制作、発表～講評と作品作りだけで終わるのではなく「どんな事を考えながら作ったのか」という制作過程の意図を発表し共有することで、ピグの世界で「客観的に見て伝えたいことが伝わる作品になったか？」など、一歩進んだ理解に繋げる事ができていれば、嬉しいかぎりです！

次回の開催はまだ未定ではありますが、開催がきまりましたら弊社HPにてお知らせさせていただきますので、是非、ご期待ください！

PC版マイページのリニューアルについて

はじめまして。
Ameba事業本部メディアクリエイティブDivの河野邉と申します。

今、このブログ記事をどんなデバイスで読んでますか？
もし、PCで読まれてるのであれば画面左上の「Amebaロゴ」をクリックしてみてください。
ログインされてなければログインしてみてください。
そのページが今回ご紹介する「マイページ」です。

アメーバは、2012年5月15日にPC版マイページとブログなどを管理するページのリニューアルをしました。
今回はマイページをリニューアルするに至った経緯と手法についてご紹介します。

リニューアルについて

PCのアメーバは2006年のリニューアル以降、小規模の改修はありましたが、大きなリニューアル・デザイン変更を行わずに運営してました。

アメーバにはブログをはじめ、ピグ、なう、グルっぽなどのサービスがあり、それぞれのサービスでつながりを持つことができますが、それを一覧できるページはありませんでした。
また、つながりのある友達の近況や最新投稿がパッと見で確認できない、などユーザーからの不満や要望に応えることができずにいました。

そんな状況を打破すべく、社内からPC版マイページのリニューアルの声があがり、プロジェクトが発足、ユーザーからの要望に対してユーザー目線で改修を試みる手法を用いて開発がはじまりました。

今回は、下記3点をリニューアルの大きな柱としました。

更新性：いつも新しい情報がある
操作性：使いやすいUI/ナビゲーション
つながり：好みの情報/つながりが持てる

ユーザーテストについて

先述のとおり、今回のリニューアルはユーザーからの要望に応えるためのリニューアルですので、ユーザーの声を聞くことが重要になります。

アメーバに対する不満や要望をアンケートで集め、アンケート内容を参考にプロトタイプを作成し、課題が解消されたかを検証する。こう書くと当たり前のことですが、細かい改修だと行き届かない作業です。

アンケートを元にプロトタイプ作成する
　→ユーザーに実際に使ってもらう
　　→使い勝手について不満や要望を吸い出す
　　　→改良したプロトタイプ作成する…

ユーザーテストと呼ばれるこの作業を合計三回行い、より使い勝手をよくしていく手法を取りました。

新規サービスではなく、既存サービスのリニューアルだったので、対象ユーザーはすでにアメーバを利用している方としました。普段どんな目的でアメーバを利用しているのか、どんな環境でどんなタイミングでアメーバにログインしているのかを事前にヒアリングした上でテストを行います。

ユーザーテストの進め方ですが、対象ユーザー１名に実際にPCを操作していただいて、質問者１名がPCの画面を見ながら質問をします。PCの画面は動画で録画します。質問者の問いに対してどんなタイミングでマウス操作を行ったか、動画で確認することができます。

具体的には、まず旧来のマイページにログインしていただき、実際にPCを操作しながら普段の使い方を質問者に説明していただきます。
普段の使い方は事前にヒアリングしていましたが、ここでは対象ユーザーの普段の使用背景とPCスキルを確認することが目的です。また、いつも使っているPCやマウスと異なるため、環境や操作に慣れていただくことにもなります。

PCに慣れたところで、プロトタイプを試してもらいます。
いつも見ていただいている要素はあるはずなのに、配置が大きく異なるため、たいていの方は数秒戸惑いを感じられるようです。

ここでは普段の使い方と同じ使い方をプロトタイプで行っていただきます。
質問者は使い方の助けになるような言葉は発さず、普段できてきることができるか、どこにつまずくのかを慎重に観察します。

ユーザーテストで出た課題の対応

ユーザーテストは、実施するだけで終わりではありません。
ユーザーテストで吸い上げた問題点はシステムで解消できるのか、デザインで解消できるのか、エンジニアもデザイナーもアイデアを出し合って実装を進めていきます。

ユーザーテストを実施してみて強く感じたことは、ユーザーの多くが、開発者が想定しているのとは違う使い方している、ということです。

ページの使い方は人それぞれで、文脈によって色々なパターンがあります。その行動を観察することで、本人も意識していないような、意外な使い方を見つけて聞くことができます。

意識的な行動も無意識の行動も観察できるので、開発者が要望を鵜呑みにストレートに実装するのではなく、その背景にある要望を開発に落とし込むことができました。これが、ユーザーテストの一番のメリットかと思います。

座談会について

これまでのユーザーテストで、機能とデザインが固まり2012年3月β版公開まですすめることができました。
β版公開時に意見を募るグルっぽを作成したのですが、ユーザーテストでは詰め切れなかった要望を多くいただきました。

そこで、ユーザーテストでは見えなかったご意見を確認する意味をこめて、β版公開中に座談会を実施し、数日使い続けた感想を伺う場を設けました。
座談会の目的は、雑談の中からユーザーの本音や深層心理を拾い集めることです。
長くても1時間程度の操作しかできないユーザーテストと異なり、数日間操作した感想をいただけるので、ユーザーテストとは違った視点での改善のヒントを得られると考えました。

座談会には、β版でマイページを試してそのまま適用し続けている方と、β版で試して旧来のマイページに戻した方それぞれ参加していただきました。
今までのユーザーテストとは異なり、4～6名が一つの会議室に集まり、司会の問いに対して発言していただく形式でした。

なぜ適用し続けているのか、戻してしまったのか理由や背景を伺い、どのような機能があると快適なのか。どこが問題なのか。ユーザーとエンジニアやデザイナーなど開発者が直接話し合い、率直なご意見を伺うことができるよい機会となりました。

座談会で出た課題の対応

リニューアルとしては詰めの時期。これまでのユーザーテストで実装に至らなかったけれども、課題として解消できずにいた機能を実装しました。

シンプルモードの実装
ウインドウの開き方

シンプルモードは、旧来のマイページ表示同様にブログタイトルと記事タイトルのみを表示する形式です。
ぐっとシンプルに一画面に多くの記事を表示できる機能ですが、画像表示モードを使ってもらいたいという開発側の一方的な思いでなかなかユーザーの声を取り入れずにいました。
座談会の段階でも非常に要望が多く、実装しない理由がない状態でした。実装したことで、ご好評の声をいただけました。

ウインドウの開き方について、チェックリスト内のリンクは新規タブで開くようにしてましたが、旧来のマイページでは同一ウインドウで開く仕様だったため、仕様変更に気がつかない場合、思いがけない数のタブが開かれてしまう状態でした。
新規タブで開くかどうかはユーザーのブラウザ設定やマウスでコントロールできることもあり、同一ウインドウで開くよう変更しました。

おわりに

リニューアルによって今までの使い勝手を変更させられてしまう形になってしまい、ユーザーの皆様にはご迷惑をおかけしたかと思います。
今回ユーザー目線の使い勝手の向上を目指しましたが、実際に使っているユーザーのご協力により開発者が気がつけないような問題点に改めて向き合う場となりました。

しかし、「表示が速くなった」「すっきりして見やすくなった」「興味のある記事を見つけやすくなった」などの声をいただけたことでリニューアルした意味があったと確信しております。

お問い合わせなどいただいたご意見から多くのアイデアが生まれ、機能やデザインとして反映してまいりましたが、公開して終わりではなくここからがスタートだと思ってます。
引き続き問題点の改修と、より使いやすいマイページを目指して改善を進めてまいります。

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

PC版マイページ
http://mypage.ameba.jp/

女性向けソーシャルコミュニティサービス "Candy"

みなさん、こんにちは。
Ameba事業本部でフロントエンドの開発を行なっています荒田です。
今回は私が担当しているCandyというサービスについて紹介します。

はじめに

Candyは弊社が提供しているアプリケーションの中でも女性向けのソーシャルコミュニティサービスになります。
Android版を2012月2月、iOS版を2012年3月にそれぞれリリースしました。
Android2.2以上、iOS4.0以上の環境で使用できます。

Candyって？

プロフィールやブログのデザイン、投稿した写真のレイアウトを自由にカスタマイズでき、
自分だけのオリジナルホームページを作成することができます。
CandyではフォローしているユーザをFavorite、フォローされているユーザのことをFanと呼びます。同じ趣味や共通点のあるユーザを見つけて交流の輪を広げてみよう。

どんな機能があるの？

Candyの主な機能は3つあります。

1.Profile
自分に関する情報を載せることができます。
カテゴリ別のランキングやページへのアクセス数を確認することができ、自由に使えるフリースペースもあるので、訪問してくれた人の印象に残るプロフィールページを作成してみよう。

2.Blog
文字の色やサイズが変更できるのはもちろん、顔文字やデコ画だって使えちゃいます。
AmebaとID連携をしているため、CandyからもAmebaのブログを編集・投稿・閲覧することもできます。

3.Photo
料理の写真をアップするのもよし、ネイルの写真をアップするのもよし。
レイアウトがたくさんあるので、自分好みの見せ方でオリジナリティあるアルバムを作成しよう。

毎日気になるアクセスランキング

一日ごとに更新されるランキングがあり、アクセスの多いユーザはCandyのポータルページに載ります。

ランキングは年齢別・地域別・職業別・タイプ別のジャンルに分かれているので、各ジャンル別のアクセスランキングも見ることができます。

また、みんなが投稿している写真もカテゴリ別で見ることができるので、気になるユーザがいたらFanになって交流してみよう。

豊富なスキン

Candyにはシンプルなものからかわいいものまでいろんなジャンルのスキンが豊富にあります。

自分にピッタリのスキンがきっと見つかるはずです。
新しいスキンも続々リリース予定なのでお楽しみに。

思い通りのデザインに

自分の写真や絵文字、デコメなどを自由に組み合わせることで、オリジナルスキンの作成が可能です。
フリックひとつで簡単に写真の位置を変更したり、プリクラ帳のように貼り付けたりすることもできるので、自分好みのデザインに変更して楽しもう。

おわりに

最後までお付き合いいただきありがとうございました。
少しでもCandyに興味を持っていただけたでしょうか。

アプリケーションのダウンロードリンクを設置しましたので、ぜひ使ってみてくださいね。

【iOS】http://itunes.apple.com/jp/app/candy-by-ameba/id509468404?l=ja
【Android】https://play.google.com/store/apps/details?id=jp.ameba.candy
【スタッフブログ】http://ameblo.jp/news-candy/

みなさんに満足していただける素敵なサービスを目指してこれからも開発を続けていきますので、Candyをどうぞよろしくお願いします。

Three.jsとBlenderによるWebGL

初めまして。 html5、javascript、flashなどのクライアント開発を
メインに担当しております、菅家(@KA_ka_YY)と申します。

インデックス

（1）レンダリング
（2）アニメーション制御
（3）テクスチャ変更
（4）ゲームに反映
（5）使用ツール

（1）レンダリング

まずは Blender というフリーの3Dモデリングソフトで
以下のようなキャラクターを作りました。
（Blenderでのモデリング方法については割愛させていただきます。）

そして、Three.js用にjson形式で書き出してくれるプラグインを使用して書き出します。

次に、Three.jsの準備です。
※バージョンによりインターフェースが違う場合がございます。
　今回はバージョンr47を使用しました。

Three.js以外に使用するライブラリは次の通りです。

手始めに基本的に必要なオブジェクトを設定します。
（シーン、カメラ、ライト、表示オブジェクト、レンダラーなど）

//描画用のdom
container = document.getElementById('container');

windowHalfX = container.clientWidth * 0.5;
//パースペクティブカメラを指定
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.y = -500;
camera.position.z = 3000;

//シーンの作成
scene = new THREE.Scene();

//ディレクショナルライトを指定
light = new THREE.DirectionalLight(0xffffff,2); // 光源の色, 強さ
light.position.set(0, 0, 1).normalize();
//ライトをシーンに追加
scene.add(light);

//レンダラ生成
renderer = new THREE.WebGLRenderer({antialias : true});
renderer.setSize(container.clientWidth, container.clientHeight);

次に、
Three.jsにはJSONLoaderというクラスが用意されているので
引数に先ほど書き出したjsonのパスを渡します。

var loader = new THREE.JSONLoader();
//書き出したjsonのパスを指定する
loader.load("./three/macho_batter.js", createScene);

/**
* jsonのロード後のコールバック関数
**/

function createScene(geometry) {
for (var i=0; i < geometry.materials.length; i++){
geometry.materials[i].shading = THREE.SmoothShading;
geometry.materials[i].morphTargets = true;
};
mesh = new THREE.Mesh(geometry, material);
var material = new THREE.MeshFaceMaterial();
mesh = new THREE.Mesh(geometry, material);
mesh.position.y = -container.clientHeight;
mesh.scale.x = mesh.scale.y = mesh.scale.z = 250;
scene.add(mesh);
console.log('material',material)
console.log('mesh',mesh)
}

描画されれば成功です！

（2）アニメーション（スキンメッシュアニメーション）制御

再びBlenderでキャラクターにスキンメッシュアニメーションを設定していきます。
「バットの構え」のモーションと「スウィング」のモーションを作成し、
タイムライン上で0～10が「バットの構え」、11～26が「バットをスウィング」とします。

この状態で先ほどと同様にjsonデータを書き出し直します。

今度はThree.jsでアニメーションを設定して行きます。
meshオブジェクト内のmorphTargetInfluencesに任意の値を入れて
renderer.render(scene, camera);を実行するとその値のタイムライン上の描画になるわけですが、

まあ、ややこしいことは省きまして下記ソースのfunctionを定義し、

gotoAndPlay( 開始フレーム, 終了フレーム, 終了までの間隔値, ループの有無, コールバック );

で、アニメーションするようになります。

/**
* @from int　開始タイムライン
* @to int　最期のタイムライン
* @duration 終了までの間隔値　値が大きいほどゆっくりになる。
* @roop boolean　アニメーションをループさせるか
* @callback　roopがfalseの時、第二引数(to)のタイムラインに来た時に実行される関数
*/
function gotoAndPlay(from, to, duration, roop, callback){
var keyframes = to - from;
var interpolation = duration / keyframes;
var lastKeyframe = 0;
var currentKeyframe = 0;
var _count = 0;
for(var i = 0; i < mesh.morphTargetInfluences.length; i++) {
mesh.morphTargetInfluences[i] = 0;
}
if(roop)
_stop = false;
render = function(){
var time = _count % duration;
if(time == duration -1 && !roop) {
if(callback!=undefined){
_stop = true;
callback();
}
}else{
var keyframe = Math.floor(time / interpolation) + from;
if(keyframe != currentKeyframe) {
mesh.morphTargetInfluences[lastKeyframe] = 0;
mesh.morphTargetInfluences[currentKeyframe] = 1;
mesh.morphTargetInfluences[keyframe] = 0;
lastKeyframe = currentKeyframe;
currentKeyframe = keyframe;
}
mesh.morphTargetInfluences[keyframe] =
(time % interpolation ) / interpolation;
mesh.morphTargetInfluences[lastKeyframe] =
1 - mesh.morphTargetInfluences[keyframe];

//meshのy軸を回転させる
mesh.rotation.y+=0.005;

//描画を更新
renderer.render(scene, camera);
_count++;
_stop = false;
}
};
}

/**
* enterframe
* アニメーションレンダリング
*/
function enterframe() {
requestAnimationFrame(enterframe);
render();
stats.update();
}

つまり、タイムライン操作をすることで
任意のアニメーションに切り替えることができます。

では、通常時は「バット構え」の状態で、キーボードの「A」を押すことで、
「スウィング」するようにしてみたいと思います。

/**
* 「A」ボタンを押したとき
*/
document.addEventListener("keydown", function(e){
if(e.keyCode==65){
swing();
}
}, false);

/**
* バット構え
*/
function kamae(){
gotoAndPlay(0,10,100,true);
}

/**
* バットをスイング
*/
function swing(){
//第5引数には構えの関数を入れる。
//スイングが終了後にかまえのアニメーションに戻る。
gotoAndPlay(10,26,100,false,kamae);
}

です。

さらに、ロード時に「バットの構え」のアニメーションが行われるように
createScene関数内に下記を追記します。

//バット構えアニメーションの指定
kamae();

//アニメーションレンダリング
enterframe();

（3）テクスチャ変更

今回ゲームには反映しなかったのですが、
mesh.geometry.materials[0].mapにあるイメージオブジェクトをTHREE.ImageUtils.loadTextureクラスで置き換えることで、
テクスチャを変更できます。

var _btn = document.getElementById('changeTexture');
_btn.addEventListener('click',changeTexture);
var _textureCount = 0;

/**
* テクスチャーを切り替える
*/
function changeTexture(){
if(_textureCount%2==1){
mesh.geometry.materials[0].map = new THREE.ImageUtils.loadTexture("/three/macho1.png");
if(_textureCount%2==0){
mesh.geometry.materials[0].map = new THREE.ImageUtils.loadTexture("/three/macho2.png");
_textureCount++;
}

以上でアニメーションは終わりです。

完成デモはこちら！！

（4）ゲームに反映

上記の方法で、数種類のキャラクターにピッチングなどのアニメーションを設定して野球盤ゲームを作成しました。

ハチャメヂャーリーグ

（5）使用ツール＆参考ページ

スマートフォン版ブログデザイン

はじめまして。
スマートフォン版ブログデザインの開発を担当しました星野と申します。

今回は、4月12日にリリースしたスマートフォン版ブログデザインの紹介も兼ねて、
開発時に特に気にかけたところを、お話しさせていただきたいと思います。

スマートフォン版ブログデザイン

スマートフォン向けページは、より最適なUIを目指し改善・改修が頻繁に行われます。
そういった事を考慮して一般的にはデザインの自由度を低く設定しがちですが、
それぞれのデザインの個性が最大限伝わる事を優先に開発を進めました。

一番左がおなじみの緑のデザインです。（デザイン設定をする前はみなさんこのデザインとなります。）
右の5つが今回リリースされた、スマートフォン版ブログデザインの一部です。
背景やヘッダーに写真を使用したもの、真っ黒なもの、かわいいイラストのものなど、
バラエティに富んだブログデザインが出来上がり、開発側の立場である私もテンションがあがりました。

ブログデザインとスタイルシートについて

ブログデザインの仕組みは簡単です。枠組みとなるスタイルシートと個別のデザインを決めるためのスタイルシートの2つで構成されています。

左側が、枠組みだけ指定したスタイルシートを適用したものです。
デザイン要素の指定がないので、色の指定もなくずいぶんシンプルです。

右側が、それにブログデザインの指定を記述したスタイルシートを追加したものになります。
ブログデザインのコーディングはテンプレートとなるスタイルシートを元に作成していきます。
コーディングの運用を極力減らすために、デザインで指定されているカラーコードなどを上から順に記述していくだけで済むような作りにしました。

このようなつくりすることによりデザイナーの方でも簡単にコーディングをできるようになり、効率よく量産できるようになりました。

■デザインテンプレート

■スタイルシート

/*==============================================

　カラー設定

==============================================*/
/* テキスト色
--------------------------------------------*/
①
/*ブログタイトルテキスト*/
.skinTitleColor,
.skinBlogTitle a {
color:#ffffff;
}
②
/*記事タイトルテキスト*/
.skinArticleTitleColor{
color:#4d2e08;
}
③
/* リンク色（基本） */
.skinAnchorColor,
a {
color:#0dbbd5;
}

■頻繁に行われる改修に対応させる
先ほどもお話したようにスマートフォンのブログはUIの改修が頻繁に行われます。
今後新しい要素が追加されたときにも対応させられるように、
リンク色や背景色などの汎用的に使用するスタイルにそれぞれクラス名を用意しました。

/* リンク色（基本） */
.skinAnchorColor,
a {
color:#0dbbd5;
}
/* 背景色 */
.skinBgColor,
.skinBody2{
background-color:#f8e9c5;
}
/* 枠線色 */
.skinBorderRightColor{
border-right:1px solid #ddd2bb;
}

既存のデザインのスタイルシートを修正を加える事なく、
用意したクラス名を指定すればデザインに対応できる作りにし、UIの改修もスムーズに行えるようにしました。

管理ページについて

管理ページの設計は、以下の2点を特に意識して進めることにしました。

①デザインを楽しく選べること。
②スマートフォンならではの見せ方。

既存のスマートフォンのブログ管理ページは、いかにも管理ページらしい固めなイメージでした。しかし、ブログデザインに関してはただデザインを選び適用するのではなく、見た目も楽しいと思えるような作りにしたいと考えていました。

また、スマートフォンでは画像の見せ方ひとつでもフィーチャーフォンと比べて、いろいろな見せ方ができます。横スクロールで見せたり、ポップアップで見せたりなど見せ方についてスタッフ間で議論を重ねました。

試行錯誤の結果、トップページと一覧ページではシンプルにデザインのサムネイルを表示するだけにとどめ、イメージ画像を左右にスライドすることで選べるページも作成しました。

スライドページを作成することにより、直感的にイメージをつかむ事ができるようになったのと、「選んでいる感」が得られるようになったかと思います。

ブログデザイン100本同時リリース

今回のスマートフォン版ブログデザインのリリースでは、100本を同時にリリースするという目標がありましたが、実際のリリース時には、目標を上回る106本を用意する事ができました。

その中からスタッフに人気のデザインをご紹介します。

<女性スタッフに人気のデザイン>
■マカロンカラーシリーズ

シンプルですがかわいい配色で人気です。

■ドングリサーカス

かわいい犬のイラストが楽しそうなデザインです。

■にわとり

こちらもイラストとカラーがかわいいデザインです。

＜男性スタッフに人気のデザイン＞
■輪派絵師団デザイン

虎のイラストが印象的な渋いデザインです。

■カモフラージュグリーン

カモフラージュ柄は男性の定番デザインですね。

■SKID

自転車好きの方におすすめです。

みなさんも是非、好みのデザインを探してみてください。

おわりに

4月12日のリリースから2週間で、約30万人のユーザーの方にスマートフォン版ブログデザインを適用していただいております。
今後も新しいブログデザインをリリースしていきますので、今後ともAmebaブログを宜しくお願い致します。

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

スマートフォン版Amebaブログ
http://s.ameblo.jp/
スマートフォン版Amebaブログデザイン
http://sblog.ameba.jp/ucs/skinTop.form