【動画あり】アプリストアで輝きを放つために

はじめまして。2013年度新卒入社で現在は「土竜」のデザインを生業としているハルヤマと申します。※土竜は爽快感溢れる中毒性の高いパズルゲームです。

今回は、ネイティブアプリをリリースする際の最後の門番「ストア用素材」について執筆させて頂きます。

最近では動画も閲覧できるようになり更に重要度が増しているので、そんなストアに並べる素材を下記３点で簡単にまとめてみました。

・申請に必要なサイズをいつも迷うので、サクッと分かるような一覧
・ファーストビューを意識したちょっとしたコツ
・はじめての紹介動画制作

それではよろしくお願い致します。

 

各ストアに必要な素材一覧

簡易版ですが、おそらく最もスタンダードだと思われるものをまとめました。
※詳細に知りたい方はこちら（Google play / App Store）



App Storeは端末サイズに合わせた画像・動画を用意する必要があるので枚数が多めです。
対してGoogle playはだいぶフリーダムな印象です。
これらのルールの中で、実際の見え方を意識したポイントについて書いていきます。

App Storeでの見え方

App Storeでのポイント

・スクリーンショットは下部が隠れがちなのでキャッチコピーは上部に欲しい
・横向きのアプリでもスクリーンショットが縦なので文字を読ませたいなら縦向きがベター
・「見切れ」を意識して1or2枚目の左部にスクロールしたくなる工夫を（土竜は「脱法」）
・最小で40%までサイズが縮小されるので文字は48px以上で情報量も詰め過ぎないように

作る際は他のサービスを参考にしてみると色々発見があると思います。
そんなときはApp Screenshotがオススメです。

App Storeランキングから画像と説明文だけを並べてくれるので見やすいです。
(CMで話題の「755」。スクリーンショットもイケてます。）

Google playでの見え方

Google playでのポイント

・宣伝画像はとっても大事（ファーストビューはこれ1枚のみ）
・スクリーンショット縦幅固定なので横長がオススメ（モバイルでだいぶ小さくなる）
・サイズに次第だがあえて「見切れ」させてスクロールしたくなる工夫をしてみる
・説明文章は20字×4行を目安に簡潔に

App Storeの画像を使い回してるアプリが意外と多いので、ここで適切な画像を用意できればちょっと差がつきます。サイズも自由なので、色々と試してみるといいかも知れません。

追記：執筆段階でGoogle playの新UIがチラ見えしたので確定し次第変更予定

超入門・紹介動画制作

特にこれは社内でもよく聞かれるので、土竜を例にまとめておきます。

仕様については、Google playがYoutubeのURLを貼れば大丈夫なので、制約の多いApp Video Previewに合わせて作るのがオススメです。（仕様は上のリストを参考にどうぞ）

App Previewsにおける注意
・アプリ画面の紹介なので操作する手などが映ってはいけない
・Yosemiteじゃないとアップロードができない
・500MBまでとは書いてはあるが重いとアップロードできない場合あり
・サムネイルは動画内から自由に調整できる

撮影に使ったツール
・OSX Yosemiteが入ったPCのQuickTimePlayer
・撮影したいアプリが入っているiPhone
・Lightning（ケーブル）

サイズ変換に使ったツール
・MPEG Streamclip: video converter for Mac（フリー）

※土竜では640x1136pxしか用意していなかったため、アス比を保つために余白で埋めましたがリジェクトはされませんでした。（サイズ合ってないとアップロードできない）あらかじめ各種サイズで動画を作れればベストです。

撮影方法はこの記事が分かりやすいと思います。
【開発者必見】OS X YosemiteはiPhone/iPadの画面キャプチャ動画を撮ることができる！

ちなみに土竜は下のようなコンテをデザインデータで作り、そのまま素材を書き出して今のPVができています。こちらの動画と合わせて見ると分かりやすいと思います。

撮影して映像を繋ぐだけなら後はiMovieがあれば全て無料で作れるので、まだ動画のないアプリは是非とも試してアップしてみてください。

最後に

いかがでしたでしょうか。
ついついスクリーンショット等は使い回しやリサイズするだけになってしまいがちですが、それぞれの特徴を掴んだ最適な画像を並べてみてください。
また余裕があれば数字を見つつパターンを試してみたりするのも良いと思います。

最後までお付き合い頂きましてありがとうございました。皆様のストアの充実に少しでも貢献できれば幸いです。

今年も1pixelを宜しくお願い致します。

気になった方はコチラ

デザイナー向けイベント【Oneday Design】レポート！

こんにちは。サイバーエージェント人事本部でデザイナーの採用を担当しております、
白田と申します。
今回は、先日開催されたデザイナー学生向け1dayイベント「Oneday Design」について報告させていただきます！

「Oneday Design」とは？

当日出されたお題に対し、1日で作品を作り上げていただき、最後にチームに分かれて
コンペ形式で競ってもらうイベントです。

審査員は当社第一線で活躍するデザイナー社員。
発表終了後、個別に作品と、持参いただいたポートフォリオについてフィードバックをもらえます。今まで全2回開催。今回は主に12月に実施された第2回目の内容についてレポーティングさせていただきます！

実際のデザイナーの仕事を1日で疑似体験！

今回のお題は「若者向けのホテル予約アプリを作ってください」というもの。

「ラグジュアリーホテルの部屋が余っている」という課題のもと、

弊社であらかじめ準備したPCのホテルサイトを参考にしながら、

UIデザインに特化した制作に挑戦していただきました。

今回のポイントはあくまで「WEBサイト」ではなく、「アプリ」であることから、
よりアプリっぽさ、UIのデザイン力が試される内容となっています。

当社デザイナーよりUIデザインについての講義

はじめに、若手で活躍しているアメーバ事業部デザイナーの山幡より講義を行いました。

まず最初に注意すべき点は、
アプリデザインは、PCのリサイズでは決して成り立たないということ。

UIデザインを考える上でポイントは大きく3つあります。
①サイズ感
②ゾーニング
③ルール作り

①サイズ感
スマートフォンでの操作はPCと違い、直接対象物を触るため、ある程度の大きさが必要です。
また直接触れることにより、手の下に隠れてしまうことにも注意が必要です。
制作してみると、自分が思っている以上にサイズの大きさが必要になるので
まずは触ってみて頭の中のイメージとのギャップを知ることが大切です。

②ゾーニング

PCは大画面なので、サイドに常に表示させておきたい定常枠を置くなどできますが、
スマートフォンでは横幅が限られているため、優先度の高いものから順々に並べる分、優先度がとてもシビアです。

区切りを付けて、いかにコンテンツの抑揚を作れるかがポイントになります。

③ルール作り

PCではマウスオーバー時にクリックができるところには変化を出したり、
決定する前に表現を変えて見せることができますが、スマートフォンではタップで決定するしかありません。
ここで大切になるのがUIを設計する上で優劣や松竹梅を意識し、種類を用意すること。
サイズや濃淡や色などで、これらをカテゴライズしていきます。


このように、普段何気なく触っているアプリのUIデザインは、実はとても細かいところまで考えつくされて、デザインされていることが分かるかと思います。
アプリデザインとWEBサイトデザインの違いがよく分かったという声も多くあがっていました。
多くの学生の方が頷きながら一生懸命に講義を聞き、メモを取っていました。

いざ！ワーク開始

講義をもとにいざワーク開始！
時間が限られているため、みなさんとても真剣です。

途中ランチタイムにはお弁当が配られました。
緊張感のあった会場も一旦は和やかムード。
おにぎりを食べながら自由にみなさん近くの方とお話されていました。

お腹も満たされ、再び集中モード。
みんな本当に真剣です。

　

いざ！プレゼン大会！

今回のイベントはコンペ形式なので予選と決勝があります。
まずは予選で2チームに分かれて同時にプレゼンが行われました。

一人ひとり前に出てきてもらって、プロジェクターを使ってプレゼンをしてもらいます。



予選プレゼン終了後は、予選通過者のみで今度は決勝プレゼンです。
学生の皆さんも他の方の発表を聞いてメモをとるなどしていました。

全プレゼン終了後、アメーバ事業部のデザイン全体を監修している佐藤より
優秀者発表と総評がありました。

デザイナー社員より個別フィードバックタイム

本イベントで一番好評なのがフィードバックタイム！
全プレゼン終了後、社員より個別でフィードバックがあります。
当日制作した作品だけではなく、持参したポートフォリオについてもアドバイスがもらえる非常に貴重な時間です。

時間はたっぷり1時間。それでもみなさん足りないくらいでした。

アドバイスする社員の方もとても熱がこもっていました。

参加者の声

ここで今回のイベントの参加者の声を一部載せたいと思います。

「アプリとWEBのデザインとでは根本から考え方が違うのだということが講義と実践を通して分かってよかった。」

「学校の授業だけでは決して学べないポイントが学べてとても有意義だった。つい気づかないうちに自分の好みのデザインによせてしまうが、ユーザー本位でデザインを考えることの大切さを知った。」

「自分の作品だけではなく、他の人の作品を見れたのは良かった。気付きが多く、活かしたい部分がたくさんあった」

「社員一人ひとりのフィードバックがどれもとても丁寧で、今後の可能性まで考えてくれるところにはとても感動した。ありがとうございました。」

「フィードバックは厳しくもプロとしてとても的確な意見をもらえたので良かった。是非もらったアドバイスをもとにブラッシュアップしてまた望みたいと思う。」

やはりみなさんから共通して多く声があがっていたのは、社員からのフィードバックについてでした。
社員にどんどん質問をして吸収しようとする学生の皆さんの姿がとても印象的でした。

最後に

以上、「Oneday Design」レポートはいかがでしたか？

今回のイベントは一日という限られた時間の中で最高のアウトプットをするという、
なかなかハードなイベントだったかと思います。
しかしその分達成感も強く、とても濃い1日になったと思います。

実際の業務の中でも、限られた時間の中でいかに自分の力を出し切るかということが
幾度となく試されるので、デザイナーという仕事の一部を、1日で身をもって体験できたのではないでしょうか。

イベントを終えた後、皆さんの表情はやりきった後の達成感と、社員からたくさんフィードバックをもらってこれからまた頑張るぞ！というやる気に満ち溢れていました。

本イベントは1日という短い時間の中でも成長が実感できるイベントだと自信を持って言えます！

今後、サイバーエージェントではこのように、デザイナー志望学生向けにも随時イベントを実施予定です。
ただいま3つのイベントが募集中ですので、是非興味のあるものにエントリーしてみてください！

━━━━━━━━━━━━━━━━━━━━━━━━━

【CA　Creativethon】（シーエークリエイティブソン）

━━━━━━━━━━━━━━━━━━━━━━━━━

プロの仕事が垣間見れる！

当日は現場レベルのお題にたいして1日で制作してもらい、講義にて実際にプロのデザイナー社員によるアウトプットと比較して、自分と比較しながらスキルアップできる内容となっております！

＜応募締切＞
1月19日（月）12:00

＜実施日＞
1月29日（木）

━━━━━━━━━━━━━━━━━━━━━━━━━

【デザイナー就業型インターンシップ】

━━━━━━━━━━━━━━━━━━━━━━━━━

実際の制作現場にて当社デザイナーのもと、約1ヶ月間仕事をしながらデザインスキルを学んでいく就業型のインターンシップになります。

サービスコースとゲームコースの2つがあります。

＜応募締切＞
1月19日（月）12:00

＜実施期間＞
2月～3月のうち約1ヶ月間（平日10:00-19:00）
※出勤日数と期間については応相談

━━━━━━━━━━━━━━━━━━━━━━━━━

【Oneday Design～ユーザーを熱中させるゲームUI～】

━━━━━━━━━━━━━━━━━━━━━━━━━

大好評シリーズOneday Designの3弾目はゲーム編。

アートディレクターの講義のあと、1日で制作してもらいコンペ形式で競いあいます。最後にフィードバックもあります！

＜応募締切＞
2月2日（月）12:00

＜実施日＞
2月10日（火）

興味のある方、デザイナーとしてもっとスキルアップしたい方は是非エントリーお願いします！
お待ちしております！

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

クリスマス・イブですね。いかがお過ごしでしょうか。1pixel編集委員の宇納です。

本日は2014年最後の更新ということで、毎年恒例の振り返りをさせて頂けたらと思います！

【開発】非エンジニアが知ってると得するUnityの知識

弊社のネイティブゲームの代表作「ウチ姫」こと「ウチの姫さまがいちばんカワイイ」からUnityの記事。

ネイティブゲームの流行が年々高まっている昨今ですが、2014年はそれがより一層加速した年とも言えるでしょう。この記事では「非エンジニア向け」という切り口で、Unityの基本的な紹介をしています。全プランナーがネイティブエンジニアの手を借りずに簡単なモックを作って企画をするような時代が、すぐそこまで迫っているのかもしれません。

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

【デザイン】色を色で見ないで

当時まだ新卒１年目だったデザイナーが書いた、デザインの本質を書いた哲学的とも言える記事。

色を色で見てデザインするのではなく、まずは「明るい」「暗い」の対比で構成を捉えるという考え方は、ひょっとすると優秀なデザイナーは無意識の中でできてしまうものなのかもしれません。デザイン修行中の方はもちろん、非デザイナーの方にも是非ご一読頂きたい記事です。

http://ameblo.jp/ca-1pixel/entry-11770516521.html
（2月19日公開）

【デザイン】難しくないデザイン効率化のすすめ

ガールフレンド（仮）で実際に取り組んだデザイン作業の効率化についての記事。

デザイナーの業務は常にクリエイティビティでアーティスティックな物とは限りません。時には泥臭い「作業」と向き合わないといけないことも。また、属人化を防ぎ、大人数でも運用がしやすいような工夫を常に心がける必要があります。そういった「仕組み」に興味がある方は是非どうぞ。

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

【デザイン】３分で分かるフラットデザイン

ネガティブな発言や失敗や愚痴を気心の知れた友人同士で共有できるニュータイプSNS「DETOX」で用いたフラットデザインの手法についてご紹介しています。

もはや「フラットデザイン」という単語が懐かしく感じるほど、今年もデザインのトレンドが著しく変化した1年でした。iOSやAndroidといったプラットフォームの上で展開するスマホ時代の今だからこそ、こういったトレンドにアンテナを張っておくことはとても大事なことです。

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

【開発】Web Componentsで行うHTMLのコンポーネント化

HTMLをコンポーネント化する「Web Components」という新しいHTMLの仕様についての記事。

Web Componentsが使えるようになると、開発者が独自に再利用性の高いエレメントを作ることができるようになります。この記事ではその具体例をサンプルコードも踏まえながら説明しています。近い将来スタンダードになる技術ですので、今年中に触れておくことをオススメします。

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

【デザイン】デザインは8の倍数でできている

「デザインは8の倍数でできている」という実に大胆な仮説を検証しているデザインの記事。

美しいデザインの法則がわかってしまえば、こんなに嬉しいことはありません。それに対して様々な角度から、かつロジカル向き合っています。数字が苦手な方もくじけずに隅々まで読んでみると、今後デザインするする時に自信を持って取り組めるかもしれません。

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

【開発】CSS3でつくるキャラアニメーション

HTMLとCSSでアニメーションを表現する手法はもはや当たり前になった昨今ですが、その中の手法の一つ、CSS3でのアニメーションについてご紹介しています。

パーツの切り分け方を工夫するとCanvasを使わなくてもここまで動きます。記事の後半で紹介されている「フレンダリアと魔法の指輪」のモンスターのサンプルもとても滑らかでオススメです。

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

【開発】RequireJS等はもう古い。WebPackとは？

依存関係解決のシステム「WebPack」について書かれた記事。

大規模な開発になればなるほど、RequireJSやBrowserifyのような依存関係を解決するシステムが必須になってきます。その一種でかなり強力なのがこちらのWebPack。日本語のドキュメントはまだあまりないようですので、様々なケースを想定したサンプルをビルドしながら便利さを感じ取って頂けたらと思います。

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

【開発】AngularJSを使用したゲーム開発

すっかり有名になったフレームワーク「AngularJS」についての記事。

弊社で提供中のブラウザゲーム「オトギア」は、弊社では初めてAngularが採用されたゲームです。データバインディングの仕組みが、要件次第では大きなメリットになることがあります。実際の使用例を交えながら紹介していますので、是非ご一読を。

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

【開発】フロントチューニンガソン 最速を目指すには

今年９月に社内で開催された、フロントエンドのチューニンガソン。その優勝者の記事。

限られた時間の中、デザインを変えずにいかにファイルサイズを減らしパフォーマンスを上げるかを競う大会で、まさに時間との勝負でした。時系列でのリアルなチューニング内容から、日常業務で使えるパフォーマンス改善のヒントを感じとって頂けると幸いです。

http://ameblo.jp/ca-1pixel/entry-11925409995.html
（9月17日公開）

まとめ

いかがでしたでしょうか。
今年もピックアップに苦戦しましたが、皆様からの反響を踏まえ、独断と偏見で10本に絞らせて頂きました。

2014年は、特にネイティブアプリ開発のトピックも増え、日々変化しているトレンドを感じることができる1年でした。またその一方で、HTML・CSS・JSへの関心が依然として高く、こちらは今後も見逃せない分野になっていきそうです。

また、デザインの分野では、デザインの本質について書かれるような記事が多く読まれるようになりました。デザイン・開発共に「効率化なんて当たり前にやる」ような時代になっているとも思えます。（そうそう、この記事もgrunt-contrib-jadeを使ってサクッと書きました。）

読者の皆様のおかげで1pixelは4年目に突入致しました。いつもお読み頂きありがとうございます。2015年は飛躍の年にしていきたいと考えておりますので、来年も1pixelを宜しくお願い致します。

気持ちのいいパズルを作るコツ

はじめまして!
エンジニアの遠田秀説(@shusetsun)です。
現在は、漢パズル「土竜（もぐら）」で主にフロント業務を担当しています。
土竜PV①　(https://www.youtube.com/watch?v=eCu4OJWkHnE&feature=youtu.be)

ネイティブゲームのフレームワーク(Unity, Cocos2d-x)については過去にブログでも紹介されているので、今回は「土竜」で使用しているパズルのアルゴリズムについて簡単に紹介したいと思います。

土竜について

土竜は麻雀を題材にしたパズルで、さまざまなステージを協力者と一緒に戦って日本を制覇していく3マッチパズルゲームです。

是非、ダウンロードして遊んでみてください。遊びながらブログを読むと理解が倍増すると思います。
ANDROID: https://play.google.com/store/apps/details?id=jp.co.cyberagent.mogura
※iOS版は近日公開予定

土竜には大きく分けて現在2つのパズルモード、回数制と時間制があります。その中で今回は時間制のパズルモードに注目してみたいと思います。

土竜のアルゴリズムについて

土竜の時間制のステージの大きな特 徴は、3マッチさせた時に、該当箇所以外は、下の画像のように操作が可能なところです。

かなり上手いプレイヤーの土竜

並みのプレイヤーの土竜

※アプリは10倍くらい高画質です。

このようにプレイヤーの腕次第で、難しい課題でもクリア出来るようになっています。この操作を可能にするアルゴリズムについて簡単に説明したいと思います。

1. 1.まずプレイヤーが動かしたピースのそれぞれのマッチを判定します。
   判定する際には、該当ピースのステータス情報をロック(使用中)という情報にし描画をします。そして、描画が終わったタイミングでロックを解除します。
   

   

   ロックされているピースは動かすことは出来ないようにしています。
   


2. 2.もしマッチしていた場合はピースの消去の判定にはいります。
   削除は移動したピースそれぞれに対して、水平方向と垂直方向に消せるピースの探索を行います。削除に該当するものはここで削除予約かつロックされます。
   

   



3. 3.ピースの消去は、消去予約されているものが順次消されていくしくみになっています。そして、消されたピースから落下処理に入ります。
   

   

   消去が終わったタイミングで消えたピースの位置に落下させるかを判定していき、落とせなくなった時点で再度連鎖反応を判定します。
   連鎖反応は、基本的には上記の1と同じようになっています。
   
   このように、関係のあるピースのステータス情報のみをロックしたり解除したり消去情報を加えることで複数箇所で連鎖を起こせるので、スピード感あふれるパズルに仕上がっています。
   
   
   

他の有名なパズルゲームとの違い

• ・キャンディクラッシュサーガ
  キャンディクラッシュサーガは、キャンディを動かした後に全ての連鎖が終了するまで、再度動かさない仕組みになっています。その為、時間差で消える挙動など多くの演出やルールが加えられ、主に回数制に重きをおいた3マッチパズルゲームになっています。
  Android : キャンディークラッシュ - King.com Limited(Android)
  iOS: キャンディークラッシュ - King.com Limited(iOS)
  
  


• ・LINE POP
  LINE POPでは、同じように複数箇所を消していくことが出来るゲームになっています。同時に複数個消せるので、やみつきになったかたも多いと思います。ハイスコアを競う時間制に重きをおいたアルゴリズムになっています。
  Android: LINE POP - LINE Corporation(Android)
  iOS: LINE POP - LINE Corporation(iOS)
  
  アルゴリズムは、非常に似ていますが、「土竜」には2回でお手つきルール(お手つきをすると集めたピースが一つランダムに捨てられる)があるので、よりプレイヤーの実力が試されるゲームになっています。
  

まとめ

今回は、麻雀パズル「土竜」の時間制モードのアルゴリズムについて触れてみました。
「土竜」では、圧倒的なスピード感による気持ちよさを重視して、上記のようなアルゴリズムにしました。
こ れからも、3マッチパズルだけでなく、なぞったり、ひっぱったりと多種多様なパズルが世間を賑やかすと思いますが、気持ちのイイ、パズルを作るには、どういう パズルにしたいかを決めて、それにあった操作方法を
追求していくのが一番のコツだと思います。

も うすぐiOS版をリリースする「土竜」ですが、これからどんどん盛り上がっていきます。
もちろん、時間制モード以外にも気持ちいい仕掛けや演出も盛り沢山!
そして、土竜は、これからも気持ちよさを追求し続けて、より気持ちのイイパズルに仕上がっていきますので、ぜひインストールして遊んでみてください!

Twitterでも「サオリ@mogura_sexy」が活躍中!

引き続き漢パズル「土竜」をよろしくおねがいします。

ノンコーディングでゲーム開発：PlayMaker概要編

はじめまして！UI/UXデザイナーの嶋田豪介(@__gsk__)です。
現在は主にモバイルゲームのラピッドプロトタイピングや技術調査を担当しています。以前は3DCGモデラーもやっておりました。趣味はソフトウェア研究、一番好きなソフトはExcelです。

さて、本記事でご紹介するPlayMakerは、Unity上で強力なビジュアルスクリプティング環境を提供する有料アセットです。コードを書かずにロジックが組め、可読性やデバッグ効率面でも優れた機能を有しています。登場以来有料アセットランキングの上位に入り続けており、まさにベストセラーアセットの代表格と言えるでしょう。
他有名ゲームエンジンにおける同様の環境は、Unreal EngineにBlueprintsが、CryEngineにFlow Graphがそれぞれ標準搭載されています。複雑肥大化しがちな昨今のゲーム開発において、フローの全体像を視覚的に把握できるビジュアルスクリプティング環境は存在感を増してきています。

以下では、主にUnityのスクリプティングに二の足を踏んでいるデザイナーやプログラマー向けに、PlayMakerの概要をご紹介させて頂ければと思います。Unlock Your Power!

PlayMakerの特徴

PlayMakerで構築したノベルエンジン。 この例ではシナリオファイルのロード、構文解析、使用アセットの管理、ノベルの進行などシーンの全てを支配的に一元管理させている。

PlayMakerの特筆すべき点は

• 状態遷移ベースのフロー設計ができる
• ロジックをノンコーディングで記述できる
• 実行中プログラムの状態を視覚的に把握でき、デバッグ効率が高い
• 既存コードや他アセットとの連携が容易
• ユーザー独自の「アクション(後述)」開発が容易

などが挙げられます。
また、Uni2D、SimpleSQL、SQLiteKitなど、パブリッシャー自らPlayMaker対応を謳っているアセットが多いのも特徴です。もちろん公式に対応していなくても、ほとんどの場合自作のアクションやスクリプト経由で問題なく連携できます。
加えて、PlayMakerユーザーが自作したアドオンアクションがNGUIやPrime[31]をはじめとして公式フォーラムにて大量にシェアされています。iTweenに至ってはバンドルされている上、専用アクションも豊富に付属するため非常に相性が良いと言えます。
これらの特徴から、導入による効果が特に期待できるシーンをあえて挙げれば

• モック製作/ラピッドプロトタイピング
• UI/状態遷移の管理システム
• iTweenアニメーションの制御
• AIの思考ルーチン
• UnityEngine APIの学習

などです。

チーム開発における注意点

一つのゲームをPlayMakerだけで作り上げることもできますが、C#スクリプトなどと連携させてプロジェクトの一部に導入することもできます。 ただしチーム開発においては

• コードではないのでマージができない
• 厳密なカプセル化が困難である
• 自由度が高くほぼどんなロジックも書けてしまう

などの特徴を把握した上で運用ルールを明確にしないと、デバッグやリファクタに余計な工数を消費する恐れがあります。 メンバーの練度や開発の規模次第ですが

•  使用範囲を特定シーンに限定する
•  既存コードとの連携ルールを明文化する
•  コードは全てPlayMakerのアクションにして使用する
•  状態遷移制御のみで使用し、ロジックを書かない 
• トゥイーン制御のみに使用する

など、なんらかの対応が必要になるでしょう。チームでの安易な導入には危険があることを忘れないでください。

ステートマシンとは

PlayMakerはステートマシン(FSMまたは有限オートマトン)と呼ばれるUMLの状態遷移図に似た形式でプログラムを構築します。 ステートマシンは主に以下四つの概念で構成されます。

• ステート (オブジェクトの状態)
• イベント (ある状態から別の状態への遷移を起こすトリガー)
• アクション (ある状態でのオブジェクトの振る舞い、具体的なロジック)
• 変数 (ステートマシンが扱うオブジェクトや数値などの入れ物)

例えば、プレイヤーキャラクターの歩き、走り、無敵状態、毒状態などは全てステートとして表現できます。また、「歩き」から「走り」などへの状態変化は、何かしらのイベントをトリガーとして遷移(トランジション)します。そして各状態では具体的な挙動がアクションとして記述され、歩く速さなどのパラメーターはアクションの中で変数に入れられて使用されます。
また、複数のステートマシンを一つのオブジェクトにアタッチすることも可能です。

PlayMakerのエディター画面

• 濃いグレーの四角がステート
• 青い枠に囲まれているものは現在編集中のステート
• ステートの下に一つまたは複数ある薄いグレーの四角がイベント
• 画面右側は編集中ステートに配置されているアクション

ステートを作る

PlayMakerでステートマシンを組み立てる工程を見てみましょう。あくまで概要の紹介なので、読みやすさを優先し以下全てのステートや変数は日本語で命名しています。また、操作の説明については省略しています。

灰色のブロックそれぞれがステートです。アイドル(待機)、歩く、走る、無敵、毒などの「状態」をとるキャラクターを想定しました。アイドルステートの直上にSTARTというブロックがありますが、このステートマシンの起動時に最初にアクティブになるステートを意味しています。

ただし、一つのステートマシンは同時に複数の状態をとることはできません。従って同時にアクティブにしたいステートはそれぞれ別のステートマシンとして実装する必要があります。例えば「歩きながら毒状態」「走りながら無敵状態」などを実現したいので、下図のように整理しました。

移動管理のステートマシン

バフ管理のステートマシン

イベントを作る

ステートからステートに移る(トランジションする)ためにはイベント名を定義する必要があります。 前出の移動管理のステートマシンを例に進めていきます。 イベントを作るにはPlayMaker EditorのEventタブを使用します。

ここではマウスを押している間は歩き、数秒歩き続けたら走りに移行する挙動とするため、各ステートに以下のようにイベントを設定しました。

「！」が表示されているのは、イベントは定義されているが、その遷移先が見つからないためです。 それぞれのイベントと遷移先のステートを関連づける必要があります。 イベントからステートに向けてドラッグすると矢印でステート同士が結び付けられ、すべての遷移が完成しました。

アクションを割り当てる

それぞれのステートで行うロジックと、各イベントを発動させる条件を定義するため、各ステートの中に「アクション」を配置します。アクションブラウザを開くと標準で同梱されている多種多様なアクションが現れるので、目的のステートを選んでから、任意のアクションをダブルクリックもしくはドラッグで配置します。

PlayMakerのアクションブラウザ。 キーワードでフィルタリングができる。下部には選択したアクションのプレビューと説明が表示される。

「アイドル」ステートのアクション

「アイドル」ステートには「Get Mouse Button Down」というアクションを配置しました。名前の通りクリックを検知したら、現在のステートのどのイベントを発動させるかを指定するアクションです。 この場合、左クリックで「マウスダウン」イベントが発動され、矢印の先にある「歩く」ステートに遷移します。

「歩く」ステートのアクション

「歩く」ステートには五つのアクションを配置しています。大雑把に説明すると以下のような処理を行っています。

1. Get Position：自身の現在座標を変数「現在の位置」に格納 
2. Vector3 Add XYZ：「現在の位置」のX値に変数「歩きの移動量」の数値を毎フレーム加算 
3. Set Position：自身の座標に「現在の位置」を毎フレーム代入 
4. Get Mouse Button Up：マウスボタンを離したら「マウスアップ」イベントを発動
5. Wait：このステートに入って1秒経過したら「一定時間経過」イベントを発動

※アクションは基本的に、フレーム内で上から順に実行されていきます。ただし、EveryFrameにチェックがついているアクションがある場合、そのステートがアクティブな間、そのアクションは毎フレーム実行され続けます。

「走る」ステートのアクション

移動量の変数に「走りの移動量」が設定されています。 他のアクションの説明は「歩く」ステートとほぼ同じ処理なので省略します。

最後に

このステートマシンを実行した動画です。 コードを一切書かずにUnityのオブジェクトをインタラクティブに制御できました。
本記事ではPlayMakerの基礎的な概念の解説と、極めて単純なステートマシンを作りました。また機会があれば、PlayMakerのフルパワーを発揮させた実践的な内容をご紹介できればと考えています。

CSSConf.Asia・JSConf.Asia 2014 参加レポート

こんにちは。

Amebaでフロントエンドエンジニアをしております、ふっしー(@fushi_hd)です。

11/19~21の期間 CSSConf.Asia・JSConf.Asiaというフロントエンド系の技術に関する二つのカンファレンスに先輩方と参加させていただいたので、その参加レポートをします。

今年の開催国はシンガポールで、当然ですが全て英語での発表でした。
CSSConfが1日のみ、JSConfが2日間の合計3日間の開催でした。

それぞれ多くのセッションがありましたが、その中でも気になったものをいくつかピックアップして紹介します。

CSSConf

CSSに関する発表で、技術トレンドから導入事例などの発表が行われました。

こちらが会場の様子です。

No More Tools (Karolina Szczur @fox)

この発表では、以下のようなフロントエンド開発効率化のためのツールを多数紹介していました。

• Autoprefixer
• csslint
• cssmin
• npm
• gulp grunt

ツールの導入は簡単であるが、それによりシステムが複雑化し、メンテナンスしづらくなる可能性がある。そのため、チームメンバが協調して利用できるように、環境を整備する事が大切であるということを強調していました。

Performant UIs using CSS magic (Ryan Seddon @ryanseddon)

これはTHE CSS NINJAというブログを書いているの人の発表で、アプリケーションのパフォーマンスを、CSSにより制御する方法に関するものでした。

主にscrollListView.jsという、インフィニティスクロール系のライブラリを例にとり、コンテンツの描画のコストがどのように変化するのかを紹介していました。  
CSSのプロパティを変更するとReflowとPaintの処理が走り、それらがどのように描画されるかといったフローの話をしていました。 

Inside the Airbnb brand evolution (Fiona Tay @msfionatay)

AirbnbのWebサイトのリニューアルに伴い、既存のサイトを予め拡張性があるように作り直し、HTMLとCSSに新たなコードを書き加える事無く、内部パラメータの調整のみで、新しいデザインへとリニューアルすることができたという話でした。
Bootstrapのようなモジュール化を徹底し、抜本的に設計を見直す事により可能になったそうで、デザイナーとエンジニアの密な連携が無ければと成し遂げられなかった事だと思います。

Cascading Perspectives with THREE.CSS3DRenderer (Joshua Koo @blurspline)

Three.jsのコミッターによる発表で、THREE.CSS3DRendererの紹介でした。
前半でThree.jsの紹介をして、後半でCSS3DRendererの特徴などの紹介をしていました。  
Three.jsとは違い、CSS3DRendererではDOMを使って3D表現ができるため、新しいwebページの表現の形として使用することも提案していました。 

球体や元素記号のタイルを、縦横無尽に動かして整列させるといったデモをしていて、見ていて面白い発表でした。

JSConf

JavaScriptに関する発表で、フロントエンドに限らずNode.JS(バックエンドに関する技術)やハードウェア(センサ)に関する発表などもありました。

JSConf 1st Day

Building Isomorphic Apps (Spike Brehm, Airbnb @spikebrehm)

Airbnb社の人の発表でした。  
Isomorphic Appとは、同じ言語で書かれたソースコードが、クライアント・サーバーの両方で動作するという意味で、ブラウザ環境とNode.js環境で動作するJavascriptを、Isomorphicにしてしまおうという考え方です。  
Isomorphic Appに関して  
パフォーマンス、SEO、フレキシビリティ、メンテナンス性の4つの観点から議論していました。また、各種フレームワークやライブラリを用いた、実際の導入事例を紹介していました。 

Pixel Art And Complex Systems 
(Vince Allen, Spotify @vinceallenvince)

ピクセルアートをブラウザで描画する方法に関する発表でした。ピクセルアートの描画について、Canvasなどを使わずに、cssのbox-shadowのみを使っていることに驚きました。一つのDOMにいくらでもbox-shadowをつけられることから採用したそうです。ブラウザのインスペクタで実際のDOMを見たところ、box-shadowのパラメータが大量に設定され、  大変なことになってました。

デモでは、オオカミが羊を追いかけて、それをゾンビが追いかけるといっものなどを発表していました。大変おもしろいデモでした。 

こちらに発表に使用されたデモがあるので、見てみると面白いと思います。

Fun With Javascript And Sensors (Jan Jongboom, Telenor @janjongboom)

    

スマートフォンに搭載された、各種センサにアクセスできるAPIを用いることで、様々な面白い事ができるといった発表でした。光量を調節して音楽を奏でたり、ジャイロセンサで3Dモデルの傾きを制御したり、加速度センサを用いて、ジャグリングの動きを可視化するなど、スマートフォンを用いたデモを交えた面白い発表でした。 

また、janOSという独自で作成したOSも紹介していました。

The Art of Less (Martin Kleppe, Ubilabs @aemkei)

JavaScriptをひたすらminify(圧縮)していくといった内容の発表でした。漢字をUnicode形式に変換して分解し、結合し直して意味のあるコードに変換したり、JavaScriptをいかに極限までminifyするかを、段階を追って説明するなど、普通では考えないような発想によるコード生成手法で、大変引き込まれる発表でした。
こちらに各種デモが上がっています。

ライトニングトーク

一人5分発表のライトニングトーク的なものがあり、一緒に参加していた弊社の1000chさん(@1000ch)が発表していました。内容は、フロントエンドのパフォーマンス向上における画像の圧縮化の重要性についてでした。スライドはこちら

今回の発表などについて1000chさんのブログにも載ってます！
  

JSConf 2nd Day

WebTorrent (Feross Aboukhadijeh @feross)

BitTorentの技術を基礎から説明していてとてもわかりやすい発表でした。  
BitTorentはHTTPの様に、サーバー・クライアント型のの通信方式ではなく、クライアント同士が通信するP2Pのプロトコルを用いたものです。高速なダウンロードや多数のpeerの連携による負荷の分散が可能です。 

また、BitTorentをWebRTC(Web Real Time Communication)を使って、Web用に拡張したものがWebTorrentです。BitTorentとWebTorrentは通信規格が違うため、仲介役となるクライアントが重要であることも強調していました。 WebTorrentのページはこちら

Versioning, SyncingStreaming Large Datasets Using Dat + Node
(Max Ogden @maxogden)

Node Schoolという、主にNode.jsのワークショップを行う団体の人の発表で、 
大規模開発におけるデータの共有や、バージョニングのために使用できるDatの紹介とその使い方に関するものでした。  
データベースのダンプファイルを、gitの様に扱うことができ、大容量のデータも簡単に管理することができるといったものでした。 
Datのプロジェクトページはこちらです。

Reactive Programming Made Simple (Slava Kim, Meteor@imslavko)

Meteorという、Node.jsをベースとしたJavaScriptのフルスタックフレームワークの開発者による発表で、リアクティブプログラミングを用いて、Webアプリケーションをシンプルにしようという発表でした。 
Meteorが開発したTrackerというフレームワークを紹介しており、これを用いる事で多数のライブラリを導入している環境でも、Trackerがすべてのライブラリをラップして、リアルタイムでデータを一元管理することができるといったものでした。 

実際のデモでは、tableのデータを書き換えると、グラフのデータがリアルタイムに(ブラウザをリロードせずに)書き変わっており、リアクティブにデータが変化している様子が見て取れました。デモもわかりやすく、質の高い発表でした。

Gibbering At Algoraves: Js in Live Audiovisual Performances
 (Charlie Roberts, UCLA)

JavaScriptで音楽とオブジェクト(3Dモデル)を制御できるGibberというライブラリの紹介で、JavaScriptでDJのようにリアルタイムで音楽を生成するデモを行っていました。Gibberのサイトはこちら。ソースコードはこちらにあります。
Gibberは内部で

• audio API
• p5.js (Processingライクにコード- を書くライブラリ)
• Three.js (WebGLの描画に関するライブラリ)
• canvas

をラップしていて、音楽生成の他にもオブジェクトの描画も簡単に行う事ができ、VJのような演出も可能です。デモでは、LiveCodingでリアルタイムで音楽と映像を生成しており、発表終了時、会場は拍手喝采でした。

Let’s Make a Game With Phaser (Gabe Hollombe, Neo @gabehollombe)

HTML5のゲームエンジンとして、Phaserというフレームワークを紹介していました。 
通常、ゲームを開発するにはたくさんのアセットをajaxで入手し、入力を検知し、衝突を判定し、といった様々な面倒な処理が必要ですが、Phaserを用いることで、それらを簡単に処理できるというものでした。  
Phaserは2Dゲームエンジンで、2DのWebGLレンダラーであるPixi.jsがベースとなっています。

デモではSpriteアニメーションの描画や衝突判定を簡単に行っていました。

総括

さて、先輩からのお誘いで参加させていただいた今回の遠征でしたが、昨今の各地のディベロッパー、エンジニアの話を聞けて、大変有意義なものとなりました。中には既に聞いたことのある話もあったのですが、初めて聞く話が多く、とても勉強になりました。

また、人によって（国によって）プレゼンの仕方が違っていて、様々なプレゼンスタイルがあることを学ぶことができました。 

さらに、休憩時間やアフターパーティを利用して各国の技術者とコミュニケーションをとれた事が、貴重な経験となりました。(自分の英語力の自信にもつながりました)

何より、優秀な先輩方と行動を供にすることで、たくさんの技術的な議論を行う事ができ、とても刺激を受けました。 

今回のような機会がもっと増えると良いと思います。また機会があれば是非参加させていただきたいと思います！ 

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

クリエイター必見！魅力的なプレゼンのための3ステップ

こんにちは、フロントエンドエンジニアの宗定洋平（@yoheiMune）です。業務では「読書のお時間です」というスマホでマンガが手軽に読める電子書籍サービスの開発や分析を行っています。

先日、社内でプレゼンテーションワークショップを開催しました。五藤さん（@ygoto3_）、佐藤さん（@ahomu）、谷さん（@hiloki）、原さん（@heralog）に講師として立っていただき、2時間 × 4日でみっちりとプレゼンテーション制作を実技中心に学ぶワークショップです。今日はその中から、デザイナーさんやエンジニアさんが魅力的なプレゼンテーションを作る方法についてご紹介したいと思います。

社内外の勉強会やセミナーやLT（ライトニング・トーク）に登壇したいけど、どうやってプレゼンテーションを作れば良いのか分からないというそこのあなた！この記事を読むことで、きっと良いヒントを見つけることができますよ！少し長いですが最後までお楽しみください。

プレゼンテーションはこんなに凄い

3つのステップに入る前に少しだけプレゼンテーションスキルについて考えてみましょう。プレゼンテーションとはどのようなスキルでしょうか。「自分の主張や新技術などの情報を伝えるスキル」という答えがすぐに思い浮かぶと思います。

しかしプレゼンテーションの力はそれだけではありません。それは「人を動かす力がある」ということです。社内外の講義やセミナーに参加して1度や2度は「すごく納得した。明日から学んだことを実践しよう」と思ったことがあるのではないでしょうか。
プレゼンテーションはそれがたったの5分間だったとしても、人の心を動かし、人の考えを変え、人の行動を変える力があります。

さあ、こんな魅力的なスキルを身につけずにはいられませんよね？それでは3つのステップについて紹介します。

プレゼンを上手く準備する3つのステップ

プレゼンテーションの準備は、次の3つのステップに分解することができます。

1. 話の構成を考える

2. 資料を作る

3. 極める

プレゼンテーションを作るのは難しいな（難しそうだな）と思っている方、もしかして最初からパワーポイントやキーノートを開いてウンウンと悩んでいませんか？実はそれらのツールを開いて作業するのは、プレゼンテーション準備の中でかなり後半です。

上記3ステップを順番にこなしていくことで、誰でも簡単に素晴らしいプレゼンテーションを作り上げることができます。それではそれぞれのステップを詳しくみていきましょう。

話の構成を考える

この章では1つ目のステップである「話の構成を考える」について考えたいと思います。このステップはプレゼンテーションを作る上で最も基礎的な部分であり、また最も重要なステップです。プレゼンテーション資料をいきなり作り始めるのではなく、まずは話の構成作りから始めます。

とは言うものの、何もない白紙の状態からどのように話の構成を作り上げれば良いのでしょうか。ここでは「5つの決めで話の構成を考える」手法を紹介します。次の5つの決めを作ることで、プレゼンテーションの構成を作ることができます。

1. 対象者を決める

どんな相手に話すのかを具体的にイメージします。例えばHTML5についてプレゼンを行う場合に「HTML5をあまり知らないけど、面白そうだからどんなものか知ってみたいと考えている人」といった具合に具体的に定義します。対象者を定義することで、残りの4つの決めを作る時にどんなレベル感（基礎を話すのか、尖ったネタを話すのかなど）を決めることができます。

2. コアメッセージを決める

次に「何を伝えたいのか」を定義します。例えばHTML5を扱う場合に、HTML5全般について話したいのか、何か特化して話したいのか、業務での利用例を話したいのか、など何を話したいのかを決めます。決めた結果「HTML5の今すぐに使える機能はこれだ！」といったメッセージを決めます。

3. ゴールを決める

次にゴールを定義します。ゴールとは「プレゼン後に聴衆にどう動いてほしいのか」を定義することです。例えば「自社サービスを使ってほしい」「自分のファンになってほしい」「紹介した内容を仕事に生かして、仕事の効率化を図ってほしい」といったゴールを定義します。その定義したゴールを聴衆が行ってくれるように、プレゼンテーションの構成を作成します。

4. シナリオと時間配分を決める

次にシナリオ制作です。上記で決めた内容をどのように伝え、どのように達成するのかについて具体的なシナリオを作成します。例えば「導入→紹介→行動の感化→クロージング」といった流れを定義します。そして例えば導入部分では「自己紹介→問題意識の共有→解決策の提示」といった具合に、それぞれの具体的な内容を詰めて行きます。少し分かりづらいと思いますので、本記事を書く時に作ったシナリオの一部をこちらに公開します。参考にしてみてください。
ここであれやこれやと定義することでプレゼンテーションの骨子を作ることができます。

シナリオを作ったら、各項目についてどれくらいの時間をかけるのかを決めます。それにより各項目のトークスクリプトの量や資料の量がなんとなく分かります。

5. トークスクリプト（台本）を決める

最後に具体的に話す内容を書きます。少し面倒だなと感じるかもしれませんが、プレゼンテーションに慣れていない人はぜひトークスクリプトを作成しましょう。実際に書き出して音読することで、日本語の不備やしゃべりづらさを発見することができます。こちらも少しイメージしづらいと思いますので、こちらに本記事をプレゼンする場合を想定したトークスクリプトの一部を掲載します。トークスクリプトの長さの目安は300文字/分が標準的な長さです。

以上の5つを決めることで、プレゼンテーションの構成を作ることができます。ここで1～5の順番に捕われる必要はありません。時にはトークスクリプトから作ってコアメッセージやゴールを決めるといった順番でも良いです。時と場合に合わせて自分のやりやすいところから決めていきます。

さていかがでしょうか。5つの決めを作ることで、全くの白紙の状態からプレゼンテーションの構成を作れる気がしませんか？ぜひ話の構成作りで迷ったら「5つの決めで話の構成を作る」を実践してみてください。

それでは次に、資料の制作に話を進めたいと思います。

資料を作る

この章では2つ目のステップである「プレゼンテーション資料の作り方」について考えてみたいと思います。スライドシェアやSpeakerDeckを見ると、様々なプレゼンテーションが公開されていることが分かります。それらすべてをカバーすることはできませんが、ここではまずどのような考えを元に資料を作れば良いのかについて触れたいと思います。

プレゼンテーション資料を作る上で、次の2点に気を付ける必要があります。

・1スライド = 1メッセージ

・話し手とスライドは役割が違う

プレゼンテーション資料では、1スライドにあまり多くのことを詰め込むべきではありません（もちろん好みもあります）。先ほどの話の構成で決めた「シナリオ」を元に、1スライド1メッセージを基準に、スライドの分割単位を決めていきます。

次に注意すべきは「話し手」と「スライド」はそれぞれ役割が違うということです。もしスライドで言いたいことすべてを説明してしまった場合、そのプレゼンテーションでは話し手は要らなくないですか？スライドを見れば事足りるプレゼンテーションは得てしてつまらないものです。スライドを用いて聴衆の注意やモチベーションをコントロールしつつ、自分の口から主張することで、魅力的なプレゼンテーションとなり、相手により響くプレゼンテーションになります。

ここまでで心構えは分かりましたが、具体的にプレゼンテーション資料をどのように作れば良いのでしょうか。ここではセミナー中で人気の高かったポストイットメソッドを紹介します。

ポストイットメソッドは講師の原さんが紹介された方法で、ポストイット1枚にスライド1枚を手書きしてプレゼンテーションの制作を行います。ここで重要なことは「手書きを用いることで発想を自由に表現できる」「ポストイットを用いることでスライドに情報を埋め込みまくることができない」という2つのメリットがあります。例えば以下のように「メッセージ＋図やイメージ」といった簡潔な情報をポストイットに記入して、プレゼンテーション資料のベースを作成します。

これがまたなかなか面白いんですよ。気になった方はぜひ試してみてください。

最後にスライドデザインをどうするかですが、これは自分の引き出しの数を増やすことが大切です。スライドシェアやSpeakerDeckで他の人のスライドを見て学んだり、KeynoteのAzusaなどのデザインテンプレートを使うと良いと思います（@ahomuさん紹介ありがとうございます）。

さてここまでで話す内容とプレゼン資料を作ることができました。しかしプレゼンテーションを魅力的に行うにはこれだけでは不十分です。次の章では「極める」ことについて考えてみましょう。

極める

この章では3つ目のステップ「極める」について考えていきたいと思います。さてプレゼンテーションを魅力的に行うにはどうしたら良いのでしょうか。
それは「繰り返し練習をする」ことです。「なんだ練習か」と思った方がいらっしゃるかもしれませんが、プレゼンテーションの準備において驚くほど多くの人が準備をなおざりにしています。プレゼンテーションを行ったことがある方であれば、練習を行わずに本番に突入して（特に社内ではありがち）、話がタジタジになって失敗したという経験が、1度や2度はあるのではないでしょうか。

スポーツなどでは練習を行うことが上達の鍵であることは当たり前のことですが、プレゼンテーションにおいても同様です。練習の重要性を強く説明したいので1章を丸々使っています。練習をすることでプレゼンテーションの魅力を飛躍的に伸ばすことができ、また同時にライバルと差をつけることができます。ぜひ練習をしてみましょう。

それではどのように練習をすれば良いのでしょうか？それは簡単なことで「本番を意識して練習を行う」ことです。具体的には以下のようなことを行います。

・声に出して練習を行う

・時間を計って練習を行う

・最初から最後まで通しで練習を行う

・本番を意識した視線配りや立ち振る舞いを行う
・ビデオでプレゼンしている自分を撮影して振り返る
・他人からフィードバックをもらう

多くの人は（そして私もそうですが）、練習初期はたどたどしく話してしまったり時間を大きく超過してしまったりします。またトーク内容の不備や資料の不備を見つけたり、トークと資料がかみ合っていない部分を見つけたりすることができます。練習を繰り返すことで伝わるプレゼンテーションに仕上げることができます。

また練習時間を確保することも重要です。1～2日の練習では足りません。私の場合には本番の1～2週間前には資料制作を終えて、それ以降は練習に時間を割きます。練習をしていると「よしこれならいける」という感覚を掴む時が来るので、そこまでたどり着いてから本番に臨むようにしましょう。

最初にも触れましたが、プレゼンテーションには人を動かす力があります。その力を十二分に発揮するためにも練習を大切にしたいものです。あの驚異的なプレゼンスキルがあると言われているスティーブ・ジョブズでさえ、『スティーブ・ジョブズ 驚異のプレゼン』によると、圧倒的な練習を積み重ねていたようです。

最後に

本記事では魅力的なプレゼンテーションを準備する3つのステップについて紹介しました。参考になる部分がありましたでしょうか。
この記事を読んだだけでは絵に描いた餅でしかないので、ぜひ実践して（何度も実践して）自分のスキルにして頂けたらと思います。ワークショップではここに書いたこと以外にも多くのことを学び、実施とフィードバックを何度も繰り返すことでプレゼンテーションスキル向上を行いました。

社内でのプレゼンテーションワークショップでは五藤さん（@ygoto3_）、佐藤さん（@ahomu）、谷さん（@hiloki）、原さん（@heralog）に講師を努めて頂きました。
この場を借りて感謝申し上げます。また織田さん（@AkiOrita21）には勉強会運営をサポート頂きまして本当に感謝しております。そして参加者の皆様のおかげで素晴らしいワークショップとすることができました。

最後になりますが、長文の記事をご覧頂きましてありがとうございました。私はYoheiM.NETやTwitterでも情報発信していますので、気になった方はチェックして頂けたら幸いです。

最後までお付き合い頂きましてありがとうございました。皆様のプレゼンテーションスキルアップに少しでも貢献できれば幸いです。

Cocos2d-xでもGUIで画面を作りたい!

みなさん初めまして、2014年度新卒の澤田泰治と申します。前回、前々回と小川、石黒がUnityについて紹介してくれました。2人とも同期で、共に入社以来ネイティブゲーム向けの研修を共に受けておりました。

このままUnityばかり紹介されるのも癪なので、今回はUnityと双璧をなす、もう一つの有名なネイティブゲームエンジンである、Cocos2d-xについて紹介したいと思います!

Cocos2d-xの歴史

Cocos2d-xはもともとCocos2dというゲームフレームワークから派生して生まれています。Cocos2dはPythonで書かれており、MITライセンスで公開されています。

このCocos2dがiPhone向けに移植され、Cocos2d for iPhoneが生まれました。Cocos2d for iPhoneもさまざまなiPhone向けゲームのゲームエンジンとして採用されています。

このCocos2d for iPhoneから派生し、iPhone向けだけでなくAndroidなどマルチプラットフォーム対応を可能としたものがCocos2d-xとなっています。Cocos2d for iPhoneから派生しているため、クラス名やメソッド名にObjective-C由来に見えるものがまだ少し残っています。

Cocos2d-XとUnityの比較

  前回、前々回とUnityの記事が続いていたため、それぞれの特徴について簡単に書いておきたいと思います。

Unityの特徴

• 記述はC#
• アセットストアから簡単にアセットをダウンロードし、拡張が可能
• GUIのUIエディタなどが充実している
• コアの部分はオープンソースではない

Cocos2d-Xの特徴

• 記述はC++
• GUIのUIエディタが充実していない
• MITライセンスでオープンソース

などがあります。

Cocos2d-xはオープンソースで、エンジン内部の挙動も追うことが可能である反面、GUIエディタを使用したシーンの開発などが難しくなっています。

Cocos2d-xのオフィシャルのエディタである、Cocos Studioもあるのですが、Mac版はCocos2d-xのv3以降に対応していませんでした。そんな中、つい先日Cocos Studio v2.0.0.0 Beta0がリリースされたので、それを試してみたいと思います。

なお、今回はCocos2d-x v3.3rc0を使用しています。

ダウンロードからインストール

Cocos2d-xのページからDownloadページに遷移し、Cocos Studioを選択してダウンロードしてください。

ダブルクリックするとこのような画面になるので、インストールを進めてください。

リリースノートを見ると、以下の様な更新がされているようです。

• Unified editor, merge scene, ui, animation into one brand new editor
  (シーン、アニメーションエディタ画面の統合)
• Support scene reuse
  (シーンの再利用のサポート)
• Better spritesheet management
  (スプライトシート管理の効率化)
• Better integration with cocos2d-x and IDEs
  (cocos2d-xとIDEの統合に関しての改善)
• Easy to use asset management
  (アセット管理を容易に)
• Brand new UI design
  (新しいUIデザイン)
• User experience revamp
  (UXの改善)

/Application/Cocosの中にCocos Studio 2.appというファイルができていると思うので、そちらをクリックして起動します。

リリースノートにもあるように、v2.0からは、今までSceneエディタ、UIエディタなどのエディタが統合されています。

簡単な画面の作成

新しいプロジェクトを作成すると、この様な画面が表示されるかと思います。

今回は簡単に画像を配置した画面をエディタ上で作成し、cocos2d-xのプロジェクトで正しく読み込まれるか確かめて見たいと思います。
エディタ上の操作は非常に簡単で、画像を用意して、画面左下のResourceウィンドウにドラッグアンドドロップすることで、リソース登録が完了します。

後は表示したいリソースを中央のSceneウィンドウの好きな位置に置くと完成です。

今回は以上のような画面を作成してみました。

Cocos Studio>Fileから、Publish を選択することで、csbファイルが作成されます。
このファイルの中に、リソースの情報や配置情報などが含まれています。

その後、Cocos Studio>File>Publish>Publish to Xcode Project を選択することで、Xcodeのプロジェクトファイルが生成されます。

生成されたcsbファイルは、プロジェクトフォルダ内のResourcesフォルダ内でなく、resフォルダに含まれているため、Resourcesフォルダにコピーするようにしましょう。

その後、HelloWorldScene.cppを以下のように編集します。簡単のため、余計なコードは省略しています。

#include "HelloWorldScene.h"
#include "editor-support/cocostudio/CocoStudio.h"

USING_NS_CC;

Scene* HelloWorld::createScene(){
    auto scene = Scene::create();
    auto layer = HelloWorld::create();
    scene->addChild(layer);
    return scene;
}

bool HelloWorld::init(){
    if ( !Layer::init() ) {
      return false;
    }
    auto node = CSLoader::getInstance()->createNodeFromProtocolBuffers("MainScene.csb");
    this->addChild(node);
    return true;
}

その後、Xcodeのプロジェクトでビルドを行うと、Cocos Studioで作成したものと同じ画面が表示されていることが確認できます。

まとめ

今回はCocos Studio v2.0 Beta0を使って、画面の作成を行い、Cocos2d-x上で読み込む部分まで試してみました。
Cocos Studioのドキュメントはまだまだ整備されていないため、使いにくい部分もありますが、まだまだ使いやくすなっていくはずです!

ネイティブゲームでは、毎回ソースのビルドを行う必要が有るため、このようにGUIで画面作成などが可能になっていくことで、開発時間の短縮や効率化につながると考えています。
Cocos2d-xはオープンソースですが、Cocos Studioのソースは公開されていないのが残念なところ。

まだまだ個人的に試せていない部分も多いので、いろいろと触って行きたいと思います。これからのCocos2d-xの発展にもますます期待ですね!

Unity 新GUIの時代到来！

皆さん初めまして、2014年度新卒の石黒祐輔と申します^_^;
前回の記事の小川と同期で、OJTも一緒のところでネイティブゲームの研修を受けていましたが、現在は別々のところではあるものの、同じくUnityエンジニアとして日々精進しています！
入社して以来、Cocos2d-xとUnityという2大ネイティブ用ゲームエンジンの技術をガッツリ磨いています。

そこで今回も前回に引き続き、Unityの記事になります！
現在社内では新しいUnityの動作検証を進めています。もちろんUnity 5も新機能満載で注目の対象なのですが、今回はオープンベータ中である4.6から提供される新しいGUIについてご紹介します。

UnityのGUIの歴史

何故メジャーアップデートではない4.6が注目されているかというと、前述の通り公式から提供される標準GUIに関して大幅なアップデートが入るからですが、それは今までのUnityのGUIは

• 重い（ドローコールが多い、毎フレームスクリプトが呼ばれる）
• 機能が少ない
• 実行するまで表示確認できない

などなど、たくさんの問題を抱えていたらからです。これも相まって、2Dに弱いUnityと言われ続けてきました。

そのため公式のGUIはとても使えたものではありませんでしたので、多くの開発者がAsset StoreからGUI用のAssetをダウンロードし使っていました。その中でも有名なものにNGUIの存在があり、有料ではあるもののなかば標準GUIの様な扱いでした。

そこでこの状況をUnityが打破するためにGUI機能の刷新を図り、それが4.6から提供されることになりました！通称uGUIと呼ばれています。ただし現在では公式にはuGUIとは呼ばれていませんので、以下では新しいGUIと表記することにします。

新しいGUIの特徴

ここで簡単に新しいGUIの特徴をご紹介します。もちろん全てを書き始めるとキリがないので、掻い摘んでにはなりますが(^_^;)

まず古い方から・・・

 public class GuiExample : MonoBehaviour {
  void OnGUI() {
    if (GUI.Button(new Rect(50, 50, 100, 100), "Button")) {
      // do something
    }
  }
}

これはツライ！いきなりC#のコードの抜粋です！
そしてこれを実行すると、以下のようなものが描画されます。

実行してようやく上図の様なUIが得られますが、UIを作るためにコードを書かなければいけない、実行するまで分からないという状態で不便極まりなく、またパーツの配置もピクセル単位で指定しなければならず、生産性は低下する一方です。またコードを書けない人はUIを実装・修正することができません！

そしてこれを解決するのが、以下のような新しいGUIです！

素晴らしいです！エディター上でUIオブジェクトを置いて、インスペクターから設定するだけで、リアルタイムに描画されますので、コードを書けない人でもUIを作ることができ、また修正も楽になります。

以上のように、新しいGUIでは生産性が飛躍的に増加することがお分かり頂けたでしょうか？
アンカーなどのレイアウトに関する基礎的な部分は公式サイトやその他有志の方々が纏めていますので、次項では新しいGUIのレイアウトを調整する上で肝となるオブジェクトサイズのノウハウを簡単にご紹介します。

各オブジェクトのサイズ

新しいGUIを修得する上で大切なのは、個人的にはUnityがUIのレイアウトを決定しているかだと思っています。そしてそれが分かると、自動レイアウトで躓かなくなると思います！そこでこの項では、各オブジェクトのサイズがどのようにして決まるのかをご紹介します。

Unityは各オブジェクトのサイズを動的に決定します。もしオブジェクトのサイズが静的に決まっている場合は不要ですが、自動レイアウト（Vertical/Horizontal Layout Groupなど）を使う場合は必須です！

ではどのような情報に基づいてUnityが各オブジェクトのサイズを決定するのかというと、重要なのはILayoutElementインタフェースで定義されている以下のプロパティになります。

• minHeight/Width
• preferredHeight/Width
• flexibleHeight/Width
• layoutPriority

min系は各オブジェクトが最低限表示して欲しいサイズをUnityに伝えます。
preferred系は、望ましいサイズを伝えます。
flexible系はサイズを伝えるのではなく、preferredのサイズより大きくしていいかどうかを伝え、bool値のような使い方をします。
layoutPriorityは、1つのオブジェクトで複数のコンポーネントがILayoutElementインタフェースを実装している場合の優先順位を決定します。

以上のプロパティは、もちろんTextやImageなどの標準UIにも実装されています。実際の値については、下図の右下のようにエディター上で随時確認できるようになっています。

上記のように自動レイアウトの中では各オブジェクトのILayoutElementにもとづいてサイズが決定されますが、もし自分でサイズを任意に決定したい場合や、複数オブジェクトからなるプレハブを作っている場合などは、自分でILayoutElementを実装する必要があります。
そのためには、もしサイズが静的な場合はLayoutElementコンポーネントを追加してインスペクターから値を設定します。もしサイズが動的な場合は、独自のILayoutElementを実装したコンポーネントを追加します。

個人的イケてる所・イマイチな所

LayoutElement以外にもいろいろと必要な知識があり、それらをここでご紹介するのはあまりにも無謀なので、今回はこの辺で割愛させて頂きます。詳しい情報については、公式マニュアル（英語）をご覧ください。

最後に、NGUIとも比較してみて個人的な感想をご紹介します。

個人的に新しいGUIがイケてると思っている点は、

• 無料、オープンソース化の予定
• 公式機能なのでバージョン依存が低い、Assetを入れる必要がない
• NGUIのような使い勝手
• マルチ解像度・DPIに対応しやすい
• タップなどのイベント処理が柔軟に設定できる
• ドローコールを賢く自動的にまとめてくれる

なところです。
逆にイマイチだと思っている点は、

• ボタンを別のボタンのすぐよこに置くといった、相対的な配置ができない
• 標準UI・機能が若干少ない
• 描画の前後関係がヒエラルキーに依存してしまう
• ドローコールがまとまる仕組みを理解していないと、いつの間にか増えている

なところです。

全体的には長年の実績があるNGUIには少し及ばないものの、オープンソース化されれば今の基本パーツ以外にもいろいろ増えそうなので、今後に期待です！
特に再利用性の高いUIモジュールを作る場合、NGUIの特定バージョンに依存してしまうと良くないので、新しい標準GUIは必須でしょう！

注意点

この記事執筆時点では、Unity 4.6はオープンベータテスト中です。
まだまだバグ修正を始め、仕様変更も多い状態です。
バージョンも1～2週間ペースで上がり、現在b21まで到達しているぐらい、不安定なものです。

そのためUnity自身テスト目的での使用を推奨しており、直近でリリースされるプロダクトへの適用を推奨していません。

まだまだ日本語の情報も少ないので、近いうちの導入を考えていらっしゃる方はご注意下さい。

Unityゲームの簡単Google Glass対応！

はじめまして、2014年度新卒の小川敬太と申します！
現在はUnityのエンジニアとして日々精進しております。

今回のテーマは、社内の自主的な活動として行われているゼミの活動紹介として、Google Glassで遊べる3Dゲームを簡単に開発する方法の紹介です。

社内のゼミでは、大学のゼミとは異なりますが最新技術やデバイスなど、興味のあることを学ぶために社員が自主的に集まって活動を行っています。

今回は、Android WatchやApple Watch, Google Glassなど最近注目のウェアラブル分野のゼミから、Unityで作った3Dのゲームを簡単にGoogle Glassに対応させる方法を紹介します。

Google Glassとは

TVやネットのニュースで見たことも多いと思いますが、Google Glassの紹介をします。
Wikipediaによると、

「Google Glass（単にGLASS）とはGoogleがProject Glassという研究開発プロジェクトで開発しているヘッドマウントディスプレイ(HMD)方式の拡張現実ウェアラブルコンピュータである。」
Google Glass (2014.10.21現在)

要するに、Googleが開発しているメガネ型のヘッドマウントディスプレイです。

Google Glassで3Dゲーム

Google Glassの開発は端末さえあればAndroidの開発と同様の環境で行えますが、3Dゲームなどを開発する場合はUnityなどのゲームエンジンを使いたくなると思います。しかし、3Dゲームの開発でよく使われるUnityのアプリはそのままではGoogle Glassで動かすことはできません。

Google Glassでも簡単にUnityの3Dゲームを動かしたい！

ということで、Unityを以下の手順でGoogle Glass対応させます。

1. タッチパッド対応
2. ボイストリガーのセット

タッチパッド対応

まずはじめに、Google Glassのタッチパッドに対応できるようにUnity上のMain Cameraなどのオブジェクトにタッチ処理のスクリプトをアタッチします。

using UnityEngine;
using System.Collections;

public class SwipeManager : MonoBehaviour {

    private const float THRESHOLD_X = 25f;
    private const float THRESHOLD_Y = 20f;
    
    // Use this for initialization
    void Start () {
        
    }
    
    // Update is called once per frame
    void Update () {
        
        if(AndroidInput.touchCountSecondary > 0){
            
            Touch touch = AndroidInput.GetSecondaryTouch (0);
            
            if (touch.phase == TouchPhase.Moved) {
                
                Vector2 direction = touch.deltaPosition;

                if (direction.x > THRESHOLD_X) {
                    // Swipe Forward
                } else if (direction.x < - THRESHOLD_X) {
                    // Swipe Backward
                } else if (direction.y < - THRESHOLD_Y) {
                    // Swipe Down
                    Application.Quit ();
                }
            }
        }

    }
}

Google GlassのタッチパッドではInput.GetTouch()などの通常Unityで使うタッチ処理でタッチが検知できないため、AndroidInput.GetSecondaryTouch()を使います。
今回は指１本のみの処理とし、閾値を超えるとそれぞれ前スワイプ、後スワイプ、キャンセルとなります。
それぞれの処理を中に書くことで、Google Glassでタッチの検出ができるようになります。

ボイストリガーのセット

次は、UnityのプロジェクトをAndroidStudioに書き出して、ボイストリガーの対応を行います。Google Glassでは音声コマンドによってアプリケーションを起動するため、そのままだとUnityで書き出したアプリはGoogle Glassでは起動できません。

・app/src/main/res/xmlフォルダを作成、xmlフォルダ内にvoice_trigger.xmlを作成して以下を記述

<?xml version="1.0" encoding="utf-8"?>
&lttrigger keyword="Start My Application" />

・AndroidManifest.xmlのactivity内のintent-filterとmetadataを以下のように変更

&ltintent-filter>
        &ltaction android:name="com.google.android.glass.action.VOICE_TRIGGER" />
</intent-filter>
&ltmeta-data
        android:name="com.google.android.glass.VoiceTrigger"
        android:resource="@xml/voice_trigger" />

・AndroidManifest.xmlにpermissionを追加

&ltuses-permission android:name="com.google.android.glass.permission.DEVELOPMENT"/>

これでGoogle Glassの音声コマンドでUnityのアプリケーションが起動できるようになりました。

今回は”ok glass start my application”でアプリが起動します。trigger keywordを好きな言葉に変更することで、好きな音声コマンドでアプリを起動することができます。
また

&lttrigger command="SHOW_ME_A_DEMO" />

などと書くと、公式のボイスコマンドが使えます。

その他、加速度やジャイロは通常の方法で使えるため、Google Glassのセンサーを利用したゲームの開発も行えます。

最後に

以上、Google Glassで簡単に3Dゲームを開発する方法を紹介させていただきました。これで、今までに開発した3DゲームをGoogle Glassで遊ぶことができます。

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