{"id":1294,"date":"2020-05-06T19:23:18","date_gmt":"2020-05-06T10:23:18","guid":{"rendered":"http:\/\/168.138.214.208\/?p=1294"},"modified":"2020-05-07T20:33:32","modified_gmt":"2020-05-07T11:33:32","slug":"post-1294","status":"publish","type":"post","link":"https:\/\/nobunobu1717.site\/?p=1294","title":{"rendered":"Ruby on Rails\u3067\u30de\u30fc\u30af\u30c0\u30a6\u30f3\u30a8\u30c7\u30a3\u30bf\u306eSimpleMDE\u3092\u4f7f\u7528\u3059\u308b\u3002(Rails6)"},"content":{"rendered":"<h2>\u6982\u8981<\/h2>\n<p>Rails6\u306bSimpleMDE\u3092\u7d44\u307f\u8fbc\u3080\u65b9\u6cd5\u306e\u30e1\u30e2\u3002<br \/>\nRails\u306fjs\u306e\u7ba1\u7406\u65b9\u6cd5\u306a\u3069\u304c\u72ec\u81ea\u306a\u306e\u3067\u5fd8\u5099\u9332\u3002<\/p>\n<p>SimpleMDE\u3092\u4f7f\u3046\u3068\u4e0b\u8a18\u306e\u3088\u3046\u306a\u30de\u30fc\u30af\u30c0\u30a6\u30f3\u30a8\u30c7\u30a3\u30bf\u304c\u7c21\u5358\u306b\u5b9f\u88c5\u3067\u304d\u308b\u3002<\/p>\n<p><a href=\"http:\/\/168.138.214.208\/wp-content\/uploads\/2020\/05\/110b55777ea2cf98285498e581661edc.png\"><img src=\"http:\/\/168.138.214.208\/wp-content\/uploads\/2020\/05\/110b55777ea2cf98285498e581661edc-300x153.png\" alt=\"\" width=\"300\" height=\"153\" class=\"aligncenter size-medium wp-image-1295\" srcset=\"https:\/\/nobunobu1717.site\/wp-content\/uploads\/2020\/05\/110b55777ea2cf98285498e581661edc-300x153.png 300w, https:\/\/nobunobu1717.site\/wp-content\/uploads\/2020\/05\/110b55777ea2cf98285498e581661edc-768x392.png 768w, https:\/\/nobunobu1717.site\/wp-content\/uploads\/2020\/05\/110b55777ea2cf98285498e581661edc-1024x523.png 1024w, https:\/\/nobunobu1717.site\/wp-content\/uploads\/2020\/05\/110b55777ea2cf98285498e581661edc.png 1908w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<h2>\u624b\u9806<\/h2>\n<h3>\u6e96\u5099<\/h3>\n<p>\u9069\u5f53\u306a\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210<br \/>\n<em>rails new mark_down_test<\/em><\/p>\n<p>Yarn\u3067SimpleMDE\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<br \/>\n<em>yarn add simplemde<\/em><\/p>\n<p>webpack\u306b\u30b3\u30f3\u30d1\u30a4\u30eb\u5bfe\u8c61\u3068\u3057\u3066\u7d44\u307f\u8fbc\u3080\u3002<br \/>\napp\/javascript\/packs\/application.js\u306bjs\u3068css\u306e\u53c2\u7167\u3092\u8ffd\u52a0\u3059\u308b\u3002<\/p>\n<pre class=\"lang:default decode:true \" >\r\n\r\n\/\/ This file is automatically compiled by Webpack, along with any other files\r\n\/\/ present in this directory. You're encouraged to place your actual application logic in\r\n\/\/ a relevant structure within app\/javascript and only use these pack files to reference\r\n\/\/ that code so it'll be compiled.\r\n\r\nrequire(\"@rails\/ujs\").start()\r\nrequire(\"turbolinks\").start()\r\nrequire(\"@rails\/activestorage\").start()\r\nrequire(\"channels\")\r\n\r\n\/\/ \u8ffd\u52a0\r\nrequire(\"simplemde\")\r\n\r\n\r\n\/\/ Uncomment to copy all static images under ..\/images to the output folder and reference\r\n\/\/ them with the image_pack_tag helper in views (e.g &lt;%= image_pack_tag 'rails.png' %&gt;)\r\n\/\/ or the `imagePath` JavaScript helper below.\r\n\/\/\r\n\/\/ const images = require.context('..\/images', true)\r\n\/\/ const imagePath = (name) =&gt; images(name, true)\r\n\r\n\/\/ \u8ffd\u52a0\r\nimport 'simplemde\/dist\/simplemde.min.css'\r\n\r\n<\/pre>\n<h3>\u30a2\u30d7\u30ea\u3067\u306e\u4f7f\u7528<\/h3>\n<p>\u9069\u5f53\u306a\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u3068\u30d3\u30e5\u30fc\u3092\u4f5c\u6210\u3002<br \/>\n\u4f8b\uff1a<em>rails g controller sample<\/em><\/p>\n<p>app\/views\/sample\/index.html.erb<\/p>\n<p>\u30d3\u30e5\u30fc\u306btextarea\u30bf\u30b0\u3092\u4f5c\u6210\u3059\u308b\u3002<\/p>\n<pre class=\"lang:default decode:true \" >\r\n&lt;h2&gt;Editor&lt;\/h2&gt;\r\n\r\n&lt;textarea id=\"editor\" name=\"name\" rows=\"10\" cols=\"40\"&gt;&lt;\/textarea&gt;\r\n\r\n<\/pre>\n<p>\u6b21\u306b\u30a2\u30d7\u30ea\u3067\u4f7f\u7528\u3059\u308bjs\u3092\u4f5c\u6210\u3059\u308b\u3002<br \/>\napp\/javascript\u30c7\u30a3\u30ec\u30c8\u30af\u30ea\u4ee5\u4e0b\u306b\u683c\u7d0d\u3059\u308b\u3002<\/p>\n<p>app\/javascript\/sample.js<\/p>\n<p>js\u5185\u3067simplemde\u3092import\u3057\u3066\u4f7f\u7528\u3059\u308b\u3002<\/p>\n<pre class=\"lang:js decode:true \" >\r\n\r\nimport SimpleMDE from 'simplemde'\r\nwindow.onload = function () {\r\n  const simplemde = new SimpleMDE({ element: document.getElementById(\"editor\") });\r\n};\r\n\r\n<\/pre>\n<p>application.js\u306b\u30b3\u30f3\u30d1\u30a4\u30eb\u5bfe\u8c61\u3068\u3057\u3066\u8ffd\u52a0\u3059\u308b\u3002<br \/>\n\/\/ \u8ffd\u52a0<br \/>\nrequire(\"sample\")<\/p>\n<p>(app\/javascript\/packs\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u4ee5\u4e0b\u306b\u5165\u308c\u305f\u5834\u5408\u306f\u81ea\u52d5\u3067\u30b3\u30f3\u30d1\u30a4\u30eb\u5bfe\u8c61\u3068\u306a\u308b\u306e\u3067\u8a18\u8f09\u306f\u4e0d\u8981\u3002)<\/p>\n<p>\u5f8c\u306frails s\u3067\u7acb\u3061\u4e0a\u3052\u308c\u3070\u30a8\u30c7\u30a3\u30bf\u304c\u8868\u793a\u3055\u308c\u308b\u3002<\/p>\n<p><a href=\"http:\/\/168.138.214.208\/wp-content\/uploads\/2020\/05\/110b55777ea2cf98285498e581661edc.png\"><img src=\"http:\/\/168.138.214.208\/wp-content\/uploads\/2020\/05\/110b55777ea2cf98285498e581661edc-300x153.png\" alt=\"\" width=\"300\" height=\"153\" class=\"aligncenter size-medium wp-image-1295\" srcset=\"https:\/\/nobunobu1717.site\/wp-content\/uploads\/2020\/05\/110b55777ea2cf98285498e581661edc-300x153.png 300w, https:\/\/nobunobu1717.site\/wp-content\/uploads\/2020\/05\/110b55777ea2cf98285498e581661edc-768x392.png 768w, https:\/\/nobunobu1717.site\/wp-content\/uploads\/2020\/05\/110b55777ea2cf98285498e581661edc-1024x523.png 1024w, https:\/\/nobunobu1717.site\/wp-content\/uploads\/2020\/05\/110b55777ea2cf98285498e581661edc.png 1908w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>2020\/05\/07 \u8ffd\u8a18<br \/>\nturbolinks\u304c\u5165\u3063\u3066\u3044\u308b\u74b0\u5883\u3067\u52d5\u304b\u3059\u3068\u753b\u9762\u3092\u30a8\u30c7\u30a3\u30bf\u304c\u8907\u6570\u4f5c\u3089\u308c\u308b\u75c7\u72b6\u304c\u767a\u751f\u3057\u305f\u306e\u3067turbolink\u3092\u6d88\u3059\u3053\u3068\u3067\u5bfe\u5fdc\u3057\u305f\u3002<br \/>\n<a href=\"http:\/\/168.138.214.208\/?p=1309\">\u30ea\u30f3\u30af<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6982\u8981 Rails6\u306bSimpleMDE\u3092\u7d44\u307f\u8fbc\u3080\u65b9\u6cd5\u306e\u30e1\u30e2\u3002 Rails\u306fjs\u306e\u7ba1\u7406\u65b9\u6cd5\u306a\u3069\u304c\u72ec\u81ea\u306a\u306e\u3067\u5fd8\u5099\u9332\u3002 SimpleMDE\u3092\u4f7f\u3046\u3068\u4e0b\u8a18\u306e\u3088\u3046\u306a\u30de\u30fc\u30af\u30c0\u30a6\u30f3\u30a8\u30c7\u30a3\u30bf\u304c\u7c21\u5358\u306b\u5b9f\u88c5\u3067\u304d\u308b\u3002 \u624b\u9806  &#8230; <\/p>\n","protected":false},"author":1,"featured_media":1278,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6,22,32],"tags":[],"_links":{"self":[{"href":"https:\/\/nobunobu1717.site\/index.php?rest_route=\/wp\/v2\/posts\/1294"}],"collection":[{"href":"https:\/\/nobunobu1717.site\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nobunobu1717.site\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nobunobu1717.site\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nobunobu1717.site\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1294"}],"version-history":[{"count":6,"href":"https:\/\/nobunobu1717.site\/index.php?rest_route=\/wp\/v2\/posts\/1294\/revisions"}],"predecessor-version":[{"id":1311,"href":"https:\/\/nobunobu1717.site\/index.php?rest_route=\/wp\/v2\/posts\/1294\/revisions\/1311"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nobunobu1717.site\/index.php?rest_route=\/wp\/v2\/media\/1278"}],"wp:attachment":[{"href":"https:\/\/nobunobu1717.site\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1294"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nobunobu1717.site\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1294"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nobunobu1717.site\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}