Rails4 + dragonflyで画像のアップロード
Rails4 + dragonflyで画像のアップロード
dragonfly概要
特徴
- Rails3からよく使われている画像アップロード用gem
- 画像を保存する際は、画像をクロップしてから保存しておく場合と、表示するときにクロップする場合の2パターンが主に存在するが、dragonflyは後者。
- 表示するときにクロップするので、サイズが決まっていない場合は特に便利。
- cache機能を持っているので、パフォーマンスもそんなに問題はない
- 画像に関するプロパティを取得するメソッドも多数定義されているので便利
今回の目的
- 簡単に画像アップロードを実装する
作業(2.5h)
- ドキュメント閲覧(1h)
- gemのインストール(1min)
- dragonflyの設定ファイル作成(1min)
- modelの設定(2min)
- migrationファイルを作成(5min)
- viewの作成(20min)
- controllerの作成(1h)
gemのインストール
(Gemfile)
gem 'dragonfly', "~>1.0.0"
bundle install
modelの設定
class Photo < ActiveRecord::Base
dragonfly_accessor :image
end
migrationファイルを作成
- uidカラムを追加。名前は「dragonfly_accessorに指定した値」+「_uid」にしておく
- このuidカラムにはファイルのパスが入る
add_column :photos, :image_uid, :string
viewの作成
- を生成する
<% form_for(@photo, :html => {:multipart => true} do |f| %>
...
<%= f.file_field :image %>
...<% end %>
注意) Rails < 3.2: You'll need to add :html => {:multipart => true} to the form tag helper. と書いてあったが、Rails4でも:multpart => trueが必要だった
controllerの作成
- photo.imageに先ほどのファイルパラメータを指定すると、勝手にimage_uidカラムにファイルパスが入り、そのファイルパスに指定したファイルが保存される
photo = Photo.new(params[:photo])
# photo = Photo.new
# photo.image = params[:photo][:image]でもよい
photo.save
結果・感想
- 簡単に画像アップロードを実装できた
- ファイルアップロード用ボタンがあるのがダサいので、jquery uiなどを使ってやらないと、今風にはならない。。。それ用のいいライブラリはないだろうか。。。
- いろいろうまくやってくれるので、カスタマイズが難しい。
Rails4でOmniauthを使って、Facebookログインを実装する
Rails4でOmniauthを使って、Facebookログインを実装
Omniauth概要
今回の目的
- 簡単にFacebookログインを実装する
作業
- facebookアプリの設定(30min)
- Gemfileの設定(2min)
- modelの作成(30min)
- controllerの作成(20min)
- routeの設定(20min)
- viewの作成(2min)
facebookアプリの設定
- Home - Facebook Developersで、ディベロッパー登録を行う
- ヘッダー部の「Apps」をクリックする
- 新しいAppを作成する
- Website with Facebook Loginに自分のサイトのurlを登録する
- 「App ID」「App Secret」を控えておく
modelの作成
- Userモデルにuid, provider, tokenカラム(string)を追加
rails g model User provider uid token
- userが登録されているか判定するメソッドを定義する
class User < ActiveRecord::Base
def self.find_or_create_by_auth(auth)
user = User.where(["provider = ? and uid = ?", auth,provider, auth,uid])
if user.blank?
user = User.new
user.provider = auth.provider
user.uid = auth.uid
user.token = auth.credentials.token
user.save!
end
user
end
end
controllerの作成
- sessionを設定するためのactionをsession_controllerに定義する
class SessionsController < ApplicationController
def create
auth = request.env["omniauth.auth"]
user = User.find_or_create_by_auth(auth)
session[:user_id] = user.id
redirect_to root_url
enddef destroy
session[:user_id] = nil
redirect_to root_url
end
end
routeの設定
# welcome#indexをルートに設定する
root "welcome#index"
# facebookのログイン・認証が完了した後のリダイレクト先(auth/facebook/callback)とsession#createを紐づけ
match 'auth/:provider/callback', to: 'session#create', via: [:get, :post]
# facebookのログイン・認証が失敗した後のリダイレクト先(auth/failure)とrootを紐づけ
match 'auth/failure', to: redirect('/'), via: [:get, :post]
# signout_urlとsession#destroyを紐づけ
nmatch 'signout', to: 'session#destroy', as: 'signout', via: [:get, :post]
成果物
結果・感想
- 簡単にログインを実装できた
- いろいろな情報を取得することができるので、どこまで自分が必要なのか?を判断すること。DBの設計が大変(特にlogin_id, passwordの基本的な認証との共存)
- うまいことやってくれるので、仕組みを理解したい人は、下記リンクなどを参考にするとよいと思う
- 第1回 OAuthとは?―OAuthの概念とOAuthでできること:ゼロから学ぶOAuth|gihyo.jp … 技術評論社
作成したChrome Extensionを公開する
Chrome Extension公開
概要
- 作成したChrome Extensionを公開するまでの工程をまとめた
作業(30min)
感想
- 超簡単に公開することができた($5かかったけど)
- アイコンは今回pptで作成した。(適当な画像を作ったのち、右クリック => 画像として保存 => ペイントで編集)
- スクリーンショットはペイントで作成した。キーボードの「Prt Sc]押下 => ペイントを開く => 「Ctrl + V」=> 適当な範囲を選択して保存
- フォルダ内のReadMeも画面に表示されるので大事
- ブログのurlも張ることで、ブログPVアップも狙えると思う
- 公開することは大事。(社内で使うにしてもインストールが簡単になる)
Google Feed APIでRSSfeedのurlをゲットする
Google Feed API
Google Feed API概要
開発者用サイト
特徴
- Googleが提供しているJavascriptを読み込み、数行のJavascriptを書くだけで、RSSやAtomを検索・表示できる
今回の目的
- とりあえず実装してみてどのくらい使えそうなものか見る
作業(1時間)
1. ドットインストールにて、概要をつかむ(0.5時間)2. 開発者用サイトのDeveloper's Guideを見ながら、Feedの検索を実装する(0.5時間)
成果物
シンのおもちゃ箱 Google Feed API結果・感想
- feedを文字列で検索することができるようになった
- 文字列検索ができても、適切な文字列が思い浮かばないので、使い道に困る
- 「Techcrunch」とかいれても、ほしい情報にはたどり着けなかった
- 検索が役に立たないということは、ある固定のurlから引っ張った方がよさそう
- 固定のurlをいくつかピックアップする必要がある
- 固定のurlならばNewsがよいかな(既存だけど)
- あと、固有名称(店名や)をいれると検索も面白い。(昔のバイト先を入れたら、ブログ記事とぐるナビページが出てきた。食べログは?。。。)
- また、それを設定、変更できる画面を作成する必要がある
Google Feed APIでニュースサイト構築
開発者用サイト
特徴
- Googleが提供しているJavascriptを読み込み、数行のJavascriptを書くだけで、RSSやAtomを検索・表示できる
今回の目的
作業(6時間)
1. ドットインストールにて、概要をつかむ(0.5時間)
2. 開発者用サイトのDeveloper's Guideを見ながら、Feedの検索を実装する(0.5時間)
3. Google Feed APIで特定サイトからフィードが得られるようにする(0.5時間)
4. ニュースサイトまとめから、{ サイト名: サイトurl ] のjsonを得る(1時間)
5. サイトが持っているrssのurlを得て、{ サイト名: サイトのrssのurl ] のjsonを得る (0.5時間)
6. 5で得たjsonを用いて、自分が選択したニュースサイトからフィードが得られるようにする(1時間)
1. Google Feed APIで特定サイトからフィードが得られるようにする
参考url: https://developers.google.com/feed/?hl=ja
・参考urlの中のgoogle.feeds.Feedを用いて、特定サイトからフィードを得られるようにする
2. ニュースサイトまとめから、{ サイト名: サイトurl ] のjsonを得る
・ 適当なまとめサイトから、javascriptを使って、aタグ要素をのhrefとinnerTextを得る
・ google chromeの開発者ツールを用いると楽ちん
var sites = {}
$("ul>li>a").each(function(i, link){sites[link.text()] = link.href})
// sites = { サイト名: サイトurl, .....]
3. { サイト名: サイトのrssのurl ] のjsonを得る
・ 2で得たjsonのurlをgoogle.feeds.lookupFeedのフィルターにかける
rss = {}
sites.each(function(key, value){
google.feeds.lookupFeed(value, function(result){
if (!result.error){
rss[key] = result.url;
}
})
})
// rss = { サイト名: サイトのrssのurl ]
4. 自分が選択したニュースサイトからフィードが得られるようにする
1. rssのサイト名をvalueに設定したチェックボックスを生成する
var $ul = $("
");
var i = 1;
$.each(rss, function(name, url){
var $input = $("").attr({type: "checkbox", name: "rss"+i, id: "rss"+i}).val(name);
$ul.append($input);
i++;
});
注意) 連想配列をeachで回すと、第一引数がkey, 第二引数がvalueになる。
2. ボタンをクリックしたときに、選択されたチェックボックスのvalueをすべて取得して、localStorageに保存する
var selected_items = ;
$("input[type=checkbox]:checked").each(function(i, input){
selected_items.push(input.value);
});
localStorage.setItem("selected", selected)
3. localStorageから読み取った値を「Google Feed APIで特定サイトからフィードが得られるようにする」と同じ要領で表示する
var selected_sites =
if (localStorage["selected"] ){
selected_sites = localStorage["selected"].split(",");
}
$.each(selected_sites, function(i, site){
.........// 「Google Feed APIで特定サイトからフィードが得られるようにする」と同じ要領で。。。
});
注意) localStorageはremoveItemメソッドでしか消えない
localStorage["selected"] = null //=> "null"が保存される
localStorage["selected"] = undefined //=> "undefined"が保存される
localStorage.removeItem("selected") //=> 消える
成果物
News Feed
結果・感想
- feedを文字列で検索することができるようになった
- 文字列検索ができても、適切な文字列が思い浮かばないので、使い道に困る
- 「Techcrunch」とかいれても、ほしい情報にはたどり着けなかった
- 検索が役に立たないということは、ある固定のurlから引っ張った方がよさそう
- 固定のurlをいくつかピックアップする必要がある
- 固定のurlならばNewsがよいかな(既存だけど)
- あと、固有名称(店名や)をいれると検索も面白い。(昔のバイト先を入れたら、ブログ記事とぐるナビページが出てきた。食べログは?。。。)
- また、それを設定、変更できる画面を作成する必要がある
- 選択したNews Feedを表示することができた
- NewsRSSサイトの種類分けをした方がわかりやすい
- もっと種類を増やすと面白い
- 「英語のニュースサイト」「学術論文」「癒し画像」「アダルト関連」「イベント」とかニーズがないだろうか
- 種類を増やしたら、何が人気なのか知りたいからAnalyticsもいれよう
chrome extensionでページのSEOタグ情報をポップアップで表示
chrome extensionでページのSEOタグ情報をポップアップで表示
今回の目的
- chrome extensionのContentScript, EventPage(backgroundPage), BrowserActionを用いて、現在閲覧しているhtmlの情報をポップアップで表示する
chrome extensionについて
概要
- chrome extensionとはgoogle chromeの拡張機能のこと
公式サイト
- extensionの公式ストア
- 開発者用サイト(英語のみ)
参考ページ
概念【重要】
- 今回用いた機能の概念を書きに記す。この概念を理解するのと、それぞれの相互作用のさせ方を理解するのにかなり時間がかかった
ContentScript
- Content Scripts - Google Chrome
- 見ているページがロードされたときに、一緒に読み込ませるjs, cssを指定できる
- ページの中に無理やり読み込ませるので、jqueryのバージョン違いや、bootstrapなどを読み込ませるといろんな定義が上書きされて、そのページのjsが動かなくなったり、デザインが崩れたりする。
- MVCモデルでいうと、Modelに該当するもの(今回の場合は)
EventPage
- Event Pages - Google Chrome
- ちょっと前はBackgroundPageが主流だったが、その低コスト版。extensionの核となるもの。公式ページのBackgroundPage欄にも「EventPage 使ったら?」って書いてある
- ContentScriptからBrowserActionの挙動は変更できないし、BrowserActionから、見ているページのDOMにアクセスできないので、それを仲介する存在。
- イベントを発生させたり、拾ったりするのは、基本的にここで行う。
- ContentScriptとのやりとりはsendMessageを用いて行う Message Passing - Google Chrome
- BrowserActionのpopup.htmlファイルとのやりとりは、LocalStorage(or WebStrage)を用いて行う
- MVCモデルでいうと、Controllerに該当するもの(今回の場合は)
BrowserAction
- chrome.browserAction - Google Chrome
- ブラウザのアドレスバー横に表示されるアイコン
- popup用htmlファイルが設定されていれば、アイコンをクリックしたときに、ポップアップが出る
- MVCモデルでいうと、Viewに該当するもの(今回の場合は)
注意事項
- EventPageとpopup用htmlファイルの間をsendMessageでやり取りすることはできない
- BrowserActionがクリックされたときにおこるchrome.browserAction.onClickedイベントは、既にpopupファイルが存在する場合は発生しない(つまり、クリックするたびにイベントを発生させたい場合は、ポップアップ表示の度に、popupファイルの設定を初期化する必要がある)
- 今まで開発をしたことがある人は、最近いろいろ変わったので注意が必要(ネットに落ちてる情報も間違ってることがある)
- popup用htmlなどでscriptタグは使えなくなった(外部ファイル化する必要がある)
- ポップアップを指定するときのオブジェクトのキーがpopup => default_popupに変わった
- sendRequestはsendMessageに変わった
作業 (12h)
- ContentScriptを用いてDOM情報を抜き出して表示する(2h) => bootstrapも読み込ませたら、デザインがくずれたので、違う方法が必要に
- いろいろ調べて、EventPageとBrowserActionを使えばよいことを知る(3h)
- ドキュメントを読む(2h)
- 色々試す(3h) => ContentScript <=> EventPage, EventPage <=> BrowserActionのやり取りの方法に躓く
- 実装(2h) => できるだけrailsっぽくしてみた
成果物
rails3をherokuに公開
Heroku
Heroku概要
公式サイト
開発者用サイト
特徴
- ruby on railsとgitを用いて「無料で」「簡単に」webサイトを公開できることで有名
- 最近では、対応applicationも豊富で、Ruby、Java、Node.js、Python、Clojure、Scalaなどに対応しているらしい
- DatabaseはPostgreSQLを用いている
- 無料で利用できるスペックが比較的大きいこちら
今回の目的
- とにかく、最短で自由に編集できる公開ページを作成すること
現状
- virtual boxというアプリケーションを用いて、仮想環境を構築済
- virtial box 内にubuntu(Linux OS)がインストール済
- ubuntu内に、ruby1.9.3とrails3.2がインストール済
作業 (3時間)
1. rvmを用いて、ruby2.0.0をインストールする(1.5時間)2. herokuの初期設定を行う(0.5時間)
3. PortgreSQLをインストールする(0.5時間)
4. railsアプリを作成する(0.1時間)
5. 作成したrailsアプリを公開する(0.4時間)
1. rvmを用いて、ruby2.0.0をインストールする
参考url1: rvmのインストール方法参考url2: さくらのVPS + Ubuntu + RVM + Ruby 2.0.0-p0 + Rails 3.2.12 + Apache2 + Passenger インストール
1. 参考url1のAnswerに従って、rvmの最新版をインストールする
2. rvmが.~/.rvm/bin/rvmにインストールされたので、.bashrcにalias rvm='~/.rvm/bin/rvm'
を追記
3. 参考url2のrvmの設定の仕方に従って、rvmでruby-2.0.0をインストールし、デフォルトとして設定する
4. bashを再起動する
注意点1: sudo apt-get install ruby-rvm
でrvmをinstallしたが、1.6.7という古いものがinstallされた。
注意点2: 仕方ないのでrvm get head
をして、最新バージョンを手に入れたが、rvmが壊れてますというメッセージが流れ、参考url1を案内された
注意点3: ruby-2.0.0をデフォルトにしようとして rvm use 2.0
としたが、既に無効なコマンドだったらしい。
2. herokuの初期設定を行う
参考url3: https://devcenter.heroku.com/articles/getting-started-with-rails3- 基本的に参考url3に従えばできる
1. https://id.heroku.com/signup/devcenterでアカウント作成
2. https://toolbelt.heroku.com/debianでHerokuで用いるコマンドをインストール
3. heroku login
を打つ
3. PortgreSQLをインストールする
参考url4: http://blog.scimpr.com/2012/09/01/ubuntu12-04%E3%81%A7postgresql%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B/1. 参考url4に従って、sudo apt-get install postgresql
を打つ
2. 続いて、sudo su postgres; createdb myapp_development
を打ってデータベースを作成
3. そして、createuser -U postgres -P myapp
を打って、新しいmyappというロールを作成する
4. railsアプリを作成する
1. 参考url3に従って、適当な場所でrails new myapp --database=postgresql
を打つ2. 続いて、
cd myapp
。その中にあるGemfileというファイル内のgem 'sqlite'
をgem 'pg'
に変更し、gem 'rails_12factor', group: :production
を追記する3. そして、
bundle install
を打つ4. myapp/config/database.ymlを参考url3を参照して、変更する
5. myapp直下で
rails server
とするとhttp://localhost:3000でrailsのイントロページが見えるようになる5. 作成したrailsアプリを公開する
1. 参考url3に従い、作成したrailsアプリをgitの管理下に置くため、git init; git add . ; git commit -m "init";
を打つ2.
heroku create
を打つ(これで、gitのpush先などが設定される)3.
git push heroku master
を打つ4. すると、最後のほうに "http://xxxxx.herokuapp.com deployed to Heroku"という表示があるので、コピーする
5. "http://xxxxx.herokuapp.com”にアクセスして、公開されていることを確認する
成果物
シンのおもちゃ箱結果・感想
- rvmのインストールに苦労したが、合計3時間ほどで、railsアプリを公開することができた。(rvmやらなかったら、多分一時間くらいで終わってた。)- urlも勝手に与えられるから、apacheの設定などが不要なのがありがたい
- また、git pushするだけでデプロイができるので、capistranoなどを整備しなくてよいのがありがたい。
- しかし、あくまでサンプル版ならよいが、規模が大きくなるときついんだろうなぁ。とすでに感じている。
追記@ 2013/11/28
config/environments/production.rbにおいて、
config.serve_static_assets = true
config.assets.compile = true
にしないと、js, cssが動かないらしい。