{"id":450,"date":"2025-03-21T02:45:50","date_gmt":"2025-03-20T17:45:50","guid":{"rendered":"https:\/\/tamani-manabu.com\/?p=450"},"modified":"2025-03-21T03:27:22","modified_gmt":"2025-03-20T18:27:22","slug":"gemini-canvas","status":"publish","type":"post","link":"https:\/\/tamani-manabu.com\/?p=450","title":{"rendered":"Gemini Canvas?"},"content":{"rendered":"\n<p><strong>Gemini Canvas<\/strong>?<\/p>\n\n\n\n<p>\u5b9f\u7528\u7684\u306a\u30d7\u30ed\u30b0\u30e9\u30e0\u958b\u767a\u3082\u8fd1\u3044\u4e88\u611f\u3002AI\u306e\u9032\u5316\u304c\u6b62\u307e\u3089\u306a\u3044\u3067\u3059\u306d\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Introducing Canvas in Gemini\" width=\"1140\" height=\"641\" src=\"https:\/\/www.youtube.com\/embed\/4Leardp_AGc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>Gemini Canvas\u306f\u3001Google\u306e\u6700\u65b0AI\u30e2\u30c7\u30eb\u300cGemini\u300d\u306b\u642d\u8f09\u3055\u308c\u305f\u3001AI\u3068\u306e\u5bfe\u8a71\u3092\u901a\u3057\u3066\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u4f5c\u6210\u3084\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u3092\u884c\u3048\u308b\u65b0\u6a5f\u80fd\u3067\u3059\u3002<\/p>\n\n\n\n<p><strong>\u4e3b\u306a\u7279\u5fb4:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u4f5c\u6210:<\/strong>\n<ul class=\"wp-block-list\">\n<li>AI\u3068\u5bfe\u8a71\u3057\u306a\u304c\u3089\u3001\u6587\u7ae0\u306e\u4f5c\u6210\u3001\u7de8\u96c6\u3001\u4fee\u6b63\u3092\u30b9\u30e0\u30fc\u30ba\u306b\u884c\u3048\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30a2\u30a4\u30c7\u30a2\u51fa\u3057\u3001\u69cb\u6210\u306e\u691c\u8a0e\u3001\u6587\u7ae0\u306e\u6821\u6b63\u306a\u3069\u3001\u69d8\u3005\u306a\u4f5c\u696d\u3092AI\u304c\u30b5\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u652f\u63f4:<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u30b3\u30fc\u30c9\u306e\u751f\u6210\u3001\u4fee\u6b63\u3001\u30c7\u30d0\u30c3\u30b0\u3092AI\u304c\u652f\u63f4\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30b3\u30fc\u30c9\u306e\u30d7\u30ec\u30d3\u30e5\u30fc\u3084\u30a8\u30e9\u30fc\u30c1\u30a7\u30c3\u30af\u3082\u53ef\u80fd\u3067\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u30d3\u30b8\u30e5\u30a2\u30eb\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u4f5c\u6210:<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u30bf\u30a4\u30e0\u30e9\u30a4\u30f3\u3001\u30de\u30a4\u30f3\u30c9\u30de\u30c3\u30d7\u3001\u30b9\u30e9\u30a4\u30c9\u306a\u3069\u3001\u8996\u899a\u7684\u306b\u8a34\u3048\u308b\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u7c21\u5358\u306b\u4f5c\u6210\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u3053\u306e\u6a5f\u80fd\u306f\u3001\u300cGemini Advanced\u300d\u30e6\u30fc\u30b6\u30fc\u306b\u8fd1\u65e5\u4e2d\u306b\u5c55\u958b\u3055\u308c\u308b\u4e88\u5b9a\u3067\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u753b\u9762\u5206\u5272\u306b\u3088\u308b\u52b9\u7387\u5316:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Gemini\u3068\u306e\u5bfe\u8a71\u753b\u9762\u3068\u4f5c\u696d\u753b\u9762\u3092\u5206\u5272\u3057\u3066\u8868\u793a\u3059\u308b\u3053\u3068\u3067\u3001\u4f5c\u696d\u52b9\u7387\u304c\u5411\u4e0a\u3057\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>Gemini Canvas\u306e\u6d3b\u7528\u4f8b:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4f01\u753b\u66f8\u3084\u5831\u544a\u66f8\u306e\u4f5c\u6210<\/li>\n\n\n\n<li>\u30d7\u30ec\u30bc\u30f3\u30c6\u30fc\u30b7\u30e7\u30f3\u8cc7\u6599\u306e\u4f5c\u6210<\/li>\n\n\n\n<li>\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u5b66\u7fd2\u3084\u958b\u767a<\/li>\n\n\n\n<li>\u30a2\u30a4\u30c7\u30a2\u306e\u6574\u7406\u3084\u30d6\u30ec\u30a4\u30f3\u30b9\u30c8\u30fc\u30df\u30f3\u30b0<\/li>\n\n\n\n<li>\u305d\u306e\u4ed6\u69d8\u3005\u306a\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u4f5c\u6210\u696d\u52d9<\/li>\n<\/ul>\n\n\n\n<p>Gemini Canvas\u306f\u3001AI\u3092\u6d3b\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u4f5c\u6210\u3084\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u306e\u52b9\u7387\u5316\u3001\u5275\u9020\u6027\u306e\u5411\u4e0a\u3092\u652f\u63f4\u3059\u308b\u5f37\u529b\u306a\u30c4\u30fc\u30eb\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u3088\u308a\u8a73\u7d30\u306a\u60c5\u5831\u306b\u3064\u3044\u3066\u306f\u3001\u4ee5\u4e0b\u306eGoogle\u30b5\u30dd\u30fc\u30c8\u30da\u30fc\u30b8\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Gemini \u30a2\u30d7\u30ea\u3067 Canvas \u3092\u4f7f\u3063\u3066\u6587\u66f8\u306e\u4f5c\u6210\u3084\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u3092\u884c\u3046 &#8211; \u30d1\u30bd\u30b3\u30f3: \n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/support.google.com\/gemini\/answer\/16047321?hl=ja&amp;co=GENIE.Platform%3DDesktop\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/support.google.com\/gemini\/answer\/16047321?hl=ja&amp;co=GENIE.Platform%3DDesktop<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Gemini \u30a2\u30d7\u30ea\u3067 Canvas \u3092\u4f7f\u3063\u3066\u6587\u66f8\u306e\u4f5c\u6210\u3084\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u3092\u884c\u3046 &#8211; Android:\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/support.google.com\/gemini\/answer\/16047321?hl=ja&amp;ref_topic=13194540\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/support.google.com\/gemini\/answer\/16047321?hl=ja&amp;ref_topic=13194540<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>canvas\u3067\u4f5c\u6210\u3057\u305f\u30d7\u30ed\u30b0\u30e9\u30e0\u4f8b\u3067\u3059\u3002\u300c\u30b0\u30e9\u30d5\u3092\u8868\u793a\u3059\u308b\u30d7\u30ed\u30b0\u30e9\u30e0\u4f8b\u3092\u4f5c\u6210\u3057\u3066\u300d\u3068\u6307\u793a\u3057\u305f\u306e\u307f\u3002<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>WordPress\u57cb\u3081\u8fbc\u307f\u7528\u30b0\u30e9\u30d5<\/title>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n    <style>\n      \/* WordPress\u306e\u30c6\u30fc\u30de\u306b\u5e72\u6e09\u3057\u306a\u3044\u3088\u3046\u306b\u3001\u6700\u5c0f\u9650\u306e\u30b9\u30bf\u30a4\u30eb\u306b\u7559\u3081\u307e\u3059 *\/\n      #myChart {\n        width: 100%;\n        max-height: 400px;\n        margin-bottom: 1rem;\n        border: 1px solid #ddd; \/* WordPress\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u533a\u5207\u308a\u7dda\u306b\u5408\u308f\u305b\u308b *\/\n        border-radius: 0.25rem; \/* \u89d2\u3092\u5c11\u3057\u4e38\u304f\u3059\u308b *\/\n        background-color: white;\n        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05); \/* \u63a7\u3048\u3081\u306a\u5f71 *\/\n      }\n      #chart-options {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        margin-bottom: 1rem;\n      }\n      .option-group {\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        margin: 0.5rem 0;\n        width: 100%;\n        max-width: 300px;\n      }\n      .option-group label {\n        margin-bottom: 0.25rem;\n        font-size: 0.9rem; \/* \u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u306f\u89aa\u30c6\u30fc\u30de\u306b\u5408\u308f\u305b\u308b *\/\n        color: #333;\n        text-align: left;\n        display: block;\n      }\n      .option-group select,\n      .option-group input {\n        padding: 0.5rem;\n        font-size: 1rem;\n        border: 1px solid #ddd; \/* WordPress\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u5165\u529b\u30d5\u30a3\u30fc\u30eb\u30c9\u306b\u5408\u308f\u305b\u308b *\/\n        border-radius: 0.25rem; \/* \u89d2\u3092\u5c11\u3057\u4e38\u304f\u3059\u308b *\/\n        width: 100%;\n        box-sizing: border-box;\n        transition: all 0.3s ease;\n      }\n      .option-group select:focus,\n      .option-group input:focus {\n        outline: none;\n        border-color: #0078d7; \/* WordPress\u306e\u30a2\u30af\u30bb\u30f3\u30c8\u30ab\u30e9\u30fc\u306b\u5408\u308f\u305b\u308b *\/\n        box-shadow: 0 0 0.125rem rgba(0, 120, 215, 0.3); \/* \u63a7\u3048\u3081\u306a\u5f71 *\/\n      }\n      #updateButton {\n        padding: 0.5rem 1rem;\n        font-size: 1rem;\n        cursor: pointer;\n        background-color: #0078d7; \/* WordPress\u306e\u30a2\u30af\u30bb\u30f3\u30c8\u30ab\u30e9\u30fc\u306b\u5408\u308f\u305b\u308b *\/\n        color: white;\n        border: none;\n        border-radius: 0.25rem; \/* \u89d2\u3092\u5c11\u3057\u4e38\u304f\u3059\u308b *\/\n        box-shadow: none; \/* \u5f71\u3092\u306a\u304f\u3059 *\/\n        transition: background-color 0.3s ease;\n        width: 100%;\n        max-width: 300px;\n        text-align: center;\n      }\n      #updateButton:hover {\n        background-color: #0056b3; \/* \u30db\u30d0\u30fc\u6642\u306e\u8272\u3092\u5c11\u3057\u6697\u304f\u3059\u308b *\/\n      }\n      #updateButton:active {\n        background-color: #004080; \/* \u30a2\u30af\u30c6\u30a3\u30d6\u6642\u306e\u8272\u3092\u3055\u3089\u306b\u6697\u304f\u3059\u308b *\/\n        box-shadow: none;\n        transform: translateY(0);\n      }\n      @media (min-width: 768px) {\n        #chart-options {\n          flex-direction: row;\n          justify-content: center;\n          flex-wrap: wrap;\n        }\n        .option-group {\n          margin: 0.5rem 1rem;\n          align-items: flex-start;\n        }\n        #updateButton {\n            width: auto;\n            max-width: none;\n        }\n      }\n    <\/style>\n<\/head>\n<body>\n  <div class=\"container\">\n    <h1>\u30b0\u30e9\u30d5\u8868\u793a\u30d7\u30ed\u30b0\u30e9\u30e0<\/h1>\n    <p>\u4e0b\u306e\u30b0\u30e9\u30d5\u3068\u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3067\u304d\u307e\u3059\u3002<\/p>\n    <canvas id=\"myChart\"><\/canvas>\n    <div id=\"chart-options\">\n      <div class=\"option-group\">\n        <label for=\"chartType\">\u30b0\u30e9\u30d5\u306e\u7a2e\u985e:<\/label>\n        <select id=\"chartType\">\n          <option value=\"bar\">\u68d2\u30b0\u30e9\u30d5<\/option>\n          <option value=\"line\">\u6298\u308c\u7dda\u30b0\u30e9\u30d5<\/option>\n          <option value=\"pie\">\u30d1\u30a4\u30c1\u30e3\u30fc\u30c8<\/option>\n          <option value=\"doughnut\">\u30c9\u30fc\u30ca\u30c4\u30c1\u30e3\u30fc\u30c8<\/option>\n        <\/select>\n      <\/div>\n      <div class=\"option-group\">\n        <label for=\"data1\">\u30c7\u30fc\u30bf1:<\/label>\n        <input type=\"number\" id=\"data1\" value=\"10\">\n      <\/div>\n      <div class=\"option-group\">\n        <label for=\"data2\">\u30c7\u30fc\u30bf2:<\/label>\n        <input type=\"number\" id=\"data2\" value=\"20\">\n      <\/div>\n      <div class=\"option-group\">\n        <label for=\"data3\">\u30c7\u30fc\u30bf3:<\/label>\n        <input type=\"number\" id=\"data3\" value=\"30\">\n      <\/div>\n      <div class=\"option-group\">\n        <label for=\"label1\">\u30e9\u30d9\u30eb1:<\/label>\n        <input type=\"text\" id=\"label1\" value=\"\u30c7\u30fc\u30bfA\">\n      <\/div>\n      <div class=\"option-group\">\n        <label for=\"label2\">\u30e9\u30d9\u30eb2:<\/label>\n        <input type=\"text\" id=\"label2\" value=\"\u30c7\u30fc\u30bfB\">\n      <\/div>\n      <div class=\"option-group\">\n        <label for=\"label3\">\u30e9\u30d9\u30eb3:<\/label>\n        <input type=\"text\" id=\"label3\" value=\"\u30c7\u30fc\u30bfC\">\n      <\/div>\n    <\/div>\n    <button id=\"updateButton\">\u30b0\u30e9\u30d5\u3092\u66f4\u65b0<\/button>\n  <\/div>\n  <script>\n    const chartCtx = document.getElementById('myChart').getContext('2d');\n    const chartTypeSelect = document.getElementById('chartType');\n    const data1Input = document.getElementById('data1');\n    const data2Input = document.getElementById('data2');\n    const data3Input = document.getElementById('data3');\n    const label1Input = document.getElementById('label1');\n    const label2Input = document.getElementById('label2');\n    const label3Input = document.getElementById('label3');\n    const updateButton = document.getElementById('updateButton');\n    let myChart;\n    function createChart(type, data, labels) {\n      if (myChart) {\n        myChart.destroy();\n      }\n      const chartData = {\n        labels: labels,\n        datasets: [{\n          label: '\u30c7\u30fc\u30bf',\n          data: data,\n          backgroundColor: [\n            'rgba(255, 99, 132, 0.6)',\n            'rgba(54, 162, 235, 0.6)',\n            'rgba(255, 206, 86, 0.6)',\n          ],\n          borderColor: [\n            'rgba(255, 99, 132, 1)',\n            'rgba(54, 162, 235, 1)',\n            'rgba(255, 206, 86, 1)',\n          ],\n          borderWidth: 1\n        }]\n      };\n      const chartOptions = {\n        responsive: true,\n        plugins: {\n          legend: {\n            position: 'top',\n          },\n          title: {\n            display: true,\n            text: '\u30b0\u30e9\u30d5',\n            font: {\n              size: 20,\n              family: 'Press Start 2P',\n            }\n          }\n        },\n        animation: {\n          duration: 1000,\n          easing: 'easeInOutQuad'\n        },\n        scales: {\n          x: {\n            ticks: {\n              font: {\n                family: 'Press Start 2P',\n                size: 10\n              }\n            }\n          },\n          y: {\n            ticks: {\n              font: {\n                family: 'Press Start 2P',\n                size: 10\n              }\n            }\n          }\n        }\n      };\n      myChart = new Chart(chartCtx, {\n        type: type,\n        data: chartData,\n        options: chartOptions\n      });\n    }\n    function updateChart() {\n      const type = chartTypeSelect.value;\n      const data = [\n        parseInt(data1Input.value),\n        parseInt(data2Input.value),\n        parseInt(data3Input.value)\n      ];\n      const labels = [\n        label1Input.value,\n        label2Input.value,\n        label3Input.value\n      ];\n      createChart(type, data, labels);\n    }\n    updateButton.addEventListener('click', updateChart);\n    createChart('bar', [10, 20, 30], ['\u30c7\u30fc\u30bfA', '\u30c7\u30fc\u30bfB', '\u30c7\u30fc\u30bfC']);\n  <\/script>\n<\/body>\n<\/html>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Gemini Canvas? \u5b9f\u7528\u7684\u306a\u30d7\u30ed\u30b0\u30e9\u30e0\u958b\u767a\u3082\u8fd1\u3044\u4e88\u611f\u3002AI\u306e&hellip;<\/p>\n","protected":false},"author":1,"featured_media":451,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,11],"tags":[],"class_list":["post-450","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ai","category-it"],"_links":{"self":[{"href":"https:\/\/tamani-manabu.com\/index.php?rest_route=\/wp\/v2\/posts\/450","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tamani-manabu.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tamani-manabu.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tamani-manabu.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tamani-manabu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=450"}],"version-history":[{"count":20,"href":"https:\/\/tamani-manabu.com\/index.php?rest_route=\/wp\/v2\/posts\/450\/revisions"}],"predecessor-version":[{"id":479,"href":"https:\/\/tamani-manabu.com\/index.php?rest_route=\/wp\/v2\/posts\/450\/revisions\/479"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tamani-manabu.com\/index.php?rest_route=\/wp\/v2\/media\/451"}],"wp:attachment":[{"href":"https:\/\/tamani-manabu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=450"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tamani-manabu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=450"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tamani-manabu.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}