フォト575アプリ開発徒然: 2012

2012年12月16日日曜日

Rails 投票機能を作るその１

デザインやバリデーションは全くないものの、アプリ基本機能が大分実装されてきた。最後の追い込みとして、「良い」「悪い」の投票機能を実装する。一般的なpostに対する、良い、悪いの投票を想定する。

(仕様)
1.作品１つに対して、複数の投票がある(1:Nの関係)。
2.投票は「良い」,「悪い」があり、１つのエンティティで保持する。
3.「良い」は、名前のみで投票することが出来る。登録ユーザならば入力も不要、ゲストは名前、E-Mailが必須とする。
4.「悪い」は、「良い」の条件に追加して、理由が必須、特に公序良俗違反か否か判定する項目を準備する。
5.夜間処理などで集計はせず、作品エンティティに「良い」「悪い」サマリ項目を追加し、ボタンが押される都度、+1カウントしていく
6.一度投票したユーザは、２回投票できない、判定はE-Mailで重複チェックする。

まず、作品側のmodel,controllerを作成する。
今日は準備で完了。

2012年12月12日水曜日

rails:comment機能を実装:削除機能

comment機能の実装の続き。私のビジネスは残業必須で、rails開発は睡眠時間を削ることに。でも楽しい。

要件

1.入力者の名称が表示されるようにする。

2.入力者が、新規入力と、削除ができるようにする。

3.コメントの入力、削除に、画面遷移・再読込を不要にする。

4.コメントの入力者のアイコンが表示されるようにする。

今日はAjaxを織り交ぜ、削除機能の実装を行う。

1.controller:commentにdestroyメソッドを追加

def destroy

@comment = Comment.find(params[:id])

@comment.destroy

render json: { comment: @comment }

end

renderがポイント。viewでどのコメント行を削除するかのkeyとなる。

2.view:photo.showを改修1

<ul>

<% if @photo.comments.any? %>

<% @bsc.comments.each do |comment| %>

<li id="comment_<%= comment.id %>"> （注意）

<%= image_tag comment.user.avatar_url(:thumb).to_s if comment.user.avatar? %>

<%= comment.body %> (by <%= comment.user.disp_name %>)

<%= link_to image_tag("ico_xmark3c15.gif"), [comment.photo, comment], :confirm => 'Sure?',

:method => :delete,

:remote => true %>

</li>

<% end %>

<% else %>

<li>no comment yet.</li>

<% end %>

</ul>

こう書いていて大いに疑問を感じたことがあって(BRAHMAN聞きながらだから余計)、世の中のSampleを有りがたく参考にしながら（ほんとうに有難い）書いていると、どれがモデル名なのか、変数なのか、何なのかマヨことが良くある。もしかするとこれがrubyのrailsのStandardなのかもしれない。まだ、どうも引っかかる。あ、開発時の命名規則とか決めていないからか、そうだそうだ（反省）

愚痴はどうでもよく、viewの開発ポイントは、画像をlink_to_image_tagで入れたところ。バッテン画像。

3.view:photo.showを改修2

viewの下部に以下を追加

$(function() {

$('a[data-method="delete"]').live('ajax:success', function(e, data, status, xhr) {

$('#comment_'+data.comment.id).fadeOut("slow");

});

</script>

酔いどれロートルの私はここでハマった。上記（注意）がすっぽ抜け、削除してもエンティティからレコードは消えるが、一向に画面は微動たりしない。たまにブラウザのソース表示で確認していくしかないなぁと感じた一瞬。1時間浪費。

さて検証。まず２つのコメントを準備。バッテンアイコンも表示されている。

２つ目のバッテンを押すと、Dialogが表示。OKを押す。

すーっとフェードアウトして消えていく。やった。

2012年12月11日火曜日

rails:comment機能を実装:ユーザ名の表示

せっかく出来た作品ページに、comment機能を追加する。

要件

1.入力者の名称が表示されるようにする。

2.入力者が、新規入力と、削除ができるようにする。

3.コメントの入力、削除に、画面遷移・再読込を不要にする。

4.コメントの入力者のアイコンが表示されるようにする。

２が半分できているだけで、ちょっと道半ば。

今日は１の完了を目標にする。

Photo:Commentが1:多で関連しているが、Userが今の機能では検索できていない。

まずこれを何とかする。

1.modelsフォルダのcomment.rbを改修

class Comment < ActiveRecord::Base

belongs_to :photo

belongs_to :user #これを追加

2.modelsフォルダのuser.rbを改修

class Muserdtil < ActiveRecord::Base

　has_meny :comments

3.Photoのcontroller:showを改修

@photo = Photo.find(params[:id],:include=>:user,

:conditions=>["photos.user_id = users.id"])

4.Photoのview:showを改修

<% if @photo.comments.any? %>

<% @photo.comments.each do |comment| %>

<li>

<%= image_tag comment.user.avatar_url(:thumb).to_s if comment.user.avatar? %>

<%= comment.body %> (by <%= comment.user.DISP_NAME %>)

</li>

<% end %>

<% else %>

<li>no comment yet.</li>

<% end %>

アイコンが大きすぎるのが気になる（サイズを小さくしておこう）ものの、

1.入力者の名称が表示されるようにする。

4.コメントの入力者のアイコンが表示されるようにする。

が達成。一気に４まで達成出来たのは良かった。

2012年12月10日月曜日

rails:comment機能を実装

せっかく出来た作品ページに、comment機能を追加する。

要件

1.入力者の名称が表示されるようにする。

2.入力者が、新規入力と、削除ができるようにする。

3.コメントの入力、削除に、画面遷移・再読込を不要にする。

4.コメントの入力者のアイコンが表示されるようにする。

・まずは、子model（コメント）基本機能を作成する。

$ rails g model comment muserdtil_id:integer body:text photo:references

・routes.rbで親modelに対して以下の定義をする。

resources :photo do

resources :comments

end

・子modelはreferrences設定をすると、勝手にbelongs_to :photo設定してくれるので、設定は不要。

・親modelの方は、has_many設定が必要。

has_many :photos

・親modelのview:showに以下を追加

<h2>Comments</h2>

<ul>

<% if @bsc.photocomments.any? %>

<% @bsc.photocomments.each do |comment| %>

<li>

<%= comment.body %> (by <%= comment.muserdtil_id %>)

</li>

<% end %>

<% else %>

<li>no comment yet.</li>

<% end %>

</ul>

追加完了。

・子のモデルのControllerを作る。

$ rails g controller Comments

def create

@photo = Photo.find(params[:photo_id])

@comment = Photo.find(params[:photo_id]).comments.create(params[:comment])

redirect_to photo_path(@photo)

end

・親modelのview:showに投稿フォームを追加。

<h2>Add a comment</h2>

<%= form_for([@post, @comment]) do |f| %>

<%= f.label :body %>

<%= f.text_area :body, :rows => 5 %>

</div>

<%= f.submit %>

</div>

<% end %>

私の場合、投稿者は、LoginSessionから取得してくるので、項目はなし。

・親controllerのshowにコメント枠を追加する。

# コメントの枠を作成する。

@photo = Photo.find(params[:id]).comments.build

お、ユーザ名が表示できていない。commentをreateする際に盛り込んでいないからですね。次回はコメント欄にユーザ名を表示する開発をします。

2012年12月6日木曜日

ImageMagickのインストールに戦々恐々

Webアプリで画像を扱う時、最近でこそcloudinaryの様な、簡単な画像編集までやってくれるサービスが出てきているものの、王道はImageMagick。

RubyではImageMagickを使うためにRMagickをgemで入れる必要があるが、ImageMagickのインストールの後ろには累々たる若葉マーク開発者の屍が多数、とまで行かないものの、多くの開発者の抜け毛を誘っている事は間違いないでしょう。

さて、私も導入します。

1.ImageMagickのインストール。

$ brew install imagemagick
==> Installing imagemagick dependency: pkg-config ==> Downloading https://downloads.sf.net/project/machomebrew/Bottles/pkg-config-0.27.1.lion.bottle.tar.gz ######################################################################## 100.0% ==> Pouring pkg-config-0.27.1.lion.bottle.tar.gz /usr/local/Cellar/pkg-config/0.27.1: 9 files, 624K ==> Installing imagemagick dependency: jpeg ==> Downloading https://downloads.sf.net/project/machomebrew/Bottles/jpeg-8d.lion.bottle.tar.gz ######################################################################## 100.0% ==> Pouring jpeg-8d.lion.bottle.tar.gz /usr/local/Cellar/jpeg/8d: 18 files, 1.3M ==> Installing imagemagick ==> Downloading https://downloads.sf.net/project/machomebrew/Bottles/imagemagick-6.7.7-6.lion.bottle.3.tar.gz ######################################################################## 100.0% ==> Pouring imagemagick-6.7.7-6.lion.bottle.3.tar.gz ==> Caveats Some tools will complain unless the ghostscript fonts are installed to: /usr/local/share/ghostscript/fonts ==> Summary /usr/local/Cellar/imagemagick/6.7.7-6: 1405 files, 32M

あら、あっさり。

2.Sampleアプリ作成。
せっかくだから動かしましょう。
篳篥日記さんのこの記事を参考に。
$ rails new carrierwave_solo

3.Gemfileを編集して、Carrierwave導入

Gemfileに以下を追加。

gem 'rmagick'

gem 'carrierwave'

$ bundle install

Using carrierwave (0.7.1)

Installing rmagick (2.13.1) with native extensions

4.ScaffoldでUserを作成する。
$ rails g scaffold User name:string avatar:string
carrierwaveでは、画像保存カラムは、stringという決まりがあるらしい。

5.画像Uploadクラスimageを作成。
$ rails g upload image
Could not find generator upload.あれ？
$ rails g uploader image
create app/uploaders/image_uploader.rb
うまくいった。

6.app/uploader/image_uploader.rbを編集。

# encoding: utf-8

class ImageUploader < CarrierWave::Uploader::Base

include CarrierWave::RMagick

include Sprockets::Helpers::RailsHelper

include Sprockets::Helpers::IsolatedHelper

# Choose what kind of storage to use for this uploader:

storage :file

# Override the directory where uploaded files will be stored.

# This is a sensible default for uploaders that are meant to be mounted:

def store_dir

"uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"

end

# Process files as they are uploaded:

process :resize_to_limit => [200, 200]

# Create different versions of your uploaded files:

version :thumb do

　process :resize_to_fill => [50, 50]

end

# Add a white list of extensions which are allowed to be uploaded.

# For images you might use something like this:

def extension_white_list

%w(jpg jpeg gif png)

end

7.app/uploader/avatar_uploader.rbを新規作成。
ImageUploaderクラスを継承する形で作成。

# coding: utf-8
class AvatarUploader < ImageUploader
  process :resize_to_fill => [100, 100]

  version :thumb do
    process :resize_to_fill => [50, 50]
  end
end

8.ファイルサイズのvalidationを行う為の設定。
https://gist.github.com/1009861#file_file_size_validator.rb
ここを参考に、
8-1.lib/file_size_validator.rbファイルを作り、上記アドレスから内容を引っ張ってくる。
8-2.en.ymlにエラーメッセージの定義を追加する。（いずれja.ymlに移設しなければ）
8-3.application.rbに以下を追記。

config.autoload_paths += %W(#{config.root}/lib)

9.app/model/user.rbを編集。

class User < ActiveRecord::Base

attr_accessible :avatar, :name

mount_uploader :avatar, AvatarUploader

validates :name, presence: true

validates :avatar, file_size: { maximum: 50.kilobytes.to_i }

end

10.Viewを編集する。
10-1.app/views/shared/_errors.html.erbを作成。

<% if model.errors.any? %>

<h2><%= pluralize(model.errors.count, "error") %> prohibited this user from being saved:</h2>

<ul>

<% model.errors.full_messages.each do |msg| %>

<% end %>

</ul>

</div>

<% end %>

10-2.app/views/users/_form.html.erbを編集。

<%= form_for(@user) do |f| %>

<%= render partial: '/shared/errors', locals: { model: @user } %>

<%= f.label :name %><br />

<%= f.text_field :name %>

</div>

<%= f.label :avatar %><br />

<%- if @user.avatar? -%>

<label><%= f.check_box :remove_avatar %>Remove</label>

<%= image_tag @user.avatar_url(:thumb).to_s %>

<%= f.hidden_field :avatar_cache if @user.avatar_cache %>

<%- end -%>

<%= f.file_field :avatar %>

</div>

<%= f.submit %>

</div>

<% end %>

10-3.app/views/users/show.html.erbを編集。

<p>

<%= @user.name %>

</p>

<p>

<b>Avatar:</b>

<%= image_tag @user.avatar_url.to_s if @user.avatar? %>

</p>

<%= link_to 'Edit', edit_user_path(@user) %> |

<%= link_to 'Back', users_path %>

10-4.app/views/users/index.html.erbを編集。

<h1>Listing users</h1>

<table>

<tr>

<th>Avatar</th>

</tr>

<% @users.each do |user| %>

<tr>

</tr>

<% end %>

</table>

<br />

<%= link_to 'New User', new_user_path %>

11.migrate忘れとった
$ rake db:migrate

ひとまずUploadの動作確認は完了。

感想

・どうやらremove_avatarとavatar_cacheをエンティティに追加しないとダメっぽい。viewから該当項目を削除すると、問題なくuploadできるようになった。
・画像の比率を考えたリサイズ方法を確立しなければならない。Flickrとかどうやってんだろう。

2012年11月23日金曜日

devise ユーザ情報編集画面

railsの説明をwebで見ていると、２つに１つは、ログイン出来たから終了、といった類の物、もしくは日本語化ができましたわ、といった物。

私は本業の傍ら、さすがに23時に仕事終わってからでは、酒を飲んで寝るだけだが、ソコソコの時間で帰宅出来た時に、酒を飲みながら開発をする「酔いどれ開発者」である。

教えを乞う側で、非常に生意気な発言になるが、酔いどれ開発者の私は、「ではインストールした後、どうしたんのですか？それで満足なのですか？」と問いかけたくなる。その続きは無い。有るのかも知れないが、公開していない。どちらか。

私は思うのだが、よっぽどの天才である限り、今、Railsなり何なり、具現化しようとしているアイディアは「在り来り」のものであるはずだ。よっぽどの天才であるスティーブですら、「未来を見て点と点を繋ぐことはできない、過去を振り返って点と点を繋ぐことはできる」私のは、アイディアどころか、ただITと古い文化を繋げるだけで、タイトルにも公開している。今まで開発されてこなかったアイディアであれば、これからも他人に開発される可能性は低いのだから、公開すればよいのに。その方が長続きする。

機能を試して満足されている方には、申し訳ない、と一言断らせて頂きます。
古い話になるが、学生時代の私がそうだったので。

1.さて、愚痴っぽくなったけれども、deviseでSign Inした後、登録内容を変更する場合の画面を表示させる。
application.html.rbに以下を追加。
<%= link_to "ユーザ情報の編集", edit_user_registration_path %>

2.表示名を編集する項目を追加。
view/devise/registrations/edit.html.erbに以下を追加
<div><%= f.label :name %><br />
<%= f.email_field :name %></div>
お、間違えている、これで１時間ぐらいハマッてしまった。これだから酔いどれは。
<%= f.text_field :name %></div>

うーん。本拠地のNOはイケてない。結局ControllerもOverwriteしないとダメだね。

2012年11月22日木曜日

deviseのSign in Sign out先

deviseのSign In、Sign Out先はroutes.rbの
root :to =>
で設定した箇所だが、publicフォルダにあるindex.htmlが残っていると、有効にならないっぽいので、リネームすると有効になる（消す、でも良いが、システム開発で物理削除はなるべく避けて通ったほうが良い、若い頃から、いろいろ痛い目にあって、無駄なリカバリ時間を過ごした事多し）

2012年11月21日水曜日

deviseのviewを変更する

deviseはviewを意識しなくとも、そっけないinterfaceが出てくる。
但し、これから作るアプリはdeviseのデフォルトのviewでは項目が足りない。
それ以前に、まっさらなデザインがどうも。

さて、viewを変更しよう。

1.deviseのviewを出す。

$ rails generate devise:views

viewフォルダにdeviseフォルダが。

2.その前に日本語化

l18nを使ってdeviseを日本語化する。

2-1.https://github.com/plataformatec/devise/wiki/I18n

ここからJapaneseのdevise.ja.ymlをありがたく頂戴する。

2-2.config/localesに配置

2-3.config/application.rbに以下を追記

config.i18n.default_locale = :ja

これでメッセージは日本語化される。見た目はviewチマチマなおさなあかん。

2012年11月18日日曜日

rails認証プラグイン：Devise導入：その1.5

去年、Deviseの記事を見返していると、どうもその１と、その２の間がぽっかり開いている。migreとかどうしたんよ、と怒れる諸兄の叱咤を受け、1.5を書こうと思う。

前回rails認証プラグイン：Devise導入：その1

1.ユーザモデルを作成
$ bundle exec rails g devise (ユーザ名)

2.作成されたmigreファイルを編集
ここで悩む。１年前にdevise導入した時は、

class DeviseCreateUser < ActiveRecord::Migration

def change

create_table(:user) do |t|

t.database_authenticatable :null => false

t.recoverable

t.rememberable

t.trackable

# t.encryptable

# t.confirmable

# t.lockable :lock_strategy => :failed_attempts, :unlock_strategy => :both

# t.token_authenticatable

devise (2.1.2)は、

class DeviseCreateUsers < ActiveRecord::Migration

def change

create_table(:users) do |t|

## Database authenticatable

t.string :email, :null => false, :default => ""

t.string :encrypted_password, :null => false, :default => ""

## Recoverable

t.string :reset_password_token

t.datetime :reset_password_sent_at

## Rememberable

t.datetime :remember_created_at

## Trackable

t.integer :sign_in_count, :default => 0

t.datetime :current_sign_in_at

t.datetime :last_sign_in_at

t.string :current_sign_in_ip

t.string :last_sign_in_ip

## Confirmable

# t.string :confirmation_token

# t.datetime :confirmed_at

# t.datetime :confirmation_sent_at

# t.string :unconfirmed_email # Only if using reconfirmable

## Lockable

# t.integer :failed_attempts, :default => 0 # Only if lock strategy is :failed_attempts

# t.string :unlock_token # Only if unlock strategy is :email or :both

# t.datetime :locked_at

## Token authenticatable

# t.string :authentication_token

お、Database authenticatableや、Trackable等、モジュールに必要な項目が、予め明示的に展開されているじゃないですか。１年前は、ぱっと見て、どんなエンティティ構成になるか、不安でたまらないもんなぁ。少なくともdevise知らない人が、保守フェーズとかで見たら混乱するだろう、危ねぇ、と思っていたのですが、見事改善。
そして、ユーザ登録時のメール認証を使用したいので、confirmableのコメントアウトを解除。

3.modelにconfirmableを追加(メール認証有効化)
class user < ActiveRecord::Base

# Include default devise modules. Others available are:

# :token_authenticatable, :confirmable,

# :lockable, :timeoutable and :omniauthable

devise :database_authenticatable, :registerable,

:recoverable, :rememberable, :trackable, :validatable, :confirmable

4.DBに反映する。
$ rake db:migrate

5.development.rbを編集
・以下のコメントアウトを追加

# Don't care if the mailer can't send

# config.action_mailer.raise_delivery_errors = false

・SMTPサーバを、Gmailに乗る為、以下を追加する。

config.action_mailer.delivery_method = :smtp

config.action_mailer.smtp_settings = {

:address => 'smtp.gmail.com',

:port => 587,

:authentication => :plain,

:user_name => 'hrendoh@gmail.com',

:password => '****'

}

6.試してみる

ん？Logには<p>Welcome yoshidaagri@gmail.com!</p>と書いていて、Confirm my accountのURLも発行済みなのだが、メールが来ない、うむむ、これは次回に調査するとして、ひとまずConfirm my accountのURLにブラウザでアクセス。

7.その前にapplication.html.erbのbody句に以下を追加

<% if user_signed_in?%>

Signed in as <%= current_user.email %>. Not you? <%= link_to "Sign out", destroy_user_session_path %>

<% else %>

<%= link_to "Sign up", new_user_registration_path %> or

<%= link_to "Sign in", new_user_session_path %>

<% end %>

</div>

8.アクセスしてみる。

Signed in as xxxxxxxx@gmail.com. Not you? Sign out

Your account was successfully confirmed. You are now signed in.

出ました！

2012年11月10日土曜日

newでボケて

以下のエラーが出る。
Can't mass-assign protected attributes

これが出た時は、modelsフォルダにある、モデル名.rbの

attr_accessibleに、アプリから更新しても良いエンティティ項目をどんどん追加していけばよい、:user_idとか。

これを忘れて、なんじゃこりゃと、騒いている私は、初心者です。

2012年1月7日土曜日

久々更新区分値から区分名の表示変換

師走の忙しさから年末年始の遅番（21:00から翌11:00とか）の多忙さがあり、
またPMPの受験が差し迫っている今日この頃、久々の更新。

ユーザ名・場所・分類のの所がNO表示になっている。
今回は、この場所の所を区分名表示に切り替えようと思う。

・前提として以下のエンティティ定義がある。
作品基本トラン：tphotobsc
場所マスタ：mplace

1.場所マスタのmodelを以下のように改修。

class Mplace < ActiveRecord::Base

has_many :tphotobscs(作品トランを複数持つ。エンティティ名+s)

end

2.作品基本トランのmodelを以下のように改修。

class Tphotobsc < ActiveRecord::Base

belongs_to :mplace(場所マスタを1つ持つ。エンティティ名のみ)

end

3.該当するViewを改修。（抜粋）

<% @bscall.each do |bscall| %>

<tr>

<td><%= bscall.mplace.PLACE_NAME %></td>

これで一応railsを再起動（本当は不要）して、試してみる。

場所がNOから区分名に変わりました。完成。早かった。

ログもチェック

変更前）

変更後）

なんと！Noごとにクエリ発行してやがりますよRails！
さらにNoの重複（No.1が2行ある）はしっかりと排除して、Noごとにクエリ発行している所が憎めなさ過ぎる...
区分値は、サーバ起動後にキャッシュに持たせた方が良さそうです。

また、modelを改修しただけでは、上記のように場所マスタにクエリを発行せず、
Viewを改修して初めて場所マスタにクエリを乱発するようになるのも特徴的。

当初の目的は達成できたので、今日はこの辺で。

登録: 投稿 (Atom)