tobioka.net

Rails 4

パーフェクトRuby on Rails片手に1つアプリを作った

9月 01

まずは宣伝

作ったのは、Micloという1人用マイクロブログサービスです。
1人用ということで、SNS機能はありません。（が、投稿は全て公開されます。）

Heroku Buttonも付けたので、自分専用の環境をすぐ用意できます。

なぜ作ったか

僕はTwitterがわりと好きなんですが、つぶやく直前に「これ、Tweetするほどのことでもないよなぁ…。」と削除することがよくあります。
別に隠したいわけじゃないんだけど、わざわざ誰かのTLに投げ込みたいほどでもない。

また、tl;drという言葉がありますが、同じくToo long; Didn’t write.というのもやはりあると思います。
ブログにまとめるのは大変だけど、断片でもいいからつぶやいておけば、誰か（自分含む）の役に立つかもしれない。

というわけで、こそこそと気軽につぶやける用に作ってみました。

特徴

単なるマイクロブログだと芸がないので、ひとかたまりで発言できるようにしています。
つぶやく時に、「続き」を選択するとその前のつぶやきとおなじTopicになります。

あと、Markdownで書けます。

キーボードショートカットも一応あります。nで新規、cmd+enterで送信などです。

その他

デザインはほぼBootstrapそのままです。
オープンソースなので、気に入らない所とかあったら、プルリクエストしてもらえると喜びます！

パーフェクトRuby on Rails

パーフェクト Ruby on Rails

「パーフェクト〜」と言われると、ハードルが高いんじゃないかと思っちゃいますが、
実際は、「ステップアップ〜」や「レベルアップ〜」と言った感じで、（たぶん）中級者の僕にも大変わかりやすかったです。

むしろ初心者にこそオススメしたい一冊でした。
久々に、「Railsで何か作りたいなー」という気持ちにさせてくれました。ありがとうございます！

読みながら書いたメモなどはこちら。
http://miclo.bornneet.com/u/tnantoka/t/3

Vue.js

どうせ何か作るなら今まで触ったことのないものを使ってみようと、Vue.jsを使ってみました。

これまでBackboneとAngularを少し触ったことがある程度なので、偉そうなことは言えませんが、Vue.jsはとてもコンパクトで手軽に使えると感じました。とにかくBindingがしたいんだよ！という人は是非。

また、今回は、できるだけRailsの機能を使う方針で書きました。
例えば、「formをsubmitしてJSONを持ってきて…」みたいな処理を自分で書きたくなかったので、
「remote: true」でRailsにやってもらって「ajax:success」を受ける、みたいな形でやりました。「disable_with」も使いたかったし。
結局そのせいで汚くなった部分もあるので、素直に自分でsubmitすればよかったかな、とも思っています。（が、汚さの多くはVue.jsがアップデートしていくうちに解消できそうな気がするので、そちらに期待しています。）

あと、今更ながらSlimも使ってみましたが、快適でした。Vueは結構HTMLの属性を書かなきゃいけないので、HTML風にも書けるSlimと相性がよかったです。

サーバ

VULTRで動いています。
キャンペーンで実質半額なので月2.5ドルです！安い！！（初回入金と同額を上乗せてくれる）

これぐらいなら、なんとかAdSenseでやってけるんじゃないかと目論んでおります。
広告邪魔という人はオープンソースですので、自前で立てて消していただければと思います。（むしろ、そこまでして使ってくれたらありがたいです。）

今のところ大きな不満はないですが、やはりレイテンシが気になります。
※ Tokyoは転送量上限100GBで心許なかったのでLos Angelesにしましたが、pingすら200〜300msかかってて悲しいです。

そんな感じで、よろしくお願いします。

Chromeでフォームにscriptタグ等を入力して送信すると”data:;”にリダイレクトされる

11月 23

Rails 4.0.1、Chrome 31.0.1650.57 での開発中に遭遇した。

The XSS Auditor blocked access to ‘URL’ because the source code of a script was found within the request. The server sent an ‘X-XSS-Protection’ header requesting this behavior.

というエラーがコンソールに出て、画面は真っ白に。

エラーログにもある通り、理由はレスポンスヘッダに、

X-XSS-Protection: 1; mode=block

が含まれるようになったから。
参考：Ruby on Rails Security Guide — Ruby on Rails Guides

scriptタグだけじゃなく、iframeなどXSSを発生させそうな内容があるとChromeがはじく。
これらのタグの入力を許可したい場合は、

response.headers['X-XSS-Protection'] = '0'

1	response.headers['X-XSS-Protection'] = '0'

すればこの機能は無効になる。
CMSでHTML入力機能があるなどやむを得ない場合に。

そうじゃなければ、そもそもhtml_safeしなければいい。（エスケープされていればこの挙動にならないはず）

Rails 4使ってみたい。多言語ブログ書きたい。じゃ、いつ作るか、今でしょう

3月 23

林先生、大人気ですね。他にも「マドンナ古文」とか、あのCMは面白くて好きです。

さて、Rails 4で何か作ろうと思い立ってから2週間、せっせと作ってきたブログエンジンがようやく形になりました。
（ちょっと時間かかりすぎなんですが、最近あんまりまとまった時間が取れてないので、自分を責めないようにしている感じです…。）

Konnyaku · Multilingual blog with Rails 4.0

Konnyaku Tips のような、オシャレ（※）な多言語ブログが作れます。素敵ですね！
※ 有料のBootstrap用スキンを使ってるからですが^^

Rails 4.0を使ってみる
多言語なブログを簡単に書きたい
ついでにPostgreSQLも触ってみたい

という最低限の目的は達成できたので、今後は、

ちゃんと保守する

をテーマに放置せずに頑張りたいと思います。
そのためにも、もっとちゃんとテストを書けるようにならないと…。
全然上達してる気がしないので、ソースを晒すことでテスト力をアップしようという目論見。

初Rails 4の感想

前評判通り、3.1へのアップデートほどハマるところはないと思います。
作業ログをブログ化しようとしてましたが、途中で断念しました、すみません。
気になる部分あればソースを見るか、メンションでも飛ばしてください。

全作業中、一番ハマったのは、TurbolinksでAdsenseが動かないところ（笑）
Adsense won’t load with turbolinks · Issue #151 · rails/turbolinks にグレーな解決策が提案されていましたが、これでアカウント無効化されたらシャレにならないので、開発者ブログでは一旦Turbolinksをオフにしています。

体感速度に結構寄与しそうな感じだったので是非使いたかったんですが…。
特定のDOMは差し替えないというオプションが欲しい今日このごろ。
サイトに広告貼れないと貧乏人には辛いぜ…？

あとPostgreSQLはいろいろとMySQLと違うところが多くて結構つまづきました。誰かが接続してたらDBを削除できなかったりとか。

やっぱり新しいものを弄るのは楽しいので、しばらくRails 4でいろいろ作ってみようかなと思っています。

参考書籍

いつやるか? 今でしょ!

間違えた、こっち。（しつこい？）

WEB+DB PRESS Vol.73

それでは。

Rails 4でRSpecとTwitter Bootstrap

3月 10

あれ？いつの間にか日曜日だ。

昨日の続き。
作るものは多言語ブログに決まった。だいたいこんな感じ。

キラキラネームがいいらしいので、名前はKonnyakuにする。これなら将来gem化するようなことがあっても被らないだろう。（Konjacにしようと思ったら既にあってビビったけど）
デザインはTwitter Bootstrapベース
コメントとRSSぐらいは付けたい
あと画像アップロードも。
日・英で書ける
（他の言語はとりあえず考慮しない。ブログ書くぐらいネット使ってて英語読み書きできないのは日本語ネイティブぐらいだよね？）
markdownで書く
markdownのコンパイル、コードのシンタックスハイライトはクライアントサイドで。
（RedcarpetとかPygmentsに依存すると他の人に気軽に使ってもらいにくくなるので）
→ 勘違いしてた。Redcarpetは簡単にインストールできるのでmarkdownのパースはサーバ側でやることにする。
Travis CI使いたい
PostgreSQLに慣れとかないとそろそろやばそうなので無理やり使う
（tagsをarrayでやってみりゃいいのかな？）

前回はただrails newしてscaffoldしただけだったけど、今回はrspec入れたりとかいろいろやって、開発をスタートできるとこまで持っていく。
この作業はそれなりに面倒い予感がする。

プロジェクト作成

いつもの作業。データベースはpostgresql。

# プロジェクト作成
$ rails new konnyaku -T -d postgresql
$ cd konnyaku/

# rubyのバージョン指定
$ vim .rvmrc
rvm use 2.0.0

# データベース設定
$ cp config/database.yml config/database.yml.example
$ vim config/database.yml
  username: xxxx
  password: yyyy

# 動作確認
$ spring rake db:create
$ spring rake db:migrate
$ powder link

# .gitignoreにいくつか追加
$ vim .gitignore
# Mac
.DS_Store

# Vim
*~
.*.sw*

# Rails
public/assets
config/database.yml
coverage

# プロジェクト作成

$ rails new konnyaku -T -d postgresql

$ cd konnyaku/

# rubyのバージョン指定

$ vim .rvmrc

rvm use 2.0.0

# データベース設定

$ cp config/database.yml config/database.yml.example

$ vim config/database.yml

username: xxxx

password: yyyy

# 動作確認

$ spring rake db:create

$ spring rake db:migrate

$ powder link

# .gitignoreにいくつか追加

$ vim .gitignore

# Mac

.DS_Store

# Vim

.*.sw*

# Rails

public/assets

config/database.yml

coverage

動作確認。

# http://konnyaku.dev/ でアクセスできることを確認
$ open -a Safari http://konnyaku.dev/

※ .powrcに
if [ -f "$rvm_path/scripts/rvm" ] && [ -f ".rvmrc" ]; then
  source "$rvm_path/scripts/rvm"
  source ".rvmrc"
fi
が必要（初回アクセス時のnotice画面から追加できる）

# http://konnyaku.dev/ でアクセスできることを確認

$ open -a Safari http://konnyaku.dev/

※ .powrcに

if [ -f "$rvm_path/scripts/rvm" ] && [ -f ".rvmrc" ]; then

source "$rvm_path/scripts/rvm"

source ".rvmrc"

が必要（初回アクセス時のnotice画面から追加できる）

いけた。

RSpec

続いてRSpec。標準のままいきたいところだけど、まだRSpecも習得しきれていないので他に手を出すのはやめておく。

$ vim Gemfile
group :development, :test do
  gem 'rspec-rails'
end

$ bundle
$ rails g rspec:install

$ vim config/initializers/generators.rb
Rails.application.config.generators do |g|
  g.test_framework :rspec, :fixture => false, :views => false, :helpers => false
end
※ なぜか効いてなくてhelper/view specが作られちゃう。クリティカルではないので後で調べる。
  → view_specs: false, helper_specs: falseだった
　　　→ ん？やっぱviewはできちゃってる気がする。

$ spring g controller welcome index

$ vim Gemfile

group :development, :test do

gem 'rspec-rails'

end

$ bundle

$ rails g rspec:install

$ vim config/initializers/generators.rb

Rails.application.config.generators do |g|

g.test_framework :rspec, :fixture => false, :views => false, :helpers => false

end

※ なぜか効いてなくてhelper/view specが作られちゃう。クリティカルではないので後で調べる。

→ view_specs: false, helper_specs: falseだった

　　　→ ん？やっぱviewはできちゃってる気がする。

$ spring g controller welcome index

はじめてのテスト。

$ spring rake spec
1 example, 0 failures

1 2	$ spring rake spec 1 example, 0 failures

通った。

twitter-bootstrap-rails

デフォルトSCSSなのになんでわざわざLESS使うの？という突っ込みはもっともだと思います。
僕もデフォルト教の信者なのですが、このケースではRailsではなく、「Twitter Bootstrapのデフォルト」を優先したい気分なのでいつもlessを使ってます。

# lessとtwitter-bootstrap-railsのインストール
$ vim Gemfile
group :assets do
  # コメントアウト
  #gem 'sass-rails',   '~> 4.0.0.beta1'

  # アンコメント
  gem 'therubyracer', platforms: :ruby

  # 追記
  gem 'less-rails'
  gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git'
end

$ bundle

# assets、layoutの生成
$ rails g bootstrap:install
$ rails g bootstrap:layout application

# コントローラ作りなおす
$ rails destroy controller welcome index
$ spring g controller welcome index

# Turbolinksを有効化
$ vim app/views/layouts/application.html.erb
  <!-- 変更 -->
  <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
  <!-- head内に移動して変更 -->
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>

# いつものnavbar-fixed-top向け調整
$ vim app/assets/stylesheets/bootstrap_and_overrides.css.less
@import "twitter/bootstrap/bootstrap";
body {
  padding-top: 60px;
}
@import "twitter/bootstrap/responsive";

# lessとtwitter-bootstrap-railsのインストール

$ vim Gemfile

group :assets do

# コメントアウト

#gem 'sass-rails', '~> 4.0.0.beta1'

# アンコメント

gem 'therubyracer', platforms: :ruby

# 追記

gem 'less-rails'

gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git'

end

$ bundle

# assets、layoutの生成

$ rails g bootstrap:install

$ rails g bootstrap:layout application

# コントローラ作りなおす

$ rails destroy controller welcome index

$ spring g controller welcome index

# Turbolinksを有効化

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

<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>

<%= javascript_include_tag "application", "data-turbolinks-track" => true %>

# いつものnavbar-fixed-top向け調整

$ vim app/assets/stylesheets/bootstrap_and_overrides.css.less

@import "twitter/bootstrap/bootstrap";

body {

padding-top: 60px;

}

@import "twitter/bootstrap/responsive";

動作確認

$ touch tmp/restart
$ open -a Safari http://konnyaku.dev/

1 2	$ touch tmp/restart $ open -a Safari http://konnyaku.dev/

いけてる。
テストも一応。

$ spring rake spec
1 example, 0 failures

1 2	$ spring rake spec 1 example, 0 failures

問題なさそうな気がする。

長くなってきたのでcapybaraとかsimple-cov（rails4対応してるのかな？）とかはまた後で入れる。
どうせ今入れてうまくいった気になってもDBがからんできたら、あれ？ってなるだろうし。

いろいろ端折ってるので中身をもっと知りたい場合は、
tnantoka/konnyaku · GitHub
からどうぞ。

WEB+DB PRESS Vol.73

Hello, Rails 4

3月 09

そういえば、多言語ブログ（※）を書くニーズがあったので、それを作ってみることにする。
ブログはRailsにとってhello, worldの代表例だからちょうどいい。

※ Refinery CMS でできるっぽいけど、単にブログ書きたいという要件に対しては高機能すぎる…。野菜切りたいって言ってるのに日本刀渡された的な。

というわけでまずはScaffold動かすところまで試してみる。
（それなりに時間かかったので、近々試してみる予定の人は、なんかの作業の裏でインストールだけしておくと良いのではないかと思います。）

環境はOS X 10.7.5です。

Ruby 2.0 インストール

時代はrbenvと言われて久しいけど、特に困ってないので未だにrvm。

$ rvm install 2.0.0
$ rvm use 2.0.0
$ ruby -v
ruby 2.0.0p0 (2013-02-24 revision 39474) [x86_64-darwin11.4.2]

$ rvm install 2.0.0

$ rvm use 2.0.0

$ ruby -v

ruby 2.0.0p0 (2013-02-24 revision 39474) [x86_64-darwin11.4.2]

キーワード引数試してみる。

$ irb
> def say(hello: 'Hello', world: 'World')
>   p "#{hello}, #{world}"
> end

> say()
"Hello, World"

> say(hello: 'Hi', world: 'Ruby 2.0')
"Hi, Ruby 2.0"

$ irb

> def say(hello: 'Hello', world: 'World')

> p "#{hello}, #{world}"

> end

> say()

"Hello, World"

> say(hello: 'Hi', world: 'Ruby 2.0')

"Hi, Ruby 2.0"

いけてる。

Rails 4 インストール

コマンド一発だけどとても時間かかる。
（何かエラーかと思って途中何回か止めちゃったよ…）

$ gem i rails --pre
$ rails -v
Rails 4.0.0.beta1

$ gem i rails --pre

$ rails -v

Rails 4.0.0.beta1

Scaffolding

プロジェクト作成。

$ rails new hello
$ cd hello/

1 2	$ rails new hello $ cd hello/

Spring入れとく。

$ gem i spring

1	$ gem i spring

適当にmessagesを作る。

$ spring generate scaffold message title:string body:text
$ spring rake db:create
$ spring rake db:migrate
$ rails s

$ spring generate scaffold message title:string body:text

$ spring rake db:create

$ spring rake db:migrate

$ rails s

動いた。

さて、次から実際のブログ作りに取りかかろう。

WEB+DB PRESS Vol.73

1 2 Next Scroll to top

tobioka.net

You Ain't Gonna Need It

Rails 4

パーフェクトRuby on Rails片手に1つアプリを作った

まずは宣伝

なぜ作ったか

特徴

その他

パーフェクトRuby on Rails

Vue.js

サーバ

Chromeでフォームにscriptタグ等を入力して送信すると”data:;”にリダイレクトされる

Rails 4使ってみたい。多言語ブログ書きたい。じゃ、いつ作るか、今でしょう

初Rails 4の感想

参考書籍

Rails 4でRSpecとTwitter Bootstrap

プロジェクト作成

RSpec

twitter-bootstrap-rails

Hello, Rails 4

Ruby 2.0 インストール

Rails 4 インストール

Scaffolding

Find us on Facebook

最近の投稿

最近のコメント

カテゴリー

アーカイブ