ローカル掲示版(完成版)
前回に残課題となっていた1～3について何とか形になった。
3年ほど前にJavaScript+ACCESSで簡易ツール作ってたけど
その時よりもシンプルな作りにできました。(CSSが結構すごい)
後KintoneからJSONデータ取るときにむっちゃ複雑なパースしてたけど
オブジェクトで取って整形すれば比較的楽になることを学びました。
まだまだへっぽこですな。
ひとまずソースというか、いい加減Git使わないとなぁ
・HTML
・JS
・CSS
4の課題は今後の宿題かなぁ。
というよりJSとDBで何か作ってみるというのも
一興かもしれないですな。
そういって何年も経っているしいい加減やらないとな。
その前にRailsで休んでいる趣味の京都歩きのサイト立上げとか
考えたいなぁと思ったり。
3年ほど前にJavaScript+ACCESSで簡易ツール作ってたけど
その時よりもシンプルな作りにできました。(CSSが結構すごい)
後KintoneからJSONデータ取るときにむっちゃ複雑なパースしてたけど
オブジェクトで取って整形すれば比較的楽になることを学びました。
まだまだへっぽこですな。
ひとまずソースというか、いい加減Git使わないとなぁ
・HTML
＜!DOCTYPE html＞
＜html＞
＜head＞
＜title＞localStorageのサンプル2＜/title＞
＜script src="http://code.jquery.com/jquery-2.0.0.min.js"＞＜/script＞
＜script src="test3.js"＞＜/script＞
＜link rel="stylesheet" href="test3.css" type="text/css"＞
＜/head＞
＜body＞
＜div id="form"＞
＜input id="clearButton" type="button" value="全投稿削除"＞
＜input id="resetButton" type="button" value="編集内容クリア"＞
＜ul＞
＜li class="name"＞
＜input type="hidden" name="key" value="" ＞
＜label for = "name"＞名前＜/label＞
＜input id="formName" type="text" size="20" maxlength="20"
placeholder="氏名をここに入力してください。"＞
＜/li＞
＜li class="post"＞
＜label for = "post"＞投稿内容＜/label＞
＜textarea id="formText" cols="50" rows="2" maxlength="100"
placeholder="ここに投稿内容を入力してください。"＞＜/textarea＞
＜input id="formButton" type="button" value="投稿する"＞
＜/li＞
＜/ul＞
＜/div＞
＜div id="list"＞＜/div＞
＜/body＞
＜/html＞
・JS
$(loaded);
function loaded() {
if (window.localStorage) {
showText();
// ボタンをクリックしたときに実行するイベントを設定する
$("#formButton").click(
// コールバックとしてメソッドを引数にわたす
function() {
saveText();
showText();
});
//全投稿削除ボタン挙動
$("#clearButton").click(
function() {
var myRet = confirm("PC内の投稿情報を全削除します。よろしいですか？");
if (myRet) {
localStorage.clear();
showText();
}
});
//編集内容クリアボタン挙動
$("#resetButton").click(
function() {
clearBox();
showText();
});
$("#formName").focus();
} else {
alert("本アプリ未対応のブラウザです。対応ブラウザをご利用ください。");
}
}
// 入力された内容をローカルストレージに保存する
function saveText() {
var mode = $("#formButton").val();
var name = $("#formName");
var post = $("#formText");
var time = new Date();
var key;
var comp = "投稿する";
//投稿日時
var postdate = time.getFullYear() + "/" +
("0" + (time.getMonth() + 1)).slice(-2) + "/" +
("0" + time.getDate()).slice(-2) + " " +
("0" + time.getHours()).slice(-2) + ":" +
("0" + time.getMinutes()).slice(-2) + ":" +
("0" + time.getSeconds()).slice(-2);
if (mode === comp) {
// 時刻をキーにして入力されたテキストを保存する
key = Date.parse(time);
} else {
key = $(':hidden[name="key"]').val();
$("#formButton").val("投稿する");
}
// 入力チェックをしてからローカルストレージに保存する
if (checkText(name, name.val(), 20) && checkText(post, post.val(), 100)) {
var data = {
date: postdate,
name: name.val(),
post: post.val()
}
var val = JSON.stringify(data);
localStorage.setItem(key, val);
// テキストボックスを空にする
name.val("");
post.val("");
}
name.focus();
}
// ローカルストレージに保存した値を再描画する
function showText() {
// すでにある要素を削除する
var list = $("#list");
list.text("");
list.children().remove();
// ローカルストレージに保存された値すべてを要素に追加する
var key, value, html = [];
for (var i = localStorage.length - 1; i >= 0; i--) {
key = localStorage.key(i);
value = localStorage.getItem(key);
var json = JSON.parse(value);
//登録内容を取得しHTML生成
html.push($("＜hr /＞"));
html.push($(""));
html.push("投稿日時：");
html.push($("＜a href="https://www.blogger.com/" id="\" key=""＞").html(json.date));
html.push($("＜/a＞"));
html.push($("＜br /＞"));
html.push("投稿者名：")
html.push(escapeText(json.name));
html.push($("＜br /＞"));
html.push("投稿内容：")
html.push(escapeText(json.post));
html.push($("＜br /＞"));
html.push($("＜input button="" delbutton="" id="\" key="" name="\" type="\" value="\" /＞"));
}
list.append(html);
//編集用
$("a").click(
function() {
var id = $(this).attr("id");
setText(id);
showText();
});
//削除用
$("[id=delButton]").click(
function() {
var id = $(this).attr("name");
delText(id);
showText();
});
}
//投稿日時をクリックした際に投稿内容と名前を表示し、ボタンを「編集する」に変更する。
function setText(id) {
//テキストボックスに編集対象を表示
var key = id;
var val = localStorage.getItem(key);
var json = JSON.parse(val);
var name = $("#formName");
var post = $("#formText");
//検索結果データを表示
name.val(escapeText(json.name));
post.val(escapeText(json.post));
$(':hidden[name="key"]').val(key);
$("#formButton").val("編集する");
name.focus();
showText();
}
//投稿を削除する
function delText(id) {
var key = id;
var val = localStorage.getItem(key);
var json = JSON.parse(val);
//検索結果データを表示
var postDetail = "投稿日時：" + (json.date) + "\n" +
"投稿者 ：" + escapeText(json.name) + "\n" +
"投稿内容：" + escapeText(json.post);
var myRet = confirm("以下の投稿を削除します。よろしいですか？\n" + postDetail);
if (myRet) {
localStorage.removeItem(key)
alert("投稿を削除しました。");
} else {
clearBox();
}
var name = $("#formName");
name.focus();
showText();
}
// 文字をエスケープする
function escapeText(text) {
var TABLE_FOR_ESCAPE_HTML = {
"&": "&",
"\"": """,
"<": "<",
">": ">"
};
return text.replace(/[&"<>]/g, function(match) {
return TABLE_FOR_ESCAPE_HTML[match];
});
}
// 入力チェックを行う
function checkText(input, text, len) {
var inputname = input.attr("id");
var target = "formText"; //同一内容チェック対象にしたいものを記載する。
// 文字数が0またはlen以上は不可
if (0 === text.length || len < text.length) {
alert("文字数は" + len + "字以内にしてください");
input.focus();
return false;
}
// 同一内容だと登録させない。
if (inputname === target) {
var length = localStorage.length;
for (var i = 0; i < length; i++) {
var key = localStorage.key(i);
var value = localStorage.getItem(key);
var json = JSON.parse(value);
var checker = json.post;
// 内容が一致するものがあるか比較
if (text === checker) {
alert("同じ投稿内容は避けてください");
return false;
}
}
}
return true;
}
//テキストボックスをクリアする。
function clearBox() {
var name = $("#formName");
var post = $("#formText");
name.val("");
post.val("");
$("#formButton").val("投稿する");
$(':hidden[name="key"]').val("");
name.focus();
showText();
}
・CSS
ul li {
list-style: none;
}
label {
margin-right: 10px;
width:80px;
float: left;
}
.post{
position: relative;
}
#formButton {
position: absolute;
}
#list{
bottom: 0
}
/* テキストボックスにフォーカスした際に色を変える */
#form input[type=text]:focus,#form textarea:focus{
background:#ffdab9;
}
4の課題は今後の宿題かなぁ。
というよりJSとDBで何か作ってみるというのも
一興かもしれないですな。
そういって何年も経っているしいい加減やらないとな。
その前にRailsで休んでいる趣味の京都歩きのサイト立上げとか
考えたいなぁと思ったり。
コメント