{"id":4716,"date":"2019-10-11T04:17:20","date_gmt":"2019-10-10T19:17:20","guid":{"rendered":"https:\/\/blog.capilano-fw.com\/?p=4716"},"modified":"2019-10-11T04:17:20","modified_gmt":"2019-10-10T19:17:20","slug":"%e3%80%90vue%e3%80%91google-%e3%83%95%e3%82%a9%e3%83%88%e3%81%ae%e3%82%88%e3%81%86%e3%81%aa%e7%94%bb%e5%83%8f%e9%81%b8%e6%8a%9e%e3%81%a7%e3%81%8d%e3%82%8b%e6%a9%9f%e8%83%bd%e3%82%92%e5%ae%9f%e8%a3%85","status":"publish","type":"post","link":"https:\/\/blog.capilano-fw.com\/?p=4716","title":{"rendered":"\u3010Vue\u3011Google \u30d5\u30a9\u30c8\u306e\u3088\u3046\u306a\u753b\u50cf\u9078\u629e\u3067\u304d\u308b\u6a5f\u80fd\u3092\u5b9f\u88c5\u3059\u308b"},"content":{"rendered":"

\u3055\u3066\u3055\u3066\u3001\u3053\u306e\u3068\u3053\u308d\u3053\u306e\u30d6\u30ed\u30b0\u3067\u306f\u30e6\u30fc\u30b6\u30fc\u30d3\u30ea\u30c6\u30a3\u3092\u5411\u4e0a\u3059\u308b\u305f\u3081\u306e\u8a18\u4e8b\u3092\u516c\u958b\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u305d\u306e\u6d41\u308c\u3082\u3042\u3063\u3066\u56f3\u66f8\u9928\u3067\u3044\u304f\u3064\u304b\u306e\u30e6\u30fc\u30b6\u30d3\u30ea\u30c6\u30a3\u306e\u672c\u3092\u3072\u3068\u901a\u308a\u898b\u3066\u307f\u308b\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n

\u305d\u3057\u3066\u3001\u305d\u306e\u672c\u306b\u306f\u3044\u308d\u3044\u308d\u3068\u66f8\u304b\u308c\u3066\u3044\u305f\u306e\u3067\u3059\u304c\u3001\u4e2d\u3067\u3082\u4e00\u756a\u300c\u305f\u3057\u304b\u306b\uff01\u300d<\/strong>\u3068\u601d\u3063\u305f\u3053\u3068\u304c\u3042\u308a\u307e\u3057\u305f\u3002<\/p>\n

\u305d\u308c\u304c\u3001\u826f\u3044\u30e6\u30fc\u30b6\u30d3\u30ea\u30c6\u30a3\u306e\u4f8b\u3068\u3057\u3066\u8868\u793a\u3055\u308c\u3066\u3044\u305f\u3001<\/p>\n

\u300cGoogle\u30d5\u30a9\u30c8\u300d\u306e\u9078\u629e\u6a5f\u80fd<\/strong><\/p>\n

\u3067\u3059\u3002<\/p>\n

\u2193\u2193\u2193 \u3053\u3093\u306a\u30ab\u30f3\u30b8\u3067\u3059\u306d\u3002<\/p>\n

\"\"<\/p>\n

\u3053\u308c\u306f\u3001\u3072\u3068\u76ee\u307f\u308b\u3060\u3051\u3067\u300c\u4eca\u3069\u306e\u753b\u50cf\u304c\u9078\u629e\u4e2d\u306a\u306e\u304b\u300d<\/strong>\u304c\u3068\u3066\u3082\u5206\u304b\u308a\u3084\u3059\u3044\u30c7\u30b6\u30a4\u30f3\u3060\u3068\u601d\u3046\u3093\u3067\u3059\u3002\u3057\u304b\u3082\u3001\u9006\u306e\u300c\u3069\u308c\u304c\u9078\u629e\u3055\u308c\u3066\u3044\u306a\u3044\u304b\u300d<\/strong>\u3082\u5206\u304b\u308a\u3084\u3059\u3044\u3067\u3059\u3088\u306d\u3002<\/p>\n

\u4eca\u307e\u3067\u4f55\u6c17\u306a\u304f\u4f7f\u3063\u3066\u3044\u307e\u3057\u305f\u304c\u3001\u3060\u304b\u3089\u3053\u305d\u300c\u8003\u3048\u305a\u306b\u4f7f\u3048\u308b\u3001\u3064\u307e\u308a\u826f\u3044\u30e6\u30fc\u30b6\u30d3\u30ea\u30c6\u30a3\u300d<\/strong>\u3063\u3066\u3053\u3068\u3067\u3059\u306d\u3002<\/p>\n

\u305d\u3053\u3067\uff01<\/p>\n

\u4eca\u56de\u306f\u3001Vue<\/code>\u3092\u4f7f\u3063\u3066\u3053\u306e\u300cGoogle\u30d5\u30a9\u30c8\u300d\u306e\u3088\u3046\u306a\u9078\u629e\u6a5f\u80fd\u3092\u5b9f\u88c5\u3057\u3066\u307f\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002\uff08\u3061\u306a\u307f\u306b\u9078\u629e\u6a5f\u80fd\u3060\u3051\u3058\u3083\u306a\u304f\u3001\u3055\u3063\u304d\u306e\u753b\u50cf\u4e0a\u90e8\u306b\u3042\u308b\u300c\u9078\u629e\u3057\u305f\u6642\u3060\u3051\u8868\u793a\u3055\u308c\u308b\u524a\u9664\u30dc\u30bf\u30f3\u300d\u3082\u3064\u304f\u3063\u3066\u307f\u307e\u3059\uff09<\/p>\n

\u305c\u3072\u7686\u3055\u3093\u306e\u304a\u5f79\u306b\u7acb\u3066\u308b\u3068\u5b09\u3057\u3044\u3067\u3059\ud83d\ude0a\u2728<\/p>\n

\"\"<\/p>\n

\u958b\u767a\u74b0\u5883\uff1a<\/strong> Vue 2.6<\/p>\n

\u3084\u308a\u305f\u3044\u3053\u3068<\/h1>\n

\u3068\u3044\u3046\u3053\u3068\u3067\u3001\u4eca\u56de\u5b9f\u88c5\u3057\u305f\u3044\u5185\u5bb9\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n

    \n
  • \u753b\u50cf\u3092\u6b63\u65b9\u5f62\u3067\u4e26\u3079\u3066\u8868\u793a\u3059\u308b<\/li>\n
  • \u753b\u50cf\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u3089\u9078\u629e\u72b6\u614b\u306b\u306a\u3063\u3066\u8868\u793a\u304c\u5909\u308f\u308b<\/li>\n
  • \u9078\u629e\u3055\u308c\u305f\u753b\u50cf\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u3089\u3001\u9078\u629e\u3055\u308c\u3066\u3044\u306a\u3044\u72b6\u614b\u306b\u3082\u3069\u308b<\/li>\n
  • \u753b\u50cf\u304c\u9078\u629e\u3055\u308c\u305f\u6642\u3060\u3051\u524a\u9664\u30dc\u30bf\u30f3\u3092\u8868\u793a\u3059\u308b<\/li>\n<\/ul>\n

    \u3067\u306f\u3001\u4eca\u56de\u3082\u9806\u3092\u8ffd\u3063\u3066\u898b\u3066\u3044\u304d\u307e\u3057\u3087\u3046\uff01<\/p>\n

    Vue\u306e\u57fa\u672c\u5f62\u3092\u3064\u304f\u308b<\/h1>\n

    \u3067\u306f\u3001\u3053\u308c\u304b\u3089\u753b\u50cf\u3092\u8868\u793a\u3057\u3066\u9078\u629e\u6a5f\u80fd\u3092\u3064\u304f\u3063\u3066\u3044\u304f\u305f\u3081\u306e\u57fa\u672c\u306b\u306a\u308bHTML<\/code>\uff06JavaScript<\/code>\u3092\u7528\u610f\u3057\u307e\u3059\u3002<\/p>\n

    <html>\r\n<head>\r\n<\/head>\r\n<body>\r\n    <div id=\"app\"<\/strong>>\r\n\r\n        <!-- \u3053\u3053\u306b\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u3064\u304f\u308b -->\r\n\r\n    <\/div>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue@2.6.0\"><\/script><\/strong>\r\n    <script>\r\n\r\n        new Vue({\r\n            el: '#app<\/strong>'\r\n        });\r\n\r\n    <\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
    \u753b\u50cf\u3092\u4e26\u3079\u3066\u8868\u793a\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b<\/h1>\n
    \u6b21\u306b\u3001\u4eca\u56de\u30c6\u30b9\u30c8\u3068\u3057\u3066\u8868\u793a\u3059\u308b\u4ee5\u4e0b\u306e\u753b\u50cf\uff15\u3064\u3092\u300c\u304d\u308c\u3044\u306b\u6b63\u65b9\u5f62\u3067\u300d\u8868\u793a\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002\uff08\u3061\u306a\u307f\u306b\u3053\u306e\u753b\u50cf\u3092\u79c1\u304c\u6700\u8fd1\u7f8e\u5473\u3057\u3044\u3068\u601d\u3063\u305f\u98df\u3079\u7269\u30fb\u98f2\u307f\u7269\u3067\u3059\ud83d\ude1a\uff09<\/p>\n
    \"\" \"\" \"\" \"\" \"\"<\/p>\n
    \u3067\u306f\u3001\u753b\u50cf\u306eURL\u3092data<\/code>\u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n
    new Vue({\r\n    el: '#app',\r\n    data: {<\/strong>\r\n        imageUrls: [<\/strong>\r\n            '\/images\/yummy\/1.jpg',<\/strong>\r\n            '\/images\/yummy\/2.jpg',<\/strong>\r\n            '\/images\/yummy\/3.jpg',<\/strong>\r\n            '\/images\/yummy\/4.jpg',<\/strong>\r\n            '\/images\/yummy\/5.jpg'<\/strong>\r\n        ]<\/strong>\r\n    }<\/strong>\r\n});<\/pre>\n
    \u305d\u3057\u3066\u6b21\u306b\u3001\u305d\u308c\u3089\u306eURL\u3092\u30eb\u30fc\u30d7\u3067\u8868\u793a\u3059\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n
    <div class=\"selectable-box active\" v-for=\"(imageUrl,index) in imageUrls\"<\/strong>>\r\n    <img :src=\"imageUrl\"<\/strong>>\r\n<\/div><\/pre>\n
    \u753b\u50cf\u306f\u5927\u304d\u3055\u3082\u7e26\u9577\u30fb\u6a2a\u9577\u3082\u30d0\u30e9\u30d0\u30e9\u306a\u306e\u3067CSS<\/code>\u3092\u8ffd\u52a0\u3057\u3066\u304a\u304d\u307e\u3059\u3002\uff08object-fit:cover;<\/code>\u3092\u4f7f\u3048\u3070\u30ad\u30ec\u30a4\u306b\u30d5\u30a3\u30c3\u30c8\u3055\u305b\u3066\u304f\u308c\u308b\u3093\u3067\u3059\u306d\ud83d\ude0a\uff09<\/p>\n
    <html>\r\n<head>\r\n    <style><\/strong>\r\n\r\n        .selectable-box {<\/strong>\r\n\r\n            float: left;<\/strong>\r\n            width: 150px;<\/strong>\r\n            height: 150px;<\/strong>\r\n            margin: 5px;<\/strong>\r\n            background: #e8f0fd;<\/strong>\r\n            position: relative;<\/strong>\r\n\r\n        }<\/strong>\r\n\r\n        .active {<\/strong>\r\n\r\n            width: 120px;<\/strong>\r\n            height: 120px;<\/strong>\r\n            padding: 15px;<\/strong>\r\n\r\n        }<\/strong>\r\n\r\n        .selectable-box img {<\/strong>\r\n\r\n            width:100%;<\/strong>\r\n            height:100%;<\/strong>\r\n            object-fit:cover;<\/strong>\r\n\r\n        }<\/strong>\r\n\r\n    <\/style><\/strong>\r\n<\/head>\r\n\r\n<!-- \u4ee5\u4e0b\u7701\u7565 --><\/pre>\n
    \u5b9f\u969b\u306b\u8868\u793a\u3057\u305f\u3082\u306e\u304c\u3053\u3061\u3089\u3067\u3059\u3002<\/p>\n
    \"\"<\/p>\n
    \u305d\u3057\u3066\u3001\u9078\u629e\u3055\u308c\u305f\u3068\u304d\u7528\u306eactive<\/code>\u3092\u3064\u3051\u305f\u30d0\u30fc\u30b8\u30e7\u30f3\u306f\u3053\u3061\u3089\u3002\uff08\u305f\u3060\u3057\u3001\u307e\u3060\u30a2\u30a4\u30b3\u30f3\u306f\u3064\u3044\u3066\u3044\u307e\u305b\u3093\uff09<\/p>\n
    \"\"<\/p>\n
    \u753b\u50cf\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u3089\u300c\u9078\u629e\uff0f\u672a\u9078\u629e\u300d\u3092\u5207\u308a\u66ff\u3048\u308b<\/h1>\n
    \u3067\u306f\u7d9a\u3044\u3066\u3001\u3069\u306e\u753b\u50cf\u304c\u9078\u629e\u3055\u308c\u3066\u3044\u308b\u304b\u304c\u5206\u304b\u308b\u3088\u3046\u306bselectedIndexes<\/code>\u3068\u3044\u3046\u5909\u6570\u3092\u3064\u304f\u3063\u3066\u3001\u753b\u50cf\u30af\u30ea\u30c3\u30af\u6642\u306b\u4e2d\u8eab\u3092\u5909\u66f4\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n
    \u307e\u305a\u306fHTML\u5074\u3067\u3059\u3002
    \n\u753b\u50cf\u306b\u30af\u30ea\u30c3\u30af\u30fb\u30a4\u30d9\u30f3\u30c8\u3092\u3064\u3051\u307e\u3059\u3002<\/p>\n
    <div class=\"selectable-box\" v-for=\"(imageUrl,index) in imageUrls\">\r\n    <img :src=\"imageUrl\" @click=\"onImageSelect(index)\"<\/strong>>\r\n<\/div><\/pre>\n
    \u305d\u3057\u3066\u3001\u5fc5\u8981\u306a\u5909\u6570\u3068\u30e1\u30bd\u30c3\u30c9\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
    new Vue({\r\n    el: '#app',\r\n    data: {\r\n\r\n        \/\/ \u7701\u7565\r\n\r\n        selectedIndexes: []<\/strong>\r\n    },\r\n    methods: {<\/strong>\r\n        isSelected(index) {<\/strong>\r\n\r\n            return (this.selectedIndexes.includes(index));<\/strong>\r\n\r\n        },<\/strong>\r\n        onImageSelect(imageIndex) {<\/strong>\r\n\r\n            if(this.isSelected(imageIndex)) { \/\/ \u9078\u629e\u3055\u308c\u3066\u3044\u308b<\/strong>\r\n\r\n                \/\/ \u9078\u629e\u3055\u308c\u305f\u753b\u50cf\u300c\u4ee5\u5916\u300d\u3060\u3051\u6b8b\u3059<\/strong>\r\n                this.selectedIndexes = this.selectedIndexes.filter((selectedIndex) => {<\/strong>\r\n\r\n                    return (selectedIndex !== imageIndex);<\/strong>\r\n\r\n                });<\/strong>\r\n\r\n            } else {<\/strong>\r\n\r\n                this.selectedIndexes.push(imageIndex);<\/strong>\r\n\r\n            }<\/strong>\r\n\r\n        }<\/strong>\r\n    }<\/strong>\r\n});<\/pre>\n
    \u3061\u306a\u307f\u306bisSelected()<\/code>\u306f\u3001\u753b\u50cf\u304c\u9078\u629e\u3055\u308c\u3066\u3044\u308b\u304b\u304c\u5206\u304b\u308b\u30e1\u30bd\u30c3\u30c9\u3067\u3059\u304c\u3001\u5225\u306e\u5834\u6240\u3067\u3082\u4f7f\u3046\u306e\u3067\u5c02\u7528\u30e1\u30bd\u30c3\u30c9\u3068\u3057\u3066\u30b3\u30fc\u30c9\u3092\u5206\u3051\u307e\u3057\u305f\u3002<\/p>\n
    \u9078\u629e\u3055\u308c\u305f\u753b\u50cf\u3060\u3051\u8868\u793a\u3092\u5909\u66f4\u3059\u308b<\/h1>\n
    \u3067\u306f\u3001selectedIndexes<\/code>\u306e\u4e2d\u306b\u756a\u53f7\u304c\u5165\u3063\u3066\u3044\u308b\u753b\u50cf\u3060\u3051\u8868\u793a\u3092\u5909\u66f4\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n
    \u753b\u50cf\u306eCSS\u3092\u5207\u308a\u66ff\u3048\u308b<\/h2>\n
    \u307e\u305a\u5148\u307b\u3069\u3064\u304f\u3063\u305fCSS<\/code>\u3092\u9078\u629e\u72b6\u614b\u3067\u5207\u308a\u66ff\u3048\u307e\u3059\u3002\uff08\u5b9f\u969b\u306b\u306f.active<\/code>\u3092\u3064\u3051\u308b\uff0f\u3064\u3051\u306a\u3044\u3068\u3044\u3046\u52d5\u4f5c\u306b\u306a\u308a\u307e\u3059\uff09<\/p>\n
    HTML\u306b:class<\/code>\u3092\u3064\u3051\u3066Vue\u3067\u5207\u308a\u66ff\u3048\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n
    <div :class=\"imageCss(index)\"<\/strong> v-for=\"(imageUrl,index) in imageUrls\">\r\n    <img :src=\"imageUrl\" @click=\"onImageSelect(index)\">\r\n<\/div><\/pre>\n
    \u305d\u3057\u3066\u30e1\u30bd\u30c3\u30c9\u3067\u3059\u3002<\/p>\n
    methods: {\r\n\r\n    \/\/ \u7701\u7565\r\n\r\n    imageCss(imageIndex) {<\/strong>\r\n\r\n        let classes = ['selectable-box'];<\/strong>\r\n\r\n        if(this.isSelected(imageIndex)) {<\/strong>\r\n\r\n            classes.push('active'); \/\/ \u9078\u629e\u4e2d\u306a\u3089 \"active\" \u3092\u8ffd\u52a0<\/strong>\r\n\r\n        }<\/strong>\r\n\r\n        return classes;<\/strong>\r\n\r\n    },<\/strong>\r\n\r\n    \/\/ \u7701\u7565\r\n}<\/pre>\n
    \u30c1\u30a7\u30c3\u30af\u30a2\u30a4\u30b3\u30f3\u3092\u3064\u3051\u308b<\/h2>\n
    \u7d9a\u3044\u3066\u3001\u3088\u308a\u9078\u629e\u72b6\u614b\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u3059\u308b\u305f\u3081\u306b\u30c1\u30a7\u30c3\u30af\u30a2\u30a4\u30b3\u30f3\u3092\u3064\u3051\u307e\u3057\u3087\u3046\u3002<\/p>\n
    \u306a\u304a\u3001\u30a2\u30a4\u30b3\u30f3\u306b\u306f\u7d75\u6587\u5b57\u3092\u4f7f\u304a\u3046\u304b\u3068\u601d\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u30d6\u30e9\u30a6\u30b6\u9593\u306e\u9055\u3044\u304c\u5927\u304d\u304b\u3063\u305f\u306e\u3067\u3001\u4eca\u56de\u306fFont Awesome<\/code>\u3092\u4f7f\u3044\u307e\u3059\u3002<\/p>\n
    <html>\r\n<head>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.11.2\/css\/all.css\"><\/strong>\r\n    <style>\r\n\r\n        \/\/ \u7701\u7565\r\n\r\n        .selectable-box i {<\/strong>\r\n\r\n            position: absolute;<\/strong>\r\n            left: 10px;<\/strong>\r\n            top: 10px;<\/strong>\r\n            font-size: 25px;<\/strong>\r\n            color: #2B6FE7;<\/strong>\r\n            background-color: #fff;<\/strong>\r\n            border-radius: 50%;<\/strong>\r\n\r\n        }<\/strong>\r\n\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div id=\"app\">\r\n\r\n        <h1>\u9078\u629e\u6a5f\u80fd\u3092\u3064\u3051\u305f\u753b\u50cf\u30ae\u30e3\u30e9\u30ea\u30fc<\/h1>\r\n        <div :class=\"imageCss(index)\" v-for=\"(imageUrl,index) in imageUrls\">\r\n            <i class=\"fa fa-check-circle icon\" v-if=\"isSelected(index)\"><\/i><\/strong>\r\n            <img :src=\"imageUrl\" @click=\"onImageSelect(index)\">\r\n        <\/div><\/pre>\n
    \u3053\u3053\u3067\u306f\u3001isSelected()<\/code>\u3092\u4f7f\u3063\u3066\u753b\u50cf\u304c\u9078\u629e\u3055\u308c\u3066\u3044\u308c\u3070\u30a2\u30a4\u30b3\u30f3\u3092\u8868\u793a\u3057\u3001\u305d\u3046\u3067\u306a\u3051\u308c\u3070\u975e\u8868\u793a\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
    \u305d\u3057\u3066\u3001Font Awesome<\/code>\u306f\u305d\u306e\u307e\u307e\u3067\u306f\u900f\u904e\u3057\u3066\u3044\u308b\u306e\u3067\u80cc\u666f\u8272\u3092\u8ffd\u52a0\u3057\u3066\u3044\u308b\u306e\u3067\u3059\u304c\u3001\u3053\u308c\u3060\u3068\u80cc\u666f\u304c\u56db\u89d2\u306b\u306a\u3063\u3066\u3057\u307e\u3046\u306e\u3067border-radius<\/code>\u3092\u3064\u3051\u3066\u3044\u307e\u3059\u3002<\/p>\n
    \u3067\u306f\u3001\u4eca\u306e\u72b6\u614b\u3067\u3069\u306e\u3088\u3046\u306b\u306a\u308b\u304b\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n
    \"\"<\/p>\n
    \u601d\u3063\u305f\u4ee5\u4e0a\u306b\u30ad\u30ec\u30a4\u306b\u3067\u304d\u307e\u3057\u305f\ud83d\ude0a<\/p>\n
    \u753b\u50cf\u304c\u9078\u629e\u3055\u308c\u305f\u3089\u524a\u9664\u30dc\u30bf\u30f3\u306a\u3069\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u8868\u793a\u3059\u308b<\/h1>\n
    \u3067\u306f\u6700\u5f8c\u306b\u753b\u50cf\u304c\u9078\u629e\u3055\u308c\u305f\u3089\u30da\u30fc\u30b8\u306e\u4e00\u756a\u4e0b\u306b\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u8868\u793a\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n
      \n
    • \u524a\u9664\u30dc\u30bf\u30f3<\/li>\n
    • \u9078\u629e\u89e3\u9664\u30dc\u30bf\u30f3<\/li>\n
    • \u3044\u307e\u3069\u308c\u3060\u3051\u9078\u629e\u3057\u3066\u3044\u308b\u304b<\/li>\n<\/ul>\n
      \u307e\u305a\u306fHTML\u5074\u3067\u3059\u3002<\/p>\n
      \/\/ \u7701\u7565\r\n\r\n<body>\r\n    <div id=\"app\">\r\n\r\n        \/\/ \u7701\u7565\r\n\r\n        <div style=\"width:100%;position:fixed;bottom:0;left:0;background:#ddd;\" v-if=\"selectedIndexes.length\">\r\n            <div style=\"padding:15px;\">\r\n                <button @click=\"clear\"><i class=\"fa fa-times\"><\/i> \u9078\u629e\u89e3\u9664<\/button>\r\n                <span style=\"padding-left:30px;\" v-text=\"selectedIndexes.length\"><\/span> \u4ef6\r\n                <button style=\"margin-left:30px;\" @click=\"close\"><i class=\"fa fa-trash-alt\"><\/i> \u524a\u9664<\/button>\r\n            <\/div>\r\n        <\/div><\/pre>\n
      \u305d\u3057\u3066JavaScript\u5074\u3067\u3059\u3002<\/p>\n
      new Vue({\r\n\r\n    \/\/ \u7701\u7565\r\n\r\n    methods: {\r\n\r\n        \/\/ \u7701\u7565\r\n\r\n        clear() {<\/strong>\r\n\r\n            this.selectedIndexes = [];<\/strong>\r\n\r\n        },<\/strong>\r\n        close() {<\/strong>\r\n\r\n            \/\/ \u3053\u3053\u306bAjax\u306a\u3069\u3067\u524a\u9664<\/strong>\r\n\r\n            \/\/ \u30c6\u30b9\u30c8\u7528\u30b3\u30fc\u30c9<\/strong>\r\n            let newImageUrls = [];<\/strong>\r\n\r\n            for(let i = 0 ; i < this.imageUrls.length ; i++) {<\/strong>\r\n\r\n                if(!this.isSelected(i)) {<\/strong>\r\n\r\n                    newImageUrls.push(this.imageUrls[i]);<\/strong>\r\n\r\n                }<\/strong>\r\n\r\n            }<\/strong>\r\n\r\n            this.imageUrls = newImageUrls;<\/strong>\r\n            this.selectedIndexes = [];<\/strong>\r\n            alert('\u524a\u9664\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\u3002');<\/strong>\r\n\r\n        },<\/strong>\r\n\r\n        \/\/ \u7701\u7565<\/pre>\n
      \u3053\u308c\u3067\u753b\u50cf\u304c\u9078\u629e\u3055\u308c\u308b\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u753b\u9762\u4e00\u756a\u4e0b\u306b\u8868\u793a\u3055\u308c\u308b\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
      \"\"<\/p>\n
      \u30c6\u30b9\u30c8\u3057\u3066\u307f\u308b<\/h1>\n
      \u3067\u306f\u3001\u5b9f\u969b\u306b\u30c6\u30b9\u30c8\u3057\u3066\u307f\u305f\u52d5\u753b\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/p>\n