2021 ソフトウェア設計及び演習用の班Wiki - 20::gr10::酒井珠理::サイドメニュー

20::gr10::酒井珠理::サイドメニュー

archive mode

!!!サイドメニューで使用した関数
*get_tag()((br))
ローカルストレージから値を取り出す関数((br))
空の配列todosに、LocalStorageの中身が空でなければその値(追加や削除を行う前、現在の状態)を格納し返り値として返す。
*add()((br))
配列todosに追加、ローカルストレージに追加(更新)する関数((br))
変数taskにid=taskの値（入力したもの）を格納する。関数get_tag()を呼び出し、返り値を配列todosに格納する。配列todosに、taskの値追加する。最後にLocalStorage.setItemでLocalStorageの値を更新する。
*remove()((br))
削除に関する処理、ローカルストレージを更新する関数((br))
削除する要素の取得を行い、変数idに格納する。spliceで配列todosのidの要素を削除する。LocalStorage.setItemでLocalStorageの値を更新する。
*show()((br))
表示に関する関数((br))
関数add()、remove()内で呼び出される。追加や削除の処理が終了したら、更新後の配列todosの値を取得し表示させる。配列の長さだけfor文でループさせ、中身の要素を連結する。
*jump()((br))
リンク化、ページ遷移に関する関数((br))
ボタンクリックでこの関数を呼び出すようになっていて別ページに遷移する

!!!お気に入りタグの追加 ((br))
6月25日
*サンプルコードを調べ、自分なりにプログラムを作成し、タグの追加、保存、削除をできるようにした。((br))
始めはリロードすると追加したものが全て消えてしまい保存機能をうまく実装できず苦戦した。参考になりそうなサンプルコードを見つけたためプログラムを理解し、自分で作成したプログラムにも保存機能を加えることができた。
*追加したタグのリンク化はまだできていない。
*画面横に縦長に表示されるようCSSを変更する必要がある。
!!初期状態
<<{2020-06-26_LI.jpg}
!!追加
*入力後、追加ボタンを押すと表示
*内容が保存されているため、リロード後もこの表示となる
<<{2020-06-26 (1)_LI.jpg}((br))

タグ編集と書かれている部分に入力されたものをid=task、追加ボタンをid=addとした。addがクリックされたとき、イベントリスナーで関数add()が呼び出され、上に示した関数処理を行うとタグが追加される。((br))

!!削除
*タグ横の削除ボタンを押すと表示が消える
*削除後の内容も保存できているため、リロード後もこの表示となる
<<{2020-06-26 (2)_LI.jpg}((br))
削除ボタンをクリックすると、関数remove()が呼び出され、上に示した関数処理を行うと指定のものが削除される。

!!!リンク化((br))
6月19日
*リンク表示、別ページへの移動のやり方を調べた。別にプログラムを作成し、調べたやり方を実践してみた。((br))
調べた方法では、移動先のリンクをそのままコピペしているので、入力したものをリンク化する別の方法で実装するのが現実的にも思える。もう少し調べて検討していく必要がある。((br))((br))

7月15日
*追加されたタグをクリックすると、リンク先に飛べるようになった。((br))
href属性でリンク先を指定、取得している。((br))
*削除マークを押した場合もページ遷移してしまう問題が発生したので改善が必要である。((br))
→取得するidを変更する必要あり？

8月6日
*タグクリック後の画面((br))
タグをクリックすると別ページへ遷移する。((br))
リンク先のページを作っていないためこのような表示になっている。((br))
<<{2020-08-06 (19)_LI.jpg}

!!!最終形((br))
削除ボタンクリック時に別ページに遷移してしまうのを直すことができなかった。おそらく削除時、リンク先に飛ばすとき、どちらもid=todoを使っていることが原因だと考えられる。idを変更してみる、idではなくクラスで与えてみるなど、試行錯誤したが改善できなかった。href属性を使いリンク化を行っていたが、このような問題が発生したため、他の方法も調べたところ、onClick属性で記述するやり方もあることが分かった。((br))
また、メモ詳細、一覧表示担当の人との進捗の兼ね合いもあり、リンク先のページを指定することができなかった。お互い自分の作業で手一杯で、連携をとれなかったのが反省点である。((br))
統合の際、動作が上手くいかないときがあったらしい。最終発表まで時間がなかったこと、他の重要な機能の実現を優先させたこともありこの問題は未解決である。私が作成した、サイドメニューだけのプログラムでは、このような問題は見られず、統合プログラムに関しては担当ではなかったため理解できない部分もあり、原因は結局分からなかった。

>>{20::gr10}{班トップ}((br))
>>{20::gr10::酒井珠理}{個人ページトップ}((br))
>>{20::gr10::酒井の感想}{感想}

Tag:

Attachment

New: append-tag

(download: 456076 bytes, at 2020/06/26 11:58:21 )
(download: 439286 bytes, at 2020/06/26 11:58:33 )
(download: 428060 bytes, at 2020/06/26 11:57:00 )
(download: 32138 bytes, at 2020/08/06 20:43:04 )
(download: 17203 bytes, at 2020/08/06 20:47:36 )
(download: 603 bytes, at 2020/06/26 11:38:58 <frozen> )
(download: 772 bytes, at 2020/06/26 12:09:12 <frozen> )
(download: 853 bytes, at 2020/06/26 12:12:25 <frozen> )
(download: 1136 bytes, at 2020/07/17 15:19:00 <frozen> )
(download: 1663 bytes, at 2020/07/24 11:42:49 <frozen> )
(download: 1674 bytes, at 2020/07/24 11:43:33 <frozen> )
(download: 1676 bytes, at 2020/08/06 16:20:01 <frozen> )
(download: 1922 bytes, at 2020/08/06 20:50:36 <frozen> )
(download: 1975 bytes, at 2020/08/06 20:55:24 <frozen> )
(download: 2801 bytes, at 2020/08/14 19:28:23 <frozen> )
(download: 2930 bytes, at 2020/08/14 19:38:03 <frozen> )
(download: 3040 bytes, at 2020/08/14 19:41:43 <frozen> )
(download: 3218 bytes, at 2020/08/14 20:26:05 <frozen> )
(download: 3953 bytes, at 2020/08/14 20:43:43 <frozen> )
(download: 4436 bytes, at 2020/08/14 21:40:18 <frozen> )
(download: 4496 bytes, at 2020/08/14 22:11:01 <frozen> )
(download: 5216 bytes, at 2020/08/14 22:38:43 <frozen> )
(download: 5385 bytes, at 2020/08/14 22:51:09 <frozen> )

Syntax Help

URL Link

[text|http://example.com//] http://example.com/to{text}

Page Link

[[PageName]] [[text|PageName]] >>{PageName} >>{PageName}{text}

Image or Attachment

<<{filename} <<{filename}{text}

Text Decoration

'' Italic '' ''' Bold ''' '''' Large-font '''' `` Typewriter `` `?` Preformatted `?` __ Underline __ == Strike == == DEL =={ INS } ((br)) line feed

Special Letter

((amp)) & ((bq)) ` ((lt)) < ((gt)) > ((lp)) ( ((rp)) ) ((lb)) [ ((rb)) ] ((ll)) (( ((rr)) ))

Headline

!!!! site-name !!! section-name !! subsection-name ! subsubsectino-name << section-name >> <<< subsection-name >>> <<<< subsubsection-name >>>> >> Centering and Large-font <<

Itemize

* item1 ** item1-1 ** item1-2

Enumerate

+ item1 + item2 ++ item2-1

Table

|| 1-1 | 1-2 | 1-3 || 2-1 | 2-2 | 2-3

Description

:item ::description

Quotation

6< quotation >9

Preformatted text

8< preformatted-text >8

Edit