!!!プロジェクト名
ウィジェット
((br))
!!!プロジェクト説明
メモ帳、時間割などの機能を持つウィジェットを作成
((br))
!!!モジュール分け
・Webアプリケーション起動((br))
｜((br))
・ホーム画面（担当：小笠原・小山内・藤村）((br))
｜　｜((br))
｜　＋ーホーム画面を、設定に応じて構築して表示する((br))
｜　｜((br))
｜　＋ー設定（担当：小笠原・小山内）((br))
｜　　　｜((br))
｜　　　＋ーものの配置を設定する((br))
｜　　　｜((br))
｜　　　＋ー背景を設定する（担当：五十嵐・藤村・小山内）((br))
｜　　　　　　｜((br))
｜　　　　　　＋ー背景画像のURLをテキストボックスに入力((br))
｜((br))
＋ー・機能：メモ（担当：小笠原・小山内・藤村）((br))
｜　｜((br))
｜　＋ーテキストエリアを表示((br))
｜((br))
＋ー・機能：時間割（担当：五十嵐・田中）((br))
｜　｜((br))
｜　＋ー時間割の登録・変更((br))
｜　｜　｜((br))
｜　｜　＋ークリックで書き込み用画面へ((br))
｜　｜((br))
｜　＋ー今日の時間割を表示((br))
｜((br))
＋ー・機能：リンク先（担当：一戸・藤森）((br))
｜　｜((br))
｜　＋ー別のタブor現在のタブで表示((br))
｜　｜((br))
｜　＋ー飛ぶリンクの設定((br))
｜((br))
＋ー・機能：計算機（担当：一戸・藤森）((br))
　　｜((br))
　　＋ー電卓を表示((br))

!!!モジュールごとの詳細
!!ホーム画面
home.htmlにてホーム画面を表示。クラスでマス目状にそれぞれのモジュールの表示位置や大きさを指定し、埋め込むようにiframeで表示する。((br))
モジュールの位置情報は配列で管理し、配列の並びからモジュールの表示サイズを決定する。((br))
画面右上の歯車アイコンをクリックすることで設定が可能。((br))

!homeposition.js
*save()((br))
設定のselect要素から値を取り出し、JSON形式でlocalstrageに保存。((br))
*load()((br))
localstrageの中身で配列を初期化。localstrageが空の場合は、すべて空白で初期化。((br))
*create_home()((br))
配列の内容から、モジュールが連続しているマス目を調べ、それに応じてマス目の大きさを書き換える。((br))
モジュールが存在するかどうかでマス目のz-indexを変化させる（空白は優先度が低いように）。これは、事前にz-indexが高いクラスと低いクラスを用意し、場合に応じてクラスを切り替えて実現。((br))
配列の内容からそれぞれのクラスに表示するモジュールを知り、それに応じてクラスのsrcを書き換える。((br))

!!設定
ホーム画面の歯車アイコンをクリックすることで設定が行えるようになる。((br))
select要素をマス目の数並べ、そこから配置するモジュールの選択を行う。また、select要素の下の入力欄に画像のリンクを入力することで背景を変更できる。((br))
"反映"ボタンによってモジュールの位置や背景の変更を保存することで反映できる。iframeはキャッシュが思いようで、設定が上手く反映されなかったためスーパーリロードで対処。((br))

!!背景
*任意の画像のURLを入力し、背景とする機能。
*background js
!save back()
URLを入力したテキストボックスの中身をローカルストレージに保存する。
!load back()
ローカルストレージに保存したURLを読み出すとともに、そのURLを背景表示用のタグ内のソース部分に流し込む。

*ホームにおける背景機能の動き((br))
URLの入力、保存は設定画面にて実行できる。(反映ボタンでsave backの実行)((br))
実際に背景を読み込む機能として、ページを読み込んだ際にcreate home関数などと同様にload back関数を一度だけ実行している。((br))

!!メモ
テキストエリアを表示し、その内容をlocalstorageに保存できる。ページの起動時にloadを呼び出してlocalstorateから保存されているメモの内容を取り出してテキストエリアに表示。((br))
*load()((br))
localstorageから値を取り出し、それをテキストエリアに渡す。localstorageが空だった場合は"メモは登録されていません。"をテキストエリアに渡す。
*save()((br))
テキストエリアの内容をlocalstorageに保存。

!!リンク
localload()
check?にチェックボックスがチェックされているかどうかを確認。<br>
チェックされている場所と同じ番号のlocalStrageにURLとリンクの名前を保存。<br>
addにタグを表示する位置を取得して入れる。<br>
タグを生成して、hrefにURLをセットする。<br>
a.innerHTMLでURLの名前をa要素にセット。<br>
p.appendChild(a)でp要素にa要素をセット。<br>
add.innerHTML = p.outerHTML;<br>
<br>
save()<br>
localload()と一緒に起動して、localStorage.setItem()でlocalStrageにURLと名前を保存する。<br>
<br>
del()<br>
localloadでテキストデータを入れる代わりに空白を入れて、データを削除する。<br>
<br>
yomikomi()<br>
window.onloadでロード時に起動して、localStrageからテキストデータを引き出して、localloadと同じ流れで表示する。<br>

!!計算機
elem.valueを使ってテキストボックスに入力された文字列の評価を行い”＝”が押された際に<br>
計算結果をテキストボックス内に表示されるようにした。
elemで実現することが難しい場合には別で関数を使って計算できるようにした。
memoryr()<br>
mresultの値をresult.valueに代入する。
memoryc()<br>
mresultの値を０にする。
memoryp()<br>
mresultにテキストボックスに入力された値を足す。この際テキストボックスには入力された値が残る。
memorym()<br>
mresultから入力された値を引く。テキストボックスに入力された値は残る。
cl()<br>
result.valueの値を空にする。
利点として文字列が認識できるのであれば直接テキストボックスに書かれたものでも計算される。
!!時間割
テキストエリア(5×5)にユーザーが時間割を入力する。<br>
入力したら保存ボタンをクリックする。そうすると、２５個のローカルストレージにそれぞれ科目名が保存される。<br>
ブラウザを閉じるor更新したとしても、読み込みボタンを押すことで、ローカルストレージの内容をテキストエリアに出力する。<br>
今日の時間割が見やすいようにjavascriptで今日の曜日を取得して、その曜日の時間割の背景に色を塗った。getDay()で曜日を取得してその値を変数dayOfWeekに代入している。そしてその値に応じてswitch文を用いてどの曜日に色を塗るかを選択している。例えば、今日が月曜日ならば、dayOfWeek=1となり、case(1)の内容を処理している。処理内容は、月曜日の列のid値mondayをGetElementByIdで取得してそのidのクラス名をiroというクラスに変更する。<br>

!!!デモのスクリーンショット
<<{Screenshot from 2021-07-23 18-47-19(1).png}
((br))
<<{Screenshot from 2021-07-23 18-58-17.png}
((br))

!!!プロジェクトのGitLab
[発表用プログラムのGitLab|https://gitlab.cis.iwate-u.ac.jp/2021_g10]