2011年8月28日日曜日

rails typusでpaperclipを使って画像を扱ってみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

データ管理画面用のgem typusを使っているのですが
画像をアップロードしてサムネイルと表示させようとして
ちょっとはまってしまったのでメモ
(あとから考えると設定は非常に簡単だった・・・)

ここ参考しました
https://github.com/typus/typus/wiki/configuration-resources


バージョンは
ruby1.9
rails3.0
(typusはrails3.1推奨らしいが3.0でもできた)

gem typus
gem  paperclip
ともにインストールされていて
モデルPhotoimageが作成されているとする
そしてそのモデルに
rails g paperclip photoimagephoto
されて画像用のカラムが追加されているとする
この辺は以下を参照
rails 画像アップロード paperclipを試してみた


ここから作業

・モデルに 以下のように記述
class Photoimage < ActiveRecord::Base
  has_attached_file :photo, :styles => {:medium => "x450",:thumb => "150x150#"}
end

関連付けのためのhas_attached_fileの定義と
サムネイル用のスタイルとしてmediumとthumbの変数名でサイズを定義してやる。
デフォルトでこの名前らしい。
この名前が大事みたいで、名前を変える場合はconfigのtypus.rbで変更する。
  # Define paperclip attachment styles.
   #config.file_preview = :medium
   #config.file_thumbnail = :thumb


・config/typusの表示部分のapplication.ymlの変数名をhas_attached_fileした変数名と同じもの変えてやる
fields:
    default: photo
    list: photo

で、adminページ側からnewで画像をcreateすると
ちゃんとpaperclipのサムネイルが表示させることができた。









この仕組みがわからずちょっとはまってしまいました。
わかってしまえば設定が簡単でいいね。


あと、画像をクリックしたらプレビュー画面を表示させるために
gem 'jquery-rails' してやったらイイ感じになりました。



rails 画像アップロード paperclipを試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

もう昔から使われている画像アップロードgem paperclipですが試してみました。

以下参照させてもらいました。
gith:https://github.com/thoughtbot/paperclip
参考1http://railscasts.com/episodes/134-paperclip
参考2http://asciicasts.com/episodes/134-paperclip

ruby1.9
rails3.0

準備
・ImageMagickのインストール、設定はここを参照させてもらった
http://www.waydotnet.com/blog/2010/02/rmagick-on-ruby-1-9-1-i386-mingw32-work-d/
ただバージョンはImageMagick-6.7.2-0-Q8-windows-dll.exeを選択した。(特に理由はなし)
※ここでうまくいかなく画像が表示できず苦労した。rubyのバージョンやらImageMagickのバージョンやらがうまく合わないとダメらしい。何回か入れなおしたりしてなんとかうまくいきました。

・テスト用モデル
rails g scaffold product title:string
rake db:migrate


準備終わり、ここからpaperclip
・gemfile記述 インストール
gem 'paperclip'
bundle install

・config/environments/development.rbに以下を追加Paperclip.options[:command_path] = "/usr/local/bin/"

・画像用のいくつかのカラムを追加
rails g paperclip product photo
rake db:migrate

・モデルに以下を記述
class Product < ActiveRecord::Base
   has_attached_file :photo
end

・ビューのproduct/_form.html.erbをアップロードできるように修正
multipartの記述
<%= form_for @product, :html => { :multipart => true } do |f| %>

file_fieldの追加
  <div class="field">
    <%= f.label :photo %><br />
    <%= f.file_field :photo %>
  </div>

・ビューのshowとindexを画像表示できるように以下を追加する
showへの追加
<%= image_tag @product.photo.url %>
indexへの追加
<%= image_tag product.photo.url %>

ここまでで完了。実行して/products/newから画像をアップロードしてみる

















うーん、画像が大きすぎる。のでindexの一覧表示はサムネイルにする。


・モデルに以下を記述、styleのパラメータにsmallのサイズを定義
class Product < ActiveRecord::Base
   has_attached_file :photo, :styles => { :thumb => "50x50>" }
end

これで画像アップロード時にthmbのサイズのサムネイルを用意してくれるらしい
やってみる。(さっきアップロードした画像は一応削除しておく)

・ビューのindexの画像表示部分を修正
<%= image_tag product.photo.url(:thumb) %>

再度、画像をアップロードして確認















コードをちょっと加えるだけで画像アップロードができる。paperclip便利すねえ。
個人的には管理画面用gemのtypusを使っていてpaperclipを使うと
画像アップロードの部分は簡単に設定できるのがいい。



2011年8月26日金曜日

rails ページネート kaminariを試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
もうひとつの人気のあるページネートのgem kaminariを試してみた

参考
http://ja.asciicasts.com/episodes/254-pagination-with-kaminari
https://github.com/amatsuda/kaminari
https://github.com/amatsuda/kaminari/wiki/Kaminari-recipes
テーマ
https://github.com/amatsuda/kaminari_themes


準備
テスト用データ
rails g scaffold article title:string

rake db:migrate
ページネート確認の為適当にデータを入れておく

ここから kaminari
・gemfileに記述 インストール
gem "kaminari"

bundle install

・コントローラのindexを修正
  def index
    @articles = Article.order("title").page(params[:page]).per(1)

順番をtitle、1ページあたり1つのデータを表示

・ビューのindexにページネート表示部分を追加
<%= paginate @articles %>

/articlesから確認。問題なさそう












デフォルトではwill_pagenateより見た目はいい感じですね。first、lastのリンクもついてる

will_pagenateのinnder、outerwindowも同じように設定できる感じ
<%= paginate @users, :window => 2 :outer_window => 3 %>

カスタマイズするようのビューをジェネレータで作れるみたいなのでやってみる
rails g kaminari:views default
create  app/views/kaminari/_first_page.html.erb
create  app/views/kaminari/_gap.html.erb
create  app/views/kaminari/_last_page.html.erb
create  app/views/kaminari/_next_page.html.erb
create  app/views/kaminari/_page.html.erb
create  app/views/kaminari/_paginator.html.erb
create  app/views/kaminari/_prev_page.html.erb

たくさんページが作られる。これを自分なりに変更できるっていうことかな。
見た目はデフォルトなのでかわらない。

以下のコマンドで用意されているThemeをみることができる
rails g kaminari:views
他にgoogle githubの2つがあるようだ

早速着せ替えをしてみる。
rails g kaminari:views google

ビューのページネートのinner,outerの設定を修正
<%= paginate @articles,:window => 10, :outer_window => -1 %>

変更後を確認してみる







グーグルほぼまんまなんだが使って大丈夫なんだろうか・・・

次にgithubのthemeを使ってみる
rails g kaminari:views github

ビューのページネート部分を以下に修正
<%= paginate @articles %>

変更後を確認。















シンプルなOlderとNewerとシンプルなフォーム

themeを選んで設定できるのはいいですね。今後使えるテーマも増えていくのかな

最後にAjaxの設定も簡単みたいなので試してみる。
(rails g kaminari:views defaultでデフォルトに戻しておく)

・ビューのページネート部分を以下のように設定
<%= paginate @articles, :remote => true %>

・_articlelist.htmlを作成し、indexのテーブル部分を切り取って、貼り付け。
pagenate部分も入れておく、そしてdivでラップした

<div id="articlelist">
  <table>
    <tr>
      <th>Title</th>
      <th></th>
      <th></th>
      <th></th>
    </tr>

    <% @articles.each do |article| %>
      <tr>
        <td><%= article.title %></td>
        <td><%= link_to 'Show', article %></td>
        <td><%= link_to 'Edit', edit_article_path(article) %></td>
        <td><%= link_to 'Destroy', article, :confirm => 'Are you sure?', :method => :delete %></td>
      </tr>
    <% end %>
  </table>

  <%= paginate @articles,:remote => true %>

</div>

表示は部分テンプレートで呼び出す
<%= render 'articlelist' %>

・コントローラーのindexのresponse部分にformat.jsを追加
    respond_to do |format|
      format.js if request.xhr?

・ビューのarticlesにindex.js.erbを作成してテンプレートを置き換えさせる
$("articlelist").update ("<%= escape_javascript(render :partial => 'articlelist' ) %>");
(この書き方はあまりよくないのかもしれない。ajax勉強しないとなあ)

で完成。indexページからページネート部分をクリックしてみるとちゃんとajaxでコードが書き換えられてる。

とりあえずここまで。ページネートの見た目をカスタマイズしやすいのとremoteの設定もしやすいのがいいですね。テーマまの着せ替えも簡単。でももうちょっとバリエーションがほしいかな。そこは自分でカスタマイズして対応か

2011年8月25日木曜日

rails ページネート will_pagenateを試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
ページネートでよく使われるgemでいまさら感はありますが
掲示板作成するときにも実際使っているのですが復習で試しておきました。

参考
ページネートのいろんなCSS


とりあえずテスト用データを作成
rails g scaffold memo title:string
rake db:migrate

ページネートが確認できるように適当に数個データを入れておく。

・gemfileに記述インストール
gem "will_paginate", "~> 3.0.pre2"

bundle install

・memoのコントローラのindexをページネート用に書き換え。
 def index
    @memos = Memo.paginate(:page => params[:page], :per_page => 1).order('created_at DESC')

10個のデータで試すのでpare_pageを1つにする。
並び順は意味ないがとりあえず降順を設定してみる

・ビューにページネート部分を表示する
<%= will_paginate @posts %>

これでシンプルなものは完成。indexページを見てみる。












問題なし。簡単に実装できて非常に使えますね。

ちょっといろいろ表記を変えてみたい。

使うのはこれくらいかな
:previous_label、:next_label、次へ、前へラベル
:inner_window、:outer_window ページリンクの表示数、内側、外側
:link_separator セパレータ
:class htmlのclass名

まずラベルをymlファイルで設定し変更してみる
・en.ymlファイルに以下を記述(日本語だけど)(ymlからの設定方法)
  will_paginate:
    previous_label: "前へ"
    next_label: "後へ"

・ページリンク表示数とセパレータの設定をindexのビュー側に追加(ビューからの設定方法)
<%= will_paginate @posts, :inner_window => '2', :outer_window => '2', :link_separator  => '-' %>

でどうなったか見てみる。



表示はうまくいったけど、inner_windowとouter_windowの挙動がなんか変。
ぐぐったらバグではなく仕様みたいだ。内部計算でページ最初と最後付近はうまく表示されないらしい。

次はCSSで見た目を変えてみる
以下を参考にして
http://mislav.uniqpath.com/will_paginate/

flickrのような見た目にしてみよう。
CSSを↑のところから拝借してコピペ

ビューのページネート部分にclassの設定タグを以下のようにした
<%= will_paginate @posts, :class=>'flickr_pagination' %>










外観のカスタマイズも簡単ですね、これは便利。

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
indextankはherokuで10000docまで無料の全文検索として使えるらしいので試してみた。
gemのtankerならそれを簡単に扱えるらしい。

本家
https://indextank.com/home

参考
https://github.com/kidpollo/tanker
https://github.com/adrnai/rails-3-tanker-demo
↑これを参考にしながら試してみました

準備
・テスト用データ
rails g scaffold post name:string title:string content:string
rake db:migrate

準備終わり。ここからtanker

・apiのurlを取得
indextank本家から
https://indextank.com/home
メールアドレスのみで取得できるようだ

・indexの作成
ダッシュボードのログインして
テスト用のindexをcreateする
とりあえずtestindextankという名前でcreatしてみた。


・gemfileに記述。インストール
gem 'tanker'
gem "will_paginate", "~> 3.0.pre2"
pagenateも使っているみたいなのでついでに書いておく

bundle install

・indextankaのapiのurlを記述する
config/initializers/tanker.rbを作成し以下を記述
YourAppName::Application.config.index_tank_url = 'http://:xxxxxxxxx@xxxxx.api.indextank.com'

YourAppNameにはrailsのアプリ名を、index_takn_urlには取得したPrivate API urlを登録してみた

次にモデルを修正
・postモデル
class Post < ActiveRecord::Base
  include Tanker
  tankit 'testindextank' do
    indexes :name
    indexes :title
    indexes :content
    indexes :timestamp do
      Time.new.to_i
    end
  end
  after_save :update_tank_indexes
  after_destroy :delete_tank_indexes

end

tankit 'indexの名前'のところに先ほど作成したindexを入れてある
name、title、content、timespampをindexとして作成して
saveのときにそれを実行して、destroyのときにindexを削除する。なるほど


次にコントローラーを修正
・posts_controllerにsearchメソッドを追加
 def search
    @posts = Post.search_tank(params[:query])

    respond_to do |format|
      format.html # index.html.erb
      format.xml  { render :xml => @posts }
    end
  end


次にビューを修正
・postにsearch.index.erbを作成し以下のように記述

<h1>Listing posts</h1>

<%= form_tag(search_path, :method => "get") do %>
  <%= label_tag(:query, "Search for:") %>
  <%= text_field_tag(:query) %>
  <%= submit_tag("Search") %>
<% end %>

<table>
  <tr>
    <th>Name</th>
    <th>Title</th>
    <th>Content</th>
    <th></th>
    <th></th>
    <th></th>
  </tr>

<% @posts.each do |post| %>
  <tr>
    <td><%= post.name %></td>
    <td><%= post.title %></td>
    <td><%= post.content %></td>
    <td><%= link_to 'Show', post %></td>
    <td><%= link_to 'Edit', edit_post_path(post) %></td>
    <td><%= link_to 'Destroy', post, :confirm => 'Are you sure?', :method => :delete %></td>
  </tr>
<% end %>
</table>

<br />

<%= link_to 'New Post', new_post_path %>

indexにsearchフォームを追加した感じになっている。


最後にルートの修正
・config / routes.rbに以下のように修正
resources :posts
match '/search' => 'posts#search'

ここまででコードはできた。
早速、適当にpostデータを登録。データは適当に。












登録できたら、indexされているか確認してみる









ちゃんとindex登録されてる。いい感じ。
/searchから検索してみる。

・メロン











1つ検索された。OK

・りんご













2つ検索された。OK

・晴れ













contentの晴れの2つを検索。OK

・晴れ 雨(and検索)












contentの晴れときどき雨を検索。OK

うまくいけたんじゃないかな。
ただ、モデルを隔てて検索しようと思ったけど
すっきりする方法がわからない。
Tanker.search([Post,Comment],parms[:query])
という形で複数のモデルに対してデータは取得できるみたいだが
そこからいろいろ加工しないとダメなんだろうか。

あとググってしらべると日本語は完全にサポートがされてない?

まあとりあえずこの辺で。使うときに深く調べてみよう。

2011年8月24日水曜日

rails meta_whereとmeta_searchを試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

シンプルな検索をさせるときに便利そうだったので試してみた。

meta_whereはSQL風にかかずにrubyぽくかけるファインダー
meta_searchは簡易的検索の実装。sort機能もある

以下参考サイト

http://ja.asciicasts.com/episodes/251-metawhere-metasearch
http://railscasts.com/episodes/251-metawhere-metasearch
http://metautonomo.us/projects/metawhere/
http://metautonomo.us/projects/metasearch/#security
https://github.com/ryanb/railscasts-episodes/tree/master/episode-251



準備
・gemfile記述
gem "meta_where"
gem "meta_search"

bundle install

・テストデータ
rails g scaffold item name:string price:decimal released_at:datetime
rake db:migrate

indexの表示部分をちょっとかっこよくしておく
<% @items.each do |item| %>
  <tr>
    <td><%= link_to item.name, item %></td>
    <td><%= number_to_currency(item.price) %></td>
    <td><%= item.released_at.strftime("%B %e, %Y") %></td>

●ここからmeta_search
・コントローラのindexを書き換え
def index
   @search = Item.search(params[:search])
   @items = @search.all
end

・ビューのindexの上のほうにsearchフォーム部分を追加
<h1>Listing items</h1>

<%= form_for @search do |f| %>
  <p>
    <%= f.label :name_contains %>
    <%= f.text_field :name_contains %>
  </p>
  <p class="button"><%= f.submit "Search" %></p>
<% end %>

シンボルを:name_containsとすることでnameカラムを対象にsearchできるみたいだ

実際にデータを入れて検索してみる。うまく動いているようだ。部分検索もできている。
and検索はできないようだ。

次に値段のレンジ指定したsearchの実装
・ビューのindexに以下を追加
 <p>
    <%= f.label :price_gte, "Price ranges from" %>
    <%= f.text_field :price_gte, :size => 8 %>
    <%= f.label :price_lte, "to" %>
    <%= f.text_field :price_lte, :size => 8 %>
  </p>

下限の指定は:price_gte、上限は:price_lteを使っている。
gteとlteでmete_whereが使われている

再度確認。priceの下限と上限を指定してsearchボタンをクリックするとちゃんと絞込みができている。
次にソート機能の実装をしてみる。
・ビューのindexのsearchフォームの下に以下を追加
<p>
  Sort by:
  <%= sort_link @search, :name %>
  <%= sort_link @search, :price, :default_order =>:asc %>
  <%= sort_link @search, :released_at , :default_order => :desc %>
</p>

sort_linkを使って カラムを指定してやるとsortするリンクが表示される
defalut_orderで初期の並び方を設定。

再度確認。リンクをクリックするごとに昇順、降順を順番に表示してくれる。
見た目はこんな感じ。



















使う際のセキュリティとしてビュー側からsearchするカラムを指定できることから
ビューがなんらかの問題で書き換えられた場合、想定しないデータが検索されて表示されてしまうこと。その対策はこちらを参照 http://metautonomo.us/projects/metasearch/#security

簡単にシンプルで並び替えや絞込みもできる検索フォームが作れるのがいいですね






2011年8月22日月曜日

rails フォームビルダーのformtasticを試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
入力フォームを簡単に作成できるformtasicを試してみた。

参考
http://railscasts.com/episodes/184-formtastic-part-1
http://railscasts.com/episodes/185-formtastic-part-2
https://github.com/justinfrench/formtastic

rails 3.0.10
ruby 1.9.2

・gemfileに記述
gem 'formtastic', '2.0.0.rc1'
bundle install

(gem 'formtastic'だと、scaffoldで自動で変換はしてくれないようだ)

・formtasticインストール
rails g formtastic:install
  create  config/initializers/formtastic.rb
  create  public/stylesheets/formtastic.css
  create  public/stylesheets/formtastic_changes.css


・テスト用データ:category
rails g scaffold category name:string description:text
rake db:migrate

・入力フォーム部分は以下のような感じ

<% semantic_form_for @animal do |f| %>
  <% f.inputs do %>
    <%= f.input :name %>
    <%= f.input :born_on %>
    <%= f.input :category %>
    <%= f.input :female %>
  <% end %>
  <%= f.buttons %>
<% end %>


formtasticで変換されてシンプルな形になっている。
気になったのがバリデーションのエラー表示の記述がないのでどうなるのかと思ったが
ちゃんとポップアップみたいな感じで表示してくれる

もし、通常のエラー表示にしたいなら
config/initializersで
Formtastic::SemanticFormBuilder.inline_errors = :none
に変更して以下のようにエラーメッセージ表示を記述してやれば

<% semantic_form_for @animal do |f| %>
  <%= f.error_messages %>
  <% f.inputs do %>
  <!-- rest of form -->

通常のrailsのエラー表示にように戻せるみたいだ
まあこれはformtasticのままでいいかな

・さらにデータの追加
rails g scaffold animal name:string category_id:integer born_on:date female:boolean


・モデルに関連関係のものを記述
class Animal < ActiveRecord::Base
    belongs_to :category
end


class Category < ActiveRecord::Base
  has_many :animals
end


・各種パラメータの設定を変えてみる。form部分を書き換え
<% semantic_form_for @animal do |f| %>
  <% f.inputs do %>
    <%= f.input :name %>
    <%= f.input :born_on %>
    <%= f.input :category %>
    <%= f.input :female %>
  <% end %>
  <%= f.buttons %>
<% end %>

を下のように書き換える

パラメータを変更、追加
・1900年から表示
・空白を含まない選択リスト
・ラベルの変更+radioボタンでmale、femaleの2択

<% semantic_form_for @animal do |f| %>
  <% f.inputs do %>
    <%= f.input :name, :hint => "Use the owner's name if none is provided" %>
    <%= f.input :born_on, :start_year => 1900 %>
    <%= f.input :category, :include_blank => false %>
    <%= f.input :female, :as => :radio, :label => "Gender", :collection => [["Male", false], ["Female", true]] %>
  <% end %>
  <%= f.buttons %>
<% end %>

ちゃんと変更が反映されていた。
コード量が少ないのと、各種パラメータを設定しやすいのがいいですね。
でも、なぜかレイアウトがちょっと変だった。CSSの問題かな。

simple_formはrails3.0.10だとうまくいかなくて途中で断念。
formtasticより軽量でカスタムもしやすいらしいので使いたかったのになあ

2011年8月21日日曜日

rails profanity_filterを試してみたけれどうまくいかない

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
不適切発言をフィルターして見えなくするprofanity_filterを試してみた。

https://github.com/intridea/profanity_filter
本家

・gemfileに記述でbundleインストール
gem install profanity_filter
bundle install

モデルに以下を追加。:foo,:berは変えたい文字列(カラム)
profanity_filter :foo, :bar


準備はこれだけフィルターのmethodを設定すると置き換わり方を変えることができる。


profanity_filter :foo, :bar
  #=>禁止ワード→@#=>$%に置き換わる

profanity_filter :foo, :bar, :method => 'dictionary'
  #=>禁止ワード→config/dictionary.ymlの言葉に置き換わる

profanity_filter :foo, :bar, :method => 'vowels'
  #=>禁止ワード→母音だけ置き換える fuck→f*ck

profanity_filter :foo, :bar, :method => 'hollow'
  #=> 禁止ワード→最初と最後だけ残す。fuck→f**k

profanity_filter :foo, :bar, :method => 'stars'
  #=> 禁止ワード→*に置き換える

以下のようなメソッドもある
ProfanityFilter::Base.clean('frak')               #=> '@#$%'
ProfanityFilter::Base.clean('frak', 'dictionary') #=> 'fr*k

_originalをつけると元の言葉を表示
post.title          #=> '@#$% title'
post.title_original #=> 'Fraking title'

置き換わるのは3語以上必要?

すでに200語くらいの不適切ワードがdicrionary.ymlファイルに登録されているのですぐに使えるけど
アルファベットなので、日本語もできるか試してみた。
そのままymlファイルに同じように記述してもうまくいかない。アルファベットであれば問題なく追加できる。うーん、わからん。

rails thumbs_upをちょっとだけ試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

投票的な機能を付加することができるgem thumbs_upをちょっと試してみた。
機能として3つあるらしい

  1. acts_as_voteable : 記事やコメントなどをvoted対象にする
  2. acts_as_voter : ユーザーをvoterとする
  3. has_karma : カルマ的なもの


自分はさわりの部分だけでvoteableだけ試してみました。

gem
https://github.com/brady8/thumbs_up

・gemfileに以下を記述
gem 'thumbs_up'

・インストール
bundle install

・voteのmigration作成
rails generate thumbs_up

・テスト用
rails g scaffold question title:string
rake db:migrate

・vote用コントローラー
rails g controller vote voteup votedown


で、コードを以下のように記述

・モデルにvote機能を付加
class Question < ActiveRecord::Base
  acts_as_voteable
end

・questions_controllerのshow
  def show
    @question = Question.find(params[:id])
    @vote = @question.votes.build

・votes_controllerののcreate
  def create
    @vote = Vote.new(params[:vote])
    @vote.voteable_id=params[:vote][:voteable_id]
    @vote.voteable_type=params[:vote][:voteable_type]
    @question = Question.find(params[:vote][:voteable_id])

・モデルのvote.rb
validates_uniqueness_of :voteable_id, :scope => [:voteable_type, :voter_type, :voter_id]
をコメントアウト

・ビューのquestions/show.html.erb
<p id="notice"><%= notice %></p>

<p>
  <b>Title:</b>
  <%= @question.title %>
</p>
<p>
  <b>vote_count_up:</b>
  <%= @question.votes_for %>
</p>
<p>
  <b>vote_count_down:</b>
  <%= @question.votes_against %>
</p>
<%= form_for @vote do |f| %>
  <% if @vote.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@vote.errors.count, "error") %> prohibited this entry from being saved:</h2>
 
      <ul>
        <% @vote.errors.full_messages.each do |msg| %>
          <li><%= msg %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <h2>vote</h2>
  <div class="field">
    <%= f.radio_button:vote,"true",{:checked=>true} %>voteup<br/>
    <%= f.radio_button:vote,"false",{:checked=>false} %>votedown<br/>
    <%= f.hidden_field :voteable_id %>
    <%= f.hidden_field :voteable_type %>
  </div>

  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

<%= link_to 'Edit', edit_question_path(@question) %> |
<%= link_to 'Back', questions_path %>

・ルートの追加
resources :votes, :only => [:create]

で形はできたようだ。






















(titleが投票しくださいなってる・・・)
voteableのユニークをコメントアウトしないとvoteを1回しか登録できないというコードの中身を理解していないのとコードがごり押しすぎて変な感じがする。もっとシンプルな書き方があると思われる。
voterとkarmaの機能は試していない点を考えると使えるgemなのかなー
うーん、納得できていない。まだ自分には早いか
   

2011年8月20日土曜日

rails acts_as_commentableでコメント作成を試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
acts_as_commentableはコメント作成するときにいろいろやってくれるらしい。
早速やってみました。

本家
https://github.com/jackdempsey/acts_as_commentable


ここのuseを見ると

・コメントを付加するモデルに記述して
class Post < ActiveRecord::Base
acts_as_commentable
end

・コメントを追加
commentable = Post.create
commentable.comments.create(:title => "First comment.", :comment => "This is the first comment.")

・コメントを取得する。
commentable = Post.find(1)
comments = commentable.comments.recent.limit(10).all

といった具合にできるみたいです。

titleやuser_idの属性もあるみたいで、各ユーザー毎のコメントを取得したり
コメントにtitleをつけることも想定されているようです。

ここにgemの構造的な説明と使い方の例をが説明されてました。
http://www.arailsdemo.com/posts/16

英訳の練習で雑ですが訳してみました。訳的なもの
実際にこれにそってやってみました。(幾分ソースを省いています)


・gemfileに追加gem 'acts_as_commentable'

・インストールbundle install

・コメント用DB、モデル作成
rails generate comment

・テスト用postの作成
rails g scaffold post title:string
rake db:migrate

・コメントコントローラを作成 createメソッドを作成
rails g controller comment create


ここから各ファイルの内容
・model/post.rb
class Post < ActiveRecord::Base
  acts_as_commentable
end

・comment_controller
class CommentsController < ApplicationController
  def create
    @commentable = Comment.find_commentable(params[:comment][:commentable_type], params[:comment][:commentable_id])
    if @commentable
      @comment = @commentable.comments.build(params[:comment])
      if @comment.save
        redirect_to show_page_url, :notice => "Thanks for the comment."
      else
        flash.now[:alert] = "You had some errors for your comment."  # edited 10/28/10 use 'flash.now' instead of 'flash'
        render_error_page
      end
    else
      redirect_to root_url, :alert => "You can't do that."
    end
  end


  private
  def show_page_url
    case @commentable.class.name
    when "Post" then post_url(@commentable)
    else @commentable
    end
  end

  def render_error_page
    model_name = @commentable.class.name
    instance_variable_set("@#{model_name.downcase}", @commentable)
    render "#{model_name.underscore.downcase.pluralize}/show"
  end

end

・posts_controllerのshowメソッド
def show
    @post = Post.find(params[:id])
    @comment = @post.comments.build
    @post.comments.pop
 
    respond_to do |format|
      format.html # show.html.erb
      format.xml  { render :xml => @post }
    end
  end

・view/comments/_form.html.erbにコメント入力フォームのテンプレート作成
  <div class="field">
    <%= f.label :comment %><br />
    <%= f.text_area :comment %>
    <%= f.hidden_field :commentable_id %>
    <%= f.hidden_field :commentable_type %>
  </div>

・view/post/show.html.erbにコメント表示部分と作成部分を追加

<table>
  <tr>
    <th>comment</th>
  </tr>

<% @post.comments.each do |comment| %>
  <tr>
     <td><%= comment.comment %> </td>
  </tr>
<% end %>
</table>

<%= render 'comments/form' %>

・ルートを追加
resources :comments, :only => [:create]

で、コードはできあがり。

localhost/postsから新しい記事を作成して、作成された記事のshowリンクをクリック
コメント表示欄にコメントを入力してcreateボタンを押せば、記事毎のコメントを表示できました。
コメント機能は自作でもできそうですがあると便利ですね。






2011年8月19日金曜日

rails acts_as_taggable_on_steroidsを試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
タグといえばほとんどのサイトに使われているんではないでしょうか?
有名なgemみたいで使い方は他のブログにもたくさん書いているので
ここでは機能をメモ用としてまとめておきます。

・gem

acts_as_taggable_on_steroids
https://github.com/jviney/acts_as_taggable_on_steroids

・使い方
 ruby script/generate acts_as_taggable_migration
 rake db:migrate
 対象モデルにacts_as_taggableをつける

・機能
(ちょっと説明が雑ですが)
対象モデルにタグ要素を付加して扱うことができる
p.tag_list # ["Funny", "Silly"] #タグを複数登録したり
p.tag_list.add("Great", "Awful") #タグを追加したり
p.tag_list.remove("Funny") #タグを削除したり

・タグをビューに表示したり
<%= f.label :tag_list %>
<%= f.text_field :tag_list, :size => 80 %>
※1つのフィールドに複数のタグを入力して半角,で区切ると一度に複数登録できるみたい。

・findや条件つけてタグを検索したり
Post.find_tagged_with('Funny, Silly', :match_all => true)

・タグクラウドを簡単につくれたり
@tags = Post.tag_counts


・タグをキャッシュに保存して負荷を軽減したり
  class CachePostTagList < ActiveRecord::Migration
    def self.up
      add_column :posts, :cached_tag_list, :string
    end
  end

View:
  <% tag_cloud @tags, %w(css1 css2 css3 css4) do |tag, css_class| %>
    <%= link_to tag.name, { :action => :tag, :id => tag.name }, :class => css_class %>
  <% end %>

・タグの区切り?を変えたり
TagList.delimiter = " "

できるらしい、すごく便利ですね。
サイトでタグはよく使われるでこれで簡単に扱えそうです。

以下のブログ参考させてもらいました。

タグクラウドの実践
http://wine4u.seesaa.net/article/169189619.html

メソッドが詳しくのってる
http://higelog.brassworks.jp/?p=93

rails 管理画面を簡単に作ってくれるtypusをやってみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
railsのデフォルトの画面は文字だけでレイアウトもなく寂しい感じだが
typusを使うと簡単に管理画面を作ってくれるらしい。っていうことで試しました。
ついでにadminアカウント認証機能も付けれるみたいなのでそれもやってみました。

公式
https://github.com/typus/typus

こちらにデモがあります。
http://demo.typuscms.com/admin

・gemファイルに
gem 'typus'

・bundleインストール
bundle install

・admin登録できるようにする。
rails generate typus:migration

このコマンドでadmin_userが作成されるみたい

・テスト用のモデル
rails generate scaffold post tittle:string body:text
rake db:migrate

・ジェネレーターで、ビューを作る
rails generate typus

もし、あらたにモデルを作成したら
rails generate typusで対応するビューを作らないと反映されない。(これにちょっとはまった)

これでできあがり。localhost/adminにアクセスしてアカウント登録画面になる。


以下のwikiも参考になる。権限機能やDeviseとの連携もできるようだ。
https://github.com/typus/typus/wiki/recipes-devise-authentication


そのほかにもよくある管理機能追加のgemでは
railsadmin→見栄えもよく多機能。人気のやつ。(自分はなぜかうまくインストールできなく断念)。
http://demo.railsadmin.org/admin

activeadmin→個人的にはこれが良いとおもったけどあまり資料がないみたいで。データ検索は細かく設定できて高性能。ログイン管理もついてる。
http://demo.activeadmin.info/admin

ライセンスがどうなってるのかぼんやりしかわかってないので
無難なtypusかなあ。avtiveadminってすごい便利そうなのに使ってる人少ないのかな。

しかしいろんな機能を付けてくれるのはありがたいけど
細かいところは自分でしないといけないってなると
便利なgemを細かく理解するよりdeviseだけを使ってこつこつやったほうがやりやすい気がしてきた。
良いところをうまく使えるような器用さを身に付けたいですね

rails wep-app-themeを試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
ビジュアルを重視しなければシンプルですっきりとしたレイアウトを簡単に設定できる。
実際web製作ではビジュアルも大事だけど、こういうのがあると場所によっては楽できそう

・web-app-theme→シンプルでカラーのテーマを簡単に選択してつけることができる。


rails 3.0.10
ruby1.9
rake 0.87

・まずはgemfileに記述
gem 'web-app-theme'
bundle install

必要なライブラリをインストールしてくれる
(rake web_app_theme:dependences:installはしなくてもいけた。)

・テスト用のpostを作成
rails g scaffold post title:string body:text
・これは共用レイアウトすべてテーマを設定
rails g web_app_theme:theme
ここでweb-app-themeのテンプレートが適用される。
適用されるのはapplication_controllerなのですべてのビューに適用される

個別のコントローラービューに設定する場合
とりあえずadminのビューを作成
rails g controller admin index
指定のコントローラービューにテーマを設定
rails g web_app_theme:theme admin
指定コントローラービューのテーマを変更
rails g web_app_theme:theme admin --theme="blue"

でadmin/indexを見るとblueのテンプレートが適用されている。(postはデフォルトのthemeのまま)

その他コマンド
こうするとおそらくサインイン用のレイアウトになっているんだろう。たぶん
rails g controller sign index login logout
rails g web_app_theme:theme sign --layout-type=sign

これをするといい感じにかっこよくなる(デフォルトはtext?よくわからない)
rails g web_app_theme:theme sign --layout-type=crud

使いこなせたら簡単に以下のデモのようなスタイルが作れるみたい。





2011年8月18日木曜日

rails cancanを試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
cancanは編集や削除権限などを付与して管理者はただのユーザーといった役割とあたえることができる。deviceとの併用も便利みたいだ

以下を参考

・gemfileに以下を記述してbundleインストール
gem 'cancan'
bundle install

・テスト用記事
rails g scaffold article title:string body:text

rake db:migrate

・abilityモデルを作成
rails g cancan:ability

・ablitityモデルに権限を設定する。
まずは読むだけのread権限(update,destroyができない)

#ability.rb
class Ability
include CanCan::Ability
def initialize(user)
can :read, :all
end
end

・articleのindexのedit,destroyリンク部分を修正、update、destory権限がなければedit、destroyリンクは見えない状態にする。

<% if can? :update,@articles %>
<%= link_to 'Edit', edit_article_path(article) %>
<% end %>
<% if can? :destroy,@articles %>
<%= link_to 'Destroy', article, :confirm => 'Are you sure?', :method => :delete %>
<% end %>

この状態でindexページを見るとedit、destroyリンクが消えてくれました。

ただ、このままではeditアクションのurlを直接指定すると編集できてしまう問題があるので
以下のように権限がなければ例外エラーを発生させる。

def edit
@article = Article.find(params[:id])
unauthorized! if cannot? :edit, @article
end

でもアクションごとに設定するのはめんどくさいので コントローラーごと設定できる。
load_and_aruthorize_resourceを記述する。

class ArticlesController < ApplicationController
load_and_authorize_resource

/articles/1/editを直接URL指定しても
アクセスする権限がない以下のエラーがでて編集できないようにできた。

「You are not authorized to access this page.」

ここからhttp://d.hatena.ne.jp/dimros/20110326/1301145073参照させてもらいました。

admin権限と見るだけのview権限を試す。

Userモデルに権限ROLESと、権限を確認するrole?を設定
まずはUserモデルにroleのcolomの追加

rails g migration add_role_to_users role:string
rake db:migrate

rails g devise:viewsでビューを書き換える
devise/registrationsのeditとnewに権限選択できるセレクターを追加

<%= f.label :role %>
<%= f.collection_select :role, User::ROLES, :to_s, :humanize%>

UserModelに以下を追加
attr_accessible :role
ROLES=%w[admin viewer]

def self.role?(role)
ROLES.include? role.to_s
end

権限として、adminの場合は全て使えて、viewerは見ることしかできないように権限設定
user ||= User.new # guest user (not logged in)
if user.role == "admin"
can :manage, :all
else
can :read, :all
end

でadminでサインインするとすべてのshow,edit,destroyが表示され
viewerでサインインするとshowだけが表示されました。
便利便利。

・こっちはadmin


・こっちはviewer、見るだけのひと

2011年8月17日水曜日

ウェブデザイン技能検定問題集 実技練習をやってみて

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
ウェブデザイン技能検定3級問題集 実技練習をやってみました。
難易度的にはサイトを1つ作ったことがあれば特に問題なさそうな感じでした。
気をつけたいのは、コード補完に慣れていると実際に書けないことがある。
使えるのがテキストファイル、Terapad、サクラエディタということなのでそれにも多少慣れておきたいです。試験中で慣れるのに時間を費やすのはもったいないので。

以下の点の書き方を注意しておけば問題ないかなぁ。

・フォルダ、ファイルのパスの理解
上のディレクトリ ../folder/file

・リンクの書き方
<a href="folder/file.html">リンク</a>

・外部スタイルシートの適用
<link href="file.css" rel="stylesheet" type="text/css" />

・CSSのプロパティーの設定、背景色、文字色
background-color: #CCCCCC;
color: #CCCCCC;

・CSSのプロパティー設定、背景画像、繰り返し
background-image: url(mages/image.gif);
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repat;

画像種類 gif jpeg png

・構造化
<h1>タイトル</h1>
<p>文章</p>
<h2>サブタイトル</h2>

Ordered List 順序ありリスト
<ol>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ol>

Unordered List 順序なしリスト
<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>


あとは問題集についている模擬テストで様子見かな

2011年8月16日火曜日

ウェブデザイン技能検定問題集 ウェブ製作 運用管理部分

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
3級の問題集をやってきましたが学科部分はこれで終わりました。
最後のウェブ製作 運用管理部分です。
気になったキーワードをメモメモ。


7章 アクセシビリティー・ユニバーサルデザイン

・アクセシビリティー
高齢者・障害者を含む誰もが、さまざまな製品や建物やサービスなどを支障なく利用できるかどうか 参考サイト

・ユニバーサルデザイン
文化・言語・国籍の違い、老若男女といった差異、障害・能力の如何を問わずに利用することができる施設・製品・情報の設計(デザイン) 参考サイト

・ウェブコンテンツJIS JIS X8341-3
高齢者・障害者等配慮設計指針-情報機器における機器,ソフトウェア及びサービス-第三部:ウェブコンテン 参考サイト


8章 ウェブサイト設計、構築技術
・モックアップ、プロトタイプ
プロトタイプは試作品的な意味でモックアップは模型的な意味。

・EDI
商取引に関する情報を標準的な書式に統一して、企業間で電子的に交換する仕組み 参考サイト

・Eコマース
インターネットなどのネットワークを利用して、契約や決済などを行う取引形態 参考サイト

・ペルソナ法
仮想ユーザー設定。細かなプロフィールを設定し、ニーズを抽出して、要件定義し、アプリケーションに取り込んでいく方法 参考サイト

・インタラクティブ
双方向、対話という意味。

9章ウェブサイト運用・管理技術

・BASIC認証
ユーザ名とパスワードの組みをコロン ":" で繋ぎ、Base64でエンコードして送信する。全てのWebサーバおよびブラウザで対応している。盗聴や改竄が簡単であるという欠点を持つ 参考サイト

10章 安全衛星・作業環境構築
・アフォーダンス
ヒトが知覚できる「行為の可能性」。,物をどう取り扱ったらよいかについての強い手がかりを示してくれる。 参考サイト

・グレア
不快感や物の見えづらさを生じさせるような「まぶしさ」 参考サイト

・メタファ
隠蔽、隠喩という意味。 何かに例えた表現をすること。 参考サイト

・人間工学
人間が可能な限り自然な動きや状態で使えるように物や環境を設計し、実際のデザインに活かす学問 参考サイト

・VDT作業における労働衛生管理のためのガイドライン
VDT作業者の心身の負担をより軽減し、作業者がVDT作業を支障なく行ことができるようにするためのガイドライン。1日の作業時間、休止、連続作業時間、作業環境、使用機器、健康管理などについて書かれている 参考サイト


学科部分を初通しでだいたい7割正解でした。
↑のキーワードを全て知っている人であればまず問題なさそうな難易度です。
格基準が60%らしいので、2、3回とおせばいけるかなー。
引っ掛け的な問題が結構あったのでよく問題を理解することか。

次は実技のコーディングのほうをやっていきます。

Devise+omniauthがうまくいかない件

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
deviseをベースとしてomniauthが使えると多機能+外部の認証でこれ1本でいけるかなーと思って
いろいろサイトやらブログを参考しながらやってみたんですが
いまいちうまくいかない・・・・。

参考 https://github.com/plataformatec/devise/wiki/OmniAuth%3A-Overview

これにそってfacebookをtwitterに変えてやってみたけど、うーん・・・。しっくりこない。

deviseで使う場合、結局Twitterなどの外部で認証するため、ほとんどの機能を削除して使っているみたいでdevise上でデータを管理したりする意味があるのかと疑問に思ってきた。ちょっとまだ手をつけるのには早いのかもしれない。

認証はこれくらいにして次のgemを試していこうと思います。

2011年8月15日月曜日

Deviseによる認証を試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
よく使われている多機能の認証用gemです。
すでにいろんな方が試してブログなどに書いているのでその辺も参考にさせてもらいました。

以下を参考にさせてもらいました。

deviseのhow-to翻訳
http://kosuke-komiya.info/wiki/index.php?RubyOnRails_DeviseTutorialListJa

railscastの日本語訳
http://ja.asciicasts.com/episodes/209-introducing-devise
http://ja.asciicasts.com/episodes/210-customizing-devise

deviseのreadmeの翻訳
http://d.hatena.ne.jp/babie/20100729/

ブログ
http://d.hatena.ne.jp/akihito_s/20110708

gith
https://github.com/plataformatec/devise/


感想は、ログインに関する機能はだいたいついていてさらに細かい設定ができる。その分すべてを理解するのは大変かなあ。私はさわりの部分だけ使えたらいいかなと思いました。
実際に試したのは認証+アカウント作成のメール通知とアカウントロックの機能です。↑を参考にしつつなんとか動かせました。

●機能メモ
デフォルト

:database_authenticatable, パスワード管理DB
:registerable,ユーザーのアカウント作成編集削除機能
:recoverable,パスワード忘れ対策
:rememberable,次回以降自動的にログインする」の機能
:trackable,ログイン履歴をとる
:validatable入力されたメールアドレスやパスワードのチェック

好みで付加する機能
:Confirmable 確認のためにEメールを送り、サインインの際に既に確認されたかどうか検査
:Lockable 規定回数以上ログインに失敗したらアカウントをロックする
:Token Authenticatable "single access token"として知られる)認証トークンに基づいてサインインする
:Oauthable  OAuth2 サポートを追加します。
:Timeoutable 特定の期間に活動がなかった場合、セッションを破棄

今回、Confirmableと:Lockableを付加してみました。


●はまったこと、エラー対処のメモ
1.development環境で確認メールが送られない

対処
config/environments/development.rbの以下をtrueに
config.action_mailer.raise_delivery_errors = true

2.herokuサーバーにおいたときのエラー
Missing host to link to! Please provide :host parameter or set default_url_options[:host] when sending emails

対処
以下をproducsitonに記述、修正
  #devise
  config.action_mailer.default_url_options = { :host => 'devisetestcafe.heroku.com' }

3.Net::SMTPAuthenticationError (535-5.7.1 Username and Password not accepted. Learn more at                  
)

対処

参考 http://stackoverflow.com/questions/6956018/netsmtpauthenticationerror-in-rails-3-1-0-rc5-when-connecting-to-gmail

#add mail config
config.action_mailer.perform_deliveries = true # Set it to false to disable the email in dev mode
config.action_mailer.delivery_method = :smtp

ActionMailer::Base.smtp_settings = {
                    :address        => "smtp.gmail.com",
                    :port           => 587,
                    :authentication => :plain,
                    :user_name      => "my mail name",
                    :password       => "my mail password"
}

4.ルーティングエラー No route matches "/users/sign_out"

対処
ビューを変更
<%= link_to "Sign out", destroy_user_session_path %>
下に変更する
<%= link_to "Sign out", destroy_user_session_path, :method => :delete %>


5.モデルの名前をuser以外にした場合のエラー
ビュー、コントローラーのuser~などのメソッドを修正する
→user以外に名前を変えないほうがよさそう

Omniauthでのtwitter認証が簡単に併用できるらしいので次はそれをやってみよう



ウェブデザイン技能検定問題集 ウェブビジュアルデザイン ウェブインフォメーション部分をやってみて

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
ウェブデザイン技能検定問題集 ウェブビジュアルデザイン ウェブインフォメーション部分終了。

気になったキーワード

5、ウェブビジュアルデザイン

・ウェブカラーデザイン
W3Cで明度差が125以上かつ色差が500以上 ページデザイン

・動画ファイルの種類
MPEG MP4 AVI MOV ASF Oggなど 参考サイト

・画像データの種類
BMP JPEG GIF PNG  参考サイト

・音楽ファイルの種類
MIDI MP3 WAV  参考サイト

・フォントファミリーの種類
selfはひげ状という意味で明朝体のようなもの
sans-selfはその反対でゴシック体ようのようなもの。
Monospaceは等幅
Cusiveは筆記体などの手書き

・インタラクティブ
対話」または「双方向」といった意味で、ユーザーがパソコンの画面を見ながら、対話をするような形式で操作する形態 参考サイト

・コーディック CODEC
符号化方式を使ってデータのエンコード(符号化)とデコード(復号)を双方向にできる装置やソフトウェア
6、ウェブ インフォメーション サービス

・コーポレートサイト
企業向けの文字が多いサイト。
・スペシャルサイト
イベント用のビジュアルの最新技術を使った魅せるサイト

・インタラクションデザイン
ユーザーの人力操作に対するシステムからの適切な反応を設計すること 参考

・ISO 9126
ソフトウェアの品質に関する規格

・ISO 9241-11、JIS Z8521
ユーザビリティに関するかなり厳密な定義
指定された目標を達するために用いられる際の有効さ、効率および満足度の度合い。
日本ではJISZ8521

・利用可能性ヒューリスティック
想起しやすい事柄や事項を優先して評価しやすい意思決定プロセスのこと。
(思い込みみたいなものかな)  


配色のサンプルでよさそうなサイト。 http://fkm.sakura.ne.jp/

サイトの目的、イメージにあった配色をする場合に参考になりそうです。

あと配色ジェネレーターを使えば簡単に配色の組み合わせを作ってくれるので
実際のWeb製作のときに便利ですね。 

2011年8月13日土曜日

ウェブデザイン技能検定問題集 ウェブデザイン技術、ウェブ標準部分をやってみて

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
この辺からわかりそうなサイト製作に関する用語がでてくるのかな
気になったキーワードは


●ウェブデザイン技術

  • インタプリタ式 
  • ECMAScript
  • XHTML1.0 1.1
  • XML宣言
  • marginとpaddingの違いの定義


●ウェブ標準

  • DTD
  • WaSP
  • W3C
  • WCAG  


ウェブ標準で書くことがウェブデザインには重要ですね。
インタプリタはRubyを使っている者として調べてみました。
説明は下のほうにあります。



















・インタプリタ式
中間表現を逐次解釈しながら実行するプログラム。対してコンパイラは一括変換。
Rubyはインタプリタ
参考

・ECMAScript
EcmaがJavaScript と JScript を標準化するために作られたスクリプト言語。
Google Chrome JavaScript  ECMA-262 3rd edition
参考

・XHTML1.0 1.1
Webページを記述するためによく使われるHTMLを、XMLに適合するように定義し直したマークアップ言語。作られた理由はインターネットをはじめとしたオンラインでのデータの送受信にXMLが使用されることを想定しhtmlをxml処理系で扱えるようにする必要があった。
書式として、まずXML宣言から記述し、続けてDTDを記述する。
XHTML1.0では3種類つかえるがXHTML1.1ではstrict一種類のみ
Xhtml1.1では name属性が廃止されid属性のみを使用する。

参考

・marginとpaddingの違いの定義
ボーダーから他の要素までの余白をmargin
コンテントとボーダーまでの余白をpadding


・DTD
マークアップ言語 SGMLおよびXMLにおいて、文書構造(文書型)を定義するためのスキーマ言語の一つである。3種類あって厳格なStrict、移行型のTransitionalフレームセットを使うframeset



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">


・WaSP
The web standerds project 万人がウェブテクノロジーに、簡単で、手軽にアクセスできる標準を勝ち取るために戦う草の根連合
 参考

・W3C
W3Cは ウェブで利用される技術の標準化団体
公式サイト

・WCAG 
W3Cで査定したウェブコンテンツのアクセシビリティに関するガイドライン。原則として知覚可能 、操作可能、理解可能、堅牢性がある。
 公式サイト


以下はウェブ標準的なものをチェックできるサイト


・DTDのStrictをチェックできるサイト http://validator.w3.org/


・CSSの文法チェックできるサイト http://jigsaw.w3.org/css-validator/
   

ウェブデザイン技能検定問題集 ワールドワイドウェブをやってみて

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
ウェブデザイン技能検定問題集のワールドワイドウェブ(WWW)部分のお勉強

気になったキーワード

  • 著作隣接権
  • 電気通信事業法
  • 電子署名および認証業務に関する法律
  • 不正競争防止法  
  • 産業財産権の種類
  • 著作権の保護期間

法律難しい・・・。
各種の説明は下のほうに書いてますので、気になる方は見てみてください。




















・著作隣接権
著作物の公衆への伝達に重要な役割を果たしている者(実演家,レコード製作者,放送事業者及び有線放送事業者)に与えられる権利

参考サイト

・電気通信事業法
電気通信事業について定めている法律
(目的)第1条 この法律は、電気通信事業の公共性にかんがみ、その運営を適正かつ合理的なものとするとともに、その公正な競争を促進することにより、電気通信役務の円滑な提供を確保するとともにその利用者の利益を保護し、もつて電気通信の健全な発達及び国民の利便の確保を図り、公共の福祉を増進することを目的とする。

 参考サイト


・電子署名および認証業務に関する法律
電子署名が署名や押印と同等の法的効力を持つことを定めた法律。略称は電子署名法
(目的)
第一条  この法律は、電子署名に関し、電磁的記録の真正な成立の推定、特定認証業務に関する認定の制度その他必要な事項を定めることにより、電子署名の円滑な利用の確保による情報の電磁的方式による流通及び情報処理の促進を図り、もって国民生活の向上及び国民経済の健全な発展に寄与することを目的とする。


・不正競争防止法
正当でない市場競争で利益を得ることを規制する。
ドメイン名の不正所得に関するものがある。

例えば、類似のドメインを取得して
1 不当な高額で転売する行為
2 著名を利用してサイト開設して利益を得る行為
は規制される。

参考サイト

・産業財産権の種類
特許権、実用新案権、意匠権、商標権

・著作権の保護期間
基本は著作権は著作物の創作と同時に発生し、著作者の死後50年

2011年8月12日金曜日

omniauthによる認証part2 Yahoo、Google、OpenID、MyOpenID

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

●追記 日付:2012/2/6
http://yorunocafe.blogspot.com/2012/02/rails-omniauth.html

以下のやり方はちょっと古いみたいです。



前回のwitter認証に続いて、Yahoo、Google、OpenID、MyOpenIDの認証をやってみました。
こちらが試したデモページです デモページ
※削除しました。

ベースは前の記事のコードを流用しています。前回のtwitter認証の記事
追加で変更した箇所を書いていきたいと思います。

①configのinitializeのomniauth.rbに Yahoo、Google、OpenID、MyOpenIDの場合のコードを定義


Rails.application.config.middleware.use OmniAuth::Builder do
# you need a store for OpenID; (if you deploy on heroku you need Filesystem.new('./tmp') instead of Filesystem.new('/tmp'))
  require 'openid/store/filesystem'
  provider :twitter, 'CONSUMER_KEY', 'CONSUMER_SECRET'
    # generic openid
   provider :openid, OpenID::Store::Filesystem.new('./tmp'), :name => 'openid'
   # dedicated openid
   provider :openid, OpenID::Store::Filesystem.new('./tmp'), :name => 'google', :identifier => 'https://www.google.com/accounts/o8/id'
   # provider :google_apps, OpenID::Store::Filesystem.new('./tmp'), :name => 'google_apps'
   # /auth/google_apps; you can bypass the prompt for the domain with /auth/google_apps?domain=somedomain.com
  #yahooJapan :identifier => 'yahoo.co.jp'
   provider :openid, OpenID::Store::Filesystem.new('./tmp'), :name => 'yahoo', :identifier => 'yahoo.co.jp'
   #provider :openid, OpenID::Store::Filesystem.new('./tmp'), :name => 'yahoo', :identifier => 'yahoo.com'
   provider :openid, OpenID::Store::Filesystem.new('./tmp'), :name => 'myopenid', :identifier => 'myopenid.com'
end


※場合によってはemail列をDBに追加してもいい。今回はなし。

②ビューにYahoo、Google、OpenID、MyOpenIDのサインインのリンクを追加

  <p>add other singin</p>
    <%= link_to "Sign in with Google", "/auth/google" %><br/>
    <%= link_to "Sign in with Yahoo", "/auth/yahoo" %><br/>
    <%= link_to "Sign in with OpenID", "/auth/openid" %><br/>
    <%= link_to "Sign in with MyOpenID", "/auth/myopenid" %><br/>
 
※コールバック後のcreateのルートは変えずにそのままでいける

これで完了です。
GoogleもYahooも認証できました。
OpenIDとMyOpenIDはアカウントもってなかったのでやってないけど問題ないでしょう(笑


試してるなかでいくつかはまった点があったので書いておきます。


①アカウントサインイン時に以下のエラーがでる

request-URI Too Large
WEBrick::HTTPStatus::RequestURITooLarge

URIが大きすぎるというエラーですが
解決法として
1.mongrelだと問題ないらしい。→mongrelに変更する
もしくは
2.WEBrickのままで解決する場合 
ruby-directory/lib/ruby//webrick/httprequest.rb の246行目らへんの
1024→2048にかえる。ruby中身のコードをかえるため自己責任で

def read_request_line(socket)
      @request_line = read_line(socket, 2048 ) if socket
      if @request_line.bytesize >= 2048  and @request_line[-1, 1] != LF
        raise HTTPStatus::RequestURITooLarge
end

ここを参照しました。 https://github.com/intridea/omniauth/issues/43

②yahooでサインインするとアメリカのyahoo本家に飛んでしまう
initializersのomniaut.rbの:identifireをyahoo.com→yahoo.co.jpにかえる
provider :openid, OpenID::Store::Filesystem.new('./tmp'), :name => 'yahoo', :identifier => 'yahoo.co.jp'

③openidでルートエラーになる場合
リンクが/auth/openid になってることを確認(open_idではない)
※元からだったのか書き間違えなのかはまってしまった


以上です。

OmniAuth.を使うと簡単に認証できるのがいいですね。
こちらでアカウント作成機能を付けなくてもいいのが楽です。
ユーザーももってるアカウントを使えたほうがいいですしね。
Deviseと組み合わせて使う方法もあるみたいで次はこれを試してみたい。

ウェブデザイン技能検定問題集 インターネット概論やってみて

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
ウェブデザイン技能検定の3級の対策問題集をやり始めました。
1章のインターネット概論、団体名、規格名が多く出てきます。
とりあえずやってみた感想は、思ったより手ごたえがあるなと思いました。

自分がわからなかったキーワードを数個選んでみました。
皆さんはわかるでしょうか?眺めてみてください。
この辺がわかれば3級は問題ないみたいですが。

  • IETF
  • ECMA
  • ISO-HTML、ISO/IEC 15445:2000
  • IS0-13407
  • JIS X 4156
  • JIS X 8341-3
  • Web2.0
  • XSLT
  • SCP
  • IANA
  • IDE
  • IPS  

調べた説明を下のほうに書いたので気になる方は見てみてください。















  • IETF・・・インターネット技術の標準化を推進する任意団体。RFCとして標準化 。公式→http://www.ietf.org/
  • ECMA・・・ 「ヨーロッパ電子計算機工業会」の略。主に情報通信技術に関する標準を策定している。公式→http://www.ecma-international.org/
  • ISO-HTML、ISO/IEC 15445:2000・・・HTMLの国際規格。HTML 4.01ベースでより厳しいもの。
    ISOとIECが共同で策定したHTMLの規格。
  • IS0-13407・・・人間工学 - インタラクティブシステムの人間中心設計プロセス、ユーザビリティー、使いやすさなどの規格 日本工業規格 。
  • JIS X 4156・・・ISO/IEC 15445:2000の翻訳→参考 http://www.y-adagio.com/public/standards/tr_html_ug/toc.htm 
  • JIS X 8341-3・・・高齢者・障害者等配慮設計指針-情報通信における機器、ソフトウェア及びサービス-第三部:ウェブコンテンツ。音声ブラウザやスクリーンリーダーなどの高齢者障害者支援技術を正しく解釈できるように。参考→http://www.jsa.or.jp/stdz/instac/commitee-acc/web-tech-repo/technical-report.html#JIS20
  • Web2.0・・・ ティム・オライリーの定義『送り手と受け手が流動化し誰でもがウェブを通して情報を発信できるように変化したweb』 ここが良くわかる。http://internet.watch.impress.co.jp/static/column/web20/2006/01/30/
  • XSLT・・・ XML→XML文書に変換する簡易言語
  • SCP・・・ Secure Copy
    パケットの確認をしないので速いが4GB以上は遅れない。シンプルで速いけどその分制約が多いという感じ 参考→http://www.atmarkit.co.jp/fnetwork/rensai/tcp28/02.html
  • IANA・・・インターネット上で利用されるアドレス資源(IPアドレス、ドメイン名、プロトコル番号など)の標準化や割り当てを行っていた組織。
  • IDE・・・IDS(不正侵入検知装置)ネットワーク型IDS、ホスト型IDSなどがある
  • IPS・・・IPS(不正侵入防御装置)、パケットに含まれる不正な攻撃を遮断する。IDEとIPSの違い→参考  http://www.itmedia.co.jp/enterprise/articles/0412/10/news068.htm

参考なれば幸いです。

2011年8月11日木曜日

omniauthによるtwitter認証を試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
●追記 日付:2012/2/6
http://yorunocafe.blogspot.com/2012/02/rails-omniauth.html

以下のやり方はちょっと古いみたいです。

railscastに乗ってる認証を参考にしながらデモページを作ってみた。

デモページ:SimpleOmniAuthのデモ
※削除しました。

・下準備
rails g nifty:scaffold post name:string index new edit #post用(適当)
rails g controller sessions #認証をセッションで管理
rails g model user provider:string uid:string name:string #認証データ保存用
rake db:migrate


①gemfileに定義
gem "omniauth"

②config/initializer にomniauth.rbファイル作成し、twitter/appのコンシューマーキーとシークレットキーを設定。(あらかじめ取得しておく)

Rails.application.config.middleware.use OmniAuth::Builder do  
  provider :twitter, 'CONSUMER_KEY', 'CONSUMER_SECRET'  
end

③サインアウトとサインインのリンクを表示したいビューに定義。
<div id="user_nav">  
  <% if current_user %>  
    Welcome, <%= current_user.name %>!  
    <%= link_to "Sign Out", signout_path %>  
  <% else %>  
    <%= link_to "Sign in with Twitter", "/auth/twitter" %>  
  <% end %>  
</div>  

auth/twitterで内部でなんか認証ページに飛んでくれるらしい。
その戻しとしてsessions_contorllerのcreateを呼び出すようにrouteファイルに記述

④ルートの設定 sessions_controllerのcreateとdestoryを呼び出す感じ

 root :to => "articles#index"  #これはarticleのページ用
 match "/auth/:provider/callback" => "sessions#create" #認証後のコールバック
 match '/auth/failure' => 'simpleomniauthsessions#failure' #認証失敗時
 match "/signout" => "sessions#destroy", :as => :signout #サインアウト


⑤usersモデルに認証データのを保存するメソッドを記述しておく。

def self.create_with_omniauth(auth)
  create! do |user|
    user.provider = auth["provider"]
    user.uid = auth["uid"]
    user.name = auth["user_info"]["name"]
  end
end

⑥sessions_controllerのcreateで認証データを取得してuserデータに入れて保存する。
そこからユーザーデータを取得して、保存する。(パスワードは保存されないようだ)
idはセッションで管理。サインアウト時のdestoryと認証失敗時のfailureも記述しておく。

def create
    auth = request.env["omniauth.auth"]
    user = User.find_by_provider_and_uid(auth["provider"], auth["uid"]) ||   User.create_with_omniauth(auth)
    session[:user_id] = user.id
    redirect_to root_url, :notice => "Signed in!"
 end
  
 def destroy
    session[:user_id] = nil
    redirect_to root_url, :notice => "Signed out!"
 end

 def failure
    redirect_to simpleomnisuthposts_url, :notice => "failure of authentication"
 end


ここまでで一応認証はできるみたいだ。
ページを指定してフィルターをかける場合は以下のようなヘルパーメソッドを用意して
セッションにuser.idを確認する。

helper_method :current_user

private
def current_user
  @current_user ||= User.find(session[:user_id]) if session[:user_id]
end


フィルタをかけたいコントローラーに以下のような感じで記述。
current_userがなければindexにリダイレクトさせる

before_filter :authenticate, :except => [:index, :show]

  # login check
def authenticate
    redirect_to :index unless current_user
end

次はgoogle、yahooのアカウントでの認証をテストしてみたい。
openIDを使うのかな?

ウェブデザイン技能検定について

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
Web系の資格としてウェブデザイン技能検定を取りたいと考えています。
なぜ取りたいかと思ったかいうと国家資格だからです。(えっ
でもそれだけでなく、Webサイトを作る人の中には資格はもたず独学で必死に勉強して作った自分のサイトをアピールする人もいると思います。その人達にとっては資格なんて飾りでしょう。
私の場合は、まだまだ自慢できるサイトがないのでアピールする部分がありません。
Web系の国家資格です!資格なんて役に立たないという声もちらほらあるんですが・・・

ウェブデザイン技能検定とは(資格の王道さんより

ウェブデザイン技能検定とは、ウェブサイトのデザインにあたり、国際標準規格に基づくホームページの制作及び、システム構築、セキュリティ対策などの知識及び能力を認定するWeb関連初の国家資格。

公式はこちら ウェブデザイン技能検定公式

1級~3級まであります。3級は比較的簡単にとれるそうです。

最近できた資格らしく教材があまりない感じ。
さっそく公式がお勧めする3級用のガイドブックと問題集を購入。
まずはガイドブックを読み終えました。

試験内容として学科と実技にわかれており
学科部分のについてはネットのことからセキュリティー、web製作に関することなど
多少知らない部分もあったが、それほど難しくなさそう。

実技部分についての内容を各級でまとめてみた。
どれくらいの難易度かわかるのではないでしょうか。

・3級の実技試験はテキストエディタとブラウザのみを使用。作業はHTMLやCSS
・2級の実技試験はさらにアプリケーションを使用した画像の作成やアニメーションの編集、flashやCGI
・1級の実技試験はデータベースとの連動を含むウェブサイトの構築、ペーパー実技試験(設計作業)

例えば3級の実技作業の内容は

  • 作業内容 ファイルの移動、フォルダの作成
  • リンク設定、画像配置
  • 文書の構造化→見出しや段落、リストの要素のマークアップなど
  • CSSの適用→外部スタイルシート。Link要素を使う
  • CSSのプロパティー、コーディング
これを見ると、ものすごく簡単そう・・・・。

Webサイトを立ち上げれるような人であれば1級はいけるのかな?

とおもったら問題集みたら結構ぶ厚い。
そう甘くはないかもしれない。
とりあえず3級取得して、2級、1級と目指して行きたいと思います。




Bloggerでのping送信

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
どうせなら多くのひとにブログ更新を知らせて見れもらいたい。
普通のブログなら設定でping送信のurlを設定できると思うのですが
Googleさんのbloggerは海外1箇所のping送信のみで且つ追加ができないようだ

なので代わりにpingを送信してくれるサービスのpingoo!を使うことにした。

pingoo!

登録は日記、一般的な使い方は無料。商用、法人は有料。

登録すると、atomを登録することで更新情報をpingとして設定サーバーに送信してくれる
登録方法はここ参照。pingoo!によるBloggerのping登録

また、デフォルトで既に何箇所かサーバーが登録されているのも楽。

さらにping先を追加したい場合は管理画面で簡単に追加できる。
あとは、よくあるブログランキングに登録してpingを設定した。

たぶんうまくいってるだろう。


英語は絶対、勉強するな!をやってみた感想

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
英文の文章、技術書的なものが読めたらなーと
できれば英語のニュースが見れたらなーと
できれば会話できたらなーと

ちょと本腰いれて英語を習得しようということで
「英語は絶対、勉強するな!」というちょい前に流行った本を使ってます。
何冊かシリーズがでてるみたいで私のはちょっと古いかも

内容は英語の録音CDと、訳もなにもない英文40↑セクションくらい。
他と違うのは単語や文法を勉強していくのではなく、英語を耳に慣らさせるみたいな感じです。

やったことは
1.読み取り
最初の期間はずっと読み取り、CDをずっと聞いてそれを聞き分ける感じ。(通しだと1時間くらい)
わからない単語もあるんだけどとりあえず毎日ずっと続けて単語が聞き分けれる感じになるまで
この段階では英文は絶対みない

2.書き取り
耳が慣れてきたら、それを聞いて英文を書きとっていく。わからない単語は調べる。
あと声を出して読むのもいいらしいので、音読もする。
これが結構大変だった。何回も同じ箇所をリピートしながら書き取るので時間がかかった。
(手書きはめんどいのでテキストファイルで1セクションで1時間くらい)


読み取りを1ヶ月続けてその後書き取りは1日2セクションずつで20日くらい
(書き取りの間も読み取りは続けている)

今段階の感想は
・英語を聞き取ろうという意識は高くなった。聞き取る、書き取るという方法は英文に慣れるに有効
・1ヶ月程度ではぺらぺらしゃべったりすることはできない(当然か)
・文法まったく知らないときついそう。中学程度は必要だと思うけどわからない。
・CDの内容は、日常的なものビジネスや学生、ショッピングなどなど。いろんな状況のものがある。
で、他の教材と違うなーと思ったのは、口語的な熟語や単語が多い。たぶん実際の日常会話に近いものなんじゃないかな(自信ないけど)

続けて半年~1年以上、続けたら英文を聞き取って会話できる・・・のかもしれない。
個人的には「聞き取るという意識をもつこと」と「単語を聞き分けて書き取りの難しさ」に気づいたことが大きいなと思った。

あとはネットに転がってる英語の動画やニュースなどで同じように練習していこうかな。

2011年8月10日水曜日

はてなブックマークをbloggerにつけてみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
はてなブックマークをbloggerにつけたかったけど
はてなの公式のヘルプ通りにやってもうまくいかない。

Blogger に「はてなブックマーク,はてなスター」ボタンを設置する

を参考にさせてもらいました。

あと、公式のはてなブックマークコメントもつけてみた。
ちょっとコメント欄が大きい気もする。

簡単にログイン認証ページが作れるnifty-generators

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
こちらのサイトが非常に参考になりそうです。


機能ジャンル別にわけて多くのgemが紹介されています。これを参考にgemをテストしていって
必要なgemを取り入れて行きたい。

まずはログイン認証に関して調べました。OmniAuth、Deviseが定番みたいですが
nifty-generatorsというgemがあるみたいでログイン認証ページを作るときに使うみたいです。


機能として
・ログイン認証(アカウント作成、ログイン、ログアウトページ)の自動作成
モデルのバリデーションも自動で作ってくれる
・SHA-1によるハッシュパスワード

デモページ作ってみました。nifty-generatorsのデモページ
※削除しました。

newやeditはアカウント作成してログインする必要があります。

やり方は(使用したのはruby 1.9 rails 3.09)
①gemfile以下を記述
gem "nifty-generators", :group => :development
gem "bcrypt-ruby"

bcrypt-rubyは どっかの引用「SHA-1のようなハッシュ関数よりも低速で動作するハッシュアルゴリズムを実装している」らしい。nifty-generatorsのパスワード認証に必要なので入れる

②gemインストール
bundle install

③各種ページ、モデル、コントローラのgeneratorで実装
・テスト用ページの作成 post
rails g nifty:scaffold post name:string index new edit

・アカウント認証用ページの作成 account 
 rails g nifty:authentication
 (アカウント作成用ページと、ログイン、ログアウトページが作成される)

・レイアウト部分 ビュー、CSSを作成。
rails g nifty:layout

titleが定義されていないというエラーが出る場合はこれが必要のようだ

・config設定用(よくわからない、とりあえず実装)
rails g nifty:config
root_urlがエラーになる場合
root :to => "home#index"をrouteファイルに追加
既存のpublic/indexのファイルを削除しておく。

homeコントローラーとindexアクション、ビューを作成。
ついでにpost一覧へのリンクもつけておく
<%= link_to "posts View All", :controller=>:posts,:action=>:index %>

あとついでに共通レイアウトにログイン、ログアウトのリンクもつけておく。
(controller_authenticationに例のソースコードがあるのでコピペ)

<% if logged_in? %>
   Welcome <%= current_account.username %>.
    <%= link_to "Edit profile", edit_current_account_path %> or
     <%= link_to "Log out", logout_path %>
   <% else %>
    <%= link_to "Sign up", signup_path %> or
    <%= link_to "log in", login_path %>.
 <% end %>

④認証が必要なページにフィルター login_requiredメソッドを定義
before_filter :login_required, :except => [:index, :show]

この場合はposts_controllerのindex,show以外のページを設定

で問題なくいけました。
ただ、ログイン時のuser名の入力に
name or emaiとになっているがnameだと認証してくれない・・・・。
emailを入力した場合は問題なく動いてくれる。
とりあえず使うときに考えよう。
次はOmniAuth、Deviseを実装してみよう。