この記事はブロックされています。続きを読みたい方はログインをして下さい。会員ではない方は新規会員登録をして下さい。


Google Chrome Extention講座 第十二回「ウェブスクラップブックを完成させる3」

今回でウェブスクラップブックは最後です。
ウェブスクラップブックの保存はローカルストレージに適当に保存していたので、このデータを構造化して後で加工できるようにします。

今回手を加えるのは「script.js」以外の「js」ファイル全てです。
まずは「background.js」からです。

//グローバル変数として宣言
$scrap_text	= "";
$scrap_url	= "";

$(function(){


//メッセージを受信する
chrome.runtime.onMessage.addListener( function( $O_req , sender , sendResponse )
{
	//スクラップするなら
	if( $O_req.cmd == "scrap" )
	{
		var $text		= $O_req.text;
		var $site_name	= $O_req.site_name;
		var $url		= $O_req.url;
		var $domain		= $O_req.domain;

		//コンテンツスクリプトに応答を返す
		sendResponse(
		{
			cmd		: "test_ok",
		});

		//<base href="...">を付加する
		$text = '<base href="' + $domain + '">' + $text;

		//整形する
		$text = $text + "<br><div class='site-info'>" + "サイト名 " + $site_name + " : <a href='" + $url + "' target='_blank'>" + $url + "</a><hr></div>\n";

		//ポップアップに受け渡し用のグローバル変数に代入
		$scrap_text	= $text;
		$scrap_url	= $url;

		console.log( $url );

	}

});

});

「background.js」では「popup.jp」に受け渡す変数を少し変えています。
前回は「$scrap_text」にどんどんデータを足していきましたが、保存する際オブジェクト側でデータを構造化するので、今回は足さずに単独で受け渡しをします。

次に「popup.jp」です。

$(function(){

	//localStorageのキー
	var $key		= "webscrapbook";

	//保存期間をグローバルで設定
	$time_limit		= 60*60*24*30;

	//初期化
	var $scrap_text	= "";
	var $scrap_url	= "";

	//バックグラウンドの$scrap_text 変数にアクセスする
	$scrap_text = chrome.extension.getBackgroundPage().$scrap_text;

	//バックグラウンドの$url 変数にアクセスする
	$scrap_url = chrome.extension.getBackgroundPage().$scrap_url;

	//バックグラウンドの変数を初期化しておく
	chrome.extension.getBackgroundPage().$scrap_text = "";
	chrome.extension.getBackgroundPage().$scrap_url = "";

	//スクラップする内容がなければ
	if(! $scrap_text )
	{
		//オプションを読み込む
		LOAD_OPTION( $key );
	}
	else
	{
		//オプションに保存する
		SAVE_OPTION( $key , $scrap_url , $scrap_text );
	}

//オプションを読み込む/////////////////////////////////////////////////////////
function LOAD_OPTION( $key )
{

	//ローカルストレージからキーを元に保存データを取得
	var $str = localStorage.getItem( $key );

	//JSON形式をデコードする
	var $obj = JSON.parse( $str );

	//オブジェクトが空でなければデータを取得する
	if( $obj != null)
	{
		var $scrap_content = "";

		//オブジェクトを処理する
		$.each( $obj , function( index , elem )
		{
			$scrap_content = elem.content + $scrap_content;
		});

		//データがなければ
		if( $scrap_content == "undefined" )
		{
			$scrap_content = "データなし";
		}

		//ポップアップのデータを更新
		$( '#scrapbook' ).html( $scrap_content );
	}

}
//オプションに保存する/////////////////////////////////////////////////////////
function SAVE_OPTION( $key , $url , $text )
{
	//現在のミリ秒
	var $now_time = ( new Date ).getTime();


	//ローカルストレージからキーを元に保存データを取得
	var $str = localStorage.getItem( $key );

	//JSON形式をデコードする
	var $obj = JSON.parse( $str );

	//オブジェクトが空でなければデータを取得する
	if( $obj != null )
	{

		//保存するオブジェクトをセットする
		$obj[ $now_time ] = { url : $url ,  content : $text };

		var $scrap_content = "";

		//オブジェクトを処理する
		$.each( $obj , function( time , elem )
		{
			//保存期間を超えたら
			if( ( $now_time - time ) >= $time_limit )
			{
				//削除する
				delete $obj[ index ];

				//スキップする
				return;
			}

			$scrap_content = elem.content + $scrap_content;
		});

		//ポップアップのデータを更新
		$( '#scrapbook' ).html( $scrap_content );

	}
	//オブジェクトがなければ
	else
	{
		//空のオブジェクトを作成する
		var $obj = new Object();
	}

	//JSON形式にエンコードする
	var $str = JSON.stringify( $obj );

	//ローカルストレージに保存する
	localStorage.setItem( $key , $str );

}
});

「popup.jp」の中身は保存するデータ構造を変えたのでかなり変わっています。
「$obj」というオブジェクト変数をローカルストレージに保存する流れは一緒ですが、データ構造は以下のように変わっています。

$obj[ 時間 ]
			[ URL ]
			[ 内容 ]

時間を親として、子データには「URL」と「内容」という構成になっています。
時間を親とすると「$.each」でループする際に時間軸ごとに処理されるというメリットがあります。
そして、今回は保存する期限を設けて、古くなったデータは削除するようにしています。

関連記事