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

• ヘッダー
  • ＋ボタン……subwindow.js
• サイドメニュー
  • タグ追加部分……sidmenu.js
• メインコンテンツ部分　
  • カレンダー……calendar.js
  • 自由帳部分……a_memo.js

• 他の作業があらかた終わったのでトップページの作成に着手
• 宮野が見つけたサイトをもとに作ってみるも、うまくページの分割ができなかった。

• ヘッダー、サイドメニュー、メインコンテンツの三つにページを分割することに成功。
• わかりやすい様に色分けをした
• htmlでhtmlを呼び出す（埋め込む？）プログラムを実装してみるも失敗。
  →どうせコピペするだけ、ということでとりあえず保留に。これよりも機能を作る方が先。できたら絶対役に立つんだがな……。

• ヘッダー部分にボタンを作ることに成功
  • 「多機能メモ」ボタンがトップページへのリンクに
  • 「＋」ボタンで編集ページに遷移できるように
    • 現時点で編集ページができていないのでリンク先はまだ空
• サイドメニューになんとなくメニューを追加。恐らくここに全件のリンク先やフラグのリンク先がくると推定。
  • 何もリンク先とか指定してないので現時点では何も起こらない
  • CSSで体裁を整えた。とりあえずマウスカーソルが当たると色が変わる

ページの全体図

＋ボタンでサブウィンド起動

サイドメニュー　マウスカーソルを当てると色が変わる

• ヘッダーの固定に成功（position;fixedの使用）
  • スクロールしてもヘッダーは追従するように
• サイドメニューの固定がなぜか上手くいかない。原因不明。
  • サイドメニューを固定するかメインコンテンツのみのスクロールを行うか？
• メインコンテンツスクロールはできた
  • ただし一定のスクロールを超えるとページ全体のスクロールも働いてしまう
    • サイドメニューの固定が無難か
      →７月追記
      別にサイドは動いてもいいという結論に。サイドにもページ全体にもスクロールバーがあると、二つのスクロールバーのよって画面の動きが分かりづらくなり、使いづらいのでは、という意見があったため。実際マウスポインタの位置を気にしないと動かないサイトの中には使いづらいと感じたものもあったため、その意見を採用。マウスポインタの位置も気をつけなきゃならないサイトって確かにストレスだな……。

• とりあえず真子の作ったカレンダーを統合
  • 上手くいった。動作も問題がないことを確認。
• なぜかじゅりのタグ追加プログラムと統合するとカレンダーが消える。死んだ。
  • じゅりのプログラムは単体のものをJavascriptとhtmlに分け、htmlにJavascriptを統合してもうまく動かない。
  • Javascriptの内容をhtmlにべた書きしていると上手くいく。なんでや。
  • 多分Javascriptの読み込みに問題あり。
    • なおトップページのhtmlにタグ追加のJavascriptをべた書きすると結局カレンダーが喰われる。
      →どこかぶつかっている？

• ついに統合に成功
  • 結果やっぱりJavascriptの読み込みに問題があった。
  • headで読み込みを行っていたことから読み込みのタイミングの問題だったのかも？
  • なんで私がhtmlファイルの最後で読み込んでも言うこと聞かなかったか、原因はよく分からない。
  • 教えてもらったおまじないを付けたら上手くいった。
• 動作確認→成功！
• ともかくデモで統合できそうな部分は統合終了

• トップページのメインコンテンツ部分を更に分割。
  • カレンダー、今日（クリックした日付）の予定、自由帳欄が入るように
  • 本当はコンテンツ部分を縦に二分割、その後二分割したうちの左側を横に分割して計三分割したかったものの、それはどうやら難しいよう。
  • 49％、49％（境界部分でぶつからないように）で縦に二分割ののち左半分を自由帳と予定欄として使うことに
    • とりあえずテキストボックスを置いてそれっぽく。ここにはいりますよ、という目印兼CSSを整える際におかしなところに飛び出ていかないかの監視用

• 真子が作った複数の文字列を呼び出すプログラムを軽く改修工事
  • 形を編集画面っぽく
  • テキストボックスを増やし、各テキストボックスに何を書くのかlabelタグで紐づけ
  • 入力フォームによくあるプレースホルダーを作った（薄い字で「名前を入力」とかって書いてるやつ
  • CSSでクリックしたテキストボックス（入力中のテキストボックス）の枠の色が青くなるように修正
  • その他テキストボックスの大きさ等をそれっぽく。ウィンドウの１００％で設定したので、サブウインドウで開いてウインドウサイズが小さくなってもそこそこの入力範囲があるように見せるため。

• なぜかサブウインドウで編集ページを呼び出せなかったため、サブウインドウの内容を修正。
• 原理はよくわからなかったが、inputを使うようにしたらなんだか上手くいった。
• ポップアップウインドウで選択した内容に合わせて動きを変化させる方法について調べた。
  • いずれは「削除しますか？」とポップアップが起動したのに対して
    • 「はい」でデリートを実行し、そのままサブウインドウを自動で閉じる
    • 「いいえ」でそのまま編集ページにとどまる
      　という動作ができたらうれしい。
      ８月追記
      →サブウインドウをポップアップを使って閉じるのは難しそう、との判断。色々と調べてみたが、window_closeという関数を使ってしまうとそれ以外の動作を行えず、削除ができない可能性。この関数を使わない方法を調べてみたが、うまくいかなかった。詳しくは私の個人ページポップアップ項目にて。

• 統合した編集ページに日付入力フォームを統合。
• 当初保存ボタン等の一番下にあったボタンが写らなくなる不具合が発生したが、これは単純にボタンがスクロールバーはギリギリ働かないが、こちらからも見えない場所に入り込んでしまっていただけの模様
• 最初は「なんでデベロッパーツール使ってもなんのエラーも出てないのにお前は現れないんだ！」とめちゃくちゃ混乱したし憤慨したものの、サブウインドウのウインドウサイズを調節することで解決。びっくりさせんなや。一度最大化してみてみようという発想が出た私に拍手。

• こちらきちんと見えるようにサブウインドウのサイズを調節したもの。ボタンはきちんと見えているし、日付入力フォームも問題なく起動。保存ボタンたちもきちんと働いている様子。

• 統合チーム(仮)で話し合い。
• じゅりの改良版タグ追加機能をサイドメニューに、真子の改良版カレンダーをメインコンテンツ部分に統合
  • 結果、よくわからないエラーがでる。時々'addEventListener'を読み取れない、というエラーが起こる。しかし再度読み込むと上手くいったりいかなかったりで、意味が全く分からない。しかも上手くいくときと行かないときで法則性がない。なんでや工藤？？？？？？もしかして私が触れないところでエラーが起こってる？調べてみたけど本当に分からん。これは同一のイベントに複数の処理を登録することのできる関数らしく、じゅりのタグ追加のほうでは複数のタグを追加する時、真子のカレンダーでは来月や先月に飛ぶ時に使っていたようだが本気で原因が分からない。3日調べた。お前はどうしてしまったの？？？自作じゃない関数がぶつかることってあるの？
• でも読み込み直すと上手くいく。何故。
• とりあえず少なくともカレンダーはMySQLとの統合もあるため、先にページを整えよう、という話に

↓うまくいってないやつ。本当にどうして？？？ちなみにサイドメニューは普通に表示はされているが、この状態だとタグ追加はできなくなっている。

• もう例のエラーが全然できないのでページ全体をよしのが作ってくれたロゴに合わせてデザインし直すことに。
• ついでなので全体の余白や分割といった部分もしっかり直した。いいデザインには余白が大切なのさ。とはいってもトップページはコンテンツてんこもりで割とぎちぎちなので全体のバランスを崩さない程度でしかし見苦しくない程度で余白を作った（つもり）

そうして出来上がったのがこちら！！！！！

• ヘッダー
  • 影を付けて立体感を。透明度を80％に設定し、スクロールしてもきちんと追従はするが存在感を失わない程度にできたかと。
  • よしのが作ったロゴをトップページへのリンク化。ただロゴがあるだけではのっぺりしてしまってつまらないし、ボタンだと気づいてもらえない可能性すらあるのでマウスポインタを持ってくるとロゴの透明度が上がり、押すとしっかりボタンのように沈むようにした。
  • もともとあった＋ボタンもロゴの雰囲気に合わせて変更。前のボタンより＋の文字が見やすく、一目でなんとなくどんな動作が起こるかはっきりしたのではないだろうか。こちらのボタンも押すとちゃんと沈む。
  • 検索ボックスをついに設置した。最初はどうしてもヘッダーの外に出ていってしまい、四苦八苦したが、どうやらinputは段落を作る効果があるらしく、＋ボタンもinputで作っているのでそこ2つが互いに段落を作ってしまってそのような出力になったと考えられる。インラインをかけてやることでヘッダー内のものは一列に横並びできるようになった。4時間とか戦った甲斐があった。
  • やっている途中でなぜかヘッダー全体がトップページへのリンクになってしまい、検索のために検索ボックスにマウスカーソルを合わせただけでトップページへの遷移が起こってしまったが、divタグを使わずにレイアウトすることで解決。divタグでロゴの部分をかこっていたためにヘッダー全体に干渉してしまい、結果としてヘッダー全体がトップページへのリンクになっていたと思われる。

• サイドメニュー
  • こちらは大きな変更はあまりない。タグ追加機能をリニューアルし、背景色を変えた。
  • 背景があまりに寂しいので、なに模様をつけようかと思ったがページ全体が柄柄になっていしまってうるさいしダサいのであくまでなじませる程度でとどめた。
  • メニューバーを現時点でつけられそうな機能のみに絞った。増えても残っているものをコピペしてテキストやリンク先を変えればいいのでこれで対応できるかと。
  • あんまりにもさみしいし、時間があったら使い方の説明のヘルプ的なページを作ってもいいかも。

• メインコンテンツ部分
  • 大きな変更こそないものの、カレンダーの機能アップのため、よりカレンダーにスペースをとれるようにページの分割割合を変更。

こんな感じで複数の予定を入れられるようになった。素晴らしい。なおきちんと表示さえされていれば問題なく動作する。

• • 予定部分にはMySQLのメモリがないと表示できない為、ここではテキストボックスを置いて大まかな位置を示している。
  • 自由帳部分。〆切があるわけではないが、やらなきゃいけないことなんかをメモするための部分と思ってもらえれば。「卵買う」とか「〇〇の練習」とかそんな感じで。テキストボックスをメモ帳っぽく装飾し、メモが机に置いてあったりボードに貼ってあったりするイメージで影をつけた。ちなみにきちんと動く。素晴らしい。

• • あとは全体的な装飾。シンプルだけどシンプルすぎず、他のコンテンツを見るのに邪魔にならない程度に背景に模様を付けた。各コンテンツにきちんとタイトル(？)というかどこがどの機能なのかわかるように見出しのようなものを付け、ページが地味になりすぎないがぱっと見で区別できる色を選んで文字の装飾をした。きちんと余白も取っている。この装飾をタグっぽくしたことでメモ帳も相まってちょっとアナログ感がでて楽しいかな、と。

デザインについて

• 全体として見やすさを意識。目に優しい感じでレイアウトにも気を使った。
• 他にもカレンダーや予定部分で色を付けた部分が目立つように色を選択、全体的に淡い色にした。しかしあまり明度の高い色やパステルカラーばかり選ぶと印象がふわふわになってしまうし何より見ていて眩しくなってしまうので若干グレーを混ぜたような色を使うことで統一感を出すと同時に見づらいならないように意識した。
• 余白にも気を使った。特にトップページは内容盛りだくさんなので、バランスを取りつつそれぞれのコンテンツが見づらい大きさにならないよう、ぎちぎちになってページ全体が見づらくなることがないよう、かなり気を使ってデザインした。
• 背景の模様は見づらくはならない程度に、しかし地味にはなりすぎないデザインにしたつもり。
• ヘッダー部分はもう少しラインを入れる等のデザインをしたかったが、時間的に難しかった。ボタンの色やロゴ、ボタン、検索ボックスの配置はぱっと見たときにわかるように、またごちゃごちゃしないような配置にした。
• サイドメニューはタグ追加ボタンが目立つように、かといってメニューバーが分かりづらいものにならないように気を付けた。