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

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

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

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

PHP

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

Q&A

解決済

1回答

2185閲覧

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

SoraSue

総合スコア30

WordPress

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

PHP

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

0グッド

0クリップ

投稿2016/12/26 15:09

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

php

1<!doctype html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 #container{ 8 margin: 0 auto; 9 width: 60%; 10 } 11 #memo{ 12 width: 100%; 13 14 } 15 .content{ 16 float: left; 17 width: 90%; 18 word-wrap: break-word; 19 20 } 21 22 h6{ 23 color: red; 24 } 25 li{ 26 list-style: decimal; 27 } 28 .MainWelcome{ 29 30 31 } 32 .ExplainToDo{ 33 text-align: center; 34 } 35 </style> 36 </head> 37 <body> 38 39 40 41 <div id="container"> 42 <h4 class="ExplainToDo">続くToDoリスト</h4> 43 <h6 class="ExplainToDo">*クリックするとそのタスクは消えます。</h6> 44 <textarea id="memo" name="memo"></textarea> 45 <p> 46 <input type="button" id="save" value="保存"> 47 <input type="button" id="clear" value="全消去"> 48 </p> 49 <ul> 50 51 </ul> 52 </div> 53 <script type="text/javascript" src=jquery1.10.1.min.js></script> 54 <script type="text/javascript" > 55 $(function () { 56 // localStorage.setItem('memo','test'); // データセット 57 // localStorage.getItem('memo'); // データ取得 58 // localStorage.removeItem('memo'); // データ削除 59 // localStorage.clear(); // データ全削除 60 61 var list = []; // localStorageの内容をソートして格納するための配列 62 var i = 0; // listのアドレス番号及びlocalStorage保存時のkey 63 64 // 初期読み込み 65 // アルファベット順で格納されている(key:1,10,2,3,4,5 ...)ので、配列に格納してソートする 66 for(var key in localStorage){ 67 list[key] = localStorage.getItem(key); 68 // console.log(list); 69 } 70 for(i in list){ 71 // <li>を生成 72 console.log(i); 73 cleateLi(list[i]); 74 } 75 // 初期読み込み後にiを+1 76 i++; 77 78 // 保存ボタン 79 $('#save').click(function(){ 80 // 入力フィールドの値を取得 81 var memo = $('#memo').val(); 82 83 // 入力フィールドを空の場合は処理しない 84 if(!memo) return; 85 86 // ローカルストレージに保存 87 localStorage.setItem(i, memo); 88 89 // <li>を生成 90 cleateLi(memo); 91 92 // 入力フィールドを空にする 93 $('#memo').val(''); 94 95 // iのカウントアップ 96 i++; 97 }); 98 99 // <li>生成メソッド 100 function cleateLi(value){ 101 // 消去ボタン押下時に要素を特定するためにdata属性を利用する 102 var li = $('<li>').html(value).addClass('todo').attr('data-todo',i); 103 104 // 要素を末尾に追加 105 $('ul').append(li); 106 107 // 動的に生成された要素<li>にonclickイベントを設定 108 $('ul').on('click', '.todo', function(){ 109 localStorage.removeItem($(this).data('todo')); 110 $(this).remove(); 111 console.log($(this).data('todo')); 112 }); 113 } 114 115 // 全消去ボタン 116 $('#clear').click(function(){ 117 localStorage.clear(); 118 $('li').remove(); 119 }); 120 }) 121 122 </script> 123 124 125 </body> 126</html>

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

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

PHP

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

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

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

投稿2016/12/27 12:58

編集2016/12/27 13:03
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

SoraSue

2016/12/28 07:40

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問