FuelPHP のソースコードを閲覧できるサイト fuel.php-web.net にメモ機能を追加しました。

今までは、単に閲覧するだけでしたが、メモ機能を追加することで、自分が気になった点を書き込んで保存することができます。また何回閲覧したのか、前回の閲覧は何月何日か、という情報も記録するようにしています。

実装は、HTML5 ローカルストレージを採用しています。なので FuelPHP の機能とは直接は関係しません。また HTML5 対応ブラウザで、ローカルストレージを有効にして、アクセスしてください。https://github.com/ounziw/fuel.php-web.net/ の fuel/app/views/methodlist/source.phptal から抜粋しています。

		<p>
		このページを <span id="number">1</span> 回閲覧しました。
		前回の閲覧: <span id="lastview">0</span> 
		</p>
		<textarea cols="50" class="span9" rows="4" id="memotext" placeholder="You can enter a memo here."></textarea>
<script type="text/javascript">
	jQuery(document).ready(function(){
		var val = 1;
		var data = localStorage.getItem("<tal:block tal:content="classname">num</tal:block>Val");
		if (data !== null) {
			val += parseInt(data);
		}
		localStorage.setItem("<tal:block tal:content="classname">num</tal:block>Val",val);
		$('#number').text(val);

		var dateval = 'first time';
		var tmpdata = localStorage.getItem("<tal:block tal:content="classname">num</tal:block>Date");
		if (tmpdata !== null) {
			dateval = tmpdata;
		}
		$('#lastview').text(dateval);
		nowdate = new Date();
		datein = nowdate.getFullYear()  + "年" + (nowdate.getMonth() + 1) + "月" + nowdate.getDate() + "日";
		localStorage.setItem("<tal:block tal:content="classname">num</tal:block>Date",datein);
		$(document).ready(function(){
			$('#memotext').val(localStorage.getItem('<tal:block tal:content="classname">class</tal:block>Text'));
		});
		$('#memotext').keyup(function(){
				localStorage.setItem('<tal:block tal:content="classname">class</tal:block>Text',jQuery('#memotext').val());
		});
	});
</script>

jQuery のコードは、本来は別ファイルにするのが好ましいのでしょうけど、変数 classname を jQuery ファイルに渡すのが大変そうなので、view に直接記述する方式にしています。