MTG デッキ構築アプリを作った

自己紹介• サーバーサイドエンジニア

• 普段は主に Java を書いてます

• Ruby は個人的に使うスクリプトをたまに書く程度• 最近は chef を書いてます

アプリをつくってみた

Rails を使えばまるで魔法をつかっているかのように

簡単にアプリを作れる

そんなわけなかった∑ ( ￣ Д ￣； )

Rais は僕を魔法使いにはしてくれない

ただ、 Rails を使うとアプリを作るのが少し楽になる！

作るのが楽しくなる！

MTG DECK BUILDER

Rails を使ってもデザイン能力はあがらなかった

ここから本題

テーブルの管理が簡単

migration を使ったテーブルのバージョン管理

テーブルにカラムを追加したり、テーブルからカラムを削除する　テーブルをある時点の状態にする　テーブルを最初から作り直す

自由にテーブル変更ができる。ただし、既に push した定義ファイルを修整してテーブルを更新するのは NG

Model がきれいテーブルの各カラムに対応する変数をモデルないで再定義するなんて無駄なことをやらない

Playの例@Entitypublic class User extends Model {

public String email; public String password;

public User(String email, String password, String fullname) { this.email = email; this.password = password; }

}

ちなみにRails では type というカラム名は予約語となっているらしく、使うことが出来ません。おこられます。しかも View を表示するときになってはじめて気づかされます。

The single-table inheritance mechanism failed to locate the subclass: ' インスタント '. This error is raised because the column 'type' is reserved for storing the class in case of inheritance. Please rename this column if you didn't intend it to be used for storing the inheritance class or overwrite MstCard.inheritance_column to use another column for that information.

カラム名として使えない名前は他にもあるので、気をつけてください！

URL とアクションの紐付けが一カ所にまとまっているので見やすい

earch_mst_cards GET /mst_cards/search(.:format) mst_cards GET /mst_cards(.:format) POST/mst_cards(.:format)new_mst_card GET /mst_cards/new(.:format) edit_mst_card GET /mst_cards/:id/edit(.:format) mst_card GET /mst_cards/:id(.:format)

PATCH /mst_cards/:id(.:format)

PUT /mst_cards/:id(.:format)

DELETE /mst_cards/:id(.:format)

resources :mst_cards do collection do get 'search' endend

設定を省略してかける

デフォルトの設定をそのままつかっていいわけでもない

/mst_cards/search(.:format)

さすがにこの URL だと、テーブル名がバレバレなのでセキュリティ的に不安

規約だけに頼らずに、状況に応じて自分で設定を書くようにした方がよい！

Ajax を簡単に使える

View Action

JSON

View

レスポンス

リクエスト

特別な処理をほとんど書かないでいい

<%= button_to " 増やす ", {:controller => "user", :action => "add_card”, :id => card.card_id}　　　　　　　　　 　 , {:method => "POST", :remote => true} %>

:remote => true をつかうことで、 link や form の通信を非同期で行える。

:data-type を指定すれば、レスポンスを html 形式で取得することも可能

Index.html.erb

def add_card #カードの所持数を増やす処理

respond_to do |format| format.js #renderを実行しない end end

user/add_card.js.erbvar dom = $(".card_count", "#card_<%= @user_card.card_id %>")var val = dom.text()val = Number(val) || 0val = val+1dom.text(val)

user_controller.rb

Index_htm.erb

user_control.rbadd_card アクショ

ン

Add_card.js.erb

add_card.html.erb

レスポンス

リクエスト

:remote => true を追加 出力を json に切り替える変更を加える点

ヘルパーメソッドを作って独自の表示をする

<%= apply_img_and_hbr card.mana %>

def apply_img_and_hbr (str) apply_mana_img(str_br).html_safe end #{}で囲まれた文字列を imgタグに置換する def apply_mana_img (str) str.gsub('{1}', mana_img("1")) .gsub(/{U}/, mana_img("U")) .gsub(/{X}/, mana_img("X")) .gsub(/{Tap}/, mana_img("Tap")) end

def mana_img (word) options = {} options[:src] = "/images/#{word}.png" options[:alt] = "{#{word}}” tag("img", options) end

application_helper.rb に定義

最後に

Heroku

• Heroku にアカウント登録https://www.heroku.com/

　• git をインストール

• Github にアカウント登録https://github.com/

• Github に SSH Key を登録サイト右上の「 account setting 」をクリック。SSH Keys を選択します。自分の SSH Key を登録します。

• Github にレポジトリを作成サイト右上の「 git a new repo 」から新しいレポジトリを作成します。レポジトリ名を入力して完了ボタンを押します。登録完了画面に表示される「 Push an existing repository from the command line 」以下のコマンドを自分の PC で実行します。

git remote add origin [URL]git add .git commit –m “first commit”git push –u origin master

• Heroku にアプリケーションを登録下記のサイトを参考に toolbelt をインストールします。https://toolbelt.heroku.com/

Getting Start に従って Heroku にアプリの格納場所を作成します。

.git/confi に以下の設定が追加されてれば OK[remote "heroku"] url = [HEROKU_URL] fetch = +refs/heads/*:refs/remotes/heroku/*

以下のコマンドを実行して Heroku にアプリを登録します。

git push heroku master

ちなみに、 Heroku では sqlite3 と mysql をサポートしていないため、 heroku にアップするときには posgresql を使うようにします。

Gemfile group :production do gem "pg" end group :development, :test do gem "sqlite3" end

また Heroku で postgresql を使用す場合は Heroku のpostgresql プラグインをインストールする必要があります。インストールは heroku のページから可能です。

• Heroku を再起動

Migration の実行　 heroku run rake db:migrate

サーバの再起動　 herokuk restart

ブラウザで起動　 heroku open　　ブラウザが起動して、アプリのページにアクセスします。

まとめ• Migration をつかって DB のバージョン管理。

• URL とアクションの紐付けは routes.rb で行う。必要に応じて設定も書く。

• Ajax の処理は簡単にかける。うまく設計すればアプリの APIを提供することも　　簡単に出来る。

• ヘルパーメソッドを自作すれば、様々な表示ができる。また再利用したいメソッドを複数あつめて Utility モジュールをつくることもできる。