俺のコントローラのprotectedがpublicなわけがない

こんにちは。
最近、東北TECH道場(仙台道場)でAndroidの講師してます、GeNERACE CTOけんたろです。
今回は東北TECH道場で行なっている活動やハックについて書こうと思いましたが、弊社の仕事でCakePHP(v2.3.1)を使っていて気になったことについてメモします。

Continue reading

エンジニアもロジカルに企画・デザインできる!ハイパーエンジニアデザイナーへの道」

iQONさんの画像
こんにちは。GeNERACEのエンジニアのみきあらいです。

今日はiQONさん主催のイベント「人気ファッションアプリiQON★クリエイティブワークショップ ~女子をつかむUIの作り方&デザインワークショップ~」に参加したときのお話をします。

すでにご存知の方もいるかもしれませんがiQONとはどういうアプリかというと、女性向けのファッションを取り上げたアプリで、ユーザーは自分で考えたコーディネートをアプリ上にアップできたり、他のユーザーがアップしたコーディネートで欲しいものがあったら買えるというものです。

百聞は一見に如かずということでアプリの詳細については以下をご覧ください。facebook×amazonといった感じで面白いです。

http://www.iqon.jp/

イベントに参加してどういうことをしたかというと、iQONの方々のお話を聞いたあとは参加者同士でグループワークをしました。グループワークのテーマは「アプリの登録情報入力画面とログイン画面をデザインする」です。

以下、イベントとグループワークを通して聞いた話とそれに対する気付きを紹介してきます。

  • 「面倒なこと」「つまんないこと」が斬新なデザインを生む!

イベントで聞いた話の概要(以下、イベント):「名前とか住所とか入力するのめんどくせーなあ」→「やっぱ登録するのやめるわー」

といったように登録する直前でアプリから離れてしまうユーザーは少なくないようです。そういったユーザーの動きを止めよう!という傾向があります。
例えば対話型や穴埋め式のログインフォームにするといったような工夫が必要です。アメリカですでにそんな画期的なログインフォームがあります(例:私の名前は「    」です。)

気付き:ネガティブ要素を潰すことが新しいデザインやコンテンツを生むようです。
例えばソーシャルゲームで遊んでいて「挨拶機能とか面倒だな」と思ったら、挨拶機能をなくして別の機能でユーザーに特典をあげる、などというアイディアを企画チームにも話して、その仕様で実装するということができそうです。

  • データ至上主義

イベント:「なんとなーくこれがやりたい」「なんか良さげ」で企画やデザインを決めないし決めさせない!
「LINEの新しいスタンプを売る」という企画があるとします。スタンプを売るということで例えばディズニーのスタンプを売ろうという意見があり、それを採用するとします。
もしこの「ディズニーのスタンプを売りたい」ということを実現するためには、大抵の場合「なぜディズニーのスタンプを売るのか」「売り方・宣伝の方法はどうするのか」ということを考える、つまり「1. 売りたいものを考える → 2. 売り方を考える」という流れになると思います。

まず、ターゲットをすでにスタンプを高頻度で使ってるユーザーに絞ります。これによって、スタンプを買わないユーザーではなく、スタンプを買うユーザーに絞ります。
次に、スタンプを使っているユーザーが別のスタンプを買い換えるタイミングを調査します。
調査の結果、ユーザーがスタンプを買い替えるタイミングがわかったら、「新しいスタンプができました」というメッセージをターゲットであるユーザーに一斉送信します。
そのあと、スタンプをよく使うユーザーが実際にどういうスタンプを買っているのかを調査します。
調査してどのようなスタンプがよく売れているのかがわかれば、そのスタンプと似たようなスタンプを新しいスタンプとして売ります。

このように、イベントで聞いた話によると、「1. 売り方を考える → 2. 売るものを考える」といったように、はじめに書いた「1. 売りたいものを考える → 2. 売り方を考える」という順番とは異なります。
なぜ順番が異なるのかというと、「1. 売りたいものを考える → 2. 売り方を考える」という順番では、データ分析の前に「ディズニースタンプを売る」と決めているのに対し、後者の「1. 売り方を考える → 2. 売るものを考える」という順番では、データ分析に基づいて売る方法を考えた上でそれのあとに何を売るのか決めているからです。

「やりたいことがあるならデータ分析に裏付けされていないと企画としてみなさない」ということもこの例え話と同時にイベントで聞きましたが、この考えが売れるコンテンツを生み出す秘訣なようです。

気付き:正直デザイナーの方々は感性とかを何より大事にされるだろうという認識があったので、(会場にはデザイナーとディレクターの方々がいたわけですが)どちらかというと感性がものを言うことより、論理的なデータ分析の話をたくさん聞けたのがとても新鮮でした。

—————————————————————————–

☆その他気づいたこと、聞いたこと

  • 足を使って情報を稼ぐ!

「プログラマー=超絶運動不足」と思われがちですが、とにかく足を使って色んなイベントに参加してみると、他の会社の方々と情報交換して自分たちの仕事に活かせられます。(「skypeでいいじゃん」という意見もありそうですが、直接会場に出向くのが一番だと思います。また、ただイベントやセミナーの話を聞くだけでなく、実際にイベントの会場でグループワークをしてみたり、その場にいる人と情報交換をするなど、イベントに参加するときは受け身にならないという心意気も大切だと改めて思いました。)

今まではどちらかというと、企画チームに受身的に仕様を聞いて実装していたのですが、仕様やデザイン案をただ聞くだけではなく、自分から提案していく姿勢が大切なのかなと思いました。

最後までお読みいただきましてありがとうございました。

Ubuntuのススメ ver 2013/04

20090433-11

こんにちは、GeNERACE CTO けんたろです。

僕のメインの開発環境のOSはUbuntu 12.10です。
Ubuntuをメインの開発環境にしてから約2年。
今回はUbuntu 12.10で僕がよく使っている便利なソフトやツールについて書こうと思います。

Continue reading

パズドラを20年続ける秘訣が見えた?! ダウンタウンDXの西田Pに学ぶ。負けない企画をたてる7つの方法


西田プロデューサー(西田P)「人がやらないことは、当たる確率が高い。
しかし、やれないことではなく、誰でもやれたことを丁寧に、
特別のテクニックをもって実現すれば、市場にインパクトを与えることができ、
追随を許さない負けない環境が誕生する。
負けなければ『継続』していく。」

GeNERACEでプロデューサーをしている村山です。
いつもはエンジニア系の記事をアップしているGeNERACE laboですが、
今週はSamurai Startup Islandさんのイベントに参加してとても内容に刺激を受けたので、
企画系のブログを書きます。

ダウンタウンDXは誰でも一度は見た事ある番組だと思います。
なんと20年も継続している長寿番組です。

最近ではパズドラがゲームの長寿としてありますが、それでもまだ2年目です。
競合の多いゴールデン番組のなか、20年も戦い続け、勝ち続けている番組。
それが「ダウンタウンDX」です。

今回のイベントは、起業家向けに、ダウンタウンDXの西田Pが
企画のたてかたを講演するものでした。

読売テレビ編成局・東京制作センター東京制作部所属
チーフプロデューサー・演出家
西田 二郎 氏 @jironishida

そのなかでも、業務で企画職のかたや、企画をたてる必要がある人のために、内容を抜粋し、「負けない企画をたてる7つの方法」としてまとめてお伝えしたいと思います。(西田Pの話を軸に、私の主観が入っています。

Continue reading

デザイナーの為のSass/Compassのすゝめ

三月とはいえすっかりもう桜が咲き、杉花粉で目と鼻を塞がれ
これで耳と口も塞がったらさながら『ライ麦畑でつかまえて』の主人公だななどと思っています。ゆーじろーです。

今回はSass/CompassについてのHowtoを書かせていただきます。

SASS
compass

Continue reading

githubとAndroidとJenkinsの素敵な関係

head
こんにちは、GeNERACE CTO村松です。

GeNERACEではAndroidアプリ開発の継続的インテグレーションと企画側とのシームレスな連携の為にJenkinsを導入しています。
今回はその導入についてまとめます。
前提条件はJenkinsを導入するサーバに

  • Java 1.6がインストールされていること(Androidのビルドの関係で1.7はおすすめしない)
  • apacheがインストールされて起動していること
  • gitがインストールされていること
  • antがインストールされていること
  • androidのkeystoreが作成済みでリポジトリにコミットされていること

とします。

AndroidSDKを導入する

まず、Jenkinsを導入するサーバ上にlinux用のAndroidSDKを導入します。

$ sudo cd /var/lib/
$ sudo wget http://dl.google.com/android/android-sdk_r13-linux_x86.tgz #SDK取得
$ sudo tar zxvf android-sdk_r13-linux_x86.tgz
$ sudo mv android-sdk_r13-linux_x86 android-sdk-linux
$ sudo export PATH=$PATH:/var/lib/android-sdk-linux/tools/
$ sudo android update sdk -u #sdkアップデート

これでSDKの導入は完了。

Jenkinsを導入する

$ sudo wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo
$ sudo rpm --import http://pkg.jenkins-ci.org/redhat/jenkins-ci.org.key
$ sudo yum install jenkins
#jenkinsがアクセスするディレクトリにアクセス権を割り振る
$ sudo chown -Rf jenkins /var/lib/jenkins/
$ sudo chgrp -Rf jenkins /var/lib/jenkins/
$ sudo chown -Rf jenkins /var/lib/android-sdk-linux
$ sudo chgrp -Rf jenkins /var/lib/android-sdk-linux
$ sudo service jenkins start #jenkins起動

通常はユーザー周りの設定を行ったり、セキュリティ周りの設定を行うのですが、今回は省略。

JenkinsにJenkins GIT pluginを入れる

Jenkinsを起動したら http://jenkins_hostname:8080/ にアクセス。
Jenkinsの管理>プラグインの管理>利用可能から”Jenkins GIT plugin”をインストールします。
これは、Jenkinsにデフォルトでインストールされている、”Git Client Plugin”とは別のgithubと連携する為のpluginです。

githubのリポジトリにhookの設定を行う

先ほどのJenkins GIT pluginとの連携設定をgithub上で行います。
これは、githubのリポジトリとjenkinsのジョブを繋ぐ為の設定です。
https://github.com/account_name/repository_name/settings/hooks/にアクセス。
Jenkins (Git plugin)という項目があるのでクリックし、Jenkins Urlという入力項目に以下のURLを入力します。

http://jenkins_hostname:8080/git/notifyCommit?url=git@github.com:account_name/repository_name.git

Activeにチェックを入れ、Update settingsをクリック。
以上でgithubのリポジトリとjenkinsのプロジェクトを繋ぐ設定がされます。
これで、このリポジトリに対してのプッシュやマージがあった場合、設定したURLをgithub側からキックしてくれます。

Jenkinsにプロジェクトの設定を行う

http://jenkins_hostname:8080/ にアクセス。
画像を参考にJenkinsにジョブを追加します。
Selection_003

  1. 新規ジョブ作成をクリック
  2. フリースタイル・プロジェクトのビルドを選択
  3. ジョブ名を入力
  4. OKをクリック。

画像を参考にJenkinsのジョブ設定を行います。
Selection_007

  1. ソースコード管理システム>>Git>>Repository URLに先ほどhookの設定を行ったリポジトリを入力。Branches to build>>Brannch Specifierにブランチ名を入力
  2. ビルドトリガ>>SCMをポーリングにチェック
  3. ビルド>>シェルの実行>>シェルスクリプトにビルド時に実行するshellコマンドを入力
  4. ビルド後の処理>>Email通知>>宛先に開発全体に飛ぶメールなどを設定。不安定ビルドも逐一メールを送信、ビルドを壊した個人にも別途メールを送信にチェックを入れ、保存をクリックします

項目1のリポジトリがprivateリポジトリの場合、あらかじめ以下ディレクトリにgithub認証用の鍵を置いておきます。

/var/lib/jenkins/.ssh

項目3のshellコマンドですが、GeNERACEでは以下のように設定しています。

export PATH=$PATH:/usr/apache-ant-1.8.3/bin #antのパス追加
#Android関連のパスを追加
export PATH=$PATH:/var/lib/android-sdk-linux/tools
export ANDROID_HOME=/var/lib/android-sdk-linux
export PATH=$PATH:/var/lib/android-sdk-linux/platforms
export PATH=$PATH:/var/lib/android-sdk-linux/platform-tools/
#androidアプリのプロジェクト初期設定
android update project -p /var/lib/jenkins/jobs/jenkins_job_name/workspace/
#jenkinsがgithubからcloneしたディレクトリに移動
cd /var/lib/jenkins/jobs/jenkins_job_name/workspace/
#ビルド用のantスクリプトを叩く(詳細は"アプリをAntでビルド出来るようにする"に記述)
/bin/sh build.sh
#成果物をWeb上から落とせる場所にコピーする
cp -rf ./bin/appname.apk /www/jenkins/appname.apk

アプリをAntでビルド出来るようにする

JenkinsからAntを実行しアプリをビルドする為のシェルスクリプトを追加します。

$cd /var/lib/jenkins/jobs/jenkins_job_name/workspace/
$vi build.sh #viエディタ起動、以下の内容を入力し保存する
-----ここから-----
#!/bin/sh

#リリース用ビルドを作成する
echo "build for distribution"
ant clean
ant release

cp ./bin/AppNameActivity-release-unsigned.apk ./bin/app_name.apk

#アプリのデジタル署名を行う
echo "sign apk"
jarsigner -J-Dfile.encoding=UTF-8 -verbose -keystore ./app_name.keystore -storepass keystore_password ./bin/app_name.apk keystore_area

#アプリのデジタル署名の確認を行う
echo "verify apk"
jarsigner -J-Dfile.encoding=UTF-8 -verify -verbose ./bin/app_name.apk

#パッケージの最適化
echo "zipalign apk"
zipalign -f -v 4 ./bin/app_name.apk ./bin/appname.apk

#パッケージの最適化の確認
zipalign -c -v 4 appname.apk
-----ここまで-----
#ビルドしてみる
$sh build.sh

ビルド完了後workspace/bin以下にappname.apkが出来ていることを確認します。

動作確認

設定したリポジトリ git@github.com:account_name/repository_name.gitにpushし、http://jenkins_hostname:8080/ にアクセス。
Jenkins上でビルドが実行されることを確認します。

ビルド結果確認

Jenkins上でビルド完了後、http://jenkins_hostname/appname.apk にAndroid端末でアクセス。
Android端末にダウンロードし、インストールを行い起動出来ることを確認します。

便利ツール導入

こちらのページで紹介されているJenkins Notifier for Chromeがビルド状態が分かり非常に便利なので導入します。
この時、企画側のChromeにもインストールしておくと更に良いです。

最後に

GeNERACEではこの仕組みを導入しているので、

  1. 企画側の改善提案を開発側が受ける
  2. 開発側が開発しリポジトリにpushする
  3. 企画側がjenkinsから落とし動作確認する

という流れで非常に良い連携が出来ています。
因みに、弊社アプリ宇宙上司をJenkinsでビルドした場合、EC2のt1.microだと14分、m1.smallで3分程度でした。
宇宙上司にはライブラリとしてAndEngine,AndEnginePhysicsBox2DExtension,FluctSDK,libGoogleAnalyticsV2を導入している為14分も掛かっていますが、普通のアプリであれば、恐らくt1.microで十分だと思います。
本当はAntからJUnitで行う単体テストの部分も書きたいのですが、また次の機会に書こうと思います。

ご覧いただきありがとうございました。

Andengineで使うスプライトアニメーション素材作成

皆様はじめまして、今月からGeNERACEに参画してます。マークアップエンジニアのユージローです。

さて、いくつか前のポストでも紹介されてる通り、弊社ではAndengineを使用して開発を行っています。

Andengine = java

マークアップエンジニア = html,css,javascript,etc

仕事が無い!(待て

そんなこんなで慣れないjavaを少し触りつつ、僕は現在キャラクターなどの画面素材を担当しています。

Andengineはjavaですので、アニメーションの実装方法もcssアニメーションなどではなく、javaを用いてのアニメーションが主になりますが、スプライトアニメーションは昔ながらのフィルムビデオと同じ形式です。

全てのコマを一枚の画像として書き出さなければなりません。

スプライトシートは縦横に繰り返すものもありますが、単純なものであれば
縦もしくは横のみの繰り返しで済みます。

このスプライトシートですがアナログな作業でやるのは効率的ではないのでツールを使います。
作成ツールも下記のように幾つかあるのですが、Flash Pro CS6からFlashでもスプライトシートの作成が可能になりました。

インストールタイプのツール:http://www.codeandweb.com/texturepacker
ブラウザアプリ:http://draeton.github.com/stitches/

ということで今回はFlash Pro CS6を使用した場合のスプライトシート作成手順です。

ステップ1:Flashアニメの書き出し

Flashアニメの作成方法は端折るとして、ここでは作成したFlashアニメをpng画像に書き出します。キャプチャのようにメニューの『ファイル』➡『書き出し』➡『ムービーの書き出し』を選択します。

ss2013-02-22-12.40.08

フォーマットは今回背景有の為jpegでもgifでも良いのですが、変更で透過させる可能性も考えてpngシーケンスを選択しました。ss2013-02-22-12.58.30

保存するとタイムラインに沿った画像が全て吐き出されこのようになります。
無事に書き出せました。

スクリーンショット-2013-02-22-13.07.54

ステップ2:ライブラリへの取り込み

ここでまたFlash Proで新規ファイルを作成します。
新規ファイルを作成したら、メニューの『ファイル』➡『読み込み』➡『ライブラリに読み込み』を選択し、先ほど書き出したpng画像を全て読み込みます。
スクリーンショット-2013-02-22-13.22.39

ステップ3:スプライトシートの生成

読み込みが完了したら、今度はライブラリウインドウから全ての素材を選択して右クリック➡『スプライトシートを生成』を選択します。

スクリーンショット-2013-02-22-13.55.21

最後です。
スプライトシートの出力と書かれている部分でシートの幅と高さや、素材間の距離、背景色などの調整を行い書き出して完了です。
スクリーンショット-2013-02-22-14.01.50

シートの大きさなどは実際の実装にも影響する為、事前に認識のずれが無いかなどの確認が必要です。

また今回は新規ファイルを作成しましたが、Flashアニメーションの任意のキーフレームシンボルからスプライトを生成することも可能になっています。

ご覧いただきありがとうございました。