{"id":1265,"date":"2021-05-20T14:11:12","date_gmt":"2021-05-20T05:11:12","guid":{"rendered":"https:\/\/www.opentone.co.jp\/ot-lab\/?p=1265"},"modified":"2025-05-12T10:06:14","modified_gmt":"2025-05-12T01:06:14","slug":"vuetify-vdatatable-yscrolldatatale","status":"publish","type":"post","link":"https:\/\/www.opentone.co.jp\/ot-lab\/all\/vuetify\/vuetify-vdatatable-yscrolldatatale","title":{"rendered":"\u3010Vuetify\u3011VDataTable \u3092\u62e1\u5f35\u3057\u3066\u7e26\u30b9\u30af\u30ed\u30fc\u30eb\u53ef\u80fd\u306a YScrollDataTale \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3059\u308b"},"content":{"rendered":"\n

\u30b4\u30fc\u30eb<\/h1>\n\n\n\n
\"\"<\/figure>\n\n\n\n

\u4f7f\u7528\u30a4\u30e1\u30fc\u30b8<\/h2>\n\n\n\n
<y-scroll-data-table\n  :headers=\"headers\"\n  :items=\"items\"\n  :items-per-display=\"5\"\n>\n  <template v-slot:item.color=\"{ item }\">\n    <v-icon :color=\"item.color\" class=\"mr-3\">mdi-circle<\/v-icon>\n    {{ item.color }}\n  <\/template>\n<\/y-scroll-data-table><\/code><\/pre>\n\n\n\n
\u4f5c\u696d\u306e\u6d41\u308c<\/h1>\n\n\n\n
  1. \u65b0\u3057\u304f\u4f5c\u6210\u3057\u305f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5185\u3067 v-data-table \u3092\u4f7f\u7528\u3057\u3001\u4e00\u90e8\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u5024\u3092\u56fa\u5b9a\u3059\u308b<\/li>
  2. 6\u884c\u76ee\u4ee5\u964d\u3092\u30b9\u30af\u30ed\u30fc\u30eb\u53ef\u80fd\u306b\u3059\u308b<\/li>
  3. items-per-display \u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u7528\u610f\u3057\u3001\u53d7\u3051\u53d6\u3063\u305f\u6570\u5024\u4ee5\u964d\u306e\u884c\u3092\u30b9\u30af\u30ed\u30fc\u30eb\u53ef\u80fd\u306b\u3059\u308b<\/li><\/ol>\n\n\n\n
    1. \u65b0\u3057\u304f\u4f5c\u6210\u3057\u305f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5185\u3067 v-data-table \u3092\u4f7f\u7528\u3057\u3001\u4e00\u90e8\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u5024\u3092\u56fa\u5b9a\u3059\u308b<\/h2>\n\n\n\n
    \u4e0b\u90e8\u306e\u30d5\u30c3\u30bf\u30fc\u3092\u975e\u8868\u793a\u306b\u3059\u308b\u305f\u3081\u306b hide-default-footer \u3092 true \u306b\u3001
    \u30a2\u30a4\u30c6\u30e0\u3092\u5168\u3066\u3092\u8868\u793a\u3059\u308b\u305f\u3081\u306b items-per-page \u3092 items \u306e\u6570\u3068\u540c\u3058\u306b\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002

    v-data-table API<\/a>

    template \u30bf\u30b0\u3092\u4f7f\u7528\u3057\u4e0b\u8a18\u306e\u3088\u3046\u306b\u30b7\u30f3\u30d7\u30eb\u306b\u8a18\u8ff0\u3057\u305f\u3044\u3068\u3053\u308d\u3067\u3059\u304c\u3001slot \u304c\u6a5f\u80fd\u3057\u307e\u305b\u3093\u3002<\/p>\n\n\n\n
    <!-- YScrollDataTable.vue -->\n\n<template>\n  <v-data-table\n    v-bind=\"$attrs\"\n    :items-per-page=\"$attrs.items.length\"\n    hide-default-footer\n    v-on=\"$listeners\"\n  \/>\n<\/template><\/code><\/pre>\n\n\n\n
    template \u30bf\u30b0\u306f\u524a\u9664\u3057\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u63cf\u753b\u95a2\u6570\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u89e3\u6c7a\u3067\u304d\u307e\u3059\u3002
    \u63cf\u753b\u95a2\u6570\u3068JSX \u2014 Vue.js<\/a><\/p>\n\n\n\n
    <!-- YScrollDataTable.vue -->\n\n<script>\nexport default {\n  render(createElement) {\n    return createElement('v-data-table', {\n      props: {\n        ...this.$attrs,\n        itemsPerPage: this.$attrs.items.length,\n        hideDefaultFooter: true\n      },\n      on: this.$listeners,\n      scopedSlots: this.$scopedSlots\n    })\n  }\n}\n<\/script><\/code><\/pre>\n\n\n\n
    2. 6\u884c\u76ee\u4ee5\u964d\u3092\u30b9\u30af\u30ed\u30fc\u30eb\u53ef\u80fd\u306b\u3059\u308b<\/h2>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \u4e0a\u8a18\u306e\u3088\u3046\u306b\u5168\u3066\u306e\u30a2\u30a4\u30c6\u30e0\u3092\u8868\u793a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u305f\u305f\u3081\u3001\u6b21\u306f5\u884c\u5206\u306e\u307f\u3092\u8868\u793a\u3057\u30016\u884c\u76ee\u4ee5\u964d\u306f\u30b9\u30af\u30ed\u30fc\u30eb\u3059\u308b\u5f62\u306b\u4fee\u6b63\u3057\u307e\u3059\u3002
    \u30c7\u30b6\u30a4\u30f3\u3092\u8abf\u7bc0\u3059\u308b\u305f\u3081\u306b\u3001\u307e\u305a\u306f\u30af\u30e9\u30b9\u540d\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
    <script>\nexport default {\n  render(createElement) {\n    return createElement('v-data-table', {\n\n      \/\/ \u2193\u2193\u8ffd\u52a0\u2193\u2193\n      class: {\n        'yScrollDataTable': true,\n        'yScrollDataTable--scrollable': this.$attrs.items.length > 5\n      },\n      \/\/ \u2191\u2191\u8ffd\u52a0\u2191\u2191\n\n      props: {\n        ...this.$attrs,\n        itemsPerPage: this.$attrs.items.length,\n        hideDefaultFooter: true\n      },\n      on: this.$listeners,\n      scopedSlots: this.$scopedSlots\n    })\n  }\n}\n<\/script><\/code><\/pre>\n\n\n\n
    \u6b21\u306b\u30c7\u30b6\u30a4\u30f3\u3092\u8abf\u7bc0\u3057\u307e\u3059\u3002
    scoped \u4ed8\u304d\u306e style \u30bf\u30b0\u5185\u3067\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u8abf\u7bc0\u3059\u308b\u305f\u3081\u306b deep selector \u3092\u4f7f\u7528\u3057\u3066\u3044\u307e\u3059\u3002

    Deep Selectors | Vue Loader<\/a><\/p>\n\n\n\n
    <style lang=\"scss\" scoped>\n@import '~vuetify\/src\/styles\/styles.sass';\n@import '~vuetify\/src\/components\/VDataTable\/_variables.scss';\n\n.yScrollDataTable {\n  $row-height: $data-table-regular-row-height;\n\n  ::v-deep {\n    table, thead, tbody, th, td {\n      display: block;\n      width: 100% !important;\n    }\n\n    tr {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    th, td {\n      display: flex;\n      align-items: center;\n      height: $row-height !important;\n    }\n  }\n\n  &--scrollable ::v-deep tbody {\n    overflow-y: scroll;\n    max-height: $row-height * 5;\n\n    \/\/ \u30b9\u30af\u30ed\u30fc\u30eb\u30d0\u30fc\u5168\u4f53\n    &::-webkit-scrollbar {\n      width: 8px;\n    }\n\n    \/\/ \u30b9\u30af\u30ed\u30fc\u30eb\u30d0\u30fc\u306e\u8ecc\u9053\n    &::-webkit-scrollbar-track {\n      border-radius: 8px;\n      box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);\n    }\n\n    \/\/ \u30b9\u30af\u30ed\u30fc\u30eb\u30d0\u30fc\u306e\u52d5\u304f\u90e8\u5206\n    &::-webkit-scrollbar-thumb {\n      background-color: map-get($grey, 'base');\n      border-radius: 8px;\n    }\n  }\n}\n<\/style><\/code><\/pre>\n\n\n\n
    3. items-per-display \u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u7528\u610f\u3057\u3001\u53d7\u3051\u53d6\u3063\u305f\u6570\u5024\u4ee5\u964d\u306e\u884c\u3092\u30b9\u30af\u30ed\u30fc\u30eb\u53ef\u80fd\u306b\u3059\u308b<\/h2>\n\n\n\n
    6\u884c\u76ee\u4ee5\u964d\u3092\u30b9\u30af\u30ed\u30fc\u30eb\u3067\u8868\u793a\u3059\u308b\u5f62\u306b\u4fee\u6b63\u3067\u304d\u305f\u305f\u3081\u3001\u6b21\u306f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f7f\u7528\u3059\u308b\u5074\u304c\u8868\u793a\u3059\u308b\u884c\u6570\u3092\u6307\u5b9a\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002
    \u307e\u305a\u306f itemsPerDisplay \u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
    props: {\n  itemsPerDisplay: {\n    type: Number,\n    required: false,\n    default: 5\n  }\n}<\/code><\/pre>\n\n\n\n
    \u6b21\u306b\u3001\u7528\u610f\u3057\u305f itemsPerDisplay \u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u5143\u306b computed \u5185\u3067CSS\u5909\u6570\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002
    CSS \u30ab\u30b9\u30bf\u30e0\u30d7\u30ed\u30d1\u30c6\u30a3 (\u5909\u6570) \u306e\u4f7f\u7528 – CSS: \u30ab\u30b9\u30b1\u30fc\u30c7\u30a3\u30f3\u30b0\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8 | MDN<\/a><\/p>\n\n\n\n
    computed: {\n  cssVars() {\n    return {\n      '--itemsPerDisplay': this.itemsPerDisplay\n    }\n  }\n}<\/code><\/pre>\n\n\n\n
    \u4f5c\u6210\u3057\u305fCSS\u5909\u6570\u3092\u3001\u63cf\u753b\u95a2\u6570\u5185\u3067 style \u306b\u30d0\u30a4\u30f3\u30c9\u3057\u307e\u3059\u3002
    <v-data-table :style=\"cssVars\"><\/code> \u3068\u540c\u3058\u3053\u3068\u3092\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
    render(createElement) {\n  return createElement('v-data-table', {\n    class: {\n      'yScrollDataTable': true,\n      'yScrollDataTable--scrollable': this.$attrs.items.length > 5\n    },\n\n    \/\/ \u2193\u2193\u8ffd\u52a0\u2193\u2193\n    style: this.cssVars,\n    \/\/ \u2191\u2191\u8ffd\u52a0\u2191\u2191\n\n    props: {\n      ...this.$attrs,\n      itemsPerPage: this.$attrs.items.length,\n      hideDefaultFooter: true\n    },\n    on: this.$listeners,\n    scopedSlots: this.$scopedSlots\n  })\n},<\/code><\/pre>\n\n\n\n
    \u53d7\u3051\u53d6\u3063\u305fCSS\u5909\u6570\u3092\u5229\u7528\u3057\u3066 tbody \u306b\u9ad8\u3055\u3092\u4e0e\u3048\u307e\u3059\u3002<\/p>\n\n\n\n
    &--scrollable ::v-deep tbody {\n  overflow-y: scroll;\n\n  \/\/ From\n  max-height: $row-height * 5;\n\n  \/\/ To\n  max-height: calc(#{$row-height} * var(--itemsPerDisplay));\n}<\/code><\/pre>\n\n\n\n
    \u6700\u5f8c\u306b yScrollDataTable–scrollable \u30af\u30e9\u30b9\u306e\u8a2d\u5b9a\u6761\u4ef6\u3092\u4fee\u6b63\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
    class: {\n  'yScrollDataTable': true,\n\n  \/\/ From\n  'yScrollDataTable--scrollable': this.$attrs.items.length > 5\n\n  \/\/ To\n  'yScrollDataTable--scrollable': this.$attrs.items.length > this.itemsPerDisplay\n}<\/code><\/pre>\n\n\n\n
    \u3053\u308c\u3067\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f7f\u7528\u3059\u308b\u5074\u304c\u597d\u304d\u306a\u884c\u6570\u3092\u6307\u5b9a\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
    <y-scroll-data-table\n  :headers=\"...\"\n  :items=\"...\"\n  :items-per-display=\"5\"\n>\n  ...\n<\/y-scroll-data-table><\/code><\/pre>\n\n\n\n
    \u4ee5\u4e0a\u3067\u5b8c\u4e86\u3067\u3059\u3002
    \u6700\u5f8c\u306b\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u5168\u4f53\u3092\u8a18\u8f09\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
    index.vue (\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f7f\u7528\u3059\u308b\u5074)<\/h3>\n\n\n\n
    <template>\n  <v-container>\n    <y-scroll-data-table\n      :headers=\"headers\"\n      :items=\"items\"\n      :items-per-display=\"5\"\n    >\n      <template v-slot:item.color=\"{ item }\">\n        <v-icon :color=\"item.color\" class=\"mr-3\">mdi-circle<\/v-icon>\n        {{ item.color }}\n      <\/template>\n    <\/y-scroll-data-table>\n  <\/v-container>\n<\/template>\n\n<script>\nimport YScrollDataTable from '@\/components\/YScrollDataTable'\n\nexport default {\n  components: {\n    YScrollDataTable\n  },\n  data: () => ({\n    headers: [{ text: \"Colors\", value: \"color\", align: \"start\" }],\n    items: [\n      { color: \"red\" },\n      { color: \"pink\" },\n      { color: \"purple\" },\n      { color: \"deep-purple\" },\n      { color: \"indigo\" },\n      { color: \"blue\" },\n      { color: \"light-blue\" },\n      { color: \"cyan\" },\n      { color: \"teal\" },\n      { color: \"green\" },\n    ]\n  })\n}\n<\/script>\n<\/code><\/pre>\n\n\n\n
    YScrollDataTable.vue (\u3053\u306e\u8a18\u4e8b\u3067\u4f5c\u6210\u3057\u305f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8)<\/h3>\n\n\n\n
    <script>\nexport default {\n  props: {\n    itemsPerDisplay: {\n      type: Number,\n      required: false,\n      default: 5\n    }\n  },\n  render(createElement) {\n    return createElement('v-data-table', {\n      class: {\n        'yScrollDataTable': true,\n        'yScrollDataTable--scrollable': this.$attrs.items.length > this.itemsPerDisplay\n      },\n      style: this.cssVars,\n      props: {\n        ...this.$attrs,\n        itemsPerPage: this.$attrs.items.length,\n        hideDefaultFooter: true\n      },\n      on: this.$listeners,\n      scopedSlots: this.$scopedSlots\n    })\n  },\n  computed: {\n    cssVars() {\n      return {\n        '--itemsPerDisplay': this.itemsPerDisplay\n      }\n    }\n  }\n}\n<\/script>\n\n<style lang=\"scss\" scoped>\n@import '~vuetify\/src\/styles\/styles.sass';\n@import '~vuetify\/src\/components\/VDataTable\/_variables.scss';\n\n.yScrollDataTable {\n  $this: &;\n  $row-height: $data-table-regular-row-height;\n\n  ::v-deep {\n    table, thead, tbody, th, td {\n      display: block;\n      width: 100% !important;\n    }\n\n    tr {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    th, td {\n      display: flex;\n      align-items: center;\n      height: $row-height !important;\n    }\n  }\n\n  &--scrollable ::v-deep tbody {\n    overflow-y: scroll;\n    max-height: calc(#{$row-height} * var(--itemsPerDisplay));\n\n    \/\/ \u30b9\u30af\u30ed\u30fc\u30eb\u30d0\u30fc\u5168\u4f53\n    &::-webkit-scrollbar {\n      width: 8px;\n    }\n\n    \/\/ \u30b9\u30af\u30ed\u30fc\u30eb\u30d0\u30fc\u306e\u8ecc\u9053\n    &::-webkit-scrollbar-track {\n      border-radius: 8px;\n      box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);\n    }\n\n    \/\/ \u30b9\u30af\u30ed\u30fc\u30eb\u30d0\u30fc\u306e\u52d5\u304f\u90e8\u5206\n    &::-webkit-scrollbar-thumb {\n      background-color: map-get($grey, 'base');\n      border-radius: 8px;\n    }\n  }\n}\n<\/style><\/code><\/pre>\n\n\n\n
    \u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\u3002<\/p>\n
    \"\"<\/a><\/div>","protected":false},"excerpt":{"rendered":"
    \u30b4\u30fc\u30eb \u4f7f\u7528\u30a4\u30e1\u30fc\u30b8 \u4f5c\u696d\u306e\u6d41\u308c \u65b0\u3057\u304f\u4f5c\u6210\u3057\u305f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5185\u3067 v-data-table \u3092\u4f7f\u7528<\/p>\n","protected":false},"author":6,"featured_media":1269,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[27],"tags":[],"class_list":["post-1265","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vuetify",""],"acf":[],"aioseo_notices":[],"uagb_featured_image_src":{"full":["https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2021\/05\/yscroll-1.gif",924,328,false],"thumbnail":["https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2021\/05\/yscroll-1-150x150.gif",150,150,true],"medium":["https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2021\/05\/yscroll-1-300x106.gif",300,106,true],"medium_large":["https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2021\/05\/yscroll-1-768x273.gif",640,228,true],"large":["https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2021\/05\/yscroll-1.gif",640,227,false],"1536x1536":["https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2021\/05\/yscroll-1.gif",924,328,false],"2048x2048":["https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2021\/05\/yscroll-1.gif",924,328,false],"engage-mag-carousel-img":["https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2021\/05\/yscroll-1-783x328.gif",783,328,true],"engage-mag-carousel-img-landscape":["https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2021\/05\/yscroll-1-783x225.gif",783,225,true],"engage-mag-carousel-large-img":["https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2021\/05\/yscroll-1.gif",924,328,false],"engage-mag-carousel-large-img-landscape":["https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2021\/05\/yscroll-1-924x287.gif",924,287,true],"engage-mag-large-thumb":["https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2021\/05\/yscroll-1.gif",924,328,false],"engage-mag-small-thumb":["https:\/\/www.opentone.co.jp\/ot-lab\/wp-content\/uploads\/sites\/11\/2021\/05\/yscroll-1-350x220.gif",350,220,true]},"uagb_author_info":{"display_name":"suzumura","author_link":"https:\/\/www.opentone.co.jp\/ot-lab\/author\/suzumura"},"uagb_comment_info":0,"uagb_excerpt":"\u30b4\u30fc\u30eb \u4f7f\u7528\u30a4\u30e1\u30fc\u30b8 \u4f5c\u696d\u306e\u6d41\u308c \u65b0\u3057\u304f\u4f5c\u6210\u3057\u305f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5185\u3067 v-data-table \u3092\u4f7f\u7528","_links":{"self":[{"href":"https:\/\/www.opentone.co.jp\/ot-lab\/wp-json\/wp\/v2\/posts\/1265","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.opentone.co.jp\/ot-lab\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.opentone.co.jp\/ot-lab\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.opentone.co.jp\/ot-lab\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.opentone.co.jp\/ot-lab\/wp-json\/wp\/v2\/comments?post=1265"}],"version-history":[{"count":29,"href":"https:\/\/www.opentone.co.jp\/ot-lab\/wp-json\/wp\/v2\/posts\/1265\/revisions"}],"predecessor-version":[{"id":1297,"href":"https:\/\/www.opentone.co.jp\/ot-lab\/wp-json\/wp\/v2\/posts\/1265\/revisions\/1297"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.opentone.co.jp\/ot-lab\/wp-json\/wp\/v2\/media\/1269"}],"wp:attachment":[{"href":"https:\/\/www.opentone.co.jp\/ot-lab\/wp-json\/wp\/v2\/media?parent=1265"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.opentone.co.jp\/ot-lab\/wp-json\/wp\/v2\/categories?post=1265"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.opentone.co.jp\/ot-lab\/wp-json\/wp\/v2\/tags?post=1265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}