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

MENU

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

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

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

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

 

完全無料!

1で登録完了!

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

今すぐ新規会員登録
Page Top