質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.45%

  • PHP

    24628questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • WordPress

    9160questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

ToDoリストのレイアウト修正と機能拡張

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 837

SoraSue

score 24

前提

現在、WordpressでSNS機能を持ったtodoリストwebアプリを作ろうとしています。BuddyPressというプラグインを導入して、SNS機能をつけることには成功し、ToDoリスト機能は現在製作中です。以下がそのコードです。(cssやjsが直接書かれているのにはいろいろ事情があります。)

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        #container{
            margin: 0 auto;
            width: 60%;
        }
        #memo{
            width: 100%;

        }
        .content{
            float: left;
            width: 90%;
            word-wrap: break-word;

        }

        h6{
            color: red;
        }
        li{
            list-style: decimal;
        }
        .MainWelcome{


        }
        .ExplainToDo{
                text-align: center;
        }
        </style>
    </head>
    <body>



    <div id="container">
        <h4 class="ExplainToDo">続くToDoリスト</h4>
        <h6 class="ExplainToDo">*クリックするとそのタスクは消えます。</h6>
        <textarea id="memo" name="memo"></textarea>
        <p>
            <input type="button" id="save" value="保存">
            <input type="button" id="clear" value="全消去">
        </p>
        <ul>

        </ul>
    </div>
    <script type="text/javascript" src=jquery1.10.1.min.js></script>
    <script type="text/javascript" >
  $(function () {
      // localStorage.setItem('memo','test'); // データセット
      // localStorage.getItem('memo'); // データ取得
      // localStorage.removeItem('memo'); // データ削除
      // localStorage.clear(); // データ全削除

      var list = []; // localStorageの内容をソートして格納するための配列
      var i = 0; // listのアドレス番号及びlocalStorage保存時のkey

      // 初期読み込み
      // アルファベット順で格納されている(key:1,10,2,3,4,5 ...)ので、配列に格納してソートする
      for(var key in localStorage){
          list[key] = localStorage.getItem(key);
          // console.log(list);
      }
      for(i in list){
          // <li>を生成
          console.log(i);
          cleateLi(list[i]);
      }
      // 初期読み込み後にiを+1
      i++;

      // 保存ボタン
      $('#save').click(function(){
          // 入力フィールドの値を取得
          var memo = $('#memo').val();

          // 入力フィールドを空の場合は処理しない
          if(!memo) return;

          // ローカルストレージに保存
          localStorage.setItem(i, memo);

          // <li>を生成
          cleateLi(memo);

          // 入力フィールドを空にする
          $('#memo').val('');

          // iのカウントアップ
          i++;
      });

      // <li>生成メソッド
      function cleateLi(value){
          // 消去ボタン押下時に要素を特定するためにdata属性を利用する
          var li = $('<li>').html(value).addClass('todo').attr('data-todo',i);

          // 要素を末尾に追加
          $('ul').append(li);

          // 動的に生成された要素<li>にonclickイベントを設定
          $('ul').on('click', '.todo', function(){
              localStorage.removeItem($(this).data('todo'));
              $(this).remove();
              console.log($(this).data('todo'));
          });
      }

      // 全消去ボタン
      $('#clear').click(function(){
          localStorage.clear();
          $('li').remove();
      });
  })

  </script>


    </body>
</html>

実現したいこと

①レイアウトのバグを直したい
ToDoを作成すると、テキストボックスの下側にリストとしてToDoが増えていくのですが、そこ以外にも変な場所にToDoが表示されます。テキストボックスの下側にだけ表示させるにはどうしたらいいですか?テキストボックスの下側以外の場所にもToDoが表示されます。

②ToDoを保存・集計できるようにしたい
このままだと、ToDoを一度消すと記録が残らないので、データベースなどを利用して、保存・集計できるようにしたいです。今はlocalStorageに保存する仕組みなので、これをデータベースに保存する仕組みに変えたほうがいいでしょうか?

③毎日、指定時刻までにToDoが記入されているかチェックしたい。
指定時刻までにその日のToDoが書かれていなかったら、メールを送って知らせるという機能をつけたいのですが、「指定時刻までにToDoが記入されていなかったら〜する」というのはどうしたらいいですか?

補足情報

現在、ローカル開発環境でサイトを作っているので、サイトをそのまま見せることはできません。曖昧な部分が多いと思いますが、宜しくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

わかるところだけ回答しておきます。

(1)  追加対象が<ul>になっているので、ページ上に存在するすべての<ul>に対して<li>が追加されています。
idclassで追加対象の<ul>を限定させるべきです。

// 要素を末尾に追加
jQuery('ul').append(li);


(2) 保存したデータをどう使いたいか次第ではないですか。
どのパソコン(端末)からでも使いたいToDoリストなのであれば、データベースに保存したほうがいいし、
特定の端末のブラウザから使うだけなのであれば、LocalStorageでいいし。

管理側で「保存・集計」をしたいなら、データベースに保存するのが楽でしょう。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/28 16:40

    レイアウトのバグは、classを指定することで完全に直りました!!ありがとうございます!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.45%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • PHP

    24628questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • WordPress

    9160questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。