• ログインログイン
  • 新規登録新規登録

MENU

文系の私がエンジニアになっていくお話(Ruby on Rails編 第6回)

連載文系の私がエンジニアになっていくお話(Ruby on Rails編)

文系出身学生が、Webサービスやアプリ開発に取り組み、エンジニアになるべくどのように学習を進めていったのかの記録を紹介するコンテンツです。Ruby on RailsでのWebサービス開発の学習手順などを解説しています。

前回までのプログラミング学習コラムに続き6回目の勉強内容です。

文系エンジニアコラムの連載をさせていただいている小林寛和(ひろかず)です。Ruby on Railsのコラムの第6回目となります。今回は第4回の予告通り、いいねボタンの実装を掲載していきます。

いいねボタンの実装

今までのいいねボタンの大きな欠点

第4回で作成したいいねボタンですが、大きな欠点があります。それは、ユーザーが何度でも良いねできてしまうというものです。今回はそれを回避する為に私が考えた方法と、その実装を行なっていこうと思います。

HTML5を使った解決法

本来ならばアクション起動後にIPアドレスをデータベース上に保存して、同じIPアドレスからアクセスがあったらいいねボタンを表示しないと言った工程で行うと思うのですが、若干ややこしいですし、今回は別の方法で実装していこうと思います。

今回実装していく方法は、HTML5のWeb Storageを使う方法になります。まずはWebストレージとはなにかをHTMLクイックリファレンスさんで見てみましょう。どうやら容量が大きく、簡単にJavaScriptから扱うことが出来るブラウザキャッシュのようなものだということがわかります。

この中にあるlocalStorageを使って実装を行いましょう。

ロジックを考える

ロジックはとても簡単で、いいねボタンが押されたらそのボタンが押されたという情報をlocalStorage上に保存し、毎回ページを読み込む度にボタンが押されたかどうかをチェックする動作を組み込めばいいのです。

より具体的に記述していくと、

  1. ボタンからJavaScriptが起動できる様にします。
  2. ページが読み込まれる度に、localStorage内にそのIDと同じKEYが存在するかをチェックし、存在したらボタンを表示せず、存在しなければボタンを表示することが出来るようにします。
  3. また、ボタンが押された際のonclick要素にsetValue(id)という関数を起動させるようにし、そのボタンのIDをKEYとするデータがlocalStorage上に保存されるように設定します。

ボタンの実装

View側でまず行うことは、ボタンからJavaScriptを起動できるようにすることです。その為にはボタンにidをつけて、JavaScriptから読み込み安く出来るようにします。

そして、ボタンがクリックされた際に後から実装するsetValueメソッドを、そのボタンの存在するページのIDを引数にして起動できるようにします。

 "blog", :action => "like", :id => @blog.id } , { :id => "like_button", :onclick => "setValue(" + @blog.id.to_s + ");", :method => "post" } %>

onclickの要素に注目して下さい。普通にJavaScriptを書くのとは少し違った書き方になっています。というのも、ボタンが属するページ毎に毎回ページIDをが変わるので、当然JavaScript側でもIDをその都度変えなければなりません。

そこで、メソッドの引数に、Rails側のブログオブジェクトのidをString型に変換して渡しているのです。逆に言えば、特に難しい記述をすることもなく、String型にして文法に則って書けば大体の事は出来てしまうのです。

JavaScriptの記述

次に、ページが読み込まれた際に、ボタンが押されたらボタンを非表示にするという動作をJavaScriptで記述していきます。まずはローカルストレージをJavaScriptで扱えるように宣言します。と言っても1行var storage = localStorage;と書くだけで済んでしまいます。

次に消す対象となるボタンオブジェクトをgetElementByIdで読み込みます。後はストレージ内でこのブログIDと一致するValueが存在したらボタンをremoveする動作を書いて完了です。

  var storage = localStorage;
  var like_button = document.getElementById('like_button');

  if (storage.getItem() == "pushed") {
    like_button.remove();
  }

特に解説することもないほど簡単なコードですが、JavaScript内にRailsのコードを混ぜている点に注意しましょう。if文の条件式の部分です。

HTMLと同じようにバーセント記号を使ってエスケープし、そこにRailsとしてブログのIDを読み込み、String型に変更しています。こうすることでJavaScript内で簡単にRailsのオブジェクトを扱うことも出来てしまうのです。

まとめ

今回はいいねボタンの改善をJavaScriptとHTML5のWeb Storageを使って行なって行きました。ボタンにRailsの書き方でonclickを実装し、Railsのオブジェクトを引数として渡すことに成功しました。

次回予告

次回はボタンが押された際に呼ばれるsetValueメソッドの実装を行い、いいねボタンを完成させてしまおうと思います。

オススメ記事一覧

もっと見る
完全無料!

1で登録完了!

エンジニアの仕事・年収や選考ノウハウ記事が読めるほか、
会員にはプログラミング講習やES・面接対策などリアルな無料サポートも充実。
ここだけの求人情報も多数。

今すぐ新規会員登録
Page Top