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

コラムの連載をさせていただいている小林寛和（ひろかず）です。Ruby on Railsのコラムの第7回目となります。

今回は第6回の予告通り、いいねボタンを完成させましょう。

LocalStorageへの保存

LocalStorageへ保存を行うメソッドを組みましょう

前回はボタンの設置や、ページがロードされた時にボタンが押されているかを判別するコードを書きました。今回はボタンが押されたらちゃんとWebStorageのLocalStorage内にボタンが押されていることを記録するようにしましょう。

ページ内にはいいねボタンが1つしか無いので、ページのIDと押されたという情報だけ記録します。LocalStorageの記録方法はKeyとValueがセットになっていますので、今回はKeyの方でページのIDを記録し、Valueの方はなんでもいいですが、「pushed」という値を記録するようにしましょう。

具体的にコードにしてみましょう。

  	function setValue(id) {
    	storage.setItem(id, 'pushed');
		}

コードの解説

ボタン側のonclickで発火するメソッドです。発火する際にページのIDを引数として取り、その引数を元にlocalStorage内に値を記録します。コード内のstorageという変数は、先週の掲載に書いた、「var storage = localStorage;」の変数のことです。

動作確認を行う

突然ですが、皆さんブラウザは何を使っていますか？私はGoogle Chromeのベータ最新版を使っています。Macユーザーなら「Command + Option + j」を入力してみて下さい。すると開発コンソールが出てくると思います。あなたが書いたJavaScriptのコードに誤りがあればここで表示してくれます。

今回は実際に記録されているかの確認を行います。いいねボタンを押した後に、Chromeの場合はそのまま開発コンソールを開いたまま、上の方にある「Resources」のタブをクリックしてみて下さい。左の方にLocal Storageという項目があり、その子要素にドメインが並んでいると思います。自分のドメインをクリックしてみましょう。

右側にKeyとValueの並びがあります。その中にちゃんと記録されていたら大丈夫です。もし記録されていなかったら、Consoleの方を見て、エラーをチェックしてみて下さい。

RailsとJavaScriptの連携

Railsのオブジェクト情報をJavaScriptの中に入れる

今回のいいねボタンを通してRailsでJavaScriptを扱う方法を書きました。あくまで一例に過ぎませんが、DOMを扱ってHTML5のWeb Storageへも記録することが出来ました。RailsはRubyを使い、最終的にはHTMLを吐き出します。ですので、皆さんが普段JavaScriptを扱うのと同じような感じで扱うことができます。

また、テンプレート内の動的に生成される部分に関しても、Rails内のオブジェクトから必要な情報をString形式で出力することでJavaScript側で取り扱うことができました。

まとめ

前回と2回に渡り、いいねボタンをJavaScriptとHTML5のWeb Storageを使って完成させました。ページのロード時にLocalStorage内に同じページIDのKEYが無いかチェックし、あればDOMをいじります。また、いいねボタンが押されたら今回実装したメソッドを使ってLocalStorage内に値を記録します。

まだいいねボタンのAjax化（いいねボタンが押される度にリダイレクトするのではなく、Facebookのいいねボタンのように、いいねボタンだけが変化する様な実装）や、JavaScriptが完了してからアクションにコールバックする（現在はどちらが先に行われるか不明）といった実装を行わなければ完成とはいえません。

次回予告

次回はいいねボタンのAjax化を実装しようと思います