{"id":353,"date":"2023-02-03T10:39:03","date_gmt":"2023-02-03T01:39:03","guid":{"rendered":"https:\/\/hirabay.net\/?p=353"},"modified":"2023-02-03T13:19:39","modified_gmt":"2023-02-03T04:19:39","slug":"%e3%80%90web%e3%83%84%e3%83%bc%e3%83%ab%e3%80%91base64%e3%82%a8%e3%83%b3%e3%82%b3%e3%83%bc%e3%83%89-%e3%83%87%e3%82%b3%e3%83%bc%e3%83%89","status":"publish","type":"post","link":"https:\/\/hirabay.net\/?p=353","title":{"rendered":"\u3010Web\u30c4\u30fc\u30eb\u3011Base64\u30a8\u30f3\u30b3\u30fc\u30c9\/\u30c7\u30b3\u30fc\u30c9"},"content":{"rendered":"\n<div class=\"wp-block-sgb-say\"><div class=\"sgb-block-say sgb-block-say--left\"><div class=\"sgb-block-say-avatar\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/hirabay.net\/wp-content\/uploads\/2023\/01\/c90be45c419f1b74db0f1d5a262d000d.png\" alt=\"\u3072\u3089\u3079\u30fc\" width=\"80\" height=\"80\" style=\"border-color:#eaedf2\"><div class=\"sgb-block-say-avatar__name\">\u3072\u3089\u3079\u30fc<\/div><\/div><div class=\"sgb-block-say-text\"><div class=\"sgb-block-say-text__content\" style=\"color:#333;border-color:#d5d5d5;background-color:#FFF\">\n<p class=\"wp-block-paragraph\">Base64\u30a8\u30f3\u30b3\u30fc\u30c9\u30fb\u30c7\u30b3\u30fc\u30c9\u3067\u304d\u308b\u30c4\u30fc\u30eb\u3067\u3059\uff01<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u50d5\u81ea\u8eab\u304c\u826f\u304f\u4f7f\u3046\u306e\u3067\uff12\u91cd\u306b\u30a8\u30f3\u30b3\u30fc\u30c9\u30fb\u30c7\u30b3\u30fc\u30c9\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<span class=\"sgb-block-say-text__before\" style=\"border-right-color:#d5d5d5\"><\/span><span class=\"sgb-block-say-text__after\" style=\"border-right-color:#FFF\"><\/span><\/div><\/div><\/div><\/div>\n\n\n\n<script src=\"https:\/\/unpkg.com\/vue@3\/dist\/vue.global.js\"><\/script>\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n<div id=\"app\">\n    <buutton class=\"rounded px-4 py-2 cursor-default static\" :class=\"{\n             'bg-green-500 bg-green-500 text-gray-100 hover:bg-green-400': encMode,\n             'border border-green-500 text-green-500 hover:bg-green-500 hover:text-gray-100': !encMode\n             }\" v-on:click=\"changeEncodeMode\">Encode<\/buutton>\n\n    <buutton class=\"rounded px-4 py-2 cursor-default static\" :class=\"{\n             'border border-red-500 text-red-500 hover:bg-red-500 hover:text-gray-100': encMode,\n             'bg-red-500 text-gray-100 hover:bg-red-400': !encMode\n             }\" v-on:click=\"changeDecodeMode\">Decode<\/buutton>\n\n    <br><br>\n    <p class=\"underline font-bold\">\u25bc{{ encodedMessage }}\u5bfe\u8c61<\/p>\n    <textarea class=\"w-full mt-2 px-3 py-2 text-gray-700 border rounded-lg focus:outline-none\" rows=\"6\" v-model=\"target\" v-on:keyup=\"onchange\"><\/textarea>\n    <br>\n    <p class=\"underline font-bold\">\u25bc{{ encodedMessage }}\u7d50\u679c\uff08\uff11\u56de\u76ee\uff09<\/p>\n    <textarea class=\"w-full mt-2 px-3 py-2 text-gray-700 border rounded-lg focus:outline-none\" rows=\"6\" v-model=\"encoded1\"><\/textarea>\n    <br>\n    <p class=\"underline font-bold\">\u25bc{{ encodedMessage }}\u7d50\u679c\uff08\uff12\u56de\u76ee\uff09<\/p>\n    <textarea class=\"w-full mt-2 px-3 py-2 text-gray-700 border rounded-lg focus:outline-none\" rows=\"6\" v-model=\"encoded2\"><\/textarea>\n<\/div>\n\n<script>\n    const { createApp } = Vue\n\n    createApp({\n        data() {\n            return {\n                target: '',\n                encoded1: '',\n                encoded2: '',\n                encMode: true,\n                encodedMessage: '\u30a8\u30f3\u30b3\u30fc\u30c9'\n            }\n        },\n        methods: {\n            onchange: function() {\n                try {\n                    if (this.encMode) {\n                        this.encoded1 =  window.btoa(this.target)\n                        this.encoded2 =  window.btoa(this.encoded1)\n                    } else {\n                        this.encoded1 =  window.atob(this.target)\n                        this.encoded2 =  window.atob(this.encoded1)\n                    }\n                } catch (err) {\n                    return ''\n                }\n            },\n            changeDecodeMode: function() {\n                this.encMode = false\n                this.encodedMessage = '\u30c7\u30b3\u30fc\u30c9'\n                this.onchange()\n            },\n            changeEncodeMode: function() {\n                this.encMode = true\n                this.encodedMessage = '\u30a8\u30f3\u30b3\u30fc\u30c9'\n                this.onchange()\n            }\n        }\n    }).mount('#app')\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Encode Decode \u25bc{{ encodedMessage }}\u5bfe\u8c61 \u25bc{{ encodedMessage }}\u7d50\u679c\uff08\uff11\u56de\u76ee\uff09 \u25bc{{ encodedMessage }}\u7d50\u679c\uff08\uff12\u56de\u76ee\uff09<\/p>\n","protected":false},"author":1,"featured_media":374,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[71],"class_list":["post-353","post","type-post","status-publish","format-standard","has-post-thumbnail","category-6","tag-web"],"jetpack_featured_media_url":"https:\/\/hirabay.net\/wp-content\/uploads\/2023\/02\/base64.png","_links":{"self":[{"href":"https:\/\/hirabay.net\/index.php?rest_route=\/wp\/v2\/posts\/353","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hirabay.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hirabay.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hirabay.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hirabay.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=353"}],"version-history":[{"count":12,"href":"https:\/\/hirabay.net\/index.php?rest_route=\/wp\/v2\/posts\/353\/revisions"}],"predecessor-version":[{"id":369,"href":"https:\/\/hirabay.net\/index.php?rest_route=\/wp\/v2\/posts\/353\/revisions\/369"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hirabay.net\/index.php?rest_route=\/wp\/v2\/media\/374"}],"wp:attachment":[{"href":"https:\/\/hirabay.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=353"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hirabay.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=353"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hirabay.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}