ローカル掲示版(完成版)

-
前回に残課題となっていた1～3について何とか形になった。
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で休んでいる趣味の京都歩きのサイト立上げとか
考えたいなぁと思ったり。

コメント

コメントを投稿

このブログの人気の投稿

GASでGoogleDriveのサブフォルダとファイル一覧を出力する

-
 タイトルのまんまです。 以前、EXCELで似たようなこと をしていたのでGASではどうするのかなぁと思ってやってみました。まぁほとんど丸パクリです。とりあえず、また使うかもしれないので自分用にメモです。しかしGASでGoogleDriveのファイル一覧嘗め回そうとすると3分かかってしまう。数が多いと6分制限に引っかかるのでこれでは使えない。せいぜい100ファイルとか数が少ないところで使う分にはいいけどダイナミックな場合は何回かに分割してやらないと少し厳しいかもしれない。 ◆GAS //設定値取得 const SHEET_URL = SpreadsheetApp.getActiveSpreadsheet().getUrl(); const ss = SpreadsheetApp.openByUrl(SHEET_URL); const SETTING_SHEET = ss.getSheetByName('設定') const TARGET_FOLDER_ID = SETTING_SHEET.getRange('B2').getValue(); const SAVE_FOLDER_ID = SETTING_SHEET.getRange('B3').getValue(); const SAVE_FILE_NAME = SETTING_SHEET.getRange('B4').getValue(); const SAVE_SHEET_NAME = SETTING_SHEET.getRange('B5').getValue(); function writeSheet(values, labels, sheetUrl, sheetname, width) { /* スプレッドシートに書き出し */ try { if (values.length > 0) { // シートを追加する let spreadSheet = SpreadsheetApp.openByUrl(sheetUrl); let sheet = set_sheet(sheetUrl,sheetname); // 1行目だけヘッダ追加 let he...
続きを読む

マクロ経済学(IS-LM分析)

-
イメージ
危うく3日坊主になりそうでした。とりあえず今日は 「IS-LM分析」 です。 テキストでは 簡便4象限法 とかいうのの説明が多いです。なのでさっぱり わけわからん状態ですが、それなりに頑張ってみます。 1: IS曲線 の導出 財市場の均衡を表す。Iは投資を表し、Sは貯蓄を表す。 ・IS曲線導出の材料 I→利子率の関数、S→所得の関数で「I=S」で財市場を表す。 ・ 投資関数 利子率の減少関数、I (投資関数)=I(r)　※rは利子率 ・政府活動の導入 裁量的な拡張的な財政政策はIS曲線をシフトさせる。 IS曲線の右シフト=政府支出の増大や減税等の有効需要を増加させる要因による 2: LM曲線 の導出 利子率の低下が国民所得の増大につながる因果関係を明らかにする目的 ・LM曲線導出の材料 貨幣需要(MD)=L、L=取引的動機+予備的動機(L1)+投機的動機(L2) MD=L1+L2 貨幣供給(Ms)=名目貨幣供給/物価(P) ・LM曲線のシフト 金融緩和策・物価下落：実質貨幣供給(MS)が増大→右(下)へシフト 金融引締策・物価上昇：実質貨幣供給(MS)が減少→左(上)へシフト 独立投資拡大→IS曲線が右にシフト 利子率がr1→r2に下落する。 IS曲線、LM曲線の均衡点がE→Fに移動する。 国民所得がY1→Yfとなって増大する。 3:特殊なLM曲線 ・ 流動性の罠 のLM曲線 金融政策は無効→LM曲線をシフトさせても均衡点Eは変わらない IS曲線を右にシフトさせる拡張的な財政政策を実施すると均衡点が E→E´となり国民所得がY1→Y2に増加するので財政政策は有効となる。　　　 ・ 投資の利子率に対する弾力性ゼロ 金融政策は無効→LM曲線を右にシフトさせても国民所得が増えない。 流動性の罠と同じくIS曲線を右にシフトさせる拡張的な財政政策を実施すると 均衡点がE→E´となり国民所得がY1→Y2に増加するので財政政策は有効となる。　　　　　　 4: クラウディング・アウト 政府が市場に介入して公共投資を行うと民間の投資が締出しを受ける ・古典派による財政政策の無効論 政府支出を拡大すると利子率が上昇してしまい。投資が減少する。 政府の支出がクラウディングアウトを引き起こして支...
続きを読む

IEのセキュリティ設定をいじくるバッチ

-
まぁかなり頻出ですがIEでアプリ用に設定しないといけなくて クリックOnlyで処理したかったので色々と調べてみて作ってみた。 ローカルイントラネットの設定いじくるのとActiveX関連をいじくるのと 互換表示設定をいじくっています。 というよりそういう設定しないと動かないアプリの組み方辞めてください。 頼むから・・・。 挙動が微妙に他と違うのでIEとかEdgeには苦しめられます。 @echo off set REGROOT="HKCU\SOFTWARE\Microsoft\Windows\CurrentVersion\Internet Settings\ZoneMap" reg add %REGROOT% /f /v "AutoDetect" /t REG_DWORD /d "0" reg add %REGROOT% /f /v "IntranetName" /t REG_DWORD /d "1" reg add %REGROOT% /f /v "ProxyBypass" /t REG_DWORD /d "1" reg add %REGROOT% /f /v "UNCAsIntranet" /t REG_DWORD /d "1" rem IEのローカルイントラネット設定(*ドメイン指定) set REGROOT="HKCU\SOFTWARE\Microsoft\Windows\CurrentVersion\Internet Settings\ZoneMap\Ranges\Range1" set REGROOT="HKCU\SOFTWARE\Microsoft\Windows\CurrentVersion\Internet Settings\ZoneMap\Domains\対象ドメイン" reg add %REGROOT% /f /v "*" /t REG_DWORD /d "1" rem スクリプトを実行しても安全だとマークされていない activex コントロールの初期化とスクリ...
続きを読む