前回までのプログラミング学習コラムに続き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化を実装しようと思います