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

ドットインストール - 3分動画でマスターする初心者向けプログラミング学習サイト

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

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

#01 メモ帳の画面を作る
2018年5月6日

補足情報 あわせて見ておきたいレッスンについて

このレッスンを学ぶにはHTML、jQueryの知識が必要です。詳細は以下からどうぞ。

・HTML入門 (全15回)
https://dotinstall.com/lessons/basic_html_v4
・jQuery入門 (全20回)
https://dotinstall.com/lessons/basic_jquery_v2
#02 localStorageの説明
2012年1月21日

補足情報 localStorageの対応ブラウザについて

なお、このlocalStorageの機能は最新のHTML5をサポートしているブラウザのみで使うことができます。古いブラウザーをお使いの場合、動かない場合もあるのでご了承ください。
#03 保存ボタンを実装する
2012年1月26日

補足情報 localStorageの内容を確認するには？

localStorageで保存したデータの内容は、ブラウザの開発用ツールで確認することができます。
Chromeであれば、右クリック→「要素の検証」で開くデベロッパーツールで「Resources」をクリックし、「Local Storage」を選択してください。
デベロッパーツールで確認できる内容はリアルタイムには更新されませんので、随時デベロッパーツール下にあるリロードボタンをクリックして確認してください。
2013年9月9日

補足情報 firebugでコンソール

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の違いとは？

一定時間ごとに処理を繰り返すには、setIntervalよりsetTimeoutのほうがおすすめです。詳しくは以下のレッスンをご覧ください。
http://dotinstall.com/lessons/basic_javascript_tips/2115
#08 キー入力毎に自動保存
2012年1月26日

補足情報 bindを使わない方法

bindを使わずに以下のように書くこともできます。
$('#memo').keyup(function() {
  // 何かの処理
});
2012年1月21日

補足情報 bind()の詳細について

今回使われたbind()の詳細については以下からどうぞ。スペースで区切って複数のイベントにbindすることもできますよ。
http://api.jquery.com/bind/
2013年9月9日

補足情報 レッスン内の誤表記について

動作に不具合が出るわけではないですが、動画中、textareaのname属性を「40」としてしまいました...。本来は「memo」とすべきでした。ごめんなさい！ソースは以降の動画も含めてすべて修正しておきました。