ハムハムブログ

自分への備忘録

railsとAngularでクロスドメインエラーを回避する方法

ruby on rails Angular ionic

Angular（localhost:4000）から、railsで作成したAPI（localhost:3000）へアクセスするときに、以下のエラーメッセージが出力される。


No 'Access-Control-Allow-Origin' header is present on the requested resource


これを回避するには、rails側で対応すればよい。
具体的には以下の3つをすればよい。

  1. Gemfileに　gem 'rack-cors'　を記載（コメントがついていたらコメントアウトする）#最初は説明文までコメントアウトしないように！
  2. Railsのconfig/initializers/cors.rbのコメントアウトを外す。
  3. originsは*にする


以下のサイトを参考にしました。
ktmry.hatenablog.com

ruby on rails の基本コマンド

ruby ruby on rails

ruby on rails の基本コマンド

アプリケーション作成・起動

アプリケーション作成

rails new アプリケーション名


バージョン指定で作成する場合は以下のようにする（下記は3.2.0の例）

rails _3.2.0_ new アプリケーション名


HTTPサーバの起動

（アプリケーションフォルダ内で）
rails server

なお、rails server を省略し、rails s でも問題ないです。
アクセス先は　http://localhost:3000/　です。


コントローラの作成

rails generate controller コントローラ名 [オプション]


コントローラとアクションの同時作成（例えばhelloクラスにindex、show、newアクションを追加する場合）

rails generate controller hello index show new

コントローラの削除

rails destroy controller コントローラ名

コントローラクラス

マルチバイトを使用する場合は以下のマジックコメントが最初に必要です。
（ただし、ruby 2.0以降では不要です）

#  coding: utf-8

データベース

各環境のデータベースは以下のファイルに設定の記述する。
config/database.yml


モデルの作成
rails generate model name field:type […] [option]
で記載できる。以下は例。

rails generate model book isbn:string title:string price:integer publish:string published:date cd:boolean


マイグレーションファイルによるテーブルの作成

rake db:migrate


フィクスチャによるテストデータの準備（books.ymlのデータを利用）

rake db:fixtures:load FIXTURES=books


データベースクライアントの起動

rails dbconsole

これ以降は、SQLコマンドを叩けば実行できる
例えば、booksというテーブルのスキーマと中身を確認、終了する方法はそれぞれ以下。

.schema books
SELECT * FROM books;
.quit

Scatffolding機能

Scatffolding機能を利用するにはまず不要なモデルやデータベースを削除する必要がある。
また、マイグレーションファイルの実行は自分でやる必要がある。
bookモデルの削除

rails destroy model book


データベースの削除

rake db:drop


Scaffolding機能によるアプリケーション開発
rails generate scaffold name field:type […] [options]
でScatffolding機能を利用する。

rails generate scaffold book isbn:string title:string price:integer publish:string published:date cd:boolean

このあとに

rake db:migrate

を実行。Scatffoldingによりconfig/route.rbが自動生成されるが、その中の最初の1行

resources :books

だけで、rake routesで各ルートを表示できたりする。

スキーマ

スキーマファイルをデータベースに展開

rake db:schema:load


現在のデータベースを破棄して、最新のスキーマ情報で再構築

rake db:reset

シードファイルとフィクスチャ

シード → 英語で種という意味
フィクスチャ → ソフトウェア用語でテスト時のアプリケーションの初期化のこと

上記の語源より、シードファイルはマスタテーブルなどの初期データを投入するために利用し、フィクスチャはテストデータの豆乳に利用することが想像できる。

シードファイルの実行

rake db:seed

データベースの作成からスキーマの構築、初期データの投入までをまとめて実行

rake db:setup

フィクスチャはtest/fixturesフォルダに「テーブル名.yml」で保存される。
フィクスチャファイルの実行

rake db:fixtures:load FIXTURES=users,reviews

ディレクトリ検索

linux shell

GUIではなくCUIでディレクトリ内のファイルを確認することがあるのですが、そもそもCUIでディレクトリのみを対象に検索する方法があるのか調べてみました。

find

findコマンドを使用した方法は以下です。

find . -type f

もしくは

find * -type f

なお、findコマンドは以下を参考にしました。
find コマンド | コマンドの使い方(Linux) | hydroculのメモ

ls

lsコマンドを使用した方法は以下です。

ls -l | grep ^d

TypeScriptでvimをSyntax

vim

.vimrcに

NeoBundle leafgarland/typescript-vim

をしても全く変化がない。
ちょっと時間がかかったのでそのメモ。

autocmd BufRead,BufNewFile *.ts set filetype=typescript

を追加することにより、TypeScriptにも色を付けることができました。

vim入門

vim

vim初心者として、そもそも最初に何を入れればよいのかということを解説します。

neobundle

neobundleを入れておけば、今後vimのプラグインをneobundleで管理することになり、「やっぱりこのプラグインいらないから削除する」といったことになっても1行コメントアウトするだけで大丈夫です。

 $ curl https://raw.githubusercontent.com/Shougo/neobundle.vim/master/bin/install.sh > install.sh
 $ sh ./install.sh

.vimrcに以下を追記

"NeoBundle Scripts-----------------------------
if &compatible
  set nocompatible               " Be iMproved
endif

" Required:
set runtimepath^=/home/vagrant/.vim/bundle/neobundle.vim/

" Required:
call neobundle#begin(expand('/home/vagrant/.vim/bundle'))

" Let NeoBundle manage NeoBundle
" Required:
NeoBundleFetch 'Shougo/neobundle.vim'

" Add or remove your Bundles here:
NeoBundle 'Shougo/neosnippet.vim'
NeoBundle 'Shougo/neosnippet-snippets'
NeoBundle 'tpope/vim-fugitive'
NeoBundle 'ctrlpvim/ctrlp.vim'
NeoBundle 'flazz/vim-colorschemes'

" You can specify revision/branch/tag.
NeoBundle 'Shougo/vimshell', { 'rev' : '3787e5' }

" Required:
call neobundle#end()

" Required:
filetype plugin indent on

" If there are uninstalled bundles found on startup,
" this will conveniently prompt you to install them.
NeoBundleCheck
"End NeoBundle Scripts-------------------------

なお、今後NeoBundleを使って

NeoBundle 'scrooloose/nerdtree'

などとする際は、次回vimを起動する際に

:NeoBundleInstall

を実行するのをお忘れなく。

参考
qiita.com

NERDTree

windowsでいうところのエクスプローラ、macでいうところのFinderのようなもの

NeoBundle 'scrooloose/nerdtree'

参考
qiita.com

tcomment_vim

複数行を一気にコメントアウトできるもの。基本的には

の3通りしか使用していない。

インデント

なお、タブ⇔スペースのインデントの変換は以下を使用する。
スペース→タブの場合は

:set noexpandtab
:retab 2

タブ→スペースの場合は

:set expandtab
:retab

はてなブログ

はじめてのエンジニアブログ

某元請けSIerで働いているため、プログラミングなんて全くしない日々。
ましてや、金融系ならなおさら。

そんな日々に危機感を覚えたため、エンジニアブログ（テックブログ）なるものを書いてみることにしました。

はてなブログの設定

エンジニアブログ ＝ はてなブログ
という印象があったため開設してみたものの
使い方がわからない！！！

今日は初期設定の一部を記載します。
（半分は自分のために）

ソースコードの書き方

まずソースコードの書き方だが、普通に書いただけでは醜いのでどう書けばよいのか調べてみた。
はてな記法の場合は以下でよいらしいです（サンプルはruby）。

//　　>|ruby|
//　　ruby --version
//　　|| <

なお、そのまま記載するとデザインが反映されて記載方法が消えてしまうので、
最初に　//　をつけています。これを除いたものが記載方法です。

デザイン

次はデザイン。このままだと白背景だが、黒背景にしたいので設定を変更します。

デザイン ⇒ カスタマイズ ⇒ CSSデザイン

で以下を記載します。

.entry-content pre.code {
    font-size: 12px;
    background-color: #002B36;
    color: #cccccc;
}
.entry-content .synSpecial { color: #dc322f }
.entry-content .synType { color: #b58900 }
.entry-content .synComment { color: #657b83}
.entry-content .synPreProc { color: #cb4b16 }
.entry-content .synIdentifier { color: #268bd2 }
.entry-content .synConstant { color: #2aa198 }
.entry-content .synStatement { color: #859900 }

.entry-content code {
    font-size: 12px;
    background-color: #002B36;
    color: #cccccc;
}