自由研究6日目

夏季休暇としては最終日です。

完成…はむりかな…

作業メモ

【備忘録】Rails-カラム名を変更する方法 - Qiita

Railsで検索可能なセレクトタグselect2を使う | 酒と涙とRubyとRailsと

自由研究5日目 Railsがりがり

昨日作ったサンプルアプリを参考に、いよいよタスク管理アプリの開発に入りました!
私のお盆は明日までなのですが…無理そうですね(遠い目)

タスク管理アプリ 概要

できること

  • 親子紐づきのあるタスク管理(親がボード、子がタスク)
  • タスクで進捗管理可能(と言って進捗率の列を足し忘れていたことに気づく)
  • タスクにはプロジェクト・プログラム・職種・作業が紐づく(それぞれマスタ化してある)

やりたいこと

  • 見た目はTrelloみたいにしたい(いつか)
  • ログイン機能(今回はあきらめた)

今日やったこと

  • モデル作成
  • ボード・プログラムのコントロール、ビュー作成
  • Ajaxでセレクトボックスの内容を動的に変更(職種>作業)

参考サイト
【Rails】Ajaxでセレクトボックスの内容を動的に変更する - ひよっこエンジニアの雑多な日記

ちょっとまだ公開できるレベルではないのでローカルでごりごりやってます。。
しかしRails楽しいです

はまったこと

jQueryが反応しない

一部動作にAjaxを仕込んだのですがうまく動きませんでした
⇒原因:jQueryの設定ができていなかった

  1. Gemfileにgem ‘jquery-rails'を追記
  2. bundle install
  3. app/assets/javascripts/application.jsに//= require jquery3を追記(jqueryだとなぜか失敗)

これでうまく動きました

参考にしたサイト

Ruby on Rails5.1.3にBootstrapを導入する方法 - Qiita

Rails5でjqueryがデフォルトで入ってくれなくなったみたいですね…

自由研究4日目 Rails

ようやくRailsの開発スタート、ということで
まずはドットインストールを見ながらサンプルブログアプリを開発しました。

以下メモです

Railsプロジェクト

新規作成手順

  • 1.プロジェクト作成
rails new myblog -TB --database=postgresql
sudo -u postgres psql
create role projectname with createdb login password 'password';
\q
  • 3.config\database.yml を編集 defaultのpoolの下
# 以下の3つを追加
username: projectname
password: password
# RailsサーバとPostgreSQLサーバが同じ場合
host: localhost
  • 4.bundle install
bundle install --path vendor/bundle

けっこう時間がかかる

rails db:setup
rails db:migrate
  • setup:開発DB(development)とテストDB(test)を作成してくれる。初回はshema.rbが不足していると怒られる
  • migrate:shema.rb作成

ちなみにmigrateのリセット(データ初期化)は

rails db:migrate:reset

WEBサーバ

起動

rails server -b 192.168.33.10 -d

切断(プロセスidを検索し、指定して殺す)

cat tmp/pids/server.pid
kill -9 9113

DB参照

PostgreSQLに接続します

rails db

モデル

モデル作成

名称は大文字始まり・英語の単数形でモデル名を指定する
モデルのファイルはapp/models/モデル名.rbに自動で作成される。
migrateするとDBに複数形名のテーブルが自動で作成される

rails g model Post title:stging body:text
rails db:migrate

既存のモデルと紐づけるためにはreferencesを付ける
下記例ではPost-Commentで1-nの関係。Commentテーブルにpost_id列が自動で付与される

rails g model Comment body:string post:references

モデル同士の紐づけ

モデルファイルに紐づけの情報を設定する

1-nの1側(post)

has_many :comments

これによって@post.commentsの形で取得できるようになる
削除時にn側のデータも削除する場合は下記のように書く

has_many :comments, dependent: :destroy

n側(モデル生成時に指定していたら勝手に表現される)

belongs_to :post

Validation処理

項目のチェック処理定義
必須はpresence

  validates :title, presence: true, length: { minimum: 3, message: 'Too short to post' }
  validates :body, presence: true

初期データ設定

db/seeds.rb を編集して設定できる
モデル名.create形式で書く

Post.create(要素1:'要素1内容',要素2:'要素2内容')

実行する場合は

rails db:seed

コントローラ

コントローラ作成

コントローラは大文字始まり・複数形で作成する

rails g controller Posts

これを実行すると、app/controllers/posts_controller.rbが自動生成される

ルーティング

どのメソッドをどのURLに設定するか、の設定

config/routes.rb を編集する

resources :posts

1-nのモデルを扱うときは下記のようにする

resources :posts do
    resources :comments

これを設定すると、自動でルートを生成してくれる

rails routes

また、一部のルートしか使用しない(create,destroyのみなど)場合は下記のように記述する

resources :comments, only: [:create, :destroy]

ルートパスをpostのindexに指定したい場合

root 'posts#index'

コントローラ編集

各メソッド(アクションメソッド)を定義します

index(一覧)例

def index
  @posts = Post.all.order(created_at: 'desc')
end

show(照会)例

:idはルーティングで設定されているため

def show
    @post = Post.find(params[:id])
end

create(作成)例

def create
  # 受け取ったものをそのまま表示して確認するとき
  # render plain: params[:post].inspect
  # save
  @post = Post.new(params.require(:post).permit(:title, :body)[:post])
  @post = Post.new(post_params)
  if @post.save
    #redirect
    redirect_to posts_path
  else
    render plain: @post.errors.inspect
  end
end

destroy(削除)例

def destroy
  @post = Post.find(params[:id])
  @post.destroy
  redirect_to posts_path
end

メソッド化

def create
  @post = Post.new(post_params)
end
 private
  def post_params
    params.require(:post).permit(:title, :body)
  end

ビュー

app/views/posts/にメソッド名.html.erbというファイル名で作成する

<% %>

で囲ったところがプログラム部分、ほかは素のhtml

<h2>My Posts</h2>
<ul>
<% @posts.each do |post| %>
    <li><%= post.title %></li>
<% end %>
</ul>

アプリ全体の共通ビュー

layouts/application.html.erbで設定されてる

ちなみにcssはapp/assets/stylesheets/application.css

ヘルパー

たくさんのヘルパーが用意されている

リンクヘルパー

aタグ

<%= 見出し, パス(渡す値) %>
<!-- 新規へのリンク -->
<%= link_to 'Add New', new_post_path, class: 'header-menu' %>
<!-- 編集へのリンク -->
<%= link_to '[Edit]', edit_post_path(post),class: 'command' %>
<!-- 削除へ -->
<%= link_to '[x]', post_path(post), method: :delete, class: 'command' %>

イメージヘルパー

imgタグ

<%= image_tag 'logo.png' ,class: 'logo' %>

タグを重ねる場合

aの中にimgタグ

<%= link_to image_tag('logo.png' ,class: 'logo'), root_path %>

フォームヘルパー

<%= form_for :@post do |f| %>
...
<% end %>

インプット系

<!-- テキストボックス -->
<%= f.text_field :title, placeholder: 'enter title' %>
<!-- テキストエリア -->
<%= f.text_area :body, placeholder: 'enter body text' %>
<!-- ボタン -->
<%= f.submit %>

部品化

views/postsの中に_からはじめた名前のファイルを生成すると、各ビューから呼び出せる部品となる

form_forのパラメタはroutesでresourceを設定しているのでよしなにやってくれる、らしい(よくわかっていない)

viewから呼び出すときは_抜きの部品名を指定する

<%=  render 'form' %>

クリック時に警告を出したい場合は

data: { confirm: 'Sure?' }

エラーメッセージを出したい場合

エラーの数だけ繰り返しspan

<% if @post.errors.messages[:title].any? %>
<span class="error"><%= @post.errors.messages[:title][0] %></span>
<% end %>

WindowsでRailsの開発環境構築まで

ローカル環境でRails開発環境を作るための手順をまとめました
あくまで参考サイト様の情報をもとに自分の作業内容をコピペでまとめたものですので、正確な情報は参考サイト様へ。。

設定する内容

手順

  1. Vagrantインストール
  2. VirtualBoxインストール
  3. LinuxOSの仮想環境構築(今回はUbuntu)
  4. PuTTy仮想マシンに接続
  5. CyberDuck仮想マシンの構造を確認
  6. Gitインストール(Ruby/Railsインストール用)
  7. Rubyインストール
  8. SQLインストール(今回はPostgre-SQL)
  9. Node.jsインストール
  10. Ruby on Railsインストール
  11. Railsでアプリケーション作成

Vagrantインストール

Vagrant仮想マシンの管理ができるツール

https://www.vagrantup.com/downloads.html

インストール後、コマンドプロンプト

vagrant -v

でバージョンが表示されればOK
場所はどこからでも実行できます

VirtualBoxインストール

VirtualBox仮想マシンの構築ができるツール

https://www.virtualbox.org/wiki/Downloads

LinuxOSの仮想環境構築

今回はUbuntuを採用しています

コマンドプロンプトにてC直下にVagrant専用フォルダを作成し、その中に仮想マシン用のフォルダを作成して移動します

mkdir C:\Vagrant & cd C:\Vagrant
mkdir ubuntu64 & cd ubuntu64

Vagrant初期化

ここでBoxを追加しUbuntuOSで初期化します
BoxはDiscover Vagrant Boxes - Vagrant Cloudで検索します

vagrant box add ubuntu/trusty64
vagrant init ubuntu/trusty64

Vagrantfileを編集

作成されたVagrantfileをテキストエディタで編集し、↓のコメントアウトを外します

config.vm.network "private_network", ip: "192.168.33.10"

仮想マシン起動

これでバックグラウンドで仮想マシンが起動します

vagrant up

PuTTy仮想マシンに接続

PuTTy仮想マシンSSH接続するためのツールです(要はコマンドラインです)
ここのPackage filesの64bitMSIをインストールします

Download PuTTY: latest release (0.70)

  • 接続先ホスト名:192.168.33.10
  • 接続先ポート:22
  • ユーザ:vagrant
  • パスワード:vagrant

接続するとvagrant@vagrant-ubuntu-trusty-64:$というところに出ます

CyberDuck仮想マシンの構造を確認

CyberDuck仮想マシン用のエクスプローラみたいなものです

https://cyberduck.io/index.ja.html?l=ja

環境設定

編集>環境設定で接続の設定をします

  • ブラウザタブ
    • ‘.'で始まるファイルを表示にチェック
    • ダブルクリックしたファイルを外部エディタで開くにチェック
  • 外部エディタタブ
  • 接続設定

ここから先はPuTTyでの作業です

Gitインストール(Ruby/Railsインストール用)

OSのアップデート

sudo apt-get update
sudo apt-get upgrade

Gitインストール

最新版だった2.14.1をインストール

sudo apt-get install -y libcurl4-gnutls-dev libexpat1-dev gettext libz-dev libssl-dev
cd
wget https://www.kernel.org/pub/software/scm/git/git-2.14.1.tar.gz
tar -zxf git-2.14.1.tar.gz
cd git-2.14.1
make prefix=/usr/local all
sudo make prefix=/usr/local install
git --version

でバージョンが出ればOK

Rubyインストール

バージョン管理用のRbenv経由でインストールします

GitからRbenvインストール

git clone https://github.com/sstephenson/rbenv.git ~/.rbenv
git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
echo $SHELL
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
source ~/.bash_profile
which rbenv
rbenv --list

でインストールするRubyのバージョンを確認します
(普通に公式サイトで安定板バージョンを確認しても良い)

Rubyインストール

今回は安定板の2.4.1をインストール
標準の指定バージョンも2.4.1にしておく

rbenv install 2.4.1
rbenv versions
rbenv global 2.4.1
rbenv rehash
rbenv version
which ruby
ruby -v

SQLインストール(今回はPostgre-SQL)

PostgreSQLインストール

$ sudo apt-get install PostgreSQL
$ /etc/init.d/postgresql status

SQLを起動してプロジェクトのロールを準備

sudo -u postgres psql
postgres=# create role projectname with createdb login password 'password';
postgres=# \q

Node.jsインストール

JavaScriptのエンジンが必要なのでNode.jsをインストールします
昔はtherubyracerというジェムが一般的でしたが、v8のエンジンのバージョン関係でインストール時にこけるのでNode.jsをインストールしましょう

$ sudo apt-get install nodejs

Ruby on Railsインストール

gem install rails
which rails
rails -v

Railsでアプリケーション作成

標準はSQLLiteなのでちょっとだけ面倒です

PostgreSQLを指定します

$ rails new projectname -TB --database=postgresql
$ cd projectname

依存関係をインストールしてgemのインストール

$ sudo apt-get install libpq-dev
$ bundle install --path vendor/bundle

PostgreSQLのロールを関連付ける

config/database.ymlを編集

default:
  adapter: postgresql
  encoding: unicode
  pool: 5
  # 以下の3つを追加
  username: projectname
  password: password
  # RailsサーバとPostgreSQLサーバが同じ場合
  host: localhost
development:
  <<: *default
  database: projectname_development
test:
  <<: *default
  database: projectname_test

マイグレーション

$ rails db:migrate
$ rails db:serup

データベースを使ってみる

$ rails g scaffold Post title:string body:text
$ rails db:migrate
$ rails s

サーバ起動

rails server -b 192.168.33.10 -d

参考サイト

Vagrant + VirtualBoxでWindows上に開発環境をサクッと構築する - Qiita

VagrantでUbuntuにRails環境をつくる - Qiita

インストールからRails-PostgreSQL環境を整える - Qiita

ドットインストール

神の参考サイト様のコピペです(土下座)

自由研究3日目

自由研究3日目メモ
Railsでタスク管理アプリ作ります!

とりあえずドットインストールという神サイトで
Railsアプリ開発を動画で!!教えてくれるとのことなので
いったんそれに従って開発を進めてみます。

要領がわかってから自分なりにカスタマイズしていこうと思います

PostgreSQL

昨日の時点ではまだインストールしていなかったので。

[Ubuntu][PostgreSQL]ubuntuにpostgresqlをインストールする方法 · GitHub

$ sudo apt-get install postgresql>$ sudo apt-get install postgresql-client-common
$ sudo apt-get install postgresql-common
$ sudo apt-get install postgresql-contrib

インストールからRails-PostgreSQL環境を整える - Qiita

今日やったこと

ちょっと古い記事を参考にしていたのでtherubyracerのgemのインストールでこけて大ハマりしましたが、
今は非推奨でNode.jsをインストールすれば良いそうです!よかった。

実は昨日の手順を一部間違えていたのでやり直したりしました。。

ようやくHello Railsなのでやっと明日から開発に入れます。。

自由研究2日目 メモ

タスク管理アプリ開発2日目のメモです

昨日の記事ではHeroku+Rubyを使うことになったので、参考になりそうなURLのメモです

Heroku設定

初心者でも15分で公開できるHerokuのはじめかた — Mobage Developers Blog

HerokuでWebアプリ開発を始めるなら知っておきたいこと(1) 無料のスペック - アインシュタインの電話番号

(いったんローカルで開発するので、この辺の設定は開発後になるかな)

タスク管理ツールのサンプル(Ruby

Ruby On Railsでタスク管理アプリを作ってみる | jekylog

Rails4でのToDoアプリ開発 | Rails4でGoogle Map API連携アプリを開発する

http://dotinstall.com/

開発環境

今回はLinuxRailsもほぼ初心者ということでローカル開発からはじめます。

どうやらVagrantという仮想マシン管理ソフトアプリと VirtualBoxという仮想環境を作るソフトでLinux環境を作ることができるそうです。 便利な時代ですねぇ

Vagrant + VirtualBoxでWindows上に開発環境をサクッと構築する - Qiita

OS

Linux系といってもOS系は下記2種類がメジャーです

正直ここはどちらでもよかったのですが、以前PHPの勉強でちょっと触ったUbuntuを使おうと思います。

RubyRailsインストール

VagrantでUbuntuにRails環境をつくる - Qiita

今日やった手順

Vagrant + VirtualBoxでWindows上に開発環境をサクッと構築する - Qiita

  • UbuntuにGit2.14.1インストール
  • Git経由でRuby2.4.1をインストール
  • Git経由でRails5.1.3をインストール

VagrantでUbuntuにRails環境をつくる - Qiita

これでやっと環境がそろいました。 明日からようやく開発スタートです。

メモ

  • 今までWindows × VisualStudio × SQL Serverで開発してたので環境作成にここまでかかるとは…という感じでした
  • VSはデバッグ時に勝手に仮想IISたててくれるからさらに楽なんですよね
  • まぁその分お金はかかったりしますが

自由研究はじめました

お盆が特に予定がなく暇になったので、自由研究としてプライベート開発でもやろうかなと思いつきました。

やりたいことは会社で作ったプログラムの焼き直しです (会社の基盤をもろに使ってるので公開できない)

タスク管理アプリの概要

  • Trelloみたいなタスク管理ができるツール(カンバン方式?)
  • できればgoogleカレンダーみたいなのを上半分につける(下半分がタスク管理エリア) ⇒これは予定とTodoをわけて管理したいから
  • タスクにプロジェクト情報を紐づけられるようにする

…お盆中に実装可能かどうかっていうと無理ですけどね

開発環境

会社はMSにべったりなのでWindowsServer + .Net + C#で作っていたのですが、せっかくなので学習コストはかかりますがLinux環境で作る方向で調べてみました

サーバ

いろいろ調べたら、↓の候補がでてきました。

  • さくらVPS:安い。コスパが良い。シンプルなLinux
  • AWS:スタートアップ向け(ガチ)。スケールアップは楽だが気づいたら課金しているらしい。
  • Heroku:初心者お手軽。デプロイ周りの環境作成もやってくれて便利?

ということでおそらくHerokuになるのかなと思います(環境まわりがめんどくさかったので)

この辺を参考にさせていただきました

個人開発アプリのサーバーサイド環境を金と時間をかけずに用意する方法 - Qiita

【VPSか、AWSか、Herokuか】結局、最後はさくらVPS+Unicorn+Rails+Capistranoに行き着いた【構築スクリプト付き】 - 不格好エンジニア (引っ越しました)

HerokuでWebアプリ開発を始めるなら知っておきたいこと(1) 無料のスペック - アインシュタインの電話番号

言語

HerokuがサポートしていることもあってRubyをやってみようと思います(大した理由はない)

Railsにするかほかのにするかは考え中。

SQL

HerokuてきにPosgre-SQLなら無料らしいのでそっちで。

エディタ

まえにPythonやろうとしてインストールだけしていたAtomを使おうかな

ということでだいたいの方向性が決まりました。 正直特に何も進んでいませんが、1日目はこのあたりで。。