2012年10月30日火曜日

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

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

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

弊社に来てくれた学生さんは皆さん勉強熱心な方ばかりで、しっかりと話を聞いて下さるので話しがいがありました! (その分緊張しましたけど) さて当日の様子ですが、まず弊社のアレックスの挨拶から始まりました。
紳士らしくそつが無い挨拶でキレイなスタート。 それに続けとデザイナーチーフの挨拶へと移ります。
真剣に聞いてくれる学生さんを前にやや緊張気味のチーフ。
雨に濡れた子羊の様な目をしていたのを僕は忘れません。

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

そうこうしている間にバトンは渡り、僕の自己紹介の番です。
あまり人前で話す機会がないので淡々と話してしまって申し訳なかったですが、無事に自己紹介が出来たのは誰かに見守られていたからな様な気がします。・・・ん?
せっかくなので学生さんにも自己紹介をしていただきました!
自己紹介も終わり、ようやく本題です! やはりトップバッターは我らがチーフから!
主に内容は、「弊社の説明」「事業内容」「デザイナーのお仕事」とお話させていただきました。
震える子羊から若干持ち直したように見えるのは気のせいでしょうか。 続いては僕の方から「Illustratorを使う業務について」お話させていただきました。
Illustratorは素晴らしい!凄いんですよ!と息巻いて語ってしまったので、引かれてないか心配です。 その後は、続いて弊社のイラストレーターの方から「Photoshopを使う業務」全般にお話させていただきました。
弊社ではソーシャルゲームでカードバトルゲームも手がけており、カードイラストなどは社内のデザイナー、イラストレーターで制作しております。 今回は弊社の「マジョカ†マジョルナ」で使用したカードイラストを題材にお話させていただきました。 その間もしっかりと話を聞いてくれる学生さん達。そしてそっぽを向くアレックス。
我らがCEOも影からこっそり見守ってくれていました。
その後は学生さん達とデザイナーとの交流会のようなものへと突入。
聞きたい事、分からない事など遠慮無しに話せる交流会でした! こうして約3時間程度ではありましたが会社紹介は無事に幕を閉じました。 こういった試みは初めてでしたが、僕達の方が刺激を受けた様に思います。学生さん達のスキルの高さに驚きましたし、自分が学生の頃のことを思い出すことができました。こういった会が今後も開ける様に日々スキルアップに務めないといけないと思わされた一日でした。 学生の皆さんにとっても、今回の参加でデザイナーにより興味を持って一層学ぶ励みになってくれると幸いです。


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

2012年10月23日火曜日

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

このエントリーをはてなブックマークに追加

はじめに

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

2012年10月20日土曜日

はじめようemacs 第2回 〜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
2. 次にダウンロードしたmagitディレクトリに移動しmake installを行ないます。
$ make && sudo make install 
※デフォルトでは /usr/local/share/emacs/site-lisp にコピーされます 別の場所にインストールしたい場合には「--prefix=インストール先」を指定して下さい 3. 最後に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

すると上記のように、現在の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(詳細はL)
コミットを取り消す(git revert) v
Pull F
Push P
マージする m
タグ作成 t



まとめ

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

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



===================================

絶賛採用活動中!

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

2012年10月18日木曜日

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

このエントリーをはてなブックマークに追加

エンジニアの草苅です。

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

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

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

ほとんどの場合、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 AnimateToolkit 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(/(?:\r\n|\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;
}

絶賛採用活動中!

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

2012年10月10日水曜日

必見!Windowsでも使える開発におすすめのエディタ

このエントリーをはてなブックマークに追加

 初めまして。エンジニアアルバイトの尾山です。
プログラミング初心者として入社して早6ヶ月が経ち、ようやくRailsでの開発にも慣れてきたところです。

僕は以前までAptanaを使って開発を行っていたのですが、


  1. Aptanaが重い
  2. わざわざ一つのファイルを開くのにAptanaを起動するのがメンドクサイ
  3. Aptana飽きた


ということでカッコイイエディタを探してやろう!と鼻息荒くして探した結果見つかりました!こちら!
sublimetext2 : http://www.sublimetext.com/2


そう!最近巷で噂(?)の sublimetext2 です!


特徴としては...


  1. Max、Linux、Windowsに対応
  2. シェアウェアだが無料でも使用可能
  3. 様々なプラグインが簡単に導入できる
  4. IDEのようなサイドバーが表示できる


 一応シェアウェアらしいのですが、無料でも使えます。恐らく試用期間は無いのですが、変更を保存するときにときどき製品版を買えと言ってくるので、それが面倒だと思う方は購入を検討しても良いと思います。(ただ製品版は$59とちょっと高めな気が...)


 どこぞの記事で僕の尊敬するお師匠が「sublimetext2よりtextmate2でしょ。」といっておられた気がしないでもないですが、とりあえず置いておいて進めましょう。

ダウンロード


こちらのリンクから各自のOSにあうものをダウンロードしてください。

初期設定


とりあえずSidebarを表示させましょう。
View > Side Bar > Show Side Bar から表示することができます。

次にPackageControlというものをインストールします。
SublimeTextでView > Show Consoleでconsoleを表示し、以下のコマンドをコピペして実行します。

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

実行した後一度再起動します。すると今後 Tools > Command Pallete から install とタイプして Package Control: Install Package を実行すると様々なプラグインを導入することができるようになります。



これで一通り設定は完了していますが、Preferences > Setting - User で更に細かい設定をすることができます。ちなみに設定ファイルは全てJSON形式で書かれています。
Preferences.sublime-settings
{
 "color_scheme": "Packages/Color Scheme - Default/Twilight.tmTheme",
 "font_size": 12.0,
 "tab_size": 2,
}

これは私の設定ですが、上から説明すると

"color_scheme":  テーマを変更することができます。私はTwilightというテーマを使用してます。
"font_size":  そのままです。フォントのサイズを変更しています。
"tab_size":  これを変更することでTabキーを押したときのインデントの大きさを変更することができます。


おすすめプラグイン

ここまでで一応エディタとしては使えるようになってるはずです。とても簡単ですね。
ただSublimeText2はプラグインを導入することで更に便利になるのです。
ここでは私が使ってるプラグインをいくつか紹介したいと思います。

SideBarEnhancement
SublimeTextにはSidebarがついててとても便利なのですが、右クリックで選択できるメニューが非常に少なく不便...。そんな悩みを解決してくれるプラグインです。Sidebarのファイルで右クリックを押した際に削除や実行などを選択できるようになります。PackageControlからInstallできます。
RubyTests
エディタ上でRubyファイルを実行したり、テストしたりできます。Railsで開発するときにSyntaxErrorがないか確認するのに重宝してたりします。PackageControlにはないので直接Packageフォルダに突っ込む必要があります。RubyTestsのGithubページ参照。
SublimeERB
RailsのERBでよく使う<%= %>や<% %>をトグルしてくれます。PackageControlからInstallできます。Package名は"ERB Insert and Toggle Commands"です。
・HTML5
 基本的なHTMLの補完を行ってくれます。入ってると便利かと。こちらもPackageControlから。


他にも様々なプラグインがあります。ぜひ色々なプラグインを試してみて、自分にぴったりのカスタマイズにチャレンジしてみてください。

まとめ

この記事で紹介したのはSublimeTextの機能のほんの一部にすぎません。
もちろんダウンロード直後でもCoolなインターフェースを楽しむことができますが、他にもThemeを変更したり、Preferenceを色々触ってみたり、プラグインを導入してみたりして自分好みのエディタにすることができるのも、このエディタの特徴の一つだと思います。
私自身もまだまだSublimeTextを使いこなせていないと思いますが、それでもこのエディタはとても役に立ってくれています。
この記事を見て少しでもSublimeTextに興味を持った方!ぜひ一度使ってみてはいかがでしょうか?




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




2012年10月7日日曜日

150行でここまでできる!Three.jsによる3Dタイピングゲーム

このエントリーをはてなブックマークに追加

はじめに

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

2012/10/4に@ITにThree.jsの入門記事があがりました。
これがとってもわかりやすかったこともあり、私もThree.jsで投稿することにしました。
多彩な表現力のWebGLを扱いやすくする「Three.js」
今回は上の記事で取り上げられていなかった3Dフォントを中心に紹介したいと思います。

Happy Elements株式会社では勉強会が活発に行われており、
その中の1つに「1.5時間で○○を作る」エンジニア向けワークショップがあります。(毎週開催@京都)
※ ○○は毎週かわり、設計/実装方法などは自由です。

今回はワークショップのお題「もぐらたたき」で作成した「もぐらたたき改め3Dタイピング練習ゲーム」を紹介します。
(お題を改めてしまいましたが、インスピレーション次第なんで比較的自由です)
※ 関連:WebGL(by Three.js)、coffeescript

目次

1. 3Dタイピング練習ゲーム
2. 3DフォントでHello World
3. 所感
4. 関連情報


1. 3Dタイピング練習ゲーム

紹介

文字が水面の上に飛び出してくるので、飛び出した文字をタイプするゲームです。
下記程度のアウトプットを、150行程度のコーディングで可能でした。
※ タイプされた文字は赤くなります。
※ マウスで画面をドラッグすると、カメラのアングルが変わります。
※ 見切れてしまっていますが、一番上にスコア(タイプ数)が表示されます。

ソース

簡単な説明(ゲームの実装部分は省略)

カメラ
# PerspectiveCamera以外にOrthographicCameraがあります。
# 引数: 視野角(垂直)、描画範囲の縦横比、カメラから一番近い描画点、カメラから一番離れた描画点
@camera = new THREE.PerspectiveCamera(40, document.width / document.height, 1, 10000)
# カメラの位置
@camera.position.y = 300
@camera.position.z = 1000

レンダラー(sceneの描画を行うためのオブジェクト)
# WebGLRenderer以外にCanvasRenderもあります。
# 引数のオプションは下記を参照
# https://github.com/mrdoob/three.js/wiki/WebGLRenderer
@renderer = new THREE.WebGLRenderer({antialias: true})
@renderer.setSize(document.width, document.height)
@renderer.setClearColor(@scene.fog.color, 1)

# htmlのbodyにcanvasタグを差し込んでいる処理
document.body.appendChild(@renderer.domElement)

光源とコントローラー
# 環境光
# 光源はデフォルトのレンダラーでは4つまでしか配置できません。
light = new THREE.DirectionalLight(0xFFFFFF)
light.position = {x:100, y:1000, z:1000}
@scene.add(light)
# スポットライト
@pointLight = new THREE.PointLight(0xffffff, 1.5)
@pointLight.position.set(0, 100, 90)
@pointLight.color.setHSV(Math.random(), 0.95, 0.85)
@scene.add(@pointLight)

# マウスでカメラ操作するためのコントローラー
# カメラ位置を再計算するために、一定時間ごとに@control.update()が必要
@control = new THREE.TrackballControls(@camera, @renderer.domElement)


# meshに形状の情報(Geometry)と材質の情報(Material)を渡します。
plane = new THREE.Mesh(
  new THREE.PlaneGeometry(10000, 10000),
  new THREE.MeshBasicMaterial({
    color: 0xffffff,
    opacity: 0.8,
    transparent: true
  })
)
# 位置や角度を指定
plane.position.y = 100
plane.rotation.x = - Math.PI / 2
# meshをsceneに追加
@scene.add(plane)

描画
# Stageクラスにrenderを実装
render: ->
  # コントローラー、tween、レンダラーの再描画
  @control.update()
  TWEEN.update()
  @renderer.render(@scene, @camera)

〜〜略〜〜
@stage = new Stage()
@addEventListener "DOMContentLoaded", ->
  # 上述のrender()を100msごとに実行
  @stage.render()
  ((stage) ->
    setInterval ->
      stage.render()
    , 100
  ) @stage

2. 3DフォントでHello World

ソース

簡単な説明

htmlで下記ファイルを読み込んで、js(coffeescriptで書いています)で下記のようにすることで、A-Zの3Dフォントが配置ができます。


# 3D文字を作成
textGeo = new THREE.TextGeometry('Hello World!', {
  size: 70,
  height: 20,
  curveSegments: 4,
  font: "optimer",
  weight: "bold",
  style: "normal",
  material: 0,
  extrudeMaterial: 1
})

# 文字の質感を設定
textMaterialFront = new THREE.MeshBasicMaterial({
  color: 0x66ff66,
  opacity: 1,
})
textMaterialSide = new THREE.MeshBasicMaterial({
  color: 0x00aa00,
})
textGeo.materials = [textMaterialFront, textMaterialSide]

# メッシュオブジェクトを作成
mesh = new THREE.Mesh(textGeo, new THREE.MeshFaceMaterial())
mesh.position = {x: 0, y: 0, z: 0}
mesh.rotation.x = 0
mesh.rotation.y = Math.PI * 2
scene.add(mesh)


3. 所感

[3Dの世界を簡単に表現できる]
カメラやレンダラーや光と陰、鏡面反射などの3D表現は本当に簡単にできます。
(ドラッグで動くカメラが2行で実装できるなど。)
一方で、プロパティの変化によってどのように表示が変わるのかイメージしづらく、修正と表示を繰り返して慣れるまでは時間がかかりました。
(カメラ位置や光の具合など)
[WebGLの時代はまだ先か]
主要ブラウザでもデフォルト無効であったり、IEに至っては未対応です。
※ ChromeやFireFoxでは対応されています。

Android、iPhoneも現時点で基本的に未対応です。
※ Androidでは端末によっては動く場合もあるようです。
※ iPhoneでは4.2以降のiAdやUIWebViewで対応されているようです(デフォルト無効)。
ソニーエリクソンがAndroidをWebGL対応させるソースを公開していたり、iPhoneでも機能制限されているだけの状態ですので、
GPUの発達や今後の流れ次第で対応されるのを期待しています。

Three.jsにはCanvasRendererというレンダラーがあり、WebGLを使わず3Dゲームを表示することもできます。
※ マテリアルなど一部使えない機能があるとのことです。
※ CanvasRendererを使えばiPhoneでも動くのですが、だいぶ重いので小さめのキャンバスにするなど工夫が必要です。
[安定のcoffeescript]
coffeescriptを使うことでクラス化やリファクタリングが楽になり、
単純にタイピング量も減りました。


4. 関連情報


・Three.jsサンプル集
http://mrdoob.github.com/three.js/

・Github
mrdoob / three.js

・coffeescript
http://coffeescript.org/


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


以上、長文にお付き合い下さいましてありがとうございました。

2012年10月2日火曜日

モテカワるびいすとのための rbenv 入門

このエントリーをはてなブックマークに追加

はじめに

こんにちは。嫌われエンジニアの西村(@Sixeight)です。
さいきん Kyoto.rb というコミュニティを始めました。
どうぞよろしくお願いします。

今日はさいきん巷で話題だった(乗り遅れた感ありますね) rbenv について取り上げたいと思います。
弊社ではまだRVMが主流なのですが、アルバイトの若者をたぶらかして少しずつシェアを増やしています。

rbenv ってなに

https://github.com/sstephenson/rbenv

インストール済の複数のRubyをよしなに切り替えてくれるべんりツールです。
37signalsのsstephensonことSam Stephensonさんによるプロダクトです。
他にもかっこ良いプロダクトを書きまくられています。

最初にREADME.mdから抜粋。

rbenvがしてくれること

rbenvは3つのことを提供してくれます。

  1. ユーザ毎に使用するRubyのバージョンを変更できます -> たとえば 1.9.3 と 2.0.0-dev をインストールしていると、これらを好きな時に切り替えて使用できます
  2. プロジェクト毎にRubyのバージョンをを指定出来ます -> .rbenv-version というファイルを読み取って特定のディレクトリ以下のRubyのバージョンを指定できます。
  3. 環境変数によってRubyのバージョンを指定出来ます -> RBENV_VERSION を指定しておくとその環境変数が有効な範囲でだけRubyのバージョンを指定できます。

rbenv がしてくれないこと

rbenvはRVMと比較して以下のことはしないとしています。 RVMの問題点を改善するために産まれた経緯からもこの“しないこと"は重要です。

  1. シェルに変なスクリプトをロードする必要はありません -> rbenvが採用しているShimを使った方法では$PATHにディレクトリを追加するだけで動作します。
  2. シェルのコマンドを上書きしません -> たとえばcdとか。これは大変危険だし、バグの温床になります
  3. 設定ファイルを必要としません -> 必要なのはRubyのバージョン番号だけ!
  4. Rubyのインストールはしません -> rvm install 1.9.3みたいなことは出来ません。rbenvがやることはあくまでインストールされたRubyのバージョンの切り替えです。代りにruby-buildを使うことでrvm installと同様のことを実現しています。
  5. Gemsetの管理はしません -> BundlerはGemsetより良いGemの管理方法なので、Bundlerを使うべき。まだBundlerを導入していないプロジェクト向きにrbenv-gemsetもあります。
  6. 相性が良くないべつのRubyライブラリを変更する必要はありません -> CapistranoでRVMを使うためには結構たいへんだけど、rbenvではそんなことは起りません。
  7. バージョンを切り替えるときに警告を出しません -> RVMのように任意のコードを実行できるようにはなってなくて、バージョン番号しか指定しないので、そもそも信頼する必要がありません。

インストール方法

ふつうのプログラマのみなさんはMacユーザだと思いますので、当然のようにHomeBrewを使います。

RVMのアンインストール

RVMをインストールされている場合は競合して問題が起きないようアンインストールしておく必要があります。 以下のコマンドをタイプしてRVMをアンインストール後、~/zshrcなどに書いていたRVM関連のスクリプトを削除してください。

$ rvm seppuku

rbenv と ruby-build のインストール

rbenv本体とRubyをインストールするのに使用するruby-buildをインストールします。 Rubyは手動でコンパイルするという方はrbenvのみどうぞ。

$ brew install rbenv ruby-build
$ echo 'eval "$(rbenv init -)"' >> ~/.zshenv

Bashの方は~/.zshenvの代りに~/.bash_profileに追記してください。
以上です。簡単でしょ。

Ruby 1.9.3-p194 を入れてみる

これでRubyを管理する準備が整いました。
さっそく1.9.3をインストールしてみましょう。 HomeBrewでインストールしたReadlineOpenSSLをリンクするように指定しています。

$ brew install readline openssl
$ brew link readline
$ brew link openssl
$ CONFIGURE_OPTS="--with-readline-dir=/usr/local --with-openssl-dir=/usr/local" rbenv install 1.9.3-p194

以上でインストール完了です。rbenv versionsと入力してちゃんとインストール出来ているか確認してみてください。 私の環境では以下のように表示されました。(他のバージョンもインストールしています)

$ rbenv versions
  1.8.7-p358
  1.9.2-p290
* 1.9.3-p194 (set by /Users/tomohiro/.rbenv/version)
  2.0.0-dev

via: https://gist.github.com/50aa2ed60c2cec3d49d3

Rubyを切り替える

rbenvを使ってRubyを切り替える方法は3つあります。(rbenvがしてくれること参照)

  1. 通常使用するRubyのバージョンを指定する(global)
  2. プロジェクト毎(特定のディレクトリ以下)で使用するRubyのバージョンを指定する(local)
  3. そのシェル内でのみ使用するRubyのバージョンを指定する(shell)

通常使用するRubyのバージョンを指定する(global)

広く使用するRubyのバージョンを指定します。基本的にはここで指定したバージョンのRubyが使用されることになります。

$ rbenv global 1.9.3-p194

ここで指定したバージョンは~/.rbenv/versionファイルに書き込まれて保持されます。 このバージョンは後述する、.rbenv-version$RBENV_VERSIONによって上書きされます。

プロジェクト毎(特定のディレクトリ以下)で使用するRubyのバージョンを指定する(local)

あるディレクトリ以下にいるときのRubyのバージョンを指定するにはrbenv localを使用します。

$ rbenv local 1.9.3-p194

このコマンドを実行したディレクトリに.rbenv-versionというファイルが作成され、そこにバージョン番号が記述されます。 今後、このファイルがあるディレクトリ以下に移動すると、ファイルに記述されたバージョンのRubyが使用されることになります。 また、このバージョンは$RBENV_VERSIONによって上書きされます。

そのシェル内でのみ使用するRubyのバージョンを指定する(shell)

実行中のシェル内でのみ有効なRubyのバージョンを指定するにrbenv shellを使用します。

$ rbenv shell 1.9.3-p194

これによって、RBENV_VERSIONという環境変数がセットされ、global/localどちらの指定も上書きすること出来ます。

設定した環境変数をリセットするには--unsetオプションを使用します。

$ rbenv shell --unset

仕組み

さて、使い方は分かりましたでしょうか。次は仕組みをみていこうと思います。 詳しい解説はsugyanさんのrbenvの切り替えの仕組み…と、他言語での実験を見て頂くとして、ざっくり概要をまとめたいと思います。

HomeBrewでインストールしたrbenvのユーザ側のディレクトリ構成は以下のようになっています。

$ tree -L 1 .rbenv
.rbenv
├── shims
├── version
└── versions

rbenvではRuby関連の実行ファイルを全て~/.rbenv/shims以下のラッパスクリプトを経由して実行します。 ~/.rbenv/shims以下にはインストールしている全てのバージョンのRubyに関連する実行ファイルのラッパスクリプトが配置されています。 (中身は全て同じです)

当然Rubyインタプリタ自体もここに収められており、which rubyの結果は私の環境の場合/Users/tomohiro/.rbenv/shims/rubyとなります。

このラッパスクリプトが実行されると、rbenvはrbenv-whichを使って実際の実行ファイルの場所を探しに行きます。rbenv-which~/.rbenv/versions/#{rbenv-version}/bin以下を探索します。

$ tree -L 2 .rbenv/versions
.rbenv/versions
├── 1.8.7-p358
│   ├── bin
│   ├── lib
│   └── share
├── 1.9.2-p290
│   ├── bin
│   ├── include
│   ├── lib
│   └── share
├── 1.9.3-p194
│   ├── bin
│   ├── include
│   ├── lib
│   └── share
└── 2.0.0-dev
    ├── bin
    ├── include
    ├── lib
    └── share

ここで言うrbenv-versionは、rbenv versionの実態であり現在使用しているRubyのバージョンを返してくれます。 つまり、1.9.3-p194を使用しているときは~/.rbenv/versions/1.9.3-p194/bin/rubyが実行されて、2.0.0-devを使用しているときは~/.rbenv/versions/2.0.0-dev/bin/rubyが使用される仕組みです。 単純ですよね。

これはインストールしているGemの実行ファイルについても同様で、たとえばBundlerなら~/.rbenv/versions/#{rvenv-version}/bin/bundlerが実行されます。

これはインストールのときにした、rbenv init -によって、$PATH~/.rbenv/shimsが追加されているため実現できています。

つまり

思い切りはしょってまとめると以下のようになります。

  1. rubyを実行すると~/.rbenv/shims/rubyが実行される
  2. ~/.rbenv/shims/rubyは実際の実行ファイルを探して実行しようとする
  3. 実際のファイルは~/.rbenv/versions/#{rbenv-version}/binに配置されていることが分っているためrbenv-versionを決定する
  4. 実行ファイルが見つかったので実行する

rvenv-versionは3ステップでバージョンを確定します。

  1. $RBENV_VERSIONが設定されているか確認する
  2. 設定されていなければ、.rbenv-versionが存在しているか確認する
  3. 存在していなければ~/.rbenv/versionを見る

Shimは誰が作るか

大変重要な役割をしているShimたちは一体誰が作るのでしょうか。答はrbenv-rehashです。 そう、あの毎回実行しなくてはならなくて面倒くさいrbenv rehashの実体です。
これを実行すると、~/.rbenv/versions/*bin/以下を探索して~/.rbenv/shims/以下のShimを再生成してくれます。 とてもめんどうくさいのですがこれを怠るとインストールしたべんりツールが実行できなくなってしまうのです。
(理由を知ってもそれでも面倒だと思うかたはgem i rbenv-rehashしておくとしあわせになれるようです)

ちなみに今まで上げてきたrbenv-*というスクリプトはHomeBrewでインストールした場合は/usr/local/Cellar/rbenv/#{version}/libexec以下にインストールされています。

$ ls /usr/local/Cellar/rbenv/0.3.0/libexec
rbenv                     rbenv-exec                rbenv-hooks               rbenv-prefix              rbenv-sh-shell            rbenv-version-file        rbenv-version-name        rbenv-whence
rbenv-commands            rbenv-global              rbenv-init                rbenv-rehash              rbenv-shims               rbenv-version-file-read   rbenv-version-origin      rbenv-which
rbenv-completions         rbenv-help                rbenv-local               rbenv-root                rbenv-version             rbenv-version-file-write  rbenv-versions

ちょっと便利にする

現在のRubyのバージョンはrbenv versionで確認することが出来ますが、私みたいに面倒くさがりな方にはシェルのプロンプトに現在のバージョンを表示しておくことをお勧めします。
Zshの場合は以下のようにして実現します。

まずはバージョンを文字列として返す関数を定義します。

function rbenv_version() {
  echo -n "${$(rbenv version)%% *}"
}

あとはこれを良い感じにプロンプトに表示します。例えば以下のようにすると1.9.3-p194 >のようなプロンプトを表示できます。

PROMPT='$(rbenv_version) >'

さいごに

rbenvの欠点はrvmに比べてタイプ数が多く左側に集中しているため非常に入力が困難な点です。 一時期はあまりの苦行に耐え切れずにalias rvm=rbenvなどとしていましたが、さすがに気がひけたので最近は入力できるように訓練しています。
貴重なネームスペースを消費しないためにキラキラネームが推奨されているとはいえ、入力しやすい名前をつけるのは重要なことだと思いました。

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

追記

rb<tab>で補完すれば良いのでは???」というご意見を頂きました。
たしかにと思って確認したら、rb<tab>だとrb[space]に補完されました。そういえばこれのせいでrbenvとフルで入力することになっていたのでした。
このrbって一体なんだと思って調べると、何にことはない、自分で定義した使ってないaliasでした。
ということ、rbをaliasから削除して、快適に補完できるようにしました。


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