2012年3月21日水曜日

渋谷 HTML5+CSS3+JS de ゲーム勉強会 x コロプラ事例発表



ちょっと畑違いだけど勉強会に行ってきました。
覚えてることだけ。

メディアクエリー


メディアクエリー
デバイスごとにCSSを適用したりする。
書いたことあるけど、メディアクエリーって名前だったんだ。仕様読まないとなー。

画像系の高速化


起動時のHTTP経由の画像取得が遅い

アプリに埋め込んで解決。
ただしキャッシュはブラウザキャッシュが最速なので、アプリから画像を引っ張ってくるほうが遅い。

ネットワークが不安定でも動くように、LocalStrageを使う。



  • WebStrage

    • LocalStrage

    • SessionStrage



SessionStrageはウインドウを閉じると消える。
Strageを使う際は他のユーザの影響で変化するパラメータ(オフラインの間にサーバー側で値が変わってる値)などは保存しない。

懇親会で、上書きされたりしないの?って聞かれたけど、以下のような仕様だった。


ユーザーエージェントは、localStorage 属性によって返された Storage オブジェクトのメンバーのうち一つでも、有効なスクリプトの origin と、localStorage 属性がアクセスされた Window オブジェクトの Document の origin と同じでないときは常に、SECURITY_ERR 例外を投げなければいけません。

これは、document.domain 属性が使われるときには Storage オブジェクトは中性化されることを意味します。


うん、それぞれのwindowオブジェクト配下だもんね。

その他


コロプラでゲーム作るのに、エンジニアとかデザイナとか各1名ずつで6名くらい?で大体4ヶ月。
感覚としてなんとなく覚えておこう。
戦闘バランスの調整が大変とか。RPGツクールを思い出すなぁ、、、、。




2012年3月18日日曜日

ubuntuでDBD::mysqlのインストールに失敗



cpanm DBD::mysql でこけた。
cpanmで失敗したDBD::mysqlを(半)手動でインストールする
--mysql_configオプションに、mysql_configのパスを与えればいいようです。

ubuntuだと、mysql_configが入ってないようなので、
sudo apt-get install libmysqlclient15-dev

mysql_configが/usr/bin/に入っちゃったせいか、
もう一度cpanmで入れるとすんなり入った。





2012年3月14日水曜日

モーダルウインドウ内のHTMLのscriptタグが消える



結論


jQuery.html(data)としたとき、data内に存在するscript要素が切り取られた状態でappendChildされる。
切り取られたscriptはappendChildの前に、evalScript関数で評価されている。

jQuery.prettyPoppin.jsがモーダルウインドウ用の領域を作成して、そこにjQuery.htmlでhtmlを貼り付けていたので、貼り付けたhtml内のスクリプトは実行されるが、DOMには追加されていなかった。


jQuery.htmlの実装


引数の中に、<scriptか<style があると、innerHTMLではなく、jQuery.appendが呼ばれる。
appendではDomManip関数とclean関数が呼ばれ、ここで、スクリプトを切り出して、実行。
append関数は最後に、appendChildを呼ぶ。


素のJSの場合


innerHTMLでは[object HTMLScriptElement]が表示され、
appendChildだと、スクリプトが実行されて、かつスクリプト自体も残っている。(ブラウザ依存)

確認用



<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.7.1");</script>
</head>
<body>
<div id="target">aaaaaaaaaaa</div>

<script>
var script = document.createElement('script');
script.type = 'text/javascript';
script.innerHTML = 'alert(1)';
//どれかコメント外して動作確認
//$('#target').html(script);
//document.getElementById('target').appendChild(script);
//document.getElementById('target').innerHTML=script;
</script>
</body>
</html>





2012年3月11日日曜日

chmod 1775でSticy設定



所有者と、root権限以外は、ファイル内容の変更は出来ても、削除とリネームができない。




jQuery BBQメモ




  • ハッシュフラグメントをみるイベント

    • $(window).hashchange(function(){});

  • クエリを配列に格納

    • $.deparam.querystring();

  • ハッシュフラグメント取得

    • $.param.fragment()




2012年3月3日土曜日

初めてのrails



【第2回】yoyogi.rb Ruby初心者向け で、HatchUp!に行ってきました。


教材


commitsログが教材
nysalor/twit


railsインストール



sudo gem install rails
Building native extensions. This could take a while...
ERROR: Error installing rails:
ERROR: Failed to build gem native extension.

/usr/bin/ruby1.9.1 extconf.rb
<internal:lib/rubygems/custom_require>:29:in `require': no such file to load -- mkmf (LoadError)
from <internal:lib/rubygems/custom_require>:29:in `require'
from extconf.rb:1:in `<main>'


Gem files will remain installed in /var/lib/gems/1.9.1/gems/json-1.6.5 for inspection.
Results logged to /var/lib/gems/1.9.1/gems/json-1.6.5/ext/json/ext/parser/gem_make.out


失敗。mkmfがない。



apt-cache search mkmf
apt-get install ruby1.9.1-dev
sudo gem install rails



プロジェクト作成



rails new twit -T #TはTest::Unitを入れない



複数バージョンのruby,rails管理


rvm(Ruby Version Manager )
http://www.machu.jp/diary/20110521.html#p01
perlbrewみたいなもの?今回はスルー。


サーバー起動



rails server


エラー。

javascriptの新しいエンジンがいるようだ。
node.jsをいれてもいいけど、
projectディレクトリ内のGemfileを編集。



# 追記
gem 'execjs'
gem 'therubyracer'



bundle install


これでサーバーが起動できる。


ひな型作成


userモデルとuserコントローラ作成

viewもあるけど、scaffoldだから?雛形をいじるのはどこ?



rails g scaffold User name:string


Tweetモデル作成


rails g model Tweet body:string user_id:integer


以下が作成される。timestampsは勝手に作成されるのね。



# twit/db/migrate/....._create_tweets.rb
class CreateTweets < ActiveRecord::Migration
def change
create_table :tweets do |t|
t.string :body
t.integer :user_id

t.timestamps
end
end
end

# app/models/tweet.rb
class Tweet < ActiveRecord::Base
end



作成したモデルから、テーブル作成。(db/schema.rbが設定される)



rake db:migrate



テーブル間のリレーションを定義


belongs_to

tweetがuserに属していることを記述。一方通行の関係性ですね。
これ、tweetテーブルにuser_idってカラムを自分で作成しないでいいんですね。



# app/models/tweet.rb
class Tweet < ActiveRecord::Base
belongs_to :user
end




# app/models/user.rb
class User < ActiveRecord::Base
has_many :tweets
end



users#showにtweetを表示




<p>
<b><%= @user.name %>さんのつぶやき</b>
<ul>
<% @tweets.each do |tweet| -%>
<li><%= tweet.body %></li>
<% end -%>
</ul>
</p>


tweetを表示させる。
コントローラに書いてある@hogeはインスタンス変数なので、viewで使用できると言われてよくわからなかったけど、
<% %>はruby文法をそのまま記述しているからっぽい。


userコントローラにtweetメソッド追加



# POST /users/1/tweet
def tweet
@user = User.find(params[:id])
@tweet = @user.tweets.create(:body => params[:body])

redirect_to @user, notice: 'Tweet was successfully updated.'
end


tweetメソッドに与えるパラメータをurlから取得


# config/routes.rb
match '/user/:id/tweet' => 'users#tweet', :as => :user_tweet


/user/1/tweet にアクセスすると、usersコントローラのtweetメソッドの :idに1が入る。
:asでメソッドへのalias設定。'_path'を末尾に追加した名前が使える。



# views/users/show.html.erb
<%= form_tag user_tweet_path do %>
今何してる?:<%= text_field_tag :body %>
<%= submit_tag %>
<% end -%>



ロジックをコントローラからモデルに移動


@user.tweets.create(:body => params[:body]);をUserモデルのメソッドに。
メソッド名はtweet!のようにビックリをつけるのが好みだそう。


orderメソッド


@user.tweets.order('created_at DESC')
で日付順を逆に。
orderって記述はActiveRecordeのメソッド?


scopeでsqlの遅延評価


直接sqlを書かないようにするだけならメソッド化でいいが、遅延評価できるようにscopeを使用。
モデルクラスに、



scope :newer, order('created_at DESC')


と書いてnewerメソッドとして使用。
@user.tweets.newer.limit(10) としても、全件とってきてから10件取得しないで済む。


partial(部分テンプレート)


TTでいうところの、INCLUDE,PROCESSみたい。外部ファイル読み込み。



<%= render :partial => "tweets" %>


_tweets.html.erbって名前のファイル内容を挿入してくれるっぽい。
命名規則があるのかな?だとするとちょっと分かりにくいかなぁ。
TTみたいにパスを直接書くほうが管理しやすいかも。

メモ



:collection で渡しているインスタンス名がパーシャルの名前とそろっていること。規約により、hogehoge.html.erbをコレクションのサイズだけループしてくれるらしい。そしてさらに引数が渡したければ、localsを使う。




ajax


まず、ajaxだからredirect_toは削除。
form_for、link_to:remote => trueを加えると非同期処理になる。
サンプルではajaxでテンプレートを貼り付けてたけど、テンプレートが評価された後にJSの引数として評価されてるのかな。