× 無料のユーザー登録をすると学習状況を管理することができるようになります

HTML5で作るシンプルメモ帳 (全8回)

HTML5のlocalStorageを使ってシンプルなメモ帳を作ってみます。自動保存機能などもつけてみます。

#01 メモ帳の画面を作る
2012年1月21日
このレッスンを学ぶにはHTML、jQueryの知識が必要です。詳細は以下からどうぞ。

・HTMLの基礎
http://dotinstall.com/lessons/basic_html
・jQueryの基礎
http://dotinstall.com/lessons/basic_jquery
#02 localStorageの説明
2012年1月21日
なお、このlocalStorageの機能は最新のHTML5をサポートしているブラウザのみで使うことができます。古いブラウザーをお使いの場合、動かない場合もあるのでご了承ください。
#03 保存ボタンを実装する
2012年1月26日
localStorageで保存したデータの内容は、ブラウザの開発用ツールで確認することができます。
Chromeであれば、右クリック→「要素の検証」で開くデベロッパーツールで「Resources」をクリックし、「Local Storage」を選択してください。
デベロッパーツールで確認できる内容はリアルタイムには更新されませんので、随時デベロッパーツール下にあるリロードボタンをクリックして確認してください。
2013年9月9日
Firefox では firebug という拡張機能でもコンソールが使えます。
#05 消去ボタンを実装する
2012年3月23日
データを保存するときに、
"event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future."
といった警告が出るようです。こちらはjQuery 1.6系を使っているためなので、警告表示を消したい時は、5行目を以下のように変更してください。
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
#06 一定時間ごとに自動保存する
2012年1月21日
即時関数については以下のレッスンも参考にしてみてください。
http://dotinstall.com/lessons/basic_javascript_tips/2118
2012年1月21日
一定時間ごとに処理を繰り返すには、setIntervalよりsetTimeoutのほうがおすすめです。詳しくは以下のレッスンをご覧ください。
http://dotinstall.com/lessons/basic_javascript_tips/2115
#08 キー入力毎に自動保存
2012年1月26日
bindを使わずに以下のように書くこともできます。
$('#memo').keyup(function() {
  // 何かの処理
});
2012年1月21日
今回使われたbind()の詳細については以下からどうぞ。スペースで区切って複数のイベントにbindすることもできますよ。
http://api.jquery.com/bind/
2013年9月9日
動作に不具合が出るわけではないですが、動画中、textareaのname属性を「40」としてしまいました...。本来は「memo」とすべきでした。ごめんなさい!ソースは以降の動画も含めてすべて修正しておきました。