未来をつなぐネイティブアカデミー

新年あけましておめでとうございます。人事本部の清水またろうです。

2014年のサイバーエージェントは"収穫期"だそうです。実り多き収穫期を心待ちにしながらも、"技術力の向上"で、新たな種まきに備えるのもまたクリエイターと言えましょう。そこで「今年は勉強しよう」と年の始めに心がけるものですが、日々の仕事に忙殺されるのもまたクリエイター。例えば、こういうことを考えたことがありませんか。

・もし、仕事のことを忘れて技術の勉強に向き合えたら？
・もし、気になるあの技術を思い切り勉強できたら？
・思い描いたアプリを実現するための技術を学ぶ機会があったら？

経験が長くなると、特定の開発業務について知識やノウハウが深まってきます。それはもちろん良いことですが、新しい技術をいちから習得するには、仕事を抱えているとなかなか手が出せないものです。

ネイティブアカデミーを開講しました

さて、サイバーエージェントでは、社内外のクリエイターやエンジニアを対象にして様々なアカデミーを開催しています。そのコンセプトは「技術にしっかりと向き合う」です。

様々なアカデミーの中から今回は、"ネイティブアカデミー"についてご紹介します。"ネイティブアカデミー"は、ネイティブゲームアプリのリリース促進とクオリティの高いゲーム開発を図るため、ゲームエンジン「Unity」「Cocos2d-x」の技術習得を目的とした、社内エンジニア向けの育成制度です。

2013年の12月にUnityコースを実施しましたのでこちらのご紹介です。

Unityコースのキックオフはユニティーテクノロジーズ・ジャパン様から激励

今回、ネイティブアカデミーの開始にあたって、ユニティーテクノロジーズ・ジャパンの伊藤様から「ユニティの現在、未来」について講演していただきました。これから修得する技術そのものを開発しているエンジニアから激励してもらえたので、参加者のモチベーションは最高に高まりました。

伊藤様のお話は今のUnityだけでなく未来のUnityにもフォーカスされていました。ゲームという分野に収まらないUnityの利用範囲の広さには目を見張るものがありました。医療, 教育, 建築、カバーできる分野は想像力の許す限りどこまでも広がる気がしました。この圧倒的な"ワクワク感"をもったまま、ネイティブアカデミーのUnityコースが開始されました。

ネイティブ開発への熱気

講義中は、ゲーム開発に長けた株式会社サートプロ様の講師が経験をもとに参加者を導き、ゲーム開発に必要なノウハウをいちから伝授してくれました。講義中にOculus Riftを使ったゲームの実演などをしていただき、僕も口が開きっぱなしになりました。

参加したメンバーの"ネイティブ開発への熱気"は目を見張るものがありました。それは、参加したメンバーだけでなく、世界中のエンジニアや市場が共有している熱気、つまり「一発あててやろう！」という強い情熱と重なります。

今、爆発的に広がるスマートフォンゲームだけでなく、医療や建築など多様な可能性を我々に見せてくれるUntiy。そのUnityが世界を広げる過程に、サイバーエージェントのアカデミーを実施できたことを嬉しく思いました。

講義の最終日はそれぞれ開発したゲームを実演しました。アイデア次第でこんなに簡単にゲームが開発できることに驚きました。実際はゴリゴリとプログラミングをしたそうですが。

新年、新学期、引っ越しや、部署移動。春に近づくにつれ新しいことが始まっていきます。新年に限らず新しい何かが始まる時、不安はあれど、誰しも多少はワクワクするものです。今回のアカデミー参加者の皆さんは"Unityが広げるワクワクする世界"という「ここから始まる感じ」を強く受けられたかと思います。

以上がネイティブアカデミーUnityコースの紹介になります。

成長意欲と成長機会はセットで

ふりかえってみますと、時には業務を忘れ、しっかりと新しい技術に向き合う機会が、会社として公式にあることは素晴らしいと感じました。まるで、入社したての新卒になったかのようにプログラミングにとりくむことが、創造性を広げるために必要だからです。

社内の方に伝えたいのは、技術者の成長をどこまでもバックアップしますということ。
学生の方に伝えたいのは、技術を伸ばす機会をいっぱい用意していますということ。
社外の方に伝えたいのは、サイバーエージェントのネイティブ製品にご期待くださいということです。

貪欲に成長を望むクリエイターには、最大限の成長機会を用意していきたいと考えます。2014年もこういう機会を増やしていきたいです。

2014年もサイバーエージェントをどうぞよろしくおねがいします！

今年中に読んでおきたい！2013年人気の記事10本！

皆さんこんにちは、1 pixel運営委員の宇納(@TasukuUno)です。最近ハマっていることはSkype bot開発です。

暦の上ではディセンバー、というわけで、2013年最後の週となりましたが、いかがお過ごしでしょうか。本日は、昨年に続きまして、今年特に反響の大きかった記事をピックアップしてご紹介いたします！これを読まずに年は越せませんよ！

【デザイン】Fireworksを使った大規模ウェブサイトのデザイン設計

若手ながら、スマートフォン版Amebaで活躍しているデザイナー、通称パジェロの記事。

マークアップの分野では、CSSの設計やモジュール化といったトピックを多く見かけるようになりましたが、それはデザインにおいても大切なことです。Fireworksには（残念ながら開発終了とのことですが）、デザインパーツを一元化したり、状態を「ページ」や「ステート」といった単位で管理することができる機能があります。これを上手に使って、効率よくデザイン管理する方法が解説されています。

http://ameblo.jp/ca-1pixel/entry-11444302397.html
（1月16日公開）

【開発】CSS3アニメーションで心地良いモーションを作る

実はこの1pixelの運営委員の1人でもあるディベロッパー、山内の記事。

CSS3でアニメーションを表現できることはもはや常識になっています。ですが、どうやったら心地いいアニメーションを作れるか、というのは実は別のセンスが必要だったりします。そこが手触りを表現するディベロッパーの腕の見せ所。現実世界の物体の動きをよく観察して、それに「如何に近づけていくか、どこまでマネできるか」ということが重要とのことです。サンプルのCSSをぜひお試しください。

http://ameblo.jp/ca-1pixel/entry-11497184837.html
（3月27日公開）

【開発】ガールフレンド（仮）の「声」実装

2013年は、声が出る学園恋愛カードゲーム「ガールフレンド（仮）」のTVCMが多く放映されました。こちらは、そのフロントエンド開発を担当した秋山の記事です。

HTML5から新たに追加されたAudioオブジェクトを使って、スマートフォンブラウザで音声を再生しているわけですが、OSや端末などによって実装が異なる部分も多く苦労したとか。ファイルフォーマットや、陥りやすい罠にも触れながら、サンプルコードを例に実装のポイントをご紹介しています。

http://ameblo.jp/ca-1pixel/entry-11500032326.html
（4月3日公開）

【開発】JavaScriptの開発効率を高める7つのライブラリ

jQueryが当たり前だった時代は既に終わり、スマホ向けの軽量で便利なライブラリが多く開発され、社内でも導入されることが増えました。実サービスで採用しているライブラリを惜しげも無く紹介しているのは、社内で最も“熱い”ディベロッパーと話題の本間の記事。

こちらの記事で紹介しているゲームは残念ながら終了してしまいましたが、当時採用していたライブラリの機能と用途を紹介しています。むやみにライブラリを導入するのではなく、きちんと検証してサービスに合ったものを選択する目もディベロッパーには求められます。日々新しいサービスが作られるサイバーエージェントでは、その都度現場の開発者が工夫を凝らして設計しています。

http://ameblo.jp/ca-1pixel/entry-11517573523.html
（5月1日公開）

【ディレクション】UI設計～ディレクションの質を高める7つのポイント

UI/UXディレクターの渡辺が執筆したこちらの記事は、いつもの1 pixelとは異なる視点から書かれています。

Amebaの多くのプロジェクトを横断して見てきた立場から、フェーズごとに大切なポイントを挙げています。UI設計やディレクションにおける心構え的な要素が強いですが、実はそれこそがUI/UXディレクターの「スキル」であり、それらをきちんと徹底できるかどうかが大きくプロダクト自体の質を左右するのだと思います。

http://ameblo.jp/ca-1pixel/entry-11522404855.html
（5月8日公開）

【デザイン】デザイン作業のスピードアップ

今年公開された記事の中で特に圧倒的なシェア数だったのが、デザイナー鬼石が執筆したこちらの記事。

デザインの基礎とも言える内容で、デザイナーでない方にもわかりやすい記事になっているのでは、と思います。まずは構成要素として何が必要かを考えることからはじめて、土台をしっかり作ること。それこそが結果的にスピードアップに繋がる、というアプローチです。ビギナーの方も、玄人の方もぜひご一読を。

http://ameblo.jp/ca-1pixel/entry-11544230753.html
（6月5日公開）

【開発】スマートフォンで動くリアルタイム3Dグラフィック

3D理論に興味のある方にオススメしたいのは、ゲーム部門の技術の中枢コア室で3Dアニメーションライブラリの開発を手がける新屋の記事。

openGLやDirectXと言ったリアルタイム3Dを扱う言語はあるものの、スマートフォンブラウザでは動作しません。ですが、3Dの理論さえ理解していれば、canvasで代用することが可能とのこと。「3次元アフィン変換」と言った3D理論の基礎にも触れながら、サンプルコードも交えて解説しています。jsdo.itのサンプルも是非見てみてください。

http://ameblo.jp/ca-1pixel/entry-11559614722.html
（7月10日公開）

【デザイン】運用効率を向上させるサイト構築の3つのポイント

今年はサイバーエージェント コーポレートサイトのリニューアルもありました。もちろん自社開発です。こちらはそれを担当した広報・IR室のディレクター兼デザイナー、山下の記事。

Amebaではコミュニティやゲームといった、ユーザー参加型の「Webサービス」を作ることが主で、いわゆるこういったタイプの「Webサイト」を作ることはあまりありませんが、会社の顔であるコーポレートサイトだからこそ、日々の運用はつきものです。CMSなどを使いながら、それを省コスト・高クオリティで運用するために工夫した点をまとめています。

http://ameblo.jp/ca-1pixel/entry-11578421411.html
（8月7日公開）

【デザイン】スマホデザインにおける、忘れがちな5つのルール

Amebaのコミュニティサービスを手がける部門では、デザイナーがプロジェクトの枠を超えてデザインの改善案を出し合う「デザイナーロワイヤル」というバトル形式の会議があり、毎回白熱した議論が繰り広げられています。それを先導しているのが、チーフクリエイティブディレクターのサトウ。

こちらの記事では、その「デザイナーロワイヤル」の様子と、スマホのデザインにおいて大事な5つのポイントについてご紹介しています。それぞれは当たり前のことだと思っていても、実際にデザインしてみるとうっかり見落としてしまうポイントも多いはず。

http://ameblo.jp/ca-1pixel/entry-11591358238.html
（8月21日公開）

【開発】近日公開予定 JSフレームワークBeez

先の紹介記事でもあった通り、どんなライブラリを選択するかはディベロッパーの腕にかかっているわけですが、それ自体を開発してしまう、という選択肢を選ぶプロジェクトも少なくありません。その1つとして紹介しているのが吉成の執筆した「Beez」の記事。

「Beez」は先日オープンソースとして公開したスマホの大規模開発向けフレームワークです。Backbone.jsやZeptoといったおなじみのライブラリを取りまとめて一貫性のあるAPIで提供しています。こちらの記事では「なぞってピグキッチン」を例にBeezの設計思想や利用方法について解説しています。

http://ameblo.jp/ca-1pixel/entry-11726798813.html
（12月18日公開）

まとめ

いかがでしたでしょうか。
なかなか10本に絞るのが難しく、紹介しきれなかった記事もありましたが、特に皆様からの反響の大きかった記事をピックアップさせて頂きました。

このまとめ記事を書くにあたって、去年のまとめ記事も読んだのですが、フロントエンド開発のテーマにおいては、以前にも増してコアな内容がより注目されているように感じました。デザインの面でも、設計や運用の工夫を模索するような記事が多く、短期間で数多くのスマホ向けサービスを作ってきた年だった、ということを表しているようにも思えます。
さて、2014年は一体どんな年になるでしょうか。

2011年夏からオープンした1 pixelですが、おかげさまで一度も定期更新を欠かすことなくここまで来れています。いつも応援してくださる読者の皆様ありがとうございます。

来年も有益な情報をお届けできるようがんばって参りますので、来年も宜しくお願い致します！

近日公開予定 JSフレームワークBeez

みなさま、こんにちは！
2013年度新卒入社の吉成祐人（@y_yoshinari）と申します。
現在私はなぞってピグキッチンというサービスのフロントエンドの実装を担当しています。

今回はなぞってピグキッチンの開発で用いている近日公開予定のJSフレームワークBeezについて書きたいと思います。
（※ 2013年12月19日追記：本日、無事にOSSとして公開されました！ → https://github.com/CyberAgent/beez）

なぞってピグキッチンは、パズルで材料を集めて料理作り、ピグ村の様々なお客さんに料理をふるまって自分だけの素敵なキッチンを作っていくゲームです。

大規模ゲーム制作時の課題

なぞってピグキッチンのような大規模ゲームでは、ページ遷移やサーバとクライアント間のデータ通信が頻繁に発生します。
しかし、その度にページをリロードしてしまうとユーザがストレスを感じるゲームになってしまいます。
また、小・中規模のサービスの場合、複数のJavaScriptファイルを一つのJavaScriptファイルにoptimizeするのが一般的ですが、大規模サービスを構築する上では、ユーザエクスペリエンス向上のためにも、 画面別、機能別にモジュールを分割し遅延ロードさせる仕組み(サブモジュール開発) が非常に重要となります。

課題に対するアプローチ

なぞってピグキッチンでは、Ajaxを用いることによって、ページをリロードさせずにゲームを遊ぶことができるようにしています。
また、画面別、機能別にモジュールを分割し遅延ロードさせるサブモジュール開発を行うために、社内フレームワークであるBeezを用いて開発を行っています。

Beez：https://github.com/CyberAgent/beez


Beezはまだ一般公開されていないフレームワークなのですが、近日オープンソースとして一般公開する予定なため、今回、Beezに関する記事を書かせていただきます。
（※ 2013年12月19日追記：本日、無事にOSSとして公開されました！）

Beezとは

Beezはスマートフォン開発をスピーディーに進めるための、中・大規模クライアントブラウザ向けのフレームワークです。
Beezでは、サブモジュール開発を前提にしています。
後述するBeez.ControllerやBeez.Routerをうまく使用することでシンプルで柔軟なサブモジュール開発が行えます。

Beezのライブラリ構成

Beez全体のライブラリ構成は下図のようになっています。


BeezでのWebアプリケーション開発には、Backbone、RequireJS、Underscore/Lo-Dash、Zepto/jQuery、Handlebars、Stylusを利用します。
なぞってピグキッチンではUnderscoreとZeptoを用いて実装を行っておりますが、以降はより一般的なUnderscoreとjQueryで説明をさせていただきます。

・Backbone
Backboneは中・大規模クライアントブラウザ向けのフレームワークです。
BeezはBackboneを拡張することによって作られています。
そのため、Beezは基本的にはBackboneに沿った書き方で記述をすることが出来ます。

また、BackboneがModel、View、RouterのMVRモデルであるのに対し、
BeezはBackboneのMVRモデルに更にControllerとManagerと加えたMVCR+Managerモデルの設計モデルで実現されています。
※ 今回、BeezではBackboneに新たにControllerを追加しているため、敢えてBackboneをMVCモデルではなくMVRモデルと表現しています。

・RequireJS
RequireJSはJavaScriptファイルの非同期読み込みとモジュール化を行うライブラリです。
RequireJSを用いることで、画面別、機能別にモジュールを分割し遅延ロードさせることができます。

・Underscore（Lo-Dash）
Underscoreは配列操作などの便利なユーティリティ関数をまとめたライブラリです。
これにより、Underscoreで提供されている便利メソッドを利用出来るようになります。

・jQuery（Zepto）
jQueryはDOM操作などをより簡単に記述できるようにするライブラリです。
これにより、jQueryを用いたDOMへのアクセスなどが行えるようになります。

・Handlebars
HandlebarsはJavaScript用のテンプレートエンジンです。
Handlebarsを用いることで、HTMLの記述を簡潔にすることができます。

・Stylus
StylusはCSSの拡張言語です。
Stylusを用いることで、CSSの記述を簡潔にすることができます。

Beezの設計モデル

次にBeezの設計モデルである、MVCR+Managerモデルに関して説明したいと思います。


・M（Model/Collection/Modic）：Document
Modelはデータ管理や状態管理、ビジネスロジック、サーバとの通信を担当します。
Beez.ModelはBackbone.Modelをextendしており、Backbone.Modelと同じ機能を有します。
Beez.CollectionはBackbone.Collectionをextendしており、Backbone.Collectionと同じ機能を有します。
また、Modicは通信通信機能がないModelです。クライアントデータのみでデータを管理する際に利用します。

・V（View）：Document
ViewはDOMイベント、Userイベントを管理し、DOMの更新を担当します。また、Modelイベントのハンドリングを行い、Modelへのイベントの伝達やModelからのデータの取得を担当します。
Beez.ViewはBackbone.Viewをextendしており、Backbone.Viewと同じ機能を有します。

・C（Controller）：Document
モジュールの玄関口を担当します。主にBeez.Routerからのイベントを起点にViewとModelの生成および初期化や、Viewの表示を行います。

・R（Router）：Document
Routerはhashchange/pushStateを管理し、Controller間の連携を実現します。
Beez.RouterはBackbone.Routerをextendしており、Backbone.Routerと同じ機能を有します。

・Manager（Manager）：Document
ManagerはBeez.Manager.Model、Beez.Manager.View、Beez.Manager.Controller、Beez.Nanager.Routerがシングルトンで存在し、各々がModel、View、Controller、Routerの管理を行い、生成、破棄、取得等々をすべて一元的に管理します。

Managerによる一元管理

上記の設計モデルの説明の中で、ManagerはModel、View、Controller、Routerの管理を行い、生成、破棄、取得等々をすべて一元的に管理すると説明しました。
ここでは、どのようにして一元管理を実現しているのかについて説明したいと思います。

Managerは内部で生成された各インスタンスをツリー構造で管理します。
また、ツリー構造上で保持するインスタンスにアクセスするためのメソッド群を提供します。
ManagerはModel、View、Controller、Router毎に存在し、Managerの自動remove等の恩恵を受けるために、各インスタンスの生成は対応するManagerを通して行うことが必須です。
(ツリー構造管理は、View、Modelのみです。他のManagerは、フラットで管理されています。)

それではサンプルコードで見ていきたいと思います。

var viewManager = beez.manager.view;

// RootとなるViewのインスタンス作成
var RootView = beez.View.extend('RootView', {
    vidx : '@'
});

// Viewのインスタンス作成(以下他のViewも同じ)
var ParentBillView = beez.View.extend('ParentBillView', {
    vidx    : 'bill',
    tagName : 'div',
    events  : { },
    initialize : function initialize() { },
    beforeOnce : function beforeOnce() { },
    before : function before() { },
    render : function render() { },
    after : function after() { },
    afterOnce : function afterOnce() { }
});

var ChildAndyView = beez.View.extend('ChildAndyView', {
    vidx    : 'andy',
    tagName : 'div',
    events  : { },
    initialize : function initialize() { },
    beforeOnce : function beforeOnce() { },
    before : function before() { },
    render : function render() { },
    after : function after() { },
    afterOnce : function afterOnce() { }
});

// ParentTriciaView, ChildJordanView, ChildMarieView, ChildRobertViewは省略

// 'manager'のルートを生成
viewManager.root(RootView);

// ルートの子としてViewを生成
viewManager.create('/@', ParentBillView);
viewManager.create('/@', ParentTriciaView);

// billの子としてViewを生成
viewManager.create('/@/bill', ChildAndyView);
viewManager.create('/@/bill', ChildJordanView);

// triciaの子としてViewを生成
viewManager.create('/@/tricia', ChildMarieView);
viewManager.create('/@/tricia', ChildRobertView);

とした場合、Managerは、

Root - Bill --- Andy
     |       └ Jordan
     |
    └ Tricia - Marie
             └ Robert

というツリー構造で各インスタンスを管理します。この状態で、

// billを破棄
beez.manager.view.remove('/@/bill');

を行うと、「Bill」とその子要素である「Andy」と「Jordan」のremove()メソッドが順に実行されます。また、それらインスタンスのイベントもすべて開放されます。
結果として、Managerが管理するツリー構造は

Root - Tricia - Marie
             └ Robert

の様に変化します。

BeezのModule構成

BeezはMVCのかたまりで１モジュールを形成し、それぞれがRouterを経由して連携する構成になっています。
また、モジュール別にビルドし、それぞれのモジュールが最初に必要になった際にロードされる、遅延ロードの仕組みもサポートしています。
遅延ロードはRequireJSを用いて実現しています。

なぞってピグキッチンでの実例

最後に、なぞってピグキッチンでの実例を紹介します。

・アクセス
なぞってピグキッチンにアクセスするとまず、常に必要になる機能のViewやModelが生成されます。
各々Managerを通して生成を行うことで、ViewとModelをツリー構造で管理することができます。
生成後にManagerが管理するツリー構造は下記のようになります。

Root - CoreRoot - Header
               └ Footer
                   ：

（主にここではViewのツリー構造を追っていきますが、Modelのツリー構造も同様に生成されます）

生成が終わったらマイページにリダイレクトします。

・アクセス → マイページ


なぞってピグキッチンでは、hashを用いて現在のモジュールを管理しているため、マイページに遷移する際にはURLの後ろに#mypageが付きます。

http://piggpuzzle.amebagames.com/#mypage

Routerがhashchangeを監視しており、hashchangeの内容を見て適切なコントローラーを呼び出します。
ここではmypageControllerを呼び出します。

mypageControllerは必要なViewとModelの生成および初期化を行い、Viewの表示を行います。
ここでは、アバターやデコレーションやショーケースなどがManagerを通して生成されます。
その結果、Managerが管理するツリー構造は下記のようになります。

Root - CoreRoot --- Header
     |           └ Footer
     |               ：
     |
    └ MypageRoot - Avatar
                 └ Deco
                 └ Showcase
                     ：

・マイページ → エリア選択画面
次にパズルボタンを押してエリア選択画面ページに飛びます。


Viewがボタンのタップイベントを検知し、Routerがhashを#areaに切り替えます。

http://piggpuzzle.amebagames.com/#area

それによりhashchangeが走り、areaControllerが呼び出されます。

エリアモジュールには、「エリア選択ページ」と「ステージ選択ページ」と「ステージ詳細ページ」が存在します。


areaControllerはViewとModel生成のタイミングで3つのページのViewとModelを全て生成します。
Managerが管理するツリー構造は下記のようになります。

Root - CoreRoot --- Header
     |           └ Footer
     |               ：
     |
    └ MypageRoot - Avatar
     |           └ Deco
     |           └ Showcase
     |               ：
     |
    └ AreaRoot --- AreaSelect
                 └ StageSelect
                 └ StageDetail

エリアページはマイページの上のレイヤーに重なって表示されるため、マイページのモジュールを破棄せずに残しています。

・エリア選択画面 → マイページ
エリア選択画面を閉じてマイページに遷移した場合を考えます。


Viewがボタンのタップイベントを検知し、Routerがhashを#mypageに切り替えます。

http://piggpuzzle.amebagames.com/#mypage

このとき、Managerのremove()メソッドによって必要の無いエリアモジュールは破棄されてツリー構造からも取り除かれます。

beez.manager.view.remove('/@/areaRoot');

その結果、ツリー構造はエリアページに遷移する前の下記の状態になり、無駄なモジュールを持っていない状態になります。

Root - CoreRoot --- Header
     |           └ Footer
     |               ：
     |
    └ MypageRoot - Avatar
                 └ Deco
                 └ Showcase
                     ：

・まとめ
以上のように、Beezを用いて適切なタイミングで適切なモジュールを読み込んだり破棄したりすることで、無駄なモジュールを持っていたり、無駄なイベントを監視していたり、無駄なプロパティを保持したままだったりする問題が起こらなくなります。

さいごに

拙い文章でしたが最後までお付き合いいただきありがとうございました。
BeezはDocumentがしっかりしており、体系的にBeezを学ぶことが出来るチュートリアルなども用意されているので、オープンソースとして一般公開された際には是非ともそちらを見ていただければと思います。
公開後にはこちらの記事内の各々の項目にもDocumentへのリンクを追加したいと思います。
（※ 2013年12月19日追記：もろもろリンクを追加させていただきました）
・Beez
・Document
・チュートリアル

また、なぞってピグキッチンはブラウザゲームでどこまでできるのかに全力で挑戦したサービスです。是非とも１度触ってみてください。


ありがとうございました！

Frontrend x SaCSS Special4 レポート

フロントエンドデベロッパの谷です。

今回は弊社でおこなっているフロントエンドエンジニア向け勉強会、Frontrendの札幌版のレポートをします。イ ベントは札幌を中心に勉強会を催しているSaCSSの協力で、SaCSS Special4 Frontrend in Sapporoを開催しました。

関係者を含め100名近くの方にご参加いただき、皆さん熱心に講演内容に耳を傾けていました。

セッション振り返り

イベントではHTML/CSS/JavaScriptのコーディングのベストプラクティス、ターミナルの利用方法を取り上げ、各部門のフロントエンドデベロッパが登壇しました。当日のイベントについてのつぶやきはこちらでまとめています。

現場で使える！CSS3デザインレシピ （原 一成）

先日CSS3逆引きデザインレシピを執筆した原のセッションではCSS3をデザイン表現を中心にしたセッションでした。

プロジェクトにおけるデザイン/デベロッパ（フロントエンドデベロッパ）/エンジニアの役割が曖昧になってきている昨今、フロントエンドデベロッパの役割は広くなってきています。

その中でCSSが果たす役割と、また協業する上で必要なガイドライン、そして本題であるCSS3を使ったデザイン表現について豊富なサンプルとともに話をしました。

Brush up your Coding 2013 Winter （泉水 翔吾）

フロントエンドとバックエンド両方の経験のある泉水からはHTML/CSS/JavaScriptのコードの品質を保つためのプラクティスやツールの紹介をおこないました。

原のセッションで触れたフロントエンドデベロッパはやるべきことの多い中で、いかにその品質を保つかというところに突っ込んだセッションです。

ボリュームのあるセッションで、参加者の皆さんは集中して内容に耳を傾けていました。

Hello jQuery （水野 隼登）

水野のセッションはjQueryの基本の振り返りから、JavaScriptのベストプラクティスやパターンに触れた内容でした。

多くのプロジェクトで採用されているjQueryは、多くのブログなどで紹介されているコードコピー＆ペーストするだけでも簡単な実装はできます。

そうではなく、jQueryできることを把握して、自分でjQuery/JavaScriptを書けるようになるための入門セッションであり、パターンなどにもふれた応用セッションです。セッションのスライドも好評で、わかりやすい内容と好評でした。

Kuroi Gamenって何で使うの？ （平木 聡）

最後の平木からは、現在のフロントエンド開発では欠かせなくなってきたターミナルなどのCUI、もとい黒い画面についてのセッションです。

CSSプリプロセッサやGrunt.jsのようなツールの登場によって、デザイナー層でも扱う機会が増えています。セッションでは基本的なUNIXのコマンドの紹介から、YeomanやBowerなどのツールを紹介しました。

どうしても敬遠したくなる黒い画面ですが、基本的かつ便利なコマンドの説明もあり、参加者の多くが黒い画面を使ってみよう、と言わせたセッションでした。

参加した皆さまありがとうございました

セッション後の質疑応答タイムや、その後の懇親会などでも積極的に登壇者へと質問にいったりと、非常に熱心で温かい参加者の皆さんでした。
また機会があれば、是非とも参加してもらえると嬉しいです。

余談ですが、また当日会場にはBon Bon Buttonなどで有名なSimuraiさんが来てくれてました！
これにはFrontrendメンバーも興奮しました。

次回は2014年1月25日に福岡で！

来年1月25日（土）はFrontrend in Fukuokaということで福岡で開催します！

詳細や申し込みは近日公開です。最新情報についてはFrontrendのサイトまたはTwitterをフォローしてもらえればとおもいます。

   

「dotFes2013京都」出展レポート[開発編]

こんにちは、KIRAKIRAKINGYOディベロップチーム（オオシモ、カワバタ、鈴木、バンバ）です。

今回は、KIRAKIRAKINGYOの開発の裏側をお伝えしたいと思います。（デザイン編はこちら）

写真は、京都行きの新幹線での最後の追い込み風景です。

仕組み

まず、デバイスとFLASHとがリアルタイムに通信する必要があるので、nodejsでサーバーを構築しました。wsというモジュールを用いてWebSocket通信をしています。（nodejsについてはこちら：フロントエンドエンジニアにおけるNode.jsのススメ）また、サーバーにはプレイヤーのスコア／ランキング情報をデータベースに保持する役割も持たせました。

図は、デバイス・FLASH間のデータのやりとりのフローを表しています。

1. デバイスからポイの回転／位置情報を、リアルタイムでFLASHにサーバーを介して送ります。
2. FLASHは受け取ったデバイス情報を元に当たり判定を行います。そして、釣った金魚／残機の情報をリアルタイムでサーバーを介してデバイスに送ります。
3. 最後にプレイヤーのスコアをデータベースに保存し、ランキングを表示します。

実際に使用した機器は以下のようになっています：

• デバイス：iPhone 5C
• サーバー：MacBook Air
• ディスプレイ：テレビ（MacBook Proの画面をミラーリング）

デバイスの裏側

センシング

当初はフルネイティブ（Objective-C）での実装を予定していました。しかし今回用いたiPhone 5C（iOS4.2以上）であると、JavaScriptでデバイスのセンサー情報を取得できることを知り、JavaScriptでの開発にシフトしました。

devicemotion

デバイスの重力加速度の値を用いてポイを移動させています。さらに、重力加速度の変位からポイをすくった動作を判定しています。

デモ（iOS4.2以上、Android3.0以上で動作します）

deviceorientation

デバイスの回転情報を電子コンパスから取得します

デモ（iOS4.2以上、Android3.0以上で動作します）

個人的に勉強のためにObjective-Cを使いたかったので、webviewをアプリでラップしています。アプリにすることでフルスクリーンに出来たり、スリープモードにならないように出来たり役に立ちました。

画面遷移

画面の遷移／DOM操作にはchikuwa.js（詳しくは：スマートフォン向けJavaScriptライブラリchikuwa.js）を用いています。

画面の構成は以下になっています

#top

プレイヤーネームを入れる画面です。

#play

プレイ画面です。釣った魚が画面下部に表示されます。

#score

スコアを表示します。

#ranking

ランキングを表示します。

#maintenence（隠し）

デバイスの角度の取得に誤差が生じるため、メンテナンスモードというのを密かに搭載しています。メンテナンスモードでは、対象のポイの角度を外部から変更することが出来ます。また、たまにwebviewが落ちてしまう現象がありました。（おそらく通信に耐えれなくなって落ちてしまう）そのため、途中で落ちたポイを消すモードもメンテナンスモードに含まれています。

iPhoneで対象物との距離は取れるのか？

今回デバイスの傾きによってポイを動かす方法にしましたが、デバイスとディスプレイとの距離を測る方法も調査しました。

StickNFind Stickers

StickNFind Stickersは、Bluetoothを内蔵したボタン型の端末です。SDKも公開されており、デバイスとのBluetothの強度によって距離を出すことは出来ますが。誤差や距離を計算するまでにラグがあるために採用になりませんでした。

慣性航法

飛行機やミサイルなどにも採用されている方法で、デバイスがどのくらい動いたかを加速度を２回積分して算出する方法です。これも誤差が大きく採用にはなりませんでした。

本来は、腕の動きに合わせてポイが動いたほうがより金魚すくいっぽくなったと思います。次回チャンスがあるとすれば画像認識を使って腕の動きを検出することに挑戦してみたいと思います。

FLASHの裏側

水槽の中を再現するには？

金魚すくいを実現するために、なんといってもあの「金魚が群れで動く様子」をちゃんと再現する必要があります。金魚が水槽の中を時には群れたり、時にはランダムで動いたりする様を見て、お祭りの時にワクワクしたものです。そのワクワクをゲームでも再現したい！というのがこのゲームの出発点でもあります。群れを再現するためには、魚の動きをランダムで動かすだけではだめで、かと言ってかたまりで動かしてもだめです。「それぞれの魚が個別に動いている」かつ「群れとして動いてる」状態を再現しなければなりません。

今回、その魚の群れの動きの再現のためにBoidアルゴリズムを使用しました。Boidアルゴリズムとは、「結合」「整列」「分離」3つのルールを設けるだけで鳥の群集をシミュレーションできるという理論です。ゲームのパーティクルの動きなんかはこういった群集シミュレーションの理論が用いられて作られている事が多く、奥が深い分野なので、興味のある方は調べてみてください。

Boidアルゴリズム３つのルール

「結合」：群れの中心に向かっていく

魚が多く集まっている方に向かっていくルールです

「整列」：同じ方向を向いて動く

違う方向を向いていれば、同じ方向を向いて動いていくルールです。

「分離」：近づき過ぎたら離れていく

衝突を避けるように離れていくルールです。

以上の3つのシンプルなルールだけで魚の群れのような動きを再現することができます。 

魚それぞれが互いに影響し合い、上記のルールに沿って毎フレーム動いていきます。

魚は全部で6種類あるんですが、それぞれの種類ごとに上記３つのルールのパラメータに変化を付けています。

「小さい魚は群れやすく、大きい魚は群れにくい」といったパラメータの調整を入れて、魚の群れ感を出しています。

リアルな金魚すくいでも、ポイで金魚をすくおうとした時、ポイから金魚が逃げていって捕まえられなかったことあると思います。

ポイから魚が逃げていく処理も入れて、リアルな金魚すくい感を出しています。

完成した魚の群れの動きの動画はこちら：

今回は、ブラウザで動かす必要がないので、アプリケーションの構成はairアプリにパッケージングして使用しました。

デバイスとユーザビリティ

スマホの傾きのデータを受け取って、その値を元にポイを上下左右に動かしています。

上下左右の動きだけでなく、ポイの回転も考慮に入れないといけません。

ユーザーがどの位置に立ってもゲームをプレイできるように、ポイが常にユーザーの方に向く処理が必要です。

スマホで電子コンパス（方位磁針）のデータを受け取ることができるので、今スマホがどの方角を向いているのかを取得できます。

そのスマホのデジタルコンパスの値を受け取って、その値を元にポイを回転させて、ポイが常にユーザーの方に向くようにしてユーザビリティの向上に努めました。

アニメーション

ポイのアクション（魚をすくう、ミスして破れる）と水面に波紋が広がるエフェクトをタイムラインアニメーションで作成しました。

他にも細かい小さなアニメーションを色々作成したのですが、３つにしぼって紹介します。

こういったアニメーションがタイムラインで効率的かつ表現力豊かに編集できるのがFlashの醍醐味です。

ポイのアクション

   

ミスとスコアのテキストアニメーション

魚をすくうのに失敗した時、成功した時のアニメーションです。

水面の波紋アニメーション

魚をすくった時や魚が反転した時に出るようにしています。

出来なかったこと

今回、チャレンジの一つとして、stage3Dの使用を当初考えていたんですが、2Dゲームということもあり必要性もなく（自分自身の余裕もなく）断念してしまいました。stage3DとはFlash Player 11で新しく追加された機能で、Flashにおける3Dレンダリングの速度を向上させる機能です。GPUに直接アクセスしてグラフィック処理を行うので、通常の描画速度よりもはるかに速くレンダリングが可能です。3D描画だけでなく、画像処理も高速でできるので、水面がゆらゆら揺れるエフェクトなどをstage3Dで実装してリッチな表現に挑戦したかったです。stage3Dについて、詳しくはこちらの記事を御覧ください。

役割分担

Flashの開発は2名で分担して行いました。主な作業は次の３つで、これらを分担して行いました。

ゲームのフレームワークの大枠を作る

全体の画面遷移部分と通信やリソース(画像など)の読み込みのタイミングを加味して、まずは全体の大枠のフレームワークを設計します。
弊社のサービスであるアメーバピグでも使用している、各モジュールがMVCを持ち更にそれらを取りまとめるメインのMVCがあるというフレームワークを参考にして作っています。そうすることでモジュール単位で開発ができるようなるので、各モジュールのみでのテストや開発の分担がしやすくなります。
今回はトップ画面とゲーム画面と通信を別々のモジュールで作成しています。

ゲームロジック

ゲームの内容を決める重要な部分なので、構造だけでなくゲームとしての演出と操作感などを加味した設計にしなければなりません。

• 魚の動き
• ポイの操作感
• すくう時の当たり判定

など、実装するべきところはゲームの根幹に関わる所なので重要です。

モックを作る→他の人にプレイしてもらい、フィードバックをもらう→プログラムに反映

このサイクルをどんどんやっていくことでクオリティの高いゲームができあがります。

テストプレイ中にその場で、「魚の動きもっと速くできない？」「魚の数を増やしたい」といった要望にも即座に対応できるように、パラメータはリアルタイムに操作できるようにスライダを作成して、その場で魚の動きなどを微調整できるようにしておきました。こういった現場での微調整はインスタレーションにはつきものなので、あらゆる場面を想定した設計がゲームプログラマには必要です。

まとめ

普段はWebサービスを運用／開発しているので、実際にシステムを触って楽しんでいる姿を見ることが出来る貴重な機会となりました。そのような姿を見ることは、とても嬉しいし、開発へのモチベーションを維持することにつながると感じました。

そして事業的な縛りなしに、純粋にオモシロイもの／新しい技術を追求する姿勢は、普段の業務にも取り入れていきたいと思います。

「dotFes2013京都」出展レポート[デザイン編]

こんにちは。アメーバ事業本部 デザイナーのパジェロです。
2013年11月17日に行われたdotFes2013京都についてのレポートをお届けします。

dotFesとは『Web Designing』と『クスール』が運営し、Webクリエイターのためのトークセッションやタイブパフォーマンス、インスタレーションに参加できるコミュニケーションイベントです。
弊社では2010年の開催以降、毎年有志を募ってインスタレーションを出展しております。 過去のレポートはコチラ。

今回出展した作品はこちらです。

KIRAKIRAKINGYOとは

KIRAKIRAKINGYOはスマートフォン用アプリをダウンロードし、アプリを立ち上げると、自身のスマートフォンが金魚すくいのポイになりブースに設置された水槽の金魚をすくって、得点を競うゲームです。Ameba事業部に所属する2012年・13年新卒入社のクリエイター・エンジニアを中心とする有志メンバーが、通常業務が終了した後に集まり、自主研究のような形で1か月ほどかけて制作しました。

今回は、このKIRAKIRAKINGYOのデザインが完成するまでの過程をお話ししたいと思います。

モチーフのアイデア出し

まずは出展作品の題材を何にするか、アイデア出しのところから始まりました。

「普段の業務では用いない技術や表現にチャレンジしよう」というスローガンのもと、今話題のleapmotionや脳波を使ったインスタレーションなどの提案がなされました。こうした様々な意見が交わされる中で、KIRAKIRAKINGYOのアイデアは固まっていきました。

世界観のアイデア出し

金魚すくいというモチーフが決まってから、作品全体をどういう世界観にしていくかという検証を始めました。

まず金魚の形態について、いくつもの表現を試し、決まった金魚のデザインに対して様々な背景をあてはめ、それらを見比べて最適な表現になるよう模索しました。

金魚が泳ぐ水面のアニメーション表現などは、デザイナーとディベロッパーの間でお互いに提案しあい、案を絞っていきました。

モニター側のデザイン決定

モニター側のおおまかなデザインが決まり、ここから金魚すくいというゲームとしての見え方を調整します。
今回、金魚の点数は大きさに応じて５段階のレベルがあったので、５つのサイズの金魚を用意し、それぞれのレベルに応じてカラバリも増やしました。

iPhone側のUIデザイン

モニター側のデザインが決まってから、プレイヤーが操作するコントローラであるiPhoneのUIデザインに取り掛かりました。

まず、必要な画面遷移を想定してワイヤーを引いていきます。

出来上がったワイヤーをiPhoneの画面に映し、実際にモニターの前に立ってプレイヤーの行動、思考をイメージしながら、改善を加えていきました。

モニター側に合わせて、背景や全体の雰囲気を統一。文字周りやレイアウトでは、Amebaのサービスであまり実践する機会のない、線が細く余白を活かすデザインに挑戦しました。

ひと通り完成したあとも、時間の許す限り細部のブラッシュアップに努めました。

また、モニター側の「ポイ」周りのUIについてはモニター担当のデザイナー、UI担当のデザイナー、そしてアニメーション担当のディベロッパーが連携し、最良のデザインを模索していきました。

什器、屋台のデザイン

会場設営の状況について、前回まではプロジェクターで壁面に投影するスタイルだったので、現場で任意に画面の大きさを調整できたのですが、今回はTVモニターのため大きさが限定されてしまいます。
用意されている会場の面積に見合う空間的ボリュームや演出も踏まえてブースの制作をすることにしました。

気をつけたポイントは、
・遠くから見たときに縁日の屋台を想起するような構造
・ゲーム内のビジュアルを反映させる
・組み立て～分解～配送～再組み立てのできるもの
・テスト期間がほぼ無いので失敗の無い素材選びと発注計画（重要）
です。

▲当初制作したイメージラフ

当初は枠なども自作する予定でしたが構造上の強度と制作期間を考え今回は既成のアウトドア用品で代用することに。布の模様に関してはオリジナルプリントしました。

モニターまわりはテレビ枠の幅が上下違うバッファを読みつつセンターになるよう枠を組み、厚みがなるべく出ない薄めのアクリルを天板としてかぶせるのですが、当日、天板によりかかるユーザーなどを想定して強度的に問題の無い構造を考え、図面を引くのはなかなかイマジネーションのいる作業でした。

▲完成したモニターまわり

当日の設営は予想通りバタバタでしたが、メンバー全員の協力で無事搬入時間内に完成させることが出来ました。

展示風景

苦労の甲斐もあって当日は大盛況！200人以上の来場者に遊んでいただきました。

おわりに

KIRAKIRAKINGYOを通して、一般のお客様だけではなくweb業界の方々、インスタレーションの専門家の方々とふれあう機会もあり技術者として貴重な経験をすることができました。今後もこういった、通常業務以外の実験的な活動を続けていきたいと思います！

次回は、ディベロッパーサイドから見たKIRAKIRAKINGYO制作レポートをお送りします。お楽しみに！

グルメイヤーにおける一点集中型リニューアル

はじめまして、グルメイヤーでデザイン担当をしている新卒1年目の茂木 栞です。

今回は10月に大幅にコンセプト変更をしてリニューアルしたグルメイヤーの改修の仕方を説明させて頂きたいと思います。

グルメイヤーとは

「グルメイヤー」とは、外食したお店をチェックインで記録し、「いいね！」や「コメント」で盛り上がるグルメサービスです。
FacebookやTwitterの友達と繋がることができ、友達の食べたものをフィードで見ることも出来ます。


それではリニューアルに至るまでの過程を説明させていただきます。

コンセプトの変更

配属されていた当初はコンセプトが既に決まっていたのですが、リニューアルの前にあったチェックインをしてメダルを取り合う機能等がなくなり、「お気に入りのお店の常連になってチェックイン数を競う」というコンセプトから、「日々の外食を記録して友達と盛り上がるサービス」へと変更することになりました。

機能面での変更

リニューアルリリース時点での目的は、新コンセプトにそってこれから運用していくための土台作り。つまり「機能を一旦、極々シンプルに」しました。
下記の通り、機能が大分削られています。

無くなった機能
・メイヤーを競ってメダルを勝ち取る
・オススメのお店を「グルメカードデッキ」として登録できる
・ジャンルやエリアで嗜好分析をして図にしてくれるグルメ分析機能

追加された機能
・フォロー/フォロワー機能

次に、シンプルにすることを意識したデザインの説明をしたいと思います。

デザイン

極々シンプルにすると言いつつも、アプリとしてしっかり楽しんでもらえる洗練されたものを出さなければならないので半端なものは作れません。
ということは、存在する機能をどれほど際立たせるかが重要になるということになります。
改修された画面のうち、３つを例にして説明させて頂きたいと思います。

１、チェックイン画面
こちらはフローからの改修でした。
フォースクエアのように場所を検索→写真を選ぶ・コメント入力→投稿の順から、お店/写真/コメントが並列して埋められる画面へ。
チームで話し合い、どこを記入するかのブロックが分かりやすい画面になるよう仕上げました。

　→　

このフロー変更は「お店からだと後からチェックインする時に思い出せないこともあるので、カメラロールで写真を選んでからお店を選びたい」というユーザーの声を参考にさせていただきました。チェックインはその場でしなければならないというイメージが強いですが、グルメイヤーは「外食を記録するアプリ」としても多く使われていたことからこの画面に反映されました。

２、フォローしている人のフィード
フォローしているユーザーはお気に入りのユーザーor友達というフィードなので、ユーザーの情報を第一に、次いで料理写真を極力大きく見せました。

　
　
情報の順は下記のようになっています。
　ー①ユーザー
　ー②ユーザーに紐づくコメント
　ー③料理写真
　ー④お店/いいね数や人からのコメント
ここでも必要最低限の情報のみをだしてシンプルに。いいねボタンを大きく設置し、押しやすさにもこだわりました。

３、マイグルメ
グルメイヤーでは自分のページ（マイページ）のことをマイグルメと呼んでいます。
ここではユーザーのチェックイン一覧・フォロー/フォロワー・ブックマークしたお店を見ることができます。
このページで一番重要なログ要素であるチェックイン一覧に注目してみましょう。

チェックインの一覧を画像のみ/フィード形式/月別リストの３つの形式で見ることが出来ます。
フィード形式は上記したフォローフィードと同じ形式なので割愛し、画像とリストの２つの形式を紹介します。

　

表示している内容は同じですが、自分の好みの形式で見られるようにデザインを改修しました。この画面を実装したところ、定着率がアップしました。

これから

主な画面のみの説明になりましたが、コンセプトが変更する大きなリニューアルでありながらも、シンプルに一点集中したグルメイヤーの改修がご参考になれば幸いです。

土台作りが終わった今、「骨に肉付けをする時期」として機能追加を進めています。
リニューアル前の機能を改善して再度復活させたり、１からの新機能を追加したりと、今後もチームで強力して良いサービスにしていきますので、よろしくお願いいたします！

↓食べることが好きな方はぜひ、日々の外食を記録してみてください♪↓

「Artboard」今年も始まります！

みなさん、こんにちは。広報IR室の渡辺です。
11月もあとちょっとですが、12月になると一気に年末モードに入り、2015年卒業予定の学生のみなさんは就職活動が本番になりますね。

サイバーエージェントでも先週新卒採用サイト「CHALLENGE100」がオープンし、12月に向けて新卒採用の準備が整ってきました。もう見ていただいた人はいますでしょうか！？

■2015新卒採用サイト「CHALLENGE100」


社長、役員、エンジニア、クリエイター、営業、プロデューサーなど、100人の社員が登場し、多くの学生がサイバーに入ったらどんなことができるのか？を想像しやすいボリュームたっぷりのコンテンツになっています。まだ見ていないという方は是非一度ご覧ください。

ちょっと前置きが長くなってしまいましたが、本日はその中でもクリエイター向けの採用特別企画「Artboard」をご紹介します。

■Artboard


昨年から実施している企画なので、覚えているという方もいらっしゃるかもしれませんが、Artboardでは自身の作品をアップして、「いいね！」を沢山もらった方上位10名に、「2015年度新卒採用における書類選考をパスできる特別選考パス」の特典が授与される企画です。

「サイバーエージェントに入社したい。」
「自分の作品がどれくらいの人にいいね！してもらえるのか試してみたい。」
「他の学生がどんな作品を作ってるのか見てみたい。」
など動機は様々。気軽に応募してただければと思います。

今年はカテゴリー毎にランキングが発表されるので、5カテゴリ合計50名の方が対象になります。
・Webサイト
・アプリ
・グラフィック
・イラスト
・その他
の5カテゴリです。
得意なカテゴリを見つけてどんどん応募してください！

また、新たに公式のFacebookページも新設しました。
公式ページではアップされた作品をどんどん紹介していきますので、公式ページも是非いいね！しておいてくださいね。

■公式Facebookページ


現在プレオープン期間となり、学生の方の作品のアップのみ可能となっておりますが、来週12月2日（月）よりグランドオープンとなり、一般の方もいいね！できるようになります。

早めにアップすると見てもらう期間が長くなるので、グランドオープン前にアップしておくのがお勧めです！
みなさんからの作品をお待ちしております。

ChatWorkのデスクトップアプリ化！Growl通知まで！

こんにちは！
2013年度新卒入社の佐伯航平と申します。
現在私はギャングソウルというチームでフロントエンドの実装を担当しています。
日々の学びを自身のサイト、「kotazi.com」にて綴ってますので、よかったらこちらも訪れてみてください。

さて、私達のチームでは開発のチャットやタスク管理のツールとして「ChatWork」を利用しています。便利なサービスですが、時々メッセージに気づかず数時間放置してしまうとすごく申し訳ない気持ちになってしまいますね。

今回はそんな自分と同じ悩みを抱える皆様のためにChatWorkのデスクトップアプリ化とGrowl通知の実装を試みたので紹介したいと思います。

JavaScriptを使ってこのような通知が出せるようになります。是非読んでみてくださいね。

関連するアプリケーションの紹介

今回ChatWorkのデスクトップアプリ化を図るにあたり、必要なものを紹介します。

▼ ChatWork
クラウド型ビジネスチャットツールの「ChatWork」です。
普段のチャットはもちろんのこと、チームで共有すべきタスクやファイルを管理するツールとして、現場での開発にとても適したサービスではないかと私は思っています。

▼ Fluid
こちらが今回の肝となる「Fluid」です。
WebアプリケーションをMacのデスクトップアプリに変身させてくれる素敵なアプリです。
今回は具体的なサンプルとしてChatWorkのデスクトップアプリ化を行っていきますが、基本的にはどんなWebサービスもかかってこいだと思うので、 個人的には是非是非一押しのアプリとなっております。

▼ Growl
Macの通知といえば「Growl」一択ですね。
Growl一つで様々なアプリケーションからの通知を管理することができます。

Fluidを使ってデスクトップアプリ化をしてみる

以前、自分のブログにも書かせていただいたのですが、Fluidを用いたWebアプリのデスクトップアプリ化を行います。

Fulidを起動すると下記画像のようなウィンドウが表示されます。

URL: アプリケーションURL
Name: アプリケーションの名前
Location: アプリケーションの場所
Icon: アプリケーションの画像

といった風に作成するアプリケーションの情報を入力してみてください。
画像ではChatWork用のアプリを作成しています。
ちなみにChatWorkのアイコンはこちらから公式のものを入手することができます。



試しに起動してみましょう。

専用のブラウザが立ち上がり、Chatworkが起動します。
Chromeなどで表示しておくと、タブの切替がいちいち面倒だったり誤って消してしまうこともあるので、毎日使うものや、常時起動されるようなサービスはどんどんFluid化してみてもいいのではと思います。



ちなみにFluid化しておくことで、Alfredから呼び出すこともできるようになります。

Growl通知ができるように、拡張してみる

さて、先ほど作成したChatWorkのデスクトップアプリにGrowlの通知機能をつけていきます。

ただ、残念なお知らせですがこちらの拡張にはFluidの有料ライセンスが必要になります。
デスクトップアプリ化までは無料でできるので、使ってみて良さそうでしたらこちらも試してみてください。

▼ AppControllerの宣言
AppControllerを作ります。今回の実装ではChatWorkの部屋のリストの状態を監視し、変化があればGrowl通知を出す。というような仕組みにしました。

/**
 * コントローラ
 * @constructor
 */
var AppController = function() {
    this.chatRoomCollection = new ChatRoomCollection();
};

/**
 * 初期化処理
 */
AppController.prototype.init = function () {
    var roomListItemsEl = document.getElementById('_roomListItems'),
        roomListElsArr = roomListItemsEl.childNodes;

    //部屋の数だけモデルを生成する
    for (var i = 0; i  ＜ roomListElsArr.length; i++){
        var chatRoomModel = new ChatRoomModel(roomListElsArr[i]);
        this.chatRoomCollection.push(chatRoomModel);

        if (chatRoomModel.isIncompletion) {
            mediator.publish('new_message', chatRoomModel);
        }
    }

    //監視を始める
    this.observeRoomListItems();
};

/**
 * 監視する
 */
AppController.prototype.observeRoomListItems = function() {
    var self = this;
    setTimeout(function() {
        self.createRoomModel();
        self.observeRoomListItems();
    }, 3000);
};

/**
 * リストからModelを生成する
 */
AppController.prototype.createRoomModel = function() {
    var roomListItemsEl = document.getElementById('_roomListItems'),
        roomListElsArr = roomListItemsEl.childNodes;

    for (var i = 0; i < roomListElsArr.length; i++){
        var chatRoomModel = new ChatRoomModel(roomListElsArr[i]);
        this.chatRoomCollection.checkUpdate(chatRoomModel);
    }
};

/**
 * Growlを表示する
 * @param obj
 */
AppController.prototype.showGrowl = function(obj) {
    window.fluid.showGrowlNotification({
        title: obj.roomName,
        description: "New: " + obj.unreadNum + "　To: " + obj.mentionNum + "　Task: " + obj.taskNum,
        priority: 1,
        sticky: false,
        identifier: obj.roomId,
        onclick: null,
        icon: null // or URL string
    })
};

ちなみにFluidにはwindow.fluid.showGrowlNotification()なる関数が用意されていて、こちらを利用することで簡単にGrowlを呼び出すことができます。

window.fluid.showGrowlNotification({
    title: "title", 
    description: "description", 
    priority: 1, 
    sticky: false,
    identifier: "foo",
    onclick: callbackFunc,
    icon: imgEl // or URL string
})

▼ ModelとCollectionを用意する
DOMの変更を検知するためには、新しいものと古いものを比較する必要があります。Modelに以下のようなパラメータを持たせて最新の部屋のリストをCollection内で管理するようにしました。

/**
 * ChatRoomModel
 * チャット部屋のモデル
 * @param el
 * @constructor
 */
var ChatRoomModel = function (el) {
    this.roomId = null;           //チャット部屋のユニークなID
    this.roomName = "";           //チャット部屋の名前
    this.roomImgURL = "";         //チャット部屋のアイコンのURL
    this.isIncompletion = false;  //未読 or 自分宛 or タスク があるか
    this.unreadNum = 0;           //未読メッセージ数
    this.mentionNum = 0;          //自分宛メッセージ数
    this.taskNum = 0;             //タスク数

    if (el) {
        this.setData(el);
    }
};

▼ メディエータの実装
AppControllerとModelを分けるために簡易的なメディエータを入れています。
'new_message'というイベントが発行された時にGrowlの通知を呼び出すようにしております。

/**
 * メディエータ
 * @constructor
 */
var Mediator = function() {
    this.topics = {};
};

/**
 * サブスクライバ
 * @param topic
 * @param fn
 * @returns {*}
 */
Mediator.prototype.subscribe = function(topic, fn) {
    if (!this.topics[topic]) {
        this.topics[topic] = [];
    }
    this.topics[topic].push({
        context: this,
        callback: fn
    });
    return this;
};

/**
 * パブリッシュ
 * @param topic
 * @returns {*}
 */
Mediator.prototype.publish = function(topic) {
    var args;
    if (!this.topics[topic]) {
        return false;
    }
    args = Array.prototype.slice.call(arguments, 1);
    for (var i = 0, len = this.topics[topic].length; i < len; i++) {
        var subscription = this.topics[topic][i];
        subscription.callback.apply(subscription.context, args);
    }
    return this;
};

ざっと説明させていただきましたが、GitHubの方に実際のコードを上げておいたので宜しければ御覧ください。

実際に使う

では最後に、先ほどのスクリプトの使い方を説明します。

まずFluidで作成したChatWorkを起動していただき、
メニューバーからWindow => Usescriptsを選択してください。

すると図のようなウィンドウが表示されると思います。
左カラムの部分に「chatwork_growl」などと(何でもいいです)タイトルを作成していただき、pattern部分にChatWorkのURLを追加します。そして右下のボックスに先ほどのスクリプトを追加すれば完成です！



こんな形で新規メッセージ数の確認ができるようになります。

最後に

最後まで読んでいただきどうもありがとうございました！

作ってみたら、じきにChatWorkのAPIが公開されるとのことで少々焦りました。笑
でも、APIの公開をとても楽しみにしています。

チームでの開発にあたり、様々な人とのコミュニケーションは欠かせないものです。それが全ての人にとって快適で楽しいものになればとても素晴らしいことではないかと考えています。

最後になりますが、私は現場で毎日たくさんのことを学ばせてもらっております。
せっかく教えていただいたことを忘れぬよう日々ブログを綴っていますので、よかったらのぞいてみてください。

- kotazi.com

今後もチームとともに成長し、よりよいサービスを提供できるよう努めていきます。
ありがとうございました！

女のホンネひしめく世界のつくりかた

みなさま、こんにちは。
GIRL'S TALKのデザインを担当している、見上です。
作業のほとんどをIllustratorで行っています。

今回は、女性たちの衝撃的なホンネあふれるサービスの世界観の作り方について、お話ししたいと思います。

GIRL'S TALKとは

女性限定完全匿名掲示板サービス「GIRL'S TALK」は
恋愛、ナイトライフ、ココロやカラダの悩み...
「誰かに話したい、けど話せない」そんな悩みを抱える女性達のために生まれたサービスです。


ということで、早速詳しいお話に入ります。

ユーザーだけを見すぎないこと

サービスのターゲットをしぼりこみ、いざ、デザインをする段階で目を向けるのはどこなのか。
GIRL'S TALKのメインターゲットは、20代後半～30代前半の女性。
単純に彼女たちを連想する色の取り入れ方をすればいいわけでもなく、
彼女たちが手にとる雑誌やウェブサイトにならえばいいというものでもありません。

いつ、どこで、何を片手に「ガールズトーク」をするのか？
生身の女性たちがガールズトークを繰り広げるとき、心の中はどんな色なのか？
固定された概念との距離を保ちつつリアルなイメージを分解してスマホの画面にあてはめています。

コンセプトを紐解く

たどり着いたデザインコンセプトは、
『可愛過ぎず飽きがこない、シンプルだけど悪い事してる感がありテンションが上がる』

シンプルでテンションが上がる…なんだか矛盾しているようにも感じますが、
あくまでも文字が主役という軸をしっかりと、これを具体的なイメージにしていくと
①お花モチーフ、キラキラ、ぷるぷるを排除して可愛さをおさえ
②質感は吸い込まれるようなマット。落ち着きを持たせ目に優しく見飽きないように
③使用色、エフェクトは控えめに、シンプルなオブジェクトの重なりで奥行きをもたせ
④アイコンやバナーのカラー選定でネオン光る夜の街を歩くワクワクとソワソワ感を演出
（都合よく解釈したみたいですが）こんな感じ。

▲ベースはグレーのみ。際立たせたいポイントにしぼって色をさし込みます。

▲アイコンに使用する色もマットに。柔らかいグラデーションでぼんやり光る印象に。

光らせすぎ、膨らましすぎ、派手すぎにならないよう注意し、ちょっと地味かな～と思う程度に存在感を落としてデザインするよう心がけています。

平面に奥行きを持たせ優先順を明確に

サービスの土台はあくまでも文字の引き立て役。
メリハリを持たせ、一つ一つのオブジェクトに存在感を持たせるため、奥行きを大切にしています。

たとえばボタンや見出しのあしらいについて


↓
これらの平面的なオブジェクトたちを重ねてみると…
↓


こんな感じ。
複数のオブジェクトを重ね厚みを持たせる事で、スマホの画面×文字の世界という平面に奥行きを持たせます。
奥行きを持たせることで情報を整理し、的確な優先順位をユーザーに示す事が出来ます。

衝撃をひとつだけ

GIRL'S TALKを危険であやしげに見せているのは、他でもなくバナーです。
全体的には実は地味な作りですが、バナーにだけ艶をだしてぷっくりさせるだけで、サービス全体に瑞々しさが行き渡ります。



たった一つのバナーがサービスの雰囲気を決める大事な要素になるため、たかがバナーと思う事なくこだわって作ることをとても大切にしています。

おわりに

最後までお付き合いいただき、ありがとうございました。
世界観に好評をいただいているGIRL'S TALKですが、リリース当初からほぼ変わらない世界を維持して来れたのは、プロジェクトメンバーがユーザーの目線に近づくよう心がけてきたことが大きかったと思います。
ユーザーを見るのはもちろんですが、「ユーザーと共にサービスを見る」ということを忘れないよう心がけていきたいと思います。

是非、女のホンネをのぞいてみてくださいね♡