2012年9月28日金曜日

Happy Elements流オフィスの作り方

このエントリーをはてなブックマークに追加
こんにちは、エンジニア兼代表取締役CEOの新井です。

最近、従業員から、採用のために砂浜に埋まった方が良いんではとか、鴨川で流された方が良いんではとか、よく分からないことを言われて困っています。一体採用とどういう関連性があるのでしょうか。もう秋なので、鴨川とか入れられたら風邪を引いてしまいますね><

そんなことはさておき、私は自称エンジニアでPCが友達なのですが、代表取締役CEOというお仕事もしていて、最近はそちらの方が忙しくなってしまっています。

そんな中、最近久々に手がけたものづくりとして、当社京都オフィス3階の内装デザインをしたので、今回はそれについて紹介させて下さい。
※元々あった2階オフィスが手狭になってきたため、同じビルの3階の部屋を追加で借りました。

はじめに - 設計思想

会社が大きくなるにつれて当然オフィスも大きくなっていくのが普通ですが、どうも広いオフィスというのが苦手です。なんかたくさんの人に気をつかわないといけなくなって窮屈な思いをしたり、時には何か自分がちっぽけな存在に感じてしまったりしますよね。

6畳とかそんなサイズのオフィスで数人でやってた頃のような、一人一人の貢献が強く影響し、一人一人の個性が強烈に出るような、ゲリラみたいな組織を作りたいのです。我々の間にはチームプレイなどという都合のいい言い訳は存在せん!

そんなわけで、当社はゲームタイトル毎にチームに分かれているのですが、チーム毎に部屋が分かれていて、チーム毎にのびのびと仕事ができる環境を重視した設計になっています。

エントランス

3階は従業員専用なので受付的なのも必要無いですし、そもそも外見にお金をかけるのももったいないので、黒い壁紙でも適当に張っておいて下さいということにしました。

扉は指紋認証になっています。わざわざカードを持ち歩くのは面倒ですからね。

安心と信頼のセコムも入ってます。朝に解除し忘れて、警備員がすぐに飛んできて申し訳ない思いをすることもごくごくまれにあります。本当にごめんなさい><




下駄箱

扉を入ったらすぐ下駄箱があり、オフィスには靴を脱いで入ります。日本人は家には靴を脱いで入るのにオフィスでは靴を脱がないのに何か違和感があり、オフィスでも靴を脱ぐようにしています。靴を履いていない方が快適に仕事ができますし、オフィスも汚れにくいので一石二鳥ですね!


カフェスペース

下駄箱の先には、本人が言うのもなんですがおしゃれなカフェスペースがあります。とはいえ、私の無理難題を聞いてくれた内装業者のグリッドデザインさんからの提案がベースになっているので、私が偉そうに言えるようなものではありません。グリッドデザインさん、本当にありがとうございます。左が入ってすぐの写真で、右が逆側から見た写真です。天井は無理言って抜いてもらいました。
 
設計思想で少し触れたとおり、当社ではチーム毎に部屋が分かれているのですが、チーム間のコミュニケーションがとれるように、オフィスエントランス付近に広めに共有スペースをつくりました。 某社がうらやましかったからついカッとなってやってしまった…という訳では無いことを祈ります。仕事の息抜きをする他、全体会議をやったり、勉強会をやったり、お昼を食べたりと多目的に利用できます。昨日の夜にもKyoto.rbの会合が行われていました。

右の壁にはホワイトボード塗料が塗ってあって文字を書いたりできます。「今ここにない未来は自分で創る」みたいなアツい言葉で埋まるはずだったのですが、気がつけば落書きで埋め尽くされています。侍参上とかいう謎の書き込みなども。。でも、きっとこの記事を読んだ従業員たちがアツい言葉を書いてくれると思います。お前ならできる!!

  

一部の従業員の方の要望より、テーブルサッカーを置いてみました。バカでかくてかなり邪魔です、はい。でも意外と盛り上がってプレイしている人を見かけるので許します。最近話題のアメリカ人が強すぎて勝てません。欧米ですね。

あと、テーブルサッカーの手前くらいに、掘りごたつスペースがあります。密談に最適です。なんということでしょう、テーブルの脚を折りたたむとフラットな床になるではありませんかという匠の技が仕込まれています。ただし、フラットにして何をするというわけではありません。




さらに、バーカウンターも作りました。置いてあるお酒は全部ただで飲めます。冷蔵庫にビールも入っていて、夜な夜な企画会議をやるには最高の場所です。毎日誰かは飲んでいるような気がするので、きっとすごいゲームの企画がぞくぞくとされているに違いないのです!!また、月1で全社飲み会をしているのですが、この前はこのスペースでやりました。外に出なくて良いし、いつまでも追い出されないので便利です。

あと、写真には写っていないですがGEのオサレ冷蔵庫があって、お茶やコーラ、レッドブル等が完備されています。もちろん無料ですが、レッドブルの消費が早すぎて困っています。

ダーツは私の思い出の私物なのですが、ちょっと反応が悪くなってきていて買い換えの危機です。


廊下

カフェスペースのホワイトボードの壁の間にある扉を開けると、執務スペースへと続く廊下が出現します。これからどんなフィギュアで埋め尽くされるのか楽しみです。(違)

ちなみに、コンクリート調の壁紙なのですが、なんかスパイ映画っぽくて格好いいのです。



執務スペース

3階には4つの部屋があります(2階にも3つの部屋があります)。写真では分かりにくいのですが、部屋と言っても、閉まっていると気軽に入りにくいので完全に閉ざされているわけではありません。

壁紙がそれぞれ違って結構雰囲気が違いますが、それぞれの部屋に置いてあるものは大体同じです。壁沿いに作り付けの机があって、さらに真ん中に打ち合わせをしたりゲームの資料やお菓子を置いたりするための机があります。あと、部屋毎にホワイトボードがあって、スケジュールやタスクなんかが書いてある…はずです。イスはPCの次に重要と考えているので、アーロンチェア、バロンチェア、リープチェアなど高性能チェアを揃えています。





  

さいごに - 仲間募集中

当社は知る人ぞ知る京都Rubyソーシャルゲームを開発している会社なのですが、一緒にゲームをつくる仲間を募集中です。エンジニアやデザイナー・イラストレーター・プランナー・ディレクター志望の皆さん、ご応募お待ちしています!

技術力を伸ばしたい、プログラムに興味がある、データ分析は任せてくれ、イラストを描きまくりたい、とにかくベンチャーで働いてみたい、という京都の学生の皆さん。アルバイトも大募集中なのでご応募お待ちしています!

大阪、滋賀、神戸から通勤実績あり
当社には伝説のウェブデザイナーもいます

2012年9月26日水曜日

超便利な10のMacアプリ

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

はじめに

どうも、Happy Elements プランナーのアレックスです。

前回に引き続き、Macを使いこなすシリーズの第2部としてご紹介させていただきます。

1部:OSXの小技
2部:便利アプリ特集 (今ココ)
3部:便利アプリ特集 〜 Alfred編

Macのアプリを片っ端から使ってみるのが大好きで、今回は全力でオススメ出来る10アプリを紹介したいと思います。

紹介アプリ一覧:

  1. Moom
  2. Caffeine
  3. Dragon Drop
  4. F.lux
  5. Monosnap
  6. Fluid
  7. Total Finder
  8. Notational Velocity
  9. 1Password
  10. Dropbox


Moom (App Store, ¥850)


Moomという名前は、「Move」と「Zoom」を掛け合わせたもの(だと思う)。
画面内のウィンドウの位置や大きさを簡単に管理してすっきりしたレイアウトにしてくれるアプリです。


基本的に、機能はウィンドウの左上にある緑のZoomボタンの拡張。1秒程マウスオーバーすると上のようなポップアップが現れて、ワンクリックで画面をリサイズできます。


また、このようにグリッドを表示することによって、マウスドラッグでマスを選択するとその位置にウィンドウが動きます。マスの細かさも設定可能なので、自由自在にウィンドウを並び替えることができます。

キーボードショートカットもかなり充実していて、すべての操作にショートカットを登録してマウス無しでもリサイズが可能です。

Caffeine (App Store, 無料)


Caffeineは超シンプルなアプリ。一定時間触らないと画面が暗くなったり、スリープモードに入ったりすることを止めるアプリです。

メニューにアイコンが出るだけ
このアイコンにコーヒーが入ってる状態だとパソコンが起きててくれる。空っぽだと普通に暗くなったりスリープする。「1時間だけ起きといて」というお願いにも答えてくれます。

Dragon Drop (App Store, ¥450)


Dragon Dropはドラッグ・アンド・ドロップの機能を拡張してくれるアプリ。ファイルをドラッグして別の場所に持って行きたいけど、ドラッグしながらだとなかなか上手に操作できなくて変なとこに落としてしまって「キーーー!!!」なんてことありませんか?
そんな時の「これちょっと持ってて」に答えてくれるのがDragon Dropです。

ドラッグしたいものを持ちながら少しマウスをふるふる回すと、小さい画面が飛び出ます。そこに一旦持ってるものを置いてから別の所を操作して、次の行き先にドロップする準備ができたらまたDragon Dropの画面から取り出します。余計なことをせずに、必要な時だけスッと出てくるこいつ、イケメンすぎる。


F.lux (無料)


F.luxはとても目にやさしいアプリ。日が暮れて夜になってくると、自動的に画面の色を目にやさしく調整してくれます。



いきなり切り替えたらオレンジすぎてびっくりするけど、徐々に変更してくれるので、知らない間に癒してくれています。デザイナーさんなど、色が大事なお仕事をされてる場合はちょっと使いにくいかもしれませんが、1時間無効にするなどのオプションもついています。

Skitch Monosnap(無料)

最初はSkitchを紹介する予定だったんですけど、Evernoteに買収されたあとのバージョンアップでかなりイケてない感じになってしまって泣きました。まだSkitchのバージョン1.Xを使っている方。絶対にアップデートしないほうが良いと思います。

そこで急遽変わりになるアプリを探したところ、見つけたのがMonosnap。画面キャプチャのアプリは多々ありますが、中でもこれはかなり手軽で、キャプチャした画像に直接文字を書いたり、◯や矢印を付けるのも簡単でオススメできます。


まずはショートカットキーから画面キャプチャ。Shift + Cmd + 5 がオススメです。


キャプチャした後は、ボカしたり矢印さしたりできます。この画面をリサイズすると画像自体の大きさを変更できて、完了したらコピー、保存、またはクラウドにアップロードして共有することができます。


Fluid (無料)


Fluidは Site-specific Browser (SSB) を代表するアプリです。機能的にはウェブブラウザなんですけど、利用を1サイトに制限して、そのウェブサイトをまるでアプリかのように使うことができます。


ドックで使われるアイコンも自由に設定できて、ページのタイトルに未読の更新数が表示されるようなサイトならアイコンにバッジを表示することも可能になります。

個人的には主にYammerのために使っていますが、FacebookやTwitterに使うケースも多くて、ブラウザで常にタブを開いておく必要がなくなり、快適です。UserstyleやUserscriptにも対応しているので思う存分カスタマイズすることもできます。

Total Finder (¥1461)


Total FinderはFinderの機能を拡張するアプリ。わりと有名なので、既に使っている方も多いと思います。

細かい機能設定も沢山ありますが、一番便利なのがFinderにタブが付くこと。



これを使う前は、複数のウィンドウを開くことに不満を感じていたわけではないですが、使ってみると後戻りできなくなりました。やっぱタブいいです。

Notational Velocity (nvALT) (無料)

Notational Velocityはテキストファイルの作成・管理・検索が素晴らしく優秀なアプリ。さらにその機能をforkして拡張したものがnvALTです。直接データを変更するようになっているので保存という概念がなく、検索が恐ろしいほど早いです。


マウスを使わなくても操作が出来るというコンセプトを大事にした超機能的なUI。ファイルの同期もDropboxやSimplenoteで簡単にできます。

以前はEvernoteを使っていたのですが、ほぼテキストデータしか使っていなかったことに気づき、テキストに適してるアプリを探した結果、これにたどり着きました。

1Password (¥4300)


最近は有名なサイトでもユーザーデータがハッキングされることがニュースになることが多く、複数サイトで同じパスワードを使うことが危険だということを再認識させられます。いくら自分が気をつけていても、セキュリティがあまいサイトからパスワードが漏れて、同じアドレスとパスワードを使って別のサイトにも登録していた場合はそっちからも情報が盗まれる恐れがあります。

出来ればすべてのサイトで別々のパスワードを使うことが理想ですが、そんなに多くのパスワードを覚えられるはずがありません。そこで役立つのが多々あるパスワード管理アプリで、中でもオススメするのがこの1Passwordです。


マスターパスワードでアプリを開くと、保存されているパスワード以外にも個人情報、メモ、アプリのライセンス、クレジットカード情報なども一緒に管理できます。


1Passwordの一番の魅力はブラウザ・エクステンション。ブラウザに追加されるボタンからすぐにサイトへ飛んで自動的にログインしたり、アカウントの新規作成時もパスワードを作成して自動的に保存してくれます。

iPhoneとAndroidのアプリもあり、これを使っているといつでも安心です。


Dropboxはこの中で一番よく知られているアプリだと思いますが、使い方は本当に山のようにあります。

先ほど紹介した1PasswordのデータファイルをDropbox内に入れることによって、パソコンを2台以上もっている方も簡単に同期することができます。その他にもあらゆるアプリの設定ファイルをDropboxで管理すると、少し使いやすくカスタマイズした時など、すぐにもう1台のパソコンでも反映されます。

実際そのフォルダをDropbox内に移動できない場合も、同期させたいフォルダへのsymlinkを作るとDropboxはちゃんと働いてくれて、自分はその方法でSkypeのチャットログを複数のパソコンの間で同期しています。

おしまい


以上、自分が毎日愛用しているアプリのご紹介でした。使ってみたいと思ったアプリがありましたら、是非一度ためしてみてください。

また、「そんなのより俺が知ってるアプリのほうがずっと便利だぞ!」という方は是非コメントを残していってください。

それでは、最後まで読んでいただき、どうもありがとうございました!


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

2012年9月19日水曜日

Git初心者によるGit講座~問題とその対処法~

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

はじめに


はじめまして、アルバイトの齋藤です。
1週間ほど前にエンジニアのアルバイトとして入社し、現在はGitとRuby on Railsについて学びながら日々精進しています。

Gitを全く知らなかった私は、問題への対処法を書籍やWebで調べつつGitを勉強してきました。
まだまだGit初心者な私ですが、今回はそんなGit初心者がつまずかないための方法、またつまずいたときの対処方法を紹介していきたい思います。

目次

  • ありがちなミスとその対処法
  • ブランチの作成、切り替え
  • ミスを減らすためには

ありがちなミスとその対処法


その1.誤ってaddした場合
$ git status
# ...
# Changes to be committed:
#   (use "git reset HEAD ..." to unstage)
#
#       modified:   testA
#       modified:   testB

$ git reset HEAD testA
Unstaged changes after reset:
M       testA  # testAのadd取り消し
上の例は、testAを誤ってaddした場合の対処法が書かれています。
addの取り消しは、(use "git reset HEAD ..." to unstage)
と表示されているので覚える必要もないでしょう。

またaddしたファイルすべてを取り消したい場合は、
以下にあるように、"git reset HEAD"とすることで取り消すことができます。
$ git reset HEAD
Unstaged changes after reset:
M       testA  # testAのadd取り消し
M       testB  # testBのadd取り消し

その2.誤ってcommit した場合
$ git commit -m 'commit testA and testB'
da89b0f] commit testA and testB
 2 files changed, 2 insertions(+), 1 deletion(-)

$ git reset --soft HEAD^ # 1つ前のHEADに戻る

$ git status
# ...
# Changes to be committed:
#       modified:   testA
#       modified:   testB
上の例は、testAとtestBを誤ってcommitした場合の対処法が書かれています。
commitの取り消しを行う、 "git reset --soft HEAD^" とは、
--softは、ファイルが修正された状態を維持することを表し、
HEAD^は、1個前のコミットの状態を表します。
つまり、ファイルをそのままの状態で1個前のコミットまで戻す(reset)することができます。

またcommitのコメントを書き換えたい、またはタイプミスした場合
以下のコマンド "git commit --amend" を使うことで直前のコミットを修正することができます。
またオプションの "-m 'コメント'" とすることでいちいちエディタを開くことなくコメントを打つことができます。
$ git log
...
    git is herd

$git commit --amend -m 'git is hard'

$ git log
...
    git is hard

その3.正しいbranchに切り替え忘れた場合
$ git status
# ...
# Changes not staged for commit:
#       modified:   testA
#       modified:   testB

$ git branch
* master
  ...

$ git stash save
Saved working directory and index state WIP on master: 0349083 test1
HEAD is now at 0349083 test1

$ git status  # 誤ったbranchのaddは取り消される
# ...
nothing to commit (working directory clean)
上の例は、test1ブランチに行うはずの修正をmasterブランチで行ったしまった場合の対処法が書かれています。
一度修正ファイルをaddし、その後 "git stash save" をします。
その後のgit statusからわかるように、addは取り消され、修正ファイルも直前のコミットに戻ります。

git checkoutでブランチを切り替え、 "git stash pop" をすることで、別ブランチで行っていた修正ファイルを移すことができます。
$ git checkout test1  # 正しいbranchに切り替え
$ git stash pop
# Changes not staged for commit:
#       modified:   testA
#       modified:   testB

その4.修正したファイルを元に戻す
$ vim testA  # testAを修正
$ vim testB  # testBを修正
$ git checkout testA # testAのみ修正を戻す

$ vim testA  # testAを再度修正
$ git reset --hard HEAD  # testAとtestBの修正を戻す
上の例では、修正ファイルをすべて元に戻すときの場合が書かれています。
コミットを取り消すときの --soft HEAD とは違い、 --hard HEADをします。
--hardは、ファイルも同様にHEADの状態まで戻すことを表します。

ブランチの作成、切り替え


その1.リモートブランチに切り替え
$ git branch -a
* master
  ...
  remotes/origin/test2

$ git checkout -b test2 origin/test2  # "ローカルブランチ名" origin/"リモートブランチ名"
Branch test2 set up to track remote branch test2 from origin.
Switched to a new branch 'test2'

$ git branch
  ...
* test2  # 新しく作成されたローカルブランチ
masterブランチからtest2リモートブランチに切り替える場合、上記の方法で行います。

もし切り替えるべきリモートブランチが見つからなかった場合、
以下の "git fetch" をすることでリモートブランチが更新され、表示されるようになります。
$ git fetch  # リモートブランチの更新
$ git branch -a

その2.新しくリモートブランチを作成
$ git branch -a
  ...
  test3
  ...
  remotes/origin/test2
新しくリモートブランチを作成する場合は下記の方法で行います。
今回は、例としてtest3というローカルブランチをリモートブランチに追加します。

branch -r とはリモートブランチのみを表示するオプションです。
$ git push origin test3
Total 0 (delta 0), reused 0 (delta 0)
To git@github.com:
 * [new branch]      test3 -> test3

$ git branch -r
  ...
  origin/test3  # 新しく作成されたリモートブランチ

ミスを減らすためには


その1.ファイルを変更する前に確認すること
$ git branch
* master
  ...
その2.commitpushする前に確認すること
$ git status
# ...
# Changes not staged for commit:
#       modified:   testA

$ git diff
...
その1、その2ともに当たり前のことではありますが、
現在のブランチの確認、statusによるファイルの状況などを随時確認することで
誤ったaddやcommitを減らせると思います。
またdiffを用いて、ファイルの修正部分を確認するのも忘れないようにしましょう。



一緒に働きたい方、絶賛 募集中

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

2012年9月17日月曜日

TextMate2 はじまったな

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

エンジニアの草苅(@kusakari)です。

昨年の3月にそれまで使用していた Thinkpad のディスプレイが壊れたのを機に、Windows から Mac に移行したのですが、未だに Mac の使い方がよくわらないため、必要最低限の機能だけを使用して何とか毎日をしのいでいます。

僕の場合、Windows のエディターは秀丸を利用していて、Mac に移行してからは主に Coda を利用しているのですが、 不満がないわけではないので、今回はブログネタ探しにエディター調査をしてみることにしました。

僕がエディターを見るポイントは次の通りです。
  • 軽い
  • プログラミング言語のシンタックスハイライト
  • スペースや改行コードの表示
  • インデント(スペース×2)
  • 導入・設定が簡単

これらのポイントについて調査したのは次の二つのテキストエディターです。
  • TextMate2
  • SubLime Text2

TextMate2

TextMate は元々英語圏で人気のあったテキストエディターですが、日本語に対応しておらず日本人にはなかなか手を出しづらいエディターでした。

昨年末に TextMate2 のアルファ版が公開され、その時点では日本語対応がもう一つだったのですが、今年の8月9日には github にてソースコードが公開され、完全日本語対応されたようです。

github からソースコードをダウンロードしてきて、ビルドしなければならないので割と面倒ですが、github のページに書いてある通りにすることで TextMate2 をビルドすることができました。

ビルドしたアプリは展開した場所ではなく、次の場所にあります。
~/build/TextMate/Applications/TextMate/TextMate.app

TextMate の拡張は Bundle という名前で、例えば、各プログラミング言語のシンタックスハイライトやテーマを Preferences => Bundles から簡単にインストールすることができます。

また、Preferences から選択できない、野良 Bundle も簡単にインストールすることができます。

まず、すべての Bundles は以下に配置されます。
~/Library/Library/Application Support/TextMate/Managed/Bundles/


例えば、行末のスペースをハイライトするのであれば、次のようにして導入します。

cd ~/Library/Library/Application Support/TextMate/Managed/Bundles/

git が入っていない場合は zip で取得後、Whitespace.tmbundle というディレクトリ名で展開するだけでもかまいません。

TextMate2 に関しては設定・導入が簡単とはいえないものの、その他のポイントは押さえているように感じました。

TextMate2 で Ruby のコード補完

TextMate2 では Ruby のコード補完ができるようなので試してみました。僕の環境は rvm なので、rvm の TextMate 用の設定ページに従って進めます。

簡単に流れを説明すると次の通りです。まずは wrapper を作ります。
rvm wrapper 1.9.3 textmate

textmate_ruby ができているか確認します。
which textmate_ruby

use しなおします
rvm use 1.9.3 --default

TextMate2 の Preferences => Variable から TM_RUBY を登録し、textmate_ruby へのパスを指定します。

option + esc で Ruby のコード補完ができます。

僕の場合、スクリプトエラーが出たのですが、Ruby Bundle を入れ直すことで直りました。Rails ソースを含むコードを補完をしてくれるので、それなりに便利ですが重いです。gem が多すぎるのかと gemset を作ってみましたが、あまり変わりませんでした。

SubLime Text2

SubLime Text2 は TextMate2 がなかなかリリースされない間に、勢力を伸ばしてきたエディターで、TextMate2 の上位互換エディターとの評価を得ているようです。

TextMate2 は Mac だけなのですが、こちらは Windows、Linux にも対応しているようです。

実際の使用感はスクロールがスムーズで、TextMate2 よりも軽い気がしました。また、インストールするだけで Ruby のシンタックスハイライト、行番号表示、ミニマップ表示、黒背景の Color Schema になっているのは楽で良いと思いました。デフォルトでコード補完がされるのもライトユーザーにはポイントが高いような気がします。

SubLime Text2 の拡張は package という名前です。

デフォルトではスペースが表示されなかったので、まずは Package Control という package をダウンロードし、Preferences => Browse Packages を開き、Installed Packages 内にコピーします。

SubLime Text2 を再起動後、Tools => Command Palette から Package Control: Install Package を選択し、Trailling Spaces という名前の package をインストールすることで、スペースがハイライトされるようになります。

SubLime Text2 はデフォルト機能が充実している上に、Package Control を入れることで、package の追加・削除も簡単にできてかなり使いやすいと感じました。

まとめ

TextMate2 全然はじまってないし、SubLime Text2 一択だろ!って気もしますが、僕的にはデフォルトでコード補完をしてくる SubLime Text2 のおせっかいっぷりが気に入らないので、TextMate2 をしばらく使ってみようかと思います。

絶賛採用活動中!

京都でソーシャルゲームを開発してみたいという社会人、学生の皆さん、ご応募お待ちしてます!
大阪・滋賀・兵庫から通勤実績があります!

記事のタイトルについて

この記事のタイトルはホッテントリメーカーを使って生成しました。
ホッテントリメーカーでは114ブックマーク(推定)と表示されていたので、最低でも100はてブはつくと確信しています。


2012年9月11日火曜日

coffeescriptを好きな8つの理由と4つのトピック

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

はじめに

エンジニアの@ryooo321です。
賛否両論ありますが、私はcoffeescriptには良い印象を持っており、積極的に使っています。
今回は私がcoffeescriptを好きな理由と、Source map、livescriptなどの周辺のトピックについても紹介できればと思います。

目次

・coffeescriptを好きな8つの理由
・4つのトピック
 -> Source mapでcoffeescriptのコードのままデバッグ
 -> 実行速度は早くはならない
 -> haskell風に書けるcoffeescript派生LiveScript
 -> ブラウザ実行


どんな方にcoffeescriptを薦めるのか

coffeescriptを採用するかはメンバーのスキルやプロジェクトの風土などによりケースバイケースだと思っています。
javascriptで満足しているなら、やらなくてよいと思います。
javascriptの下記の点に不満があるなら、coffeescriptを採用するメリットがあると思います。
・javascriptの文法や特性に精通していないメンバーがいる。
・javascriptのコーディング方法がメンバー間で揃わない。
・大規模なプログラム群をjavascriptで書いている。
・javascriptを書いていて楽しくない。


coffeescriptを好きな8つの理由

その1. 学習コストが少ない

javascriptとpythonかrubyを書ける方であれば、かなり簡単に習得できます。
(恐らく1時間もかからずざっと書けるようになるかと。)

その2. javascriptの罠を勝手に回避

coffeescriptで書くだけで、下記のようにjavascriptの罠を回避できます。
・varのつけ忘れによるグローバル変数定義は、意図しなければ起きない
・定義箇所によっては意図しない挙動を引き起こす、関数・変数定義のホイスティングを回避
・挙動が曖昧な弱い等価比較(==)は、厳密な等価比較に変換(===)
・ブラウザ間で挙動が変わるjavascript予約語を、自動でエスケープ
・文末セミコロンの省略やオブジェクト末尾カンマによるエラーを回避

その3. 出力するjsがとにかく綺麗

コンパイルで出力されるjavascriptはかなり綺麗で、そのままjavascriptで運用してもよいくらいです。
関数や変数の名前はそのまま出力されます。
単行のコメントはコンパイル時に削除され、ブロックコメントは残ります。
綺麗なので、coffeescriptがもしもオワコンとなっても、javascriptファイルだけで十分運用できるレベルです。

その4. 定型句が楽に書ける

class、継承、for文、デフォルト引数、可変長引数、変数バリデーションなど
javascriptでよく使われる定型句が、coffeescriptのシンタックス表現で楽に使えます。
coffeescript自体がjavascriptのスニペット群であるかのように、綺麗で素直なjavascriptに変換してくれます。
※ ステップ数はjavascriptの1/3などとも言われますが、実用上ではそんなに減ったことはありません。
私の場合ではせいぜい30%減ってところです。

その5. 楽しく書ける

インデントによる表現など無駄を省いたコーディングスタイルで、とにかくタイピングが楽です。
後置のif文
list.push(item) if item.price is 0
   ↓↓↓変換後↓↓↓
if (item.price === 0) list.push(item);


?による存在演算子
price = list["price"] ? 100
   ↓↓↓変換後↓↓↓
price = (_ref = list["price"]) != null ? _ref : 100;

関数のdefinedも確認できます。
# listが定義済みかつpush()が実装済みならitemをpushする
list?.push? item
   ↓↓↓変換後↓↓↓
if (typeof list !== "undefined" && list !== null) {
  if (typeof list.push === "function") list.push(item);
}


ファットアロー(=>)による実行コンテキストの固定化
javascriptでは関数のthisは実行コンテキストを指し示すので、「var self = this;」などと書いて関数の中ではselfを用いるのですが、coffeescriptでは簡単に回避します。
# 実行コンテキストに関わらずfunc内でのthisが常に自分自身のオブジェクトを指すように定義
class Hoge
  func: (name)=>
    this.name = name
   ↓↓↓変換後↓↓↓
var Hoge,
  __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

Hoge = (function() {

  Hoge.name = 'Hoge';

  function Hoge() {
    this.func = __bind(this.func, this);

  }

  Hoge.prototype.func = function(name) {
    return this.name = name;
  };

  return Hoge;

})();

その6. コンパイラをほとんど意識しないでよい

コンパイラの動きが直感的で、コーディング中ほとんど意識せず作業できます。
ファイルの変更を監視して自動でコンパイルするコマンドがあるので、編集後すぐにブラウザで確認できます。
coffee -wc hoge.coffee
また、Javascript Lintでの構文チェック(-l)や複数ファイルのjoin(-j)も自動でできます。
ブラウザではjavascriptでデバッグすることになりますが、数千行程度のコードでも特に迷ったことはありません。

その7. レビューしやすい

javascriptの気をつけるべきポイントの多くをケアしてくれるので、レビュアーのチェックポイントはロジックを中心に集中できる。
ロジック以外のお作法的なコードが少ないので、理解しやすい。

その8. javascriptライブラリの選択肢が広がる

node.js界隈を中心に多くのライブラリがcoffeescriptで書かれています。
coffeescriptを学ぶことで間口が広がるかと思います。


4つのトピック

その1. Source mapsでcoffeescriptのコードのままデバッグ

概要(CoffeeScriptRedux)(いまいち)
私は特にjavascriptでしかデバッグできない現状に不満はないのですが、Source mapという仕組みでcoffeescriptのコードでデバッグが可能です。
Source mapはChromeのデベロッパーツールの右下の設定から「Enable source maps」をonにすることで利用できます。

こちらを使うとステップ実行やブレークポイントもcoffeescriptのまま実行できます。

※ 公式のcoffeescriptでは現在未対応ですが、CoffeeScriptReduxというコンパイラで対応済みですので今回はこちらのコンパイラを使います。
※ 現時点でCoffeeScriptReduxは複雑なCoffeeScriptファイルをコンパイルできませんでした。(条件未調査ですが平易なコードならコンパイルできましたというレベルです。)

CoffeeScript Source Maps
https://github.com/michaelficarra/CoffeeScriptRedux

仕組み
coffeescriptファイル(.coffee)とjsファイル(.js)と、さらにマッピングファイル(.js.map)を用意することでcoffeescriptソースでデバッグできます。
ブラウザで読み込むファイルはこれまで同様jsです。
jsの最下部に「//@ sourceMappingURL=app.js.map」とmapファイルへのjsからの相対パスを記載します。
mapファイルは、CoffeeScriptReduxのcoffeeコマンドに--source-mapオプションをつけることで出力できます。
git clone git://github.com/michaelficarra/CoffeeScriptRedux.git
cd CoffeeScriptRedux
make deps
make test

npm install source-map
# jsの階層でコマンドを実行しなければ正しいファイルが生成されません。
cd jsの階層へ
./../CoffeeScriptRedux/bin/coffee --js -i app.coffee > app.js
./../CoffeeScriptRedux/bin/coffee --source-map -i app.coffee > app.js.map
(echo; echo '//@ sourceMappingURL=app.js.map') >> app.js


その2. 実行速度は早くはならない

coffeescriptはjavascriptに1対1で変換される設計になっています。
そのため、javascript以上に早くはなれません。
超えることはできませんが、無駄のない高速なコードに変換してくれます。
比してjsxでは人の手では難しいレベルまで関数のインライン展開などの最適化を行ってくれるため、高速化されるとのことです。

jsxについてはこちら
http://jsx.github.com/


その3. haskell風に書けるcoffeescript派生LiveScript

coffeescriptからforkされたCocoからさらに派生したLiveScriptはhaskell風に書けるようです。
本家
http://gkz.github.com/LiveScript/
こちらのブログで紹介されています
http://d.hatena.ne.jp/mizchi/20120706/1341568588

その4. ブラウザ実行

基本的にはサーバーサイドでコンパイルして、jsをブラウザで読み込むのですが、「coffee-script.js」を読み込むことで、ブラウザ側でコンパイルできます。




関連情報

・CoffeeScript
http://coffeescript.org/
ブラウザ上で実行できる環境と小さなチュートリアル集があります。
ここを一読すれば一通り理解できるかと思います。

・jsx
http://jsx.github.com/

・LiveScript
http://gkz.github.com/LiveScript/
http://d.hatena.ne.jp/mizchi/20120706/1341568588



一緒に働きたい方、絶賛 募集中

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

2012年9月3日月曜日

Flash・HTML5を利用した携帯・スマホ向けアプリ開発(1)

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

はじめに

はじめまして、用務員の板倉と申します。
HEKKでは、用務員業務の他に、女性向けアプリの開発・運営をおこなっています。

何回かに分けて、はじめようポケット・バーの携帯表示の仕組みやHTML5に対応したときの話を記載したいと思います。

はじめようポケット・バー

はじめようポケット・バー(ポケバー)は、バー経営シュミレーションゲームです。最初にmixiでリリースしたのが2010年10月。その後GREE、モバゲーへと順次リリースをおこないました。mixiのリリースからもうまもなく2年経ちますが、今でも多数のユーザー様に遊んでいただいていますので、とても長く楽しめるアプリとなっています。

リリースした当初は、ポケバーはFlash Lite 1.1以上が動作するいわゆるガラケーのみの対応でしたが、スマホ対応の要望が増えてきた影響もあり、 2011年6月にAndroidに対応。それから8ヶ月後の2012年3月に、iPhone対応をリリースしました。

iPhone対応に向けて


Androidとは異なり、iPhoneではFlashが動作しません。そのためHTML5などの別の技術を使用する必要があります。
またバーの店内に配置することが可能なインテリアの総数は、その当時ですでに1,300個を超えていて、これを新しい技術で動作するように置き換える必要があり、かなりの作業ボリュームが見込まれました。ポケバーの運営を続けながら、この作業をおこなうには当時リソース不足で、外注先にお願いすることになりました。見積り工数はおよそ2ヶ月。2011年の年末にかけて作業をおこなっていただきましたが、なかなか進捗が出ませんでした。

しびれを切らして、何か短期間でiPhone 対応できる方法がないかを検証したところ、Swiffyを利用すれば比較的簡単に対応が可能なことがわかりました。Swiffyとは、Flash(SWFファイル)をHTML5に自動変換してくれるツールで、Googleが無料で提供しています。

以前からSwiffyについては随時調査をしていましたが、ポケバーのFlashが特殊なことを行なっているため、Swiffyで変換したHTML5が正常に動作せずに、利用を断念していました。しかしSwiffyもバージョンが上がって、以前に比べて性能も向上したせいもあり、ポケバーのFlashを一部修正することで、Swiffyで動作させることに成功しました。

この時の対応を元に、簡単に注意点として以下にまとめます。

Swiffyで動作させるためのFlashを作成する際の注意点

インスタンス名と変数名

duplicateMovieClipで作成したインスタンス名と同名の変数名を作ると、movieClipにインスタンス名でアクセスできなくなります。
例えば、以下のようなコードは動作しません。
duplicateMovieClip("l", "l1", depth);
set("l1", 1);
l1:_x = 100; // ×動作せず
フレーム上に直接おいたmovieClipも同名にするとアクセスできなくなることがある(アクセスできる場合もある)ので、インスタンス名と変数名の同名は避けたほうがよいです。


duplicate時のインスタンス名指定

インスタンス名指定に階層を含めると、Swiffyでは動作しません。
duplicateMovieClip("/b/ip/s", "ss",_root.tn + 1); // ×動作せず
tellTarget("/b/ip") { duplicateMovieClip("s", "ss",_root.tn+ 1); //◯ 動作します

条件式

2項目以降の論理和の場合、trueを記述しないとSwiffyでは偽に判定されてしまいます。
a = false;
b = true;

if (a || b) {
 // Swf ではここが呼ばれる
} else {
 // Swiffyではここが呼ばれる
}

以下のように記述すれば、どちらでも動作します。
if (a == true || b == true) {
 // SwfでもSwiffy でもここが呼ばれる
} else {
 // ここは呼ばれない
}

フレーム名

フレーム名に数字(例えば2)をつけた場合、Flashではa=2の場合にgotoAndPlay(a)を呼び出してもそのフレームには移動せずに、付けられたフレーム名には無関係に2番目のフレームに移動しますが、Swiffyだと移動してしまいます。フレーム名にメモ代わりに数字をつけてる場合は注意が必要です。

日本語対応

日本語が含まれているFlashの場合、パブリッシュ設定を携帯で動作させるための以下の設定のままだと、日本語が文字化けしてしまいます。

  パブリッシュ設定:
  Player: Flash Lite 1.1
  スクリプト: ActionScript 1.0(Flash Lite 1.1を選ぶとこれ以外選択不可)

そのため日本語が化けないようにするためには、PlayerをFlash Player6以上にする必要がありますが、これだとFSCommand2 などのアクションスクリプトがエラーになってしまい、携帯とHTML5用とでflaファイルを分けないといけなくなり、ちょっと不便です。
FSCommand2("FullScreen",true); // Flash Lite2だとエラー
FSCommand2("SetQuality","high"); // 同上

そこでおすすめは、以下の設定です。

  パブリッシュ設定:
  Player: Flash Lite 2.0
  スクリプト: ActionScript 1.0

ただし、これだとFSCommand2は使用できる代わりに、空の変数の扱いが異なるので、これを使用している場合は対応が必要になります。例えば、_root.return_url が未定義の場合
if (_root.return_url eq "") {
    gotoAndPlay("load"); // Flash Lite 1.1ではここが動く
} else {
    gotoAndPlay("start"); // Flash Lite 2.0ではここが動く
}

Flash Lite 2.0 では値が入っていない変数は undefined となり、Flash Lite 1.1 が空文字("")となっていたため、両者で結果が異なってしまうことになります。

なので、こういうときは、以下のように書き換えておけば、携帯版とHTML5版とでSWFを分ける必要はでるけど、コード(flaファイル)は共通化がおこなえます。
if (_root.return_url eq _root.dmy) { // _root.dmy はFlash内で使用していない変数を選ぶこと
    gotoAndPlay("load"); // どちらも_root.return_urlが定義されるまでこちらが呼ばれる
} else {
    gotoAndPlay("start");
}

問題点

以上で、ポケバーのFlashをSwiffyで動作させることができるようになりましたので、最初の一歩はクリアといったところですが、ポケバーのインテリアは1,000種類以上あり、これを1つのSWFにして、Swiffyに変換したのではデータ量も多く実用に耐えれるものではありません。
また、そもそもSwiffyで変換可能はSWFファイルのサイズは、1Mバイトが上限になっているのですが、すでに100Mバイトを超えるSWFになっていたため、そのままでは変換すらおこなうことができません。

そのため

  1. 1つのSWFではなく、ある程度の細かいファイルサイズに分けること
  2. HTML5を動的に生成して必要なインテリアのみを含めたHTML5にすること


などが必要になります。

それから

Swiffyが書きだしたHTML5をよく見てみると、swfmillが吐き出すxmlと構造が非常によく似ていることに気付きました。

swfmillはSWFファイルをxmlに変換してくれる無料のツールです。ポケバーでは携帯用のSWFファイルの動的生成に利用しています。

もしかしたら、携帯用のSWFファイルの動的生成と同じような方法で、HTML5も動的生成させられるのではないか・・・

早速Swiffyが吐き出すHTML5の解析が始まりました。
  
  (次回につづく・・・かもしれません)


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