HTML要素の画面上の座標を取得する

jQueryで選択した要素の画面上の座標を取得したいと思ったが、jQueryが提供しているoffset()関数が返すのはページ上の座標であって、画面に表示されている範囲での座標を返すものが見当たらなかった。 それで、自作した。

$.fn.extend({
  viewportOffset: function(){
    $window = $(window);
    p = this.offset();
    return {left: p.left - $window.scrollLeft(), top: p.top - $window.scrollTop()};
  }
});

使い方

$('.selector').viewportOffset(); // => {left: xxx, top: yyy}

coffeescriptで書いたものを翻訳して動作確認はしていないので間違っているかもしれん。

RubyMineの使用メモリを増やす

RubyMineが更新されるたびにググってる感じなので、備忘録として記しておく。

/Applications/RubyMine.app/bin/idea.vmoptions

を

~/Library/Preferences/RubyMine50/

の下にコピーして、その中身を編集する。 例えばこんな感じ。

-Xms256m
-Xmx1024m
-XX:MaxPermSize=250m
-XX:ReservedCodeCacheSize=64m
-XX:+UseCodeCacheFlushing
-XX:+UseCompressedOops

(追記：2015-06-27)

ファイル名がidea.vmoptionsからrubymine.vmoptionsに変わっていた。 https://www.jetbrains.com/ruby/help/tuning-rubymine.html

Applicative Programming

Functional JavaScriptという本を読んでると、Applicative Programmingという言葉が出てきた。 定義の文章を読んでも何を指している言葉なのかよくわからなかったが、

  • _.map
  • _.reduce
  • _.filter

などのunderscore.jsの関数ように、引数に関数を与え、内部でその関数を利用するという関数の組み合わせ方で処理を構築する方法を指すようだ。

オブジェクト指向な視点で言えばストラテジーパターンに相当するんですかね。

わざわざ名前をつけるほどのことなのかとも思ったが、C/C++ぐらいしかしらない状態で、RubyだかLispだかOCamlあたりではじめてmap関数的なものを知ったときには便利だと思った記憶がある。

Functional Javascript: Introducing Functional Programming With Underscore.js

Functional Javascript: Introducing Functional Programming With Underscore.js

Macのファインダからターミナルを開く

ちょっと前に購入したMacをまだファインダからターミナルを開けるようにしてなかった。

これまでは「cdto(https://code.google.com/p/cdto/)」というアプリを使っていた。 今回もそれをインストールしようと検索したところ、別の手段を見つけた。

それは、「サービス」を使う方法だ。

システム環境設定 > キーボード > キーボードショートカット

を開き、左側カラムのサービスを選択する。

f:id:tsimo:20130613234727p:plain

そして「フォルダに新規ターミナル」か「フォルダに新規ターミナルタブ」にチェックを入れる。

すると、ファインダでフォルダをCtrl+クリックして「サービス」を選んだときに「フォルダに新規ターミナル」等の項目が追加されている。 それを選べば選択したフォルダをワーキングディレクトリとしてターミナルが開く。

でもcdtoの方が手軽かなー。

Rubyのコードを書く際のルール

引き続きコード改善系の記事

http://robots.thoughtbot.com/post/50655960596/sandi-metz-rules-for-developers

  • クラスは100行まで
  • メソッドの中身は5行以内
  • メソッドのパラメータは4つまで
  • コントローラがインスタンス化するオブジェクトは1つだけ

4つ目のルールは、ウェブのダッシュボードページのようにいろんな要素が組み合わさる画面を出力する場合に従いづらいが、そういうときはファサードとなるクラスを間に入れて、その中で必要なオブジェクトを作ったりしてるらしい。

1つ前の記事におけるビューオブジェクトとかになるんですかね。

要するに、クラスは小さく、メソッドも小さく、個々のクラス、メソッドの役割を明確にってことですかね。 それはそれで「クラスの数多すぎ問題」とか言い出す人が出てきそうな気もするけど。

膨れ上がったモデルから機能を分離する切り口

Rails

Railsのモデルにちょびちょびと処理を追加していると、いつの間にかサイズが膨れ上がってしまっていたりする。

Railsでロジックを書く場所として与えられている場所はコントローラかモデルなので、「コントローラは単純にしなさい」という教えに従うと、必然的に多くの処理はモデルに書くことになってしまい、モデルが膨れ上がる結果に陥りやすい。

それを解消するために、モデルから切り出せるものは切り出しましょう、ということで、下記の記事に、膨れ上がったモデルから機能を別の独立したクラスに切り出すための７つの切り口が提示されていた。

http://blog.codeclimate.com/blog/2012/10/17/7-ways-to-decompose-fat-activerecord-models/

以下はそのメモ。

バリューオブジェクト

上の記事では例として、costという数値フィールドをRatingというバリューオブジェクトで取り扱っている。 Ratingはcostで初期化され、AからFの文字表現に変換される。 RatingにはRating値どうしの大小を比較する演算子が定義される。

サービスオブジェクト

複雑な処理、複数のモデルにまたがる処理、外部サービスへのアクセスなどをラップする。

フォームオブジェクト

複数のモデルを一つのフォームで更新するのに使う。 nested_attributesを使うよりもスッキリする。

クエリーオブジェクト

複雑なクエリーでActiveRecordのサブクラスがscopeやクラスメソッドだらけになったら、それらをクラスとして分離する。

ビューオブジェクト

画面表示用のみにデータを加工する必要があるときは、モデルにロジックを追加するのではなく、ビューオブジェクトとして独立したクラスに切り出す。 ダッシュボードページなどもか。

ポリシーオブジェクト

モデルの複数のフィールドの値を組み合わせて1ランク抽象度の高い状態を表すような場合に、独立したクラスでそれを表現する。 サービスオブジェクトが更新系の処理で、こちらは読み取り用のオブジェクト。

デコレータ

モデルの操作の前後に処理を追加する。 コールバックと同じ目的だが、そうした処理が毎回は必要ではない場合や、モデルに役割を持たせすぎるのを避けたい場合などに。 例としては、処理の実行後にSNSに投稿する処理を付け足すといったこと。

京都インディーズゲームセミナー Unity入門講座に行ってきた

先日「第2回 京都インディーズゲームセミナー Unity入門講座」という催しに参加してきた。

ぼくはこれまでスーファミ、N64、GC、Wii、Wii U、GBA、NDS、3DS、PS2、PS3、PSP、PS Vitaを購入してきた程度にはゲームを嗜んでいるが、どちらかというとゲームよりも実用的なシステムの方への関心が強い。 しかし、使って楽しい、使って心地良いシステムを作るための考え方としてゲーム開発方面の知識を学びたい、といった動機で参加した。

Unityに関しては、知ってはいたけど使ったことはなかった。

「Unity 超入門 〜Unityって何だ？〜」

最初はUnityの高橋さんによるUnityについての説明で、ツールのデモ、アセットストアの紹介、Unityで作られたゲームの紹介がなされた。

Unityという開発環境

Unityのサンプルのプロジェクトを使い、Unityがどういう環境なのかということの解説がなされた。

具体的には、環境内でゲームを実行中に画像素材を外部のツールで編集すると更新された画像がゲーム中に反映されたり、新しいオブジェクトを投入してテクスチャを貼り付けたり、物理モデル化してプレイヤー攻撃によってぐらついたりするようになったりといったデモが行われた。 また、自動で銃を撃ち続けるようにスクリプトを修正すると、自動的にコンパイルが実行されて即時にゲームに反映されたりもした。

アイデアを手早く形にして試すのに非常に良い環境だということを強調されていた。

プロトタイプをUnityで作り、なんならそのままUnityで商品にしちゃえよ、的な。

アセットストア

ゲームで使用する素材を購入できるストア。 2Dゲームを作るためのツールキットとか、マルチプラットフォーム対応のデータ保存処理プラグインなんてのも売っているそうな。

ゲームの例

Bad Piggies

Angry Birdsの敵役のブタを主人公にしたゲームで、与えられた部品を組み合わせて乗り物を作るとそれが自動的に動き出し、うまく宝物にたどり着くとステージクリアというもの。 Angry Birdsとその後の作品ではUnityを使っていなかったが、プロトタイプ開発としてUnityを使い、そのまま商品になったらしい。

Jack Lumber

Jack Lumberという木こりのゲームを、開発者のエピソードを交えて紹介していた。 http://jacklumbergame.com/

「Unity ライブコーディング – 2D ゲームを作ってみよう！」

２コマ目のセッションはUnityを使ったゲーム開発のライブコーディングだった。 洞窟物語の作者天谷さんが企画、キャラクターデザイン、音楽を提供し、それを使ってUnityの山村さんがゲームを作成する。 ゲームの内容は、猫のキャラクターが飛んでくる魚を弓矢で狩るというものだ。 時間は５０分。 山村さんが開発を進める横で、高橋さんと天谷さんが解説や雑談をするという形式で進められた。

作業はプレイヤーとなるキャラクター画像をスプライトに貼り付け、２コマのアニメーションで動きをつけるところからはじまった。 動作のアニメーションを左右と上向きそれぞれについて作成し、カーソルに反応して向きを変えるようにする。 向きごとに一つのコントローラが割り当てられ、コントローラを切り替えることで向きが変わる。

それから

  • 弓を射ることができるようにする。
  • 敵を作る
  • 背景をつける
  • 当たり判定をつける
  • スコア表示をつける

といったステップをこなしてメインのゲーム部分が完成。

その後はタイトル画面、オープニングなどを追加して全体が完成。 これらは事前に作っておいたものを有効にしただけだった。

タイトルとかメインのゲーム部分の切り替えはどうするのかなと思ったが、Unity上でこれらの要素は「シーン」と呼ばれ、作成したシーン一式をドラッグアンドドロップでどこぞに放り込む操作をしていた。 ゲームを開始すると一番上のシーンがスタートして、その後のシーンの切り替えはスクリプトでやるのかな。

Unityでは2Dのゲームを作る場合も、3D空間にモデルを配置して、それを2Dに見えるようにするだけだったが、開発中はモデル群の配置を斜め上から見ることができたりするので、それはそれで構造が把握しやすくて便利だと思った。

途中、敵キャラが見えないという不具合にハマっていたが、光源がないと見えないパネルに敵キャラを置いていて、かつゲーム内の環境に光源がなかったためだった。2Dゲームでは光源のない環境でも表示される、Unlit/Transparentというシェーダーがよく使われるそうだ。

Q&A

最後はUnityのお二人と天谷さんをパネラーとしたQ&Aのセッションだった。 以下、実際のQ&Aに沿っていないけど、メモしたものを書き連ねたもの。

実務でUnityを使う上で気をつける点は

最初の開発は失敗するものなので、まずはひとつ作ってみて、そこからが本番だと思ってほしい。 デザイナー、音楽、プログラマーが同じ環境で作業できるのがいい。

Unityみたいなものが出てきたらプロのプログラマーはどうなるの？

今はインディーズが盛り上がってきてるけど、またゆり戻しがあったりして、落ち着くところに落ち着くんじゃないか、みたいな話。 プロのゲームプログラマーがなくなるってことはないだろう。

独自色のあるプログラマーってのは絵を描ける人が多い気がする。 自分は絵が描けないと決めつけないで、自分なりに絵を描いたり音楽やったりしてみれば？

モチベーションの保ち方

一人で開発するのはそれが難しい。 自宅で作業すると片付け始めちゃったり、ちょっと息抜きと思って始めたゲームで一日が潰れちゃったりするので、開発「しか」できない環境に身をおくのがいい。 インキュベーション施設を使ってみたら、これがすごく良かった。（天谷さん）

懇親会にて

イベント後の懇親会では数人で高橋さんを囲んで長々と直接お話しできる機会に恵まれた。 そこでいろいろ質問ができたので、それも書いておく。

C#とJSはどちらが主流？

C#のほうが多いらしい。 言語別の使用人口だとJSの方が圧倒的だと思うが、ゲームの世界ではそうでもないようだ。 JSの緩さが嫌われている？

ちなみにUnityのJSは型宣言があったりして、JSというよりActionScriptな感じ。

ゲーム以外の用途

軍事や警察の訓練シミュレーションや、NASAの何か（なんだったのか忘れてしまったが、観測データを視覚化するようなものかな）。 Webブラウザ向けのUnityプラグインはNASAの事例で普及が大きく進んだらしい。

アート系でもぼちぼち？

環境による出来・不出来はないの？

Titaniumを引き合いに、Unityはサポートしているプラットフォームによって出来の良し悪しってないの、と聞いてみた。 ゲームの場合、標準のUI部品などを使わないので、Titaniumとかがターゲットとするアプリと比べるとプラットフォームによる違いが少なくてマルチプラットフォーム対応はしやすいんじゃないのかな、という話だった。

Unityの日本法人

現在9人。

ゲーム業界事情

ブラウザ向けにソーシャルゲームを作っていたところが、パズドラショックで闇雲にネイティブアプリに手を出そうとする傾向が強まっているそうだ。 その手段としてUnityを使おうとするんだけれども、Unityがあれば素人でもゲームが作れるってわけじゃないんだよ！ という話。

洞窟物語

洞窟物語の作者である天谷さんと少しお話することができた。 洞窟物語は何年か前に遊んでいたことがあって、その御礼を伝えることができてよかった。 聖域を結局クリアできずじまいですと伝えたところ、聖域はもともと存在していなかったが、天谷さんの友人にゲームが簡単だと言われ、だったらおまけで難しいステージ入れたるわい！と追加したステージだそうな。 それがいつしか「聖域をクリアしたらトゥルーエンド」という話になって広まっていったとのこと。 とは言っても存在するステージはクリアできないと敗北感がある。

ついでに「効果音ってどうやってつくってるんですか？」というなんとも素朴な疑問をぶつけてみたところ、自作のツールで正弦波、ノコギリ波、ノイズ等の基本パターンとなる波形を組み合わせて作っているらしい。

さいごに

見知った顔が全然なくて、Web系の人々とゲーム系の人々って分断されちゃってるのかなーという印象を受けた。