AngularJS TIPS
$cookiesサービスを利用する際の注意点とは？（$cookies）
AngularJSのクッキー機能は1.3から1.4で大きく変更された。具体的に何が変わったかを解説。また、アプリ全体で共通のクッキーオプションを設定する方法も説明する。
別稿「TIPS：クッキーを読み書きするには？」で紹介したように、AngularJSでは$cookiesサービス（ngCookiesモジュール）を利用することで、クッキーをシンプルなコードで操作できます。
もっとも、ngCookiesモジュールは、AngularJS 1.3から1.4でさまざまな変更が加えられたサービスでもあります。そのため、AngularJS 1.3以前の環境で書かれたコードの一部は動作しない可能性がありますので、注意してください。
本稿では、AngularJS 1.4で加えられた変更点に着目しながら、ngCookiesモジュールの機能についてさらに詳しく見ていきます。
$cookiesStoreサービスは利用しない
まず、AngularJS 1.3以前では、クッキーを読み書きするサービスとして、$cookiesと並んで、$cookieStoreサービスを利用できました。以下は、$cookieStoreサービスを利用した例です。
|
$cookieStore.put('name', 'value'); // 設定
var value = $cookieStore.get('name');
$cookieStore.remove('name');
|
しかし、AngularJS 1.4以降では、$cookieStoreサービスは非推奨の扱いとなりました。$cookiesサービスを利用するようにしてください。
$cookiesサービスでのアクセス方法も変化
AngularJS 1.3の$cookiesサービスでは、プロパティ構文でクッキーにアクセスするのが基本でした。例えば以下のようにです。
|
$cookies.name = 'value';
console.log($cookies.name);
|
しかし、AngularJS 1.4ではこのようなプロパティ形式の構文は利用できません。別稿でも触れたように、put／getメソッドを利用してください。
また、AngularJS 1.4では、オブジェクトを読み書きするためにputObject／getObjectメソッドを利用できるようになりました。構文そのものは、put／getメソッドと同じなので、早速、例を見てみましょう。
|
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="MyController">
<div>{{book}}</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-cookies.min.js"></script>
<script>
angular.module('myApp', [ 'ngCookies' ])
.controller('MyController', ['$scope', '$cookies', function($scope, $cookies) {
var book = {
title: 'AngularJSアプリケーションプログラミング',
price: 3700,
published: new Date(2015, 7, 19),
publish: '技術評論社'
};
// オブジェクトbookをクッキーに登録
$cookies.putObject('book', book);
// クッキーbookの内容を取得
$scope.book = $cookies.getObject('book').title;
}]);
</script>
</body>
</html>
|
putObject／getObjectメソッドを利用することで、オブジェクト／JSONデータの相互変換を自動的に実行してくれますので、アプリ側では変換を意識する必要がなくなります*1。
- *1
put／getメソッドでオブジェクトを受け渡しした場合、オブジェクトは変換されず、[object Object] のような意味のない文字列になってしまいますので、注意してください。
クッキーのオプションを設定する
$cookiesサービスのdomain／path／expires／secureオプションも、実はAngularJS 1.4で導入されたものです。具体的な例は別稿を参照いただくとして、ここではこれらクッキーオプションをアプリ全体で設定する方法について解説します。
一般的に、オプションの設定ポリシーはアプリ共通で決まるものです。このような値を個々の呼び出しで毎回明記するのは保守性といった意味でも望ましくありません。まずはアプリ全体でデフォルト値を設定しておき、異なる場合にだけ個別の$cookies呼び出しで設定するのが望ましいでしょう。
以下は、別稿のサンプルを、アプリ共通でクッキーオプションを設定してみます。
|
angular.module('myApp', [ 'ngCookies' ])
.config(['$cookiesProvider', function($cookiesProvider) {
// 1デフォルトの有効期限を3ヵ月後に設定
var expire = new Date();
expire.setMonth(expire.getMonth() + 3);
$cookiesProvider.defaults.expires = expire;
}])
.controller('MyController',
['$scope', '$cookies', function($scope, $cookies) {
$scope.name = $cookies.get('name');
$scope.record = true;
$scope.onclick = function() {
if($scope.record) {
// 2オプションの設定を省略
$cookies.put('name', $scope.name);
} else {
$cookies.remove('name');
}
};
}]);
|
クッキーオプションをアプリ全体で設定するには、$cookiesProviderプロバイダーのdefaultsプロパティを利用します（1）。defaultsプロパティを介して、そのサブプロパティであるexpires／path／domain／secureにアクセスできます。
なお、オプションそのものはサービスが初期化される前に設定されていなければならないので、$cookiesProviderプロバイダーもconfigメソッドの中で呼び出さなければなりません（configメソッドは、サービスのインスタンス化に先立って実行されるメソッドです）。
アプリ共通でオプションを設定していますので、2の$cookies.putメソッドではオプションの設定を省略している点にも注目です。
API：$cookies カテゴリ：ngCookies > service（サービス）
API：$cookiesProvider カテゴリ：ngCookies > provider（プロバイダー）
※以下では、本稿の前後を合わせて5回分（第39回～第43回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
40. クッキーを読み書きするには？（$cookies）
AngularJSが提供する機能を利用してクッキーを読み／書き／削除する方法を解説。また、登録済みの全てのクッキー情報をまとめて取得する方法も説明する。
41. 【現在、表示中】≫ $cookiesサービスを利用する際の注意点とは？（$cookies）
AngularJSのクッキー機能は1.3から1.4で大きく変更された。具体的に何が変わったかを解説。また、アプリ全体で共通のクッキーオプションを設定する方法も説明する。
42. アプリ共通の例外処理を実装するには？（$exceptionHandler）
アプリ内でキャッチされなかった例外を最終的に処理するAngularJSの$exceptionHandlerサービス。その挙動を上書きして、独自の処理を実施する方法を紹介する。
43. AngularJSで文書ツリーを操作するには？（element）
AngularJSでは非推奨だが、特殊な事情でHTML DOMツリーを直接操作したい場合には、angular.elementメソッドを使用する。その基本的な使い方を説明する。
