{"id":107334,"date":"2020-01-20T18:15:10","date_gmt":"2020-01-20T09:15:10","guid":{"rendered":"http:\/\/www.key-p.com\/blog\/staff\/?p=107334"},"modified":"2020-01-24T14:53:41","modified_gmt":"2020-01-24T05:53:41","slug":"%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e3%81%a7%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%81%8b%e3%82%8b%e3%81%9f%e3%82%92%e9%81%8a%e3%81%b9%e3%82%8b%e3%82%88%e3%81%86%e3%81%ab%e3%81%97%e3%81%9f","status":"publish","type":"post","link":"https:\/\/www.key-p.com\/blog\/staff\/archives\/107334","title":{"rendered":"\u30d6\u30e9\u30a6\u30b6\u3067\u30d5\u30a9\u30f3\u30c8\u304b\u308b\u305f\u3092\u904a\u3079\u308b\u3088\u3046\u306b\u3057\u305f"},"content":{"rendered":"

\n

\n\u958b\u767a\u90e8\u306e\u67f3\u4e95\u3067\u3059\u3002\u4ee4\u548c\u3082\u65e9\u3044\u3082\u306e\u30672\u5e74\u306b\u306a\u308a\u307e\u3057\u305f\u3002\u3053\u306e1\u6708\u3082\u30013\u30f6\u6708\u306b\u4e00\u5ea6\u306e\u6052\u4f8b\u884c\u4e8b\u30fb\u5168\u4f53\u4f1a\u8b70\u304c\u3042\u3063\u305f\u306e\u3067\u81ea\u5206\u306e\u30c1\u30e3\u30ec\u30f3\u30b8\u30e9\u30dc\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002
\n<\/p>\n

\u305d\u3046\u3060\u3001\u30d5\u30a9\u30f3\u30c8\u304b\u308b\u305f(JS)\u4f5c\u308d\u3046<\/h3>\n

\n1\u6708\u3068\u3044\u3048\u3070\u304a\u6b63\u6708\u3002\u304a\u6b63\u6708\u306e\u904a\u3073\u3068\u3044\u3048\u3070\u304b\u308b\u305f\u3002\u304b\u308b\u305f\u3068\u3044\u3048\u3070\u30d5\u30a9\u30f3\u30c8\u304b\u308b\u305f\u3002\uff08\u2190\uff01\uff1f\uff09
\n<\/p>\n

\n\u7d041\u5e74\u524d\u306b\u5370\u5237\u535a\u7269\u9928<\/a>\u3067\u300c\u30d5\u30a9\u30f3\u30c8\u304b\u308b\u305f\u300d(\u7269\u7406)<\/a>\u3092\u8cb7\u3063\u305f\u306f\u826f\u3044\u3082\u306e\u306e\u3001\u904a\u3076\u6642\u9593\u304c\u7121\u3044\u3002\u3068\u3044\u3046\u304b\u3053\u3093\u306a\u30cb\u30c3\u30c1\u306a\u3082\u306e\u3092\u4e00\u7dd2\u306b\u904a\u3093\u3067\u304f\u308c\u308b\u4eba\u304c\u5c45\u306a\u3044\u3002<\/del>\u8aad\u307f\u672d\u3068\u53d6\u308a\u672d\u3092\u773a\u3081\u3066\u3044\u308b\u3060\u3051\u3067\u3082\u697d\u3057\u3044\u3051\u3069\u3001\u3084\u3063\u3071\u308a\u304b\u308b\u305f\u3092\u3084\u308a\u305f\u3044\u3002\u3002
\n<\/p>\n

\n\u3053\u30531\u5e74\u307b\u3069\u3001WebFile\u4ee5\u5916\u306b\u30d5\u30ed\u30f3\u30c8\u5074\u3092\u89e6\u308b\u6848\u4ef6\u306b\u643a\u308f\u3063\u3066\u3044\u308b\u306e\u3067\u3001jQuery\u306e\u52c9\u5f37\u304c\u3066\u3089\u3001\u30d6\u30e9\u30a6\u30b6\u3067\u904a\u3079\u308b\u30d5\u30a9\u30f3\u30c8\u304b\u308b\u305f\u3092\u4f5c\u3063\u3066\u307f\u307e\u3057\u305f\u3002\u306a\u304a\u3001\u3053\u308c\u306f\u975e\u516c\u5f0f\u306e\u3082\u306e\u3067\u3059\u306e\u3067\u3001\u554f\u3044\u5408\u308f\u305b\u306a\u3069\u3042\u308b\u5834\u5408\u306f\u516c\u5f0f\u306b\u306f\u9001\u3089\u306a\u3044\u3067\u304f\u3060\u3055\u3044\u306d\u3002
\n<\/p>\n

\u5b9f\u88c5<\/h3>\n

\n\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3068\u3001\u5b9f\u969b\u306b\u52d5\u304f\u3082\u306e\u306fCodePen<\/a>\u3067\u516c\u958b\u3057\u3066\u3044\u307e\u3059\u3002\u53f3\u4e0a\u306e\u300cChange View\u300d\u30dc\u30bf\u30f3\u3067\u300cEditor View\u300d\u3092\u9078\u629e\u3059\u308b\u3068\u3001HTML\u3001CSS\u3001JavaScript\u306e\u30b3\u30fc\u30c9\u304c\u898b\u3089\u308c\u307e\u3059\u3002
\n<\/p>\n

\n\u307e\u305a\u3001\u30d5\u30a9\u30f3\u30c8\u304b\u308b\u305f\u306a\u306e\u3067\u30d5\u30a9\u30f3\u30c8\u3092\u5909\u3048\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002Web\u30da\u30fc\u30b8\u306e\u8aad\u307f\u8fbc\u307f\u3068\u540c\u6642\u306b\u3001\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u4e0a\u306b\u3042\u308b\u30d5\u30a9\u30f3\u30c8\u30c7\u30fc\u30bf\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3055\u305b\u308b\u300cWeb\u30d5\u30a9\u30f3\u30c8<\/a>\u300d\u3068\u3044\u3046\u624b\u6bb5\u3092\u4f7f\u3048\u3070\u3001\u4efb\u610f\u306e\u30d5\u30a9\u30f3\u30c8\u306b\u5909\u66f4\u51fa\u6765\u307e\u3059\u3002\u30d5\u30a9\u30f3\u30c8\u306e\u30c7\u30fc\u30bf\u306f\u81ea\u5206\u306eWeb\u30b5\u30fc\u30d0\u306b\u7f6e\u3044\u3066\u304a\u304f\u304b\u3001Google Fonts<\/a>\u306e\u3088\u3046\u306b\u5916\u90e8\u30b5\u30fc\u30d0\u304b\u3089CDN\u3067\u53d6\u5f97\u3057\u307e\u3059\u3002\u8aad\u307f\u8fbc\u3093\u3060\u30d5\u30a9\u30f3\u30c8\u306f\u3001CSS\u306efont-family\u3067\u6307\u5b9a\u3057\u307e\u3059\u3002Google Fonts\u306a\u3089\u3001\u3069\u3093\u306aCDN\u3068CSS\u3092\u66f8\u3051\u3070\u826f\u3044\u304b\u63d0\u793a\u3057\u3066\u304f\u308c\u308b\u306e\u3067\u3001\u3069\u3093\u3069\u3093\u30b3\u30d4\u30da\u3057\u307e\u3059\u3002
\n<\/p>\n

\n.font1 {\n  font-family: 'Noto Sans JP', sans-serif;\n}\n<\/pre>
\nGoogle Fonts\u3067\u7121\u6599\u3067\u516c\u958b\u3055\u308c\u3066\u3044\u308b\u2f47\u672c\u8a9e\u30d5\u30a9\u30f3\u30c8\u306f8\u3064\u3057\u304b\u7121\u304b\u3063\u305f\u306e\u3067\u53d6\u308a\u672d\u306f8\u679a\u3067\u3059\u3002
\n\"\"\n<\/p>\n
\njQuery+Bootstrap\u3067\u826f\u3044\u611f\u3058\u306e\u53d6\u308a\u672d\u3068\u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u3092\u4f5c\u3063\u3066\u3044\u304d\u307e\u3059\u3002\u4e0a\u8a18\u306e\u3088\u3046\u306b\u4f5c\u3063\u305ffont1\u301cfont8\u3068\u3044\u3046\u30af\u30e9\u30b9\u3092\u3001\u5404\u30ab\u30fc\u30c9(\u53d6\u308a\u672d)\u306ediv\u306b\u5f53\u3066\u307e\u3059\u3002\u3042\u3068\u3067\u4e26\u3079\u66ff\u3048\u305f\u3044\u306e\u3067\u3001JS\u3067\u52d5\u7684\u306b\u751f\u6210\u3057\u3066\u3044\u307e\u3059\u3002
\n<\/p>\n
\nconst cardText = \"\u611b\u306e\u3042\u308b\u30e6\u30cb\u30fc\u30af\u3067\u8c4a\u304b\u306a\u66f8\u4f53\u3002\";\nconst fontNameData = {\n  1: \"Noto Sans JP\",\n  2: \"Noto Serif JP\",\n  3: \"M PLUS 1p\",\n  4: \"M PLUS Rounded 1c\",\n  5: \"Sawarabi Mincho\",\n  6: \"Sawarabi Gothic\",\n  7: \"Kosugi Maru\",\n  8: \"Kosugi\",\n};\nlet answer;\/\/ 1\u301c8\u3067\u6c7a\u3081\u3066\u304a\u304f(\u304a\u984c\u3092\u6c7a\u3081\u308b\u51e6\u7406\u306f\u7701\u7565)\n\n\/\/ \u53d6\u308a\u672d\u3092\u4e26\u3079\u308b\nlet cardHtml = \"\";\nfor (var i = 0; i < Object.keys(fontNameData).length; i++) {\n  cardHtml += '
';\n  cardHtml += '
';\n  cardHtml += '
';\n  cardHtml += '
' + cardText + '<\/h5>';\n  cardHtml += '
' + fontNameData[i+1] + '<\/p>';\n  cardHtml += '<\/div>';\n  cardHtml += '<\/div>';\n}\n$(\"#play_area\").html(cardHtml);\n$(\".font_name\").hide();\/\/ \u30d5\u30a9\u30f3\u30c8\u540d\u3092\u4f0f\u305b\u308b\n\n\/\/ \u30af\u30ea\u30c3\u30af\u3057\u305f\u3089\u5224\u5b9a\u3059\u308b(\u52d5\u7684\u306b\u751f\u6210\u3059\u308b\u8981\u7d20\u306a\u306e\u3067\u3001document\u306bclick\u30a4\u30d9\u30f3\u30c8\u3092\u5f53\u3066\u308b)\n$(document).on(\"click\", \".card\", function (e) {\n  let clicked = $(e.currentTarget).attr(\"id\");\n  if (clicked == answer) {\n    $(\"#now_result\").text(\"\u304a\u898b\u4e8b!\");\n    open(e.currentTarget);\n    if (openedFont.length == Object.keys(fontNameData).length) {\n      \/\/ \u5168\u3066\u958b\u3044\u305f\u306e\u3067\u7d42\u4e86\n      complete();\n    } else {\n      \/\/ \u6b21\u306e\u304a\u984c\u3092\u8a2d\u5b9a\u3059\u308b\n      next();\n    }\n  } else {\n    $(\"#now_result\").text(\"\u304a\u624b\u3064\u304d!\");\n  }\n});\n\nfunction open(targetObject) {\n  $(targetObject).find(\".font_name\").show();\n  openedFont.push(parseInt($(targetObject).attr(\"id\")));\n}\n<\/pre>
\nid\u306e\u4ed8\u3051\u65b9\u3084JS\u306e\u5909\u6570\u306e\u4f7f\u3044\u65b9\u306f\u3082\u3063\u3068\u826f\u3044\u65b9\u6cd5\u304c\u3042\u308b\u3068\u601d\u3044\u307e\u3059\u304c\u3001jQuery\u306eselector\u3092\u4f7f\u3046\u7df4\u7fd2\u306b\u306a\u308a\u307e\u3057\u305f\u3002\u5168\u3066\u958b\u3044\u305f\u6642\u3084\u4e26\u3079\u66ff\u3048\u308b\u51e6\u7406\u306fCodePen<\/a>\u3092\u898b\u3066\u304f\u3060\u3055\u3044\u3002
\n<\/p>\n
\n\u5b9f\u969b\u306b\u52d5\u304b\u3059\u3068\u3053\u3093\u306a\u611f\u3058\u3067\u3059\u3002\u6700\u521d\u306f\u300c\u304a\u984c\u300d\u3068\u3001\u30d5\u30a9\u30f3\u30c8\u540d\u304c\u4f0f\u305b\u3089\u308c\u305f\u53d6\u308a\u672d\u304c\u4e26\u3093\u3067\u3044\u307e\u3059\u3002
\n\"\"\n<\/p>\n
\n\u53d6\u308a\u672d\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u6b63\u89e3\u306a\u3089\u30d5\u30a9\u30f3\u30c8\u540d\u304c\u8868\u793a\u3055\u308c\u3001\u6b21\u306e\u304a\u984c\u304c\u4e0e\u3048\u3089\u308c\u307e\u3059\u3002\u9593\u9055\u3048\u308b\u3068\u300c\u304a\u624b\u3064\u304d\u300d\u3067\u3059\u304c\u7279\u306b\u30da\u30ca\u30eb\u30c6\u30a3\u3084\u6642\u9593\u5236\u9650\u306f\u3042\u308a\u307e\u305b\u3093\u3002
\n\"\"\n<\/p>\n
\u62d8\u3063\u305f\u70b9<\/h3>\n
\n\u53d6\u308a\u672d\u306e\u6587\u8a00\u306f\u300c\u611b\u306e\u3042\u308b\u30e6\u30cb\u30fc\u30af\u3067\u8c4a\u304b\u306a\u66f8\u4f53\u3002\u300d\u306e\u307f\u3002\u516c\u5f0f\u3092\u30ea\u30b9\u30da\u30af\u30c8\u3057\u3066\u3044\u307e\u3059\u3002
\n<\/p>\n
\n\u307e\u305f\u3001\u53d6\u308a\u672d\u304c8\u679a\u3060\u3051\u306a\u306e\u3067\u3001\u30d5\u30a9\u30f3\u30c8\u3067\u306f\u306a\u304f\u4f4d\u7f6e\u3092\u899a\u3048\u308b\u3053\u3068\u3067\u304a\u624b\u3064\u304d\u305b\u305a\u306b\u30af\u30ea\u30a2\u3059\u308b\u3068\u3044\u3046\u3053\u3068\u304c\u53ef\u80fd\u3067\u3059\u3002\u5bfe\u7b56\u3068\u3057\u3066\u3001\u3061\u3083\u3093\u3068\u30b7\u30e3\u30c3\u30d5\u30eb\u3057\u3066\u4e26\u3079\u308b\u30e2\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u307e\u3057\u305f\u3002
\n\"\"\n<\/p>\n
\u8ab2\u984c<\/h3>\n
\n3\u6642\u9593\u7a0b\u5ea6\u3067\u3072\u3068\u307e\u305a\u898b\u305b\u3089\u308c\u308b\u30ec\u30d9\u30eb\u306e\u3082\u306e\u3057\u304b\u4f5c\u3063\u3066\u3044\u306a\u3044\u306e\u3067\u3001\u304b\u308b\u305f\u3068\u3057\u3066\u306f\u307e\u3060\u5b9f\u88c5\u3059\u3079\u304d\u6a5f\u80fd\u304c\u3042\u308a\u307e\u3059\u3002
\n<\/p>\n