!!!プロジェクトのGitLab
[発表用プログラムのGitLab|https://gitlab.cis.iwate-u.ac.jp/2021_g10]<br>
(作品はプロジェクトlastの中にまとめてあります)

!!!プロジェクト名
ウィジェット
((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))

!!!個人の感想
!!小笠原秀芽
初期の構想に近い物を作ることが出来たが、役割分担してさらにそれぞれの情報を共有することの難しさを感じた。
初めてのことが多く、分からないことが多い中での開発は大変だったが、開発を通して様々な知識を得ることができ、さらに自分が思っていた通りの表示を実現出来たときの喜びを感じることが出来た。((br))
反省点としては、もっとGitを活用するべきだった。結局pushなどを活用せずに手作業でファイルを上げ下げしてしまっていたため、早い段階からGitの仕様について理解しておくべきだったと感じている。
また、班員同士のコミュニケーションをもっと活発に行い、互いの情報共有をもっと行うべきだったと感じている。((br))
他にも反省点は多少あるが、何より班全員でウィジェットを作り上げることが出来てよかった。

!!小山内秀
*最初はあまりにも知識と経験がなく、調べた内容が理解できなかったり、そもそも何をどう調べたらよいかがわからなかったが、回を重ねるごとに徐々にhtmlやjsに関してレベルアップできたと思う。
*私自身あまりプログラミングが得意ではなく、かなり他の班員に頼ってしまったような場面もあり、技術の向上だけでなく協力することの大切さも実感することができた。
*また個人としての経験だけでなく、「グループ開発」の経験も積み、成長できた。どうモジュール分けをしたら開発しやすいか、どういった構造にしたら統合する際に不具合が起きないかなど、一人では体験し得ない経験を積めたと想う。
*まだまだわからないことも多く、技術も不足しているが、半年の作品制作を通して少し自身がついたり、開発に対する興味を持てたと思う。

!!一戸健登
最終発表を行い、最初に想定していたようなものを完成することができたと思う。<br>
役割分担をしていたため他のグループではどのような問題点が存在していて、どのように完成に近づけていったのかはわからないが、互いにコードの使えそうなところを自分のコードに取り入れるなどしていたので、藩内でのコミュニケーションは上手くできていたような気がする。今回一番大きな負担をかけてしまったのはメインを担当したメンバーだったがこちらから改良できることは改良して反映がしやすいように指定桁と思っている。

!!藤村律希
最後の最後で表示したいものが表示されないなどのトラブルもあったものの、なんとか仕上げることができた。((br))
また、もっと違う方法でここのプログラムを作れなかったかなど反省する点も多々あるように思い返される。((br))
それでも改めて中間発表と比べてみると見違えるほどよいプログラムができていた。((br))
みんな最初の頃は右も左もわからない、そもそもhtmlって何？という状態から始まった。にもかかわらずここまで仕上げることができたのは仲間との連携があってのことだろう。((br))
特にローカルストレージの使い方などわからないところは仲間の知識無くして実装は叶わなかった。((br))
モジュールごとに分担して各々がバラバラに進行して作り上げた機能も、全てを統合できたのはメイン画面を担当してくれたメンバーのおかげだ。((br))
実習を通し、仲間と協力することの大切さを学んだ。((br))

!!五十嵐晃太
グループ結成当初は、初対面の人も多く、発言もしづらい雰囲気だったが、回を重ねるごとに知識を共有したりプログラムの確認をしたりとコミュニケーションが取れるようになっていくのを実感した。それでも、コミュニケーション不足でうまく行かないこともあり、これについてはこれからコミュニケーションを取る機会を多く経験していくしかないと思った。((br))
グループで作ったものが形になったときの達成感は、一人で何かを作った時よりも大きいものだと思った。一人のときと違い、コミュニケーションという壁を乗り越えるのは困難だったが、それでもうまくコミュニケーションを取ろうと試行錯誤して実践した経験は、成功失敗にかかわらず価値あるものになったと思う。これからに活かして生きたい。