{"id":8013,"date":"2025-10-03T18:09:34","date_gmt":"2025-10-03T18:09:34","guid":{"rendered":"https:\/\/pokecon.jp\/job\/?p=8013"},"modified":"2025-10-03T18:09:34","modified_gmt":"2025-10-03T18:09:34","slug":"%e3%80%90%e5%88%9d%e5%bf%83%e8%80%85%e6%ad%93%e8%bf%8e%e3%80%91c%e3%81%a0%e3%81%91%e3%81%a7web%e3%82%b2%e3%83%bc%e3%83%a0%e3%82%921%e6%99%82%e9%96%93%e3%81%a7%e4%bd%9c%e3%82%8b-javascript%e3%82%84aja","status":"publish","type":"post","link":"https:\/\/pokecon.jp\/job\/8013\/","title":{"rendered":"\u3010\u521d\u5fc3\u8005\u6b53\u8fce\u3011C#\u3060\u3051\u3067Web\u30b2\u30fc\u30e0\u30921\u6642\u9593\u3067\u4f5c\u308b javascript\u3084AJAX\u4e0d\u8981\uff01Blazor\u306e\u51c4\u3055\u3092\u4f53\u9a13\u3059\u308b #\u30b2\u30fc\u30e0\u5236\u4f5c &#8211; Qiita"},"content":{"rendered":"\n<\/p>\n<div>\n<h2 data-sourcepos=\"1:1-1:15\">\n<span id=\"\u306f\u3058\u3081\u306b\" class=\"fragment\"\/><a target=\"_blank\" href=\"#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB\"><i class=\"fa fa-link\"\/><\/a>\u306f\u3058\u3081\u306b<\/h2>\n<div data-sourcepos=\"3:1-6:3\" class=\"note info\">\n<span class=\"fa fa-fw fa-check-circle\"\/><\/p>\n<div>\n<p data-sourcepos=\"4:1-4:92\">\u3053\u306e\u8a18\u4e8b\u3067\u306f <strong>\u300c\u305f\u3063\u305f1\u6642\u9593\u300d<\/strong> \u3067 Web\u30b2\u30fc\u30e0\u4f5c\u308a\u3092\u4f53\u9a13\u3067\u304d\u307e\u3059\u3002<\/p>\n<\/div>\n<\/div>\n<h4 data-sourcepos=\"8:1-8:33\">\n<span id=\"\u3053\u3093\u306a\u65b9\u3078\u304a\u52e7\u3081\" class=\"fragment\"\/><a target=\"_blank\" href=\"#%E3%81%93%E3%82%93%E3%81%AA%E6%96%B9%E3%81%B8%E3%81%8A%E5%8B%A7%E3%82%81\"><i class=\"fa fa-link\"\/><\/a>\ud83c\udfaf\u3053\u3093\u306a\u65b9\u3078\u304a\u52e7\u3081<\/h4>\n<ul data-sourcepos=\"9:1-12:0\">\n<li data-sourcepos=\"9:1-9:81\">\u666e\u6bb5\u306fC#\u3092\u66f8\u3044\u3066\u3044\u308b\u3051\u3069 <strong>Web\u30d5\u30ed\u30f3\u30c8\u306f\u3061\u3087\u3063\u3068\u82e6\u624b\u2026<\/strong>\n<\/li>\n<li data-sourcepos=\"10:1-10:85\">Web\u30a2\u30d7\u30ea\u3092\u4f5c\u3063\u305f\u3053\u3068\u306f\u3042\u308b\u3051\u3069 <strong>Blazor\u306f\u89e6\u3063\u305f\u3053\u3068\u304c\u306a\u3044<\/strong>\n<\/li>\n<li data-sourcepos=\"11:1-12:0\">\n<strong>JavaScript\u3084AJAX\u3092\u6700\u5c0f\u9650\u306b<\/strong> \u3068\u601d\u3063\u3066\u3044\u308b<\/li>\n<\/ul>\n<p data-sourcepos=\"13:1-14:31\">HTML\u3084CSS\u306f\u6700\u4f4e\u9650\u3060\u3051\u89e6\u308c\u307e\u3059\u304c\u3001\u6df1\u3044\u77e5\u8b58\u306f\u4e0d\u8981\u3067\u3059\u3002<br \/><strong>C#\u304c\u66f8\u3051\u308c\u3070OK\uff01<\/strong> \ud83d\udc4d<\/p>\n<p data-sourcepos=\"18:1-19:81\">\ud83d\udd37 \u3061\u306a\u307f\u306b Blazor \u306f Microsoft \u304c\u958b\u767a\u3059\u308b\u6700\u65b0\u306e Web \u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3059\u3002<br \/>\u300c\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9C#\u300d\u3060\u3051\u3067\u30ea\u30c3\u30c1\u306aWeb UI\u3092\u69cb\u7bc9\u3067\u304d\u307e\u3059\u3002<\/p>\n<p data-sourcepos=\"21:1-21:62\"><iframe id=\"qiita-embed-content__f48d3915e12fae12f6854a5073b38fd6\" src=\"https:\/\/qiita.com\/embed-contents\/link-card#qiita-embed-content__f48d3915e12fae12f6854a5073b38fd6\" data-content=\"https%3A%2F%2Fdotnet.microsoft.com%2Fja-jp%2Fapps%2Faspnet%2Fweb-apps%2Fblazor\" frameborder=\"0\" scrolling=\"no\" loading=\"lazy\" style=\"width:100%;\" height=\"29\"><br \/>\n<\/iframe>\n<\/p>\n<h2 data-sourcepos=\"24:1-24:45\">\n<span id=\"\u3053\u308c\u304b\u3089\u4f5c\u308b\u30b2\u30fc\u30e0\u306e\u30a4\u30e1\u30fc\u30b8\" class=\"fragment\"\/><a target=\"_blank\" href=\"#%E3%81%93%E3%82%8C%E3%81%8B%E3%82%89%E4%BD%9C%E3%82%8B%E3%82%B2%E3%83%BC%E3%83%A0%E3%81%AE%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8\"><i class=\"fa fa-link\"\/><\/a>\u3053\u308c\u304b\u3089\u4f5c\u308b\u30b2\u30fc\u30e0\u306e\u30a4\u30e1\u30fc\u30b8<\/h2>\n<p data-sourcepos=\"26:1-27:1\"><a target=\"_blank\" href=\"https:\/\/sheltereddaughter-hpcyhjfmhqe7erfa.japanwest-01.azurewebsites.net\/\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F737c4304-edd5-48a3-9820-db1dc87a5a1e.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=beebef0702691b2207338be56ba0c5dd\" alt=\"image.png\" srcset=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F737c4304-edd5-48a3-9820-db1dc87a5a1e.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=a80e8fe3ab19fc16dd6b3f62c3aabdb6 1x\" data-canonical-src=\"https:\/\/qiita-image-store.s3.ap-northeast-1.amazonaws.com\/0\/546646\/737c4304-edd5-48a3-9820-db1dc87a5a1e.png\" loading=\"lazy\"\/><\/a><\/p>\n<div data-sourcepos=\"30:1-33:3\" class=\"note info\">\n<span class=\"fa fa-fw fa-check-circle\"\/><\/p>\n<div>\n<p data-sourcepos=\"31:1-32:53\">\u5b9f\u969b\u306b\u904a\u3093\u3067\u307f\u308b\u306e\u304c\u4e00\u756a\u308f\u304b\u308a\u3084\u3059\u3044\u3067\u3059\u3002<br \/>\u662f\u975e\u3054\u81ea\u5206\u3067\u64cd\u4f5c\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\uff01<\/p>\n<\/div>\n<\/div>\n<p data-sourcepos=\"35:1-37:8\">\ud83d\udc49 <a target=\"_blank\" href=\"https:\/\/sheltereddaughter-hpcyhjfmhqe7erfa.japanwest-01.azurewebsites.net\/\" rel=\"nofollow noopener\" target=\"_blank\">\u30af\u30ea\u30c3\u30af\u3057\u3066\u30c7\u30e2\u30a2\u30d7\u30ea\u3092\u30d7\u30ec\u30a4<\/a><\/p>\n<h2 data-sourcepos=\"40:1-40:67\">\n<span id=\"\uff11visual-studio\u3067\u65b0\u3057\u3044\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3059\u308b\" class=\"fragment\"\/><a target=\"_blank\" href=\"#%EF%BC%91visual-studio%E3%81%A7%E6%96%B0%E3%81%97%E3%81%84%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B\"><i class=\"fa fa-link\"\/><\/a>\uff11\uff0eVisual Studio\u3067\u65b0\u3057\u3044\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3059\u308b<\/h2>\n<p data-sourcepos=\"41:1-41:121\"><a target=\"_blank\" href=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F86aaf52e-e7a2-4841-935e-508e8d5e0e74.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=3dcffcc73b427deeda22f47eda012f20\" target=\"_blank\" rel=\"nofollow noopener\"><img decoding=\"async\" src=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F86aaf52e-e7a2-4841-935e-508e8d5e0e74.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=3dcffcc73b427deeda22f47eda012f20\" alt=\"image.png\" srcset=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F86aaf52e-e7a2-4841-935e-508e8d5e0e74.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=5df88d8e45baf89213123083bdd0e07a 1x\" data-canonical-src=\"https:\/\/qiita-image-store.s3.ap-northeast-1.amazonaws.com\/0\/546646\/86aaf52e-e7a2-4841-935e-508e8d5e0e74.png\" loading=\"lazy\"\/><\/a><\/p>\n<p data-sourcepos=\"43:1-44:121\">Blazor Web \u30a2\u30d7\u30ea\u3092\u9078\u629e<br \/><a target=\"_blank\" href=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F9ad5bf97-1eb7-45be-9279-908b1c782710.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=ae7e0a9b82fcc79d63493c649b3560d2\" target=\"_blank\" rel=\"nofollow noopener\"><img decoding=\"async\" src=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F9ad5bf97-1eb7-45be-9279-908b1c782710.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=ae7e0a9b82fcc79d63493c649b3560d2\" alt=\"image.png\" srcset=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F9ad5bf97-1eb7-45be-9279-908b1c782710.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=de45b152df4ed08116c564d5e4a4c1cd 1x\" data-canonical-src=\"https:\/\/qiita-image-store.s3.ap-northeast-1.amazonaws.com\/0\/546646\/9ad5bf97-1eb7-45be-9279-908b1c782710.png\" loading=\"lazy\"\/><\/a><\/p>\n<p data-sourcepos=\"46:1-47:121\">\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u540d\u3092\u5165\u529b\u3057\u307e\u3059\uff08 \u3053\u3053\u3067\u306f HakoiriMusume \u3068\u3057\u307e\u3059 \uff09<br \/><a target=\"_blank\" href=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F559ea6a2-db3d-4c35-918e-bcdacbd90111.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=d1502d8be30d1c0918da208a75036e5b\" target=\"_blank\" rel=\"nofollow noopener\"><img decoding=\"async\" src=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F559ea6a2-db3d-4c35-918e-bcdacbd90111.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=d1502d8be30d1c0918da208a75036e5b\" alt=\"image.png\" srcset=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F559ea6a2-db3d-4c35-918e-bcdacbd90111.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=94682d9b1b167e535b6d4d466457ad63 1x\" data-canonical-src=\"https:\/\/qiita-image-store.s3.ap-northeast-1.amazonaws.com\/0\/546646\/559ea6a2-db3d-4c35-918e-bcdacbd90111.png\" loading=\"lazy\"\/><\/a><\/p>\n<p data-sourcepos=\"49:1-50:121\">\u8ffd\u52a0\u60c5\u5831\u3092\u78ba\u8a8d\u3057\u307e\u3059\uff08\u9752\u67a0\u5185\u306f\u540c\u3058\u306b\u3057\u3066\u4e0b\u3055\u3044\uff09<br \/><a target=\"_blank\" href=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F928ac7b5-9263-4030-bcdb-2fe1d6a7439c.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=8dd1f0a9f8b4fd8ea94c2e0148d10349\" target=\"_blank\" rel=\"nofollow noopener\"><img decoding=\"async\" src=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F928ac7b5-9263-4030-bcdb-2fe1d6a7439c.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=8dd1f0a9f8b4fd8ea94c2e0148d10349\" alt=\"image.png\" srcset=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F928ac7b5-9263-4030-bcdb-2fe1d6a7439c.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=59f7f10e1023df3e1b686a23173a3b70 1x\" data-canonical-src=\"https:\/\/qiita-image-store.s3.ap-northeast-1.amazonaws.com\/0\/546646\/928ac7b5-9263-4030-bcdb-2fe1d6a7439c.png\" loading=\"lazy\"\/><\/a><\/p>\n<div class=\"s_table\"><table data-sourcepos=\"52:1-56:59\">\n<thead>\n<tr data-sourcepos=\"52:1-52:40\">\n<th data-sourcepos=\"52:2-52:18\">\u91cd\u8981\u306a\u8a2d\u5b9a<\/th>\n<th data-sourcepos=\"52:20-52:30\">\u8a2d\u5b9a\u5024<\/th>\n<th data-sourcepos=\"52:32-52:39\">\u5099\u8003<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr data-sourcepos=\"54:1-54:58\">\n<td data-sourcepos=\"54:2-54:18\">\u8a8d\u8a3c\u306e\u7a2e\u985e<\/td>\n<td data-sourcepos=\"54:20-54:27\">\u306a\u3057<\/td>\n<td data-sourcepos=\"54:29-54:57\">\u4eca\u56de\u306f\u30ed\u30b0\u30a4\u30f3\u4e0d\u8981<\/td>\n<\/tr>\n<tr data-sourcepos=\"55:1-55:80\">\n<td data-sourcepos=\"55:2-55:36\">\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d3\u30c6\u30a3\u578b<\/td>\n<td data-sourcepos=\"55:38-55:48\">\u30b5\u30fc\u30d0<\/td>\n<td data-sourcepos=\"55:50-55:79\">\u2605 \u3081\u3061\u3083\u304f\u3061\u3083\u91cd\u8981<\/td>\n<\/tr>\n<tr data-sourcepos=\"56:1-56:59\">\n<td data-sourcepos=\"56:2-56:39\">\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d3\u30c6\u30a3\u5834\u6240<\/td>\n<td data-sourcepos=\"56:41-56:56\">\u30b0\u30ed\u30fc\u30d0\u30eb<\/td>\n<td data-sourcepos=\"56:58-56:58\"\/>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n<p data-sourcepos=\"58:1-59:121\">\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u304c\u751f\u6210\u3055\u308c\u307e\u3057\u305f<br \/><a target=\"_blank\" href=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2Fefe3d8c8-eeb9-4bd1-b067-a3cc752ca24d.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=22e8ac9a9baec4d12d5594301227e8e9\" target=\"_blank\" rel=\"nofollow noopener\"><img decoding=\"async\" src=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2Fefe3d8c8-eeb9-4bd1-b067-a3cc752ca24d.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=22e8ac9a9baec4d12d5594301227e8e9\" alt=\"image.png\" srcset=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2Fefe3d8c8-eeb9-4bd1-b067-a3cc752ca24d.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=ba7278c9334675835d9cb897dc5deb4d 1x\" data-canonical-src=\"https:\/\/qiita-image-store.s3.ap-northeast-1.amazonaws.com\/0\/546646\/efe3d8c8-eeb9-4bd1-b067-a3cc752ca24d.png\" loading=\"lazy\"\/><\/a><\/p>\n<p data-sourcepos=\"61:1-62:121\">\u30c7\u30d0\u30c3\u30b0\u3092\u958b\u59cb\u3057\u3066\u52d5\u4f5c\u78ba\u8a8d\u3057\u307e\u3059<br \/><a target=\"_blank\" href=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F996fb784-e23d-4429-8958-2ab435fa9acc.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=61eb723dfc4709685f50311b68819618\" target=\"_blank\" rel=\"nofollow noopener\"><img decoding=\"async\" src=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F996fb784-e23d-4429-8958-2ab435fa9acc.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=61eb723dfc4709685f50311b68819618\" alt=\"image.png\" srcset=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F996fb784-e23d-4429-8958-2ab435fa9acc.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=8a4eb0269972fca08b31eee29ea1b18e 1x\" data-canonical-src=\"https:\/\/qiita-image-store.s3.ap-northeast-1.amazonaws.com\/0\/546646\/996fb784-e23d-4429-8958-2ab435fa9acc.png\" loading=\"lazy\"\/><\/a><\/p>\n<p data-sourcepos=\"64:1-65:121\">\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u30da\u30fc\u30b8\u304c\u8868\u793a\u3055\u308b\u3053\u3068\u3092\u78ba\u8a8d<br \/><a target=\"_blank\" href=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F29b85e99-55a7-40d4-a2a6-009e4e5fd7ca.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=1fb2ff4a1798fcf9da194d7aa6b17e9d\" target=\"_blank\" rel=\"nofollow noopener\"><img decoding=\"async\" src=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F29b85e99-55a7-40d4-a2a6-009e4e5fd7ca.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=1fb2ff4a1798fcf9da194d7aa6b17e9d\" alt=\"image.png\" srcset=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F29b85e99-55a7-40d4-a2a6-009e4e5fd7ca.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=6424837ae736c3a896dcdd0f34891ab9 1x\" data-canonical-src=\"https:\/\/qiita-image-store.s3.ap-northeast-1.amazonaws.com\/0\/546646\/29b85e99-55a7-40d4-a2a6-009e4e5fd7ca.png\" loading=\"lazy\"\/><\/a><\/p>\n<h2 data-sourcepos=\"68:1-68:45\">\n<span id=\"\uff12\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u69cb\u6210\u3092\u77e5\u308b\" class=\"fragment\"\/><a target=\"_blank\" href=\"#%EF%BC%92%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E6%A7%8B%E6%88%90%E3%82%92%E7%9F%A5%E3%82%8B\"><i class=\"fa fa-link\"\/><\/a>\uff12\uff0e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u69cb\u6210\u3092\u77e5\u308b<\/h2>\n<p data-sourcepos=\"70:1-70:121\"><a target=\"_blank\" href=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2Ff00bf024-e50c-4a59-a623-7800a851a30e.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=3dc06b5cdad1eb993e68843665db49e1\" target=\"_blank\" rel=\"nofollow noopener\"><img decoding=\"async\" src=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2Ff00bf024-e50c-4a59-a623-7800a851a30e.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=3dc06b5cdad1eb993e68843665db49e1\" alt=\"image.png\" srcset=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2Ff00bf024-e50c-4a59-a623-7800a851a30e.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=a54ba9248ccf0e8d97431262739634de 1x\" data-canonical-src=\"https:\/\/qiita-image-store.s3.ap-northeast-1.amazonaws.com\/0\/546646\/f00bf024-e50c-4a59-a623-7800a851a30e.png\" loading=\"lazy\"\/><\/a><\/p>\n<h3 data-sourcepos=\"72:1-72:40\">\n<span id=\"\u6a19\u6e96\u7684\u306a\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u69cb\u6210\" class=\"fragment\"\/><a target=\"_blank\" href=\"#%E6%A8%99%E6%BA%96%E7%9A%84%E3%81%AA%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%A7%8B%E6%88%90\"><i class=\"fa fa-link\"\/><\/a>\u6a19\u6e96\u7684\u306a\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u69cb\u6210<\/h3>\n<div class=\"s_table\"><table data-sourcepos=\"74:1-77:38\">\n<thead>\n<tr data-sourcepos=\"74:1-74:31\">\n<th data-sourcepos=\"74:2-74:21\">\u30c7\u30a3\u30ec\u30af\u30c8\u30ea<\/th>\n<th data-sourcepos=\"74:23-74:30\">\u5185\u5bb9<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr data-sourcepos=\"76:1-76:24\">\n<td data-sourcepos=\"76:2-76:10\">wwwroot<\/td>\n<td data-sourcepos=\"76:12-76:22\">css\u306a\u3069<\/td>\n<\/tr>\n<tr data-sourcepos=\"77:1-77:38\">\n<td data-sourcepos=\"77:2-77:19\">Components\/Pages<\/td>\n<td data-sourcepos=\"77:21-77:37\">\u5404Web\u30da\u30fc\u30b8<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n<div data-sourcepos=\"79:1-82:3\" class=\"note info\">\n<span class=\"fa fa-fw fa-check-circle\"\/><\/p>\n<div>\n<p data-sourcepos=\"80:1-81:48\">\u6ca2\u5c71\u306e\u30d5\u30a9\u30eb\u30c0\u3084\u30d5\u30a1\u30a4\u30eb\u304c\u3042\u308a\u307e\u3059\u304c\u3001\u3053\u308c\u304b\u3089\u89e6\u308b\u306e\u306f<br \/>\u300cComponents\/Pages\/Home.razor\u300d\u306e\u307f\u3067\u3059\u3002<\/p>\n<\/div>\n<\/div>\n<h3 data-sourcepos=\"84:1-84:14\">\n<span id=\"homerazor\" class=\"fragment\"\/><a target=\"_blank\" href=\"#homerazor\"><i class=\"fa fa-link\"\/><\/a>Home.razor<\/h3>\n<p data-sourcepos=\"85:1-85:72\">\u6700\u521d\u306b\u5b9f\u884c\u3057\u305f\u3068\u304d\u306b\u8868\u793a\u3055\u308c\u305f\u30da\u30fc\u30b8\u306e\u30bd\u30fc\u30b9\u3067\u3059<\/p>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"86:1-91:3\">\n<div class=\"highlight\">\n<pre><code><span class=\"o\">@<\/span><span class=\"n\">page<\/span> <span class=\"s2\">\"https:\/\/qiita.com\/\"<\/span>\n<span class=\"o\"><span class=\"nc\">PageTitle<\/span><span class=\"o\">&gt;<\/span><span class=\"nc\">Home<\/span><span class=\"o\"\/><span class=\"nc\">PageTitle<\/span><span class=\"o\">&gt;<\/span>\n<span class=\"o\"><span class=\"n\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nc\">Hello<\/span><span class=\"p\">,<\/span> <span class=\"n\">world<\/span><span class=\"o\">!<\/span><span class=\"n\">h1<\/span><span class=\"o\">&gt;<\/span>\n<span class=\"nc\">Welcome<\/span> <span class=\"n\">to<\/span> <span class=\"n\">your<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">app<\/span><span class=\"mf\">.<\/span>\n<\/span><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<h2 data-sourcepos=\"93:1-93:42\">\n<span id=\"\uff13html\u306e\u4e2d\u306bc\u304c\u66f8\u3051\u308bblazor\" class=\"fragment\"\/><a target=\"_blank\" href=\"#%EF%BC%93html%E3%81%AE%E4%B8%AD%E3%81%ABc%E3%81%8C%E6%9B%B8%E3%81%91%E3%82%8Bblazor\"><i class=\"fa fa-link\"\/><\/a>\uff13\uff0eHTML\u306e\u4e2d\u306bC#\u304c\u66f8\u3051\u308bBlazor<\/h2>\n<p data-sourcepos=\"95:1-95:28\">Home.razor\u3092\u4fee\u6b63\u3057\u307e\u3059<\/p>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"96:1-102:3\">\n<div class=\"highlight\">\n<pre><code><span class=\"o\">@<\/span><span class=\"n\">page<\/span> <span class=\"s2\">\"https:\/\/qiita.com\/\"<\/span>\n<span class=\"o\">@<\/span><span class=\"k\">for<\/span> <span class=\"p\">(<\/span><span class=\"n\">int<\/span> <span class=\"n\">i<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span> <span class=\"n\">i<\/span> <span class=\"o\"> <span class=\"mi\">4<\/span><span class=\"p\">;<\/span> <span class=\"n\">i<\/span><span class=\"o\">++<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">{<\/span>\n    <span class=\"o\"><span class=\"n\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"n\">\u30eb\u30fc\u30d7\u306e<\/span> <span class=\"o\">@<\/span><span class=\"n\">i<\/span> <span class=\"n\">\u56de\u76ee<\/span><span class=\"o\"\/><span class=\"n\">p<\/span><span class=\"o\">&gt;<\/span>\n<span class=\"p\">}<\/span>\n<\/span><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<p data-sourcepos=\"103:1-103:13\">html\u306e\u4e2d\u306b<\/p>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"104:1-106:3\">\n<div class=\"highlight\">\n<pre><code><span class=\"o\">@<\/span><span class=\"k\">for<\/span> <span class=\"p\">(<\/span><span class=\"n\">int<\/span> <span class=\"n\">i<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span> <span class=\"n\">i<\/span> <span class=\"o\"> <span class=\"mi\">4<\/span><span class=\"p\">;<\/span> <span class=\"n\">i<\/span><span class=\"o\">++<\/span><span class=\"p\">)<\/span>\n<\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<p data-sourcepos=\"107:1-109:50\">\u3068\u3001\u7a81\u7136C#\u306e\u30b3\u30fc\u30c9\u304c\u51fa\u3066\u304d\u307e\u3057\u305f\u3002<br \/>\u203b HTML\u306e\u4e2d\u306b\u300c@\u300d\u3067C#\u3092\u81ea\u7531\u306b\u8a18\u8ff0\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<br \/>\uff08GO\u8a00\u8a9e\u3084JSP\u3001PHP\u306a\u3069\u3068\u540c\u3058\u3067\u3059\u306d\uff09<\/p>\n<p data-sourcepos=\"111:1-111:102\">\ud83d\udd37 html\u306e<code\/>\u30bf\u30b0\u306e\u4e2d\u306e <code>@i<\/code> \u3067C#\u306e\u5909\u6570\u3092\u5229\u7528\u3057\u3066\u3044\u308b\u306e\u3082\u6ce8\u76ee\u3067\u3059\u3002<\/p>\n<blockquote data-sourcepos=\"112:1-112:36\">\n<p data-sourcepos=\"112:3-112:36\"><code> <\/p>\n<p>\u30eb\u30fc\u30d7\u306e @i \u56de\u76ee<\/p>\n<p><\/code><\/p>\n<\/blockquote>\n<p data-sourcepos=\"114:1-115:121\">\u5b9f\u884c\u3057\u307e\u3059<br \/><a target=\"_blank\" href=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2Fe8eaaf70-5426-4960-a7a3-3d18cbb16ba1.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=35f9060851b24e8835eecbe8b7fb3eb0\" target=\"_blank\" rel=\"nofollow noopener\"><img decoding=\"async\" src=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2Fe8eaaf70-5426-4960-a7a3-3d18cbb16ba1.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=35f9060851b24e8835eecbe8b7fb3eb0\" alt=\"image.png\" srcset=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2Fe8eaaf70-5426-4960-a7a3-3d18cbb16ba1.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=15941713c3dba63be1dbe5ba960160dc 1x\" data-canonical-src=\"https:\/\/qiita-image-store.s3.ap-northeast-1.amazonaws.com\/0\/546646\/e8eaaf70-5426-4960-a7a3-3d18cbb16ba1.png\" loading=\"lazy\"\/><\/a><\/p>\n<h2 data-sourcepos=\"118:1-118:36\">\n<span id=\"\uff14\u30b2\u30fc\u30e0\u306e\u76e4\u9762\u3092\u4f5c\u308b\" class=\"fragment\"\/><a target=\"_blank\" href=\"#%EF%BC%94%E3%82%B2%E3%83%BC%E3%83%A0%E3%81%AE%E7%9B%A4%E9%9D%A2%E3%82%92%E4%BD%9C%E3%82%8B\"><i class=\"fa fa-link\"\/><\/a>\uff14\uff0e\u30b2\u30fc\u30e0\u306e\u76e4\u9762\u3092\u4f5c\u308b<\/h2>\n<p data-sourcepos=\"120:1-120:45\">\u307e\u305a\u306f\u99d2\u306e\u80cc\u666f\u306e\u76e4\u9762\u3092\u4f5c\u308a\u307e\u3059<\/p>\n<blockquote data-sourcepos=\"122:1-124:103\">\n<p data-sourcepos=\"122:3-124:103\"><code\/>\u3067\u30b2\u30fc\u30e0\u76e4\u306e\u898b\u305f\u76ee\u3092\u5b9a\u7fa9\u3057\u3066\u307e\u3059\u3002<br \/>\uff08\u4e00\u822c\u7684\u306b\u306fCSS\u30d5\u30a1\u30a4\u30eb\u3078\u5206\u96e2\u3057\u307e\u3059\u304c\u3053\u3053\u3067\u306f\u898b\u3084\u3059\u3055\u3092\u512a\u5148\u3057\u307e\u3059\u3002\uff09<br \/>HTML\u306f\u300c\u4f55\u3092\u8868\u793a\u3059\u308b\u304b\u300d\u3001<code\/>\u304c\u300c\u88c5\u98fe\u300d\u3092\u62c5\u5f53\u3059\u308b\u30a4\u30e1\u30fc\u30b8\u3067\u3059\u3002<\/p>\n<\/blockquote>\n<div data-sourcepos=\"126:1-129:3\" class=\"note info\">\n<span class=\"fa fa-fw fa-check-circle\"\/><\/p>\n<div>\n<p data-sourcepos=\"127:1-128:63\">CSS\uff08<code\/>\uff09\u306e\u8a73\u3057\u3044\u77e5\u8b58\u306f\u306a\u304f\u3066\u3082\u5927\u4e08\u592b\uff01<br \/>\u898b\u305f\u76ee\u3092\u88c5\u98fe\u3057\u3066\u3044\u308b\u3093\u3060\u3068\u601d\u3063\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<\/div>\n<\/div>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"131:1-158:3\">\n<div class=\"highlight\">\n<pre><code><span class=\"o\">@<\/span><span class=\"n\">page<\/span> <span class=\"s2\">\"https:\/\/qiita.com\/\"<\/span>\n\n<span class=\"o\"><span class=\"n\">style<\/span><span class=\"o\">&gt;<\/span>\n    <span class=\"mf\">.<\/span><span class=\"n\">board<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">display<\/span><span class=\"o\">:<\/span> <span class=\"n\">grid<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">grid<\/span><span class=\"o\">-<\/span><span class=\"n\">template<\/span><span class=\"o\">-<\/span><span class=\"n\">rows<\/span><span class=\"o\">:<\/span> <span class=\"nf\">repeat<\/span><span class=\"p\">(<\/span><span class=\"mi\">7<\/span><span class=\"p\">,<\/span> <span class=\"mi\">50<\/span><span class=\"n\">px<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">grid<\/span><span class=\"o\">-<\/span><span class=\"n\">template<\/span><span class=\"o\">-<\/span><span class=\"n\">columns<\/span><span class=\"o\">:<\/span> <span class=\"nf\">repeat<\/span><span class=\"p\">(<\/span><span class=\"mi\">8<\/span><span class=\"p\">,<\/span> <span class=\"mi\">50<\/span><span class=\"n\">px<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">position<\/span><span class=\"o\">:<\/span> <span class=\"n\">relative<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"o\"\/><span class=\"n\">style<\/span><span class=\"o\">&gt;<\/span>\n\n<span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"board\"<\/span><span class=\"o\">&gt;<\/span>\n    <span class=\"o\">@<\/span><span class=\"k\">for<\/span> <span class=\"p\">(<\/span><span class=\"n\">int<\/span> <span class=\"n\">row<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span> <span class=\"n\">row<\/span> <span class=\"o\"> <span class=\"mi\">7<\/span><span class=\"p\">;<\/span> <span class=\"n\">row<\/span><span class=\"o\">++<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"k\">for<\/span> <span class=\"p\">(<\/span><span class=\"n\">int<\/span> <span class=\"n\">col<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span> <span class=\"n\">col<\/span> <span class=\"o\"> <span class=\"mi\">8<\/span><span class=\"p\">;<\/span> <span class=\"n\">col<\/span><span class=\"o\">++<\/span><span class=\"p\">)<\/span>\n        <span class=\"p\">{<\/span>\n            <span class=\"c1\">\/\/ CSS\u306e\u30b0\u30ea\u30c3\u30c9\u306f1\u30aa\u30ea\u30b8\u30f3<\/span>\n            <span class=\"k\">var<\/span> <span class=\"n\">cssRow<\/span> <span class=\"o\">=<\/span> <span class=\"n\">row<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\n            <span class=\"k\">var<\/span> <span class=\"n\">cssCol<\/span> <span class=\"o\">=<\/span> <span class=\"n\">col<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\n\n            <span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"cell\"<\/span> <span class=\"n\">style<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"grid-area:@(cssRow) \/ @(cssCol);\"<\/span><span class=\"o\">&gt;<\/span>\n                <span class=\"err\">\u25a1<\/span>\n            <span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n<\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<p data-sourcepos=\"160:1-161:121\">\u307e\u305a\u306f\uff17\u884c\u00d7\uff18\u5217\u306e\u7c21\u7d20\u306a\u76e4\u9762\u304c\u3067\u304d\u307e\u3057\u305f<br \/><a target=\"_blank\" href=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F551742e1-1e94-41e2-956d-d752351bb449.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=03f3a3533297a0b34214f15b798c6023\" target=\"_blank\" rel=\"nofollow noopener\"><img decoding=\"async\" src=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F551742e1-1e94-41e2-956d-d752351bb449.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=03f3a3533297a0b34214f15b798c6023\" alt=\"image.png\" srcset=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F551742e1-1e94-41e2-956d-d752351bb449.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=05dafc48f33f5fd531924dd6f4a5c06a 1x\" data-canonical-src=\"https:\/\/qiita-image-store.s3.ap-northeast-1.amazonaws.com\/0\/546646\/551742e1-1e94-41e2-956d-d752351bb449.png\" loading=\"lazy\"\/><\/a><\/p>\n<p data-sourcepos=\"164:1-164:103\">\u7c21\u7d20\u904e\u304e\u308b\u306e\u3067\u3001\u5404\u30bb\u30eb\u3092\u56db\u89d2\u5f62\u3067\u63cf\u753b\u3059\u308b\u3088\u3046\u306b cell\u306estyle\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"165:1-172:3\">\n<div class=\"highlight\">\n<pre><code>    <span class=\"mf\">.<\/span><span class=\"n\">cell<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">border<\/span><span class=\"o\">:<\/span> <span class=\"mi\">1<\/span><span class=\"n\">px<\/span> <span class=\"n\">solid<\/span> <span class=\"c1\">#444;<\/span>\n        <span class=\"n\">display<\/span><span class=\"o\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">justify<\/span><span class=\"o\">-<\/span><span class=\"n\">content<\/span><span class=\"o\">:<\/span> <span class=\"n\">center<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">align<\/span><span class=\"o\">-<\/span><span class=\"n\">items<\/span><span class=\"o\">:<\/span> <span class=\"n\">center<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p data-sourcepos=\"174:1-175:121\">\u67a0\u7dda\u304c\u63cf\u753b\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f<br \/><a target=\"_blank\" href=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F176be368-4d3b-4fc6-8139-f40dc15d9b43.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=b6afdbd5934c3094cc648c1236dc9d4e\" target=\"_blank\" rel=\"nofollow noopener\"><img decoding=\"async\" src=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F176be368-4d3b-4fc6-8139-f40dc15d9b43.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=b6afdbd5934c3094cc648c1236dc9d4e\" alt=\"image.png\" srcset=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F176be368-4d3b-4fc6-8139-f40dc15d9b43.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=4bdf684be89c0e1ca17cd595faf1023c 1x\" data-canonical-src=\"https:\/\/qiita-image-store.s3.ap-northeast-1.amazonaws.com\/0\/546646\/176be368-4d3b-4fc6-8139-f40dc15d9b43.png\" loading=\"lazy\"\/><\/a><\/p>\n<p data-sourcepos=\"178:1-178:59\">\uff17\u00d7\uff18\u3092\u5909\u6570\u3067\u5ba3\u8a00\u3059\u308b\u3088\u3046\u306b\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"179:1-200:3\">\n<div class=\"highlight\">\n<pre><code><span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"board\"<\/span><span class=\"o\">&gt;<\/span>\n    <span class=\"o\">@<\/span><span class=\"k\">for<\/span> <span class=\"p\">(<\/span><span class=\"n\">int<\/span> <span class=\"n\">row<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span> <span class=\"n\">row<\/span> <span class=\"o\"> <span class=\"nc\">MaxRows<\/span><span class=\"p\">;<\/span> <span class=\"n\">row<\/span><span class=\"o\">++<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"k\">for<\/span> <span class=\"p\">(<\/span><span class=\"n\">int<\/span> <span class=\"n\">col<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span> <span class=\"n\">col<\/span> <span class=\"o\"> <span class=\"nc\">MaxCols<\/span><span class=\"p\">;<\/span> <span class=\"n\">col<\/span><span class=\"o\">++<\/span><span class=\"p\">)<\/span>\n        <span class=\"p\">{<\/span>\n            <span class=\"c1\">\/\/ CSS\u306e\u30b0\u30ea\u30c3\u30c9\u306f1\u30aa\u30ea\u30b8\u30f3<\/span>\n            <span class=\"k\">var<\/span> <span class=\"n\">cssRow<\/span> <span class=\"o\">=<\/span> <span class=\"n\">row<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\n            <span class=\"k\">var<\/span> <span class=\"n\">cssCol<\/span> <span class=\"o\">=<\/span> <span class=\"n\">col<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\n\n            <span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"cell\"<\/span> <span class=\"n\">style<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"grid-area:@(cssRow) \/ @(cssCol);\"<\/span><span class=\"o\">&gt;<\/span>\n                <span class=\"err\">\u25a1<\/span>\n            <span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n\n<span class=\"o\">@<\/span><span class=\"n\">code<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">private<\/span> <span class=\"k\">const<\/span> <span class=\"no\">int<\/span> <span class=\"no\">MaxRows<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">7<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">private<\/span> <span class=\"k\">const<\/span> <span class=\"no\">int<\/span> <span class=\"no\">MaxCols<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">8<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/span><\/span><\/span><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<ul data-sourcepos=\"201:1-204:0\">\n<li data-sourcepos=\"201:1-201:72\">\n<code>@code<\/code>\u3067C#\u306e\u30b3\u30fc\u30c9\u3092\u307e\u3068\u3081\u3066\u66f8\u304f\u3053\u3068\u304c\u3067\u304d\u307e\u3059<\/li>\n<li data-sourcepos=\"202:1-204:0\">\n<code>@code<\/code>\u3067\u5ba3\u8a00\u3057\u305f\u5909\u6570 <code>MaxRows<\/code> \u3092 html\u306e\u4e2d\u306e <code>for<\/code> \u6587\u3067\u5229\u7528\u3057\u3066\u307e\u3059<\/li>\n<\/ul>\n<h2 data-sourcepos=\"205:1-205:51\">\n<span id=\"\uff15\u30b2\u30fc\u30e0\u306e\u76e4\u9762\u3092\u4f5c\u308b\u305d\u306e\uff12\" class=\"fragment\"\/><a target=\"_blank\" href=\"#%EF%BC%95%E3%82%B2%E3%83%BC%E3%83%A0%E3%81%AE%E7%9B%A4%E9%9D%A2%E3%82%92%E4%BD%9C%E3%82%8B%E3%81%9D%E3%81%AE%EF%BC%92\"><i class=\"fa fa-link\"\/><\/a>\uff15\uff0e\u30b2\u30fc\u30e0\u306e\u76e4\u9762\u3092\u4f5c\u308b\uff08\u305d\u306e\uff12\uff09<\/h2>\n<p data-sourcepos=\"207:1-207:77\">\u5358\u7d14\u306a\uff17\u00d7\uff18\u304b\u3089\u3001\u58c1\u3084\u51fa\u53e3\u3092\u5b9a\u7fa9\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"208:1-226:3\">\n<div class=\"highlight\">\n<pre><code><span class=\"o\">@<\/span><span class=\"n\">code<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ \u76e4\u9762\u306e\u5b9a\u7fa9<\/span>\n    <span class=\"k\">private<\/span> <span class=\"k\">const<\/span> <span class=\"no\">int<\/span> <span class=\"no\">MaxRows<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">7<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">private<\/span> <span class=\"k\">const<\/span> <span class=\"no\">int<\/span> <span class=\"no\">MaxCols<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">8<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"k\">private<\/span> <span class=\"kt\">int<\/span><span class=\"p\">[,]<\/span> <span class=\"nc\">Board<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">int<\/span><span class=\"p\">[<\/span><span class=\"nc\">MaxRows<\/span><span class=\"p\">,<\/span> <span class=\"nc\">MaxCols<\/span><span class=\"p\">]<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/ \u76e4\u9762\u5b9a\u7fa9 (0=\u7a7a, 1=\u58c1, 9=\u51fa\u53e3)<\/span>\n        <span class=\"p\">{<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">},<\/span>\n        <span class=\"p\">{<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">},<\/span>\n        <span class=\"p\">{<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">},<\/span>\n        <span class=\"p\">{<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">},<\/span>\n        <span class=\"p\">{<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">},<\/span>\n        <span class=\"p\">{<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">},<\/span>\n        <span class=\"p\">{<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">9<\/span><span class=\"p\">,<\/span><span class=\"mi\">9<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">},<\/span>\n    <span class=\"p\">};<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p data-sourcepos=\"228:1-228:43\">html\u306e\u8868\u793a\u3092\u5b9a\u7fa9\u306b\u5bfe\u5fdc\u3055\u305b\u307e\u3059<\/p>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"229:1-261:3\">\n<div class=\"highlight\">\n<pre><code><span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"board\"<\/span><span class=\"o\">&gt;<\/span>\n    <span class=\"o\">@<\/span><span class=\"k\">for<\/span> <span class=\"p\">(<\/span><span class=\"n\">int<\/span> <span class=\"n\">row<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span> <span class=\"n\">row<\/span> <span class=\"o\"> <span class=\"nc\">MaxRows<\/span><span class=\"p\">;<\/span> <span class=\"n\">row<\/span><span class=\"o\">++<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"k\">for<\/span> <span class=\"p\">(<\/span><span class=\"n\">int<\/span> <span class=\"n\">col<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span> <span class=\"n\">col<\/span> <span class=\"o\"> <span class=\"nc\">MaxCols<\/span><span class=\"p\">;<\/span> <span class=\"n\">col<\/span><span class=\"o\">++<\/span><span class=\"p\">)<\/span>\n        <span class=\"p\">{<\/span>\n            <span class=\"c1\">\/\/ CSS\u306e\u30b0\u30ea\u30c3\u30c9\u306f1\u30aa\u30ea\u30b8\u30f3<\/span>\n            <span class=\"k\">var<\/span> <span class=\"n\">cssRow<\/span> <span class=\"o\">=<\/span> <span class=\"n\">row<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\n            <span class=\"k\">var<\/span> <span class=\"n\">cssCol<\/span> <span class=\"o\">=<\/span> <span class=\"n\">col<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\n\n            <span class=\"n\">int<\/span> <span class=\"n\">cell<\/span> <span class=\"o\">=<\/span> <span class=\"nc\">Board<\/span><span class=\"p\">[<\/span><span class=\"n\">row<\/span><span class=\"p\">,<\/span> <span class=\"n\">col<\/span><span class=\"p\">];<\/span>\n            <span class=\"k\">switch<\/span> <span class=\"p\">(<\/span><span class=\"n\">cell<\/span><span class=\"p\">)<\/span>\n            <span class=\"p\">{<\/span>\n                <span class=\"k\">case<\/span> <span class=\"mi\">0<\/span><span class=\"o\">:<\/span> <span class=\"c1\">\/\/ \u7a7a<\/span>\n                    <span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"cell\"<\/span> <span class=\"n\">style<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"grid-area:@(cssRow) \/ @(cssCol);\"<\/span><span class=\"o\">&gt;<\/span>\n                        <span class=\"err\">\u25a1<\/span>\n                    <span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n                    <span class=\"k\">break<\/span><span class=\"p\">;<\/span>\n                <span class=\"k\">case<\/span> <span class=\"mi\">1<\/span><span class=\"o\">:<\/span> <span class=\"c1\">\/\/ \u58c1<\/span>\n                    <span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"cell\"<\/span> <span class=\"n\">style<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"grid-area:@(cssRow) \/ @(cssCol);\"<\/span><span class=\"o\">&gt;<\/span>\n                        <span class=\"err\">\u25a0<\/span>\n                    <span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n                    <span class=\"k\">break<\/span><span class=\"p\">;<\/span>\n                <span class=\"k\">case<\/span> <span class=\"mi\">9<\/span><span class=\"o\">:<\/span> <span class=\"c1\">\/\/ \u7384\u95a2<\/span>\n                    <span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"cell\"<\/span> <span class=\"n\">style<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"grid-area:@(cssRow) \/ @(cssCol);\"<\/span><span class=\"o\">&gt;<\/span>\n                        <span class=\"n\">\u7384\u95a2<\/span>\n                    <span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n                    <span class=\"k\">break<\/span><span class=\"p\">;<\/span>\n            <span class=\"p\">}<\/span>\n        <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n<\/span><\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<p data-sourcepos=\"263:1-264:121\">\u5b9f\u884c\u3057\u3066\u78ba\u8a8d\u3057\u307e\u3059<br \/><a target=\"_blank\" href=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2Fc6cd6e08-a25f-429c-b128-587206bc744e.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=5df7ab9c583c7cd2c2c42d22e654c0e2\" target=\"_blank\" rel=\"nofollow noopener\"><img decoding=\"async\" src=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2Fc6cd6e08-a25f-429c-b128-587206bc744e.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=5df7ab9c583c7cd2c2c42d22e654c0e2\" alt=\"image.png\" srcset=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2Fc6cd6e08-a25f-429c-b128-587206bc744e.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=abfa5218c0cee04d11576ddece873c8c 1x\" data-canonical-src=\"https:\/\/qiita-image-store.s3.ap-northeast-1.amazonaws.com\/0\/546646\/c6cd6e08-a25f-429c-b128-587206bc744e.png\" loading=\"lazy\"\/><\/a><\/p>\n<p data-sourcepos=\"266:1-266:51\">\uff08\u307e\u3042\u307e\u3042\u76e4\u9762\u307d\u304f\u6210\u3063\u3066\u304d\u307e\u3057\u305f\uff09<\/p>\n<p data-sourcepos=\"268:1-269:60\">style\u306e\u5b9a\u7fa9\u3092\u5f37\u5316\u3057\u3066\u3082\u3063\u3068\u898b\u305f\u76ee\u3092\u826f\u304f\u3057\u307e\u3059<br \/>\u30bb\u30eb\u306e\u80cc\u666f\u3092\u5857\u308a\u3064\u3076\u3057\u3066\u76e4\u9762\u3092\u8868\u73fe\u3057\u307e\u3059<\/p>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"271:1-306:3\">\n<div class=\"highlight\">\n<pre><code><span class=\"o\"><span class=\"n\">style<\/span><span class=\"o\">&gt;<\/span>\n    <span class=\"cm\">\/* \u30b2\u30fc\u30e0\u76e4\u5168\u4f53 *\/<\/span>\n    <span class=\"mf\">.<\/span><span class=\"n\">board<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">display<\/span><span class=\"o\">:<\/span> <span class=\"n\">grid<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">grid<\/span><span class=\"o\">-<\/span><span class=\"n\">template<\/span><span class=\"o\">-<\/span><span class=\"n\">rows<\/span><span class=\"o\">:<\/span> <span class=\"nf\">repeat<\/span><span class=\"p\">(<\/span><span class=\"mi\">7<\/span><span class=\"p\">,<\/span> <span class=\"mi\">50<\/span><span class=\"n\">px<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">grid<\/span><span class=\"o\">-<\/span><span class=\"n\">template<\/span><span class=\"o\">-<\/span><span class=\"n\">columns<\/span><span class=\"o\">:<\/span> <span class=\"nf\">repeat<\/span><span class=\"p\">(<\/span><span class=\"mi\">8<\/span><span class=\"p\">,<\/span> <span class=\"mi\">50<\/span><span class=\"n\">px<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">position<\/span><span class=\"o\">:<\/span> <span class=\"n\">relative<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"cm\">\/* \uff11\u3064\uff11\u3064\u306e\u30bb\u30eb\u306e\u66f8\u5f0f *\/<\/span>\n    <span class=\"mf\">.<\/span><span class=\"n\">cell<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">border<\/span><span class=\"o\">:<\/span> <span class=\"mi\">1<\/span><span class=\"n\">px<\/span> <span class=\"n\">solid<\/span> <span class=\"c1\">#444;<\/span>\n        <span class=\"n\">display<\/span><span class=\"o\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">justify<\/span><span class=\"o\">-<\/span><span class=\"n\">content<\/span><span class=\"o\">:<\/span> <span class=\"n\">center<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">align<\/span><span class=\"o\">-<\/span><span class=\"n\">items<\/span><span class=\"o\">:<\/span> <span class=\"n\">center<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"cm\">\/* \u58c1 *\/<\/span>\n    <span class=\"mf\">.<\/span><span class=\"n\">wall<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">background<\/span><span class=\"o\">:<\/span> <span class=\"c1\">#444;<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"cm\">\/* \u76e4\u9762 *\/<\/span>\n    <span class=\"mf\">.<\/span><span class=\"k\">empty<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">background<\/span><span class=\"o\">:<\/span> <span class=\"c1\">#aaa;<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"cm\">\/* \u7384\u95a2 *\/<\/span>\n    <span class=\"mf\">.<\/span><span class=\"k\">exit<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">background<\/span><span class=\"o\">:<\/span> <span class=\"c1\">#eee;<\/span>\n        <span class=\"n\">color<\/span><span class=\"o\">:<\/span> <span class=\"c1\">#333;<\/span>\n        <span class=\"n\">display<\/span><span class=\"o\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">align<\/span><span class=\"o\">-<\/span><span class=\"n\">items<\/span><span class=\"o\">:<\/span> <span class=\"n\">center<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">justify<\/span><span class=\"o\">-<\/span><span class=\"n\">content<\/span><span class=\"o\">:<\/span> <span class=\"n\">center<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"o\"\/><span class=\"n\">style<\/span><span class=\"o\">&gt;<\/span>\n<\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"308:1-325:3\">\n<div class=\"highlight\">\n<pre><code><span class=\"k\">switch<\/span> <span class=\"p\">(<\/span><span class=\"n\">cell<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">{<\/span>\n    <span class=\"k\">case<\/span> <span class=\"mi\">0<\/span><span class=\"o\">:<\/span> <span class=\"c1\">\/\/ \u7a7a<\/span>\n            <span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"cell empty\"<\/span> <span class=\"n\">style<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"grid-area:@(cssRow) \/ @(cssCol);\"<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"k\">break<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">case<\/span> <span class=\"mi\">1<\/span><span class=\"o\">:<\/span> <span class=\"c1\">\/\/ \u58c1<\/span>\n            <span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"cell wall\"<\/span> <span class=\"n\">style<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"grid-area:@(cssRow) \/ @(cssCol);\"<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"k\">break<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">case<\/span> <span class=\"mi\">9<\/span><span class=\"o\">:<\/span> <span class=\"c1\">\/\/ \u7384\u95a2<\/span>\n            <span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"cell exit\"<\/span> <span class=\"n\">style<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"grid-area:@(cssRow) \/ @(cssCol);\"<\/span><span class=\"o\">&gt;<\/span>\n                <span class=\"n\">\u7384\u95a2<\/span>\n            <span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"k\">break<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/span><\/span><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<p data-sourcepos=\"327:1-327:121\"><a target=\"_blank\" href=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F01414019-79dd-4b02-b57a-de9424704fdc.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=c9430333683a84efbf5eab80b8bb9bed\" target=\"_blank\" rel=\"nofollow noopener\"><img decoding=\"async\" src=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F01414019-79dd-4b02-b57a-de9424704fdc.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=c9430333683a84efbf5eab80b8bb9bed\" alt=\"image.png\" srcset=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F01414019-79dd-4b02-b57a-de9424704fdc.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=5c272e39798125f78775abb1ae7251b5 1x\" data-canonical-src=\"https:\/\/qiita-image-store.s3.ap-northeast-1.amazonaws.com\/0\/546646\/01414019-79dd-4b02-b57a-de9424704fdc.png\" loading=\"lazy\"\/><\/a><\/p>\n<div data-sourcepos=\"329:1-332:3\" class=\"note info\">\n<span class=\"fa fa-fw fa-check-circle\"\/><\/p>\n<div>\n<p data-sourcepos=\"330:1-331:45\">\u3053\u308c\u3067\u76e4\u9762\u304c\u5b8c\u6210\u3057\u307e\u3057\u305f\uff01<br \/>\u6b21\u306f\u3044\u3088\u3044\u3088\u99d2\u3092\u7f6e\u3044\u3066\u3044\u304d\u307e\u3059<\/p>\n<\/div>\n<\/div>\n<h2 data-sourcepos=\"335:1-335:66\">\n<span id=\"\uff16\u99d2\u3092\u7f6e\u304f---c\u30af\u30e9\u30b9\u3092html\u306b\u63cf\u753b\u3057\u3066\u307f\u3088\u3046\" class=\"fragment\"\/><a target=\"_blank\" href=\"#%EF%BC%96%E9%A7%92%E3%82%92%E7%BD%AE%E3%81%8F---c%E3%82%AF%E3%83%A9%E3%82%B9%E3%82%92html%E3%81%AB%E6%8F%8F%E7%94%BB%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86\"><i class=\"fa fa-link\"\/><\/a>\uff16\uff0e\u99d2\u3092\u7f6e\u304f &#8211; C#\u30af\u30e9\u30b9\u3092HTML\u306b\u63cf\u753b\u3057\u3066\u307f\u3088\u3046<\/h2>\n<p data-sourcepos=\"337:1-338:60\">\u76e4\u9762\u306fhtml\u306e\u4e2d\u306b\u56fa\u5b9a\u3067\u5b9a\u7fa9\u3057\u307e\u3057\u305f\u3002<br \/>\u30da\u30fc\u30b8\u3092\u8868\u793a\u3059\u308b\u305f\u3073\u306b\u5fc5\u305a\u63cf\u753b\u3055\u308c\u307e\u3059\u3002<\/p>\n<p data-sourcepos=\"340:1-340:66\">\u99d2\u306f\u56fa\u5b9a\u3067\u306f\u56f0\u308b\u306e\u3067\u76e4\u9762\u3068\u306f\u5225\u306b\u63cf\u753b\u3057\u307e\u3059\u3002<\/p>\n<h3 data-sourcepos=\"342:1-342:31\">\n<span id=\"\u30a4\u30d9\u30f3\u30c8\u3067\u99d2\u3092\u7f6e\u304f\" class=\"fragment\"\/><a target=\"_blank\" href=\"#%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%A7%E9%A7%92%E3%82%92%E7%BD%AE%E3%81%8F\"><i class=\"fa fa-link\"\/><\/a>\u30a4\u30d9\u30f3\u30c8\u3067\u99d2\u3092\u7f6e\u304f<\/h3>\n<p data-sourcepos=\"343:1-343:87\">\u307e\u305a\u306f\u30da\u30fc\u30b8\u8868\u793a\u6642\u306e\u300c\u30a4\u30d9\u30f3\u30c8 <code>OnInitialized<\/code>\u3067\u99d2\u3092\u7f6e\u304d\u307e\u3059\u3002<\/p>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"345:1-365:3\">\n<div class=\"highlight\">\n<pre><code><span class=\"o\">@<\/span><span class=\"n\">code<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ \u99d2\u306e\u5b9a\u7fa9<\/span>\n    <span class=\"k\">private<\/span> <span class=\"kt\">class<\/span> <span class=\"nc\">Piece<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"k\">public<\/span> <span class=\"kt\">int<\/span> <span class=\"nc\">Row<\/span> <span class=\"p\">{<\/span> <span class=\"n\">get<\/span><span class=\"p\">;<\/span> <span class=\"n\">set<\/span><span class=\"p\">;<\/span> <span class=\"p\">}<\/span>\n        <span class=\"k\">public<\/span> <span class=\"kt\">int<\/span> <span class=\"nc\">Col<\/span> <span class=\"p\">{<\/span> <span class=\"n\">get<\/span><span class=\"p\">;<\/span> <span class=\"n\">set<\/span><span class=\"p\">;<\/span> <span class=\"p\">}<\/span>\n        <span class=\"k\">public<\/span> <span class=\"kt\">string<\/span><span class=\"o\">?<\/span> <span class=\"nc\">Label<\/span> <span class=\"p\">{<\/span> <span class=\"n\">get<\/span><span class=\"p\">;<\/span> <span class=\"n\">set<\/span><span class=\"p\">;<\/span> <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ \u99d2\u306e\u30ea\u30b9\u30c8\uff08\u884c\u30fb\u5217\u30fb\u8868\u793a\u6587\u5b57\uff09<\/span>\n    <span class=\"k\">private<\/span> <span class=\"kt\">List<\/span><span class=\"o\"><span class=\"nc\">Piece<\/span><span class=\"o\">&gt;<\/span> <span class=\"nc\">Pieces<\/span>\n        <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">List<\/span><span class=\"o\"><span class=\"nc\">Piece<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">();<\/span>\n\n    <span class=\"k\">protected<\/span> <span class=\"kt\">override<\/span> <span class=\"n\">void<\/span> <span class=\"nf\">OnInitialized<\/span><span class=\"p\">()<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/ \u521d\u671f\u914d\u7f6e<\/span>\n        <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Piece<\/span> <span class=\"p\">{<\/span> <span class=\"nc\">Row<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span> <span class=\"nc\">Col<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">3<\/span><span class=\"p\">,<\/span> <span class=\"nc\">Label<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">\"\u5a18\"<\/span> <span class=\"p\">});<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/span><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<p data-sourcepos=\"367:1-367:69\">C#\u3067\u99d2\u306e\u30af\u30e9\u30b9\u3092\u5b9a\u7fa9\u3057\u305f\u306e\u3067\u3001HTML\u3067\u63cf\u753b\u3057\u307e\u3059\u3002<\/p>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"368:1-381:3\">\n<div class=\"highlight\">\n<pre><code>    <span class=\"o\">@<\/span><span class=\"k\">foreach<\/span> <span class=\"p\">(<\/span><span class=\"nc\">Piece<\/span> <span class=\"n\">p<\/span> <span class=\"n\">in<\/span> <span class=\"nc\">Pieces<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"k\">var<\/span> <span class=\"n\">cssPieceRow<\/span> <span class=\"o\">=<\/span> <span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Row<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\n        <span class=\"k\">var<\/span> <span class=\"n\">cssPieceCol<\/span> <span class=\"o\">=<\/span> <span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Col<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\n\n        <span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"piece\"<\/span>\n             <span class=\"n\">style<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"\n                grid-row:@cssPieceRow;\n                grid-column:@cssPieceCol;\"<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">@<\/span><span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Label<\/span>\n        <span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n    <span class=\"p\">}<\/span>\n<\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<p data-sourcepos=\"383:1-383:48\">\u30b9\u30bf\u30a4\u30eb\u3067\u99d2\u306e\u898b\u305f\u76ee\u3092\u88c5\u98fe\u3057\u307e\u3059<\/p>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"384:1-395:3\">\n<div class=\"highlight\">\n<pre><code>    <span class=\"cm\">\/* \u99d2 *\/<\/span>\n    <span class=\"mf\">.<\/span><span class=\"n\">piece<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">background<\/span><span class=\"o\">:<\/span> <span class=\"n\">red<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">color<\/span><span class=\"o\">:<\/span> <span class=\"n\">white<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">font<\/span><span class=\"o\">-<\/span><span class=\"n\">weight<\/span><span class=\"o\">:<\/span> <span class=\"n\">bold<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">display<\/span><span class=\"o\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">align<\/span><span class=\"o\">-<\/span><span class=\"n\">items<\/span><span class=\"o\">:<\/span> <span class=\"n\">center<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">justify<\/span><span class=\"o\">-<\/span><span class=\"n\">content<\/span><span class=\"o\">:<\/span> <span class=\"n\">center<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">z<\/span><span class=\"o\">-<\/span><span class=\"n\">index<\/span><span class=\"o\">:<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p data-sourcepos=\"397:1-398:121\">\u5b9f\u884c\u3057\u3066\u78ba\u8a8d\u3057\u307e\u3059<br \/><a target=\"_blank\" href=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2Faad449e1-63d7-4897-b537-eb67f263bc5f.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=628c67107de57d7b34f647600a7bc860\" target=\"_blank\" rel=\"nofollow noopener\"><img decoding=\"async\" src=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2Faad449e1-63d7-4897-b537-eb67f263bc5f.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=628c67107de57d7b34f647600a7bc860\" alt=\"image.png\" srcset=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2Faad449e1-63d7-4897-b537-eb67f263bc5f.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=6672b156e43a3c0d661b0735a118cb4a 1x\" data-canonical-src=\"https:\/\/qiita-image-store.s3.ap-northeast-1.amazonaws.com\/0\/546646\/aad449e1-63d7-4897-b537-eb67f263bc5f.png\" loading=\"lazy\"\/><\/a><\/p>\n<p data-sourcepos=\"400:1-400:68\">\u884c2,\u52173(0\u30aa\u30ea\u30b8\u30f3\uff09\u306b\u99d2\u300c\u5a18\u300d\u304c\u914d\u7f6e\u3055\u308c\u307e\u3057\u305f\u3002<\/p>\n<p data-sourcepos=\"402:1-403:48\">\u5c11\u3057\u30bd\u30fc\u30b9\u304c\u8907\u96d1\u306b\u306a\u3063\u3066\u304d\u305f\u306e\u3067\u3001\u3053\u3053\u3067\u5168\u4f53\u50cf\u3092\u4e00\u5ea6\u78ba\u8a8d\u3057\u307e\u3059\u3002<br \/>\u4eca\u3001\u30bd\u30fc\u30b9\u5168\u4f53\u306f\u3053\u3046\u306a\u3063\u3066\u307e\u3059\u3002<\/p>\n<details>\n<summary><b>============================<br \/>\u00a0\u00a0\u00a0\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u5168\u4f53\u3092\u8868\u793a\uff08\u6298\u308a\u305f\u305f\u307f\uff09<br \/>\u00a0=============================<\/b><\/summary>\n<div>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"408:1-538:3\">\n<div class=\"highlight\">\n<pre><code><span class=\"o\">@<\/span><span class=\"n\">page<\/span> <span class=\"s2\">\"https:\/\/qiita.com\/\"<\/span>\n\n<span class=\"o\"><span class=\"n\">style<\/span><span class=\"o\">&gt;<\/span>\n    <span class=\"cm\">\/* \u30b2\u30fc\u30e0\u76e4\u5168\u4f53 *\/<\/span>\n    <span class=\"mf\">.<\/span><span class=\"n\">board<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">display<\/span><span class=\"o\">:<\/span> <span class=\"n\">grid<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">grid<\/span><span class=\"o\">-<\/span><span class=\"n\">template<\/span><span class=\"o\">-<\/span><span class=\"n\">rows<\/span><span class=\"o\">:<\/span> <span class=\"nf\">repeat<\/span><span class=\"p\">(<\/span><span class=\"mi\">7<\/span><span class=\"p\">,<\/span> <span class=\"mi\">50<\/span><span class=\"n\">px<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">grid<\/span><span class=\"o\">-<\/span><span class=\"n\">template<\/span><span class=\"o\">-<\/span><span class=\"n\">columns<\/span><span class=\"o\">:<\/span> <span class=\"nf\">repeat<\/span><span class=\"p\">(<\/span><span class=\"mi\">8<\/span><span class=\"p\">,<\/span> <span class=\"mi\">50<\/span><span class=\"n\">px<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">position<\/span><span class=\"o\">:<\/span> <span class=\"n\">relative<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"cm\">\/* \uff11\u3064\uff11\u3064\u306e\u30bb\u30eb\u306e\u66f8\u5f0f *\/<\/span>\n    <span class=\"mf\">.<\/span><span class=\"n\">cell<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">border<\/span><span class=\"o\">:<\/span> <span class=\"mi\">1<\/span><span class=\"n\">px<\/span> <span class=\"n\">solid<\/span> <span class=\"c1\">#444;<\/span>\n        <span class=\"n\">display<\/span><span class=\"o\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">justify<\/span><span class=\"o\">-<\/span><span class=\"n\">content<\/span><span class=\"o\">:<\/span> <span class=\"n\">center<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">align<\/span><span class=\"o\">-<\/span><span class=\"n\">items<\/span><span class=\"o\">:<\/span> <span class=\"n\">center<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"cm\">\/* \u58c1 *\/<\/span>\n    <span class=\"mf\">.<\/span><span class=\"n\">wall<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">background<\/span><span class=\"o\">:<\/span> <span class=\"c1\">#444;<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"cm\">\/* \u76e4\u9762 *\/<\/span>\n    <span class=\"mf\">.<\/span><span class=\"k\">empty<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">background<\/span><span class=\"o\">:<\/span> <span class=\"c1\">#aaa;<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"cm\">\/* \u7384\u95a2 *\/<\/span>\n    <span class=\"mf\">.<\/span><span class=\"k\">exit<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">background<\/span><span class=\"o\">:<\/span> <span class=\"c1\">#eee;<\/span>\n        <span class=\"n\">color<\/span><span class=\"o\">:<\/span> <span class=\"c1\">#333;<\/span>\n        <span class=\"n\">display<\/span><span class=\"o\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">align<\/span><span class=\"o\">-<\/span><span class=\"n\">items<\/span><span class=\"o\">:<\/span> <span class=\"n\">center<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">justify<\/span><span class=\"o\">-<\/span><span class=\"n\">content<\/span><span class=\"o\">:<\/span> <span class=\"n\">center<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"cm\">\/* \u99d2 *\/<\/span>\n    <span class=\"mf\">.<\/span><span class=\"n\">piece<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">background<\/span><span class=\"o\">:<\/span> <span class=\"n\">red<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">color<\/span><span class=\"o\">:<\/span> <span class=\"n\">white<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">font<\/span><span class=\"o\">-<\/span><span class=\"n\">weight<\/span><span class=\"o\">:<\/span> <span class=\"n\">bold<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">display<\/span><span class=\"o\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">align<\/span><span class=\"o\">-<\/span><span class=\"n\">items<\/span><span class=\"o\">:<\/span> <span class=\"n\">center<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">justify<\/span><span class=\"o\">-<\/span><span class=\"n\">content<\/span><span class=\"o\">:<\/span> <span class=\"n\">center<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">z<\/span><span class=\"o\">-<\/span><span class=\"n\">index<\/span><span class=\"o\">:<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n<span class=\"o\"\/><span class=\"n\">style<\/span><span class=\"o\">&gt;<\/span>\n\n<span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"board\"<\/span><span class=\"o\">&gt;<\/span>\n    <span class=\"o\">@<\/span><span class=\"k\">for<\/span> <span class=\"p\">(<\/span><span class=\"n\">int<\/span> <span class=\"n\">row<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span> <span class=\"n\">row<\/span> <span class=\"o\"> <span class=\"nc\">MaxRows<\/span><span class=\"p\">;<\/span> <span class=\"n\">row<\/span><span class=\"o\">++<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"k\">for<\/span> <span class=\"p\">(<\/span><span class=\"n\">int<\/span> <span class=\"n\">col<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span> <span class=\"n\">col<\/span> <span class=\"o\"> <span class=\"nc\">MaxCols<\/span><span class=\"p\">;<\/span> <span class=\"n\">col<\/span><span class=\"o\">++<\/span><span class=\"p\">)<\/span>\n        <span class=\"p\">{<\/span>\n            <span class=\"c1\">\/\/ CSS\u306e\u30b0\u30ea\u30c3\u30c9\u306f1\u30aa\u30ea\u30b8\u30f3<\/span>\n            <span class=\"k\">var<\/span> <span class=\"n\">cssRow<\/span> <span class=\"o\">=<\/span> <span class=\"n\">row<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\n            <span class=\"k\">var<\/span> <span class=\"n\">cssCol<\/span> <span class=\"o\">=<\/span> <span class=\"n\">col<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\n\n            <span class=\"n\">int<\/span> <span class=\"n\">cell<\/span> <span class=\"o\">=<\/span> <span class=\"nc\">Board<\/span><span class=\"p\">[<\/span><span class=\"n\">row<\/span><span class=\"p\">,<\/span> <span class=\"n\">col<\/span><span class=\"p\">];<\/span>\n            <span class=\"k\">switch<\/span> <span class=\"p\">(<\/span><span class=\"n\">cell<\/span><span class=\"p\">)<\/span>\n            <span class=\"p\">{<\/span>\n                <span class=\"k\">case<\/span> <span class=\"mi\">0<\/span><span class=\"o\">:<\/span> <span class=\"c1\">\/\/ \u7a7a<\/span>\n                        <span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"cell empty\"<\/span> <span class=\"n\">style<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"grid-area:@(cssRow) \/ @(cssCol);\"<\/span><span class=\"o\">&gt;<\/span>\n                        <span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n                    <span class=\"k\">break<\/span><span class=\"p\">;<\/span>\n                <span class=\"k\">case<\/span> <span class=\"mi\">1<\/span><span class=\"o\">:<\/span> <span class=\"c1\">\/\/ \u58c1<\/span>\n                        <span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"cell wall\"<\/span> <span class=\"n\">style<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"grid-area:@(cssRow) \/ @(cssCol);\"<\/span><span class=\"o\">&gt;<\/span>\n                        <span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n                    <span class=\"k\">break<\/span><span class=\"p\">;<\/span>\n                <span class=\"k\">case<\/span> <span class=\"mi\">9<\/span><span class=\"o\">:<\/span> <span class=\"c1\">\/\/ \u7384\u95a2<\/span>\n                        <span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"cell exit\"<\/span> <span class=\"n\">style<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"grid-area:@(cssRow) \/ @(cssCol);\"<\/span><span class=\"o\">&gt;<\/span>\n                            <span class=\"n\">\u7384\u95a2<\/span>\n                        <span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n                    <span class=\"k\">break<\/span><span class=\"p\">;<\/span>\n            <span class=\"p\">}<\/span>\n        <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"o\">@<\/span><span class=\"k\">foreach<\/span> <span class=\"p\">(<\/span><span class=\"nc\">Piece<\/span> <span class=\"n\">p<\/span> <span class=\"n\">in<\/span> <span class=\"nc\">Pieces<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"k\">var<\/span> <span class=\"n\">cssPieceRow<\/span> <span class=\"o\">=<\/span> <span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Row<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\n        <span class=\"k\">var<\/span> <span class=\"n\">cssPieceCol<\/span> <span class=\"o\">=<\/span> <span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Col<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\n\n        <span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"piece\"<\/span>\n             <span class=\"n\">style<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"\n                grid-row:@cssPieceRow;\n                grid-column:@cssPieceCol;\"<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">@<\/span><span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Label<\/span>\n        <span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n    <span class=\"p\">}<\/span>\n\n<span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n\n<span class=\"o\">@<\/span><span class=\"n\">code<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ \u76e4\u9762\u306e\u5b9a\u7fa9<\/span>\n    <span class=\"k\">private<\/span> <span class=\"k\">const<\/span> <span class=\"no\">int<\/span> <span class=\"no\">MaxRows<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">7<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">private<\/span> <span class=\"k\">const<\/span> <span class=\"no\">int<\/span> <span class=\"no\">MaxCols<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">8<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"k\">private<\/span> <span class=\"kt\">int<\/span><span class=\"p\">[,]<\/span> <span class=\"nc\">Board<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">int<\/span><span class=\"p\">[<\/span><span class=\"nc\">MaxRows<\/span><span class=\"p\">,<\/span> <span class=\"nc\">MaxCols<\/span><span class=\"p\">]<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/ \u76e4\u9762\u5b9a\u7fa9 (0=\u7a7a, 1=\u58c1, 9=\u51fa\u53e3)<\/span>\n        <span class=\"p\">{<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">},<\/span>\n        <span class=\"p\">{<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">},<\/span>\n        <span class=\"p\">{<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">},<\/span>\n        <span class=\"p\">{<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">},<\/span>\n        <span class=\"p\">{<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">},<\/span>\n        <span class=\"p\">{<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">},<\/span>\n        <span class=\"p\">{<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">9<\/span><span class=\"p\">,<\/span><span class=\"mi\">9<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">},<\/span>\n    <span class=\"p\">};<\/span>\n\n\n    <span class=\"c1\">\/\/ \u99d2\u306e\u5b9a\u7fa9<\/span>\n    <span class=\"k\">private<\/span> <span class=\"kt\">class<\/span> <span class=\"nc\">Piece<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"k\">public<\/span> <span class=\"kt\">int<\/span> <span class=\"nc\">Row<\/span> <span class=\"p\">{<\/span> <span class=\"n\">get<\/span><span class=\"p\">;<\/span> <span class=\"n\">set<\/span><span class=\"p\">;<\/span> <span class=\"p\">}<\/span>\n        <span class=\"k\">public<\/span> <span class=\"kt\">int<\/span> <span class=\"nc\">Col<\/span> <span class=\"p\">{<\/span> <span class=\"n\">get<\/span><span class=\"p\">;<\/span> <span class=\"n\">set<\/span><span class=\"p\">;<\/span> <span class=\"p\">}<\/span>\n        <span class=\"k\">public<\/span> <span class=\"kt\">string<\/span><span class=\"o\">?<\/span> <span class=\"nc\">Label<\/span> <span class=\"p\">{<\/span> <span class=\"n\">get<\/span><span class=\"p\">;<\/span> <span class=\"n\">set<\/span><span class=\"p\">;<\/span> <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ \u99d2\u306e\u30ea\u30b9\u30c8\uff08\u884c\u30fb\u5217\u30fb\u8868\u793a\u6587\u5b57\uff09<\/span>\n    <span class=\"k\">private<\/span> <span class=\"kt\">List<\/span><span class=\"o\"><span class=\"nc\">Piece<\/span><span class=\"o\">&gt;<\/span> <span class=\"nc\">Pieces<\/span>\n        <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">List<\/span><span class=\"o\"><span class=\"nc\">Piece<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">();<\/span>\n\n    <span class=\"k\">protected<\/span> <span class=\"kt\">override<\/span> <span class=\"n\">void<\/span> <span class=\"nf\">OnInitialized<\/span><span class=\"p\">()<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/ \u521d\u671f\u914d\u7f6e<\/span>\n        <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Piece<\/span> <span class=\"p\">{<\/span> <span class=\"nc\">Row<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span> <span class=\"nc\">Col<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">3<\/span><span class=\"p\">,<\/span> <span class=\"nc\">Label<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">\"\u5a18\"<\/span> <span class=\"p\">});<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/details>\n<h2 data-sourcepos=\"543:1-543:67\">\n<span id=\"\uff17\u99d2\u3092\u9078\u629e\u3059\u308b----blazor\u3067\u30a4\u30d9\u30f3\u30c8\u51e6\u7406\u3092\u4f53\u9a13\" class=\"fragment\"\/><a target=\"_blank\" href=\"#%EF%BC%97%E9%A7%92%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%99%E3%82%8B----blazor%E3%81%A7%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E5%87%A6%E7%90%86%E3%82%92%E4%BD%93%E9%A8%93\"><i class=\"fa fa-link\"\/><\/a>\uff17\uff0e\u99d2\u3092\u9078\u629e\u3059\u308b  &#8211; Blazor\u3067\u30a4\u30d9\u30f3\u30c8\u51e6\u7406\u3092\u4f53\u9a13<\/h2>\n<div data-sourcepos=\"545:1-547:3\" class=\"note info\">\n<span class=\"fa fa-fw fa-check-circle\"\/><\/p>\n<div>\n<p data-sourcepos=\"546:1-546:57\">\u3044\u3088\u3044\u3088\u3053\u3053\u304b\u3089\u304cBlazor\u306e\u672c\u9818\u767a\u63ee\u3067\u3059\uff01<\/p>\n<\/div>\n<\/div>\n<p data-sourcepos=\"549:1-550:111\">\u99d2\u3092\u52d5\u304b\u3059\u305f\u3081\u306b\u306f\u3001\u307e\u305a\u306f\u99d2\u3092\u9078\u629e\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<br \/>\u307e\u305f\u76e4\u9762\u306e\u4e2d\u3067\u9078\u629e\u4e2d\u306e\u99d2\u306f\uff11\u3064\u3060\u3051\u3058\u3083\u306a\u3044\u3068\u3001\u3069\u306e\u99d2\u3092\u52d5\u304b\u3059\u306e\u304b\u56f0\u308a\u307e\u3059\u3002<\/p>\n<p data-sourcepos=\"552:1-552:55\"><code>@code<\/code> \u306e\u4e2d\u306b \u4e0b\u306e\uff12\u3064\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<ul data-sourcepos=\"554:1-556:0\">\n<li data-sourcepos=\"554:1-554:48\">\u9078\u629e\u4e2d\u306e\u99d2\u3092\u793a\u3059 <code>Selected<\/code> \u5909\u6570<\/li>\n<li data-sourcepos=\"555:1-556:0\">\u9078\u629e\u3055\u308c\u305f\u6642\u306e\u30a4\u30d9\u30f3\u30c8 <code>SelectPiece(p)<\/code>\n<\/li>\n<\/ul>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"557:1-562:3\">\n<div class=\"highlight\">\n<pre><code>    <span class=\"c1\">\/\/ \u9078\u629e\u4e2d\u306e\u99d2<\/span>\n    <span class=\"k\">private<\/span> <span class=\"kt\">Piece<\/span><span class=\"o\">?<\/span> <span class=\"nc\">Selected<\/span><span class=\"p\">;<\/span>\n    <span class=\"c1\">\/\/ \u99d2\u306e\u9078\u629e<\/span>\n    <span class=\"k\">private<\/span> <span class=\"kt\">void<\/span> <span class=\"nf\">SelectPiece<\/span><span class=\"p\">(<\/span><span class=\"nc\">Piece<\/span> <span class=\"n\">p<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nc\">Selected<\/span> <span class=\"o\">=<\/span> <span class=\"n\">p<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p data-sourcepos=\"564:1-564:167\">\u99d2\u306e\u30a8\u30ec\u30e1\u30f3\u30c8\u306b\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u6642\u306e\u30a2\u30af\u30b7\u30e7\u30f3 <code>@onclick<\/code> \u3068\u3001\u81ea\u8eab\u304c\u9078\u629e\u3055\u308c\u305f\u99d2\u306e\u5834\u5408\u3060\u3051&#8221;selected&#8221;\u30af\u30e9\u30b9\u3092\u6307\u5b9a\u3057\u307e\u3059<\/p>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"565:1-573:3\">\n<div class=\"highlight\">\n<pre><code><span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"piece @(p == Selected ? \"<\/span><span class=\"n\">selected<\/span><span class=\"s2\">\" : \"\")\"<\/span>\n     <span class=\"n\">style<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"\n        grid-row:@cssPieceRow;\n        grid-column:@cssPieceCol;\"<\/span>\n        <span class=\"o\">@<\/span><span class=\"n\">onclick<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"() =&gt; SelectPiece(p)\"<\/span><span class=\"o\">&gt;<\/span>\n    <span class=\"o\">@<\/span><span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Label<\/span>\n<span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n<\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<p data-sourcepos=\"575:1-575:87\">\u6700\u5f8c\u306b <code\/> \u3078\u9078\u629e\u3055\u308c\u305f\u6642\u306e\u898b\u305f\u76ee\u306e\u66f8\u5f0f\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"576:1-580:3\">\n<div class=\"highlight\">\n<pre><code><span class=\"mf\">.<\/span><span class=\"n\">piece<\/span><span class=\"mf\">.<\/span><span class=\"n\">selected<\/span> <span class=\"p\">{<\/span>\n    <span class=\"n\">outline<\/span><span class=\"o\">:<\/span> <span class=\"mi\">5<\/span><span class=\"n\">px<\/span> <span class=\"n\">solid<\/span> <span class=\"n\">orange<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p data-sourcepos=\"582:1-583:121\">\u5b9f\u884c\u3057\u3066\u300c\u5a18\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059<br \/><a target=\"_blank\" href=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F38b8eee4-8e7a-4b8a-9932-0fd020429d11.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=d6ca12b3c7efc383ea19ac64621811c2\" target=\"_blank\" rel=\"nofollow noopener\"><img decoding=\"async\" src=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F38b8eee4-8e7a-4b8a-9932-0fd020429d11.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=d6ca12b3c7efc383ea19ac64621811c2\" alt=\"image.png\" srcset=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F38b8eee4-8e7a-4b8a-9932-0fd020429d11.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=2db3b4648247b7c12b9f53f2cdfc3750 1x\" data-canonical-src=\"https:\/\/qiita-image-store.s3.ap-northeast-1.amazonaws.com\/0\/546646\/38b8eee4-8e7a-4b8a-9932-0fd020429d11.png\" loading=\"lazy\"\/><\/a><\/p>\n<p data-sourcepos=\"585:1-587:59\">\u300c\u7236\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059<br \/><a target=\"_blank\" href=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2Fb4265e59-186c-4cac-8061-5fd2c7521af4.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=456f4ccb132cfe79aae9675db753c9a7\" target=\"_blank\" rel=\"nofollow noopener\"><img decoding=\"async\" src=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2Fb4265e59-186c-4cac-8061-5fd2c7521af4.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=456f4ccb132cfe79aae9675db753c9a7\" alt=\"image.png\" srcset=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2Fb4265e59-186c-4cac-8061-5fd2c7521af4.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=1b84bb736a686ebd817ccf82e4ecce80 1x\" data-canonical-src=\"https:\/\/qiita-image-store.s3.ap-northeast-1.amazonaws.com\/0\/546646\/b4265e59-186c-4cac-8061-5fd2c7521af4.png\" loading=\"lazy\"\/><\/a><br \/>\uff08 \u300c\u5a18\u300d\u306e\u9078\u629e\u304c\u81ea\u52d5\u3067\u89e3\u9664\u3055\u308c\u307e\u3057\u305f \uff09<\/p>\n<div data-sourcepos=\"590:1-603:3\" class=\"note info\">\n<span class=\"fa fa-fw fa-check-circle\"\/><\/p>\n<div>\n<p data-sourcepos=\"591:1-592:87\">C#\u3092\u66f8\u304d\u306a\u308c\u3066\u3044\u308b\u65b9\u306b\u306f\u81ea\u7136\u306b\u898b\u3048\u305f\u3068\u601d\u3044\u307e\u3059\u3002<br \/>\u3067\u3082\u3053\u308c\u306f\u3001\u901a\u5e38\u306eWeb\u958b\u767a\u3067\u306f\u7d76\u5bfe\u306b\u3042\u308a\u3048\u306a\u3044\u3053\u3068\u306a\u3093\u3067\u3059\u3002<\/p>\n<p data-sourcepos=\"594:1-594:57\">\u672c\u6765\u306a\u3089\u3001\u30bb\u30eb\u306e\u898b\u305f\u76ee\u3092\u5909\u3048\u308b\u3060\u3051\u3067\u3082<\/p>\n<ul data-sourcepos=\"595:1-598:0\">\n<li data-sourcepos=\"595:1-595:48\">JavaScript\u3067\u30da\u30fc\u30b8\u3092\u76f4\u63a5\u66f8\u304d\u63db\u3048\u308b<\/li>\n<li data-sourcepos=\"596:1-598:0\">\u3082\u3057\u304f\u306fAJAX\u3067\u30b5\u30fc\u30d0\u30fc\u3068\u901a\u4fe1\u3057\u3001\u30da\u30fc\u30b8\u306e\u4e00\u90e8\u5206\u3092\u66f8\u304d\u63db\u3048\u308b<br \/>\u3068\u3044\u3063\u305f\u624b\u9593\u304c\u5fc5\u8981\u3067\u3057\u305f\u3002<\/li>\n<\/ul>\n<p data-sourcepos=\"599:1-600:94\">\u305d\u308c\u304cBlazor\u3067\u306f <code>@onclick<\/code> \u30921\u884c\u8ffd\u52a0\u3059\u308b\u3060\u3051\u3002<br \/>JavaScript\u3082AJAX\u3082\u4e0d\u8981\u3067\u3001C#\u306e\u30b3\u30fc\u30c9\u3060\u3051\u3067\u30da\u30fc\u30b8\u304c\u52d5\u7684\u306b\u5909\u5316\u3057\u307e\u3059\u3002<\/p>\n<p data-sourcepos=\"602:1-602:69\">\u3053\u308c\u3053\u305d\u304cBlazor\u306e\u3059\u3054\u3055\u3067\u3042\u308a\u3001\u6700\u5927\u306e\u9b45\u529b\u3067\u3059\uff01<\/p>\n<\/div>\n<\/div>\n<h2 data-sourcepos=\"606:1-606:55\">\n<span id=\"\uff18blazor-server\u306e\u901a\u4fe1\u6280\u8853\u7684\u306a\u80cc\u666f\" class=\"fragment\"\/><a target=\"_blank\" href=\"#%EF%BC%98blazor-server%E3%81%AE%E9%80%9A%E4%BF%A1%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AA%E8%83%8C%E6%99%AF\"><i class=\"fa fa-link\"\/><\/a>\uff18\uff0eBlazor Server\u306e\u901a\u4fe1\uff08\u6280\u8853\u7684\u306a\u80cc\u666f\uff09<\/h2>\n<div data-sourcepos=\"608:1-610:3\" class=\"note warn\">\n<span class=\"fa fa-fw fa-exclamation-circle\"\/><\/p>\n<div>\n<p data-sourcepos=\"609:1-609:87\">\u304b\u306a\u308a\u901a\u4fe1\u6280\u8853\u306b\u8e0f\u307f\u8fbc\u3093\u3060\u8a71\u306a\u306e\u3067\u3001\u8208\u5473\u306e\u3042\u308b\u65b9\u3060\u3051\u3069\u3046\u305e<\/p>\n<\/div>\n<\/div>\n<details>\n<summary><b>=======================<br \/>\u00a0\u00a0\u00a0\u6280\u8853\u7684\u306a\u80cc\u666f\u3092\u8868\u793a\uff08\u6298\u308a\u305f\u305f\u307f\uff09<br \/>\u00a0========================<\/b><\/summary>\n<div>\n<p data-sourcepos=\"614:1-615:84\">HTTP\u30ea\u30af\u30a8\u30b9\u30c8\u3082javascript\u3082\u7121\u3057\u306b\u3001\u3044\u3063\u305f\u3044\u3069\u3046\u3084\u3063\u3066\u30da\u30fc\u30b8\u306e\u5185\u5bb9\u304c\u66f8\u304d\u63db\u308f\u3063\u305f\u3093\u3067\u3057\u3087\u3046\uff1f<br \/>\u5b9f\u306f\u3001Blazor Server\u3067\u306f WebSocket \u3068\u3044\u3046\u4ed5\u7d44\u307f\u3067\u901a\u4fe1\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<h4 data-sourcepos=\"617:1-617:95\">\n<span id=\"\u3053\u306ewebsocket\u3068\u306f\u306a\u3093\u3067\u3057\u3087\u3046\u4fe1\u983c\u3067\u304d\u308b\u6280\u8853\u306a\u3093\u3067\u3057\u3087\u3046\u304b\" class=\"fragment\"\/><a target=\"_blank\" href=\"#%E3%81%93%E3%81%AEwebsocket%E3%81%A8%E3%81%AF%E3%81%AA%E3%82%93%E3%81%A7%E3%81%97%E3%82%87%E3%81%86%E4%BF%A1%E9%A0%BC%E3%81%A7%E3%81%8D%E3%82%8B%E6%8A%80%E8%A1%93%E3%81%AA%E3%82%93%E3%81%A7%E3%81%97%E3%82%87%E3%81%86%E3%81%8B\"><i class=\"fa fa-link\"\/><\/a>\u2753\u3053\u306eWebSocket\u3068\u306f\u306a\u3093\u3067\u3057\u3087\u3046\uff1f\u4fe1\u983c\u3067\u304d\u308b\u6280\u8853\u306a\u3093\u3067\u3057\u3087\u3046\u304b\uff1f<\/h4>\n<p data-sourcepos=\"618:1-618:536\">WebSockets\uff08\u30a6\u30a7\u30d6\u30bd\u30b1\u30c3\u30c8\uff09\u306f\u3001Web\u30d6\u30e9\u30a6\u30b6\u3068Web\u30b5\u30fc\u30d0\u30fc\u9593\u3067\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306b\u53cc\u65b9\u5411\u901a\u4fe1\u3092\u53ef\u80fd\u306b\u3059\u308b\u901a\u4fe1\u30d7\u30ed\u30c8\u30b3\u30eb\u3067\u3059\u3002\u4e00\u5ea6\u63a5\u7d9a\u304c\u78ba\u7acb\u3055\u308c\u308b\u3068\u3001HTTP\u306e\u3088\u3046\u306a\u90fd\u5ea6\u306e\u30ea\u30af\u30a8\u30b9\u30c8\u30fb\u30ec\u30b9\u30dd\u30f3\u30b9\u3092\u5fc5\u8981\u3068\u305b\u305a\u3001\u30c7\u30fc\u30bf\u306e\u3084\u308a\u53d6\u308a\u304c\u7d99\u7d9a\u7684\u306b\u884c\u308f\u308c\u308b\u305f\u3081\u3001<strong>\u30c1\u30e3\u30c3\u30c8<\/strong>\u3001<strong>\u30aa\u30f3\u30e9\u30a4\u30f3\u30b2\u30fc\u30e0<\/strong>\u3001<strong>\u30c7\u30fc\u30bf\u30b9\u30c8\u30ea\u30fc\u30df\u30f3\u30b0<\/strong>\u306a\u3069\u306e\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u6027\u304c\u6c42\u3081\u3089\u308c\u308b\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u52b9\u7387\u7684\u306b\u5229\u7528\u3055\u308c\u307e\u3059\u3002\ufeff<\/p>\n<p data-sourcepos=\"621:1-621:39\"><a target=\"_blank\" href=\"https:\/\/ja.wikipedia.org\/wiki\/WebSocket\" class=\"autolink\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/ja.wikipedia.org\/wiki\/WebSocket<\/a><\/p>\n<h4 data-sourcepos=\"624:1-624:40\">\n<span id=\"-\u901a\u4fe1\u5185\u5bb9\u3092\u78ba\u8a8d\u3057\u3088\u3046\" class=\"fragment\"\/><a target=\"_blank\" href=\"#-%E9%80%9A%E4%BF%A1%E5%86%85%E5%AE%B9%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%97%E3%82%88%E3%81%86\"><i class=\"fa fa-link\"\/><\/a>\ud83d\udcf6 \u901a\u4fe1\u5185\u5bb9\u3092\u78ba\u8a8d\u3057\u3088\u3046<\/h4>\n<p data-sourcepos=\"626:1-627:121\">\u5b9f\u884c\u3057\u3066\u30d6\u30e9\u30a6\u30b6\u306e\u958b\u767a\u8005\u30c4\u30fc\u30eb\u3092\u8868\u793a\u3057\u307e\u3059\u3002\uff08Chrome\u306a\u3089\u300cF12\u300d\u3067\u3059\uff09<br \/><a target=\"_blank\" href=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F73f09bca-42ec-428f-86a3-dac2fe6f109f.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=7f98a2773998d8695c98919983ed2a54\" target=\"_blank\" rel=\"nofollow noopener\"><img decoding=\"async\" src=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F73f09bca-42ec-428f-86a3-dac2fe6f109f.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=7f98a2773998d8695c98919983ed2a54\" alt=\"image.png\" srcset=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F73f09bca-42ec-428f-86a3-dac2fe6f109f.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=cf64d7f1384d682c6450616bde0d43c5 1x\" data-canonical-src=\"https:\/\/qiita-image-store.s3.ap-northeast-1.amazonaws.com\/0\/546646\/73f09bca-42ec-428f-86a3-dac2fe6f109f.png\" loading=\"lazy\"\/><\/a><\/p>\n<p data-sourcepos=\"629:1-630:121\">\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u30bf\u30d6\u3092\u9078\u629e\u3057\u3066\u300cF5\u300d\u3067\u30da\u30fc\u30b8\u3092GET\u3057\u76f4\u3057\u307e\u3059\u3002<br \/><a target=\"_blank\" href=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F65ea3c3f-f00d-4f63-97e2-16ca957f0731.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=bca9f9c59ebd89b9dd5e0fe0db496274\" target=\"_blank\" rel=\"nofollow noopener\"><img decoding=\"async\" src=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F65ea3c3f-f00d-4f63-97e2-16ca957f0731.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=bca9f9c59ebd89b9dd5e0fe0db496274\" alt=\"image.png\" srcset=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F65ea3c3f-f00d-4f63-97e2-16ca957f0731.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=ec557b8ed7a1437b573cbf1c6d7fb377 1x\" data-canonical-src=\"https:\/\/qiita-image-store.s3.ap-northeast-1.amazonaws.com\/0\/546646\/65ea3c3f-f00d-4f63-97e2-16ca957f0731.png\" loading=\"lazy\"\/><\/a><\/p>\n<p data-sourcepos=\"632:1-633:121\">Name=_blazor?id=&#8230;.  Type=websocket\u306e\u901a\u4fe1\u304c\u3042\u308a\u307e\u3059<br \/><a target=\"_blank\" href=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2Fc6ff519a-9974-4c5b-a93f-41d6bbf3bd1f.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=f870c8d1233ba81ab9d6234d7175bb01\" target=\"_blank\" rel=\"nofollow noopener\"><img decoding=\"async\" src=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2Fc6ff519a-9974-4c5b-a93f-41d6bbf3bd1f.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=f870c8d1233ba81ab9d6234d7175bb01\" alt=\"image.png\" srcset=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2Fc6ff519a-9974-4c5b-a93f-41d6bbf3bd1f.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=f4270550af27ecc2e00f7bc087a3b24b 1x\" data-canonical-src=\"https:\/\/qiita-image-store.s3.ap-northeast-1.amazonaws.com\/0\/546646\/c6ff519a-9974-4c5b-a93f-41d6bbf3bd1f.png\" loading=\"lazy\"\/><\/a><\/p>\n<p data-sourcepos=\"635:1-636:121\">\u30e1\u30c3\u30bb\u30fc\u30b8\u30bf\u30d6\u3092\u898b\u308b\u3068\u2026<br \/><a target=\"_blank\" href=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2Faf2f0a07-90a9-45d9-8578-1cb5244215c6.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=e13a4b98ea12ffd15caf8fe0a74b86df\" target=\"_blank\" rel=\"nofollow noopener\"><img decoding=\"async\" src=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2Faf2f0a07-90a9-45d9-8578-1cb5244215c6.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=e13a4b98ea12ffd15caf8fe0a74b86df\" alt=\"image.png\" srcset=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2Faf2f0a07-90a9-45d9-8578-1cb5244215c6.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=7800b89358a2b7594024d2ade8450d49 1x\" data-canonical-src=\"https:\/\/qiita-image-store.s3.ap-northeast-1.amazonaws.com\/0\/546646\/af2f0a07-90a9-45d9-8578-1cb5244215c6.png\" loading=\"lazy\"\/><\/a><\/p>\n<p data-sourcepos=\"638:1-639:121\">\u300c\u5a18\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059<br \/><a target=\"_blank\" href=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2Fcc807cea-66a5-4bae-9a07-acb6303ce373.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=980298533452b1d888a0310ee972f7f2\" target=\"_blank\" rel=\"nofollow noopener\"><img decoding=\"async\" src=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2Fcc807cea-66a5-4bae-9a07-acb6303ce373.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=980298533452b1d888a0310ee972f7f2\" alt=\"image.png\" srcset=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2Fcc807cea-66a5-4bae-9a07-acb6303ce373.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=80e50607ebb0f6a64498790d3a21cc70 1x\" data-canonical-src=\"https:\/\/qiita-image-store.s3.ap-northeast-1.amazonaws.com\/0\/546646\/cc807cea-66a5-4bae-9a07-acb6303ce373.png\" loading=\"lazy\"\/><\/a><\/p>\n<p data-sourcepos=\"641:1-643:98\">\u300c\u5a18\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u77ac\u9593\uff08\u6642\u523b 06:03:02.017\uff09\u306b\u30b5\u30fc\u30d0\u30fc\u3078\u9001\u4fe1\u3055\u308c\u305f\u30e1\u30c3\u30bb\u30fc\u30b8\u304c\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<br \/>\u30d0\u30a4\u30ca\u30ea\u3067\u3059\u304c BeginInvokeDotNetFromJS&#8230; \u3068\u3044\u3046\u6587\u5b57\u5217\u304c\u542b\u307e\u308c\u3066\u304a\u308a\u3001<br \/>Blazor\u306e <code>@onclick<\/code> \u30a4\u30d9\u30f3\u30c8\u304c\u30b5\u30fc\u30d0\u30fc\u3078\u9001\u3089\u308c\u3066\u3044\u308b\u3053\u3068\u304c\u308f\u304b\u308a\u307e\u3059\u3002<\/p>\n<div data-sourcepos=\"645:1-649:3\" class=\"note info\">\n<span class=\"fa fa-fw fa-check-circle\"\/><\/p>\n<div>\n<p data-sourcepos=\"646:1-646:306\">\ud83d\udc49 \u3064\u307e\u308a Blazor Server \u3067\u306f\u3001\u30d6\u30e9\u30a6\u30b6\u3067\u306e\u30af\u30ea\u30c3\u30af\u304c <strong>\u30aa\u30f3\u30e9\u30a4\u30f3\u30b2\u30fc\u30e0<\/strong>\u3068\u540c\u3058\u6280\u8853 <strong>WebSocket<\/strong>\u3067\u30b5\u30fc\u30d0\u30fc\u306b\u5373\u6642\u9001\u4fe1\u3055\u308c\u3001\u30b5\u30fc\u30d0\u30fc\u3067\u51e6\u7406\u3055\u308c\u305f\u7d50\u679c\u304c\u518d\u3073WebSocket\u7d4c\u7531\u3067\u8fd4\u3063\u3066\u304d\u3066\u3001\u753b\u9762\u304c\u66f4\u65b0\u3055\u308c\u308b\u4ed5\u7d44\u307f\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n<p data-sourcepos=\"648:1-648:91\">\u3053\u308c\u3053\u305d\u304c\u300cAJAX\u306e\u8a18\u8ff0\u306a\u3057\u3067\u52d5\u7684\u306b\u30da\u30fc\u30b8\u304c\u5909\u5316\u3059\u308b\u300d\u79d8\u5bc6\u3067\u3059\u3002<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/details>\n<h2 data-sourcepos=\"654:1-654:36\">\n<span id=\"\uff19\u9078\u629e\u3057\u305f\u99d2\u3092\u52d5\u304b\u3059\" class=\"fragment\"\/><a target=\"_blank\" href=\"#%EF%BC%99%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%9F%E9%A7%92%E3%82%92%E5%8B%95%E3%81%8B%E3%81%99\"><i class=\"fa fa-link\"\/><\/a>\uff19\uff0e\u9078\u629e\u3057\u305f\u99d2\u3092\u52d5\u304b\u3059<\/h2>\n<p data-sourcepos=\"656:1-657:69\">\u99d2\u306e\u30a2\u30af\u30b7\u30e7\u30f3 <code>@onclick<\/code> \u3092\u30c9\u30e9\u30c3\u30b0\u7528\u306b <code>@onmousedown<\/code> \u3078\u5909\u66f4\u3057\u307e\u3059\u3002<br \/>\u30c9\u30e9\u30c3\u30b0\u306e\u79fb\u52d5\u691c\u51fa\u7528\u306b\u5ea7\u6a19\u3082\u540c\u6642\u306b\u53d6\u5f97\u3057\u307e\u3059\u3002<\/p>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"658:1-666:3\">\n<div class=\"highlight\">\n<pre><code><span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"piece @(p == Selected ? \"<\/span><span class=\"n\">selected<\/span><span class=\"s2\">\" : \"\")\"<\/span>\n     <span class=\"n\">style<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"\n        grid-row:@cssPieceRow;\n        grid-column:@cssPieceCol;\"<\/span>\n        <span class=\"o\">@<\/span><span class=\"n\">onmousedown<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"(e) =&gt; StartDrag(p, e.ClientX, e.ClientY)\"<\/span><span class=\"o\">&gt;<\/span>\n    <span class=\"o\">@<\/span><span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Label<\/span>\n<span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n<\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<p data-sourcepos=\"668:1-668:51\">\u30c9\u30e9\u30c3\u30b0\u958b\u59cb\u30a4\u30d9\u30f3\u30c8\u3092\u8a18\u8ff0\u3057\u307e\u3059\u3002<\/p>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"669:1-677:3\">\n<div class=\"highlight\">\n<pre><code>    <span class=\"c1\">\/\/ \u30c9\u30e9\u30c3\u30b0\u958b\u59cb <\/span>\n    <span class=\"k\">private<\/span> <span class=\"kt\">void<\/span> <span class=\"nf\">StartDrag<\/span><span class=\"p\">(<\/span><span class=\"nc\">Piece<\/span> <span class=\"n\">p<\/span><span class=\"p\">,<\/span> <span class=\"n\">double<\/span> <span class=\"n\">clientX<\/span><span class=\"p\">,<\/span> <span class=\"n\">double<\/span> <span class=\"n\">clientY<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"nc\">Selected<\/span> <span class=\"o\">=<\/span> <span class=\"n\">p<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">startX<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"n\">int<\/span><span class=\"p\">)<\/span><span class=\"n\">clientX<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">startY<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"n\">int<\/span><span class=\"p\">)<\/span><span class=\"n\">clientY<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p data-sourcepos=\"679:1-679:51\">\u30c9\u30e9\u30c3\u30b0\u79fb\u52d5\u30a4\u30d9\u30f3\u30c8\u3092\u8a18\u8ff0\u3057\u307e\u3059\u3002<\/p>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"680:1-714:3\">\n<div class=\"highlight\">\n<pre><code>    <span class=\"c1\">\/\/ \u30c9\u30e9\u30c3\u30b0\u79fb\u52d5<\/span>\n    <span class=\"k\">private<\/span> <span class=\"kt\">void<\/span> <span class=\"nf\">DragMove<\/span><span class=\"p\">(<\/span><span class=\"nc\">MouseEventArgs<\/span> <span class=\"n\">e<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nc\">Selected<\/span> <span class=\"o\">==<\/span> <span class=\"kc\">null<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n\n        <span class=\"c1\">\/\/ \u30de\u30a6\u30b9\u79fb\u52d5\u91cf\uff08px\u5358\u4f4d\uff09<\/span>\n        <span class=\"n\">int<\/span> <span class=\"n\">currentX<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"n\">int<\/span><span class=\"p\">)<\/span><span class=\"n\">e<\/span><span class=\"mf\">.<\/span><span class=\"nc\">ClientX<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">int<\/span> <span class=\"n\">currentY<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"n\">int<\/span><span class=\"p\">)<\/span><span class=\"n\">e<\/span><span class=\"mf\">.<\/span><span class=\"nc\">ClientY<\/span><span class=\"p\">;<\/span>\n\n        <span class=\"k\">const<\/span> <span class=\"no\">int<\/span> <span class=\"no\">cellSize<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">50<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ 1\u99d2\u306e\u30b5\u30a4\u30ba<\/span>\n        <span class=\"n\">int<\/span> <span class=\"n\">threshold<\/span> <span class=\"o\">=<\/span> <span class=\"n\">cellSize<\/span> <span class=\"o\">\/<\/span> <span class=\"mi\">2<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ 50px\u306e\u534a\u5206<\/span>\n\n        <span class=\"c1\">\/\/ 1\u99d2\u306e\u534a\u5206\u4ee5\u4e0a\u30c9\u30e9\u30c3\u30b0\u3055\u305b\u305f\u3089\u3001\u79fb\u52d5\u3055\u305b\u308b<\/span>\n        <span class=\"n\">int<\/span> <span class=\"n\">rowStep<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"n\">colStep<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\n        <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nc\">Math<\/span><span class=\"mf\">.<\/span><span class=\"nb\">Abs<\/span><span class=\"p\">(<\/span><span class=\"n\">currentX<\/span> <span class=\"o\">-<\/span> <span class=\"n\">startX<\/span><span class=\"p\">)<\/span> <span class=\"o\">&gt;<\/span> <span class=\"n\">threshold<\/span><span class=\"p\">)<\/span>\n        <span class=\"p\">{<\/span>\n            <span class=\"n\">colStep<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"n\">currentX<\/span> <span class=\"o\">&gt;<\/span> <span class=\"n\">startX<\/span><span class=\"p\">)<\/span> <span class=\"o\">?<\/span> <span class=\"mi\">1<\/span> <span class=\"o\">:<\/span> <span class=\"o\">-<\/span><span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\n            <span class=\"n\">startX<\/span> <span class=\"o\">+=<\/span> <span class=\"n\">colStep<\/span> <span class=\"o\">*<\/span> <span class=\"n\">cellSize<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span>\n        <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nc\">Math<\/span><span class=\"mf\">.<\/span><span class=\"nb\">Abs<\/span><span class=\"p\">(<\/span><span class=\"n\">currentY<\/span> <span class=\"o\">-<\/span> <span class=\"n\">startY<\/span><span class=\"p\">)<\/span> <span class=\"o\">&gt;<\/span> <span class=\"n\">threshold<\/span><span class=\"p\">)<\/span>\n        <span class=\"p\">{<\/span>\n            <span class=\"n\">rowStep<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"n\">currentY<\/span> <span class=\"o\">&gt;<\/span> <span class=\"n\">startY<\/span><span class=\"p\">)<\/span> <span class=\"o\">?<\/span> <span class=\"mi\">1<\/span> <span class=\"o\">:<\/span> <span class=\"o\">-<\/span><span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\n            <span class=\"n\">startY<\/span> <span class=\"o\">+=<\/span> <span class=\"n\">rowStep<\/span> <span class=\"o\">*<\/span> <span class=\"n\">cellSize<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span>\n\n        <span class=\"c1\">\/\/ \u6b21\u306e\u4f4d\u7f6e<\/span>\n        <span class=\"n\">int<\/span> <span class=\"n\">newRow<\/span> <span class=\"o\">=<\/span> <span class=\"nc\">Selected<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Row<\/span> <span class=\"o\">+<\/span> <span class=\"n\">rowStep<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">int<\/span> <span class=\"n\">newCol<\/span> <span class=\"o\">=<\/span> <span class=\"nc\">Selected<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Col<\/span> <span class=\"o\">+<\/span> <span class=\"n\">colStep<\/span><span class=\"p\">;<\/span>\n\n        <span class=\"c1\">\/\/ \u99d2\u4f4d\u7f6e\u306e\u79fb\u52d5<\/span>\n        <span class=\"nc\">Selected<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Row<\/span> <span class=\"o\">=<\/span> <span class=\"n\">newRow<\/span><span class=\"p\">;<\/span>\n        <span class=\"nc\">Selected<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Col<\/span> <span class=\"o\">=<\/span> <span class=\"n\">newCol<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p data-sourcepos=\"716:1-716:54\">\u30c9\u30e9\u30c3\u30b0\u306e\u7d42\u4e86\u30a4\u30d9\u30f3\u30c8\u3092\u8a18\u8ff0\u3057\u307e\u3059\u3002<\/p>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"717:1-723:3\">\n<div class=\"highlight\">\n<pre><code>    <span class=\"c1\">\/\/ \u30c9\u30e9\u30c3\u30b0\u7d42\u4e86<\/span>\n    <span class=\"k\">private<\/span> <span class=\"kt\">void<\/span> <span class=\"nf\">EndDrag<\/span><span class=\"p\">()<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"nc\">Selected<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">null<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p data-sourcepos=\"725:1-725:69\">\u99d2\u3092\u30c9\u30e9\u30c3\u30b0\u3057\u3084\u3059\u3044\u3088\u3046\u306b\u30b9\u30bf\u30a4\u30eb\u3092\u8ffd\u52a0\u3057\u307e\u3059<\/p>\n<div class=\"code-frame\" data-lang=\"diff_css\" data-sourcepos=\"726:1-740:3\">\n<div class=\"highlight\">\n<pre><code>    <span class=\"nc\">.piece<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"nx\">red<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"nx\">white<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">font-weight<\/span><span class=\"p\">:<\/span> <span class=\"nb\">bold<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"nb\">flex<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">align-items<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">justify-content<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">z-index<\/span><span class=\"p\">:<\/span> <span class=\"m\">1<\/span><span class=\"p\">;<\/span>\n        \n<span class=\"hil\"><span class=\"err\">+<\/span>       <span class=\"nl\">cursor<\/span><span class=\"p\">:<\/span> <span class=\"nb\">pointer<\/span><span class=\"p\">;<\/span>\n<\/span><span class=\"hil\"><span class=\"err\">+<\/span>       <span class=\"py\">user-select<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n<\/span><span class=\"hil\"><span class=\"err\">+<\/span>       <span class=\"py\">touch-action<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n<\/span>    <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p data-sourcepos=\"742:1-745:42\">\u30c9\u30e9\u30c3\u30b0\u79fb\u52d5\u30a4\u30d9\u30f3\u30c8\u306f\u3001\u30c9\u30e9\u30c3\u30b0\u958b\u59cb\u3068\u540c\u69d8\u306b\u300c\u99d2\u300d\u306b\u66f8\u304d\u305f\u3044\u3068\u3053\u308d\u3067\u3059\u304c\u305d\u308c\u3060\u3068<strong>\u3046\u307e\u304f\u3044\u304d\u307e\u305b\u3093\u3002<\/strong><br \/>\u300c\u99d2\u300d\u306e\u7bc4\u56f2\u3092\u8d85\u3048\u3066\u30de\u30a6\u30b9\u3092\u79fb\u52d5\u3055\u305b\u305f\u3068\u304d\u306b\u300c\u99d2\u300d\u3092\u79fb\u52d5\u3055\u305b\u308b\u306e\u3067\u3001\u300c\u99d2\u300d\u306e\u7bc4\u56f2\u5916\u3067\u3082\u30a4\u30d9\u30f3\u30c8\u3092\u53d6\u308c\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<br \/>\u305d\u3053\u3067\u3001\u76e4\u9762 <code><\/p>\n<div class=\"board\">\u30a8\u30ec\u30e1\u30f3\u30c8\u3078\u3001\u30c9\u30e9\u30c3\u30b0\u79fb\u52d5\u30a4\u30d9\u30f3\u30c8\u306e\u547c\u3073\u51fa\u3057\u3092\u8a18\u8ff0\u3057\u307e\u3059\u3002<br \/>\n\uff08\u30c9\u30e9\u30c3\u30b0\u306e\u7d42\u4e86\u3082\u540c\u69d8\u3067\u3059\uff09<\/p>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"746:1-750:3\">\n<div class=\"highlight\">\n<pre><code><span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"board\"<\/span>\n     <span class=\"o\">@<\/span><span class=\"n\">onmousemove<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"(e) =&gt; DragMove(e)\"<\/span>\n     <span class=\"o\">@<\/span><span class=\"n\">onmouseup<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"EndDrag\"<\/span><span class=\"o\">&gt;<\/span>\n<\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<p data-sourcepos=\"752:1-752:24\">\u52d5\u4f5c\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/p>\n<details>\n<summary><b>=======================<br \/>\u00a0\u00a0\u00a0\u52d5\u753b\u3092\u8868\u793a\uff08\u6298\u308a\u305f\u305f\u307f\uff09<br \/>\u00a0========================<\/b><\/summary>\n<div>\n<p data-sourcepos=\"756:1-756:155\"><a target=\"_blank\" href=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2Fab9ded33-1eaf-4913-b73c-bb716a0154cd.gif?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=4a06370bc13477185a34f2adc79469d7\" target=\"_blank\" rel=\"nofollow noopener\"><img decoding=\"async\" src=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2Fab9ded33-1eaf-4913-b73c-bb716a0154cd.gif?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=4a06370bc13477185a34f2adc79469d7\" alt=\"\u30ec\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0 2025-09-30 053541.gif\" srcset=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2Fab9ded33-1eaf-4913-b73c-bb716a0154cd.gif?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=b665064898e8e83895641edc8222b10e 1x\" data-canonical-src=\"https:\/\/qiita-image-store.s3.ap-northeast-1.amazonaws.com\/0\/546646\/ab9ded33-1eaf-4913-b73c-bb716a0154cd.gif\" loading=\"lazy\"\/><\/a><\/p>\n<\/div>\n<\/details>\n<div data-sourcepos=\"761:1-763:3\" class=\"note info\">\n<span class=\"fa fa-fw fa-check-circle\"\/><\/p>\n<div>\n<p data-sourcepos=\"762:1-762:33\">\u7121\u4e8b\u306b\u99d2\u304c\u52d5\u304d\u307e\u3057\u305f\uff01<\/p>\n<\/div>\n<\/div>\n<h2 data-sourcepos=\"765:1-765:24\">\n<span id=\"\uff11\uff10\u4ed5\u4e0a\u3052\u308b\" class=\"fragment\"\/><a target=\"_blank\" href=\"#%EF%BC%91%EF%BC%90%E4%BB%95%E4%B8%8A%E3%81%92%E3%82%8B\"><i class=\"fa fa-link\"\/><\/a>\uff11\uff10\uff0e\u4ed5\u4e0a\u3052\u308b<\/h2>\n<p data-sourcepos=\"766:1-766:69\">\u99d2\u306f\u52d5\u304f\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u304c\u307e\u3060\u307e\u3060\u4e0d\u5b8c\u5168\u3067\u3059\u3002<\/p>\n<p data-sourcepos=\"768:1-771:34\">\u274c \u99d2\u304c\u58c1\u306b\u7a81\u5165\u3067\u304d\u3066\u3057\u307e\u3046<br \/>\u274c \u99d2\u540c\u58eb\u304c\u91cd\u306a\u308b\u79fb\u52d5\u3082\u3067\u304d\u3066\u3057\u307e\u3046<br \/>\u274c \u99d2\u306e\u30b5\u30a4\u30ba\u304c 1\u00d71 \u56fa\u5b9a<br \/>\u274c \u99d2\u306e\u80cc\u666f\u8272\u304c\u5168\u90e8\u540c\u3058<\/p>\n<div data-sourcepos=\"773:1-775:3\" class=\"note warn\">\n<span class=\"fa fa-fw fa-exclamation-circle\"\/><\/p>\n<div>\n<p data-sourcepos=\"774:1-774:72\">Blazor\u306e\u4f53\u9a13\u304b\u3089\u306f\u5c11\u3057\u96e2\u308c\u308b\u306e\u3067\u4e00\u6c17\u306b\u4ed5\u4e0a\u3052\u307e\u3059\u3002<\/p>\n<\/div>\n<\/div>\n<h4 data-sourcepos=\"778:1-778:31\">\n<span id=\"\u99d2class\u3092\u62e1\u5f35\u3057\u307e\u3059\" class=\"fragment\"\/><a target=\"_blank\" href=\"#%E9%A7%92class%E3%82%92%E6%8B%A1%E5%BC%B5%E3%81%97%E3%81%BE%E3%81%99\"><i class=\"fa fa-link\"\/><\/a>\u99d2Class\u3092\u62e1\u5f35\u3057\u307e\u3059<\/h4>\n<ul data-sourcepos=\"779:1-780:50\">\n<li data-sourcepos=\"779:1-779:59\">\u5e45\u3068\u9ad8\u3055\u3001\u80cc\u666f\u8272\u306e\u30af\u30e9\u30b9\u540d\u3092\u8ffd\u52a0\u3057\u307e\u3059<\/li>\n<li data-sourcepos=\"780:1-780:50\">\u30b3\u30f3\u30b9\u30c8\u30e9\u30af\u30bf\u3082\u8ffd\u52a0\u3057\u3066\u304a\u304d\u307e\u3059<\/li>\n<\/ul>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"781:1-802:3\">\n<div class=\"highlight\">\n<pre><code><span class=\"c1\">\/\/ \u99d2\u306e\u5b9a\u7fa9<\/span>\n<span class=\"k\">private<\/span> <span class=\"kt\">class<\/span> <span class=\"nc\">Piece<\/span>\n<span class=\"p\">{<\/span>\n    <span class=\"k\">public<\/span> <span class=\"kt\">int<\/span> <span class=\"nc\">Row<\/span> <span class=\"p\">{<\/span> <span class=\"n\">get<\/span><span class=\"p\">;<\/span> <span class=\"n\">set<\/span><span class=\"p\">;<\/span> <span class=\"p\">}<\/span>\n    <span class=\"k\">public<\/span> <span class=\"kt\">int<\/span> <span class=\"nc\">Col<\/span> <span class=\"p\">{<\/span> <span class=\"n\">get<\/span><span class=\"p\">;<\/span> <span class=\"n\">set<\/span><span class=\"p\">;<\/span> <span class=\"p\">}<\/span>\n    <span class=\"k\">public<\/span> <span class=\"kt\">int<\/span> <span class=\"nc\">Width<\/span> <span class=\"p\">{<\/span> <span class=\"n\">get<\/span><span class=\"p\">;<\/span> <span class=\"n\">set<\/span><span class=\"p\">;<\/span> <span class=\"p\">}<\/span>\n    <span class=\"k\">public<\/span> <span class=\"kt\">int<\/span> <span class=\"nc\">Height<\/span> <span class=\"p\">{<\/span> <span class=\"n\">get<\/span><span class=\"p\">;<\/span> <span class=\"n\">set<\/span><span class=\"p\">;<\/span> <span class=\"p\">}<\/span>\n    <span class=\"k\">public<\/span> <span class=\"kt\">string<\/span> <span class=\"nc\">Label<\/span> <span class=\"p\">{<\/span> <span class=\"n\">get<\/span><span class=\"p\">;<\/span> <span class=\"n\">set<\/span><span class=\"p\">;<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"n\">string<\/span><span class=\"mf\">.<\/span><span class=\"k\">Empty<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">public<\/span> <span class=\"kt\">string<\/span> <span class=\"nc\">ColorClass<\/span> <span class=\"p\">{<\/span> <span class=\"n\">get<\/span><span class=\"p\">;<\/span> <span class=\"n\">set<\/span><span class=\"p\">;<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"n\">string<\/span><span class=\"mf\">.<\/span><span class=\"k\">Empty<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"k\">public<\/span> <span class=\"kt\">Piece<\/span><span class=\"p\">(<\/span><span class=\"n\">string<\/span> <span class=\"n\">label<\/span><span class=\"p\">,<\/span> <span class=\"n\">int<\/span> <span class=\"n\">col<\/span><span class=\"p\">,<\/span> <span class=\"n\">int<\/span> <span class=\"n\">row<\/span><span class=\"p\">,<\/span> <span class=\"n\">int<\/span> <span class=\"n\">w<\/span><span class=\"p\">,<\/span> <span class=\"n\">int<\/span> <span class=\"n\">h<\/span><span class=\"p\">,<\/span> <span class=\"n\">string<\/span> <span class=\"n\">colorClass<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">\"piece-default\"<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"nc\">Label<\/span> <span class=\"o\">=<\/span> <span class=\"n\">label<\/span><span class=\"p\">;<\/span>\n        <span class=\"nc\">Row<\/span> <span class=\"o\">=<\/span> <span class=\"n\">row<\/span><span class=\"p\">;<\/span>\n        <span class=\"nc\">Col<\/span> <span class=\"o\">=<\/span> <span class=\"n\">col<\/span><span class=\"p\">;<\/span>\n        <span class=\"nc\">Width<\/span> <span class=\"o\">=<\/span> <span class=\"n\">w<\/span><span class=\"p\">;<\/span>\n        <span class=\"nc\">Height<\/span> <span class=\"o\">=<\/span> <span class=\"n\">h<\/span><span class=\"p\">;<\/span>\n        <span class=\"nc\">ColorClass<\/span> <span class=\"o\">=<\/span> <span class=\"n\">colorClass<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/div>\n<\/div>\n<h4 data-sourcepos=\"804:1-804:35\">\n<span id=\"\u5168\u3066\u306e\u99d2\u3092\u5b9f\u88c5\u3057\u307e\u3059\" class=\"fragment\"\/><a target=\"_blank\" href=\"#%E5%85%A8%E3%81%A6%E3%81%AE%E9%A7%92%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%BE%E3%81%99\"><i class=\"fa fa-link\"\/><\/a>\u5168\u3066\u306e\u99d2\u3092\u5b9f\u88c5\u3057\u307e\u3059<\/h4>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"805:1-825:3\">\n<div class=\"highlight\">\n<pre><code><span class=\"k\">private<\/span> <span class=\"kt\">void<\/span> <span class=\"nf\">InitPieces<\/span><span class=\"p\">()<\/span>\n<span class=\"p\">{<\/span>\n    <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Clear<\/span><span class=\"p\">();<\/span>\n    <span class=\"c1\">\/\/ \u99d2\u540d\u3001\u99d2\u306e\u5de6\u4e0a\u306e \u5217\u3001\u884c\u3001\u5e45\u3001\u9ad8\u3055\u3001\u8272\u306e\u30af\u30e9\u30b9\u540d<\/span>\n    <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Piece<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"\u7236\"<\/span><span class=\"p\">,<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"Color_\u7236\"<\/span><span class=\"p\">));<\/span>\n    <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Piece<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"\u5a18\"<\/span><span class=\"p\">,<\/span> <span class=\"mi\">3<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"Color_\u5a18\"<\/span><span class=\"p\">));<\/span>\n    <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Piece<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"\u6bcd\"<\/span><span class=\"p\">,<\/span> <span class=\"mi\">5<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"Color_\u6bcd\"<\/span><span class=\"p\">));<\/span>\n    <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Piece<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"\u624b\u4ee3\"<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">3<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"Color_\u624b\u4ee3\"<\/span><span class=\"p\">));<\/span>\n    <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Piece<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"\u5927\u756a\u982d\"<\/span><span class=\"p\">,<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span> <span class=\"mi\">3<\/span><span class=\"p\">,<\/span> <span class=\"mi\">4<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"Color_\u5927\u756a\u982d\"<\/span><span class=\"p\">));<\/span>\n    <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Piece<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"\u5144\u5ac1\"<\/span><span class=\"p\">,<\/span> <span class=\"mi\">6<\/span><span class=\"p\">,<\/span> <span class=\"mi\">3<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"Color_\u5144\u5ac1\"<\/span><span class=\"p\">));<\/span>\n    <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Piece<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"\u4e01\u7a1a\"<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">4<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"Color_\u4e01\u7a1a\"<\/span><span class=\"p\">));<\/span>\n    <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Piece<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"\u5973\u4e2d\"<\/span><span class=\"p\">,<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span> <span class=\"mi\">4<\/span><span class=\"p\">,<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"Color_\u5973\u4e2d\"<\/span><span class=\"p\">));<\/span>\n    <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Piece<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"\u756a\u982d\"<\/span><span class=\"p\">,<\/span> <span class=\"mi\">4<\/span><span class=\"p\">,<\/span> <span class=\"mi\">4<\/span><span class=\"p\">,<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"Color_\u756a\u982d\"<\/span><span class=\"p\">));<\/span>\n    <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Piece<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"\u4e01\u7a1a\"<\/span><span class=\"p\">,<\/span> <span class=\"mi\">6<\/span><span class=\"p\">,<\/span> <span class=\"mi\">4<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"Color_\u4e01\u7a1a\"<\/span><span class=\"p\">));<\/span>\n    <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Piece<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"\u756a\u72ac\"<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">5<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"Color_\u756a\u72ac\"<\/span><span class=\"p\">));<\/span>\n    <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Piece<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"\u7956\u7236\"<\/span><span class=\"p\">,<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span> <span class=\"mi\">5<\/span><span class=\"p\">,<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"Color_\u7956\u7236\"<\/span><span class=\"p\">));<\/span>\n    <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Piece<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"\u7956\u6bcd\"<\/span><span class=\"p\">,<\/span> <span class=\"mi\">4<\/span><span class=\"p\">,<\/span> <span class=\"mi\">5<\/span><span class=\"p\">,<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"Color_\u7956\u6bcd\"<\/span><span class=\"p\">));<\/span>\n    <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Piece<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"\u4e01\u7a1a\"<\/span><span class=\"p\">,<\/span> <span class=\"mi\">6<\/span><span class=\"p\">,<\/span> <span class=\"mi\">5<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"Color_\u4e01\u7a1a\"<\/span><span class=\"p\">));<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/div>\n<\/div>\n<h4 data-sourcepos=\"827:1-827:44\">\n<span id=\"\u99d2\u8272\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u8ffd\u52a0\u3057\u307e\u3059\" class=\"fragment\"\/><a target=\"_blank\" href=\"#%E9%A7%92%E8%89%B2%E3%81%AE%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%BE%E3%81%99\"><i class=\"fa fa-link\"\/><\/a>\u99d2\u8272\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u8ffd\u52a0\u3057\u307e\u3059<\/h4>\n<div class=\"code-frame\" data-lang=\"css\" data-sourcepos=\"829:1-878:3\">\n<div class=\"highlight\">\n<pre><code>    <span class=\"c\">\/* \u99d2\u8272 *\/<\/span>\n    <span class=\"nc\">.Color_\u7236<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"nx\">#b9bbdd<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nc\">.Color_\u5a18<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"nx\">#e4bdc3<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nc\">.Color_\u6bcd<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"nx\">#e9cccc<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nc\">.Color_\u624b\u4ee3<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"nx\">#f7dcb4<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nc\">.Color_\u5927\u756a\u982d<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"nx\">#dfbfaa<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nc\">.Color_\u5144\u5ac1<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"nx\">#d2e7d4<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nc\">.Color_\u4e01\u7a1a<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"nx\">#e9e3cc<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nc\">.Color_\u5973\u4e2d<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"nx\">#f3e0e3<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nc\">.Color_\u756a\u982d<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"nx\">#ddcdc1<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nc\">.Color_\u756a\u72ac<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"nx\">#f7f0f1<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nc\">.Color_\u7956\u7236<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"nx\">#adafdf<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nc\">.Color_\u7956\u6bcd<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"nx\">#daadad<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/div>\n<\/div>\n<h4 data-sourcepos=\"880:1-880:89\">\n<span id=\"\u99d2\u306e\u30a8\u30ec\u30e1\u30f3\u30c8\u3067\u80cc\u666f\u8272\u5e45\u9ad8\u3055\u3092\u63cf\u753b\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3059\" class=\"fragment\"\/><a target=\"_blank\" href=\"#%E9%A7%92%E3%81%AE%E3%82%A8%E3%83%AC%E3%83%A1%E3%83%B3%E3%83%88%E3%81%A7%E8%83%8C%E6%99%AF%E8%89%B2%E5%B9%85%E9%AB%98%E3%81%95%E3%82%92%E6%8F%8F%E7%94%BB%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%97%E3%81%BE%E3%81%99\"><i class=\"fa fa-link\"\/><\/a>\u99d2\u306e\u30a8\u30ec\u30e1\u30f3\u30c8\u3067\u80cc\u666f\u8272\u3001\u5e45\u3001\u9ad8\u3055\u3092\u63cf\u753b\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3059<\/h4>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"882:1-898:3\">\n<div class=\"highlight\">\n<pre><code>    <span class=\"o\">@<\/span><span class=\"k\">foreach<\/span> <span class=\"p\">(<\/span><span class=\"nc\">Piece<\/span> <span class=\"n\">p<\/span> <span class=\"n\">in<\/span> <span class=\"nc\">Pieces<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"k\">var<\/span> <span class=\"n\">cssPieceRow<\/span> <span class=\"o\">=<\/span> <span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Row<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\n        <span class=\"k\">var<\/span> <span class=\"n\">cssPieceCol<\/span> <span class=\"o\">=<\/span> <span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Col<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\n\n        <span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"piece @(p.ColorClass) @(p == Selected ? \"<\/span><span class=\"n\">selected<\/span><span class=\"s2\">\" : \"\")\"<\/span>\n             <span class=\"n\">style<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"\n                grid-row:@cssPieceRow;\n                grid-column:@cssPieceCol;\n                width:@(p.Width * 50)px;\n                height:@(p.Height * 50)px;\"<\/span>\n             <span class=\"o\">@<\/span><span class=\"n\">onmousedown<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"(e) =&gt; StartDrag(p, e.ClientX, e.ClientY)\"<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">@<\/span><span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Label<\/span>\n        <span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n    <span class=\"p\">}<\/span>\n<\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<h4 data-sourcepos=\"900:1-900:41\">\n<span id=\"\u99d2\u306e\u79fb\u52d5\u5224\u5b9a\u3092\u8ffd\u52a0\u3057\u307e\u3059\" class=\"fragment\"\/><a target=\"_blank\" href=\"#%E9%A7%92%E3%81%AE%E7%A7%BB%E5%8B%95%E5%88%A4%E5%AE%9A%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%BE%E3%81%99\"><i class=\"fa fa-link\"\/><\/a>\u99d2\u306e\u79fb\u52d5\u5224\u5b9a\u3092\u8ffd\u52a0\u3057\u307e\u3059<\/h4>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"902:1-946:3\">\n<div class=\"highlight\">\n<pre><code>    <span class=\"c1\">\/\/------------------------------------------------<\/span>\n    <span class=\"c1\">\/\/ \u79fb\u52d5\u3057\u3066\u826f\u3044\u304b\u5224\u5b9a\u3059\u308b<\/span>\n    <span class=\"c1\">\/\/------------------------------------------------<\/span>\n    <span class=\"k\">private<\/span> <span class=\"kt\">bool<\/span> <span class=\"nf\">CanMove<\/span><span class=\"p\">(<\/span><span class=\"nc\">Piece<\/span> <span class=\"n\">p<\/span><span class=\"p\">,<\/span> <span class=\"n\">int<\/span> <span class=\"n\">newRow<\/span><span class=\"p\">,<\/span> <span class=\"n\">int<\/span> <span class=\"n\">newCol<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/ ----- \u76e4\u5916\u306f\u7981\u6b62 -----<\/span>\n        <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"n\">newRow<\/span> <span class=\"o\"> <span class=\"mi\">0<\/span> <span class=\"o\">||<\/span> <span class=\"n\">newRow<\/span> <span class=\"o\">+<\/span> <span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Height<\/span> <span class=\"o\">&gt;<\/span> <span class=\"nc\">MaxRows<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>\n        <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"n\">newCol<\/span> <span class=\"o\"> <span class=\"mi\">0<\/span> <span class=\"o\">||<\/span> <span class=\"n\">newCol<\/span> <span class=\"o\">+<\/span> <span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Width<\/span> <span class=\"o\">&gt;<\/span> <span class=\"nc\">MaxCols<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>\n\n        <span class=\"c1\">\/\/ ----- \u58c1\u30bb\u30eb\u3068\u306e\u885d\u7a81 -----<\/span>\n        <span class=\"n\">bool<\/span> <span class=\"n\">blocked<\/span> <span class=\"o\">=<\/span> <span class=\"nc\">Enumerable<\/span><span class=\"mf\">.<\/span><span class=\"nb\">Range<\/span><span class=\"p\">(<\/span><span class=\"n\">newRow<\/span><span class=\"p\">,<\/span> <span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Height<\/span><span class=\"p\">)<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Any<\/span><span class=\"p\">(<\/span><span class=\"n\">r<\/span> <span class=\"o\">=&gt;<\/span>\n            <span class=\"nc\">Enumerable<\/span><span class=\"mf\">.<\/span><span class=\"nb\">Range<\/span><span class=\"p\">(<\/span><span class=\"n\">newCol<\/span><span class=\"p\">,<\/span> <span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Width<\/span><span class=\"p\">)<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Any<\/span><span class=\"p\">(<\/span><span class=\"n\">c<\/span> <span class=\"o\">=&gt;<\/span>\n                <span class=\"nc\">Board<\/span><span class=\"p\">[<\/span><span class=\"n\">r<\/span><span class=\"p\">,<\/span> <span class=\"n\">c<\/span><span class=\"p\">]<\/span> <span class=\"o\">==<\/span> <span class=\"mi\">1<\/span><span class=\"p\">));<\/span>\n        <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"n\">blocked<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>\n\n        <span class=\"c1\">\/\/ \u51fa\u53e3\u5224\u5b9a\uff08\u5a18\u3060\u3051OK\uff09<\/span>\n        <span class=\"n\">bool<\/span> <span class=\"n\">inExit<\/span> <span class=\"o\">=<\/span> <span class=\"nc\">Enumerable<\/span><span class=\"mf\">.<\/span><span class=\"nb\">Range<\/span><span class=\"p\">(<\/span><span class=\"n\">newRow<\/span><span class=\"p\">,<\/span> <span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Height<\/span><span class=\"p\">)<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Any<\/span><span class=\"p\">(<\/span><span class=\"n\">r<\/span> <span class=\"o\">=&gt;<\/span>\n            <span class=\"nc\">Enumerable<\/span><span class=\"mf\">.<\/span><span class=\"nb\">Range<\/span><span class=\"p\">(<\/span><span class=\"n\">newCol<\/span><span class=\"p\">,<\/span> <span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Width<\/span><span class=\"p\">)<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Any<\/span><span class=\"p\">(<\/span><span class=\"n\">c<\/span> <span class=\"o\">=&gt;<\/span>\n                <span class=\"nc\">Board<\/span><span class=\"p\">[<\/span><span class=\"n\">r<\/span><span class=\"p\">,<\/span> <span class=\"n\">c<\/span><span class=\"p\">]<\/span> <span class=\"o\">==<\/span> <span class=\"mi\">9<\/span><span class=\"p\">));<\/span>\n        <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"n\">inExit<\/span><span class=\"p\">)<\/span>\n        <span class=\"p\">{<\/span>\n            <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Label<\/span> <span class=\"o\">==<\/span> <span class=\"s2\">\"\u5a18\"<\/span><span class=\"p\">)<\/span>\n            <span class=\"p\">{<\/span>\n                <span class=\"nf\">GameClear<\/span><span class=\"p\">();<\/span>\n                <span class=\"k\">return<\/span> <span class=\"kc\">true<\/span><span class=\"p\">;<\/span>\n            <span class=\"p\">}<\/span>\n            <span class=\"k\">else<\/span>\n            <span class=\"p\">{<\/span>\n                <span class=\"nf\">ShowWarning<\/span><span class=\"p\">();<\/span>\n                <span class=\"k\">return<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>\n            <span class=\"p\">}<\/span>\n        <span class=\"p\">}<\/span>\n\n        <span class=\"c1\">\/\/ \u4ed6\u99d2\u3068\u306e\u885d\u7a81<\/span>\n        <span class=\"k\">foreach<\/span> <span class=\"p\">(<\/span><span class=\"k\">var<\/span> <span class=\"n\">o<\/span> <span class=\"n\">in<\/span> <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Where<\/span><span class=\"p\">(<\/span><span class=\"n\">o<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"n\">o<\/span> <span class=\"o\">!=<\/span> <span class=\"n\">p<\/span><span class=\"p\">))<\/span>\n        <span class=\"p\">{<\/span>\n            <span class=\"n\">bool<\/span> <span class=\"n\">overlapX<\/span> <span class=\"o\">=<\/span> <span class=\"n\">newCol<\/span> <span class=\"o\"> <span class=\"n\">o<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Col<\/span> <span class=\"o\">+<\/span> <span class=\"n\">o<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Width<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"n\">newCol<\/span> <span class=\"o\">+<\/span> <span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Width<\/span> <span class=\"o\">&gt;<\/span> <span class=\"n\">o<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Col<\/span><span class=\"p\">;<\/span>\n            <span class=\"n\">bool<\/span> <span class=\"n\">overlapY<\/span> <span class=\"o\">=<\/span> <span class=\"n\">newRow<\/span> <span class=\"o\"> <span class=\"n\">o<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Row<\/span> <span class=\"o\">+<\/span> <span class=\"n\">o<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Height<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"n\">newRow<\/span> <span class=\"o\">+<\/span> <span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Height<\/span> <span class=\"o\">&gt;<\/span> <span class=\"n\">o<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Row<\/span><span class=\"p\">;<\/span>\n            <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"n\">overlapX<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"n\">overlapY<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span>\n\n        <span class=\"k\">return<\/span> <span class=\"kc\">true<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n<\/span><\/span><\/span><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<h4 data-sourcepos=\"948:1-948:56\">\n<span id=\"\u99d2\u304c\u51fa\u53e3\u306b\u6765\u305f\u6642\u306e\u51e6\u7406\u3092\u8ffd\u52a0\u3057\u307e\u3059\" class=\"fragment\"\/><a target=\"_blank\" href=\"#%E9%A7%92%E3%81%8C%E5%87%BA%E5%8F%A3%E3%81%AB%E6%9D%A5%E3%81%9F%E6%99%82%E3%81%AE%E5%87%A6%E7%90%86%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%BE%E3%81%99\"><i class=\"fa fa-link\"\/><\/a>\u99d2\u304c\u51fa\u53e3\u306b\u6765\u305f\u6642\u306e\u51e6\u7406\u3092\u8ffd\u52a0\u3057\u307e\u3059<\/h4>\n<ul data-sourcepos=\"949:1-950:47\">\n<li data-sourcepos=\"949:1-949:47\">\u5a18\u304c\u51fa\u53e3\u306b\u6765\u305f\u3089\u30b2\u30fc\u30e0\u30af\u30ea\u30a2\u30fc<\/li>\n<li data-sourcepos=\"950:1-950:47\">\u5a18\u4ee5\u5916\u304c\u51fa\u53e3\u306b\u6765\u305f\u3089\u8b66\u544a\u3092\u8868\u793a<\/li>\n<\/ul>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"951:1-969:3\">\n<div class=\"highlight\">\n<pre><code>    <span class=\"k\">private<\/span> <span class=\"kt\">async<\/span> <span class=\"n\">void<\/span> <span class=\"nf\">GameClear<\/span><span class=\"p\">()<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"n\">isCleared<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">true<\/span><span class=\"p\">;<\/span>\n        <span class=\"nf\">StateHasChanged<\/span><span class=\"p\">();<\/span>\n        <span class=\"n\">await<\/span> <span class=\"nc\">Task<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Delay<\/span><span class=\"p\">(<\/span><span class=\"mi\">5000<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">isCleared<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>\n        <span class=\"nf\">StateHasChanged<\/span><span class=\"p\">();<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"k\">private<\/span> <span class=\"kt\">async<\/span> <span class=\"n\">void<\/span> <span class=\"nf\">ShowWarning<\/span><span class=\"p\">()<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"n\">isWarning<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">true<\/span><span class=\"p\">;<\/span>\n        <span class=\"nf\">StateHasChanged<\/span><span class=\"p\">();<\/span>\n        <span class=\"n\">await<\/span> <span class=\"nc\">Task<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Delay<\/span><span class=\"p\">(<\/span><span class=\"mi\">3000<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">isWarning<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>\n        <span class=\"nf\">StateHasChanged<\/span><span class=\"p\">();<\/span>\n    <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/div>\n<\/div>\n<h4 data-sourcepos=\"971:1-971:78\">\n<span id=\"html\u3078\u30b2\u30fc\u30e0\u30af\u30ea\u30a2\u306a\u3069\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u8868\u793a\u3092\u8ffd\u52a0\u3057\u307e\u3059\" class=\"fragment\"\/><a target=\"_blank\" href=\"#html%E3%81%B8%E3%82%B2%E3%83%BC%E3%83%A0%E3%82%AF%E3%83%AA%E3%82%A2%E3%81%AA%E3%81%A9%E3%81%AE%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E8%A1%A8%E7%A4%BA%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%BE%E3%81%99\"><i class=\"fa fa-link\"\/><\/a>html\u3078\u30b2\u30fc\u30e0\u30af\u30ea\u30a2\u306a\u3069\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u8868\u793a\u3092\u8ffd\u52a0\u3057\u307e\u3059<\/h4>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"973:1-983:3\">\n<div class=\"highlight\">\n<pre><code><span class=\"o\">@<\/span><span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"n\">isCleared<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">{<\/span>\n    <span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"game-message\"<\/span><span class=\"o\">&gt;<\/span><span class=\"err\">\ud83c\udf89<\/span><span class=\"n\">\u30af\u30ea\u30a2<\/span><span class=\"err\">\ud83c\udf89<\/span><span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"o\">@<\/span><span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"n\">isWarning<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">{<\/span>\n    <span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"game-message\"<\/span><span class=\"o\">&gt;<\/span><span class=\"n\">\u7384\u95a2\u3092\u51fa\u3066\u3088\u3044\u306e\u306f\u5a18\u3060\u3051<\/span><span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n<span class=\"p\">}<\/span>\n<\/span><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<div data-sourcepos=\"984:1-986:3\" class=\"note info\">\n<span class=\"fa fa-fw fa-check-circle\"\/><\/p>\n<div>\n<p data-sourcepos=\"985:1-985:135\">\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u3042\u3089\u304b\u3058\u3081\u6e96\u5099\u3057\u3066\u304a\u304d\u3001C#\u306e\u30d5\u30e9\u30b0\u5236\u5fa1\u3067\u8868\u793a\u3092ON\/OFF\u3059\u308b\u306e\u3082\u7c21\u5358\u5236\u5fa1\u3067\u826f\u3044\u3067\u3059\ud83d\ude04<\/p>\n<\/div>\n<\/div>\n<h4 data-sourcepos=\"991:1-991:50\">\n<span id=\"\u30e1\u30c3\u30bb\u30fc\u30b8\u306e\u66f8\u5f0f\u3092\u8a2d\u5b9a\u3057\u307e\u3059\" class=\"fragment\"\/><a target=\"_blank\" href=\"#%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%81%AE%E6%9B%B8%E5%BC%8F%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%97%E3%81%BE%E3%81%99\"><i class=\"fa fa-link\"\/><\/a>\u30e1\u30c3\u30bb\u30fc\u30b8\u306e\u66f8\u5f0f\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/h4>\n<p data-sourcepos=\"992:1-992:63\">\uff08\u3061\u3087\u3063\u3068\u51dd\u3063\u3066\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3055\u305b\u3066\u307e\u3059\uff09<\/p>\n<div class=\"code-frame\" data-lang=\"css\" data-sourcepos=\"994:1-1021:3\">\n<div class=\"highlight\">\n<pre><code>    <span class=\"c\">\/*\u30e1\u30c3\u30bb\u30fc\u30b8 *\/<\/span>\n    <span class=\"nc\">.game-message<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">position<\/span><span class=\"p\">:<\/span> <span class=\"nb\">fixed<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">top<\/span><span class=\"p\">:<\/span> <span class=\"m\">40%<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">left<\/span><span class=\"p\">:<\/span> <span class=\"m\">50%<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"nf\">translate<\/span><span class=\"p\">(<\/span><span class=\"m\">-50%<\/span><span class=\"p\">,<\/span> <span class=\"m\">-50%<\/span><span class=\"p\">);<\/span>\n        <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">72px<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">font-weight<\/span><span class=\"p\">:<\/span> <span class=\"nb\">bold<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"nx\">#ff4081<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">text-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">0<\/span> <span class=\"m\">10px<\/span> <span class=\"nx\">#fff<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span> <span class=\"m\">0<\/span> <span class=\"m\">20px<\/span> <span class=\"nx\">#ff80ab<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span> <span class=\"m\">0<\/span> <span class=\"m\">30px<\/span> <span class=\"nx\">#ff4081<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">animation<\/span><span class=\"p\">:<\/span> <span class=\"n\">flash<\/span> <span class=\"m\">1s<\/span> <span class=\"nb\">infinite<\/span> <span class=\"nb\">alternate<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">z-index<\/span><span class=\"p\">:<\/span> <span class=\"m\">9999<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">pointer-events<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"o\">@<\/span><span class=\"k\">@keyframes<\/span> <span class=\"n\">flash<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nt\">from<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nl\">opacity<\/span><span class=\"p\">:<\/span> <span class=\"m\">1<\/span><span class=\"p\">;<\/span>\n            <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"nf\">translate<\/span><span class=\"p\">(<\/span><span class=\"m\">-50%<\/span><span class=\"p\">,<\/span> <span class=\"m\">-50%<\/span><span class=\"p\">)<\/span> <span class=\"nf\">scale<\/span><span class=\"p\">(<\/span><span class=\"m\">1.0<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n        <span class=\"nt\">to<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nl\">opacity<\/span><span class=\"p\">:<\/span> <span class=\"m\">0.5<\/span><span class=\"p\">;<\/span>\n            <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"nf\">translate<\/span><span class=\"p\">(<\/span><span class=\"m\">-50%<\/span><span class=\"p\">,<\/span> <span class=\"m\">-50%<\/span><span class=\"p\">)<\/span> <span class=\"nf\">scale<\/span><span class=\"p\">(<\/span><span class=\"m\">1.1<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n\n    <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/div>\n<\/div>\n<h2 data-sourcepos=\"1023:1-1023:48\">\n<span id=\"\uff11\uff11\u3082\u3046\u5c11\u3057\u3060\u3051\u30b2\u30fc\u30e0\u3089\u3057\u304f\" class=\"fragment\"\/><a target=\"_blank\" href=\"#%EF%BC%91%EF%BC%91%E3%82%82%E3%81%86%E5%B0%91%E3%81%97%E3%81%A0%E3%81%91%E3%82%B2%E3%83%BC%E3%83%A0%E3%82%89%E3%81%97%E3%81%8F\"><i class=\"fa fa-link\"\/><\/a>\uff11\uff11\uff0e\u3082\u3046\u5c11\u3057\u3060\u3051\u30b2\u30fc\u30e0\u3089\u3057\u304f<\/h2>\n<p data-sourcepos=\"1025:1-1025:84\">\u6700\u5f8c\u306b\u3001\u30bf\u30a4\u30de\u30fc\u8868\u793a\u3068\u30ea\u30bb\u30c3\u30c8\u30dc\u30bf\u30f3\u3050\u3089\u3044\u306f\u6b32\u3057\u3044\u3067\u3059\u306d<\/p>\n<h4 data-sourcepos=\"1027:1-1027:80\">\n<span id=\"\u7d4c\u904e\u6642\u9593\u3068\u30ea\u30bb\u30c3\u30c8\u30dc\u30bf\u30f3\u306e\u8868\u793a\u30b9\u30bf\u30a4\u30eb\u3092\u8ffd\u52a0\u3057\u307e\u3059\" class=\"fragment\"\/><a target=\"_blank\" href=\"#%E7%B5%8C%E9%81%8E%E6%99%82%E9%96%93%E3%81%A8%E3%83%AA%E3%82%BB%E3%83%83%E3%83%88%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E8%A1%A8%E7%A4%BA%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%BE%E3%81%99\"><i class=\"fa fa-link\"\/><\/a>\u7d4c\u904e\u6642\u9593\u3068\u30ea\u30bb\u30c3\u30c8\u30dc\u30bf\u30f3\u306e\u8868\u793a\u30b9\u30bf\u30a4\u30eb\u3092\u8ffd\u52a0\u3057\u307e\u3059<\/h4>\n<div class=\"code-frame\" data-lang=\"css\" data-sourcepos=\"1028:1-1049:3\">\n<div class=\"highlight\">\n<pre><code>    <span class=\"c\">\/* \u7d4c\u904e\u6642\u9593\u3068\u30ea\u30bb\u30c3\u30c8 *\/<\/span>\n    <span class=\"nc\">.status<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">15px<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n        <span class=\"py\">user-select<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nf\">#reset-btn<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">margin-left<\/span><span class=\"p\">:<\/span> <span class=\"m\">10px<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"nx\">#dc3545<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"nx\">white<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">border<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">5px<\/span> <span class=\"m\">10px<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"m\">4px<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">cursor<\/span><span class=\"p\">:<\/span> <span class=\"nb\">pointer<\/span><span class=\"p\">;<\/span>\n        <span class=\"py\">user-select<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n        <span class=\"nf\">#reset-btn<\/span><span class=\"nd\">:hover<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"nx\">#b52a37<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/div>\n<\/div>\n<h4 data-sourcepos=\"1051:1-1051:75\">\n<span id=\"html\u306e\u5148\u982d\u306b\u7d4c\u904e\u6642\u9593\u3068\u30ea\u30bb\u30c3\u30c8\u30dc\u30bf\u30f3\u3092\u8868\u793a\u3057\u307e\u3059\" class=\"fragment\"\/><a target=\"_blank\" href=\"#html%E3%81%AE%E5%85%88%E9%A0%AD%E3%81%AB%E7%B5%8C%E9%81%8E%E6%99%82%E9%96%93%E3%81%A8%E3%83%AA%E3%82%BB%E3%83%83%E3%83%88%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%97%E3%81%BE%E3%81%99\"><i class=\"fa fa-link\"\/><\/a>html\u306e\u5148\u982d\u306b\u7d4c\u904e\u6642\u9593\u3068\u30ea\u30bb\u30c3\u30c8\u30dc\u30bf\u30f3\u3092\u8868\u793a\u3057\u307e\u3059<\/h4>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"1053:1-1062:3\">\n<div class=\"highlight\">\n<pre><code><span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"status\"<\/span><span class=\"o\">&gt;<\/span>\n    <span class=\"o\">@<\/span><span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"n\">isCleared<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"o\"><span class=\"n\">span<\/span> <span class=\"n\">id<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"elapsed-time\"<\/span><span class=\"o\">&gt;<\/span><span class=\"err\">\ud83c\udf89<\/span><span class=\"n\">\u30af\u30ea\u30a2<\/span><span class=\"err\">\ud83c\udf89<\/span><span class=\"o\"\/><span class=\"n\">span<\/span><span class=\"o\">&gt;<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"o\"><span class=\"n\">span<\/span> <span class=\"n\">id<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"elapsed-time\"<\/span><span class=\"o\">&gt;<\/span><span class=\"n\">\u7d4c\u904e\u6642\u9593<\/span><span class=\"o\">:<\/span> <span class=\"o\">@<\/span><span class=\"nc\">Elapsed<\/span> <span class=\"n\">\u79d2<\/span><span class=\"o\"\/><span class=\"n\">span<\/span><span class=\"o\">&gt;<\/span>\n    <span class=\"o\"><span class=\"n\">button<\/span> <span class=\"n\">id<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"reset-btn\"<\/span> <span class=\"o\">@<\/span><span class=\"n\">onclick<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"ResetGame\"<\/span><span class=\"o\">&gt;<\/span><span class=\"n\">\u30ea\u30bb\u30c3\u30c8<\/span><span class=\"o\"\/><span class=\"n\">button<\/span><span class=\"o\">&gt;<\/span>\n<span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n<\/span><\/span><\/span><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<div data-sourcepos=\"1063:1-1065:3\" class=\"note info\">\n<span class=\"fa fa-fw fa-check-circle\"\/><\/p>\n<div>\n<p data-sourcepos=\"1064:1-1064:96\">1\u79d2\u305a\u3064\u30ab\u30a6\u30f3\u30c8\u30a2\u30c3\u30d7\u3059\u308b\u7d4c\u904e\u6642\u9593\u3092 <code>@Elapsed<\/code> \u3060\u3051\u3067\u8868\u73fe\u3067\u304d\u307e\u3059\uff01<\/p>\n<\/div>\n<\/div>\n<h4 data-sourcepos=\"1067:1-1067:70\">\n<span id=\"c\u3067\u30bf\u30a4\u30de\u30fc\u306e\u30ab\u30a6\u30f3\u30c8\u30a2\u30c3\u30d7\u51e6\u7406\u3092\u8ffd\u52a0\u3057\u307e\u3059\" class=\"fragment\"\/><a target=\"_blank\" href=\"#c%E3%81%A7%E3%82%BF%E3%82%A4%E3%83%9E%E3%83%BC%E3%81%AE%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E5%87%A6%E7%90%86%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%BE%E3%81%99\"><i class=\"fa fa-link\"\/><\/a>C#\u3067\u30bf\u30a4\u30de\u30fc\u306e\u30ab\u30a6\u30f3\u30c8\u30a2\u30c3\u30d7\u51e6\u7406\u3092\u8ffd\u52a0\u3057\u307e\u3059<\/h4>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"1069:1-1098:3\">\n<div class=\"highlight\">\n<pre><code>    <span class=\"k\">protected<\/span> <span class=\"kt\">override<\/span> <span class=\"n\">void<\/span> <span class=\"nf\">OnInitialized<\/span><span class=\"p\">()<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/ \u76e4\u9762\u521d\u671f\u5316<\/span>\n        <span class=\"nf\">InitPieces<\/span><span class=\"p\">();<\/span>\n\n        <span class=\"c1\">\/\/ \u30bf\u30a4\u30de\u30fc\u958b\u59cb<\/span>\n        <span class=\"nf\">StartTimer<\/span><span class=\"p\">();<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ --------------------------------------------------<\/span>\n    <span class=\"c1\">\/\/ \u30bf\u30a4\u30de\u30fc<\/span>\n    <span class=\"c1\">\/\/ --------------------------------------------------<\/span>\n    <span class=\"k\">private<\/span> <span class=\"kt\">System<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Threading<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Timer<\/span><span class=\"o\">?<\/span> <span class=\"n\">timer<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">private<\/span> <span class=\"kt\">int<\/span> <span class=\"nc\">Elapsed<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"c1\">\/\/ \u30bf\u30a4\u30de\u30fc\u958b\u59cb<\/span>\n    <span class=\"k\">private<\/span> <span class=\"kt\">void<\/span> <span class=\"nf\">StartTimer<\/span><span class=\"p\">()<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"n\">timer<\/span><span class=\"o\">?<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Dispose<\/span><span class=\"p\">();<\/span>\n        <span class=\"n\">timer<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">System<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Threading<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Timer<\/span><span class=\"p\">(<\/span><span class=\"n\">_<\/span> <span class=\"o\">=&gt;<\/span>\n        <span class=\"p\">{<\/span>\n            <span class=\"nf\">InvokeAsync<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span>\n            <span class=\"p\">{<\/span>\n                <span class=\"nc\">Elapsed<\/span><span class=\"o\">++<\/span><span class=\"p\">;<\/span>\n                <span class=\"nf\">StateHasChanged<\/span><span class=\"p\">();<\/span>\n            <span class=\"p\">});<\/span>\n        <span class=\"p\">},<\/span> <span class=\"kc\">null<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1000<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1000<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/div>\n<\/div>\n<h4 data-sourcepos=\"1100:1-1100:104\">\n<span id=\"\u30ea\u30bb\u30c3\u30c8\u30dc\u30bf\u30f3\u306e\u51e6\u7406\u3068\u30b2\u30fc\u30e0\u30af\u30ea\u30a2\u30fc\u6642\u306e\u30bf\u30a4\u30de\u30fc\u505c\u6b62\u3092\u7d44\u307f\u8fbc\u307f\u307e\u3059\" class=\"fragment\"\/><a target=\"_blank\" href=\"#%E3%83%AA%E3%82%BB%E3%83%83%E3%83%88%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E5%87%A6%E7%90%86%E3%81%A8%E3%82%B2%E3%83%BC%E3%83%A0%E3%82%AF%E3%83%AA%E3%82%A2%E3%83%BC%E6%99%82%E3%81%AE%E3%82%BF%E3%82%A4%E3%83%9E%E3%83%BC%E5%81%9C%E6%AD%A2%E3%82%92%E7%B5%84%E3%81%BF%E8%BE%BC%E3%81%BF%E3%81%BE%E3%81%99\"><i class=\"fa fa-link\"\/><\/a>\u30ea\u30bb\u30c3\u30c8\u30dc\u30bf\u30f3\u306e\u51e6\u7406\u3068\u30b2\u30fc\u30e0\u30af\u30ea\u30a2\u30fc\u6642\u306e\u30bf\u30a4\u30de\u30fc\u505c\u6b62\u3092\u7d44\u307f\u8fbc\u307f\u307e\u3059<\/h4>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"1102:1-1113:3\">\n<div class=\"highlight\">\n<pre><code><span class=\"c1\">\/\/ \u30ea\u30bb\u30c3\u30c8<\/span>\n<span class=\"k\">private<\/span> <span class=\"kt\">void<\/span> <span class=\"nf\">ResetGame<\/span><span class=\"p\">()<\/span>\n<span class=\"p\">{<\/span>\n    <span class=\"nc\">Elapsed<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\n    <span class=\"n\">isCleared<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>\n    <span class=\"n\">isWarning<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>\n    <span class=\"nf\">InitPieces<\/span><span class=\"p\">();<\/span>\n    <span class=\"nf\">StartTimer<\/span><span class=\"p\">();<\/span>\n    <span class=\"nf\">StateHasChanged<\/span><span class=\"p\">();<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/div>\n<\/div>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"1114:1-1127:3\">\n<div class=\"highlight\">\n<pre><code><span class=\"k\">private<\/span> <span class=\"kt\">async<\/span> <span class=\"n\">void<\/span> <span class=\"nf\">GameClear<\/span><span class=\"p\">()<\/span>\n<span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ \u30bf\u30a4\u30de\u30fc\u505c\u6b62<\/span>\n    <span class=\"n\">timer<\/span><span class=\"o\">?<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Dispose<\/span><span class=\"p\">();<\/span>\n    <span class=\"n\">timer<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">null<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"n\">isCleared<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">true<\/span><span class=\"p\">;<\/span>\n    <span class=\"nf\">StateHasChanged<\/span><span class=\"p\">();<\/span>\n    <span class=\"n\">await<\/span> <span class=\"nc\">Task<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Delay<\/span><span class=\"p\">(<\/span><span class=\"mi\">5000<\/span><span class=\"p\">);<\/span>\n    <span class=\"n\">isCleared<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>\n    <span class=\"nf\">StateHasChanged<\/span><span class=\"p\">();<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/div>\n<\/div>\n<h4 data-sourcepos=\"1131:1-1131:41\">\n<span id=\"\u4fee\u6b63\u3055\u308c\u305f\u30b3\u30fc\u30c9\u306e\u5168\u4f53\u50cf\" class=\"fragment\"\/><a target=\"_blank\" href=\"#%E4%BF%AE%E6%AD%A3%E3%81%95%E3%82%8C%E3%81%9F%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E5%85%A8%E4%BD%93%E5%83%8F\"><i class=\"fa fa-link\"\/><\/a>\u4fee\u6b63\u3055\u308c\u305f\u30b3\u30fc\u30c9\u306e\u5168\u4f53\u50cf<\/h4>\n<details>\n<summary>=======================<br \/>\u00a0\u00a0\u00a0\u30b3\u30fc\u30c9\u5168\u4f53\u3092\u8868\u793a\uff08\u6298\u308a\u305f\u305f\u307f\uff09<br \/>\u00a0========================<\/summary>\n<div>\n<div class=\"code-frame\" data-lang=\"php\" data-sourcepos=\"1134:1-1592:3\">\n<div class=\"highlight\">\n<pre><code><span class=\"o\">@<\/span><span class=\"n\">page<\/span> <span class=\"s2\">\"https:\/\/qiita.com\/\"<\/span>\n\n<span class=\"o\"><span class=\"n\">style<\/span><span class=\"o\">&gt;<\/span>\n    <span class=\"cm\">\/* \u7d4c\u904e\u6642\u9593\u3068\u30ea\u30bb\u30c3\u30c8 *\/<\/span>\n    <span class=\"mf\">.<\/span><span class=\"n\">status<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">margin<\/span><span class=\"o\">:<\/span> <span class=\"mi\">15<\/span><span class=\"n\">px<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">user<\/span><span class=\"o\">-<\/span><span class=\"n\">select<\/span><span class=\"o\">:<\/span> <span class=\"n\">none<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">#reset-btn {<\/span>\n        <span class=\"n\">margin<\/span><span class=\"o\">-<\/span><span class=\"n\">left<\/span><span class=\"o\">:<\/span> <span class=\"mi\">10<\/span><span class=\"n\">px<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">background<\/span><span class=\"o\">-<\/span><span class=\"n\">color<\/span><span class=\"o\">:<\/span> <span class=\"c1\">#dc3545;<\/span>\n        <span class=\"n\">color<\/span><span class=\"o\">:<\/span> <span class=\"n\">white<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">border<\/span><span class=\"o\">:<\/span> <span class=\"n\">none<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">padding<\/span><span class=\"o\">:<\/span> <span class=\"mi\">5<\/span><span class=\"n\">px<\/span> <span class=\"mi\">10<\/span><span class=\"n\">px<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">border<\/span><span class=\"o\">-<\/span><span class=\"n\">radius<\/span><span class=\"o\">:<\/span> <span class=\"mi\">4<\/span><span class=\"n\">px<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">cursor<\/span><span class=\"o\">:<\/span> <span class=\"n\">pointer<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">user<\/span><span class=\"o\">-<\/span><span class=\"n\">select<\/span><span class=\"o\">:<\/span> <span class=\"n\">none<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n        <span class=\"c1\">#reset-btn:hover {<\/span>\n            <span class=\"n\">background<\/span><span class=\"o\">-<\/span><span class=\"n\">color<\/span><span class=\"o\">:<\/span> <span class=\"c1\">#b52a37;<\/span>\n        <span class=\"p\">}<\/span>\n\n\n    <span class=\"cm\">\/* \u30b2\u30fc\u30e0\u76e4\u5168\u4f53 *\/<\/span>\n    <span class=\"mf\">.<\/span><span class=\"n\">board<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">display<\/span><span class=\"o\">:<\/span> <span class=\"n\">grid<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">grid<\/span><span class=\"o\">-<\/span><span class=\"n\">template<\/span><span class=\"o\">-<\/span><span class=\"n\">rows<\/span><span class=\"o\">:<\/span> <span class=\"nf\">repeat<\/span><span class=\"p\">(<\/span><span class=\"mi\">7<\/span><span class=\"p\">,<\/span> <span class=\"mi\">50<\/span><span class=\"n\">px<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">grid<\/span><span class=\"o\">-<\/span><span class=\"n\">template<\/span><span class=\"o\">-<\/span><span class=\"n\">columns<\/span><span class=\"o\">:<\/span> <span class=\"nf\">repeat<\/span><span class=\"p\">(<\/span><span class=\"mi\">8<\/span><span class=\"p\">,<\/span> <span class=\"mi\">50<\/span><span class=\"n\">px<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">position<\/span><span class=\"o\">:<\/span> <span class=\"n\">relative<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"cm\">\/* \uff11\u3064\uff11\u3064\u306e\u30bb\u30eb\u306e\u66f8\u5f0f *\/<\/span>\n    <span class=\"mf\">.<\/span><span class=\"n\">cell<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">display<\/span><span class=\"o\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">justify<\/span><span class=\"o\">-<\/span><span class=\"n\">content<\/span><span class=\"o\">:<\/span> <span class=\"n\">center<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">align<\/span><span class=\"o\">-<\/span><span class=\"n\">items<\/span><span class=\"o\">:<\/span> <span class=\"n\">center<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">padding<\/span><span class=\"o\">:<\/span> <span class=\"mi\">4<\/span><span class=\"n\">px<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"cm\">\/* \u58c1 *\/<\/span>\n    <span class=\"mf\">.<\/span><span class=\"n\">wall<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">background<\/span><span class=\"o\">:<\/span> <span class=\"c1\">#444;<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"cm\">\/* \u76e4\u9762 *\/<\/span>\n    <span class=\"mf\">.<\/span><span class=\"k\">empty<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">background<\/span><span class=\"o\">:<\/span> <span class=\"c1\">#aaa;<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"cm\">\/* \u7384\u95a2 *\/<\/span>\n    <span class=\"mf\">.<\/span><span class=\"k\">exit<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">background<\/span><span class=\"o\">:<\/span> <span class=\"c1\">#eee;<\/span>\n        <span class=\"n\">color<\/span><span class=\"o\">:<\/span> <span class=\"c1\">#333;<\/span>\n        <span class=\"n\">display<\/span><span class=\"o\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">align<\/span><span class=\"o\">-<\/span><span class=\"n\">items<\/span><span class=\"o\">:<\/span> <span class=\"n\">center<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">justify<\/span><span class=\"o\">-<\/span><span class=\"n\">content<\/span><span class=\"o\">:<\/span> <span class=\"n\">center<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"cm\">\/* \u99d2 *\/<\/span>\n    <span class=\"mf\">.<\/span><span class=\"n\">piece<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">font<\/span><span class=\"o\">-<\/span><span class=\"n\">weight<\/span><span class=\"o\">:<\/span> <span class=\"n\">bold<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">display<\/span><span class=\"o\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">align<\/span><span class=\"o\">-<\/span><span class=\"n\">items<\/span><span class=\"o\">:<\/span> <span class=\"n\">center<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">justify<\/span><span class=\"o\">-<\/span><span class=\"n\">content<\/span><span class=\"o\">:<\/span> <span class=\"n\">center<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">z<\/span><span class=\"o\">-<\/span><span class=\"n\">index<\/span><span class=\"o\">:<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">cursor<\/span><span class=\"o\">:<\/span> <span class=\"n\">pointer<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">user<\/span><span class=\"o\">-<\/span><span class=\"n\">select<\/span><span class=\"o\">:<\/span> <span class=\"n\">none<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">touch<\/span><span class=\"o\">-<\/span><span class=\"n\">action<\/span><span class=\"o\">:<\/span> <span class=\"n\">none<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">border<\/span><span class=\"o\">:<\/span> <span class=\"mi\">1<\/span><span class=\"n\">px<\/span> <span class=\"n\">solid<\/span> <span class=\"c1\">#555;<\/span>\n        <span class=\"n\">box<\/span><span class=\"o\">-<\/span><span class=\"n\">sizing<\/span><span class=\"o\">:<\/span> <span class=\"n\">border<\/span><span class=\"o\">-<\/span><span class=\"n\">box<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">transform<\/span><span class=\"o\">:<\/span> <span class=\"nf\">scale<\/span><span class=\"p\">(<\/span><span class=\"mf\">0.97<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n        <span class=\"mf\">.<\/span><span class=\"n\">piece<\/span><span class=\"o\">:<\/span><span class=\"n\">active<\/span> <span class=\"p\">{<\/span>\n            <span class=\"n\">cursor<\/span><span class=\"o\">:<\/span> <span class=\"n\">grabbing<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span>\n        <span class=\"mf\">.<\/span><span class=\"n\">piece<\/span><span class=\"mf\">.<\/span><span class=\"n\">selected<\/span> <span class=\"p\">{<\/span>\n            <span class=\"n\">outline<\/span><span class=\"o\">:<\/span> <span class=\"mi\">5<\/span><span class=\"n\">px<\/span> <span class=\"n\">solid<\/span> <span class=\"n\">orange<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span>\n\n    <span class=\"cm\">\/* \u99d2\u8272 *\/<\/span>\n    <span class=\"mf\">.<\/span><span class=\"n\">Color_\u7236<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">background<\/span><span class=\"o\">:<\/span> <span class=\"c1\">#b9bbdd;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"mf\">.<\/span><span class=\"n\">Color_\u5a18<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">background<\/span><span class=\"o\">:<\/span> <span class=\"c1\">#e4bdc3;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"mf\">.<\/span><span class=\"n\">Color_\u6bcd<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">background<\/span><span class=\"o\">:<\/span> <span class=\"c1\">#e9cccc;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"mf\">.<\/span><span class=\"n\">Color_\u624b\u4ee3<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">background<\/span><span class=\"o\">:<\/span> <span class=\"c1\">#f7dcb4;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"mf\">.<\/span><span class=\"n\">Color_\u5927\u756a\u982d<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">background<\/span><span class=\"o\">:<\/span> <span class=\"c1\">#dfbfaa;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"mf\">.<\/span><span class=\"n\">Color_\u5144\u5ac1<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">background<\/span><span class=\"o\">:<\/span> <span class=\"c1\">#d2e7d4;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"mf\">.<\/span><span class=\"n\">Color_\u4e01\u7a1a<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">background<\/span><span class=\"o\">:<\/span> <span class=\"c1\">#e9e3cc;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"mf\">.<\/span><span class=\"n\">Color_\u5973\u4e2d<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">background<\/span><span class=\"o\">:<\/span> <span class=\"c1\">#f3e0e3;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"mf\">.<\/span><span class=\"n\">Color_\u756a\u982d<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">background<\/span><span class=\"o\">:<\/span> <span class=\"c1\">#ddcdc1;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"mf\">.<\/span><span class=\"n\">Color_\u756a\u72ac<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">background<\/span><span class=\"o\">:<\/span> <span class=\"c1\">#f7f0f1;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"mf\">.<\/span><span class=\"n\">Color_\u7956\u7236<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">background<\/span><span class=\"o\">:<\/span> <span class=\"c1\">#adafdf;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"mf\">.<\/span><span class=\"n\">Color_\u7956\u6bcd<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">background<\/span><span class=\"o\">:<\/span> <span class=\"c1\">#daadad;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"cm\">\/*\u30e1\u30c3\u30bb\u30fc\u30b8 *\/<\/span>\n    <span class=\"mf\">.<\/span><span class=\"n\">game<\/span><span class=\"o\">-<\/span><span class=\"n\">message<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">position<\/span><span class=\"o\">:<\/span> <span class=\"n\">fixed<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">top<\/span><span class=\"o\">:<\/span> <span class=\"mi\">40<\/span><span class=\"o\">%<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">left<\/span><span class=\"o\">:<\/span> <span class=\"mi\">50<\/span><span class=\"o\">%<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">transform<\/span><span class=\"o\">:<\/span> <span class=\"nf\">translate<\/span><span class=\"p\">(<\/span><span class=\"o\">-<\/span><span class=\"mi\">50<\/span><span class=\"o\">%<\/span><span class=\"p\">,<\/span> <span class=\"o\">-<\/span><span class=\"mi\">50<\/span><span class=\"o\">%<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">font<\/span><span class=\"o\">-<\/span><span class=\"n\">size<\/span><span class=\"o\">:<\/span> <span class=\"mi\">72<\/span><span class=\"n\">px<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">font<\/span><span class=\"o\">-<\/span><span class=\"n\">weight<\/span><span class=\"o\">:<\/span> <span class=\"n\">bold<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">color<\/span><span class=\"o\">:<\/span> <span class=\"c1\">#ff4081;<\/span>\n        <span class=\"n\">text<\/span><span class=\"o\">-<\/span><span class=\"n\">shadow<\/span><span class=\"o\">:<\/span> <span class=\"mi\">0<\/span> <span class=\"mi\">0<\/span> <span class=\"mi\">10<\/span><span class=\"n\">px<\/span> <span class=\"c1\">#fff, 0 0 20px #ff80ab, 0 0 30px #ff4081;<\/span>\n        <span class=\"n\">animation<\/span><span class=\"o\">:<\/span> <span class=\"n\">flash<\/span> <span class=\"mi\">1<\/span><span class=\"n\">s<\/span> <span class=\"n\">infinite<\/span> <span class=\"n\">alternate<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">z<\/span><span class=\"o\">-<\/span><span class=\"n\">index<\/span><span class=\"o\">:<\/span> <span class=\"mi\">9999<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">pointer<\/span><span class=\"o\">-<\/span><span class=\"n\">events<\/span><span class=\"o\">:<\/span> <span class=\"n\">none<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"o\">@@<\/span><span class=\"n\">keyframes<\/span> <span class=\"n\">flash<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">from<\/span> <span class=\"p\">{<\/span>\n            <span class=\"n\">opacity<\/span><span class=\"o\">:<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\n            <span class=\"n\">transform<\/span><span class=\"o\">:<\/span> <span class=\"nf\">translate<\/span><span class=\"p\">(<\/span><span class=\"o\">-<\/span><span class=\"mi\">50<\/span><span class=\"o\">%<\/span><span class=\"p\">,<\/span> <span class=\"o\">-<\/span><span class=\"mi\">50<\/span><span class=\"o\">%<\/span><span class=\"p\">)<\/span> <span class=\"nf\">scale<\/span><span class=\"p\">(<\/span><span class=\"mf\">1.0<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n        <span class=\"n\">to<\/span> <span class=\"p\">{<\/span>\n            <span class=\"n\">opacity<\/span><span class=\"o\">:<\/span> <span class=\"mf\">0.5<\/span><span class=\"p\">;<\/span>\n            <span class=\"n\">transform<\/span><span class=\"o\">:<\/span> <span class=\"nf\">translate<\/span><span class=\"p\">(<\/span><span class=\"o\">-<\/span><span class=\"mi\">50<\/span><span class=\"o\">%<\/span><span class=\"p\">,<\/span> <span class=\"o\">-<\/span><span class=\"mi\">50<\/span><span class=\"o\">%<\/span><span class=\"p\">)<\/span> <span class=\"nf\">scale<\/span><span class=\"p\">(<\/span><span class=\"mf\">1.1<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n\n    <span class=\"p\">}<\/span>\n<span class=\"o\"\/><span class=\"n\">style<\/span><span class=\"o\">&gt;<\/span>\n\n\n<span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"status\"<\/span><span class=\"o\">&gt;<\/span>\n    <span class=\"o\">@<\/span><span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"n\">isCleared<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"o\"><span class=\"n\">span<\/span> <span class=\"n\">id<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"elapsed-time\"<\/span><span class=\"o\">&gt;<\/span><span class=\"err\">\ud83c\udf89<\/span><span class=\"n\">\u30af\u30ea\u30a2<\/span><span class=\"err\">\ud83c\udf89<\/span><span class=\"o\"\/><span class=\"n\">span<\/span><span class=\"o\">&gt;<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"o\"><span class=\"n\">span<\/span> <span class=\"n\">id<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"elapsed-time\"<\/span><span class=\"o\">&gt;<\/span><span class=\"n\">\u7d4c\u904e\u6642\u9593<\/span><span class=\"o\">:<\/span> <span class=\"o\">@<\/span><span class=\"nc\">Elapsed<\/span> <span class=\"n\">\u79d2<\/span><span class=\"o\"\/><span class=\"n\">span<\/span><span class=\"o\">&gt;<\/span>\n    <span class=\"o\"><span class=\"n\">button<\/span> <span class=\"n\">id<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"reset-btn\"<\/span> <span class=\"o\">@<\/span><span class=\"n\">onclick<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"ResetGame\"<\/span><span class=\"o\">&gt;<\/span><span class=\"n\">\u30ea\u30bb\u30c3\u30c8<\/span><span class=\"o\"\/><span class=\"n\">button<\/span><span class=\"o\">&gt;<\/span>\n<span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n\n<span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"board\"<\/span>\n     <span class=\"o\">@<\/span><span class=\"n\">onmousemove<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"(e) =&gt; DragMove(e)\"<\/span>\n     <span class=\"o\">@<\/span><span class=\"n\">onmouseup<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"EndDrag\"<\/span><span class=\"o\">&gt;<\/span>\n\n    <span class=\"o\">@<\/span><span class=\"k\">for<\/span> <span class=\"p\">(<\/span><span class=\"n\">int<\/span> <span class=\"n\">row<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span> <span class=\"n\">row<\/span> <span class=\"o\"> <span class=\"nc\">MaxRows<\/span><span class=\"p\">;<\/span> <span class=\"n\">row<\/span><span class=\"o\">++<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"k\">for<\/span> <span class=\"p\">(<\/span><span class=\"n\">int<\/span> <span class=\"n\">col<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span> <span class=\"n\">col<\/span> <span class=\"o\"> <span class=\"nc\">MaxCols<\/span><span class=\"p\">;<\/span> <span class=\"n\">col<\/span><span class=\"o\">++<\/span><span class=\"p\">)<\/span>\n        <span class=\"p\">{<\/span>\n            <span class=\"c1\">\/\/ CSS\u306e\u30b0\u30ea\u30c3\u30c9\u306f1\u30aa\u30ea\u30b8\u30f3<\/span>\n            <span class=\"k\">var<\/span> <span class=\"n\">cssRow<\/span> <span class=\"o\">=<\/span> <span class=\"n\">row<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\n            <span class=\"k\">var<\/span> <span class=\"n\">cssCol<\/span> <span class=\"o\">=<\/span> <span class=\"n\">col<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\n\n            <span class=\"n\">int<\/span> <span class=\"n\">cell<\/span> <span class=\"o\">=<\/span> <span class=\"nc\">Board<\/span><span class=\"p\">[<\/span><span class=\"n\">row<\/span><span class=\"p\">,<\/span> <span class=\"n\">col<\/span><span class=\"p\">];<\/span>\n            <span class=\"k\">switch<\/span> <span class=\"p\">(<\/span><span class=\"n\">cell<\/span><span class=\"p\">)<\/span>\n            <span class=\"p\">{<\/span>\n                <span class=\"k\">case<\/span> <span class=\"mi\">0<\/span><span class=\"o\">:<\/span> <span class=\"c1\">\/\/ \u7a7a<\/span>\n                        <span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"cell empty\"<\/span> <span class=\"n\">style<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"grid-area:@(cssRow) \/ @(cssCol);\"<\/span><span class=\"o\">&gt;<\/span>\n                        <span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n                    <span class=\"k\">break<\/span><span class=\"p\">;<\/span>\n                <span class=\"k\">case<\/span> <span class=\"mi\">1<\/span><span class=\"o\">:<\/span> <span class=\"c1\">\/\/ \u58c1<\/span>\n                        <span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"cell wall\"<\/span> <span class=\"n\">style<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"grid-area:@(cssRow) \/ @(cssCol);\"<\/span><span class=\"o\">&gt;<\/span>\n                        <span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n                    <span class=\"k\">break<\/span><span class=\"p\">;<\/span>\n                <span class=\"k\">case<\/span> <span class=\"mi\">9<\/span><span class=\"o\">:<\/span> <span class=\"c1\">\/\/ \u7384\u95a2<\/span>\n                        <span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"cell exit\"<\/span> <span class=\"n\">style<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"grid-area:@(cssRow) \/ @(cssCol);\"<\/span><span class=\"o\">&gt;<\/span>\n                            <span class=\"n\">\u7384\u95a2<\/span>\n                        <span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n                    <span class=\"k\">break<\/span><span class=\"p\">;<\/span>\n            <span class=\"p\">}<\/span>\n        <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"o\">@<\/span><span class=\"k\">foreach<\/span> <span class=\"p\">(<\/span><span class=\"nc\">Piece<\/span> <span class=\"n\">p<\/span> <span class=\"n\">in<\/span> <span class=\"nc\">Pieces<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"k\">var<\/span> <span class=\"n\">cssPieceRow<\/span> <span class=\"o\">=<\/span> <span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Row<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\n        <span class=\"k\">var<\/span> <span class=\"n\">cssPieceCol<\/span> <span class=\"o\">=<\/span> <span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Col<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\n\n        <span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"piece @(p.ColorClass) @(p == Selected ? \"<\/span><span class=\"n\">selected<\/span><span class=\"s2\">\" : \"\")\"<\/span>\n             <span class=\"n\">style<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"\n                grid-row:@cssPieceRow;\n                grid-column:@cssPieceCol;\n                width:@(p.Width * 50)px;\n                height:@(p.Height * 50)px;\"<\/span>\n             <span class=\"o\">@<\/span><span class=\"n\">onmousedown<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"(e) =&gt; StartDrag(p, e.ClientX, e.ClientY)\"<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">@<\/span><span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Label<\/span>\n        <span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n    <span class=\"p\">}<\/span>\n\n<span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n\n\n<span class=\"o\">@<\/span><span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"n\">isCleared<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">{<\/span>\n    <span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"game-message\"<\/span><span class=\"o\">&gt;<\/span><span class=\"err\">\ud83c\udf89<\/span><span class=\"n\">\u30af\u30ea\u30a2<\/span><span class=\"err\">\ud83c\udf89<\/span><span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"o\">@<\/span><span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"n\">isWarning<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">{<\/span>\n    <span class=\"o\"><span class=\"n\">div<\/span> <span class=\"n\">class<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"game-message\"<\/span><span class=\"o\">&gt;<\/span><span class=\"n\">\u7384\u95a2\u3092\u51fa\u3066\u3088\u3044\u306e\u306f\u5a18\u3060\u3051<\/span><span class=\"o\"\/><span class=\"n\">div<\/span><span class=\"o\">&gt;<\/span>\n<span class=\"p\">}<\/span>\n\n\n\n<span class=\"o\">@<\/span><span class=\"n\">code<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ \u76e4\u9762\u306e\u5b9a\u7fa9<\/span>\n    <span class=\"k\">private<\/span> <span class=\"k\">const<\/span> <span class=\"no\">int<\/span> <span class=\"no\">MaxRows<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">7<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">private<\/span> <span class=\"k\">const<\/span> <span class=\"no\">int<\/span> <span class=\"no\">MaxCols<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">8<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"k\">private<\/span> <span class=\"kt\">int<\/span><span class=\"p\">[,]<\/span> <span class=\"nc\">Board<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">int<\/span><span class=\"p\">[<\/span><span class=\"nc\">MaxRows<\/span><span class=\"p\">,<\/span> <span class=\"nc\">MaxCols<\/span><span class=\"p\">]<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/ \u76e4\u9762\u5b9a\u7fa9 (0=\u7a7a, 1=\u58c1, 9=\u51fa\u53e3)<\/span>\n        <span class=\"p\">{<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">},<\/span>\n        <span class=\"p\">{<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">},<\/span>\n        <span class=\"p\">{<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">},<\/span>\n        <span class=\"p\">{<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">},<\/span>\n        <span class=\"p\">{<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">},<\/span>\n        <span class=\"p\">{<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">},<\/span>\n        <span class=\"p\">{<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">9<\/span><span class=\"p\">,<\/span><span class=\"mi\">9<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"mi\">1<\/span><span class=\"p\">},<\/span>\n    <span class=\"p\">};<\/span>\n\n\n    <span class=\"c1\">\/\/ \u99d2\u306e\u5b9a\u7fa9<\/span>\n    <span class=\"k\">private<\/span> <span class=\"kt\">class<\/span> <span class=\"nc\">Piece<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"k\">public<\/span> <span class=\"kt\">int<\/span> <span class=\"nc\">Row<\/span> <span class=\"p\">{<\/span> <span class=\"n\">get<\/span><span class=\"p\">;<\/span> <span class=\"n\">set<\/span><span class=\"p\">;<\/span> <span class=\"p\">}<\/span>\n        <span class=\"k\">public<\/span> <span class=\"kt\">int<\/span> <span class=\"nc\">Col<\/span> <span class=\"p\">{<\/span> <span class=\"n\">get<\/span><span class=\"p\">;<\/span> <span class=\"n\">set<\/span><span class=\"p\">;<\/span> <span class=\"p\">}<\/span>\n        <span class=\"k\">public<\/span> <span class=\"kt\">int<\/span> <span class=\"nc\">Width<\/span> <span class=\"p\">{<\/span> <span class=\"n\">get<\/span><span class=\"p\">;<\/span> <span class=\"n\">set<\/span><span class=\"p\">;<\/span> <span class=\"p\">}<\/span>\n        <span class=\"k\">public<\/span> <span class=\"kt\">int<\/span> <span class=\"nc\">Height<\/span> <span class=\"p\">{<\/span> <span class=\"n\">get<\/span><span class=\"p\">;<\/span> <span class=\"n\">set<\/span><span class=\"p\">;<\/span> <span class=\"p\">}<\/span>\n        <span class=\"k\">public<\/span> <span class=\"kt\">string<\/span> <span class=\"nc\">Label<\/span> <span class=\"p\">{<\/span> <span class=\"n\">get<\/span><span class=\"p\">;<\/span> <span class=\"n\">set<\/span><span class=\"p\">;<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"n\">string<\/span><span class=\"mf\">.<\/span><span class=\"k\">Empty<\/span><span class=\"p\">;<\/span>\n        <span class=\"k\">public<\/span> <span class=\"kt\">string<\/span> <span class=\"nc\">ColorClass<\/span> <span class=\"p\">{<\/span> <span class=\"n\">get<\/span><span class=\"p\">;<\/span> <span class=\"n\">set<\/span><span class=\"p\">;<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"n\">string<\/span><span class=\"mf\">.<\/span><span class=\"k\">Empty<\/span><span class=\"p\">;<\/span>\n\n        <span class=\"k\">public<\/span> <span class=\"kt\">Piece<\/span><span class=\"p\">(<\/span><span class=\"n\">string<\/span> <span class=\"n\">label<\/span><span class=\"p\">,<\/span> <span class=\"n\">int<\/span> <span class=\"n\">col<\/span><span class=\"p\">,<\/span> <span class=\"n\">int<\/span> <span class=\"n\">row<\/span><span class=\"p\">,<\/span> <span class=\"n\">int<\/span> <span class=\"n\">w<\/span><span class=\"p\">,<\/span> <span class=\"n\">int<\/span> <span class=\"n\">h<\/span><span class=\"p\">,<\/span> <span class=\"n\">string<\/span> <span class=\"n\">colorClass<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">\"piece-default\"<\/span><span class=\"p\">)<\/span>\n        <span class=\"p\">{<\/span>\n            <span class=\"nc\">Label<\/span> <span class=\"o\">=<\/span> <span class=\"n\">label<\/span><span class=\"p\">;<\/span>\n            <span class=\"nc\">Row<\/span> <span class=\"o\">=<\/span> <span class=\"n\">row<\/span><span class=\"p\">;<\/span>\n            <span class=\"nc\">Col<\/span> <span class=\"o\">=<\/span> <span class=\"n\">col<\/span><span class=\"p\">;<\/span>\n            <span class=\"nc\">Width<\/span> <span class=\"o\">=<\/span> <span class=\"n\">w<\/span><span class=\"p\">;<\/span>\n            <span class=\"nc\">Height<\/span> <span class=\"o\">=<\/span> <span class=\"n\">h<\/span><span class=\"p\">;<\/span>\n            <span class=\"nc\">ColorClass<\/span> <span class=\"o\">=<\/span> <span class=\"n\">colorClass<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ \u99d2\u306e\u30ea\u30b9\u30c8<\/span>\n    <span class=\"k\">private<\/span> <span class=\"kt\">List<\/span><span class=\"o\"><span class=\"nc\">Piece<\/span><span class=\"o\">&gt;<\/span> <span class=\"nc\">Pieces<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">List<\/span><span class=\"o\"><span class=\"nc\">Piece<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">();<\/span>\n    <span class=\"k\">private<\/span> <span class=\"kt\">void<\/span> <span class=\"nf\">InitPieces<\/span><span class=\"p\">()<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Clear<\/span><span class=\"p\">();<\/span>\n        <span class=\"c1\">\/\/ \u99d2\u540d\u3001\u99d2\u306e\u5de6\u4e0a\u306e \u5217\u3001\u884c\u3001\u5e45\u3001\u9ad8\u3055\u3001\u8272\u306e\u30af\u30e9\u30b9\u540d<\/span>\n        <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Piece<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"\u7236\"<\/span><span class=\"p\">,<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"Color_\u7236\"<\/span><span class=\"p\">));<\/span>\n        <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Piece<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"\u5a18\"<\/span><span class=\"p\">,<\/span> <span class=\"mi\">3<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"Color_\u5a18\"<\/span><span class=\"p\">));<\/span>\n        <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Piece<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"\u6bcd\"<\/span><span class=\"p\">,<\/span> <span class=\"mi\">5<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"Color_\u6bcd\"<\/span><span class=\"p\">));<\/span>\n        <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Piece<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"\u624b\u4ee3\"<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">3<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"Color_\u624b\u4ee3\"<\/span><span class=\"p\">));<\/span>\n        <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Piece<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"\u5927\u756a\u982d\"<\/span><span class=\"p\">,<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span> <span class=\"mi\">3<\/span><span class=\"p\">,<\/span> <span class=\"mi\">4<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"Color_\u5927\u756a\u982d\"<\/span><span class=\"p\">));<\/span>\n        <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Piece<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"\u5144\u5ac1\"<\/span><span class=\"p\">,<\/span> <span class=\"mi\">6<\/span><span class=\"p\">,<\/span> <span class=\"mi\">3<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"Color_\u5144\u5ac1\"<\/span><span class=\"p\">));<\/span>\n        <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Piece<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"\u4e01\u7a1a\"<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">4<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"Color_\u4e01\u7a1a\"<\/span><span class=\"p\">));<\/span>\n        <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Piece<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"\u5973\u4e2d\"<\/span><span class=\"p\">,<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span> <span class=\"mi\">4<\/span><span class=\"p\">,<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"Color_\u5973\u4e2d\"<\/span><span class=\"p\">));<\/span>\n        <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Piece<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"\u756a\u982d\"<\/span><span class=\"p\">,<\/span> <span class=\"mi\">4<\/span><span class=\"p\">,<\/span> <span class=\"mi\">4<\/span><span class=\"p\">,<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"Color_\u756a\u982d\"<\/span><span class=\"p\">));<\/span>\n        <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Piece<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"\u4e01\u7a1a\"<\/span><span class=\"p\">,<\/span> <span class=\"mi\">6<\/span><span class=\"p\">,<\/span> <span class=\"mi\">4<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"Color_\u4e01\u7a1a\"<\/span><span class=\"p\">));<\/span>\n        <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Piece<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"\u756a\u72ac\"<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">5<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"Color_\u756a\u72ac\"<\/span><span class=\"p\">));<\/span>\n        <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Piece<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"\u7956\u7236\"<\/span><span class=\"p\">,<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span> <span class=\"mi\">5<\/span><span class=\"p\">,<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"Color_\u7956\u7236\"<\/span><span class=\"p\">));<\/span>\n        <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Piece<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"\u7956\u6bcd\"<\/span><span class=\"p\">,<\/span> <span class=\"mi\">4<\/span><span class=\"p\">,<\/span> <span class=\"mi\">5<\/span><span class=\"p\">,<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"Color_\u7956\u6bcd\"<\/span><span class=\"p\">));<\/span>\n        <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Piece<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"\u4e01\u7a1a\"<\/span><span class=\"p\">,<\/span> <span class=\"mi\">6<\/span><span class=\"p\">,<\/span> <span class=\"mi\">5<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"Color_\u4e01\u7a1a\"<\/span><span class=\"p\">));<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"k\">protected<\/span> <span class=\"kt\">override<\/span> <span class=\"n\">void<\/span> <span class=\"nf\">OnInitialized<\/span><span class=\"p\">()<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/ \u76e4\u9762\u521d\u671f\u5316<\/span>\n        <span class=\"nf\">InitPieces<\/span><span class=\"p\">();<\/span>\n\n        <span class=\"c1\">\/\/ \u30bf\u30a4\u30de\u30fc\u958b\u59cb<\/span>\n        <span class=\"nf\">StartTimer<\/span><span class=\"p\">();<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ --------------------------------------------------<\/span>\n    <span class=\"c1\">\/\/ \u30bf\u30a4\u30de\u30fc<\/span>\n    <span class=\"c1\">\/\/ --------------------------------------------------<\/span>\n    <span class=\"k\">private<\/span> <span class=\"kt\">System<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Threading<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Timer<\/span><span class=\"o\">?<\/span> <span class=\"n\">timer<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">private<\/span> <span class=\"kt\">int<\/span> <span class=\"nc\">Elapsed<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"c1\">\/\/ \u30bf\u30a4\u30de\u30fc\u958b\u59cb<\/span>\n    <span class=\"k\">private<\/span> <span class=\"kt\">void<\/span> <span class=\"nf\">StartTimer<\/span><span class=\"p\">()<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"n\">timer<\/span><span class=\"o\">?<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Dispose<\/span><span class=\"p\">();<\/span>\n        <span class=\"n\">timer<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">System<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Threading<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Timer<\/span><span class=\"p\">(<\/span><span class=\"n\">_<\/span> <span class=\"o\">=&gt;<\/span>\n        <span class=\"p\">{<\/span>\n            <span class=\"nf\">InvokeAsync<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span>\n            <span class=\"p\">{<\/span>\n                <span class=\"nc\">Elapsed<\/span><span class=\"o\">++<\/span><span class=\"p\">;<\/span>\n                <span class=\"nf\">StateHasChanged<\/span><span class=\"p\">();<\/span>\n            <span class=\"p\">});<\/span>\n        <span class=\"p\">},<\/span> <span class=\"kc\">null<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1000<\/span><span class=\"p\">,<\/span> <span class=\"mi\">1000<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ \u30ea\u30bb\u30c3\u30c8<\/span>\n    <span class=\"k\">private<\/span> <span class=\"kt\">void<\/span> <span class=\"nf\">ResetGame<\/span><span class=\"p\">()<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"nc\">Elapsed<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">isCleared<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">isWarning<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>\n        <span class=\"nf\">InitPieces<\/span><span class=\"p\">();<\/span>\n        <span class=\"nf\">StartTimer<\/span><span class=\"p\">();<\/span>\n        <span class=\"nf\">StateHasChanged<\/span><span class=\"p\">();<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ \u9078\u629e\u4e2d\u306e\u99d2<\/span>\n    <span class=\"k\">private<\/span> <span class=\"kt\">Piece<\/span><span class=\"o\">?<\/span> <span class=\"nc\">Selected<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">private<\/span> <span class=\"kt\">int<\/span> <span class=\"n\">startX<\/span><span class=\"p\">,<\/span> <span class=\"n\">startY<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"c1\">\/\/ \u30b2\u30fc\u30e0\u30af\u30ea\u30a2\u3068\u8b66\u544a\u30d5\u30e9\u30b0<\/span>\n    <span class=\"k\">private<\/span> <span class=\"kt\">bool<\/span> <span class=\"n\">isCleared<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">private<\/span> <span class=\"kt\">bool<\/span> <span class=\"n\">isWarning<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"c1\">\/\/ \u30c9\u30e9\u30c3\u30b0\u958b\u59cb <\/span>\n    <span class=\"k\">private<\/span> <span class=\"kt\">void<\/span> <span class=\"nf\">StartDrag<\/span><span class=\"p\">(<\/span><span class=\"nc\">Piece<\/span> <span class=\"n\">p<\/span><span class=\"p\">,<\/span> <span class=\"n\">double<\/span> <span class=\"n\">clientX<\/span><span class=\"p\">,<\/span> <span class=\"n\">double<\/span> <span class=\"n\">clientY<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"nc\">Selected<\/span> <span class=\"o\">=<\/span> <span class=\"n\">p<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">startX<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"n\">int<\/span><span class=\"p\">)<\/span><span class=\"n\">clientX<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">startY<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"n\">int<\/span><span class=\"p\">)<\/span><span class=\"n\">clientY<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ \u30c9\u30e9\u30c3\u30b0\u79fb\u52d5<\/span>\n    <span class=\"k\">private<\/span> <span class=\"kt\">void<\/span> <span class=\"nf\">DragMove<\/span><span class=\"p\">(<\/span><span class=\"nc\">MouseEventArgs<\/span> <span class=\"n\">e<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nc\">Selected<\/span> <span class=\"o\">==<\/span> <span class=\"kc\">null<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n\n        <span class=\"c1\">\/\/ \u30de\u30a6\u30b9\u79fb\u52d5\u91cf\uff08px\u5358\u4f4d\uff09<\/span>\n        <span class=\"n\">int<\/span> <span class=\"n\">currentX<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"n\">int<\/span><span class=\"p\">)<\/span><span class=\"n\">e<\/span><span class=\"mf\">.<\/span><span class=\"nc\">ClientX<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">int<\/span> <span class=\"n\">currentY<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"n\">int<\/span><span class=\"p\">)<\/span><span class=\"n\">e<\/span><span class=\"mf\">.<\/span><span class=\"nc\">ClientY<\/span><span class=\"p\">;<\/span>\n\n        <span class=\"k\">const<\/span> <span class=\"no\">int<\/span> <span class=\"no\">cellSize<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">50<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ 1\u99d2\u306e\u30b5\u30a4\u30ba<\/span>\n        <span class=\"n\">int<\/span> <span class=\"n\">threshold<\/span> <span class=\"o\">=<\/span> <span class=\"n\">cellSize<\/span> <span class=\"o\">\/<\/span> <span class=\"mi\">2<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ 50px\u306e\u534a\u5206<\/span>\n\n        <span class=\"c1\">\/\/ 1\u99d2\u306e\u534a\u5206\u4ee5\u4e0a\u30c9\u30e9\u30c3\u30b0\u3055\u305b\u305f\u3089\u3001\u79fb\u52d5\u3055\u305b\u308b<\/span>\n        <span class=\"n\">int<\/span> <span class=\"n\">rowStep<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"n\">colStep<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\n        <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nc\">Math<\/span><span class=\"mf\">.<\/span><span class=\"nb\">Abs<\/span><span class=\"p\">(<\/span><span class=\"n\">currentX<\/span> <span class=\"o\">-<\/span> <span class=\"n\">startX<\/span><span class=\"p\">)<\/span> <span class=\"o\">&gt;<\/span> <span class=\"n\">threshold<\/span><span class=\"p\">)<\/span>\n        <span class=\"p\">{<\/span>\n            <span class=\"n\">colStep<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"n\">currentX<\/span> <span class=\"o\">&gt;<\/span> <span class=\"n\">startX<\/span><span class=\"p\">)<\/span> <span class=\"o\">?<\/span> <span class=\"mi\">1<\/span> <span class=\"o\">:<\/span> <span class=\"o\">-<\/span><span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\n            <span class=\"n\">startX<\/span> <span class=\"o\">+=<\/span> <span class=\"n\">colStep<\/span> <span class=\"o\">*<\/span> <span class=\"n\">cellSize<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span>\n        <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nc\">Math<\/span><span class=\"mf\">.<\/span><span class=\"nb\">Abs<\/span><span class=\"p\">(<\/span><span class=\"n\">currentY<\/span> <span class=\"o\">-<\/span> <span class=\"n\">startY<\/span><span class=\"p\">)<\/span> <span class=\"o\">&gt;<\/span> <span class=\"n\">threshold<\/span><span class=\"p\">)<\/span>\n        <span class=\"p\">{<\/span>\n            <span class=\"n\">rowStep<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"n\">currentY<\/span> <span class=\"o\">&gt;<\/span> <span class=\"n\">startY<\/span><span class=\"p\">)<\/span> <span class=\"o\">?<\/span> <span class=\"mi\">1<\/span> <span class=\"o\">:<\/span> <span class=\"o\">-<\/span><span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\n            <span class=\"n\">startY<\/span> <span class=\"o\">+=<\/span> <span class=\"n\">rowStep<\/span> <span class=\"o\">*<\/span> <span class=\"n\">cellSize<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span>\n\n        <span class=\"c1\">\/\/ \u6b21\u306e\u4f4d\u7f6e<\/span>\n        <span class=\"n\">int<\/span> <span class=\"n\">newRow<\/span> <span class=\"o\">=<\/span> <span class=\"nc\">Selected<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Row<\/span> <span class=\"o\">+<\/span> <span class=\"n\">rowStep<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">int<\/span> <span class=\"n\">newCol<\/span> <span class=\"o\">=<\/span> <span class=\"nc\">Selected<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Col<\/span> <span class=\"o\">+<\/span> <span class=\"n\">colStep<\/span><span class=\"p\">;<\/span>\n\n        <span class=\"c1\">\/\/ \u79fb\u52d5\u3057\u3066\u826f\u3044\u304b\u5224\u5b9a<\/span>\n        <span class=\"k\">if<\/span><span class=\"p\">(<\/span><span class=\"nf\">CanMove<\/span><span class=\"p\">(<\/span><span class=\"nc\">Selected<\/span><span class=\"p\">,<\/span> <span class=\"n\">newRow<\/span><span class=\"p\">,<\/span> <span class=\"n\">newCol<\/span><span class=\"p\">))<\/span>\n        <span class=\"p\">{<\/span>\n            <span class=\"c1\">\/\/ \u99d2\u4f4d\u7f6e\u306e\u79fb\u52d5<\/span>\n            <span class=\"nc\">Selected<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Row<\/span> <span class=\"o\">=<\/span> <span class=\"n\">newRow<\/span><span class=\"p\">;<\/span>\n            <span class=\"nc\">Selected<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Col<\/span> <span class=\"o\">=<\/span> <span class=\"n\">newCol<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/------------------------------------------------<\/span>\n    <span class=\"c1\">\/\/ \u79fb\u52d5\u3057\u3066\u826f\u3044\u304b\u5224\u5b9a\u3059\u308b<\/span>\n    <span class=\"c1\">\/\/------------------------------------------------<\/span>\n    <span class=\"k\">private<\/span> <span class=\"kt\">bool<\/span> <span class=\"nf\">CanMove<\/span><span class=\"p\">(<\/span><span class=\"nc\">Piece<\/span> <span class=\"n\">p<\/span><span class=\"p\">,<\/span> <span class=\"n\">int<\/span> <span class=\"n\">newRow<\/span><span class=\"p\">,<\/span> <span class=\"n\">int<\/span> <span class=\"n\">newCol<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/ ----- \u76e4\u5916\u306f\u7981\u6b62 -----<\/span>\n        <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"n\">newRow<\/span> <span class=\"o\"> <span class=\"mi\">0<\/span> <span class=\"o\">||<\/span> <span class=\"n\">newRow<\/span> <span class=\"o\">+<\/span> <span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Height<\/span> <span class=\"o\">&gt;<\/span> <span class=\"nc\">MaxRows<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>\n        <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"n\">newCol<\/span> <span class=\"o\"> <span class=\"mi\">0<\/span> <span class=\"o\">||<\/span> <span class=\"n\">newCol<\/span> <span class=\"o\">+<\/span> <span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Width<\/span> <span class=\"o\">&gt;<\/span> <span class=\"nc\">MaxCols<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>\n\n        <span class=\"c1\">\/\/ ----- \u58c1\u30bb\u30eb\u3068\u306e\u885d\u7a81 -----<\/span>\n        <span class=\"n\">bool<\/span> <span class=\"n\">blocked<\/span> <span class=\"o\">=<\/span> <span class=\"nc\">Enumerable<\/span><span class=\"mf\">.<\/span><span class=\"nb\">Range<\/span><span class=\"p\">(<\/span><span class=\"n\">newRow<\/span><span class=\"p\">,<\/span> <span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Height<\/span><span class=\"p\">)<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Any<\/span><span class=\"p\">(<\/span><span class=\"n\">r<\/span> <span class=\"o\">=&gt;<\/span>\n            <span class=\"nc\">Enumerable<\/span><span class=\"mf\">.<\/span><span class=\"nb\">Range<\/span><span class=\"p\">(<\/span><span class=\"n\">newCol<\/span><span class=\"p\">,<\/span> <span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Width<\/span><span class=\"p\">)<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Any<\/span><span class=\"p\">(<\/span><span class=\"n\">c<\/span> <span class=\"o\">=&gt;<\/span>\n                <span class=\"nc\">Board<\/span><span class=\"p\">[<\/span><span class=\"n\">r<\/span><span class=\"p\">,<\/span> <span class=\"n\">c<\/span><span class=\"p\">]<\/span> <span class=\"o\">==<\/span> <span class=\"mi\">1<\/span><span class=\"p\">));<\/span>\n        <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"n\">blocked<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>\n\n        <span class=\"c1\">\/\/ \u51fa\u53e3\u5224\u5b9a\uff08\u5a18\u3060\u3051OK\uff09<\/span>\n        <span class=\"n\">bool<\/span> <span class=\"n\">inExit<\/span> <span class=\"o\">=<\/span> <span class=\"nc\">Enumerable<\/span><span class=\"mf\">.<\/span><span class=\"nb\">Range<\/span><span class=\"p\">(<\/span><span class=\"n\">newRow<\/span><span class=\"p\">,<\/span> <span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Height<\/span><span class=\"p\">)<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Any<\/span><span class=\"p\">(<\/span><span class=\"n\">r<\/span> <span class=\"o\">=&gt;<\/span>\n            <span class=\"nc\">Enumerable<\/span><span class=\"mf\">.<\/span><span class=\"nb\">Range<\/span><span class=\"p\">(<\/span><span class=\"n\">newCol<\/span><span class=\"p\">,<\/span> <span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Width<\/span><span class=\"p\">)<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Any<\/span><span class=\"p\">(<\/span><span class=\"n\">c<\/span> <span class=\"o\">=&gt;<\/span>\n                <span class=\"nc\">Board<\/span><span class=\"p\">[<\/span><span class=\"n\">r<\/span><span class=\"p\">,<\/span> <span class=\"n\">c<\/span><span class=\"p\">]<\/span> <span class=\"o\">==<\/span> <span class=\"mi\">9<\/span><span class=\"p\">));<\/span>\n        <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"n\">inExit<\/span><span class=\"p\">)<\/span>\n        <span class=\"p\">{<\/span>\n            <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Label<\/span> <span class=\"o\">==<\/span> <span class=\"s2\">\"\u5a18\"<\/span><span class=\"p\">)<\/span>\n            <span class=\"p\">{<\/span>\n                <span class=\"nf\">GameClear<\/span><span class=\"p\">();<\/span>\n                <span class=\"k\">return<\/span> <span class=\"kc\">true<\/span><span class=\"p\">;<\/span>\n            <span class=\"p\">}<\/span>\n            <span class=\"k\">else<\/span>\n            <span class=\"p\">{<\/span>\n                <span class=\"nf\">ShowWarning<\/span><span class=\"p\">();<\/span>\n                <span class=\"k\">return<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>\n            <span class=\"p\">}<\/span>\n        <span class=\"p\">}<\/span>\n\n        <span class=\"c1\">\/\/ \u4ed6\u99d2\u3068\u306e\u885d\u7a81<\/span>\n        <span class=\"k\">foreach<\/span> <span class=\"p\">(<\/span><span class=\"k\">var<\/span> <span class=\"n\">o<\/span> <span class=\"n\">in<\/span> <span class=\"nc\">Pieces<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Where<\/span><span class=\"p\">(<\/span><span class=\"n\">o<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"n\">o<\/span> <span class=\"o\">!=<\/span> <span class=\"n\">p<\/span><span class=\"p\">))<\/span>\n        <span class=\"p\">{<\/span>\n            <span class=\"n\">bool<\/span> <span class=\"n\">overlapX<\/span> <span class=\"o\">=<\/span> <span class=\"n\">newCol<\/span> <span class=\"o\"> <span class=\"n\">o<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Col<\/span> <span class=\"o\">+<\/span> <span class=\"n\">o<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Width<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"n\">newCol<\/span> <span class=\"o\">+<\/span> <span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Width<\/span> <span class=\"o\">&gt;<\/span> <span class=\"n\">o<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Col<\/span><span class=\"p\">;<\/span>\n            <span class=\"n\">bool<\/span> <span class=\"n\">overlapY<\/span> <span class=\"o\">=<\/span> <span class=\"n\">newRow<\/span> <span class=\"o\"> <span class=\"n\">o<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Row<\/span> <span class=\"o\">+<\/span> <span class=\"n\">o<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Height<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"n\">newRow<\/span> <span class=\"o\">+<\/span> <span class=\"n\">p<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Height<\/span> <span class=\"o\">&gt;<\/span> <span class=\"n\">o<\/span><span class=\"mf\">.<\/span><span class=\"nc\">Row<\/span><span class=\"p\">;<\/span>\n            <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"n\">overlapX<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"n\">overlapY<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span>\n\n        <span class=\"k\">return<\/span> <span class=\"kc\">true<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"k\">private<\/span> <span class=\"kt\">async<\/span> <span class=\"n\">void<\/span> <span class=\"nf\">GameClear<\/span><span class=\"p\">()<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/ \u30bf\u30a4\u30de\u30fc\u505c\u6b62<\/span>\n        <span class=\"n\">timer<\/span><span class=\"o\">?<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Dispose<\/span><span class=\"p\">();<\/span>\n        <span class=\"n\">timer<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">null<\/span><span class=\"p\">;<\/span>\n\n        <span class=\"n\">isCleared<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">true<\/span><span class=\"p\">;<\/span>\n        <span class=\"nf\">StateHasChanged<\/span><span class=\"p\">();<\/span>\n        <span class=\"n\">await<\/span> <span class=\"nc\">Task<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Delay<\/span><span class=\"p\">(<\/span><span class=\"mi\">5000<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">isCleared<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>\n        <span class=\"nf\">StateHasChanged<\/span><span class=\"p\">();<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"k\">private<\/span> <span class=\"kt\">async<\/span> <span class=\"n\">void<\/span> <span class=\"nf\">ShowWarning<\/span><span class=\"p\">()<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"n\">isWarning<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">true<\/span><span class=\"p\">;<\/span>\n        <span class=\"nf\">StateHasChanged<\/span><span class=\"p\">();<\/span>\n        <span class=\"n\">await<\/span> <span class=\"nc\">Task<\/span><span class=\"mf\">.<\/span><span class=\"nf\">Delay<\/span><span class=\"p\">(<\/span><span class=\"mi\">3000<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">isWarning<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>\n        <span class=\"nf\">StateHasChanged<\/span><span class=\"p\">();<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ \u30c9\u30e9\u30c3\u30b0\u7d42\u4e86<\/span>\n    <span class=\"k\">private<\/span> <span class=\"kt\">void<\/span> <span class=\"nf\">EndDrag<\/span><span class=\"p\">()<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"nc\">Selected<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">null<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n<span class=\"p\">}<\/span>\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/details>\n<h4 data-sourcepos=\"1596:1-1596:29\">\n<span id=\"\u4fee\u6b63\u5f8c\u306e\u30a4\u30e1\u30fc\u30b8\" class=\"fragment\"\/><a target=\"_blank\" href=\"#%E4%BF%AE%E6%AD%A3%E5%BE%8C%E3%81%AE%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8\"><i class=\"fa fa-link\"\/><\/a>\u4fee\u6b63\u5f8c\u306e\u30a4\u30e1\u30fc\u30b8<\/h4>\n<p data-sourcepos=\"1598:1-1598:121\"><a target=\"_blank\" href=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F05ccac66-e9ec-4656-a302-277aefbe632d.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=aed019b49ca8ae8697b0b02d68beedad\" target=\"_blank\" rel=\"nofollow noopener\"><img decoding=\"async\" src=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F05ccac66-e9ec-4656-a302-277aefbe632d.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=aed019b49ca8ae8697b0b02d68beedad\" alt=\"image.png\" srcset=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F05ccac66-e9ec-4656-a302-277aefbe632d.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=563b89a66605b2a00f48c9f3e2f5b82d 1x\" data-canonical-src=\"https:\/\/qiita-image-store.s3.ap-northeast-1.amazonaws.com\/0\/546646\/05ccac66-e9ec-4656-a302-277aefbe632d.png\" loading=\"lazy\"\/><\/a><\/p>\n<p data-sourcepos=\"1600:1-1600:42\">\u672c\u683c\u7684\u306a\u99d2\u304c\u5b9f\u88c5\u3055\u308c\u307e\u3057\u305f\u3002<\/p>\n<p data-sourcepos=\"1602:1-1602:155\"><a target=\"_blank\" href=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F43207966-b246-449e-8094-2c44a60c8415.gif?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=f5eb2a760b2c2898416f18053666436b\" target=\"_blank\" rel=\"nofollow noopener\"><img decoding=\"async\" src=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F43207966-b246-449e-8094-2c44a60c8415.gif?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=f5eb2a760b2c2898416f18053666436b\" alt=\"\u30ec\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0 2025-10-02 074705.gif\" srcset=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F43207966-b246-449e-8094-2c44a60c8415.gif?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=26f4e86efa3214a2ea0ba1656686aa45 1x\" data-canonical-src=\"https:\/\/qiita-image-store.s3.ap-northeast-1.amazonaws.com\/0\/546646\/43207966-b246-449e-8094-2c44a60c8415.gif\" loading=\"lazy\"\/><\/a><\/p>\n<p data-sourcepos=\"1604:1-1604:48\">\u30e1\u30c3\u30bb\u30fc\u30b8\u8868\u793a\u3082\u826f\u3044\u611f\u3058\u3067\u3059\u306d\u3002<\/p>\n<div data-sourcepos=\"1606:1-1608:3\" class=\"note info\">\n<span class=\"fa fa-fw fa-check-circle\"\/><\/p>\n<div>\n<p data-sourcepos=\"1607:1-1607:73\">\u30af\u30ea\u30a2\u30e1\u30c3\u30bb\u30fc\u30b8\u306f\u662f\u975e\u3054\u81ea\u5206\u3067\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\ud83d\ude04<\/p>\n<\/div>\n<\/div>\n<p data-sourcepos=\"1610:1-1610:90\">\u5ff5\u306e\u305f\u3081\u306b\u3053\u3053\u307e\u3067\u306e\u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3\u5168\u4f53\u3092GitHub\u3078\u30a2\u30c3\u30d7\u3057\u307e\u3057\u305f<\/p>\n<p data-sourcepos=\"1612:1-1612:42\"><iframe id=\"qiita-embed-content__7bdb87d20c30b3720a94564c62c7f5b3\" src=\"https:\/\/qiita.com\/embed-contents\/link-card#qiita-embed-content__7bdb87d20c30b3720a94564c62c7f5b3\" data-content=\"https%3A%2F%2Fgithub.com%2Fmasayahak%2FHakoiriMusume\" frameborder=\"0\" scrolling=\"no\" loading=\"lazy\" style=\"width:100%;\" height=\"29\"><br \/>\n<\/iframe>\n<\/p>\n<h2 data-sourcepos=\"1616:1-1616:42\">\n<span id=\"\uff11\uff12\u3082\u3063\u3068\u62e1\u5f35\u3057\u305f\u3044\u65b9\u3078\" class=\"fragment\"\/><a target=\"_blank\" href=\"#%EF%BC%91%EF%BC%92%E3%82%82%E3%81%A3%E3%81%A8%E6%8B%A1%E5%BC%B5%E3%81%97%E3%81%9F%E3%81%84%E6%96%B9%E3%81%B8\"><i class=\"fa fa-link\"\/><\/a>\uff11\uff12\uff0e\u3082\u3063\u3068\u62e1\u5f35\u3057\u305f\u3044\u65b9\u3078<\/h2>\n<p data-sourcepos=\"1617:1-1618:48\">\u3044\u304b\u304c\u3060\u3063\u305f\u3067\u3057\u3087\u3046\u304b\uff1f<br \/>Web\u30b2\u30fc\u30e0\u304c\u7c21\u5358\u306b\u4f5c\u6210\u3067\u304d\u307e\u3057\u305f\u3002<\/p>\n<p data-sourcepos=\"1620:1-1620:69\">\u3055\u3089\u306b\u30b2\u30fc\u30e0\u3092\u767a\u5c55\u3055\u305b\u305f\u3044\u65b9\u3082\u3044\u308b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<p data-sourcepos=\"1622:1-1623:41\">\ud83d\udd3c \u30de\u30a6\u30b9\u3060\u3051\u3058\u3083\u306a\u304f\u3066\u30b9\u30de\u30db\u3067\u30bf\u30c3\u30c1\u64cd\u4f5c\u3057\u305f\u3044<br \/>\ud83d\udd3c \u898b\u305f\u76ee\u3092\u3082\u3063\u3068\u5f37\u5316\u3057\u305f\u3044<\/p>\n<p data-sourcepos=\"1625:1-1625:188\">\u3053\u306e\u8a18\u4e8b\u306e\u8da3\u65e8\u3067\u3042\u308b \u300c\u521d\u5fc3\u8005\u5411\u3051\u306eBlazor\u306e\u3054\u7d39\u4ecb\u304b\u3089\u300d \u5916\u308c\u307e\u3059\u306e\u3067\u3001\u3053\u3061\u3089\u516c\u958b\u3057\u3066\u3044\u308b\u30c7\u30e2\u7248\u306e\u30bd\u30fc\u30b9\u3092\u53c2\u8003\u306b\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p data-sourcepos=\"1627:1-1627:46\"><iframe id=\"qiita-embed-content__e4dcf710b175bf1a23d270d2b3234aa6\" src=\"https:\/\/qiita.com\/embed-contents\/link-card#qiita-embed-content__e4dcf710b175bf1a23d270d2b3234aa6\" data-content=\"https%3A%2F%2Fgithub.com%2Fmasayahak%2FShelteredDaughter\" frameborder=\"0\" scrolling=\"no\" loading=\"lazy\" style=\"width:100%;\" height=\"29\"><br \/>\n<\/iframe>\n<\/p>\n<h2 data-sourcepos=\"1631:1-1631:21\">\n<span id=\"\uff11\uff13\u6700\u5f8c\u306b\" class=\"fragment\"\/><a target=\"_blank\" href=\"#%EF%BC%91%EF%BC%93%E6%9C%80%E5%BE%8C%E3%81%AB\"><i class=\"fa fa-link\"\/><\/a>\uff11\uff13\uff0e\u6700\u5f8c\u306b<\/h2>\n<p data-sourcepos=\"1632:1-1632:155\">Blazor Server\u306fWebSockets\uff08\u30a6\u30a7\u30d6\u30bd\u30b1\u30c3\u30c8\uff09\u3092\u5229\u7528\u3057\u305f\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306a\u306e\u3067\u30b2\u30fc\u30e0\u4f5c\u6210\u304c\u5f97\u610f\u306a\u3060\u3051\u306a\u3093\u3067\u3057\u3087\u3046\u304b\uff1f<\/p>\n<p data-sourcepos=\"1634:1-1635:162\">\u3053\u306e\u8a18\u4e8b\u3067\u5229\u7528\u3057\u3066\u304d\u305f\u6280\u8853\u3092\u6d41\u7528\u3059\u308c\u3070\u3001\u76f8\u5f53\u306b\u30ea\u30c3\u30c1\u306a\u30e6\u30fc\u30b6\u30fc\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u3092\u7c21\u5358\u306b\u4f5c\u6210\u3067\u304d\u308b\u3053\u3068\u304c\u60f3\u50cf\u3067\u304d\u308b\u3068\u601d\u3044\u307e\u3059\u3002<br \/>\u30d6\u30e9\u30a6\u30b6\u4e0a\u306e\u5358\u7d14\u306a\u30dc\u30bf\u30f3\u30af\u30ea\u30c3\u30af\u3060\u3051\u3067\u306a\u304f\u3001\u5fc5\u8981\u306b\u5fdc\u3058\u30de\u30a6\u30b9\u30c9\u30e9\u30c3\u30b0\u306a\u3069\u4efb\u610f\u306e\u30a4\u30d9\u30f3\u30c8\u3092\u62fe\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<div data-sourcepos=\"1637:1-1639:3\" class=\"note info\">\n<span class=\"fa fa-fw fa-check-circle\"\/><\/p>\n<div>\n<p data-sourcepos=\"1638:1-1638:45\">Blazor\u306f\u696d\u52d9\u30a2\u30d7\u30ea\u958b\u767a\u3067\u3082\u512a\u79c0\uff01<\/p>\n<\/div>\n<\/div>\n<p data-sourcepos=\"1641:1-1642:48\">\u3053\u3061\u3089\u306e\u8a18\u4e8b\u3067\u306fBlazor\u3092\u5229\u7528\u3057\u305f\u696d\u52d9\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u958b\u767a\u4e8b\u4f8b\u3092\u7d39\u4ecb\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\u6c17\u306b\u306a\u3063\u305f\u65b9\u306f\u662f\u975e\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/p>\n<p data-sourcepos=\"1644:1-1644:111\"><a target=\"_blank\" href=\"https:\/\/qiita.com\/masayahak\/items\/bfbf5dea084a055f06c4\" id=\"reference-71f1f98b067fc11edf6b\">\ud83d\udc49 Blazor\u696d\u52d9\u30a2\u30d7\u30ea\u306e\u5b9f\u4f8b\u8a18\u4e8b\u306f\u3053\u3061\u3089<\/a><\/p>\n<p data-sourcepos=\"1646:1-1647:121\">\u3010 \u53c2\u8003\u753b\u50cf \u3011<br \/><a target=\"_blank\" href=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F60c0049b-ec9c-420d-9f85-abc8911a88a0.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=28455e8c346161fef627c07a192972aa\" target=\"_blank\" rel=\"nofollow noopener\"><img decoding=\"async\" src=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F60c0049b-ec9c-420d-9f85-abc8911a88a0.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=28455e8c346161fef627c07a192972aa\" alt=\"image.png\" srcset=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F60c0049b-ec9c-420d-9f85-abc8911a88a0.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=4ebdb77fea7de320d642a3aa8daef52a 1x\" data-canonical-src=\"https:\/\/qiita-image-store.s3.ap-northeast-1.amazonaws.com\/0\/546646\/60c0049b-ec9c-420d-9f85-abc8911a88a0.png\" loading=\"lazy\"\/><\/a><\/p>\n<p data-sourcepos=\"1649:1-1649:121\"><a target=\"_blank\" href=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F7b90660b-c990-47c4-a221-fbef72755db1.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=0eba836d1fccf598baa1662252615c1f\" target=\"_blank\" rel=\"nofollow noopener\"><img decoding=\"async\" src=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F7b90660b-c990-47c4-a221-fbef72755db1.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=0eba836d1fccf598baa1662252615c1f\" alt=\"image.png\" srcset=\"https:\/\/qiita-user-contents.imgix.net\/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F546646%2F7b90660b-c990-47c4-a221-fbef72755db1.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=bacfb89c7736bee2423dd9c75d55618a 1x\" data-canonical-src=\"https:\/\/qiita-image-store.s3.ap-northeast-1.amazonaws.com\/0\/546646\/7b90660b-c990-47c4-a221-fbef72755db1.png\" loading=\"lazy\"\/><\/a><\/p>\n<\/div>\n<p><\/code><\/p>\n<\/div>\n<p><script>!function(f,b,e,v,n,t,s)\n{if(f.fbq)return;n=f.fbq=function(){n.callMethod?\nn.callMethod.apply(n,arguments):n.queue.push(arguments)};\nif(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\nn.queue=[];t=b.createElement(e);t.async=!0;\nt.src=v;s=b.getElementsByTagName(e)[0];\ns.parentNode.insertBefore(t,s)}(window, document,'script',\n'https:\/\/connect.facebook.net\/en_US\/fbevents.js');\nfbq('init', '305156090176370');\nfbq('trackSingle', '305156090176370', 'PageView');<\/script><br \/>\n<br \/>\n<br \/><a href=\"https:\/\/qiita.com\/masayahak\/items\/0e6c82497ad63c856e3f\">\u5143\u306e\u8a18\u4e8b\u3092\u78ba\u8a8d\u3059\u308b <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\u306f\u3058\u3081\u306b \u3053\u306e\u8a18\u4e8b\u3067\u306f \u300c\u305f\u3063\u305f1\u6642\u9593\u300d \u3067 Web\u30b2\u30fc\u30e0\u4f5c\u308a\u3092\u4f53\u9a13\u3067\u304d\u307e\u3059\u3002 \ud83c\udfaf\u3053\u3093\u306a\u65b9\u3078\u304a\u52e7\u3081 \u666e\u6bb5\u306fC#\u3092\u66f8\u3044\u3066\u3044\u308b\u3051\u3069 Web\u30d5\u30ed\u30f3\u30c8\u306f\u3061\u3087\u3063\u3068\u82e6\u624b\u2026 Web\u30a2\u30d7\u30ea\u3092\u4f5c\u3063\u305f\u3053\u3068\u306f\u3042\u308b\u3051\u3069 Blazor\u306f\u89e6\u3063\u305f\u3053\u3068 [&hellip;]","protected":false},"author":1,"featured_media":8014,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[],"class_list":["post-8013","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hatena-blog"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u3010\u521d\u5fc3\u8005\u6b53\u8fce\u3011C#\u3060\u3051\u3067Web\u30b2\u30fc\u30e0\u30921\u6642\u9593\u3067\u4f5c\u308b javascript\u3084AJAX\u4e0d\u8981\uff01Blazor\u306e\u51c4\u3055\u3092\u4f53\u9a13\u3059\u308b #\u30b2\u30fc\u30e0\u5236\u4f5c - Qiita - \u30dd\u30b1\u30b3\u30f3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/qiita.com\/masayahak\/items\/0e6c82497ad63c856e3f\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u3010\u521d\u5fc3\u8005\u6b53\u8fce\u3011C#\u3060\u3051\u3067Web\u30b2\u30fc\u30e0\u30921\u6642\u9593\u3067\u4f5c\u308b javascript\u3084AJAX\u4e0d\u8981\uff01Blazor\u306e\u51c4\u3055\u3092\u4f53\u9a13\u3059\u308b #\u30b2\u30fc\u30e0\u5236\u4f5c - Qiita - \u30dd\u30b1\u30b3\u30f3\" \/>\n<meta property=\"og:description\" content=\"\u306f\u3058\u3081\u306b \u3053\u306e\u8a18\u4e8b\u3067\u306f \u300c\u305f\u3063\u305f1\u6642\u9593\u300d \u3067 Web\u30b2\u30fc\u30e0\u4f5c\u308a\u3092\u4f53\u9a13\u3067\u304d\u307e\u3059\u3002 \ud83c\udfaf\u3053\u3093\u306a\u65b9\u3078\u304a\u52e7\u3081 \u666e\u6bb5\u306fC#\u3092\u66f8\u3044\u3066\u3044\u308b\u3051\u3069 Web\u30d5\u30ed\u30f3\u30c8\u306f\u3061\u3087\u3063\u3068\u82e6\u624b\u2026 Web\u30a2\u30d7\u30ea\u3092\u4f5c\u3063\u305f\u3053\u3068\u306f\u3042\u308b\u3051\u3069 Blazor\u306f\u89e6\u3063\u305f\u3053\u3068 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/qiita.com\/masayahak\/items\/0e6c82497ad63c856e3f\" \/>\n<meta property=\"og:site_name\" content=\"\u30dd\u30b1\u30b3\u30f3\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-03T18:09:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/10\/1759514974_https3A2F2Fqiita-user-contents.imgix_.net2Fhttps253A252F252Fcdn.qiita_.com252Fassets252Fpubli.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"info@pokecon.jp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u57f7\u7b46\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"info@pokecon.jp\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"12\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/qiita.com\\\/masayahak\\\/items\\\/0e6c82497ad63c856e3f#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/8013\\\/\"},\"author\":{\"name\":\"info@pokecon.jp\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#\\\/schema\\\/person\\\/16c9f07b1ba984d165d9aee259bda997\"},\"headline\":\"\u3010\u521d\u5fc3\u8005\u6b53\u8fce\u3011C#\u3060\u3051\u3067Web\u30b2\u30fc\u30e0\u30921\u6642\u9593\u3067\u4f5c\u308b javascript\u3084AJAX\u4e0d\u8981\uff01Blazor\u306e\u51c4\u3055\u3092\u4f53\u9a13\u3059\u308b #\u30b2\u30fc\u30e0\u5236\u4f5c &#8211; Qiita\",\"datePublished\":\"2025-10-03T18:09:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/8013\\\/\"},\"wordCount\":132,\"image\":{\"@id\":\"https:\\\/\\\/qiita.com\\\/masayahak\\\/items\\\/0e6c82497ad63c856e3f#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/1759514974_https3A2F2Fqiita-user-contents.imgix_.net2Fhttps253A252F252Fcdn.qiita_.com252Fassets252Fpubli.jpeg\",\"articleSection\":[\"\u306f\u3066\u306a\u30d6\u30ed\u30b0\"],\"inLanguage\":\"ja\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/8013\\\/\",\"url\":\"https:\\\/\\\/qiita.com\\\/masayahak\\\/items\\\/0e6c82497ad63c856e3f\",\"name\":\"\u3010\u521d\u5fc3\u8005\u6b53\u8fce\u3011C#\u3060\u3051\u3067Web\u30b2\u30fc\u30e0\u30921\u6642\u9593\u3067\u4f5c\u308b javascript\u3084AJAX\u4e0d\u8981\uff01Blazor\u306e\u51c4\u3055\u3092\u4f53\u9a13\u3059\u308b #\u30b2\u30fc\u30e0\u5236\u4f5c - Qiita - \u30dd\u30b1\u30b3\u30f3\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/qiita.com\\\/masayahak\\\/items\\\/0e6c82497ad63c856e3f#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/qiita.com\\\/masayahak\\\/items\\\/0e6c82497ad63c856e3f#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/1759514974_https3A2F2Fqiita-user-contents.imgix_.net2Fhttps253A252F252Fcdn.qiita_.com252Fassets252Fpubli.jpeg\",\"datePublished\":\"2025-10-03T18:09:34+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#\\\/schema\\\/person\\\/16c9f07b1ba984d165d9aee259bda997\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/qiita.com\\\/masayahak\\\/items\\\/0e6c82497ad63c856e3f#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/qiita.com\\\/masayahak\\\/items\\\/0e6c82497ad63c856e3f\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\\\/\\\/qiita.com\\\/masayahak\\\/items\\\/0e6c82497ad63c856e3f#primaryimage\",\"url\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/1759514974_https3A2F2Fqiita-user-contents.imgix_.net2Fhttps253A252F252Fcdn.qiita_.com252Fassets252Fpubli.jpeg\",\"contentUrl\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/1759514974_https3A2F2Fqiita-user-contents.imgix_.net2Fhttps253A252F252Fcdn.qiita_.com252Fassets252Fpubli.jpeg\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/qiita.com\\\/masayahak\\\/items\\\/0e6c82497ad63c856e3f#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u30db\u30fc\u30e0\",\"item\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u3010\u521d\u5fc3\u8005\u6b53\u8fce\u3011C#\u3060\u3051\u3067Web\u30b2\u30fc\u30e0\u30921\u6642\u9593\u3067\u4f5c\u308b javascript\u3084AJAX\u4e0d\u8981\uff01Blazor\u306e\u51c4\u3055\u3092\u4f53\u9a13\u3059\u308b #\u30b2\u30fc\u30e0\u5236\u4f5c &#8211; Qiita\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#website\",\"url\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/\",\"name\":\"\u30dd\u30b1\u30b3\u30f3\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ja\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#\\\/schema\\\/person\\\/16c9f07b1ba984d165d9aee259bda997\",\"name\":\"info@pokecon.jp\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g\",\"caption\":\"info@pokecon.jp\"},\"url\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/author\\\/infopokecon-jp\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u3010\u521d\u5fc3\u8005\u6b53\u8fce\u3011C#\u3060\u3051\u3067Web\u30b2\u30fc\u30e0\u30921\u6642\u9593\u3067\u4f5c\u308b javascript\u3084AJAX\u4e0d\u8981\uff01Blazor\u306e\u51c4\u3055\u3092\u4f53\u9a13\u3059\u308b #\u30b2\u30fc\u30e0\u5236\u4f5c - Qiita - \u30dd\u30b1\u30b3\u30f3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/qiita.com\/masayahak\/items\/0e6c82497ad63c856e3f","og_locale":"ja_JP","og_type":"article","og_title":"\u3010\u521d\u5fc3\u8005\u6b53\u8fce\u3011C#\u3060\u3051\u3067Web\u30b2\u30fc\u30e0\u30921\u6642\u9593\u3067\u4f5c\u308b javascript\u3084AJAX\u4e0d\u8981\uff01Blazor\u306e\u51c4\u3055\u3092\u4f53\u9a13\u3059\u308b #\u30b2\u30fc\u30e0\u5236\u4f5c - Qiita - \u30dd\u30b1\u30b3\u30f3","og_description":"\u306f\u3058\u3081\u306b \u3053\u306e\u8a18\u4e8b\u3067\u306f \u300c\u305f\u3063\u305f1\u6642\u9593\u300d \u3067 Web\u30b2\u30fc\u30e0\u4f5c\u308a\u3092\u4f53\u9a13\u3067\u304d\u307e\u3059\u3002 \ud83c\udfaf\u3053\u3093\u306a\u65b9\u3078\u304a\u52e7\u3081 \u666e\u6bb5\u306fC#\u3092\u66f8\u3044\u3066\u3044\u308b\u3051\u3069 Web\u30d5\u30ed\u30f3\u30c8\u306f\u3061\u3087\u3063\u3068\u82e6\u624b\u2026 Web\u30a2\u30d7\u30ea\u3092\u4f5c\u3063\u305f\u3053\u3068\u306f\u3042\u308b\u3051\u3069 Blazor\u306f\u89e6\u3063\u305f\u3053\u3068 [&hellip;]","og_url":"https:\/\/qiita.com\/masayahak\/items\/0e6c82497ad63c856e3f","og_site_name":"\u30dd\u30b1\u30b3\u30f3","article_published_time":"2025-10-03T18:09:34+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/10\/1759514974_https3A2F2Fqiita-user-contents.imgix_.net2Fhttps253A252F252Fcdn.qiita_.com252Fassets252Fpubli.jpeg","type":"image\/jpeg"}],"author":"info@pokecon.jp","twitter_card":"summary_large_image","twitter_misc":{"\u57f7\u7b46\u8005":"info@pokecon.jp","\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"12\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/qiita.com\/masayahak\/items\/0e6c82497ad63c856e3f#article","isPartOf":{"@id":"https:\/\/pokecon.jp\/job\/8013\/"},"author":{"name":"info@pokecon.jp","@id":"https:\/\/pokecon.jp\/job\/#\/schema\/person\/16c9f07b1ba984d165d9aee259bda997"},"headline":"\u3010\u521d\u5fc3\u8005\u6b53\u8fce\u3011C#\u3060\u3051\u3067Web\u30b2\u30fc\u30e0\u30921\u6642\u9593\u3067\u4f5c\u308b javascript\u3084AJAX\u4e0d\u8981\uff01Blazor\u306e\u51c4\u3055\u3092\u4f53\u9a13\u3059\u308b #\u30b2\u30fc\u30e0\u5236\u4f5c &#8211; Qiita","datePublished":"2025-10-03T18:09:34+00:00","mainEntityOfPage":{"@id":"https:\/\/pokecon.jp\/job\/8013\/"},"wordCount":132,"image":{"@id":"https:\/\/qiita.com\/masayahak\/items\/0e6c82497ad63c856e3f#primaryimage"},"thumbnailUrl":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/10\/1759514974_https3A2F2Fqiita-user-contents.imgix_.net2Fhttps253A252F252Fcdn.qiita_.com252Fassets252Fpubli.jpeg","articleSection":["\u306f\u3066\u306a\u30d6\u30ed\u30b0"],"inLanguage":"ja"},{"@type":"WebPage","@id":"https:\/\/pokecon.jp\/job\/8013\/","url":"https:\/\/qiita.com\/masayahak\/items\/0e6c82497ad63c856e3f","name":"\u3010\u521d\u5fc3\u8005\u6b53\u8fce\u3011C#\u3060\u3051\u3067Web\u30b2\u30fc\u30e0\u30921\u6642\u9593\u3067\u4f5c\u308b javascript\u3084AJAX\u4e0d\u8981\uff01Blazor\u306e\u51c4\u3055\u3092\u4f53\u9a13\u3059\u308b #\u30b2\u30fc\u30e0\u5236\u4f5c - Qiita - \u30dd\u30b1\u30b3\u30f3","isPartOf":{"@id":"https:\/\/pokecon.jp\/job\/#website"},"primaryImageOfPage":{"@id":"https:\/\/qiita.com\/masayahak\/items\/0e6c82497ad63c856e3f#primaryimage"},"image":{"@id":"https:\/\/qiita.com\/masayahak\/items\/0e6c82497ad63c856e3f#primaryimage"},"thumbnailUrl":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/10\/1759514974_https3A2F2Fqiita-user-contents.imgix_.net2Fhttps253A252F252Fcdn.qiita_.com252Fassets252Fpubli.jpeg","datePublished":"2025-10-03T18:09:34+00:00","author":{"@id":"https:\/\/pokecon.jp\/job\/#\/schema\/person\/16c9f07b1ba984d165d9aee259bda997"},"breadcrumb":{"@id":"https:\/\/qiita.com\/masayahak\/items\/0e6c82497ad63c856e3f#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/qiita.com\/masayahak\/items\/0e6c82497ad63c856e3f"]}]},{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/qiita.com\/masayahak\/items\/0e6c82497ad63c856e3f#primaryimage","url":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/10\/1759514974_https3A2F2Fqiita-user-contents.imgix_.net2Fhttps253A252F252Fcdn.qiita_.com252Fassets252Fpubli.jpeg","contentUrl":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/10\/1759514974_https3A2F2Fqiita-user-contents.imgix_.net2Fhttps253A252F252Fcdn.qiita_.com252Fassets252Fpubli.jpeg","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/qiita.com\/masayahak\/items\/0e6c82497ad63c856e3f#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u30db\u30fc\u30e0","item":"https:\/\/pokecon.jp\/job\/"},{"@type":"ListItem","position":2,"name":"\u3010\u521d\u5fc3\u8005\u6b53\u8fce\u3011C#\u3060\u3051\u3067Web\u30b2\u30fc\u30e0\u30921\u6642\u9593\u3067\u4f5c\u308b javascript\u3084AJAX\u4e0d\u8981\uff01Blazor\u306e\u51c4\u3055\u3092\u4f53\u9a13\u3059\u308b #\u30b2\u30fc\u30e0\u5236\u4f5c &#8211; Qiita"}]},{"@type":"WebSite","@id":"https:\/\/pokecon.jp\/job\/#website","url":"https:\/\/pokecon.jp\/job\/","name":"\u30dd\u30b1\u30b3\u30f3","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pokecon.jp\/job\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ja"},{"@type":"Person","@id":"https:\/\/pokecon.jp\/job\/#\/schema\/person\/16c9f07b1ba984d165d9aee259bda997","name":"info@pokecon.jp","image":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/secure.gravatar.com\/avatar\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g","caption":"info@pokecon.jp"},"url":"https:\/\/pokecon.jp\/job\/author\/infopokecon-jp\/"}]}},"_links":{"self":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts\/8013","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/comments?post=8013"}],"version-history":[{"count":1,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts\/8013\/revisions"}],"predecessor-version":[{"id":8015,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts\/8013\/revisions\/8015"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/media\/8014"}],"wp:attachment":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/media?parent=8013"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/categories?post=8013"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/tags?post=8013"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}