どのようにRailsと七牛雲を使って保存しますか?15分以内に一つの画像を作って社交応用の原型を分かち合います。


十年前、Webアプリケーションの枠組みRailsの創始者David Heinemier Hanssonはビデオを録画し、Ruby on Railsを使って15分以内にブログエンジンを作る方法を実証してくれました。このビデオはRailsの優れたMVC、構成(Convention over Configration)などの設計より慣習が優れており、強力なコード生成、scaffoldなどの機能により、Ruby on RailsがWebアプリケーションの中核機能を編纂する効率的で簡潔な機能を示しています。Ruby on Railsという技術も、Web 2.0時代には大いに異彩を放っており、Webアプリケーション開発に最適な技術案の一つとなっている。
十年の発展を経て、ソフトウェア業界はすでに雲計算時代に突入しました。大規模なアクセスに対応し、研究開発と運営コストをコントロールするクラウドストレージは、ウェブ開発に欠かせないインフラとなっている。今日は、Railsと七牛雲の保存方法を見てみましょう。15分以内に一つの画像を作って、社交応用の原型を共有します。
七牛雲の記憶は、共有クラウドサービスであり、大容量のオブジェクト記憶機能を提供し、クラウドファイル処理と配信サービスを提供する。開始前に、私たちは7つの牛雲を作成する必要があります。試用口座を記憶し、いくつかの基礎知識を理解します。
七牛雲ストレージはKey-Value形式のオブジェクトストレージシステムであり、一つのkeyはリソース(ファイル)に対応しています。
リソースは、ある空間に記憶しなければならない。単独で存在してはいけない。アカウントは複数の空間を作成できます。
基本Railsプロジェクトの作成
Ruby 1.9以上、Rails 3.0以上の任意のバージョンを使用することができます。この例ではRuby 2.2.3とRails 4.2.5を使用します。
RubyとRailsをインストールした後、Ralsコマンドを使用してアプリケーションkonanaのディレクトリ構造と基本ファイルを作成します。

rails new konata
このコマンドの実行が完了したら、すぐに空白のRailsアプリケーションを実行して、次のコマンドを実行して、ブラウザでアクセスします。http://localhost:3000 運転効果を表示:

cd konata
rails server
Rails Scaffoldを使ってCRUDを実現します。
私たちはRailsのscaffold機能を使って、写真の発表を処理するためのmodel、controler、view、およびdatabase migrationなどのソースコードファイルを生成します。

rails generate scaffold post title filename qiniu_hash
rake db:migrate
アクセスhttp://localhost:3000/posts 私たちはすでにpostの完全なCRUD機能を獲得しましたが、まだ写真をアップロードできません。
七つの牛APIを使って写真のアップロードを実現します。
Gemfileを修正し、7牛のRuby SDKへの参照を追加します。

gem 'qiniu'
以下のコマンドを実行して7牛のRuby SDKをインストールします。ここでは本来はbundleを実行してインストールするべきでしたが、7牛のRuby SDKに依存しているmime-typesバージョンの設定は保守的なので、bundle udateコマンドを使ってレベルを下げるmime-typesが必要です。依存衝突を解決します。

bundle update mime-types
config/secrets.ymlを編集し、7牛雲メモリアカウントの鍵を追加します。

development:
secret_key_base: <YOUR_SECRET_KEY_BASE>
qiniu_access_key: <YOUR_QINIU_ACCESS_KEY>
qiniu_secret_key: <YOUR_QINIU_SECRET_KEY>
config/initializers/qiniu.rbを作成し、先ほど加入した鍵を使って七牛クラウドストアサーバと接続を確立します。内容は以下の通りです

require 'qiniu'

Qiniu.establish_connection!(
 access_key: Rails.application.secrets.qiniu_access_key,
 secret_key: Rails.application.secrets.qiniu_secret_key
)
注意:
Access KeyとSecretKeyは絶対に秘密にしなければなりません。ユーザーが確認できるWebフロントエンドのソースコードに現れたり、クライアントバイナリコードにコンパイルしたりしてはいけません。
7つの牛APIは、異なるビジネスシーンの需要を満たすために複数のアップロード方法を提供する。ここでは、最も代表的で、最も簡単なHTMLフォームのアップロード+HTTP 303を使ってリダイレクトして戻る方法を選択して、クライアントファイルが直接七牛クラウドにアップロードされるようにします。この方法の利点は、クライアントファイルがサービスサーバを介して中継される必要がないことであり、7牛の強力なCDNを利用してアップロード速度を最適化し、信頼性を向上させることもでき、サービスサーバの帯域幅を節約することもできる。
app/views/posts/_を編集します。form.html.erbは、7牛雲に基づいてSDK構造のアップロードフォームを格納します。その中のアップロード証明書フィールドに注意してください。Posts Controllerで作成します。

<%= form_tag 'http://upload.qiniu.com', multipart: true do %>
 <%= hidden_field_tag :token, @qiniu_upload_token %>

 <div class="field">
 <%= label_tag :title %><br>
 <%= text_field_tag 'x:title' %>
 </div>
 <div class="field">
 <%= label_tag :image %><br>
 <%= file_field_tag :file %>
 </div>
 <div class="actions">
 <%= submit_tag 'Create' %>
 </div>
<% end %>
アプリ/controllers/posts_を編集します。controller.rbは、コードを追加してアップロード証明書を生成し、7牛雲に基づいてカスタム応答内容を格納してpost例を作成する。

def new
 @qiniu_upload_token = generate_qiniu_upload_token
 @post = Post.new
 end

 def create
 upload_ret = JSON.parse(Base64.urlsafe_decode64(params[:upload_ret]))
 @post = Post.new(
 title: upload_ret['title'],
 filename: upload_ret['fname'],
 qiniu_hash: upload_ret['hash']
 )
 # ...
 end

 private

 def generate_qiniu_upload_token
 put_policy = Qiniu::Auth::PutPolicy.new('konata')
 put_policy.return_body = {
 fname: '$(fname)',
 hash: '$(etag)',
 title: '$(x:title)'
 }.to_json
 put_policy.return_url = create_posts_url
 Qiniu::Auth.generate_uptoken(put_policy)
 end
config/routes.rbを編集して、create actionをgetメソッドを使ってもアクセスできるように定義します。

 resources :posts do
 collection do
 get 'create', as: :create
 end
 end
ライルスセーバーを再起動し、アクセスします。http://localhost:3000/posts/new今はもう新しいポストを発表する時に写真を七牛雲にアップロードできます。
ヒント:
ファイルはコナーという公開スペースにアップロードされます。
コードにkeyを指定していません。デフォルトでは、ファイルの内容によって計算されたhash値をkeyとして使用します。このようなやり方は、同じ内容のファイルが複数の無駄な空間を格納することを非常に簡単に回避することができる。
アップロードフォームは直接七牛クラウドストレージサーバーに提出されますので、アプリケーションのバックエンドはtitleなどの業務対象フィールドを獲得できません。七牛クラウドストレージAPIのカスタム変数カスタム応答の内容機能を使って、七牛クラウドストレージを通してAPIをアップロードし、これらのフィールドを獲得します。
ユーザがアップロードした写真を展示します。
app/helpers/appication_を修正します。helper.rb、qiniuを追加します。イメージ.イメージurlは写真URLを生成しやすいです。簡単に保つために、私達は直接にハードコード化したスペースのドメイン名:

def qiniu_image_url(post, format = :raw)
 url = "http://7xokus.com2.z0.glb.qiniucdn.com/#{post.qiniu_hash}"

 case format
 when :square
 url << '?imageView2/1/w/300/h/300/q/90'
 when :preview
 url << '?imageView2/2/w/1000/h/1000/q/90'
 when :raw
 url << "?attname=#{post.filename}"
 else
 url
 end
 end
app/views/posts/index.html.erbとap/views/posts/show.html.erbを修正して、先ほど作成したURL helper展示画像を呼び出します。

<tr>
 <td><%= post.title %></td>
 <td><%= link_to image_tag(qiniu_image_url(post, :square), size: '300'), post %></td>
 <td><%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %></td>
 </tr>

<p>
 <%= link_to image_tag(qiniu_image_url(@post, :preview)), qiniu_image_url(@post), class: 'image' %>
</p>

<%= link_to 'Back', posts_path %>
config/routes.rbを修正して、ウェブサイトのルートディレクトリをpostsリストページに設定します。
root'posts〹index'
アクセスhttp://localhost:3000今は先ほどアップロードした写真を見ることができます。
ヒント:
各空間内のリソースは、この空間のデフォルトまたはカスタムドメインによって、ファイルkey構造のHTTP URLを加えてアクセスすることができます。
URLの後に特定のクエリーパラメータを追加し、強力なデータ処理(Fop) APIを7牛雲に呼び出して保存し、カスタマイズされたフォーマットのサムネイルをリアルタイムに生成することができる。
照会パラメータによりURLダウンロード時に使用するファイル名を指定できます。
簡単なUI美化
app/views/posts/index.html.erbを修正して、元のテーブルレイアウトをflexboxレイアウトに変えます。

<div class="posts">
 <% @posts.each do |post| %>
 <p>
 <%= link_to image_tag(qiniu_image_url(post, :square), size: '300'), post, class: 'image' %>
 <br>
 <%= post.title %>
 <br>
 <%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %>
 </p>
 <% end %>
</div>
app/asets/styless/appication.cssを修正し、対応するCSSを追加します。

body {
 padding: 20px;
}

a.image:hover {
 background-color: transparent;
}

div.posts {
 display: flex;
 flex-flow: row wrap;
 justify-content: space-between;
}
アクセスhttp://localhost:3000画像リストは通常のアルバムのように見えます。
ユーザーアカウント機能の追加
私たちのアプリにはもう二つの明確な問題があります。記録されていない写真は誰が共有していますか?誰でもpostを削除できます。これは社交的応用にとって明らかに受け入れられない問題です。これは一つのソーシャルアプリケーションにとっては明らかに受け入れられないので、次にRailsコミュニティで流行しているDeviseコンポーネントを使って直接にユーザー登録、ログイン、検証サブシステムを獲得し、写真発表者情報記録などの機能を実現します。
Gemfileを修正し、Deviseに対する依存度を追加します。

gem 'devise'
以下のコマンドを実行してDeviseをインストールし、User modelを生成し、私たちが必要とするdata migrationを作成します。

bundle
rails generate devise:install
rails generate devise user
rails generate migration add_author_to_posts creator:belongs_to
rake db:migrate
app/controllers/posts_を修正する。controller.rbは、閲覧以外の操作に対して登録を要求し、postを発表する時に発表者の身分を記録する。

 before_action :authenticate_user!, except: [:index, :show]

 def create
 # ...
 @post = Post.new(
 title: upload_ret['title'],
 filename: upload_ret['fname'],
 qiniu_hash: upload_ret['hash'],
 creator: current_user
 )
 # ...
 end
app/models/post.rbを修正し、User modelとの関連付けを追加します。

belongs_to :creator, class_name: 'User'
app/views/layouts/appliation.html.erbを修正して、登録状態情報とログアウトリンクを追加します。

 <header>
 <% if user_signed_in? %>
 <p>
 Hello <%= current_user.email %>
 <%= link_to 'Logout', destroy_user_session_path, method: :delete %>
 </p>
 <% end %>
 </header>
app/views/posts/index.httml.erbを修正して、制限はpost発表者だけがこのpostを削除できます。

<% if user_signed_in? and post.creator == current_user %>
 <br>
 <%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %>
 <% end %>
LIls serverを再開した後、http://localhost:3000にアクセスして、ユーザーはログインしてから写真を発表する必要があります。
ポイント讃美機能を実現する
最後に、社交的なアプリケーションとして、称賛の機能を持っていない場合、どのように素晴らしい悪魔たちを満足させることができますか?私たちはlike scaffoldを追加して、ポイント評価とポイント評価情報を処理します。
以下のコマンドを実行してscaffoldを生成し、Like modelはjoin modelとしてPostとUserに属します。

rails generate scaffold like post:belongs_to user:belongs_to
rake db:migrate
app/models/post.rbを修正し、PostとLike modelの「所有/ネスト」関係を確立する。

has_many :likes
app/models/like.rbを修正して、一つのポイントを制限して狂魔を賛美するのは一つのpostに一回だけいいです。

validates_uniqueness_of :user, scope: :post
config/routes.rbを修正して、likesをpostsのネスティングリソースに設定します。

resources :posts do
# ...
resources :likes
end
app/views/posts/index.html.erbを修正し、ポイント情報表示とAJAXポイントリンクを追加します。

<%= post.title %>
 <br>
 <%= content_tag(:span, "#{post.likes.count} likes", id: "post_#{post.id}_likes") %>

 <% if user_signed_in? %>
 <br>
 <%= link_to 'Like', post_likes_path(post), method: :post, remote: true %>

 <% if post.creator == current_user %>
 <%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %>
 <% end %>
 <% end %>
アプリ/controllers/likes_を修正します。controller.rbは、本当にlikes資源をpostsの入れ子資源として実現し、賛辞を求める時に狂魔のアイデンティティを記録する:

before_action :set_post

 def create
 @like = @post.likes.new(user: current_user)

 respond_to do |format|
 if @like.save
 format.js { }
 else
 format.js { }
 end
 end
 end

 private

 def set_post
 @post = Post.find(params[:post_id])
 end
app/views/likes/create.js.erbを作成し、Server-generated JavaScriptを使ってポイント情報を更新します。

$("#<%= "post_#{@post.id}_likes" %>").text("<%= "#{@post.likes.count} likes" %>")
ライルスセーバーを再起動したら、訪問します。http://localhost:3000楽しくほめましょう。
結び目
これは簡単な原型ですが、七牛雲を使って写真の保存の後端として使っていますので、私達の社交応用製品は最初の原型段階で大規模なユーザーに高速で信頼できるサービスを提供できる潜在能力を持っています。
先ほど学んだ内容を簡単に振り返ってみましょう。Railsのコード生成機能を使用して、CRUD構造のscaffoldに基づいて業務対象のメンテナンスを実現し、業務操作も非常に効率的である。七つの牛雲を使って保存すれば、業務システムの中のファイル記憶を簡単に処理できます。画像やビデオなどのマルチメディアファイルのクラウド処理能力を得られます。このビデオが皆さんにこの二つの優れた開発ツールを知るように助けてくれることを望んでいます。それらの効率的で強力で、使いやすいです。
参考資料
Ruby on Railsガイド
七牛開発センター
サンプルコード
https://github.com/rainux/konata-sample
サンプルコードを直接試用するよりも、教程に従って自分でコードを作成し、自らコードを作成して理解と記憶を深めることができます。