シンのおもちゃ箱 - API研究所

APIやアプリケーションを使ってみて、その実装手順や所要時間、実装したうえでの感想などを書いてます。

Rails4 + dragonflyで画像のアップロード

Rails4 + dragonflyで画像のアップロード

dragonfly概要

開発者用サイト
特徴
  • Rails3からよく使われている画像アップロード用gem
  • 画像を保存する際は、画像をクロップしてから保存しておく場合と、表示するときにクロップする場合の2パターンが主に存在するが、dragonflyは後者。
  • 表示するときにクロップするので、サイズが決まっていない場合は特に便利。
  • cache機能を持っているので、パフォーマンスもそんなに問題はない
  • 画像に関するプロパティを取得するメソッドも多数定義されているので便利

今回の目的

  • 簡単に画像アップロードを実装する

作業(2.5h)

  1. ドキュメント閲覧(1h)
  2. gemのインストール(1min)
  3. dragonflyの設定ファイル作成(1min)
  4. modelの設定(2min)
  5. migrationファイルを作成(5min)
  6. viewの作成(20min)
  7. controllerの作成(1h)
gemのインストール



(Gemfile)

gem 'dragonfly', "~>1.0.0"


bundle install

dragonflyの設定ファイル作成
  • config/initializers/dragonfly.rbに設定ファイルが作成される



rails generate dragonfly

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概要

開発者用サイト
特徴
  • Omniauthとは、facebookログインやtwitterログインを簡単に実装するためのgemのこと

今回の目的

  • 簡単にFacebookログインを実装する

作業

  1. facebookアプリの設定(30min)
  2. Gemfileの設定(2min)
  3. modelの作成(30min)
  4. controllerの作成(20min)
  5. routeの設定(20min)
  6. viewの作成(2min)
facebookアプリの設定
  1. Home - Facebook Developersで、ディベロッパー登録を行う
  2. ヘッダー部の「Apps」をクリックする
  3. 新しいAppを作成する
  4. Website with Facebook Loginに自分のサイトのurlを登録する
  5. 「App ID」「App Secret」を控えておく
  • 注意: 実験的にrailsの開発環境(WEBrick)で試す場合のurlはxxx.xxx.xxx.xx:3000 まで記載しないといけない
Gemfileの設定
  1. gemをインストールする



gem 'omniauth'

gem 'omniauth-facebook'

modelの作成
  1. Userモデルにuid, provider, tokenカラム(string)を追加



rails g model User provider uid token

  1. 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の作成
  1. 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

  end
  def destroy

    session[:user_id] = nil

    redirect_to root_url

  end

end

routeの設定
  1. facebookのログイン・認証完了後のリダイレクト先、失敗後のリダイレクト先を自分のサイトの任意のページに紐づける



# 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]

viewの作成
  1. ログインするための画面を作る(welcome#index)



<%- current_user = User.find_by_id(session[:user_id])-%>


  <% if current_user %>

    <%= link_to "Sign out", signout_path, id: "sign_out" %>

  <% else %>

    <%= link_to "Sign in with Facebook", "/auth/facebook", id: "sign_in" %>

  <% end %>

成果物

結果・感想

作成したChrome Extensionを公開する

Chrome Extension公開

概要

  • 作成したChrome Extensionを公開するまでの工程をまとめた

作業(30min)

  1. 作成したChrome Extensionをzipで保存する(今回はgithubにあげて、zipでダウンロードした)
  2. Chrome ウェブストアを開く
  3. 右上の歯車マークをクリックしてデベロッパーダッシュボードをクリックする
  4. 「 新しいアイテムを追加する」をクリック
  5. デベロッパー登録（登録料: $5）を求められるので素直に従う
  6. 「ファイルを選択」をクリックして作成したextensionのzipファイルを選択
  7. 説明・アイコン・スクリーンショットなどを登録して、右下の「変更を公開」をクリック
  8. 1時間後くらいにgoogleで自分のアプリを検索してみる（一般的な名前じゃない限り一番上に来るはず）

成果物

Chrome ウェブストア - Seo Previewer

感想

  • 超簡単に公開することができた（$5かかったけど）
  • アイコンは今回pptで作成した。（適当な画像を作ったのち、右クリック => 画像として保存 => ペイントで編集）
  • スクリーンショットはペイントで作成した。キーボードの「Prt Sc]押下 => ペイントを開く => 「Ctrl + V」=> 適当な範囲を選択して保存
  • フォルダ内のReadMeも画面に表示されるので大事
  • ブログのurlも張ることで、ブログPVアップも狙えると思う
  • 公開することは大事。（社内で使うにしてもインストールが簡単になる）

Google Feed APIでRSSfeedのurlをゲットする

Google Feed API

Google Feed API概要

開発者用サイト

特徴

今回の目的

  • とりあえず実装してみてどのくらい使えそうなものか見る

作業(1時間)

1. ドットインストールにて、概要をつかむ(0.5時間)
2. 開発者用サイトのDeveloper's Guideを見ながら、Feedの検索を実装する(0.5時間)

成果物

シンのおもちゃ箱 Google Feed API

結果・感想

  • feedを文字列で検索することができるようになった
  • 文字列検索ができても、適切な文字列が思い浮かばないので、使い道に困る
  • 「Techcrunch」とかいれても、ほしい情報にはたどり着けなかった
  • 検索が役に立たないということは、ある固定のurlから引っ張った方がよさそう
  • 固定のurlをいくつかピックアップする必要がある
  • 固定のurlならばNewsがよいかな（既存だけど）
  • あと、固有名称（店名や）をいれると検索も面白い。（昔のバイト先を入れたら、ブログ記事とぐるナビページが出てきた。食べログは？。。。）
  • また、それを設定、変更できる画面を作成する必要がある

Google Feed APIでニュースサイト構築

Google Feed API

Google Feed API概要

開発者用サイト

特徴

今回の目的

  • Google Feed APIを用いて、簡単なニュースサイトを作る

作業(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について

概要
公式サイト
参考ページ
概念【重要】
  • 今回用いた機能の概念を書きに記す。この概念を理解するのと、それぞれの相互作用のさせ方を理解するのにかなり時間がかかった

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)

  1. ContentScriptを用いてDOM情報を抜き出して表示する(2h) => bootstrapも読み込ませたら、デザインがくずれたので、違う方法が必要に
  2. いろいろ調べて、EventPageとBrowserActionを使えばよいことを知る(3h)
  3. ドキュメントを読む(2h)
  4. 色々試す(3h) => ContentScript <=> EventPage, EventPage <=> BrowserActionのやり取りの方法に躓く
  5. 実装(2h) => できるだけrailsっぽくしてみた

成果物

  1. サイドバーのDownload Zipをクリック
  2. ダウンロードしたファイルを展開
  3. Chromeを起動して、右上のメニューから、設定画面を開く
  4. サイドバーから拡張機能を選択
  5. デベロッパーモードにチェックを入れ、「パッケージ化されていない拡張機能を取り込むをクリック」
  6. 先ほど展開したファイル(フォルダ)を指定

結果・感想

  • chrome extensionで見ているページのSEOタグ情報をポップアップで表示することができた
  • 概念がわかりづらかった
  • 特に、ContentScript <=> BrowserActionは直接やり取りできず、EventPageをはさまなくていはいけない点、ContentScript <=> EventPage, EventPage <=> BrowserActionのやり取り方法が異なる点を理解するのが面倒だった。
  • 基本的に日本語サイトから得る情報は古かったり、popup表示するだけなど初歩的すぎで、あまり役には立たなかった。

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://ｘｘｘｘｘ.herokuapp.com deployed to Heroku"という表示があるので、コピーする
5. "http://ｘｘｘｘｘ.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が動かないらしい。