ページ

2014年1月28日火曜日

Ruby On Rails アプリケーション作成 5 - CoffeeScript -

CoffeeScriptお勉強


ドットインストールで勉強させて頂きながら、公式サイトのインタラクティブツールで
javascriptに変換される様子を見ながら勉強。

■ javasctipt変換前
# comment
###
 aaa
###
message = "hello world"
if message.length > 1
  alert message

s = """this is pen.
it the end"""

name = "taguchi"

alert "hi, #{name}, #{s}, #{15/3}"

###
配列、連想配列
###
a0 = [1, 2, 3, 4]
a1 = [
     1, 5, 8
     2, 4, 2
     ]

a3 = 
     "sato":
        "sales" : 200
        "cost"  : 80
     "sasaki":
        "sales" : 250
        "cost"  : 40

a4 = [1..5]
a5 = [1...5]

###
if文
###
signal = "red"

if signal == "red"
  alert "stop!"
else if signal == "green"
  alert "go"

###
比較演算子
is (===) isnt(!==)
not(!)
and(&&)
or(||)
###

x = 20

alert "true" if 10 < x < 30

###
switch
###

signal = "red"

switch signal
  when "red"
    alert "stop!"
  when "greed"
    alert "go"
  else
    alert "caution"

###
存在チェック
###

alert "ok!" if name?

###
for loop
###
for i in [0..3]
  alert i

a = ["a", "b", "c"]

for i, index in a
 alert "#{index}:#{i}"

###
連想配列のループ
###
sales = 
  "tanaka": 100
  "taguchi" : 200
  "sasaki": 300

for key, value of sales
  alert "#{key}:#{value}"
  

###
関数
###

hello = (s="aaa") ->
  alert "hello #{s}"

hello("ddd")
hello()

###
返り値
###

sum = (a, b) ->
  a + b


■ 変換後
/*
 aaa
*/

var a, a0, a1, a3, a4, a5, hello, i, index, key, message, name, s, sales, signal, sum, value, x, _i, _j, _len;

message = "hello world";

if (message.length > 1) {
  alert(message);
}

s = "this is pen.\nit the end";

name = "taguchi";

alert("hi, " + name + ", " + s + ", " + (15 / 3));

/*
配列、連想配列
*/


a0 = [1, 2, 3, 4];

a1 = [1, 5, 8, 2, 4, 2];

a3 = {
  "sato": {
    "sales": 200,
    "cost": 80
  },
  "sasaki": {
    "sales": 250,
    "cost": 40
  }
};

a4 = [1, 2, 3, 4, 5];

a5 = [1, 2, 3, 4];

/*
if文
*/


signal = "red";

if (signal === "red") {
  alert("stop!");
} else if (signal === "green") {
  alert("go");
}

/*
比較演算子
is (===) isnt(!==)
not(!)
and(&&)
or(||)
*/


x = 20;

if ((10 < x && x < 30)) {
  alert("true");
}

/*
switch
*/


signal = "red";

switch (signal) {
  case "red":
    alert("stop!");
    break;
  case "greed":
    alert("go");
    break;
  default:
    alert("caution");
}

/*
存在チェック
*/


if (name != null) {
  alert("ok!");
}

/*
for loop
*/


for (i = _i = 0; _i <= 3; i = ++_i) {
  alert(i);
}

a = ["a", "b", "c"];

for (index = _j = 0, _len = a.length; _j < _len; index = ++_j) {
  i = a[index];
  alert("" + index + ":" + i);
}

/*
連想配列のループ
*/


sales = {
  "tanaka": 100,
  "taguchi": 200,
  "sasaki": 300
};

for (key in sales) {
  value = sales[key];
  alert("" + key + ":" + value);
}

/*
関数
*/


hello = function(s) {
  if (s == null) {
    s = "aaa";
  }
  return alert("hello " + s);
};

hello("ddd");

hello();

/*
返り値
*/


sum = function(a, b) {
  return a + b;
};

2014年1月10日金曜日

コストコ購入リスト 2

コストコで買い物した商品リスト

今回も色々購入したが、写真を撮るのを忘れて一点のみorz


・スターバックスのセット




2014年1月4日土曜日

Ruby On Rails アプリケーション作成 4 - モデル作成 -

モデルの作成

とりあえず、データベースの形式はデフォルトのsqliteでいくとして、
データベースファイルを作成。
$ rake db:create
db/development.sqlite3 already exists

続いて、モデルの作成。
$ rails g model kind
      invoke  active_record
      create    db/migrate/20140104132444_create_kinds.rb
      create    app/models/kind.rb
      invoke    test_unit
      create      test/models/kind_test.rb
      create      test/fixtures/kinds.yml

⬇️マイグレーションファイルを以下に修正。
class CreateKinds < ActiveRecord::Migration
  def change
    create_table :kinds do |t|
      t.string :name, :null => false
      t.integer :io, :null => false
      t.timestamps
    end
  end
end

そしてマイグレート。
$ rake db:migrate
(in /Users/{ユーザ名}/Documents/develop/ruby/AcountBook)
==  CreateKinds: migrating ====================================================
-- create_table(:kinds)
   -> 0.0014s
==  CreateKinds: migrated (0.0015s) ===========================================

ちゃんとテーブルが作成されたか、sqliteコマンドで実行。
$ rails db
SQLite version 3.7.13 2012-07-17 17:46:21
Enter ".help" for instructions
Enter SQL statements terminated with a ";"
sqlite> .tables
kinds              schema_migrations
sqlite> .schema kinds
CREATE TABLE "kinds" ("id" INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL, "name" varchar(255) NOT NULL, "io" integer NOT NULL, "created_at" datetime, "updated_at" datetime);
sqlite> .exit

ちゃんとできている模様。

マイグレーションファイル編集時に、別テーブルのidを参照する
例)
class CreateExpenses < ActiveRecord::Migration
  def change
    create_table :expenses do |t|
      t.references :kind, :null => false        ※ kindテーブルのidを参照
      t.references :member                         ※ memberテーブルのidを参照
      t.integer :expense, :null => false
      t.string :note
      t.date :date
      t.timestamps
    end
  end
end

⬇️参考リンク

とりあえず、全てのテーブルを作成。

2014年1月1日水曜日

Ruby On Rails アプリケーション作成 3 - Bootstrap導入 -

Twitter bootstrapを使ってみる

前回のページのレイアウトが寂しげな感じだったので、
twitter bootstrapを使用してみる。

http://ppworks.hatenablog.jp/entry/2012/02/19/033644
上記サイトを参考にtwitter-bootstrap-railsをインストールし、application.html.erbに
適用し、サイトを表示してみる。・・・が!















いきなり怒られるorz
どうやら、railsさんがlessを認識していないっぽい。そもそもlessって何?

http://www.webopixel.net/html-css/503.html
☝️cssをシンプルにプログラム的に書けるものらしい。

Gemfileに
# Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS
gem 'less-rails'
gem 'therubyracer'
※therubyracer ➡️ http://d.hatena.ne.jp/suu-g/20121222/1356189597

を追加して、bundle install〜!!
もう一度表示してみると・・・













おおっ!!何かそれっぽいデザインになっている☆
色々カスタマイズしていくらしい、がまだまだ勉強が必要ですなorz

公式サイト
上記サイトを参考に修正。今回は以下デザインで終了。続きはまた(^^;)


2013年12月30日月曜日

Ruby On Rails アプリケーション作成 2 - カレンダー表示 -

とりあえず・・カレンダーを表示してみる

完成イメージでは、初回表示画面にでーんとカレンダーが表示されていて、
今月の集計〜とかが表示されているイメージなので、カレンダーを表示してみる。

http://blog.scimpr.com/2013/01/25/rails3-2でgoogle-calendarライクなカレンダーを使う〜fullcalendar-rails/
上記サイトを参考にfullcalendar-railsなるものをインストール。

この中で出てくる「アセットパイプライン」曖昧だったので調査。
http://rails.hatenadiary.jp/entry/2013/03/03/125801

サイト内に書かれている
group :assets do
  gem ‘fullcalendar-rails’
end
この部分。どうやらrails4からはgroup :assets do が無くなったらしい。
http://stackoverflow.com/questions/16406204/why-did-rails4-drop-support-for-assets-group-in-the-gemfile

本家サイトを参考にGemfileに以下を追加
gem 'fullcalendar-rails'
bundle installコマンドで、gem環境にインストール。
後は、application.js, application.cssともにfullcalendar-railsを読み込む様にサイトを参考に
追加。

表示してみる・・うまくカレンダーが表示されました。

⬇️最終的なstates.js.coffee
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/
$ ->
  $('#calendar').fullCalendar
    header:
      right: 'agendaDay agendaWeek month today prev next'
    titleFormat:
      month: 'yyyy年 MMMM'
    monthNames: [
      '1月'
      '2月'
      '3月'
      '4月'
      '5月'
      '6月'
      '7月'
      '8月'
      '9月'
      '10月'
      '11月'
      '12月'
    ]
    dayNamesShort: [
      '日'
      '月'
      '火'
      '水'
      '木'
      '金'
      '土'
    ]
    buttonText:
      today: '今日'
      month: '月'
      week: '週'
      day: ‘日'

色々cssもそれっぽいものに変更。












配色時に参考にしたサイト⬇️
http://www.find-job.net/startup/color-scheme-for-non-designer

とりあえずはいい感じ♪

次は集計欄をexcel風な感じにできたらな〜⬇️
http://programming-10000.hatenadiary.jp/entry/20130702/1372776366

2013年12月29日日曜日

Ruby On Rails アプリケーション作成 1 - RVMインストール -

何を作るか

今回気持ちを新たにrailsアプリケーションを作ってみる。。が!
何を作ろうかと思っていましたら、ちょうど昔作った「家計簿アプリ」を
スマホでも見たいという話もあって、WEBアプリケーションとして作成しようと
決めました。

まずは、、

環境が若干古いので、全てアップデート。
【現在の環境】
Mac Book Air
$ ruby -v
ruby 1.9.2p290 (2011-07-09 revision 32553) [x86_64-darwin12.2.0]
$ rails -v
Rails 3.0.17

古いなあorz。でも前のバージョンを使ってなんやかんやする時もあるかもしれないので、
色んなRubyのバージョンを管理してくれる、RVMを使用する。

上記サイトを参考に、RVMをインストール。

$ git clone --depth 1 git://github.com/wayneeseguin/rvm.git
Cloning into 'rvm'...
remote: Counting objects: 502, done.
remote: Compressing objects: 100% (389/389), done.
remote: Total 502 (delta 41), reused 381 (delta 38)
Receiving objects: 100% (502/502), 1.06 MiB | 235.00 KiB/s, done.
Resolving deltas: 100% (41/41), done.
Checking connectivity... done
$ ls
rvm tig
$ cd rvm
$ ls
CONTRIBUTING.md VERSION lib
FORMATTING.md bin man
HACKING.md binscripts patches
History.txt config patchsets
LICENCE contrib rvm-test
NEXT.md examples rvm-test-rvm1
README gemsets scripts
README.rdoc help update-remote.sh
README.txt hooks
Rakefile install
$ ./install

Installing RVM to /Users/{ユーザ名}/.rvm/
    Adding rvm PATH line to /Users/{ユーザ名}/.profile /Users/{ユーザ名}/.bashrc /Users/{ユーザ名}/.zshrc.
    RVM sourcing line found in /Users/{ユーザ名}/.bash_profile.
    RVM sourcing line not found for Zsh, run the installer with '--auto-dotfiles' to fix it.
Installation of RVM in /Users/{ユーザ名}/.rvm/ is almost complete:

  * To start using RVM you need to run `source /Users/{ユーザ名}/.rvm/scripts/rvm`
    in all your open shell windows, in rare cases you need to reopen all shell windows.

# XXXXXXXXX,
#
#   Thank you for using RVM!
#   We sincerely hope that RVM helps to make your life easier and more enjoyable!!!
#
# ~Wayne, Michal & team.

In case of problems: http://rvm.io/help and https://twitter.com/rvm_io
       Help RVM 2.0: https://www.bountysource.com/fundraisers/489-rvm-2-0

  * WARNING: You have '~/.profile' file, you might want to load it,
    to do that add the following line to '/Users/{ユーザ名}/.bash_profile':

      source ~/.profile



インストール確認の為、rvm infoを実行
$ rvm info

system:

  system:
    uname:       "Darwin MacBook-Air.local 13.0.0 Darwin Kernel Version 13.0.0: Thu Sep 19 22:22:27 PDT 2013; root:xnu-2422.1.72~6/RELEASE_X86_64 x86_64"
    system:      "osx/10.9/x86_64"
    bash:        "/bin/bash => GNU bash, version 3.2.51(1)-release (x86_64-apple-darwin13)"
    zsh:         "/bin/zsh => zsh 5.0.2 (x86_64-apple-darwin13.0)"

  rvm:
    version:      "rvm 1.25.8 (manual) by Wayne E. Seguin <wayneeseguin@gmail.com>, Michal Papis <mpapis@gmail.com> [https://rvm.io/]"
    updated:      "31 seconds ago"
    path:         "/Users/{ユーザ名}/.rvm"

  homes:
    gem:          "not set"
    ruby:         "not set"

  binaries:
    ruby:         "/Users/{ユーザ名}/.rbenv/shims/ruby"
    irb:          "/Users/{ユーザ名}/.rbenv/shims/irb"
    gem:          "/Users/{ユーザ名}/.rbenv/shims/gem"
    rake:         "/Users/{ユーザ名}/.rbenv/shims/rake"

  environment:
    PATH:         "/usr/local/heroku/bin:/Users/{ユーザ名}/.rbenv/shims:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/usr/local/git/bin:/Users/{ユーザ名}/.rvm/bin"
    GEM_HOME:     ""
    GEM_PATH:     ""
    MY_RUBY_HOME: ""
    IRBRC:        ""
    RUBYOPT:      ""
    gemset:       ""


うまくインストールされたっぽい。
次にruby 2.0.0をインストール。
$ rvm install 2.0.0
Searching for binary rubies, this might take some time.
No binary rubies available for: osx/10.9/x86_64/ruby-2.0.0-p353.
Continuing with compilation. Please read 'rvm help mount' to get more information on binary rubies.
Checking requirements for osx.
Installing requirements for osx.
Updating system................................................................
Installing required packages: autoconf, automake, libtool, libyaml, libksba....
Updating certificates in '/usr/local/etc/openssl/cert.pem'.
Requirements installation successful.
Installing Ruby from source to: /Users/{ユーザ名}/.rvm/rubies/ruby-2.0.0-p353, this may take a while depending on your cpu(s)...
ruby-2.0.0-p353 - #downloading ruby-2.0.0-p353, this may take a while depending on your connection...
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 10.2M  100 10.2M    0     0  1093k      0  0:00:09  0:00:09 --:--:-- 1065k
ruby-2.0.0-p353 - #extracting ruby-2.0.0-p353 to /Users/{ユーザ名}/.rvm/src/ruby-2.0.0-p353.
ruby-2.0.0-p353 - #configuring.................................................
ruby-2.0.0-p353 - #post-configuration.
ruby-2.0.0-p353 - #compiling.............................................................-
ruby-2.0.0-p353 - #installing...............
ruby-2.0.0-p353 - #making binaries executable.
ruby-2.0.0-p353 - #downloading rubygems-2.2.0
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  400k  100  400k    0     0   755k      0 --:--:-- --:--:-- --:--:--  755k
ruby-2.0.0-p353 - #extracting rubygems-2.2.0.
ruby-2.0.0-p353 - #removing old rubygems.
ruby-2.0.0-p353 - #installing rubygems-2.2.0..
ruby-2.0.0-p353 - #gemset created /Users/{ユーザ名}/.rvm/gems/ruby-2.0.0-p353@global
ruby-2.0.0-p353 - #importing gemset /Users/{ユーザ名}/.rvm/gemsets/global.gems......|
ruby-2.0.0-p353 - #generating global wrappers.
ruby-2.0.0-p353 - #gemset created /Users/{ユーザ名}/.rvm/gems/ruby-2.0.0-p353
ruby-2.0.0-p353 - #generating default wrappers.
ruby-2.0.0-p353 - #adjusting #shebangs for (gem irb erb ri rdoc testrb rake).
Install of ruby-2.0.0-p353 - #complete 
Ruby was built without documentation, to build it run: rvm docs generate-ri
$ ruby -v
ruby 2.0.0p353 (2013-11-22 revision 43784) [x86_64-darwin13.0.0]

ruby 2.0.0がインストールされました。
次にrailsのインストールですが、rvmにはrailsの環境を整えるのに便利なgemsetというのが
あるらしいです。

新しいruby 2.0.0のgem環境なので、上記サイトにあるようにあまりgemが入ってないかと
思いきや、なんやかんや入っていました。
$ which ruby
/Users/{ユーザ名}/.rvm/rubies/ruby-2.0.0-p353/bin/ruby
$ gem list

*** LOCAL GEMS ***

bigdecimal (1.2.0)
bundler (1.5.1)
bundler-unload (1.0.2)
executable-hooks (1.2.6)
gem-wrappers (1.2.1)
io-console (0.4.2)
json (1.7.7)
minitest (4.3.2)
psych (2.0.0)
rake (0.9.6)
rdoc (4.0.0)
rubygems-bundler (1.4.2)
rvm (1.11.3.8)
test-unit (2.0.0.0)
$ which gem
/Users/{ユーザ名}/.rvm/rubies/ruby-2.0.0-p353/bin/gem

rails用に新規のgemsetを作成。
$ rvm gemset list

gemsets for ruby-2.0.0-p353 (found in /Users/{ユーザ名}/.rvm/gems/ruby-2.0.0-p353)
=> (default)
   global

$ rvm gemset create rails40
ruby-2.0.0-p353 - #gemset created /Users/{ユーザ名}/.rvm/gems/ruby-2.0.0-p353@rails40
ruby-2.0.0-p353 - #generating rails40 wrappers.
$ rvm gemset list

gemsets for ruby-2.0.0-p353 (found in /Users/{ユーザ名}/.rvm/gems/ruby-2.0.0-p353)
=> (default)
   global
   rails40


作成した環境へ切り替える。
$ rvm 2.0.0@rails40
$ ruby -v
ruby 2.0.0p353 (2013-11-22 revision 43784) [x86_64-darwin13.0.0]
$ rvm gemset list

gemsets for ruby-2.0.0-p353 (found in /Users/{ユーザ名}/.rvm/gems/ruby-2.0.0-p353)
   (default)
   global
=> rails40


この環境のgemにrailsをインストールする。
$ rails -v
Rails 4.0.2
無事railsをインストール。
新規プロジェクト作成し、起動を確認。ん〜なんとかうまくいってる感じ。




2013年12月26日木曜日

Gitでのパッチファイル作成、適用

パッチファイルの作成


git diff --no-prefix HEAD~1 > thisis.patch

上記コマンドにてHEADから1つ前までの差分パッチファイルをthisis.patchファイルに作成する


パッチファイルの確認


$ patch --dry-run -p0 < thisis.patch

 上記コマンドにて実際にはパッチを当てないけど、当てた場合に問題無いかを確認


パッチを当てる


$ patch -p0 < thisis.patch

 上記コマンドで実際にパッチを当てる


参考サイト
http://d.hatena.ne.jp/kanonji/20110222/1298341934