!!!プロジェクト名
ウィジェット
((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()
設定のselect要素から値を取り出し、JSON形式でlocalstrageに保存。((br))
*load()
localstrageの中身で配列を初期化。localstrageが空の場合は、すべて空白で初期化。((br))
*create_home()
配列の内容から、モジュールが連続しているマス目を調べ、それに応じてマス目の大きさを書き換える。((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()
localstorageから値を取り出し、それをテキストエリアに渡す。localstorageが空だった場合は"メモは登録されていません。"をテキストエリアに渡す。
*save()
テキストエリアの内容をlocalstorageに保存。