{"id":46,"date":"2021-11-25T14:02:02","date_gmt":"2021-11-25T05:02:02","guid":{"rendered":"https:\/\/kpc2021.satoshis.jp\/?p=46"},"modified":"2021-11-25T16:25:28","modified_gmt":"2021-11-25T07:25:28","slug":"musicplayer%e3%82%92web%e3%82%a2%e3%83%97%e3%83%aa%e3%81%ab%e3%81%99%e3%82%8b-2","status":"publish","type":"post","link":"https:\/\/kpc2021.satoshis.jp\/?p=46","title":{"rendered":"MusicPlayer\u3092Web\u30a2\u30d7\u30ea\u306b\u3059\u308b &#8211; 2"},"content":{"rendered":"<p>\u500b\u5225\u306e\u30d7\u30ec\u30a4\u30ea\u30b9\u30c8\u306e\u753b\u9762\u3092\u8868\u793a\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u3002<\/p>\n<p>\u307e\u305a\u3001\u30d7\u30ec\u30a4\u30ea\u30b9\u30c8\u306e\u4e00\u89a7\u3092\u30c6\u30fc\u30d6\u30eb\u3067\u8868\u793a\u3057\u3066\u3044\u308b\u3068\u3053\u308d\u306e\u3001\u30d7\u30ec\u30a4\u30ea\u30b9\u30c8\u540d\u3092\u30ea\u30f3\u30af\u306b\u5909\u66f4\u3059\u308b\u3002<\/p>\n<pre class=\"brush: xml; first-line: 26; highlight: [34]; title: ; notranslate\" title=\"\">\r\n&lt;h3&gt;\u30d7\u30ec\u30a4\u30ea\u30b9\u30c8&lt;\/h3&gt;\r\n&lt;table&gt;\r\n\t&lt;tr&gt;\r\n\t\t&lt;th&gt;ID&lt;\/th&gt;\r\n\t\t&lt;th&gt;\u540d\u524d&lt;\/th&gt;\r\n\t&lt;\/tr&gt;\r\n\t&lt;tr th:each=&quot;playlist : ${playlists}&quot;&gt;\r\n\t\t&lt;td th:text=&quot;${playlist.id}&quot;&gt;&lt;\/td&gt;\r\n\t\t&lt;td&gt;&lt;a th:href=&quot;@{'\/playlist\/' + ${playlist.id}}&quot; th:text=&quot;${playlist.name}&quot;&gt;&lt;\/a&gt;&lt;\/td&gt;\r\n\t&lt;\/tr&gt;\r\n&lt;\/table&gt;\r\n<\/pre>\n<p>IndexController \u3067\u3001URL \/playlist\/{id} \u3092\u53d7\u3051\u4ed8\u3051\u308b\u3088\u3046\u306b\u3059\u308b\u3002<\/p>\n<pre class=\"brush: java; first-line: 61; title: ; notranslate\" title=\"\">\r\n\t@RequestMapping(value=&quot;\/playlist\/{id}&quot;, method=RequestMethod.GET)\r\n\tpublic ModelAndView playlist(ModelAndView mav,\r\n\t\t\t@PathVariable long id) {\r\n\t\tOptional&lt;PlayList&gt; r = playListRepository.findById(id);\r\n\t\tPlayList pl = r.get();\r\n\t\tmav.addObject(&quot;playlist&quot;, pl);\r\n\t\tmav.setViewName(&quot;playlist&quot;);\r\n\t\treturn mav;\r\n\t}\r\n<\/pre>\n<p>Optional\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3059\u308b\u3068\u304d\u306f\u3001java.util \u306e Optional \u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3059\u308b\u3002<\/p>\n<p>\u3053\u308c\u3067\u3001\u30d7\u30ec\u30a4\u30ea\u30b9\u30c8\u540d\u304c\u30ea\u30f3\u30af\u3067\u8868\u793a\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308b\u3002<\/p>\n<p>\u30d7\u30ec\u30a4\u30ea\u30b9\u30c8\u540d\u306e\u30ea\u30f3\u30af\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u307e\u3060\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u4f5c\u3063\u3066\u306a\u3044\u306e\u3067\u30a8\u30e9\u30fc\u306b\u306a\u308b\u3002<\/p>\n<p>\/playlist \u3067\u8868\u793a\u3059\u308b\u305f\u3081\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u7528\u610f\u3059\u308b\u3002<\/p>\n<p>src\/main\/resources \u306e templates \u306b playlist.html \u3092\u4f5c\u6210\u3059\u308b\u3002<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html xmlns:th=&quot;http:\/\/www.thymeleaf.org&quot;&gt;\r\n&lt;head&gt;\r\n&lt;meta charset=&quot;UTF-8&quot;&gt;\r\n&lt;title&gt;\u30d7\u30ec\u30a4\u30ea\u30b9\u30c8&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;h1 th:text=&quot;${playlist.name}&quot;&gt;&lt;\/h1&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>\u30d7\u30ec\u30a4\u30ea\u30b9\u30c8\u306b\u97f3\u697d\u3092\u8ffd\u52a0\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u3002<br \/>\n\u3068\u308a\u3042\u3048\u305a\u3001\u97f3\u697d\u306e\u30ea\u30b9\u30c8\u3092 index.html \u304b\u3089\u30b3\u30d4\u30fc\u3057\u3066\u304d\u3066\u3001\u524a\u9664\u306e\u30ea\u30f3\u30af\u3092\u8ffd\u52a0\u306b\u5909\u66f4\u3059\u308b\u3002<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html xmlns:th=&quot;http:\/\/www.thymeleaf.org&quot;&gt;\r\n&lt;head&gt;\r\n&lt;meta charset=&quot;UTF-8&quot;&gt;\r\n&lt;title&gt;\u30d7\u30ec\u30a4\u30ea\u30b9\u30c8&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;h1 th:text=&quot;${playlist.name}&quot;&gt;&lt;\/h1&gt;\r\n\r\n&lt;h3&gt;\u3053\u306e\u30d7\u30ec\u30a4\u30ea\u30b9\u30c8\u306b\u97f3\u697d\u3092\u8ffd\u52a0\u3059\u308b&lt;\/h3&gt;\r\n\r\n&lt;h3&gt;Music\u30ea\u30b9\u30c8&lt;\/h3&gt;\r\n&lt;table&gt;\r\n\t&lt;tr&gt;\r\n\t\t&lt;th&gt;ID&lt;\/th&gt;\r\n\t\t&lt;th&gt;\u30bf\u30a4\u30c8\u30eb&lt;\/th&gt;\r\n\t\t&lt;th&gt;\u30a2\u30fc\u30c6\u30a3\u30b9\u30c8&lt;\/th&gt;\r\n\t\t&lt;th&gt;\u64cd\u4f5c&lt;\/th&gt;\r\n\t&lt;\/tr&gt;\r\n\t&lt;tr th:each=&quot;music : ${musics}&quot;&gt;\r\n\t\t&lt;td th:text=&quot;${music.id}&quot;&gt;&lt;\/td&gt;\r\n\t\t&lt;td th:text=&quot;${music.title}&quot;&gt;&lt;\/td&gt;\r\n\t\t&lt;td th:text=&quot;${music.artist}&quot;&gt;&lt;\/td&gt;\r\n\t\t&lt;td&gt;&lt;a th:href=&quot;@{'\/addtoplaylist\/' + ${playlist.id} + '\/' + ${music.id}}&quot;&gt;\u8ffd\u52a0&lt;\/a&gt;&lt;\/td&gt;\r\n\t&lt;\/tr&gt;\r\n&lt;\/table&gt;\r\n\r\n\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>IndexController \u3067 musics \u3092 playlist \u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306b\u6e21\u3059\u3088\u3046\u306b\u3059\u308b\u3002<\/p>\n<pre class=\"brush: java; first-line: 61; highlight: [67,68]; title: ; notranslate\" title=\"\">\r\n\t@RequestMapping(value=&quot;\/playlist\/{id}&quot;, method=RequestMethod.GET)\r\n\tpublic ModelAndView playlist(ModelAndView mav,\r\n\t\t\t@PathVariable long id) {\r\n\t\tOptional&lt;PlayList&gt; r = playListRepository.findById(id);\r\n\t\tPlayList pl = r.get();\r\n\t\tmav.addObject(&quot;playlist&quot;, pl);\r\n\t\tList&lt;Music&gt; musics = musicRepository.findAll();\r\n\t\tmav.addObject(&quot;musics&quot;, musics);\r\n\t\tmav.setViewName(&quot;playlist&quot;);\r\n\t\treturn mav;\r\n\t}\r\n<\/pre>\n<p>\/addtoplaylist\/{pid}\/{mid} \u3067\u306f\u3001id=pid \u306e\u30d7\u30ec\u30a4\u30ea\u30b9\u30c8\u306b id=mid \u306e\u97f3\u697d\u3092\u8ffd\u52a0\u3057\u305f\u3044\u3002<br \/>\n\u306a\u306e\u3067\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u30b3\u30fc\u30c9\u3092\u66f8\u3044\u3066\u307f\u308b\u3002<\/p>\n<pre class=\"brush: java; first-line: 73; title: ; notranslate\" title=\"\">\r\n\t@RequestMapping(value=&quot;\/addtoplaylist\/{pid}\/{mid}&quot;, method=RequestMethod.GET)\r\n\tpublic ModelAndView addToPlaylist(ModelAndView mav,\r\n\t\t\t@PathVariable long pid,\r\n\t\t\t@PathVariable long mid) {\r\n\t\tOptional&lt;PlayList&gt; pr = playListRepository.findById(pid);\r\n\t\tPlayList pl = pr.get();\r\n\t\tOptional&lt;Music&gt; mr = musicRepository.findById(mid);\r\n\t\tMusic m = mr.get();\r\n\t\tpl.addMusic(m);\r\n\t\tplayListRepository.saveAndFlush(pl);\r\n\t\treturn mav;\r\n\t}\r\n<\/pre>\n<p>pl.addMusic(m) \u306e\u3068\u3053\u308d\u3067\u30b3\u30f3\u30d1\u30a4\u30eb\u30a8\u30e9\u30fc\u306b\u306a\u3063\u3066\u3044\u308b\u306e\u3067\u3001\u30af\u30a4\u30c3\u30af\u30d5\u30a3\u30c3\u30af\u30b9\u3067\u30e1\u30bd\u30c3\u30c9\u3092\u4f5c\u6210\u3057\u3066\u30a8\u30e9\u30fc\u3092\u6d88\u3059\u3002<\/p>\n<pre class=\"brush: java; highlight: [34,35,36]; title: ; notranslate\" title=\"\">\r\npackage jp.kpc;\r\n\r\nimport javax.persistence.Column;\r\nimport javax.persistence.Entity;\r\nimport javax.persistence.GeneratedValue;\r\nimport javax.persistence.Id;\r\nimport javax.validation.constraints.NotEmpty;\r\nimport javax.validation.constraints.NotNull;\r\n\r\n@Entity\r\npublic class PlayList {\r\n\t@Id\r\n\t@GeneratedValue\r\n\t@Column\r\n\t@NotNull\r\n\tprivate long id;\r\n\r\n\t@Column\r\n\t@NotEmpty\r\n\tprivate String name;\r\n\r\n\tpublic long getId() {\r\n\t\treturn id;\r\n\t}\r\n\tpublic void setId(long id) {\r\n\t\tthis.id = id;\r\n\t}\r\n\tpublic String getName() {\r\n\t\treturn name;\r\n\t}\r\n\tpublic void setName(String name) {\r\n\t\tthis.name = name;\r\n\t}\r\n\tpublic void addMusic(Music m) {\r\n\r\n\t}\r\n}\r\n<\/pre>\n<p>\u30d7\u30ec\u30a4\u30ea\u30b9\u30c8\u3092\u8ffd\u52a0\u3059\u308b addToPlaylist() \u3067\u306f\u3001\/playlist\/{pid} \u306b\u30ea\u30c0\u30a4\u30ec\u30af\u30c8\u3059\u308b\u3002<\/p>\n<pre class=\"brush: java; first-line: 73; highlight: [83]; title: ; notranslate\" title=\"\">\r\n\t@RequestMapping(value=&quot;\/addtoplaylist\/{pid}\/{mid}&quot;, method=RequestMethod.GET)\r\n\tpublic ModelAndView addToPlaylist(ModelAndView mav,\r\n\t\t\t@PathVariable long pid,\r\n\t\t\t@PathVariable long mid) {\r\n\t\tOptional&lt;PlayList&gt; pr = playListRepository.findById(pid);\r\n\t\tPlayList pl = pr.get();\r\n\t\tOptional&lt;Music&gt; mr = musicRepository.findById(mid);\r\n\t\tMusic m = mr.get();\r\n\t\tpl.addMusic(m);\r\n\t\tplayListRepository.saveAndFlush(pl);\r\n\t\treturn new ModelAndView(&quot;redirect:\/playlist\/&quot; + pid);\r\n\t}\r\n<\/pre>\n<p>\u3072\u3068\u3064\u306e PlayList \u306b\u5bfe\u3057\u3066\u8907\u6570\u306e Music \u3092\u95a2\u9023\u4ed8\u3051\u308b\u3002<\/p>\n<p>PlayList<\/p>\n<pre class=\"brush: java; highlight: [25,26,43,44,45,46,47,48]; title: ; notranslate\" title=\"\">\r\npackage jp.kpc;\r\n\r\nimport java.util.List;\r\n\r\nimport javax.persistence.Column;\r\nimport javax.persistence.Entity;\r\nimport javax.persistence.GeneratedValue;\r\nimport javax.persistence.Id;\r\nimport javax.persistence.OneToMany;\r\nimport javax.validation.constraints.NotEmpty;\r\nimport javax.validation.constraints.NotNull;\r\n\r\n@Entity\r\npublic class PlayList {\r\n\t@Id\r\n\t@GeneratedValue\r\n\t@Column\r\n\t@NotNull\r\n\tprivate long id;\r\n\r\n\t@Column\r\n\t@NotEmpty\r\n\tprivate String name;\r\n\r\n\t@OneToMany\r\n\tprivate List&lt;Music&gt; musics;\r\n\r\n\tpublic long getId() {\r\n\t\treturn id;\r\n\t}\r\n\tpublic void setId(long id) {\r\n\t\tthis.id = id;\r\n\t}\r\n\tpublic String getName() {\r\n\t\treturn name;\r\n\t}\r\n\tpublic void setName(String name) {\r\n\t\tthis.name = name;\r\n\t}\r\n\tpublic void addMusic(Music m) {\r\n\t\tmusics.add(m);\r\n\t}\r\n\tpublic List&lt;Music&gt; getMusics() {\r\n\t\treturn musics;\r\n\t}\r\n\tpublic void setMusics(List&lt;Music&gt; musics) {\r\n\t\tthis.musics = musics;\r\n\t}\r\n}\r\n<\/pre>\n<p>Music<\/p>\n<pre class=\"brush: java; highlight: [27,48,49,50,51,52,53]; title: ; notranslate\" title=\"\">\r\npackage jp.kpc;\r\n\r\nimport javax.persistence.Column;\r\nimport javax.persistence.Entity;\r\nimport javax.persistence.GeneratedValue;\r\nimport javax.persistence.Id;\r\nimport javax.persistence.ManyToOne;\r\nimport javax.validation.constraints.NotEmpty;\r\nimport javax.validation.constraints.NotNull;\r\n\r\n@Entity\r\npublic class Music {\r\n\t@Id\r\n\t@GeneratedValue\r\n\t@Column\r\n\t@NotNull\r\n\tprivate long id;\r\n\r\n\t@Column\r\n\t@NotEmpty\r\n\tprivate String title;\r\n\r\n\t@Column\r\n\t@NotEmpty\r\n\tprivate String artist;\r\n\r\n\t@ManyToOne\r\n\tprivate PlayList playList;\r\n\r\n\tpublic long getId() {\r\n\t\treturn id;\r\n\t}\r\n\tpublic void setId(long id) {\r\n\t\tthis.id = id;\r\n\t}\r\n\tpublic String getTitle() {\r\n\t\treturn title;\r\n\t}\r\n\tpublic void setTitle(String title) {\r\n\t\tthis.title = title;\r\n\t}\r\n\tpublic String getArtist() {\r\n\t\treturn artist;\r\n\t}\r\n\tpublic void setArtist(String artist) {\r\n\t\tthis.artist = artist;\r\n\t}\r\n\tpublic PlayList getPlayList() {\r\n\t\treturn playList;\r\n\t}\r\n\tpublic void setPlayList(PlayList playList) {\r\n\t\tthis.playList = playList;\r\n\t}\r\n}\r\n<\/pre>\n<p>\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8 playlist \u306b\u3001\u30d7\u30ec\u30a4\u30ea\u30b9\u30c8\u306b\u767b\u9332\u6e08\u307f\u306e\u97f3\u697d\u30ea\u30b9\u30c8\u3092\u8ffd\u52a0\u3059\u308b\u3002<\/p>\n<pre class=\"brush: xml; highlight: [11,12,13,14,15,16,17,18,19,20,21,22,23]; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html xmlns:th=&quot;http:\/\/www.thymeleaf.org&quot;&gt;\r\n&lt;head&gt;\r\n&lt;meta charset=&quot;UTF-8&quot;&gt;\r\n&lt;title&gt;\u30d7\u30ec\u30a4\u30ea\u30b9\u30c8&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;h1 th:text=&quot;${playlist.name}&quot;&gt;&lt;\/h1&gt;\r\n\r\n&lt;h3&gt;\u3053\u306e\u30d7\u30ec\u30a4\u30ea\u30b9\u30c8\u306b\u8ffd\u52a0\u3055\u308c\u3066\u3044\u308b\u97f3\u697d&lt;\/h3&gt;\r\n&lt;table&gt;\r\n\t&lt;tr&gt;\r\n\t\t&lt;th&gt;ID&lt;\/th&gt;\r\n\t\t&lt;th&gt;\u30bf\u30a4\u30c8\u30eb&lt;\/th&gt;\r\n\t\t&lt;th&gt;\u30a2\u30fc\u30c6\u30a3\u30b9\u30c8&lt;\/th&gt;\r\n\t&lt;\/tr&gt;\r\n\t&lt;tr th:each=&quot;music : ${playlist.musics}&quot;&gt;\r\n\t\t&lt;td th:text=&quot;${music.id}&quot;&gt;&lt;\/td&gt;\r\n\t\t&lt;td th:text=&quot;${music.title}&quot;&gt;&lt;\/td&gt;\r\n\t\t&lt;td th:text=&quot;${music.artist}&quot;&gt;&lt;\/td&gt;\r\n\t&lt;\/tr&gt;\r\n&lt;\/table&gt;\r\n\r\n\r\n&lt;h3&gt;\u3053\u306e\u30d7\u30ec\u30a4\u30ea\u30b9\u30c8\u306b\u97f3\u697d\u3092\u8ffd\u52a0\u3059\u308b&lt;\/h3&gt;\r\n\r\n&lt;h3&gt;Music\u30ea\u30b9\u30c8&lt;\/h3&gt;\r\n&lt;table&gt;\r\n\t&lt;tr&gt;\r\n\t\t&lt;th&gt;ID&lt;\/th&gt;\r\n\t\t&lt;th&gt;\u30bf\u30a4\u30c8\u30eb&lt;\/th&gt;\r\n\t\t&lt;th&gt;\u30a2\u30fc\u30c6\u30a3\u30b9\u30c8&lt;\/th&gt;\r\n\t\t&lt;th&gt;\u64cd\u4f5c&lt;\/th&gt;\r\n\t&lt;\/tr&gt;\r\n\t&lt;tr th:each=&quot;music : ${musics}&quot;&gt;\r\n\t\t&lt;td th:text=&quot;${music.id}&quot;&gt;&lt;\/td&gt;\r\n\t\t&lt;td th:text=&quot;${music.title}&quot;&gt;&lt;\/td&gt;\r\n\t\t&lt;td th:text=&quot;${music.artist}&quot;&gt;&lt;\/td&gt;\r\n\t\t&lt;td&gt;&lt;a th:href=&quot;@{'\/addtoplaylist\/' + ${playlist.id} + '\/' + ${music.id}}&quot;&gt;\u8ffd\u52a0&lt;\/a&gt;&lt;\/td&gt;\r\n\t&lt;\/tr&gt;\r\n&lt;\/table&gt;\r\n\r\n\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>\u30d7\u30ec\u30a4\u30ea\u30b9\u30c8\u304b\u3089\u97f3\u697d\u3092\u524a\u9664\u3059\u308b\u305f\u3081\u306e\u30ea\u30f3\u30af\u3092\u8ffd\u52a0\u3059\u308b\u3002<\/p>\n<pre class=\"brush: xml; highlight: [17,23]; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html xmlns:th=&quot;http:\/\/www.thymeleaf.org&quot;&gt;\r\n&lt;head&gt;\r\n&lt;meta charset=&quot;UTF-8&quot;&gt;\r\n&lt;title&gt;\u30d7\u30ec\u30a4\u30ea\u30b9\u30c8&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;h1 th:text=&quot;${playlist.name}&quot;&gt;&lt;\/h1&gt;\r\n\r\n&lt;h3&gt;\u3053\u306e\u30d7\u30ec\u30a4\u30ea\u30b9\u30c8\u306b\u8ffd\u52a0\u3055\u308c\u3066\u3044\u308b\u97f3\u697d&lt;\/h3&gt;\r\n&lt;table&gt;\r\n\t&lt;tr&gt;\r\n\t\t&lt;th&gt;ID&lt;\/th&gt;\r\n\t\t&lt;th&gt;\u30bf\u30a4\u30c8\u30eb&lt;\/th&gt;\r\n\t\t&lt;th&gt;\u30a2\u30fc\u30c6\u30a3\u30b9\u30c8&lt;\/th&gt;\r\n\t\t&lt;th&gt;\u64cd\u4f5c&lt;\/th&gt;\r\n\t&lt;\/tr&gt;\r\n\t&lt;tr th:each=&quot;music : ${playlist.musics}&quot;&gt;\r\n\t\t&lt;td th:text=&quot;${music.id}&quot;&gt;&lt;\/td&gt;\r\n\t\t&lt;td th:text=&quot;${music.title}&quot;&gt;&lt;\/td&gt;\r\n\t\t&lt;td th:text=&quot;${music.artist}&quot;&gt;&lt;\/td&gt;\r\n\t\t&lt;td&gt;&lt;a th:href=&quot;@{'\/delete-music-from-playlist\/' + ${playlist.id} + '\/' + ${music.id}}&quot;&gt;\u524a\u9664&lt;\/a&gt;&lt;\/td&gt;\r\n\t&lt;\/tr&gt;\r\n&lt;\/table&gt;\r\n\r\n\r\n&lt;h3&gt;\u3053\u306e\u30d7\u30ec\u30a4\u30ea\u30b9\u30c8\u306b\u97f3\u697d\u3092\u8ffd\u52a0\u3059\u308b&lt;\/h3&gt;\r\n\r\n&lt;h3&gt;Music\u30ea\u30b9\u30c8&lt;\/h3&gt;\r\n&lt;table&gt;\r\n\t&lt;tr&gt;\r\n\t\t&lt;th&gt;ID&lt;\/th&gt;\r\n\t\t&lt;th&gt;\u30bf\u30a4\u30c8\u30eb&lt;\/th&gt;\r\n\t\t&lt;th&gt;\u30a2\u30fc\u30c6\u30a3\u30b9\u30c8&lt;\/th&gt;\r\n\t\t&lt;th&gt;\u64cd\u4f5c&lt;\/th&gt;\r\n\t&lt;\/tr&gt;\r\n\t&lt;tr th:each=&quot;music : ${musics}&quot;&gt;\r\n\t\t&lt;td th:text=&quot;${music.id}&quot;&gt;&lt;\/td&gt;\r\n\t\t&lt;td th:text=&quot;${music.title}&quot;&gt;&lt;\/td&gt;\r\n\t\t&lt;td th:text=&quot;${music.artist}&quot;&gt;&lt;\/td&gt;\r\n\t\t&lt;td&gt;&lt;a th:href=&quot;@{'\/addtoplaylist\/' + ${playlist.id} + '\/' + ${music.id}}&quot;&gt;\u8ffd\u52a0&lt;\/a&gt;&lt;\/td&gt;\r\n\t&lt;\/tr&gt;\r\n&lt;\/table&gt;\r\n\r\n\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>\u524a\u9664\u306e\u30ea\u30f3\u30af\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001Not Found \u306e\u30a8\u30e9\u30fc\u306b\u306a\u308b\u3002<br \/>\n\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u3067URL\u306b\u5bfe\u5fdc\u3057\u305f\u30de\u30c3\u30d4\u30f3\u30b0\u3092\u4f5c\u6210\u3059\u308b\u3002<\/p>\n<pre class=\"brush: java; first-line: 86; title: ; notranslate\" title=\"\">\r\n\t@RequestMapping(value=&quot;\/delete-music-from-playlist\/{pid}\/{mid}&quot;, method=RequestMethod.GET)\r\n\tpublic ModelAndView deleteFromPlaylist(ModelAndView mav,\r\n\t\t\t@PathVariable long pid,\r\n\t\t\t@PathVariable long mid) {\r\n\t\tOptional&lt;PlayList&gt; pr = playListRepository.findById(pid);\r\n\t\tPlayList pl = pr.get();\r\n\t\tOptional&lt;Music&gt; mr = musicRepository.findById(mid);\r\n\t\tMusic m = mr.get();\r\n\t\tpl.deleteMusic(m);\r\n\t\tplayListRepository.saveAndFlush(pl);\r\n\t\treturn new ModelAndView(&quot;redirect:\/playlist\/&quot; + pid);\r\n\t}\r\n<\/pre>\n<p>94\u884c\u76ee\u306edeleteMusic()\u3067\u30b3\u30f3\u30d1\u30a4\u30eb\u30a8\u30e9\u30fc\u304c\u51fa\u3066\u3044\u308b\u306e\u3067\u3001\u30af\u30a4\u30c3\u30af\u30d5\u30a3\u30c3\u30af\u30b9\u3067\u30e1\u30bd\u30c3\u30c9\u3092\u4f5c\u6210\u3059\u308b\u3002<\/p>\n<p>PlayList<\/p>\n<pre class=\"brush: java; highlight: [43,44,45]; title: ; notranslate\" title=\"\">\r\npackage jp.kpc;\r\n\r\nimport java.util.List;\r\n\r\nimport javax.persistence.Column;\r\nimport javax.persistence.Entity;\r\nimport javax.persistence.GeneratedValue;\r\nimport javax.persistence.Id;\r\nimport javax.persistence.OneToMany;\r\nimport javax.validation.constraints.NotEmpty;\r\nimport javax.validation.constraints.NotNull;\r\n\r\n@Entity\r\npublic class PlayList {\r\n\t@Id\r\n\t@GeneratedValue\r\n\t@Column\r\n\t@NotNull\r\n\tprivate long id;\r\n\r\n\t@Column\r\n\t@NotEmpty\r\n\tprivate String name;\r\n\r\n\t@OneToMany\r\n\tprivate List&lt;Music&gt; musics;\r\n\r\n\tpublic long getId() {\r\n\t\treturn id;\r\n\t}\r\n\tpublic void setId(long id) {\r\n\t\tthis.id = id;\r\n\t}\r\n\tpublic String getName() {\r\n\t\treturn name;\r\n\t}\r\n\tpublic void setName(String name) {\r\n\t\tthis.name = name;\r\n\t}\r\n\tpublic void addMusic(Music m) {\r\n\t\tmusics.add(m);\r\n\t}\r\n\tpublic void deleteMusic(Music m) {\r\n\t\tmusics.remove(m);\r\n\t}\r\n\tpublic List&lt;Music&gt; getMusics() {\r\n\t\treturn musics;\r\n\t}\r\n\tpublic void setMusics(List&lt;Music&gt; musics) {\r\n\t\tthis.musics = musics;\r\n\t}\r\n}\r\n<\/pre>\n<h3>\u30d7\u30ec\u30a4\u30ea\u30b9\u30c8\u306e\u540d\u524d\u3092\u5909\u66f4\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b<\/h3>\n<p>playlist.html \u306b\u5165\u529b\u30d5\u30a9\u30fc\u30e0\u3092\u8ffd\u52a0\u3059\u308b\u3002<\/p>\n<pre class=\"brush: xml; first-line: 48; title: ; notranslate\" title=\"\">\r\n&lt;h3&gt;\u30d7\u30ec\u30a4\u30ea\u30b9\u30c8\u306e\u540d\u524d\u3092\u5909\u66f4\u3059\u308b&lt;\/h3&gt;\r\n&lt;form action=&quot;\/rename&quot; method=&quot;post&quot;&gt;\r\n\t&lt;input type=&quot;hidden&quot; name=&quot;id&quot; th:value=&quot;${playlist.id}&quot; \/&gt;\r\n\t&lt;input type=&quot;text&quot; name=&quot;name&quot; \/&gt;\r\n\t&lt;input type=&quot;submit&quot; value=&quot;\u5909\u66f4&quot; \/&gt;\r\n&lt;\/form&gt;\r\n\r\n<\/pre>\n<p>\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u306b\u3001\u540d\u524d\u3092\u5909\u66f4\u3059\u308b\u305f\u3081\u306e\u30de\u30c3\u30d4\u30f3\u30b0\u3092\u4f5c\u6210\u3059\u308b\u3002<\/p>\n<pre class=\"brush: java; first-line: 73; title: ; notranslate\" title=\"\">\r\n\t@RequestMapping(value=&quot;\/rename&quot;, method=RequestMethod.POST)\r\n\tpublic ModelAndView rename(ModelAndView mav,\r\n\t\t\t@RequestParam(&quot;id&quot;) long id,\r\n\t\t\t@RequestParam(&quot;name&quot;) String name) {\r\n\t\tOptional&lt;PlayList&gt; r = playListRepository.findById(id);\r\n\t\tPlayList pl = r.get();\r\n\t\tpl.setName(name);\r\n\t\tplayListRepository.saveAndFlush(pl);\r\n\t\treturn new ModelAndView(&quot;redirect:\/playlist\/&quot; + id);\r\n\t}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u500b\u5225\u306e\u30d7\u30ec\u30a4\u30ea\u30b9\u30c8\u306e\u753b\u9762\u3092\u8868\u793a\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u3002 \u307e\u305a\u3001\u30d7\u30ec\u30a4\u30ea\u30b9\u30c8\u306e\u4e00\u89a7\u3092\u30c6\u30fc\u30d6\u30eb\u3067\u8868\u793a\u3057\u3066\u3044\u308b\u3068\u3053\u308d\u306e\u3001\u30d7\u30ec\u30a4\u30ea\u30b9\u30c8\u540d\u3092\u30ea\u30f3\u30af\u306b\u5909\u66f4\u3059\u308b\u3002 &lt;h3&gt;\u30d7\u30ec\u30a4\u30ea\u30b9\u30c8&lt;\/h3&gt;  &#8230; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-46","post","type-post","status-publish","format-standard","hentry","category-springboot"],"views":306,"_links":{"self":[{"href":"https:\/\/kpc2021.satoshis.jp\/index.php?rest_route=\/wp\/v2\/posts\/46","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kpc2021.satoshis.jp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kpc2021.satoshis.jp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kpc2021.satoshis.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kpc2021.satoshis.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=46"}],"version-history":[{"count":18,"href":"https:\/\/kpc2021.satoshis.jp\/index.php?rest_route=\/wp\/v2\/posts\/46\/revisions"}],"predecessor-version":[{"id":64,"href":"https:\/\/kpc2021.satoshis.jp\/index.php?rest_route=\/wp\/v2\/posts\/46\/revisions\/64"}],"wp:attachment":[{"href":"https:\/\/kpc2021.satoshis.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=46"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kpc2021.satoshis.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=46"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kpc2021.satoshis.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=46"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}