asklife

IT&Life

Month: 2月 2013

言語への壁は無くなりつつあり、次のステージは思想か。

言語への壁は無くなりつつあり、次のステージは思想かと思い始めてます。

RubyもJavaもPHPも、基本は同じだなと。

MVCモデルなどのフレームワークも身につけてしまえばキャッチアップが早い。

技術的な面で言えば、より良い設計思想を知りたい。別の観点からの設計を学びたいと思っています。

技術に限定して”どう作るか”を考えるのも奥が深いなぁと感じてます。

Rails ☓ Twitter Bootstrapいろは

TwitterBootStrapSample

Ruby On RailsにTwitter BootStrapを導入する手順メモ

手順に従って進めていくと写真のようになります。
Twitter BootStrapの公式はこちらです。

環境

Mac,Ruby,Rails,gemが揃っているとします。
環境構築はこちらの記事を参考にどうぞ↓
Ruby on Rails環境構築といろは Mac編

手順

ターミナル

$ rails new store
$ cd store
$ rails g scaffold product name price:decimal --skip-stylesheets
$ rake db:migrate

/Gemfile

# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'

  # See https://github.com/sstephenson/execjs#readme for more supported runtimes
  # gem 'therubyracer'

  gem 'uglifier', '>= 1.0.3'
  gem "therubyracer"
  gem 'less-rails-bootstrap'
  gem 'twitter-bootstrap-rails'
end

ターミナル

$ rails g bootstrap:install

ここで一旦完了しました。起動して確認してみて下さい。

ターミナル

$ rails s

さて、デザインの修正です。

/app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Store</title>
  <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
  <![endif]-->
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<!-- ナビゲーションバー -->
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a class="brand" href="#">Some Store</a>
            <div class="nav-collapse">
                <ul class="nav">
                    <li><%= link_to "Browse Products", products_path %></li>
                    <li><%= link_to "Price List" %></li>
                    <li><%= link_to "Contact Us" %></li>
                    <li><%= link_to "Cart" %></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- ナビゲーションバー -->    
<!-- メインコンテンツ -->   
<div class="container">
    <div class="row">
        <div class="span9"><%= yield %></div>
        <div class="span3">
            <h2>About Us</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>        
        </div>
    </div>
</div>
<!-- メインコンテンツ -->        
</body>
</html>

続いて

/app/assets/stylesheets/bootstrap_and_overrides.css

@import "twitter/bootstrap/bootstrap";

body { padding-top: 60px; } 

@import "twitter/bootstrap/responsive";

// Set the correct sprite paths
@iconSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings.png');
@iconWhiteSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings-white.png');

// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/less.html for their names and documentation
//
// Example:
// @linkColor: #ff0000;

ここで最後のひと押し

ターミナル

$ rails g bootstrap:themed products -f
$ rails s

参考記事  http://railscasts.com/episodes……=asciicast

RailsエンジニアのためのTwitter Bootstrapカスタマイズ例 // Speaker Deck.

Railsコマンド
http://www.aise.ics.saitama-u…….mands.html

RailsのEclipse環境構築
http://asklife.info/archives/3589

Ruby on Rails環境構築といろは Mac編

環境構築

いつものようにドットインストールさん
http://dotinstall.com/lessons/……rails/6502

Ruby(1.9.3)
RubyGem(1.8.11)
Rails
SQLite

を入れます。
詳しくはこの辺りの記事を参考にどうぞ
http://www.oiax.jp/rails/zakka……acosx.html

「手順」
Command Line Tools のインストール

「Xcode」メニューの「Preferences」を選択。
「Downloads」タブを選択し、「Command Line Tools」の「Install」ボタンをクリック。

Homebrew のインストール
ruby <(curl -fsSkL raw.github.com/mxcl/homebrew/go)MacPorts でインストールされた Ruby のアンインストール > sudo port uninstall ruby

RVM の除去
> rvm implode

rbenv と ruby-build のインストール
> brew install rbenv
> brew install ruby-build
> echo ‘eval “$(rbenv init -)”‘ >> ~/.bash_profile
> source ~/.bash_profile

readline のインストール
> brew install readline
> brew link readline

openssl のインストール
> brew install openssl
> brew link openssl

ruby のインストール
> CONFIGURE_OPTS=”–with-readline-dir=/usr/local –with-openssl-dir=/usr/local” rbenv install 1.9.3-p194
> rbenv rehash
> rbenv global 1.9.3-p194

> rbenv version
1.9.3-p194 が現れる

> ruby -v
ruby 1.9.3p194 が現れる
ヴァージョン確認完了

.gemrc の作成
エディタで ~/.gemrc を下記内容で作成。
install: –no-ri –no-rdoc
update: –no-ri –no-rdoc

Ruby on Rails 3.2 のインストール
> rbenv exec gem install rails –version=”~> 3.2.8″
> rbenv rehash
> source ~/.bash_profile
> rails -v
Rails 3.2.8 という文字が現れる

作業フォルダの作成
> cd
> mkdir work

動作確認用の新規アプリケーションの作成
> cd work
> rails new foo –skip-bundle
> cd foo

依存パッケージのインストール
> bundle install

簡単なユーザー管理機能の作成
> rails g scaffold user name:string email:string
> rake db:migrate

アプリケーションの起動
> rails s

動作確認

ブラウザで http://localhost:3000/users を開きます。

Hello Rails!!

さて、ディレクトリ構成を確認しておきます。

rails s コマンドで起動するにはそこのディレクトリに行く必要がある。
appはアプリが入っています。
app/ssetsは画像等
  あとは当然MVC
Gemfileはライブラリを管理しています。
publicは404やファビコン
dbはデータベース
configは設定ファイル

サーバを見るにはディレクトリへ行って rails server

するとWelcome AbroadとなるのでここでRails APIなどを見たり出来る。

> rails g scaffold user name:string email:string
でもろもろ必要なものを一気に作る。
ここで rails generate でもよい

> rake db:migrate
上記で自動生成されたSQL的なものでDBを作る。

起動は rails server か rails s

rails console とか rails db でコンソールやDBを確認出来る

consoleでオブジェクトを作ったり出来る

sqliteは.exitで出る。

http://bussorenre.hatenablog.j……/13/022739
http://ruby.railstutorial.org/……s-tutorial
この辺り参考になる。TwitterBootstrap使っている。

Railsドキュメント
http://railsdoc.com
http://api.rubyonrails.org

Rubyの基礎をドットインストールで学習

Rubyの基礎をドットインストールで学習
http://dotinstall.com/lessons/basic_ruby

Javaとの差
インスタンスを生成するときはクラス名.newでいける
クラス名=ファイル名でなくてよい。

class Monster
    
    def initialize(name)
        @name = name
        @hp = 100 + rand(100)
    end
    
    def damage
        @hp -= 10 + rand(10)
        printf("%s's hp is now %d\n", @name, @hp)
        printf("%s is now dead!\n", @name) if @hp < 0
    end
    
    def heal
        @hp += 10 + rand(10)
        printf("%s's hp is now %d\n", @name, @hp)
    end
    
end

slime = Monster.new("slime")

slime.damage
slime.heal


© 2017 asklife

Theme by Anders NorenUp ↑