レベル付きToDoListのようなもの


<p> JavaScript、Jsonを利用したレベル付きToDoListのサンプルです<br>
今回作成したソースはpage6.html, sample6.js, style3.cssです.<br>
・ソース修正しました.(レベルリセットボタンを追加) 2019.04.17<br>
・ソース修正(タスク登録時の説明欄に[URL]～[/URL]タグが使用できるよう修正、参考サイト追加) 2019.04.17<br>
</p>

<p>サンプルgithubURL: 
<a href="https://github.com/NanjoMiyako/ToDoListWithLevels">
https://github.com/NanjoMiyako/ToDoListWithLevels
</a>
</p>

<p>内容</p>
 <ol>
   <li>参考サイト</li>
   <li>出力プレビュー・使い方など</li>
   <li>テストケース</li>
 </ol>
<hr>
<p>1.参考サイト</p>
<p>以下のサイトを参考に作成しました</p>
<a href="https://gihyo.jp/dev/serial/01/crossbrowser-javascript/0021?page=1">
第21回　JavaScriptによるUIの実装：タブメニュー編：これでできる！ クロスブラウザJavaScript入門｜gihyo.jp … 技術評論社
</a>
<br>
<a href="http://oscdis.hatenablog.com/entry/2014/03/19/082015">
JavaScriptのJSONでDate型を扱う - 自分探せ
</a>
<br>
<a href="http://js.studio-kingdom.com/javascript/date/set_full_year">
.setFullYear() | JavaScript 日本語リファレンス | js STUDIO
</a>
<br>
<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/setMonth">
Date.prototype.setMonth() - JavaScript | MDN
</a>
<br>
<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date">
Date - JavaScript | MDN
</a>
<br>
<a href="https://www.sejuku.net/blog/23115">
【JavaScript入門】日付の比較とチェックをする方法 | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト
</a>
<br>
<a href="https://hacknote.jp/archives/10116/">
JavaScript の Event を引数付きの関数に受け渡す | ハックノート
</a>
<br>
<a href="https://qiita.com/Yuta_Fujiwara/items/6a648ba3693739b3ada5">
クライアント側でセッションの情報を保持するSessionStorageの使い方 - Qiita
</a>
<br>
<a href="http://d.hatena.ne.jp/DECKS/20100812/1281539302">
HTML5のsessionStorage、文字列に型変換されるから注意。 - DECKS開発につき。
</a>
<br>
<a href="https://ptsv.jp/2016/05/11/microsoft-edge-%E3%81%8C%E3%81%BE%E3%81%A8%E3%82%82%E3%81%AB%E8%A8%AD%E5%AE%9A%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E4%BB%B6/">
Microsoft Edge がまともに設定できない件 ? Life is Real.
</a>
<br>
<a href="http://cya.sakura.ne.jp/js/escape.htm">
JavaScript まとめ - エンコード/デコード操作
</a>
<br>
<a href="https://www.yunabe.jp/docs/cookie_and_security.html#javascript-%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6-cookie-%E3%82%92%E4%BF%9D%E5%AD%98%E5%8F%82%E7%85%A7%E3%81%99%E3%82%8B">
Cookie の仕様とセキュリティ
</a>
<br>
<a href="https://pgmemo.tokyo/data/archives/512.html">
DOM要素（＜div＞タグ）をJavaScriptで削除する｜プログラムメモ
</a>
<br>
<a href="https://teratail.com/questions/101774">
JavaScript - ローカル環境でのCookieについて(javascript)｜teratail
</a>
<br>
<a href="https://qiita.com/Ohtak/items/b7fb05c4e3dee13c0d1f">
jsでダウンロードを実装した話 - Qiita
</a>
<br>
<a href="https://kuroeveryday.blogspot.com/2015/07/javascript-upload-download.html">
【JavaScript】ファイルのアップロード・ダウンロードを実装する | Black Everyday Company
</a>
<br>
<a href="https://mimirswell.ggnet.co.jp/blog-230">
【JavaScript】ページ移動・更新を検知する | ミーミルの泥泉
</a>
<br>
<a href="https://liginc.co.jp/programmer/archives/4">
JavaScriptでTABLEを作る時にTHを入れたい | 東京上野のWeb制作会社LIG
</a>
<br>
<a href="https://teratail.com/questions/49894">
JavaScript - 動的に生成したbuttonにonClickを追加したい｜teratail
</a>
<br>
<a href="https://www.pazru.net/js/date/1.html">
今日の日付と現在時刻－JavaScript入門
</a>
<br>
<a href="http://www.htmq.com/js/link_hash.shtml">
document.link.hash－JavaScriptリファレンス
</a>
<br>
<a href="https://www.sejuku.net/blog/25488">
【JavaScript入門】sliceで文字列や配列(Array)を切り抜く方法まとめ | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト
</a>
<br>
<a href="https://uxmilk.jp/46961">
JavaScriptで値が数値かどうかチェックする：isNaN() | UX MILK
</a>
<br>
<a href="https://lealog.hateblo.jp/entry/2013/02/28/005010">
JavaScriptにおける数値⇔文字列の型変換あれこれ - console.lealog();
</a>
<br>
<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">
RegExp.prototype.exec() - JavaScript | MDN
</a>
<br>
<a href="http://www-creators.com/archives/1804#i-4">
正規表現：最短一致でマッチさせる表現 | WWWクリエイターズ
</a>
<br>
<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp">
RegExp - JavaScript | MDN
</a>
<br>
<a href="https://qiita.com/h-koeda/items/8149c94cd56e51e9dd63">
正規表現で括弧内（キャプチャ部分）を抽出する - Qiita
</a>
<br>
<hr>
<p>2.出力プレビュー・使い方など</p>
出力プレビュー1
<br>
<img src="https://shizuoka0miyako.web.fc2.com/image-10-07/image-page6-1.png"><br>
出力プレビュー2
<br>
<img src="https://shizuoka0miyako.web.fc2.com/image-10-07/image-page-6-1-2.png"><br>
出力プレビュー3
<br>
<img src="https://shizuoka0miyako.web.fc2.com/image-10-07/image-page-6-1-3.png">
<hr>
使い方
<p>
インポート・エクスポートタブから各タスク・レベルデータの保存、タスクデータ・レベルデータのインポートが行えます。<br>
タスク一覧タブからタスクの検索・ステータス(完了/未完了)の更新・タスクの編集・削除が行えます<br>
タスク登録タブからタスクの登録が行えます<br>
タスク登録時の説明欄の部分にURL文字列を[URL]～[/URL]で囲んで入力することで説明文の内部にリンクを張ることが可能です<br>
レベル一覧タブからカテゴリ別に各タスクのExpからどの程度タスクをこなせているかを表示します<br>
レベルアップスピード管理タブから各カテゴリ別のレベルアップ基準を設定できます<br>
カテゴリ追加タブからカテゴリの登録が行えます<br>
カテゴリ削除タブからカテゴリの削除が行えます<br>
</p>
<hr>

<p>3.テストケース </p>
今回はタスクの更新時のテストパターン用に以下のファイルを作成しました<br>
<a href="https://docs.google.com/spreadsheets/d/1aqYEh5GCjmAu5SL6cCTlLqbkFq50jNoF--6xijwt1iA/edit?usp=sharing">
テストに使用したパターン
</a>