LoginSignup
3
1

More than 5 years have passed since last update.

@hirokishirai(Hiroki Shirai)

ドットインストールでRuby on Rails 3.2を学んだ際の詳細なメモ (34〜36)/全46

Last updated at Posted at 2014-03-16

主な内容 - Blogシステムを作る（続き）

#34 記事を削除してみよう
#35 削除処理をAjax化しよう (1)
#36 削除処理をAjax化しよう (2)

Scaffoldを使わずに、一からブログアプリケーションを作成しよう（実践的）（続き）

  • コントローラーのメソッドと、それに対応するViewを作っていきましょう（続き）
  • Scaffoldでは自動生成してくれたModel、DBの設定、Controller、URL、Controllerのメソッド、Viewを自力で作ります。（続き - destroy）

記事のタイトル一覧を表示するindex、その記事を表示するshow、記事の新規作成フォームを作成するnew、記事を作成するcreate、記事を編集するeditは完成したので次はその記事を削除するページが欲しいですね。ということでdestroyを作ります。

仕様（再確認）

  1. Post（記事を投稿、編集、削除できる機能）
  2. Comment（記事に対してコメントを投稿、削除できる機能）

作成の流れ

  1. blogプロジェクトを作成
  2. Modelを作成
  3. DB
  4. Controllerの作成
  5. URLの作成（ルーティングの設定） ←ここまで終わっています
  6. Controllerのメソッドの作成 ←今はここです
  7. メソッドに対応するViewを作成

6. 7. Controller内のMethod、それに対応するViewを作成（続き）

作成するメソッド

  • index（完了）

app/views/posts/index.html.erb

  • create（完了）

Viewは無し（フォームに入力されたデータを処理するだけのメソッドなので、Viewは必要ありません。）

  • new（完了）

app/views/posts/new.html.erb

  • show（完了）

app/views/posts/show.html.erb

  • edit（完了）

app/views/posts/edit.html.erb

  • update（完了）

Viewは無し（編集画面からの送信を処理するだけのメソッドなので、Viewは必要ありません。）

  • destroy

Viewは無し（削除リンクをindex.html.erbにつけますが、destroy専用のViewは必要ありません。）

destroy

指定したオブジェクトをデータベース、もしくは一覧から削除するdestroyを作ります。

destroyメソッドを作成

指定したPostオブジェクトを削除します。

app/controllers/posts_controller.rb
# coding: utf-8

class PostsController < ApplicationController


〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
　　　　　　　　　中略
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

    # destroyメソッド
    def destroy
        # idで指定したオブジェクトを取得
        @post = Post.find(params[:id])
        # オブジェクトの削除
        @post.destroy
        # posts（index）にリダイレクト
        redirect_to posts_path
    end

end

DeleteリンクをView（index.html.erb）にはる

Destroyメソッドに対応するVIewの作成は必要ありませんが、Destroyメソッドを簡単に実行できるように削除リンクを一覧に張りましょう。Editの横が良いですね。

app/views/posts/index.html.erb
<%# 一時通知メッセージ %>
<div id="notice"><%= notice %></div>
<%# ヘッダー %>
<h1>Posts</h1>
<%# 順序無しリスト %>
<ul>
    <%# ループ %>
    <% @posts.each do |post| %>
        <li>
            <%# 記事のタイトルにリンクを張ってリスト表示 %>
            <%= link_to post.title, post_path(post) %>
            <%# それぞれの記事の編集リンク %>
            <%= link_to 'Edit', edit_post_path(post) %>
            <%# それぞれの記事の削除リンク %>
            <%= link_to 'Delete', post, :confirm => 'Sure?', :method => :delete %>
        </li>
    <%# ループ終了 %>
    <% end %>
</ul>
<%# HOME、Newリンク %>
<%= link_to 'home', posts_path %> | <%= link_to 'New', new_post_path %>

<script>
    $(function() {
        //一定時間後に処理を行う（0.8秒後）
        setTimeout(function() {
            //noticeをゆっくりとフェードアウト
            $('#notice').fadeOut("slow");
        }, 800);
    });
</script>

動作確認

スクリーンショット 2014-03-15 16.28.16.png

「追加テスト」を消してみます。「追加テスト」のDeleteをクリックします。

スクリーンショット 2014-03-15 16.28.44.png

きちんと指定した確認メッセージが表示されました。
OKをクリックします。

スクリーンショット 2014-03-15 16.28.52.png

削除されたことが確認できました。
これでPost機能（投稿管理システム的なw）は完成です。

今では当たり前、Ajaxの実装

最低限の機能は完成しました。しかし、今のままでは削除の度にページ全体を読込み直しています。つまりクライアントが削除操作をしたら削除以外に、テンプレートからhtmlファイルを作成し、クライアントがそれをダウンロードするという流れをもう一度やることになります。これくらいのブログシステムであればそんなに問題はありませんが、システムが大きくなってくると読込むファイルなども増えていきます。これではスムーズにシステムを利用することができなくなってしまいます。必要に応じて必要な部分だけを削除したりできたら良いと思いませんか？そこでAjax（エイジャックス）です。AjaxというのはサーバとHTTPリクエストによる非同期通信し、その通信結果に応じてcss+javascriptで動的にページの一部を書き換えるという機能を持ったAPIのことです。

Rails3.2では標準でインストールされるGemのrails-jqueryではこのAjaxのイベントを色々と用意してくれています。

Delieteリンクが押されたら非同期でHTTPリクエストを送信し、処理が成功したらjQueryを使ってその項目をフェードアウトして消します。

では動作を先に書いてしまいましょう。

app/views/posts/index.html.erb
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
　　　　　　　　　　　　前略
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

<script>
    $(function() {
        //一定時間後に処理を行う（0.8秒後）
        setTimeout(function() {
            //noticeをゆっくりとフェードアウト
            $('#notice').fadeOut("slow");
        }, 800);

        //【Delieteに関する処理】
        //deleteメソッドの処理が成功したらfunction内を実行
        $('a[data-method = "delete"]').on('ajax:success', function(event, data, status, xhr) {
            //post_***のidを持った要素をゆっくりフェードアウト
            $('#post_'+data.post.id).fadeOut("slow");
        });
    });
</script>

jQueryのonメソッドを用いてdata-methodがdeleteの<a>タグの非同期処理が成功したらfunction内を実行します。ドットインストールではliveメソッドを使っていますが、これは今ではもう使えないメソッドなので、代わりにonメソッドを使っています。

たくさんとっている引数ですが、これはajaxのsuccessメソッドでの処理に使っているので、function内で使っていなくても必要です。

ちなみに、rails.jsのgithub wikiには引数のうちeventが抜けていますが、これでは動作しません。このwiki内から飛べるリンクにjquery-ujs and jquery triggerというのがあり、このサイトがただしそうです。

動作の処理は完成しました。では、その処理の対象となる要素をいじっていきます。

app/views/posts/index.html.erb
<%# 一時通知メッセージ %>
<div id="notice"><%= notice %></div>
<%# ヘッダー %>
<h1>Posts</h1>
<%# 順序無しリスト %>
<ul>
    <%# ループ %>
    <% @posts.each do |post| %>
        <li id = "post_<%= post.id %>">
            <%# 記事のタイトルにリンクを張ってリスト表示 %>
            <%= link_to post.title, post_path(post) %>
            <%# それぞれの記事の編集リンク %>
            <%= link_to 'Edit', edit_post_path(post) %>
            <%# それぞれの記事の削除リンク 非同期処理有効 %>
            <%= link_to 'Delete', post, :confirm => 'Sure?',
                                        :method => :delete, 
                                        :remote => true %>
        </li>
    <%# ループ終了 %>
    <% end %>
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
　　　　　　　　　　　　中略
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

フェードアウトさせる要素にidをつけてjavascriptからいじれるようにします。
また、Deleteリンクに非同期処理を有効にするオプション:remote => trueをつけます。ちょっと気になった（そんなリンクじゃデリートできないじゃない！）link_toの動作はコードを見ればどんな風に動いているかがわかります。postに入ったオブジェクトへのアドレスを非同期処理でHTTPメソッドのDELETEメソッドへ送っています。

app/controllers/posts_controller.rb
# coding: utf-8

class PostsController < ApplicationController

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
　　　　　　　　　　　　中略
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

    # destroyメソッド
    def destroy
        # idで指定したオブジェクトを取得
        @post = Post.find(params[:id])
        # オブジェクトの削除
        @post.destroy
        # json形式で@postの内容をpostとしてViewに渡す
        render json: { post: @post }
    end

end

jsonでpostの内容をViewに渡す
render json: { post: @post }

動作確認

では、Newで適当にデータを作ってDeleteを押してみてください。このとき、注目すべきはブラウザの更新マークです。以前のままだと、Deleteを押して確認ダイアログを押すと更新マークが更新状態になりますが、Ajaxで非同期通信を行っているため、ページの再読み込みが行われていないことがわかります。

これで本当にPost機能が完成しました！

メモ一覧

  1. ドットインストールでRuby on Rails 3.2を学んだ際の詳細なメモ (1〜2)/全46

    #01 Ruby on Railsとは何か？
    #02 必要となるツールを揃えよう

    • Ruby on Railsはこんなものですよ
    • 必要な情報はここら辺で集まりますよ
    • 必要な知識にはこんなものがありますよ
    • 開発環境はこんな感じですよ

  2. ドットインストールでRuby on Rails 3.2を学んだ際の詳細なメモ 3/全46

    #03 MVCとは何か？

    • Ruby on RailsはMVCフレームワークですよ
    • MVCはこんなものですよ

  3. ドットインストールでRuby on Rails 3.2を学んだ際の詳細なメモ (4〜8)/全46

    #04 はじめてのRailsプロジェクト
    #05 ファイル構成をみていこう
    アプリケーションを作成する基本的な流れを覚えましょう

    #06 Webサーバーを立ち上げよう
    作成したWebアプリケーションをどうささせてみましょう

    #07 scaffoldを使ってみよう (1)
    #08 scaffoldを使ってみよう (2)
    DB、Model、View、Controllerの作成、URLの設定をしてみましょう

  4. ドットインストールでRuby on Rails 3.2を学んだ際の詳細なメモ (9〜13)/全46

    #09 ブログシステムを作ろう
    #10 新しいプロジェクトを作ろう
    #11 Postモデルを作ろう
    #12 Postsコントローラーを作ろう
    #13 ルーティングの設定をしよう
    Scaffoldを使わずに、一からブログアプリケーションを作成しよう（実践的）
    プロジェクト、Model、Controllerを作成し、ルーティングの設定をしよう

  5. ドットインストールでRuby on Rails 3.2を学んだ際の詳細なメモ (14〜21)/全46

    #14 デバッグに使えるコンソールについて
    #15 コントローラーのメソッドについて
    #16 記事の一覧を表示する (1)
    #17 記事の一覧を表示する (2)
    #18 リンクを貼ってみよう
    #19 HTMLテンプレートを変更しよう
    #20 ロゴ画像を表示させてみよう
    #21 記事一覧画面をrootにしてみよう

    Scaffoldを使わずに、一からブログアプリケーションを作成しよう（実践的）（続き）
    rails consoleとか、rails dbconsoleなんかの便利なツールがありますよ
    コントローラーのメソッドと、それに対応するViewを作っていきましょう

    Scaffoldでは自動生成してくれたModel、DBの設定、Controller、URL、Controllerのメソッド、Viewを自力で作ります。（まずは１つ）

  6. ドットインストールでRuby on Rails 3.2を学んだ際の詳細なメモ (22〜23)/全46

    #22 記事の詳細を表示する (1)
    #23 記事の詳細を表示する (2)

    Scaffoldを使わずに、一からブログアプリケーションを作成しよう（実践的）（続き）

    • コントローラーのメソッドと、それに対応するViewを作っていきましょう（続き）
    • Scaffoldでは自動生成してくれたModel、DBの設定、Controller、URL、Controllerのメソッド、Viewを自力で作ります。（続き - show）

  7. ドットインストールでRuby on Rails 3.2を学んだ際の詳細なメモ (24〜30)/全46

    #24 新しい記事を追加しよう (1)
    #25 新しい記事を追加しよう (2)
    #26 新しい記事を追加しよう (3)
    #27 バリデーションを設定しよう
    #28 バリデーションエラーを表示しよう
    #29 フラッシュメッセージを表示する
    #30 メッセージをjQueryで消す

    Scaffoldを使わずに、一からブログアプリケーションを作成しよう（実践的）（続き）

    • コントローラーのメソッドと、それに対応するViewを作っていきましょう（続き）
    • Scaffoldでは自動生成してくれたModel、DBの設定、Controller、URL、Controllerのメソッド、Viewを自力で作ります。（続き - new,create）

    記事のタイトル一覧を表示するindexメソッド、その記事を表示するshowメソッドは完成したので次はその記事を表示するページが欲しいですね。ということでnewメソッド（新規作成フォーム）を作ります。また、フォームから送信されたデータを処理して新しい記事を作成するcreateメソッドも作成します。

    バリデーション（検査）の設定をやってみよう（実践的）

  8. ドットインストールでRuby on Rails 3.2を学んだ際の詳細なメモ (31〜33)/全46

    #31 記事を更新してみよう (1)
    #32 記事を更新してみよう (2)
    #33 記事を更新してみよう (3)
    Scaffoldを使わずに、一からブログアプリケーションを作成しよう（実践的）（続き）

    • コントローラーのメソッドと、それに対応するViewを作っていきましょう（続き）
    • Scaffoldでは自動生成してくれたModel、DBの設定、Controller、URL、Controllerのメソッド、Viewを自力で作ります。（続き - edit, update）

    記事のタイトル一覧を表示するindexメソッド、その記事を表示するshowメソッド、記事の新規作成フォームを作成するnewメソッド、記事を作成するcreateメソッドは完成したので次はその記事を編集するページが欲しいですね。ということでeditメソッド（記事編集フォーム）を作ります。また、フォームから送信されたデータを処理して記事を上書きするupdateメソッドも作成します。

  9. ドットインストールでRuby on Rails 3.2を学んだ際の詳細なメモ (34〜36)/全46

    #34 記事を削除してみよう
    #35 削除処理をAjax化しよう (1)
    #36 削除処理をAjax化しよう (2)
    Scaffoldを使わずに、一からブログアプリケーションを作成しよう（実践的）（続き）

    • コントローラーのメソッドと、それに対応するViewを作っていきましょう（続き）
    • Scaffoldでは自動生成してくれたModel、DBの設定、Controller、URL、Controllerのメソッド、Viewを自力で作ります。（続き - destroy）

    記事のタイトル一覧を表示するindex、その記事を表示するshow、記事の新規作成フォームを作成するnew、記事を作成するcreate、記事を編集するeditは完成したので次はその記事を削除するページが欲しいですね。ということでdestroyを作ります。

  10. ドットインストールでRuby on Rails 3.2を学んだ際の詳細なメモ (37〜46)/全46

    #37 Commentモデルを作ろう
    #38 Commentsコントローラーを作ろう
    #39 コメントを表示させよう
    #40 コメントを投稿してみよう (1)
    #41 コメントを投稿してみよう (2)
    #42 バリデーションを設定しよう
    #43 コメントを削除してみよう (1)
    #44 コメントを削除してみよう (2)
    #45 コメント件数を表示してみよう
    #46 Railsを日本語化しよう
    Scaffoldを使わずに、一からブログアプリケーションを作成しよう（実践的）（続き）

    • 新しい機能（Comment）を追加させましょう
    • Scaffoldでは自動生成してくれたModel、DBの設定、Controller、URL、Controllerのメソッド、Viewを自力で作ります。
3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
1