カカリアスタジオブログ

Happy Elementsのゲームブランド「カカリアスタジオ」の公式ブログです。

デザイナー向け会社紹介を開催しました！！

blog design イベント 会社紹介

皆さんこんにちわ、Happy Elements株式会社の何でもデザイナー岩﨑です。
先日、弊社ではデザイナー志望の学生さん向けに「会社紹介」を開催致しました。

経緯としましては、「ゲーム業界ってどんなだろう？」「興味があるけどどうしたらいいの？」「ゲーム会社のデザイナーって何してるの？寝てるの？」と言った学生さんの声から始まりました。
弊社はソーシャルゲームを作っておりますので、少しでもその疑問に答えることが出来るのでは？というところから今回の開催が決定したというわけであります。

弊社に来てくれた学生さんは皆さん勉強熱心な方ばかりで、しっかりと話を聞いて下さるので話しがいがありました！ (その分緊張しましたけど)

さて当日の様子ですが、まず弊社のアレックスの挨拶から始まりました。


紳士らしくそつが無い挨拶でキレイなスタート。

それに続けとデザイナーチーフの挨拶へと移ります。


真剣に聞いてくれる学生さんを前にやや緊張気味のチーフ。
雨に濡れた子羊の様な目をしていたのを僕は忘れません。

とりあえず会社紹介に入る前に、自己紹介をしていこうという流れになりました。

そうこうしている間にバトンは渡り、僕の自己紹介の番です。


あまり人前で話す機会がないので淡々と話してしまって申し訳なかったですが、無事に自己紹介が出来たのは誰かに見守られていたからな様な気がします。・・・ん？


せっかくなので学生さんにも自己紹介をしていただきました！

自己紹介も終わり、ようやく本題です！

やはりトップバッターは我らがチーフから！

主に内容は、「弊社の説明」「事業内容」「デザイナーのお仕事」とお話させていただきました。

震える子羊から若干持ち直したように見えるのは気のせいでしょうか。

続いては僕の方から「Illustratorを使う業務について」お話させていただきました。


Illustratorは素晴らしい！凄いんですよ！と息巻いて語ってしまったので、引かれてないか心配です。

その後は、続いて弊社のイラストレーターの方から「Photoshopを使う業務」全般にお話させていただきました。


弊社ではソーシャルゲームでカードバトルゲームも手がけており、カードイラストなどは社内のデザイナー、イラストレーターで制作しております。

今回は弊社の「マジョカ†マジョルナ」で使用したカードイラストを題材にお話させていただきました。

その間もしっかりと話を聞いてくれる学生さん達。そしてそっぽを向くアレックス。

我らがCEOも影からこっそり見守ってくれていました。

その後は学生さん達とデザイナーとの交流会のようなものへと突入。


聞きたい事、分からない事など遠慮無しに話せる交流会でした！

こうして約３時間程度ではありましたが会社紹介は無事に幕を閉じました。

こういった試みは初めてでしたが、僕達の方が刺激を受けた様に思います。学生さん達のスキルの高さに驚きましたし、自分が学生の頃のことを思い出すことができました。こういった会が今後も開ける様に日々スキルアップに務めないといけないと思わされた一日でした。

学生の皆さんにとっても、今回の参加でデザイナーにより興味を持って一層学ぶ励みになってくれると幸いです。




一緒に働きたい方、絶賛 募集中！！
Happy Elements株式会社では、ソーシャルゲームのデザインや、イラストの制作に興味を持っているデザイナーを 絶賛募集中 です！
アルバイトも積極募集しているので、ポートフォリオを厚くしたい学生の方、チャンスですよ！

Rubyist必携 pry-railsを使いこなせば幸せになれる

blog development gem ruby ruby on rails rubygems


はじめに

エンジニアの@ryooo321です。
よろしくお願いします。

弊社では多くのプロジェクトでruby on railsを使っています。
ruby on railsで開発する上でrails consoleは欠かせない存在かと思います。
pry-railsを使うと、rails consoleをさらに高機能にできます。

今回は私の感じたpry-rails(と便利なgemいくつか)の便利利用法をいくつか紹介したいと思います。
※ 本記事はKyoto.rbでの発表内容をブログ向けにまとめなおしたものです。

下記ブログにpryの分かりやすい良記事がありまして、内容が重なる部分もありまして恐縮ですが、
ご存じない使い方が一つでもあれば幸いです。
Rubyistよ、irbを捨ててPryを使おう

Kyoto.rbについて

京都市周辺のRuby技術者が集まって刺激しあえる場を作っていこうとするコミュニティです。
毎週木曜日にMeetupを行っていますので、興味のある方はぜひご参加ください。
http://qwik.jp/kyotorb/

目次

1. installと起動
2. シェルコマンド
3. noecho;
4. シンタックス
5. gistにアップロード
6. オブジェクト調査
7. 自作のpryコマンドを追加
8. デバッグ
9. reload!
10. ルーティングやモデルを参照
11. 履歴が充実
12. ソースを参照
13. helpが充実




1. installと起動

インストール

gemで簡単にインストールできます。 
# pry-railsはgemでinstallできます。
gem install pry-rails

# railsプロジェクトのGemfileに下記を追記します。
gem 'pry-rails'

起動

Gemfileに追記されていれば、いつものrails console起動コマンドでpryが立ち上がります。 
rails console

[補足]Gemfileに追記したくない場合
Gemfileに追記しなくても、下記コマンドで起動できます。
pry -r ./config/environment




2. シェルコマンド

lsはともかく、rakeやgitコマンドが打てるのはありがたいです。
gitなどの認証プロンプトも問題ありません。
ruby の変数も展開して使えます。
.ls -la
.bundle exec rake db:migrate
.git commit -m ‘foobar’

# rubyの変数を使う
yyyymmdd = Date.today.strftime('%Y%m%d')
.touch tmp_#{yyyymmdd}




3. noecho;

irbで最終行の出力がechoされて必要なものが見づらくなることがあります。
pryならセミコロンをつけた行は結果が出力されないので、見やすくなります。

例えば、データのcreated_atを参照したいとします。
# irbの場合
irb(main):001:0> items = Item.all
irb(main):002:0> items.each do |item|
irb(main):003:1*   p item.created_at
irb(main):004:1> end
Wed, 17 Oct 2012 14:04:51 UTC +00:00
Wed, 17 Oct 2012 14:05:00 UTC +00:00
# ⬆⬆⬆見たい出力
# ⬇⬇⬇余計な出力
=> [#, #]; 

# pryの場合
[1] pry(main)> items = Item.all;
[2] pry(main)> items.each do |item|
             |   p item.created_at  
             | end;
Wed, 17 Oct 2012 14:04:51 UTC +00:00
Wed, 17 Oct 2012 14:05:00 UTC +00:00
# ⬆⬆⬆見やすい！




4. シンタックス

pryならシンタックスハイライトがデフォルトで表示されて、とても見やすいです。




5. gistにアップロード

ファイルや関数をgistにポストできます。
他のポストオプションはgist --helpで確認できます。
さらにgistのURLがクリップボードに入る気の利かせっぷりです。

# gistにファイル内容をポストする場合
gist -f app/controllers/items_controller.rb
Gist created at https://gist.github.com/38b0d0456e6816be9f3c and added to clipboard.

# ※ Gemfileに「gem 'jist'」を追加し、
# pryコンソール上でコマンドをインストールする必要があります。
install-command gist




6. オブジェクト調査

オブジェクトにcdできて、lsでオブジェクトのメソッドや変数を確認できます。
[1] pry(main)> items = Item.all
[2] pry(main)> cd items
               ⬆変数にcdできます。
               ⬇次行が「pry(#)」になります。
[3] pry(#):1> cd self.first
[4] pry(#):2> ls --grep tax
                    ⬆lsで関数を検索
                    ⬇Itemオブジェクトのメソッド・変数が表示されます。
Item#methods: tax price_with_tax




7. 自作のpryコマンドを追加

下記の関数でpryのコンソールで使えるコマンドを追加できます。
my_command_set = Pry::CommandSet.new do
  command "コマンド名", "helpコマンドでの説明" do |引数|
     # 処理
  end
end
Pry.config.commands.import my_command_set

railsプロジェクトディレクトリ直下に.pryrcを作成すると起動ごとにロードされますので、そこにコマンド追加処理を記載すると自動でロードされます。

こちらのgistに便利なコマンドが4つありました。
https://gist.github.com/1297510 ※ pconsole.shはpry-railsを使っているなら不要です。
※ railsプロジェクトディレクトリ直下に.pryrcを作って、上記gistのpryrc.rbの内容を記述すれば捗ります。

いずれも便利でしたのでお奨めします。
追加されるコマンド処理の概要
copy(contents)クリップボードにコピー
clearコンソールをクリアー
sql(query)sqlを実行
caller_method(depth)呼び出し元メソッドの情報を出力




8. デバッグ


pry-debuggerを使えばブレイクして変数の中身を書き換えたりステップ実行などが可能になります。
ブレイクポイントを打ったり条件停止なども可能です。

gemを追加

Gemfileに下記を追加すると使えるようになります。
gem 'pry-debugger'

使い方

ソースのbreakしたい箇所に下記を記述して、ブラウザなどで対象アクションをコールするとサーバーを立ち上げていたコンソールが停止してデバッグできます。
binding.pry

デバッグコマンド
コマンド意味
step関数の内部に入って1行進める
next現在の関数のレイヤーで1行進める
finish現在の関数を抜ける
continueデバッグを抜けてプログラムの実行を続ける
breakブレイクポイントを管理する




9. reload!

pry-railsならreload!が使えます。
reload!
Reloading...
=> true

#　標準のpryでは全体をリロードする機能がありません。
[2] pry(main)> reload-method ItemsController#index ← reload-methodなら可能
※ rails consoleを使っていた方は当たり前かと思われるかもしれませんが、pry-railsでも以前はデフォルトで使えない機能だったようです。




10. ルーティングやモデルを参照

show-routes

railsで定義したルーティングテーブルを参照できます。
show-routes
    items GET    /items(.:format)          items#index
          POST   /items(.:format)          items#create
 new_item GET    /items/new(.:format)      items#new
edit_item GET    /items/:id/edit(.:format) items#edit
     item GET    /items/:id(.:format)      items#show
          PUT    /items/:id(.:format)      items#update
          DELETE /items/:id(.:format)      items#destroy

# grepすることで絞り込みもできます。
show-routes --grep destroy

show-models

MySQLのテーブル定義を参照できます。
show-models
Item
  id: integer
  name: string
  created_at: datetime
  updated_at: datetime

※ grepすることで一致した文字列が赤く表示されます。
show-models --grep created_at

show-middleware

railsで利用しているミドルウェアを参照できます。
show-middleware
use ActionDispatch::Static
use Rack::Lock
use ActiveSupport::Cache::Strategy::LocalCache
use Rack::Runtime
use Rack::MethodOverride
use ActionDispatch::RequestId
use Rails::Rack::Logger
use ActionDispatch::ShowExceptions




11. 履歴が充実

histコマンドが充実していて、再実行やgrepができます。 
 hist --help
Usage: hist
       hist --head N
       hist --tail N
       hist --show START..END
       hist --grep PATTERN
       hist --clear
       hist --replay START..END
       hist --save [START..END] FILE




12. ソースを参照

find-methodでメソッドを検索

[1] pry(main)> find-method before_filter
AbstractController::Callbacks::ClassMethods
AbstractController::Callbacks::ClassMethods#before_filter
AbstractController::Callbacks::ClassMethods#prepend_before_filter
AbstractController::Callbacks::ClassMethods#skip_before_filter
AbstractController::Callbacks::ClassMethods#append_before_filter

show-methodでソースを参照

※ show-sourceのエイリアスです。
[1] pry(main)> show-method 'hoge'.pluralize

From: path to gem/activesupport-3.2.8/lib/active_support/core_ext/string/inflections.rb @ line 25:
Number of lines: 7
Owner: String
Visibility: public

def pluralize(count = nil)
  if count == 1
    self
  else
    ActiveSupport::Inflector.pluralize(self)
  end
end

edit-methodでエディタを開く

下記コマンドでエディタが開きます。
vimやSublimeText2やemacsで開くこともできます。（後述）
edit-method 'hoge'.pluralize

下記コマンドでエディタを変更できます。（永続化するには.pryrcに記述）
# vimの場合
Pry.config.editor="vim"

# 流行のSublime Text 2 @macなら下記でいけます。
Pry.config.editor="/Applications/Sublime\ Text\ 2.app/Contents/SharedSupport/bin/subl"

# コマンドラインから起動するシムリンクを貼れば下記でいけます
Pry.config.editor="subl"
# 起動シムリンク
ln -s "/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl" /usr/local/bin/subl

gemのドキュメントを参照

※ gem 'pry-doc'が必要です。
show-doc ActiveRecord::Base

ri

rdocドキュメントを読めます。
※ gem installで-no-riしている場合はもちろん見れません。
[1] pry(main)> ri Hash#delete_if
Hash#delete_if

(from ruby core)
------------------------------------------------------------------------------
  hsh.delete_if {| key, value | block }  -> hsh
  hsh.delete_if                          -> an_enumerator
   

------------------------------------------------------------------------------

Deletes every key-value pair from hsh for which block evaluates
to true.

If no block is given, an enumerator is returned instead.

  h = { "a" => 100, "b" => 200, "c" => 300 }
  h.delete_if {|key, value| key >= "b" }   #=> {"a"=>100}




13. helpが充実

helpとタイプすると、pryのメソッドを確認できます。
さらに、pryのメソッドに--helpをつけることでメソッドのオプションを確認できます。




14. 関連情報

・公式
http://pryrepl.org/
・github wiki（とても詳細な設定や機能説明が記載されています。）
https://github.com/pry/pry/wiki

一緒に働きたい方、絶賛 募集中
京都で開発してみたいというエンジニアの皆さん、ご応募お待ちしています！
技術力を伸ばしたい学生さん、アルバイトも可能なのでご応募お待ちしています！
大阪、滋賀、神戸から通勤実績があります

はじめようemacs 第2回 〜emacsでGitを使う(magitの紹介とチートシート)〜

blog emacs git magit

HappyElementsエンジニアの早田です。

前回に引き続きまして、emacsの話をします。 今回は前回の投稿と趣きを変えまして、emacsでGitを使用する際に便利そうなelispを紹介します。

テーマの理由としては現在HappyElementsでは全社的にSVNからGitに移行しているため、 私の所属しているチームでもGitを使用することとなりました。 その際に使えそうなelispがあったので、使用方法のメモも兼ねて紹介しておきたいと考え、今回のテーマとしました。 (既に様々なサイトやブログで紹介されていますがご了承下さい)

前提条件

・gitコマンドが使用出来る状態であること ・emacsがインストールされていること ・emacsの設定について基本的な知識を有すること

インストールと設定方法

  1. まずgithubからMagitをダウンロードします。ターミナルで以下のコマンドを実行します。
$ git clone https://github.com/magit/magit.git
  1. 次にダウンロードしたmagitディレクトリに移動しmake installを行ないます。
$ make && sudo make install

※デフォルトでは /usr/local/share/emacs/site-lisp にコピーされます 別の場所にインストールしたい場合には「--prefix=インストール先」を指定して下さい

  1. 最後にinit.el(または.emacs)に以下を書き加えます。
(require 'magit)

私は使用していませんが、magitをgit-svnで使用する場合には

(require 'magit-svn)

StGitを使用する場合には

(require 'magit-stgit)

で使用出来るようになるそうです。

操作方法(とチートシート)

上記の設定が完了すれば、すぐに使用出来るようになります。 ここからはHappyElementsでのプロジェクトで普段主に使用する機能の操作方法とその他に機能のチートシートを書いておきます。

1.まずはmagitを立ち上げます。diredでgitで管理しているプロジェクト(.gitがあるディレクトリ)に移動し、 下記を実行する(git status)

M-x magit-status

ss

すると上記のように、現在のgit-statusが表示されます。

2.次にまだgit管理下にないファイルをaddするために、ファイル名の上でsキーを押下します。サンプルではindex.htmlをaddしています。(git add)

すると、Staged changes:が表示されindex.htmlがaddされていることが分かります。

3.では次にコミットログを記入しコミットを行ないましょう。(git commit) ・status画面にカーソルを当てている状態で、cを押下。すると下記の通り画面上部にコミットログ記入画面が表示されます。

・最後に(C-c C-c)を押下します。

以上で、ファイル作成→インデックスへの登録→コミットの一連の流れが完了しました。

その他の機能の操作方法は以下の通りです。(全てという訳ではありません)

機能 操作コマンド
.gitignoreにファイルを追加 i
ファイルの物理削除 k
全ファイルを全てadd(git add -A) S
addの取消 u(全て取り消す場合はU)
ログ一覧表示(git log) l(詳細はＬ)
コミットを取り消す(git revert) v
Pull F
Push P
マージする m
タグ作成 t

まとめ

本日書いた以外にもmagitには色々な機能があります。またmagitより便利なelispが世に出回っている可能性もあります。 私自身まだ使いこなせていないため、表面的な部分しか触れておりませんが、普段業務でに関してはこの程度でも十二分に便利にこなせていけるのではないかと考えております。

相変わらず稚拙な文章にお付き合い頂きありがとうございます。記事を読まれた方でもっと詳しく使い方や詳細な設定方法をお知りになりたい方は こちらの公式のマニュアル(英文)をどうぞ。

絶賛採用活動中！

京都で携帯電話向けのアニメーションを作ってみたい、ソーシャルゲームを作ってみたいという社会人、学生の皆さん、ご応募お待ちしてます！
大阪・滋賀・兵庫から通勤実績があります！

ソーシャルゲームのアニメーションと CreateJS

animation blog craetejs flash html5 javascript


エンジニアの草苅です。

突然ですが、ソーシャルゲームのアニメーションはどのようなライブラリやツールを使って実現されているかご存じでしょうか？
今回はそのあたりを簡単にご紹介しようと思います。

ソーシャルゲームのアニメーションは大きく分けて、フィーチャフォン向けとスマートフォン向けの二つがあります。

フィーチャーフォン向けアニメーション

ほとんどの場合、Flash Lite で制作されており、ほとんどの場合 ActionScript 1.1で作られています。
これは ActionScript 1.1 にすることでほとんど100%に近いくらいの携帯電話で動作させることができるからです。

ただ、Flash Lite はかなり制限事項（100kb制限など）が多いことから、バイナリ置換などでテキストや画像を差し替えたり、バイナリ文字列をつなぎ合わせて swf を作成したりしている会社がほとんどだと思います。
このあたりはかなりディープな話になるので、今回はあまり触れません。

スマートフォン向けアニメーション

会社によって対応が違いますが、GREE では Reel、mobage では ExGame など各プラットフォームから提供されている HTML5 の Flash 再生（変換）ツールを利用している会社が多いと思います。
まずフィーチャーフォン向けに Flash を作り、それを Android OS 向けに少し修正を加え、最後に iOS 向けには変換ツールを利用する。一番割合の多いフィーチャーフォンをまず作り、次に割合の多い Android OS、最後に自動変換で iOS に対応というのは、とても自然な流れでしかも開発が楽なのでこの選択肢をとる会社が多いのだと思います。
また、HTML5 の Flash 再生ツールを提供していないプラットフォームに対応するため（もしくはその他の理由で）、iOS 向けには Google Swiffy を利用している会社も多いと思います。

ただ、Android OS が Flash を標準搭載しなくなってきたことで少し流れが変わりつつあります。
上記の流れのまま対応するのであれば、これまでの方法に加えて、Android OS 4.0 以降であれば iOS 同様、Flash ではなく変換ツールを利用するような形になります。
しかし、これからフィーチャーフォンの優先度が下がっていくことを考えると、Flash の優先度は下がっていくため、スマートフォンは Flash を利用せずに、すべて HTML5 で開発するという会社が増えてくると思います。

そうなると、Flash 感覚で操作できる HTML5 オーサリングツールが欲しくなります。
そんなときに使えるのが Adobe が公開している Edge Animate と Toolkit for CreateJS です。

Edge Animate はまさに HTML5 のオーサリングツールで、Flash 感覚で HTML5 アニメーションを制作できます。出力されるアニメーションは jquery.js、jquery.easing.js、eage.js などのライブラリに依存した HTMLです。
Tookit for CreateJS は Flash CS6 以降で利用できるプラグインで、Flash から HTML5 アニメーションを出力することができます。出力されるアニメーションは CreateJS というライブラリに依存した HTML です。
CreateJS は EaselJS、TweenJS、SoundJS、PreloadJS からなる JavaScript ライブラリで、Flash に近い表現が JavaScript（Canvas）を使ってできるというものです。


弊社ではスマートフォンアニメーションの実現方法はアプリごとに違いますが enchant.js、Flash + Swiffy、CreateJS などを利用しています。  

以上、ソーシャルゲームのアニメーションのためのツール・ライブラリについて簡単に紹介しました。

最後に

個人的には特に CreateJS に注目しており、約半年前から社内のスマートフォンアニメーション勉強会などで CreateJS に取り組んでいます。


CreateJS 自体はまだもう一つのところもあったりするのですが、その一つの例として createjs.Text が日本語のマルチライン（lineWidth）に対応していないということがあります。
今回の記事ではソースコードがまったくなかったので、それに対応するソースコードを貼り付けてこの記事を締めさせて頂きます。



String.prototype.toArray = function() {
  var array = [];
  for (var i=0,max=this.length;i<max;i++) {
    array.push(this.charAt(i));
  }
  return array;
};
// Text(EaselJS 0.5.0)
createjs.Text.prototype._drawText = function(ctx) {
  var paint = !!ctx;
  if (!paint) { ctx = this._getWorkingContext(); }
  var lines = String(this.text).split(/(?:rn|r|n)/);
  var lineHeight = this.lineHeight||this.getMeasuredLineHeight();
  var count = 0;
  for (var i=0, l=lines.length; i<l; i++) {
    var w = ctx.measureText(lines[i]).width;
    if (this.lineWidth == null || w < this.lineWidth) {
      if (paint) { this._drawTextLine(ctx, lines[i], count*lineHeight); }
      count++;
      continue;
    }

    // split up the line
    var words = lines[i].toArray();
    var str = words[0];
    for (var j=1, jl=words.length; j<jl; j++) {
      // Line needs to wrap:
      if (ctx.measureText(str + words[j]).width > this.lineWidth) {
        if (paint) { this._drawTextLine(ctx, str, count*lineHeight); }
        count++;
        str = words[j];
      } else {
        str += words[j];
      }
    }
    if (paint) { this._drawTextLine(ctx, str, count*lineHeight); } // Draw remaining text
    count++;
  }
  return count;
}

絶賛採用活動中！

京都で携帯電話向けのアニメーションを作ってみたい、ソーシャルゲームを作ってみたいという社会人、学生の皆さん、ご応募お待ちしてます！
大阪・滋賀・兵庫から通勤実績があります！
© Happy Elements K.K