FC2ブログ

HTML5 でメモ帳作成 その5

HTML5 でメモ帳作成 その5

一定時間毎ではなく、文字を入力した時点で
保存されるようにする

これは、twitter とか ブログとかで
下書きの自動保存みたいに使えるので
忙しいときに活用できそう

参考にできるのが
#08 キー入力毎に自動保存
http://dotinstall.com/lessons/memo_html5/2308

これは
jQuery を使う
keyup は文字入力したというイベント

$('#memo').bind('keyup',function(){
localStorage.setItem('memo',$('#memo').val());
}
というソースの部分が該当

これは
id="memo" のテキストエリアの内容を
keyup イベント発生
つまり文字入力するたびに
localStorage に保存するというもの

今後の課題としては
Ajax とかでもっと使いやすくできると面白いかもしれない
スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

HTML5 でメモ帳作成 その4

HTML5 でメモ帳作成 その4

自動保存はできたので、今度は保存していることを
わかりやすくするため
保存時にメッセージを表示


#07 自動保存時にメッセージを出す
http://dotinstall.com/lessons/memo_html5/2307


まずは、表示する領域を設定
今回はp 要素に id="message" としている
また、最初に非表示にしたいので
display:none というスタイルを適用
<p id="message" style="display:none;">saving ....</p>

あとは、保存した時に表示するように
java script で制御

ユーザ関数 autoSave() に追記する
$('#message').show().hide(200);
これは
id="message" のところを表示にして
その後 0.2秒たってから
隠すというもの
show() は表示
hide() は隠すという意味

200 は 0.2 秒単位という意味になる

実行すると、02秒ごとに
saving .... とずっと繰り返し表示される

テーマ : プログラミング
ジャンル : コンピュータ

HTML5 でメモ帳作成 その3

HTML5 でメモ帳作成 その3

ようやく、自動保存の開始
今回は、一定時間ごとに保存するというもの
setTimeoutを使って自動保存

http://dotinstall.com/lessons/memo_html5/2306
を参考に作成

#15 タイマー処理の違い
http://dotinstall.com/lessons/basic_javascript_tips/2115

無名関数と即時関数で出来ること
http://dotinstall.com/lessons/basic_javascript_tips/2118

も参考にしたほうがわかりやすい

これを使うと、保存するボタンをおさなくてもよくなる

このため、UIから保存ボタンを削除して
かわりにオート保存機能を実装

function autoSave(){
localStorage.setItem('memo',$('#memo').val());
setTimeout(autoSave,1000);
}

となる
$('#memo').val()

id="memo" のテキストエリアの
val() つまり、内容
ということ

なので
localStorage.setItem('memo',$('#memo').val());

id="memo" のテキストエリアの内容を
localStorage に保存するという意味になる

そして、その間隔を
setTimeout(autoSave,1000) で
1000 にしているので1秒ごと
に実行される

あと、即時関数を使ったほうが、書くときにも楽

関数を作成して
autoSave();
でもいいけど

(function autoSave(){
localStorage.setItem('memo',$('#memo').val());
setTimeout(autoSave,1000);
})();
というようにして即時関数にしたほうが書く手間が省ける

これにより、自動保存できるし
他の人がおなじURLへアクセスすればみれるので
共有掲示板のようなものも作れる

テーマ : プログラミング
ジャンル : コンピュータ

HTML5 でメモ帳作成 その2

HTML5 でメモ帳作成 その2

今回は
http://dotinstall.com/lessons/memo_html5/2304
を参考に、ページを読み込んだら
前回保存した内容を表示するというもの

これはメモ帳として最適な機能だと思う

追加された内容は
java script で
if で localStorage にデータ格納の有無を判定して
中身があるなら
getItem() で読み込んで表示するというもの

if(localStorage.getItem('memo'){
$('#memo').val(localStorage.getItem('memo'));
}

これにより。
id="memo"
となっているテキストエリアに、
前回保存した内容が読み込まれて表示される

jQuery で
val() は値を示す関数

これで、自動読み込みはできるので
内容の消去も実装

これは消去ボタンと紐付ける

$('#clear').click(function(){
$('#memo').val('');
localStorage.removeItem('memo');
});

これで、消去できる
$('#memo').val('');
で id="memo" のテキストエリアの内容を空で上書き
そして
localStorage.removeItem('memo');

localStorage の内容を削除

これで、再読込してもなにも表示されなくなる

テーマ : プログラミング
ジャンル : コンピュータ

HTML5 でメモ帳作成

http://dotinstall.com/lessons/memo_html5/2301
を参考に、メモ帳を作成

最終的には自動保存機能を実装する
これはHTML5の機能
localStorage を使う

今回は jQuery を使うので
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
で読み込んでおく

あと、テキストエリアを使うので
textarea を使う

これについては
#11 テキストの入力
http://dotinstall.com/lessons/basic_html/311
が参考になる

rows は行数
つまり高さのようなもの

cols は横の文字数
つまり幅

canvas における
htight = row
width = cols
というかんじ

<textarea id="memo" rows="10" cols="40" name="memo"></textarea>
なら
縦10行
横40文字
ということになる

localStorage は制御は
java script で行う

保存には
localStorage.setItem()

読み出しには
localStorage.setItem()

セットした内容を一括削除するには
localStorage.clear()

指定して削除するなら
localStorage.remove()

ただし、ブラウザがHTML5のWeb Storage 対応でないと使えないので注意

実際に使う時には
ボタンクリックとかで保存することがおおい

なので、
$('#save').click(function(){
localStorage.setItem('memo',$('#memo').val());
console.log(localStorage.getItem('memo'));
});

これで、実行して保存ボタンをおすと
develper tools で
console で確認すると
保存した文字が見える

developer tools の起動方法は
chrome で
Ctrl + Shift + i で起動

これができたら、ページ読み込んだらデータを表示する

テーマ : プログラミング
ジャンル : コンピュータ

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック