2020 ソフトウェア設計及び演習用の班Wiki

20::gr10::統合

※一部MySQLの方に書けよって内容含まれてるけど統合しながら修正していったやつなので許して

進捗

  • よしのとおとはに書いてもらったcssをプログラムに合わせた形に修正したりバランスいじったり。
    • 追加、変更、削除ボタンの機能が使えない書き方だったのでデータ送れるように書き直し。ボタンの文字フォントが変わってしまったが本人に了承を得た。
    • デザインを最大限生かせるサブウィンドウのサイズにしたいが他の項目のサイズとのバランスが難しい。PCの画面が小さいとスクロールしないとボタンが見えない。
    • 一覧表示の方はデザインが一部反映されなくて悩んでいたが、普通のテーブルの書き方のサイトを参考にしたらループ処理でおかしくなる部分がありそこを書き換えたためだった。
  • サブウィンドウのデザインの引き継ぎミスを修正。memo.css内に二パターン書いてclassで分けたら表示が上手くいかなかったのでmemo.cssをなかったことにして各phpプログラム内に記述。
  • すずねが用意したトップにこっちで作ったコンテンツを統合。他のページも各コンテンツを統合。
    • コンテンツエリアの背景がコンテンツの大きさによって変わる仕様だったので固定で丁度よく見えるように調整。
    • 各ページのコンテンツの配置を調整。
  • 一覧表示で色要素使った図形でフラグを表現するやつ、結局cssだといい感じに表示できないのでテキストの●を文字色変えて表現するように変更。(cssで円作るとそこだけテーブルの背景色ごと丸くなってしまう。)
  • タグを3つ表示させていたところを企画書通りの1個表示に変更。トップページはカレンダーがでかくて幅がないので3つだと画面が乱れてた。
  • 新規メモ追加したときに白(#ffffff)が自動で保存されるように変更。MySQLの方でデフォルト値として設定すると今までのプログラムで新規メモが保存できなくなったのでinputで白が保存されるようにして解決。(デフォルト値をNULLにすると1回色設定したメモでも編集時に色選択しないと変更したときに元の色消えちゃうのでユーザー定義を何も入力しないで設定し直して元に戻った。)
    • ↑の修正、色付きメモをフラグとして扱うとする。
      新規メモ追加の時に入る白を#ffffff→whiteに変更。タグはあいまい検索で「#」なくても検索できるのでこの際なくして、検索ボックスに「#(半角)」入れて検索すると色付けたメモだけが出てくるっていうフラグの全件表示のさせ方。
    • フラグ検索方法から気づいたサイドメニューからのフラグ全件表示方法
      検索結果表示プログラムの検索対象をcolorだけにした(この時点でタグから#を消した意味は無くなった)ページを用意してそこにvalue="#"を与えて画面遷移させる。動作は成功したが、クリックでリンク先にただ飛ぶのではなく値を送る方式で記述するとボタンができてしまうのでcssでボタンの線を消す必要あり。今は#で色つきは全部フラグ扱いにしてあるけど、カラーコード指定すれば赤だけをフラグとかにも変更できる。(絞り込みは解決してない)
    • フラグは赤のみとして、フラグ全件では赤のやつだけ表示される。
  • カレンダーとの連動成功。
    • 日付が保存されているメモのタイトルが、colorを反映させてカレンダーに表示される。JSON使うために、カレンダーのjs部分をtop.php内に直接記述するようにした結果、トップだけで500行近いプログラムに。
    • 透けていたカレンダーの背景色を入れてもらった。
  • 新規と詳細のデータベース呼び出しとボタンを押したときの処理内容のプログラムを別ファルにまとめた。phpファイルを書き分けてそのファイル読み込んでるだけなので関数とかではない。
  • サイドメニューのフラグリンクのボタンが出ちゃってダサい問題&全件とフラグの間に謎のほっそ~い何かが発生している問題をまこに、自作タグの追加ボタンがウィンドウサイズによって現れたり消えたりする問題をすずねに解決していただいた。ページの見た目が整った。
  • 各ページのコンテンツ内容をトップページを参考に表示されるようにした。(「今日の予定」とか「自由帳」のやつ)
  1. トップ最初に開いた感じ
    全画面.png
  2. トップページカレンダー
    カレンダー連動.png
  3. タイトルとかつけて保存するレベルじゃない思いついたこととかぱっと書ける部分。
    自由帳.png
  4. サイドメニューの全件から保存されてる全てのメモの一覧が表示される。
    全て.png
  5. 検索に該当するメモだけが表示される。(例:「学校」の検索結果)
    けんさくけんさく~.png
  6. 新規メモ作成画面。「追加」ボタンで保存される。サブウィンドウは自動で閉じないので連続で複数のメモを作成可能。
    追加真.png
  7. 各ページのメモの横のアイコンをクリックすると開くメモの中身。ここから削除もできる。
    中身.png
  8. フラグ全件、サイドメニューでクリックすると飛べる
    サイドメニューリンク化.png フラグ全件.png

頑張ったけどできなかったこと

  • カレンダーの日付クリックで今日の予定がその日のメモに切り替わる(そこだけ処理をかえた画面に遷移)するようにしたかったがjsファイルのどこをどうしたらいいかわからないしカレンダーにメモのタイトルが出せただけでも十分なので諦め。
  • サイドメニューのタグ編集欄のサイズが意味不明。ウィンドウを小さくしていくとボタン出てくるけど大きいと出てこないしなんか飛び出してる。どこであんなサイズになっちゃってるのか探したけどわからないし、知ってる方法で変わらないか試したけど不正解だった。
  • サイドメニューで作ったタグのリンク、作った文字列を送信するのどうやんの。ていうかjsでの書き方見るにそもそもPOST通信できない記述の仕方している。別の書き方調べたけどいろんな部分書き換える必要あるかもしれなくて断念。
  • トップの当日のメモのテーブル、cssで幅指定してるのに入ってる文字数によってタグのセルの幅が変わってしまう。
  • フラグ絞り込みをつけようとしたが、メインの検索フォームとか検索結果画面の処理とかが参考にしたサイト(性別、年齢で絞り込めるやつ)と違っててよくわからなかった。フラグ有り無しの選択するフォーム追加しようとしたけどそのフォームが表示すらされなくて処理を試してみるとかの段階ですらなかった。意味不明。(フラグ有りを選択すると'1'が送信されて、その値が'1'ならカラーコードが赤のメモの中から検索される、的な処理をしようとした。)
  • 詳細画面で削除ボタン押したらサブウィンドウ閉じてメインウィンドウ自動更新をしたかったけど色々試して結果失敗。直接window.close()とかopenを利用したやつとか使うと削除されないので、jsに関数で削除、更新、ウィンドウ閉じるってのを書いたけどウィンドウは閉じないし更新はメインじゃなくサブがされて意味ないしで削除しかまともに動かないから一周回って元に戻った。
  • ポップアップはphpファイルでhtmlの中のjs部分にhtmlで書きたいという状況が訳分からなくて諦めた。
  • いろんなサイトの画像の保存の仕方を、新しいテーブル用意して丸々サンプルコード使ったやり方で書いてみたり、メモのテーブルにパス保存するカラム追加して新規メモ作成のプログラムに必要そうなコード入れたりして試したけどどれも失敗。もうわからない。時間ないし画像は諦め。

やってないこと

  • サイドメニューの自作タグとカレンダーはなんで更新する度表示されたりされなかったりするの。何を条件としてそんな挙動をしているの。
    • 連動させてるうちにカレンダーは常に出るようになった
  • 一覧表示でスクロールしてもhead部分は固定されてほしい。
    • 優先度低いので諦め
  • メモの詳細表示を同時に複数のサブウィンドウ開けるようにしたいけど今は1つしか立ち上がらない書き方してる。同じところをクリックした回数だけサブウィンドウ立ち上がるっていうサンプルは見たことあるけどクリックするの別のとこだしできんのかな?
    • 時間ないのでなかったことに

班トップ


最終更新日:2020/08/14 23:54:12