ブログサイトの立ち上げ方 – ちょいプラ素材 https://vitorec.co.jp/choi-plus-sozai 趣味や日々のコトを通して，見つけたモノや出会ったヒト，出かけたトコロを紹介するブログです． Mon, 20 Apr 2026 22:54:21 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 https://vitorec.co.jp/choi-plus-sozai/wp-content/uploads/2024/08/choi-plus-sozai-favicon-150x150.jpg ブログサイトの立ち上げ方 – ちょいプラ素材 https://vitorec.co.jp/choi-plus-sozai 32 32 世界トップクラスのコーディング性能の「Claude Sonnet 4.5」を試してみる https://vitorec.co.jp/choi-plus-sozai/%e4%b8%96%e7%95%8c%e3%83%88%e3%83%83%e3%83%97%e3%82%af%e3%83%a9%e3%82%b9%e3%81%ae%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0%e6%80%a7%e8%83%bd%e3%81%ae%e3%80%8cclaude-sonnet-4-5%e3%80%8d/ https://vitorec.co.jp/choi-plus-sozai/%e4%b8%96%e7%95%8c%e3%83%88%e3%83%83%e3%83%97%e3%82%af%e3%83%a9%e3%82%b9%e3%81%ae%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0%e6%80%a7%e8%83%bd%e3%81%ae%e3%80%8cclaude-sonnet-4-5%e3%80%8d/#respond Sun, 07 Dec 2025 13:37:03 +0000 https://vitorec.co.jp/choi-plus-sozai/?p=14817
  1. 世界トップクラスのコーディング性能の「Claude Opus 4.5」
  2. 「Claude Sonnet 4.5」を使ってみる
    1. 標準偏差の信頼度とサンプル数の関係
    2. 日本の人口ピラミッド
  3. まとめ

世界トップクラスのコーディング性能の「Claude Opus 4.5」

2025年11月24日（アメリカ時間）にリリースされたAnthropicの「Claude Opus 4.5」は、世界トップクラスのコーディング性能を誇っているようです。
実際のGitHubの問題を解決する「SWE-bench」で史上初の80%超え（80.9%）を達成し、GPT-5.1やGemini 3 Proを凌駕しました。
「SWE-bench」が80%超えの82.0%になるのは、parallel test-time compute使用時のようで、基本スコアは77.2%です。

以下の記事では、Googleの「Gemini 3」で画像を生成してみました。

最新の高性能AIモデル「Gemini 3」を試してみる
最新の高性能AIモデルがリリースされたというニュースを目にしたので試しに「Gemini 3」を使ってみました。この記事のアイキャッチ画像も「Gemini 3」が生成した画像です。
vitorec.co.jp
2026.04.21

これに続いて「Claude Sonnet 4.5」の能力を試してみます。

「Claude Sonnet 4.5」を使ってみる

「Claude Opus 4.5」は無料で使えないので、ブラウザから無料で使える「Claude Sonnet 4.5」を使ってみました。

claude.aiのトップページにアクセスしてアカウントを作れば、すぐに使えるようになります。

Just a moment...
claude.ai

標準偏差の信頼度とサンプル数の関係

長年仕事をしてきた中で、ずっと知りたかったことがあります。

いろいろな測定をするとき、N個のサンプルデータから、標準偏差σを計算して、母集団のバラつき具合を評価することがあります。

「それなりに信頼できる標準偏差σを計算するには、サンプル数は、いくつ以上必要なんだろう？」

私は今まで、先輩に言われた、

「最低でも20個、できれば30個以上は必要。」

という教えを信じて、20個～30個の測定データを使ってきました。

この機会に「標準偏差の信頼度とサンプル数の関係」を「Claude Sonnet 4.5」に聞いてみました。

データサンプル数N個のデータでσを計算します。
N数が増えるほどσの信頼度が上がると考えていますが、間違いないですか？

「Claude Sonnet 4.5」の回答は当然

はい、その理解は正しいです。サンプル数Nが増えるほど、標準偏差σ（母標準偏差の推定値）の信頼度は上がります。

でした。
さらに、長年知りたかった標準偏差σの誤差の式も教えてくれました。

標準偏差の推定値自体にもばらつき（標準誤差）があります。
母標準偏差をσ、サンプルサイズをNとすると、標準偏差の推定値の標準誤差は近似的に:
σ / √(2N)
となります。

上記の標準偏差の誤差を縦軸、N数を横軸にしたグラフを作ってください。

と追加でお願いすると、あっという間にグラフ描画のプログラムコードを生成し、グラフを表示してくれました。

このグラフを描くのに使ったプログラムコードを見せてください。

とお願いしてプログラムコードを見ると、reactベースのプログラムコードでした。
私は、reactのスキルがないので、

単純なHTML/JavaScriptでグラフを描きたいので、Chart.jsを使ったバージョンを作成してください。
Vue3も使ったコードにして欲しい。

とお願いしました。
すると、数十秒後に、

Chart.jsとVue3を使ったバージョンを作成しました！

と伝えてきて、以下のプログラムコードを提示してくれました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>標準偏差の標準誤差とサンプル数の関係 (Vue3版)</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.4/vue.global.prod.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f3f4f6;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
        }
        .container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 30px;
            max-width: 900px;
            width: 100%;
        }
        h1 {
            text-align: center;
            color: #1f2937;
            margin-bottom: 10px;
            font-size: 24px;
        }
        .subtitle {
            text-align: center;
            color: #6b7280;
            margin-bottom: 30px;
            font-size: 14px;
        }
        .info-box {
            margin-top: 20px;
            padding: 15px;
            background-color: #f9fafb;
            border-radius: 6px;
            font-size: 14px;
            color: #4b5563;
        }
        .info-box p {
            margin: 0 0 10px 0;
            font-weight: bold;
        }
        .info-box ul {
            margin: 0;
            padding-left: 20px;
        }
        .info-box li {
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <h1>{{ title }}</h1>
            <p class="subtitle">{{ subtitle }}</p>
            
            <canvas ref="chartCanvas"></canvas>
            
            <div class="info-box">
                <p>グラフから読み取れること:</p>
                <ul>
                    <li v-for="(info, index) in infoList" :key="index">{{ info }}</li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        const { createApp, ref, onMounted } = Vue;

        createApp({
            setup() {
                const title = ref('標準偏差の標準誤差とサンプル数の関係');
                const subtitle = ref('標準誤差 = σ / √(2N)　（σ = 1 の場合）');
                const chartCanvas = ref(null);
                const infoList = ref([
                    'N数が少ない時は標準誤差が大きく、推定精度が低い',
                    'N数が増えるにつれて標準誤差は急速に減少する',
                    'N数が大きくなると、誤差の減少は緩やかになる（√の効果）'
                ]);

                const generateData = () => {
                    const labels = [];
                    const data = [];
                    
                    for (let n = 1; n <= 1000; n += 5) {
                        // σ = 1 と仮定した場合の標準誤差
                        const standardError = 1 / Math.sqrt(2 * n);
                        labels.push(n);
                        data.push(standardError);
                    }
                    
                    return { labels, data };
                };

                const createChart = () => {
                    const { labels, data } = generateData();
                    const ctx = chartCanvas.value.getContext('2d');
                    
                    new Chart(ctx, {
                        type: 'line',
                        data: {
                            labels: labels,
                            datasets: [{
                                label: '標準誤差',
                                data: data,
                                borderColor: '#3b82f6',
                                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                                borderWidth: 2,
                                pointRadius: 0,
                                tension: 0.1
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: true,
                            aspectRatio: 2,
                            plugins: {
                                legend: {
                                    display: true,
                                    position: 'top'
                                },
                                tooltip: {
                                    callbacks: {
                                        title: function(context) {
                                            return 'N = ' + context[0].label;
                                        },
                                        label: function(context) {
                                            return '標準誤差: ' + context.parsed.y.toFixed(4);
                                        }
                                    }
                                }
                            },
                            scales: {
                                x: {
                                    title: {
                                        display: true,
                                        text: 'サンプル数 (N)',
                                        font: {
                                            size: 14
                                        }
                                    },
                                    ticks: {
                                        maxTicksLimit: 10
                                    }
                                },
                                y: {
                                    title: {
                                        display: true,
                                        text: '標準誤差',
                                        font: {
                                            size: 14
                                        }
                                    },
                                    beginAtZero: true
                                }
                            }
                        }
                    });
                };

                onMounted(() => {
                    createChart();
                });

                return {
                    title,
                    subtitle,
                    chartCanvas,
                    infoList
                };
            }
        }).mount('#app');
    </script>
</body>
</html>

このコードの利点として、以下の説明がありました。

  • 純粋なHTML/JavaScriptで動作（Reactは不要）
  • ブラウザで直接開くだけで動作
  • Chart.jsはCDNから読み込むので、インストール不要

ということで、この投稿にWordPressのブロックエディタで「カスタムHTML」ブロックを配置し、上記のHTMLのコードを貼り付けてみます。

どうでしょう？
以下にグラフが表示されていますよね。

標準偏差の標準誤差とサンプル数の関係 (Vue3版)

{{ title }}

{{ subtitle }}

グラフから読み取れること:

  • {{ info }}

グラフから読み取れることの内容も「Claude Sonnet 4.5」が自動で付けてくれています。
さすがのコーディング性能ですね。

ただし、元々のWordPressのスタイルが崩れるので、bodyと.containerのCSSの一部は、以下のようにコメントアウトしています（グレー部分）。

        body {
            font-family: 'Arial', sans-serif;
            background-color: #f3f4f6;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            /*padding: 20px;*/
        }
        .container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            /*padding: 30px;*/
            /*max-width: 900px;*/
            width: 100%;
        }

日本の人口ピラミッド

次に、以下のプロンプトで日本の人口ピラミッドのグラフを作ってみます。

日本の人口ピラミッドのグラフをJavaScriptで作って欲しい。

  • グラフライブラリーはChart.jsを使う。
  • 5歳刻みで年齢階級を表示する。
  • 0-4歳が一番下に配置され、上に向かって高齢にする。
  • 左側に男性（青色）、右側に女性（ピンク色）を表示する。
  • 男性と女性のバーを同じ高さで揃える。

WordPressの同じ投稿ページにVue3のインスタンスが2つあると厄介なので、こちらのグラフではVue3を使っていません。

「Claude Sonnet 4.5」は、日本の人口情報を検索/取得した後、以下のプログラムコードを生成してくれました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日本の人口ピラミッド 2024</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    <style>
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .container {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            padding: 30px;
            max-width: 1200px;
            width: 100%;
        }
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 10px;
            font-size: 28px;
        }
        .subtitle {
            text-align: center;
            color: #666;
            margin-bottom: 30px;
            font-size: 14px;
        }
        #chartContainer {
            position: relative;
            height: 700px;
            margin: 0 auto;
        }
        .source {
            text-align: center;
            color: #999;
            font-size: 12px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>日本の人口ピラミッド</h1>
        <div class="subtitle">2024年10月1日現在（総人口：約1億2,380万人）</div>
        <div id="chartContainer">
            <canvas id="pyramidChart"></canvas>
        </div>
        <div class="source">出典：総務省統計局「人口推計」2024年10月1日現在データに基づく</div>
    </div>

    <script>
        // 2024年の日本の人口データ（5歳刻み、単位：万人）
        // 総人口推計に基づく近似値
        // 0歳を下にするため、配列は逆順（高齢→若年）で定義
        const ageGroups = [
            '90歳以上',
            '85-89歳',
            '80-84歳',
            '75-79歳',
            '70-74歳',
            '65-69歳',
            '60-64歳',
            '55-59歳',
            '50-54歳',
            '45-49歳',
            '40-44歳',
            '35-39歳',
            '30-34歳',
            '25-29歳',
            '20-24歳',
            '15-19歳',
            '10-14歳',
            '5-9歳',
            '0-4歳'
        ];

        // 男性人口（左側、負の値で表示）
        const malePopulation = [
            -85,   // 90+
            -161,  // 85-89
            -279,  // 80-84
            -376,  // 75-79
            -442,  // 70-74
            -489,  // 65-69
            -470,  // 60-64
            -388,  // 55-59
            -413,  // 50-54
            -464,  // 45-49
            -426,  // 40-44
            -375,  // 35-39
            -332,  // 30-34
            -315,  // 25-29
            -299,  // 20-24
            -280,  // 15-19
            -257,  // 10-14
            -239,  // 5-9
            -222   // 0-4
        ];

        // 女性人口（右側、正の値で表示）
        const femalePopulation = [
            187,   // 90+
            249,   // 85-89
            345,   // 80-84
            418,   // 75-79
            463,   // 70-74
            495,   // 65-69
            469,   // 60-64
            384,   // 55-59
            408,   // 50-54
            459,   // 45-49
            422,   // 40-44
            369,   // 35-39
            322,   // 30-34
            303,   // 25-29
            285,   // 20-24
            266,   // 15-19
            244,   // 10-14
            227,   // 5-9
            211    // 0-4
        ];

        const ctx = document.getElementById('pyramidChart').getContext('2d');
        
        const pyramidChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ageGroups,
                datasets: [
                    {
                        label: '男性',
                        data: malePopulation,
                        backgroundColor: 'rgba(54, 162, 235, 0.7)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    },
                    {
                        label: '女性',
                        data: femalePopulation,
                        backgroundColor: 'rgba(255, 99, 132, 0.7)',
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderWidth: 1
                    }
                ]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    title: {
                        display: false
                    },
                    legend: {
                        display: true,
                        position: 'top',
                        labels: {
                            font: {
                                size: 14
                            }
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                let label = context.dataset.label || '';
                                if (label) {
                                    label += ': ';
                                }
                                const value = Math.abs(context.parsed.x);
                                label += value.toFixed(0) + '万人';
                                return label;
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        stacked: false,
                        ticks: {
                            callback: function(value) {
                                return Math.abs(value) + '万人';
                            },
                            font: {
                                size: 12
                            }
                        },
                        grid: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                    },
                    y: {
                        stacked: true,
                        position: 'left',
                        ticks: {
                            font: {
                                size: 12
                            }
                        },
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>

このプログラムコードをWordPressの「カスタムHTML」ブロックに貼り付けてグラフを表示します。

日本の人口ピラミッド 2024

日本の人口ピラミッド

2024年10月1日現在（総人口：約1億2,380万人）
出典：総務省統計局「人口推計」2024年10月1日現在データに基づく

プログラムコードを書くスキルや手間が不要になるだけでなく、必要なデータも探してきてくれるので、自分より賢い「アシスタント」か「お手伝いさん」に仕事を頼む感じです。

まとめ

世界トップクラスのコーディング性能を誇っている「Claude Sonnet 4.5」を試してみました。
当たり前ですが、私のスキルを圧倒的に超えるコーディング性能でした。

以下の記事で紹介した「ガントチャート」のプログラムコードをデバッグしてもらったところ、いくつかの不具合を指摘して、修正後のプログラムコードを提示してくれました。
早速、以下の記事のプログラムコードも修正後のコードに差し替えました。

WordPressの投稿にガントチャートを実装する
「frappe-gantt」を独自に機能拡張したJavaScriptライブラリを作成し、WordPressの投稿にガントチャートを実装しました。
vitorec.co.jp
2023.11.12

前回の「Gemini 3」も、今回紹介した「Claude Sonnet 4.5」も、実際に試して感じたことは、

　AIを毛嫌いしている状況ではなくなっている。

　AIを賢く使いこなす人や組織が、ますます賢くて強くなる。

です。

皆さんも実際に試してみてください。

]]> https://vitorec.co.jp/choi-plus-sozai/%e4%b8%96%e7%95%8c%e3%83%88%e3%83%83%e3%83%97%e3%82%af%e3%83%a9%e3%82%b9%e3%81%ae%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0%e6%80%a7%e8%83%bd%e3%81%ae%e3%80%8cclaude-sonnet-4-5%e3%80%8d/feed/ 0 最新の高性能AIモデル「Gemini 3」を試してみる https://vitorec.co.jp/choi-plus-sozai/%e6%9c%80%e6%96%b0%e3%81%ae%e9%ab%98%e6%80%a7%e8%83%bdai%e3%83%a2%e3%83%87%e3%83%ab%e3%80%8cgemini-3%e3%80%8d%e3%82%92%e8%a9%a6%e3%81%97%e3%81%a6%e3%81%bf%e3%82%8b/ https://vitorec.co.jp/choi-plus-sozai/%e6%9c%80%e6%96%b0%e3%81%ae%e9%ab%98%e6%80%a7%e8%83%bdai%e3%83%a2%e3%83%87%e3%83%ab%e3%80%8cgemini-3%e3%80%8d%e3%82%92%e8%a9%a6%e3%81%97%e3%81%a6%e3%81%bf%e3%82%8b/#respond Sun, 07 Dec 2025 11:43:13 +0000 https://vitorec.co.jp/choi-plus-sozai/?p=14807
  1. 最新の高性能AIモデルが続々とリリース
  2. 「Gemini 3」を使ってみる
    1. アイキャッチ画像の生成
    2. リアルな画像も生成できる
    3. 世界地図
  3. Google Antigravity
    1. 3Dオセロゲーム
    2. 3Dモデルデータ
    3. バイブコーディング（Vibe Coding）
  4. まとめ

最新の高性能AIモデルが続々とリリース

2025年11月は、最新の高性能AIモデルが続々とリリースされました。

まずは、Googleの「Gemini 3」が、2025年11月18日（アメリカ時間）にリリースされました。
これを受けて、OpenAIのサム・アルトマンCEOが社内向けに「コード・レッド（緊急事態）」を宣言したとのニュースも流れています。

間髪を入れず、2025年11月24日（アメリカ時間）に、Anthropicが「Claude Opus 4.5」をリリースしました。

どちらも、

  • 複雑な推論能力
  • 高度なコーディング能力
  • エージェント機能（自律的にタスクを実行する）
  • 低ハルシネーション（正確性の向上）
  • マルチモーダル（テキスト/画像/音声/動画などの色々な情報をシームレスに扱える）

を売りにしています。

私は、今まで、AIを積極的に使ってきませんでしたが、最新の高性能AIモデルを試してみることにします。

「Gemini 3」を使ってみる

「Gemini 3 Pro」を試したいところですが、ブラウザから無料で使える「Gemini 3」を使ってみました。

アイキャッチ画像の生成

「Gemini 3」は、マルチモーダルの機能が向上したということで、アイキャッチ画像を生成してみることにします。

以下のプロンプトで画像を生成してもらいました。

「Gemini 3」と「Claude Opus 4.5」と「GPT-5」が競合しているアイキャッチ画像を作って。

アイソメトリックのイラストにして。

背景の色は、白を基調にして。
カラフルな、ポスターカラーの色使いにして。

10秒ちょっとで以下の画像を生成してくれました。

この画像をこの記事のアイキャッチ画像として使っています。

「THE AI RACE」というタイトルもキャッチーだし、「Gemini 3」が先頭を走っているところも手前味噌でしたたかですね。

リアルな画像も生成できる

もっとリアルな画像も生成できます。

夕日に染まる富士山を背景に、キャンピングカー「TOY'S BOX 470H」で、海辺でキャンプをしている画像を作って。

とお願いしましたが、私の「TOY'S BOX 470H」と違うバンコンのキャンピングカーだったので、次のように画像をアップして、

「TOY'S BOX 470H」の画像はこれです。
キャンピングカーの画像を差し替えて。

と修正をお願いしました。

すると、以下のような完璧な画像を作ってくれました。

夕暮れ時なので、焚き火だけでなく、「TOY'S BOX 470H」のルームライトが灯っているところなんか、最高じゃないですか？
ちょっと驚きです。

世界地図

次に、世界地図を描くプログラムコードを作ってもらいます。
数回のプロンプトで自分の要望を伝えていきます。

こちらの要望に対し、プログラムコードをどのように変更するかも提示してくれるので安心です。
不具合に対する修正能力も高いです。

ミラー図法の世界地図（白地図）をJavaScriptで描くプログラムを作って。
地図データはNatural Earthから取得して。

Miller Cylindrical Projection（ミラー図法）を用いて、Natural Earthのデータから世界地図を描画するJavaScriptプログラムを作成します。

このプログラムでは、軽量で扱いやすい D3.js ライブラリを使用します。D3.jsは地図投影法の計算に非常に優れており、Natural Earthのデータを変換して描画するのに最適です。

地図の中央を日本の経度に合わせて。

海岸線の解像度を上げるには、Natural Earthのデータセットを 110m（低解像度）から 50m（中解像度）または 10m（高解像度）に変更します。

ウェブブラウザでの動作速度と見た目のバランスが良い 50m 解像度を使用したコードを提示します。また、解像度が上がるとデータ量が増えるため、読み込み完了までキャンバスをクリアにする処理を含めています。

国境線を入れて欲しい。

国境線を追加するには、Natural Earthの「Admin 0 Countries（国の境界線）」データセットを使用します。

以前使用した land（陸地） データは地形のみですが、admin_0_countries データを使用することで、各国の境界線を個別に描画できるようになります。

Vue3を使ったコードに変更して。

Vue 3 (Composition API) を使って、これまでの Miller図法の世界地図をコンポーネント化します。

Vue 3 で地図を描画する場合、onMounted フックを使用して、DOM（Canvas）が確実に生成された後に D3.js の描画ロジックを走らせるのが一般的です。

特定の国がホバーされたときにツールチップを出すような機能を追加して。

Canvasでのホバー検知（Tooltip）は、SVGとは異なり、マウスの座標からどのポリゴン（国）の上にいるかをD3の投影法を使って逆算する必要があります。

以下のコードでは、mousemove イベントを監視し、d3.geoContains を使って現在マウスの下にある国を特定し、その名前を表示する機能を追加しました。

ツールチップの国名は日本語にして。

国名を日本語にするには、Natural EarthのGeoJSONデータに含まれる日本語プロパティ NAME_JA を参照するようにコードを修正します。

CSSやレスポンシブ対応で地図のサイズを変更したときに、マウスのホバー位置を補正するようにして欲しい。

地図のサイズを変更（CSSでリサイズしたり、レスポンシブ対応したり）すると、ブラウザ上の表示サイズとCanvasの内部解像度にズレが生じます。マウスの座標をそのまま invert に渡すと位置がズレるため、**「Canvasの内部サイズと実際の表示サイズの比率」**を使って座標を補正する必要があります。

以下のコードでは、マウス座標を計算する際に scaleX と scaleY を導入し、表示サイズに関わらず正しく国を特定できるように修正しました。

国名の文字数の表示に必要なツールチップの幅が確保されてないので、文字が重なってしまいます。

原因が完全に特定できました。ツールチップの幅が固定されているか、改行の制御がなされていないために、HTML要素内で文字が溢れて（Wrapして）重なってしまっている状態です。

CSSに white-space: nowrap;（自動改行の禁止）を追加し、さらに width: auto;（コンテンツに合わせる）を明示することで、国名がどれだけ長くても（例：「グレートブリテン及び北アイルランド連合王国」など）一行でクッキリと表示されるように修正します。

地図の陸地部分は、カラーコード#f5f5dcで塗りつぶして。
地図の海は、カラーコード#e0f7fa で塗りつぶして。
マウスでホバーした国は、カラーコード#ffa500で塗りつぶして。

以下の要件に従い、コードを修正します。

  1. 陸地色: #f5f5dc (ベージュ / Beigewood)
  2. 海色: #e0f7fa (非常に薄い青 / Pale cyan)
  3. ホバー色: #ffa500 (オレンジ / Orange)

ホバーした国を塗りつぶすには、handleMouseMove 関数内でホバーされた国を特定した後、その国をCanvasに再描画するロジックを drawMap 関数に追加する必要があります。合王国」など）一行でクッキリと表示されるように修正します。

地図の緯度線/経度線は消して。

地図の描画ロジックから緯度線/経度線（Graticule）の描画処理を削除します。

このVue3のコンポーネントをブラウザで直接実行できるにhtmlファイルにして欲しい。

Vue 3のコンポーネント構造を維持しつつ、ビルド環境（npm等）なしでブラウザで直接実行できるように、CDNを利用した単一のHTMLファイルに書き換えます。

Vue 3はグローバル変数版を使用し、setup関数内で地図の描画ロジックを実装します。

「Gemini 3」が最終的に提示したプログラムコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Miller Projection - No Graticules</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://d3js.org/d3-geo-projection.v4.min.js"></script>
    <style>
        body { margin: 0; background-color: #f1f5f9; font-family: 'Hiragino Sans', Meiryo, sans-serif; }
        #app { display: flex; flex-direction: column; align-items: center; padding: 20px; }
        .map-container { position: relative; background: #ffffff; box-shadow: 0 10px 25px rgba(0,0,0,0.1); border-radius: 8px; cursor: crosshair; }
        canvas { display: block; width: 100%; height: auto; max-width: 1000px; }
        
        /* ツールチップのスタイル */
        .tooltip {
            position: absolute; pointer-events: none; background: #1e293b; color: white; padding: 8px 16px; 
            border-radius: 6px; font-size: 15px; font-weight: bold; box-shadow: 0 4px 12px rgba(0,0,0,0.3); 
            z-index: 1000; white-space: nowrap; width: auto; min-width: fit-content;
            transform: translate(15px, 15px);
        }
    </style>
</head>
<body>

<div id="app">
    <strong>世界白地図 (ミラー図法 / 国名表示対応)</strong>
    <div class="map-container" @mousemove="handleMouseMove" @mouseleave="handleMouseLeave">
        <canvas ref="mapCanvas" :width="internalWidth" :height="internalHeight"></canvas>
        <div v-if="hoveredCountry" class="tooltip" :style="tooltipStyle">
            {{ hoveredCountry }}
        </div>
        <div v-if="loading" style="position:absolute; inset:0; display:flex; justify-content:center; align-items:center; background:rgba(255,255,255,0.7);">読み込み中...</div>
    </div>
</div>

<script>
    const { createApp, ref, onMounted, computed } = Vue;

    createApp({
        setup() {
            const mapCanvas = ref(null);
            const internalWidth = 1600;
            const internalHeight = 1000;
            const loading = ref(true);
            const hoveredCountry = ref(null);
            const mousePos = ref({ x: 0, y: 0 });
            
            let geoData = null;
            let projection = null;
            let path = null;
            let context = null;

            // カラーコード定義
            const SEA_COLOR = "#e0f7fa";
            const LAND_COLOR = "#f5f5dc";
            const HOVER_COLOR = "#ffa500";
            const BORDER_COLOR = "#8b4513";

            onMounted(async () => {
                context = mapCanvas.value.getContext('2d');
                
                projection = d3.geoMiller().scale(260).translate([internalWidth / 2, internalHeight / 2]).rotate([-135, 0]);
                path = d3.geoPath(projection, context);

                // データURL（110m解像度）
                const geoDataUrl = "https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/ne_110m_admin_0_countries.geojson";

                try {
                    geoData = await d3.json(geoDataUrl);
                    loading.value = false;
                    drawMap(null);
                } catch (error) { console.error(error); }
            });

            const drawMap = (hoverFeature) => {
                // 1. 海の塗りつぶし
                context.fillStyle = SEA_COLOR;
                context.fillRect(0, 0, internalWidth, internalHeight);

                // 2. 経緯度線の描画ロジックを削除しました (以前のコード: const graticule = d3.geoGraticule(); ...)

                // 3. 全ての国を通常色で塗りつぶし＆境界線を描画
                context.beginPath(); 
                path(geoData);
                context.fillStyle = LAND_COLOR;
                context.fill();
                context.strokeStyle = BORDER_COLOR;
                context.lineWidth = 1.0;
                context.stroke();
                
                // 4. ホバー中の国を強調描画 (上書き)
                if (hoverFeature) {
                    context.beginPath();
                    path(hoverFeature);
                    context.fillStyle = HOVER_COLOR;
                    context.fill();
                    
                    // 境界線を再度描画
                    context.strokeStyle = BORDER_COLOR;
                    context.lineWidth = 1.2; 
                    context.stroke();
                }
            };

            const handleMouseMove = (event) => {
                if (!geoData || !projection) return;
                const rect = mapCanvas.value.getBoundingClientRect();
                const scaleX = internalWidth / rect.width;
                const scaleY = internalHeight / rect.height;
                const canvasX = (event.clientX - rect.left) * scaleX;
                const canvasY = (event.clientY - rect.top) * scaleY;

                mousePos.value = { x: event.clientX - rect.left, y: event.clientY - rect.top };
                
                const coords = projection.invert([canvasX, canvasY]);
                while (coords[0] > 180) coords[0] -= 360;
                while (coords[0] < -180) coords[0] += 360;

                const feature = geoData.features.find(f => d3.geoContains(f, coords));
                const currentCountryName = feature ? (feature.properties.NAME_JA || feature.properties.NAME) : null;
                
                if (hoveredCountry.value !== currentCountryName) {
                    hoveredCountry.value = currentCountryName;
                    drawMap(feature); 
                }
            };

            const handleMouseLeave = () => { 
                if (hoveredCountry.value !== null) {
                    hoveredCountry.value = null;
                    drawMap(null);
                }
            };

            const tooltipStyle = computed(() => ({
                left: `${mousePos.value.x}px`,
                top: `${mousePos.value.y}px`
            }));

            return { mapCanvas, internalWidth, internalHeight, loading, hoveredCountry, handleMouseMove, handleMouseLeave, tooltipStyle };
        }
    }).mount('#app');
</script>

</body>
</html>

この投稿にWordPressのブロックエディタで「カスタムHTML」ブロックを配置し、上記のHTMLのコードを貼り付けてみます。

世界地図が表示され、地図の上をマウスでホバーすると国名が表示されるはずです。

Miller Projection - No Graticules
世界白地図 (ミラー図法 / 国名表示対応)
{{ hoveredCountry }}
読み込み中...

Google Antigravity

上記の「世界地図」ように、WEBブラウザから「Gemini 3」にアクセスして、プログラムコードを生成してもらうこともできますが、生成したプログラムコードを実行環境に毎回コピーしてデバッグするのは面倒です。

ネットで調べていたら、「Google Antigravity」のことを知りました。
「Google Antigravity」は、単なるエディタではなく、AIが自立して考え、手も動かしてくれる、AIエージェントです。

私にとっては、以下のメリットを感じたので、直ぐに自分のPCにインストールして使ってみました。

  • 慣れ親しんだVSCodeからforkしているので、アプリケーションの見た目に抵抗感がない。
    自分では一切コードを書かないバイブコーディング（Vibe Coding）なので、本当に見た目だけ。
  • 事前にプロジェクトの進め方やコーディングの方針を提示してくれる。
    途中で方針の追加・変更もできるし、変更内容をちゃんとドキュメントに残してくれる。
  • Chromeブラウザと連携して動作確認できる。
    生成したプログラムコードをいちいちコピペする必要がない。
    AIエージェントは、自ら考プログラムコードを生成するだけでなく、ブラウザからDOMを取得して最低限のデバッグしているみたい。ここが「手を動かす」という意味。

3Dオセロゲーム

「Google Antigravity」を使って「3Dオセロゲーム」を作ってみました。
以下のプロンプトからスタートしました。

Vue3とJavaScriptでオセロゲームのプログラムを作りたい。
オセロゲームのゲームボードと駒は3Dモデルを使う。
3DライブラリーはThree.jsを使う。
3Dモデルデータはこちらから指定する。

最初のメニュー画面で、対戦相手を

  • 2人のユーザー（対人戦）
  • ユーザーとコンピュータ（対コンピューター戦）
  • コンピューターとコンピューター（観戦）

を選べるようにする。

対コンピューター戦では、コンピュータの強さを3段階で選べるようにする。
ゲーム開始時に、どちらが白か黒か決める（それに合わせて先攻/後攻も決める）。
ゲームが終了したら、ゲームボードの駒がフライングした後、白/黒の駒ごとに積み上げるアニメーションで、どちらが勝ったかビジュアルに表示する。
積み上げのアニメーションは、後でHTMLで指定する。

3Dモデルデータ

ゲームボードと駒の3Dモデルデータも以下の画像を「Gemini 3」に渡して生成してもらいました。

以下の画像は、「Gimine 3」が自分で生成した画像です。
「Gimine 3」に渡したオリジナルの画像とは、見る角度、駒や駒が入った透明ケースの位置や配置が異なっています。
つまり、「Gimine 3」は、オリジナルの画像から3次元の世界を完全に認識していると思われます。

以下の画像も「Gimine 3」が生成した駒の画像です。
駒の形状も正しく認識していますね。

バイブコーディング（Vibe Coding）

もちろん、最初のプロンプトだけで一発完成にはなりません。

私は、「ああして、こうして。」と日本語で指示するだけで、一切プログラムコードは書かないバイブコーディング（Vibe Coding）です。
ただし、何度もプロンプトでこちらの要望や不具合点を「Google Antigravity」（裏で動いている「Gimine 3」）に伝える必要があります。

実は、「コンピューターとコンピューター（観戦）」のモードは、途中で追加しました。

メニュー画面に「コンピューター対コンピューター」のボタンを追加して。
このボタンが押されると、最強モードで「コンピューター対コンピューター」のゲームを開始して。

デバッグのために、毎回「ユーザーとコンピュータ（対コンピューター戦）」のモードで、コンピューターと対戦するのが面倒くさくなったからです。

実際に作成した「3Dオセロゲーム」は、以下のリンクから遊べます。

3D Othello
3Dオセロゲーム
vitorec.co.jp

「3DOthello」のタイトル画像も、オリジナルのオセロゲームのタイトル画像をベースに「Gemini 3」で生成しました。

まとめ

最新の高性能AIモデルがリリースされたというニュースを目にして、「Gemini 3」試してみました。

また、「Google Antigravity」で「3Dオセロゲーム」も作ってみました。

生成された画像の出来栄えやプログラムコードの完成度にびっくりです。
とんでもない時代になってきました。

]]> https://vitorec.co.jp/choi-plus-sozai/%e6%9c%80%e6%96%b0%e3%81%ae%e9%ab%98%e6%80%a7%e8%83%bdai%e3%83%a2%e3%83%87%e3%83%ab%e3%80%8cgemini-3%e3%80%8d%e3%82%92%e8%a9%a6%e3%81%97%e3%81%a6%e3%81%bf%e3%82%8b/feed/ 0 「Vue 3 Datepicker」やりたいことは何でもできるんじゃない？！ https://vitorec.co.jp/choi-plus-sozai/%e3%80%8cvue-3-datepicker%e3%80%8d%e3%82%84%e3%82%8a%e3%81%9f%e3%81%84%e3%81%93%e3%81%a8%e3%81%af%e4%bd%95%e3%81%a7%e3%82%82%e3%81%a7%e3%81%8d%e3%82%8b%e3%82%93%e3%81%98%e3%82%83%e3%81%aa%e3%81%84/ https://vitorec.co.jp/choi-plus-sozai/%e3%80%8cvue-3-datepicker%e3%80%8d%e3%82%84%e3%82%8a%e3%81%9f%e3%81%84%e3%81%93%e3%81%a8%e3%81%af%e4%bd%95%e3%81%a7%e3%82%82%e3%81%a7%e3%81%8d%e3%82%8b%e3%82%93%e3%81%98%e3%82%83%e3%81%aa%e3%81%84/#comments Mon, 25 Jul 2022 03:15:19 +0000 https://vitorec.co.jp/choi-plus-sozai/?p=11120
  1. 環境
  2. Vue 3 Datepickerとは？
  3. Vue 3 Datepickerの機能紹介
    1. デフォルト状態
    2. フォーマットの変更
    3. 日本語表記にする
    4. 「秒」を入力できるようにする
    5. 2つのカレンダーを表示して期間を入力する
  4. まとめ

環境

このページで使用しているフレームワークやライブラリのバージョンは、以下のとおりです。

vue.js3.2.37
Vue 3 Datepicker7.2.2

Vue 3 Datepickerとは？

「Vue 3 Datepicker」は、Vue3で使用できるDate-Time-Pickerライブラリです。

今回、以下の機能を持ったDate-Time-Pickerを探していて見つけたライブラリです。

  • 日付と時刻が入力できること。
  • 時刻は、「秒」まで入力できること。
  • 日本語表記に対応できること。
  • モダンなデザインで、使いやすいUIであること。

デザインや使い勝手は、好みのわかれるところですが、この「Vue 3 Datepicker」は、何より機能が豊富です。

「やりたいこと、何でもできるじゃん！」と感激したので、是非とも紹介したくなりました。

Vue 3 Datepickerの機能紹介

「Vue 3 Datepicker」は、とにかく機能が豊富です。
全ての機能は、公式のドキュメントを見てもらうとして、ここでは、一部の機能と実際のソースコードを紹介します。

デフォルト状態

まずは、デフォルトの状態です。
厳密には、デフォルト状態にplaceholderを追加しています。

下のテキストボックスをクリックして、実際の日時を入力してみてください。

コード
<div id="app-default">
    <datepicker
        placeholder="ここをクリックして日時を入力"
        v-model="date"
    ></datepicker>
</div>

<script>
    Vue.createApp({
        components: { Datepicker: VueDatePicker },
        data() {
            return { date: Vue.ref() };
        },
    }).mount("#app-default");
</script>

フォーマットの変更

デフォルトの状態では、入力した日時が「MM/DD/YYYY, HH:mm」のフォーマットで表示されます。
このフォーマットを「YYYY-MM-DD HH:mm:ss」に変更します。

コード
<div id="app-format">
    <datepicker
        placeholder="ここをクリックして日時を入力"
        v-model="date"
        v-bind:format="format"
    ></datepicker>
</div>

<script>
    Vue.createApp({
        components: { Datepicker: VueDatePicker },
        data() {
            return {
                date: Vue.ref(),
                format: (date) => {
                    const year = date.getFullYear();
                    const month = String(date.getMonth() + 1).padStart(2, "0");
                    const day = String(date.getDate()).padStart(2, "0");
                    const hours = String(date.getHours()).padStart(2, "0");
                    const minutes = String(date.getMinutes()).padStart(2, "0");
                    const seconds = String(date.getSeconds()).padStart(2, "0");

                    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                },
            };
        },
    }).mount("#app-format");
</script>

日本語表記にする

<datepicker>タグにlocale="jp"を追加するだけで、曜日が日本語表記になります。

cancel-text="キャンセル"、select-text="OK"も追加して、”Cancel”を”キャンセル”、”Select”を”OK”に変更します。

「月」の数字の後ろに”月”、「年」の数字の後ろに”年”の文字を表示するには、
<template year="{ value }"> {{ value }}年></template>
を追加します。

Vue 3 Datepickerのバージョン5.x.xまでは、<template>タグの赤字部分を下記のとおりyearにする必要がありました。

<template year="{ year }"> {{ year }}年></template>

このように、Vue 3 Datepickerは、バージョンによって仕様が大きく変わりますので、注意が必要です。

これ以降、実際のコードは、<datepicker>…</datepicker>タグの部分のみが変更になりますので、<datepicker>…</datepicker>タグ部分のみを掲載します。

コード
    <datepicker
        placeholder="ここをクリックして日時を入力"
        v-model="date"
        v-bind:format="format"
        locale="jp"
        cancel-text="キャンセル"
        select-text="OK"
    >
        <template #year="{ value }"> {{ value }}年 </template>
    </datepicker>

「秒」を入力できるようにする

<datepicker>タグにenable-secondsを追加するだけで、時刻入力で「秒」も入力できるようになります。

コード
    <datepicker
        placeholder="ここをクリックして日時を入力"
        v-model="date"
        v-bind:format="format"
        locale="jp"
        cancel-text="キャンセル"
        select-text="OK"
        enable-seconds
    >
        <template #year="{ value }"> {{ value }}年 </template>
    </datepicker>

2つのカレンダーを表示して期間を入力する

最後に2つのカレンダーを表示して、期間を入力する例です。
<datepicker>タグにrangeとmulti-calendarsを追加します。

日時が格納される変数dateが配列になるので、format関数が少し複雑になります。

コード
<div id="app-multi">
    <datepicker
        placeholder="ここをクリックして日時を入力"
        v-model="date"
        v-bind:format="format"
        locale="jp"
        cancel-text="キャンセル"
        select-text="OK"
        enable-seconds
        range
        multi-calendars
    >
        <template #year="{ value }"> {{ value }}年 </template>
    </datepicker>
</div>

<script>
    Vue.createApp({
        components: { Datepicker: VueDatePicker },
        mounted() {
            this.date = [];
        },
        data() {
            return {
                date: Vue.ref(),
                format: (date_array) => {
                    let result = "";
                    date_array.forEach((date, index) => {
                        if (Object.prototype.toString.call(date) == "[object Date]") {
                            const year = date.getFullYear();
                            const month = String(date.getMonth() + 1).padStart(2, "0");
                            const day = String(date.getDate()).padStart(2, "0");
                            const hours = String(date.getHours()).padStart(2, "0");
                            const minutes = String(date.getMinutes()).padStart(2, "0");
                            const seconds = String(date.getSeconds()).padStart(2, "0");

                            result += `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                            if (index == 0) {
                                result += ` - `;
                            }
                        }
                    });

                    return result;
                },
            };
        },
    }).mount("#app-multi");
</script>

まとめ

日時入力に関して、やりたいことが何でもできそうな「Vue 3 Datepicker」を紹介しました。

ここで紹介した機能を使って、GPXファイルのタイムスタンプを変更するアプリケーションを作ってみました。

GPXファイルのタイムスタンプを変更する
GPXファイルのタイムスタンプを変更するツールを作成しました。 「Vue 3 Datepicker」で開始日時/終了日時を指定して、GPXファイルのタイムスタンプを簡単に変更できます。
vitorec.co.jp
2022.08.14
]]> https://vitorec.co.jp/choi-plus-sozai/%e3%80%8cvue-3-datepicker%e3%80%8d%e3%82%84%e3%82%8a%e3%81%9f%e3%81%84%e3%81%93%e3%81%a8%e3%81%af%e4%bd%95%e3%81%a7%e3%82%82%e3%81%a7%e3%81%8d%e3%82%8b%e3%82%93%e3%81%98%e3%82%83%e3%81%aa%e3%81%84/feed/ 1 WordPressの投稿にガントチャートを実装する https://vitorec.co.jp/choi-plus-sozai/wordpress%e3%81%ae%e6%8a%95%e7%a8%bf%e3%81%ab%e3%82%ac%e3%83%b3%e3%83%88%e3%83%81%e3%83%a3%e3%83%bc%e3%83%88%e3%82%92%e5%ae%9f%e8%a3%85%e3%81%99%e3%82%8b/ https://vitorec.co.jp/choi-plus-sozai/wordpress%e3%81%ae%e6%8a%95%e7%a8%bf%e3%81%ab%e3%82%ac%e3%83%b3%e3%83%88%e3%83%81%e3%83%a3%e3%83%bc%e3%83%88%e3%82%92%e5%ae%9f%e8%a3%85%e3%81%99%e3%82%8b/#respond Fri, 10 Jun 2022 15:00:00 +0000 https://vitorec.co.jp/choi-plus-sozai/?p=10848
  1. 環境
  2. frappe-ganttとは？
  3. 実装したガントチャート
    1. ガントチャートの編集方法
    2. 工数グラフ
  4. まとめ

環境

このページで使用しているフレームワークやライブラリのバージョンは、以下のとおりです。

vue.js3.2.31
vue3-sfc-loader0.8.4
frappe-gantt0.6.1をベースに機能拡張
moment2.29.3
sweetalert211.4.17
vue-select4.0.0-beta.3
@lk77/vue3-color3.0.6
encoding-japanese2.0.0

frappe-ganttとは？

「frappe-gantt」は、マウスでドラッグしてグラフィカルに編集できるガントチャートのJavaScriptライブラリです。
センスの良いデザイン、わかりやすいユーザーインターフェースが魅力的です。

ただ、アップデートが停滞気味で、機能的にも足りない部分があるので、「frappe-gantt」を独自に機能拡張したライブラリを作成することにしました。

追加した機能は、以下のとおりです。

  • タスクの担当者入力
  • タスクの工数配分入力
  • タスクや進捗度の色の編集
  • タスクに入力した担当者 / 工数配分を基に、積み上げ工数グラフを表示

作成したJavaScriptライブラリを「Vue3.x」から利用して、WordPressの投稿にガントチャートを実装します。

実装したガントチャート

実装したガントチャートです。

初回は、本日の位置に［初期タスク］が1つ配置されます。
スクロールバーを本日の位置に動かしてください。
この状態から、ガントチャートを編集していきます。

次回以降は、前回の編集途中のガントチャートが自動的に読み込まれます。

・別のPCやブラウザを使った場合
・ブラウザのデータをクリアした場合
は、前回の編集途中のガントチャートや一時保存したガントチャートを読み込むことができなくなります。
重要なガントチャートは、ローカルファイルにダウンロードしてください。

キーボード操作が必要なため、スマートフォンやタブレットでは、正しく編集できません。

ガントチャートの編集方法

  • タスク情報を変更する
    タスクをダブルクリックすると、タスク情報を編集するダイアログが表示されます。
    ダイアログにタスク情報を入力し、OK ボタンを押します。

    タスク名だけは、入力が必須の項目です。

    タスクの詳細は、複数行テキスト、HTMLタグも入力できます。

    担当者は、そのタスクを担当する人の情報（名前やID、メールアドレスなど）を入力します。

    工数配分は、そのタスクに配分する工数の割合を入力します。

    プログレスの色 / タスクバーの色を指定したい場合は、色指定ボタン（小さい長方形   ）を押し、カラーピッカーを起動して色を選びます。
    色指定ボタンを押すたびに、カラーピッカーの表示 / 非表示が切り替わります。
    　
  • タスクの開始日 / 終了日を変更する
    タスクにマウスカーソルを合わせると、タスクの左端 / 右端にハンドルが表示されます。
    左端 / 右端のハンドルをドラッグし、タスクの開始日 / 終了日を変更します。

    タスクを左右にドラッグすると、開始日 / 終了日の間隔を維持したまま、タスクの日程を変更できます。
    ［Shift］キーを押しながら左右にドラッグすると、移動方向は左右のみに固定され、上下の位置は変わりません。
    　
  • タスクの進捗度を変更する
    タスクにマウスカーソルを合わせると、三角形のハンドルが表示されます。
    三角形のハンドルをドラッグし、タスクの進捗度を変更します。
    　
  • タスクを追加する
    タスクを追加 ボタンを押すと、新規のタスク情報を入力するダイアログが表示されます。
    ダイアログにタスク情報を入力し、OK ボタンを押すと、新しいタスクが一番下に追加されます。

    タスク名だけは、入力が必須の項目です。
    　
  • タスクを削除する
    タスクを右クリックすると、タスクの削除を確認するダイアログが表示されます。
    ダイアログの OK ボタンを押すと、選択したタスクが削除されます。
    　
  • タスクの依存関係（親子関係）を変更する
    ［Alt］キーを押したまま、「親タスク」をクリックします。
    赤い矢印が表示されます。
    その後、依存関係を設定したい「子タスク」をクリックします。
    「親タスク」から「子タスク」に矢印がつながり、依存関係が設定されます。

    既に、依存関係が設定されている場合は、依存関係が解除されます。
    　
  • タスクの上下位置を変更する
    タスクを上下にドラッグすると、タスクの上下位置を変更できます。
    ［Shift］キーを押しながら上下にドラッグすると、移動方向は上下のみに固定され、左右の位置は変わりません。

    「子タスク」を「親タスク」の上に移動することはできません。
    ドラッグ後のタスクの位置は、「親タスク」「子タスク」の上下関係を優先して調整されます。

    を有効にした状態でタスクを上下にドラッグすると、上下位置を自由に変更できます。
    この状態では、「親タスク」「子タスク」の関係も無視され、タスクを移動した後の上下位置の整列も行いません。
    　
  • ビューモードを変更する
    日 週 月 ボタンを押して、ビューモードを変更します。
    　
  • ガントチャートをリセットする
    リセット ボタンを押すと、ガントチャートのリセットを確認するダイアログが表示されます。
    ダイアログの OK ボタンを押すと、ガントチャートを初期状態にリセットします。
    　
  • ガントチャートを保存 / 読込む
    保存 ボタンを押すと、ガントチャートの保存を確認するダイアログが表示されます。
    ダイアログの OK ボタンを押すと、作成中のガントチャートを自分の使っているブラウザに一時的に保存します。

    読込み ボタンを押すと、ガントチャートの読込みを確認するダイアログが表示されます。
    ダイアログの OK ボタンを押すと、保存したガントチャートを読込みます。

    ブラウザを閉じても、保存したガントチャートはブラウザに残ります。
    　
  • ガントチャートをダウンロード / アップロードする
    ダウンロード ボタンを押すと、作成中のガントチャートをローカルファイルにダウンロードできます。

    アップロード ボタンを押し、ダウンロードしたガントチャートファイルを指定すると、このファイルがアップロードされ、ガントチャートが更新されます。

工数グラフ

  • タスク情報を変更する
    タスクをダブルクリックすると、タスク情報を編集するダイアログが表示されます。
    ダイアログにタスク情報を入力し、OK ボタンを押します。

    タスク名だけは、入力が必須の項目です。

    タスクの開始日時 / 終了日時のボックスをクリックするとカレンダー / 時計のユーザーインターフェースが表示され、開始日時 / 終了日時を変更できます。

    タスクの詳細は、複数行テキスト、HTMLタグも入力できます。

    担当者は、そのタスクを担当する人の情報（名前やID、メールアドレスなど）を入力します。

    工数配分は、そのタスクに配分する工数の割合を入力します。

    プログレスの色 / タスクバーの色を指定したい場合は、色指定ボタン（小さい長方形   ）を押し、カラーピッカーを起動して色を選びます。
    色指定ボタンを押すたびに、カラーピッカーの表示 / 非表示が切り替わります。
    　
  • タスクの開始日 / 終了日を変更する
    タスクにマウスカーソルを合わせると、タスクの左端 / 右端にハンドルが表示されます。
    左端 / 右端のハンドルをドラッグし、タスクの開始日 / 終了日を変更します。

    タスクを左右にドラッグすると、開始日 / 終了日の間隔を維持したまま、タスクの日程を変更できます。
    ［Shift］キーを押しながら左右にドラッグすると、移動方向は左右のみに固定され、上下の位置は変わりません。

    タスク情報を編集するダイアログでも、カレンダー / 時計のユーザーインターフェースを使って、タスクの開始日時 / 終了日時を変更できます。
    　
  • タスクの進捗度を変更する
    タスクにマウスカーソルを合わせると、三角形のハンドルが表示されます。
    三角形のハンドルをドラッグし、タスクの進捗度を変更します。
    　
  • タスクを追加する
    タスクを追加 ボタンを押すと、新規のタスク情報を入力するダイアログが表示されます。
    ダイアログにタスク情報を入力し、OK ボタンを押すと、新しいタスクが一番下に追加されます。

    タスク名だけは、入力が必須の項目です。
    　
  • タスクを削除する
    タスクを右クリックすると、タスクの削除を確認するダイアログが表示されます。
    ダイアログの OK ボタンを押すと、選択したタスクが削除されます。
    　
  • タスクの依存関係（親子関係）を変更する
    ［Alt］キーを押したまま、「親タスク」をクリックします。
    赤い矢印が表示されます。
    その後、依存関係を設定したい「子タスク」をクリックします。
    「親タスク」から「子タスク」に矢印がつながり、依存関係が設定されます。

    既に、依存関係が設定されている場合は、依存関係が解除されます。
    　
  • タスクの上下位置を変更する
    タスクを上下にドラッグすると、タスクの上下位置を変更できます。
    ［Shift］キーを押しながら上下にドラッグすると、移動方向は上下のみに固定され、左右の位置は変わりません。

    「子タスク」を「親タスク」の上に移動することはできません。
    ドラッグ後のタスクの位置は、「親タスク」「子タスク」の上下関係を優先して調整されます。

    を有効にした状態でタスクを上下にドラッグすると、上下位置を自由に変更できます。
    この状態では、「親タスク」「子タスク」の関係も無視され、タスクを移動した後の上下位置の整列も行いません。
    　
  • ビューモードを変更する
    日 週 月 ボタンを押して、ビューモードを変更します。
    　
  • ガントチャートをリセットする
    リセット ボタンを押すと、ガントチャートのリセットを確認するダイアログが表示されます。
    ダイアログの OK ボタンを押すと、ガントチャートを初期状態にリセットします。
    　
  • ガントチャートを保存 / 読込む
    保存 ボタンを押すと、ガントチャートの保存を確認するダイアログが表示されます。
    ダイアログの OK ボタンを押すと、作成中のガントチャートを自分の使っているブラウザに一時的に保存します。

    読込み ボタンを押すと、ガントチャートの読込みを確認するダイアログが表示されます。
    ダイアログの OK ボタンを押すと、保存したガントチャートを読込みます。

    ブラウザを閉じても、保存したガントチャートはブラウザに残ります。
    　
  • ガントチャートをダウンロード / アップロードする
    ダウンロード ボタンを押すと、作成中のガントチャートをローカルファイルにダウンロードできます。

    アップロード ボタンを押し、ダウンロードしたガントチャートファイルを指定すると、このファイルがアップロードされ、ガントチャートが更新されます。

まとめ

「frappe-gantt」を独自に機能拡張したJavaScriptライブラリを作成し、WordPressの投稿にガントチャートを実装しました。

ガントチャートを使うと、視覚的に業務計画を立てることができます。
また、進捗度も変更できるので、業務の進み具合いもビジュアルに把握しやすくなります。

タスクに担当者と工数配分を入力すれば、積み上げ工数グラフで、担当者ごとの毎日の業務負荷を確認できます。

以下のページは、少し広い画面でガントチャートを編集できます。
ちょっとした業務計画の作成に利用ください。

ガントチャート
ガントチャート編集ページ
vitorec.co.jp
2024.01.01
]]> https://vitorec.co.jp/choi-plus-sozai/wordpress%e3%81%ae%e6%8a%95%e7%a8%bf%e3%81%ab%e3%82%ac%e3%83%b3%e3%83%88%e3%83%81%e3%83%a3%e3%83%bc%e3%83%88%e3%82%92%e5%ae%9f%e8%a3%85%e3%81%99%e3%82%8b/feed/ 0 WordPressの投稿にソートやページネーションの機能を持ったテーブルを実装する https://vitorec.co.jp/choi-plus-sozai/wordpress%e3%81%ae%e6%8a%95%e7%a8%bf%e3%81%ab%e3%82%bd%e3%83%bc%e3%83%88%e3%82%84%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%8d%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%ae%e6%a9%9f%e8%83%bd%e3%82%92%e6%8c%81/ https://vitorec.co.jp/choi-plus-sozai/wordpress%e3%81%ae%e6%8a%95%e7%a8%bf%e3%81%ab%e3%82%bd%e3%83%bc%e3%83%88%e3%82%84%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%8d%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%ae%e6%a9%9f%e8%83%bd%e3%82%92%e6%8c%81/#respond Sun, 24 Apr 2022 03:05:42 +0000 https://vitorec.co.jp/choi-plus-sozai/?p=10802
  1. 環境
  2. vue-good-table-nextとは？
  3. テーブル用ライブラリの比較
  4. WordPressの投稿でvue-good-table-nextを使う
    1. “table_library_comparison_table.vue”の中身
  5. まとめ

環境

このページで使用しているフレームワークやライブラリのバージョンは、以下のとおりです。

vue.js3.2.31
vue3-sfc-loader0.8.4
vue-good-table-next0.1.0

vue-good-table-nextとは？

「vue-good-table-next」は、ソート、ページネーション、フィルターなどの機能をもったテーブルを実装できるVueライブラリです。
「vue-good-table-next」は、「Vue2.x」で動作する「vue-good-table」を「Vue3.x」に対応させたバージョンです。
GitHub（updatedショートコードは投稿・固定ページ以外では利用できません。時点）の「vue-good-table-next」バージョンは「0.1.0」で、"README"にも以下の注意書きがあります。

This project is a port of Vue-good-table for Vue 3.x. The current version is stable enough to start developing new projects but work is still in progress and changes could be made in the short-term. Thus the project is not yet intended to be used in a production environment.

ただ、基本的な動作は安定しているようです。

テーブル用ライブラリの比較

多機能なテーブルを実装するためのライブラリやプラグインは、以下のようにいろいろ提供されています。

この記事では「vue-good-table-next」を紹介しますが、各種のライブラリの特徴を比較表にまとめました。（updatedショートコードは投稿・固定ページ以外では利用できません。時点）
なお、この比較表は、「vue-good-table-next」をインポートしたSFCで表示しています。

カスタマイズの自由度では「vue-tables2（v-tables3）」が優れているのですが、Vue3の対応が不完全なので、総合的に「vue-good-table-next」を選びました。

WordPressの投稿でvue-good-table-nextを使う

上記の各種ライブラリの比較表の部分には、WordPressのブロックエディタで以下の「カスタム HTML」ブロックを配置しています。

<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script>

<div id="app"></div>

<script type="module">
    ////////////////////////////////////////////////////////////////////////////////
    // vue3-sfc-loader モジュール
    ////////////////////////////////////////////////////////////////////////////////
    import { loadModule } from "https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.4/dist/vue3-sfc-loader.esm.js";

    ////////////////////////////////////////////////////////////////////////////////
    // vue3-sfc-loader オプション
    // SFCファイルから外部のモジュールをimportできるオプション
    // 参考：https://github.com/FranckFreiburger/vue3-sfc-loader/issues/14#issuecomment-908849863
    ////////////////////////////////////////////////////////////////////////////////
    const vue3_sfc_loader_options = {
        moduleCache: { vue: Vue },
        getFile(url) {
            url = /.*?\.js|.mjs|.css|.less|.vue$/.test(url)
                ? url
                : `${url}.vue`;
            const type = /.*?\.js|.mjs$/.test(url)
                ? ".mjs"
                : /.*?\.vue$/.test(url)
                ? ".vue"
                : /.*?\.css$/.test(url)
                ? ".css"
                : ".vue";
            const getContentData = (asBinary) =>
                fetch(url).then((res) =>
                    !res.ok
                        ? Promise.reject(url)
                        : asBinary
                        ? res.arrayBuffer()
                        : res.text()
                );
            return { getContentData: getContentData, type: type };
        },
        addStyle(textContent) {
            let styleElement = document.createElement("style");
            document.head.insertBefore(
                Object.assign(styleElement, { textContent }),
                document.head.getElementsByTagName("style")[0] || null
            );
        },
        handleModule(type, getContentData, path, options) {
            switch (type) {
                case ".css":
                    return options.addStyle(getContentData(false));
                case ".less":
                    console.error(".......");
            }
        },
        log(type, ...args) {
            console.log(type, ...args);
        },
    };

    ////////////////////////////////////////////////////////////////////////////////
    // Vue.js アプリケーションインスタンス
    ////////////////////////////////////////////////////////////////////////////////
    const app = Vue.createApp({
        components: {
            "table-library-comparison-table": Vue.defineAsyncComponent(() =>
                loadModule(
                    "../wp-content/themes/cocoon-child-master/vue-components/table_library_comparison_table.vue",
                    vue3_sfc_loader_options
                )
            ),
        },
        template: `<table-library-comparison-table />`,
    });
    app.mount("#app");
</script>

いつものように、「vue3-sfc-loader」で"table_library_comparison_table.vue"を読み込んでいます。

“table_library_comparison_table.vue”の中身

"table_library_comparison_table.vue"の全体です。

<script setup>
////////////////////////////////////////////////////////////////////////////////
// vue-good-table-next モジュール
////////////////////////////////////////////////////////////////////////////////
import { VueGoodTable } from "https://cdn.jsdelivr.net/npm/vue-good-table-next@0.1.0/dist/vue-good-table.cjs.min.js";

////////////////////////////////////////////////////////////////////////////////
// data
////////////////////////////////////////////////////////////////////////////////
const table_columns = [
    {
        label: "比較項目",
        field: "comparison_items",
        thClass: "vgt-center-align vgt-comparison-items",
        tdClass: "vgt-center-align vgt-comparison-items",
        sortable: true,
        html: true,
    },
    {
        label: "vue-good-table-next",
        field: "vue_good_table_next",
        thClass: "vgt-center-align vgt-vue-good-table-next",
        tdClass: "vgt-center-align vgt-vue-good-table-next",
        html: true,
    },
    {
        label: "vue-tables2",
        field: "vue_tables2",
        thClass: "vgt-center-align vgt-vue-tables2",
        tdClass: "vgt-center-align vgt-vue-tables2",
        html: true,
    },
    {
        label: "Vuetable-2",
        field: "vuetable_2",
        thClass: "vgt-center-align vgt-vuetable-2",
        tdClass: "vgt-center-align vgt-vuetable-2",
        html: true,
    },
    {
        label: "Grid.js",
        field: "grid_js",
        thClass: "vgt-center-align vgt-grid-js",
        tdClass: "vgt-center-align vgt-grid-js",
        html: true,
    },
];
const table_rows = Vue.ref([]);
const search_options = {
    enabled: true,
    trigger: "enter",
    placeholder: "テーブルを検索します",
};
const sort_options = {
    enabled: false,
};
const pagination_options = {
    enabled: true,
    mode: "pages",
    perPage: -1, // -1のときは全項目
    position: "top",
    perPageDropdown: [3, 5],
    dropdownAllowAll: true,
    setCurrentPage: 1,
    nextLabel: "次へ",
    prevLabel: "前へ",
    rowsPerPageLabel: "1ページに表示する比較項目数",
    ofLabel: " / ",
    pageLabel: "ページ", // for 'pages' mode
    allLabel: "全項目",
};

////////////////////////////////////////////////////////////////////////////////
// onMountedライフサイクルフック
////////////////////////////////////////////////////////////////////////////////
Vue.onMounted(() => {
    table_rows.value = [
        {
            comparison_items: "Vue3対応",
            vue_good_table_next: "〇<br>基本的な動作は安定",
            vue_tables2: "<span style='font-size: 1.2em;'>△</span><br>v-tables3で対応しているが不完全",
            vuetable_2: "<span style='font-size: 1.8em;'>×</span>",
            grid_js: "〇<br>オリジナルがJavaScriptライブラリなので、Vue3のコンポーネントでラップ可能"
        },
        {
            comparison_items: "ソート",
            vue_good_table_next: "〇",
            vue_tables2: "〇",
            vuetable_2: "〇",
            grid_js: "〇"
        },
        {
            comparison_items: "ページネーション",
            vue_good_table_next: "〇",
            vue_tables2: "〇",
            vuetable_2: "〇",
            grid_js: "〇"
        },
        {
            comparison_items: "グループ表示",
            vue_good_table_next: "〇",
            vue_tables2: "<span style='font-size: 1.2em;'>◎</span><br>指定の要素で自動的にグループ化",
            vuetable_2: "？",
            grid_js: "<span style='font-size: 1.8em;'>×</span>"
        },
        {
            comparison_items: "ヘッダー/セルの<br>HTML対応",
            vue_good_table_next: "〇",
            vue_tables2: "〇",
            vuetable_2: "〇",
            grid_js: "〇"
        },
        {
            comparison_items: "テーブル構成の<br>カスタマイズ",
            vue_good_table_next: "〇<br>ある程度可能",
            vue_tables2: "<span style='font-size: 1.2em;'>◎</span><br>カスタムテンプレートで自由度大",
            vuetable_2: "？",
            grid_js: "<span style='font-size: 1.8em;'>×</span>"
        },
    ];
});
</script>

<template>
    <VueGoodTable v-bind:columns="table_columns" v-bind:rows="table_rows" v-bind:search-options="search_options"
        v-bind:sort-options="sort_options" v-bind:pagination-options="pagination_options">
        <template #table-column="props">
            <span v-if="props.column.label == 'vue-tables2'">
                {{ props.column.label }}<br>（v-tables3）
            </span>
            <span v-else>
                {{ props.column.label }}
            </span>
        </template>
    </VueGoodTable>
</template>

<style>
@import "https://cdn.jsdelivr.net/npm/vue-good-table-next@0.1.0/dist/vue-good-table-next.css";

table.vgt-table th,
table.vgt-table td {
    vertical-align: middle !important;
}

th.vgt-comparison-items {
    min-width: 10em !important;
}

th.vgt-vue-good-table-next,
th.vgt-vue-tables2,
th.vgt-vuetable-2,
th.vgt-grid-js {
    min-width: 15em !important;
}

td.vgt-vue-good-table-next,
td.vgt-vue-tables2,
td.vgt-vuetable-2,
td.vgt-grid-js {
    font-size: 0.8em;
}
</style>
////////////////////////////////////////////////////////////////////////////////
// vue-good-table-next モジュール
////////////////////////////////////////////////////////////////////////////////
import { VueGoodTable } from "https://cdn.jsdelivr.net/npm/vue-good-table-next@0.1.0/dist/vue-good-table.cjs.min.js";

"vue-good-table-next"モジュールをCDNサイト「https://cdn.jsdelivr.net」からインポートします。

<template>
    <VueGoodTable v-bind:columns="table_columns" v-bind:rows="table_rows" v-bind:search-options="search_options"
        v-bind:sort-options="sort_options" v-bind:pagination-options="pagination_options">
        <template #table-column="props">
            <span v-if="props.column.label == 'vue-tables2'">
                {{ props.column.label }}<br>（v-tables3）
            </span>
            <span v-else>
                {{ props.column.label }}
            </span>
        </template>
    </VueGoodTable>
</template>

インポートした"VueGoodTable"を<template>タグで配置します。

基本は、作成したSFCのローカル変数を"VueGoodTable"のプロパティーにバインドしているだけですが、

        <template #table-column="props">
            …
        </template>

の部分については、「vue-good-table-next」の公式ドキュメントの「Custom column headers」を参照してください。

また、テーブルのコンテンツ（"table_rows"）は、あえて"Vue.onMounted();"の中で設定しました。
実際の用途では、"table_rows"を動的に変更すると、テーブルのコンテンツがリアクティブに再表示されます。

まとめ

「vue-good-table-next」を使うと、WordPressの投稿に多機能なテーブルを手軽に実装できます。
しかも、Vueを使っているので、テーブルのコンテンツも簡単に更新/再表示ができます。

]]> https://vitorec.co.jp/choi-plus-sozai/wordpress%e3%81%ae%e6%8a%95%e7%a8%bf%e3%81%ab%e3%82%bd%e3%83%bc%e3%83%88%e3%82%84%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%8d%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%ae%e6%a9%9f%e8%83%bd%e3%82%92%e6%8c%81/feed/ 0 WordPressの投稿にVue3のSFCを読み込んでChart.jsのチャートを表示する https://vitorec.co.jp/choi-plus-sozai/wordpress%e3%81%ae%e6%8a%95%e7%a8%bf%e3%81%abvue3%e3%81%aesfc%e3%82%92%e8%aa%ad%e3%81%bf%e8%be%bc%e3%82%93%e3%81%a7chart-js%e3%81%ae%e3%83%81%e3%83%a3%e3%83%bc%e3%83%88%e3%82%92%e8%a1%a8%e7%a4%ba/ https://vitorec.co.jp/choi-plus-sozai/wordpress%e3%81%ae%e6%8a%95%e7%a8%bf%e3%81%abvue3%e3%81%aesfc%e3%82%92%e8%aa%ad%e3%81%bf%e8%be%bc%e3%82%93%e3%81%a7chart-js%e3%81%ae%e3%83%81%e3%83%a3%e3%83%bc%e3%83%88%e3%82%92%e8%a1%a8%e7%a4%ba/#respond Thu, 21 Apr 2022 12:38:47 +0000 https://vitorec.co.jp/choi-plus-sozai/?p=10675
  1. 環境
  2. Chart.jsとは？
  3. 棒グラフを表示する
    1. コードの解説
    2. "bar_chart.vue"の中身
  4. ユーザーインターフェースで棒グラフを操作する
    1. "bar_chart_with_ui.vue"の中身
  5. まとめ

環境

このページで使用しているフレームワークやライブラリのバージョンは、以下のとおりです。

vue.js3.2.31
vue3-sfc-loader0.8.4
chart.js3.6.0

この記事を書いた後、「vue-chartjs」のバージョン5がリリースされました。
「vue-chartjs」バージョン5では、最新の「Chart.js」バージョン4をサポートしています。
「Chart.js」バージョン4では、チャートのDataやOptionsが変更された場合、再描画するようになりました。なので、この記事で紹介した「Chart.js」を直接ラップする方法より、「vue-chartjs」バージョン5を利用した方が簡単で便利です。

📈 vue-chartjs
⚡ Easy and beautiful charts with Chart.js and Vue.js
vue-chartjs.org

Chart.jsとは？

「Chart.js」は、チャート（グラフ）を表示するJavaScriptライブラリです。
機能の豊富さと表示の美しさで、この「Chart.js」を越えるJavaScriptライブラリはないと思います。
MITライセンスで、無償で利用できます。

2021年の4月に、メジャーバージョンが「2.x」から「3.x」に変わり、仕様も大きく変わっています。
なので、今から「Chart.js」を利用する方は、バージョン「3.x」を使うことをお勧めします。

Vue3で「Chart.js」を使えるようにしたコンポーネント「vue-chartjs」もあります。
「vue-chartjs」のバージョン「4.x」から、「Chart.js」のバージョン「3.x」に対応しているので、Vueの環境で簡単に「Chart.js」を使いたい場合は、「vue-chartjs」を利用すると良いでしょう。

ただし、「vue-chartjs」のバージョン「4.0.5」では、ドキュメントに以下の記載があり、チャートのOptionsを変更しても、チャートが再描画されません。

Options
The options object is not currently implemented reactively. Therefore, if you dynamically change the chart options, they will not be recognized by the update data handler.

なので、この記事では「vue-chartjs」を使わず、「Chart.js」を直接ラップしたSFCを作成し、このコンポーネントでチャートを表示します。

WordPressの投稿にVueのSFCを読み込む方法については、以下の記事で紹介しています。

WordPressのサイトでVue3の単一ファイルコンポーネントを使う
「vue3-sfc-loader」を使うと、「Node.js」が無いブラウザ環境でもVue3の単一ファイルコンポーネントを使うことができます。
vitorec.co.jp

棒グラフを表示する

まずは、簡単な棒グラフを表示してみましょう。
このチャートは、「Chart.js」のドキュメントの最初の例に出てくる棒グラフです。

チャートが表示されている部分には、WordPressのブロックエディタで以下の「カスタム HTML」ブロックを配置しています。

<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script>

<div id="app"></div>

<script type="module">
    ////////////////////////////////////////////////////////////////////////////////
    // vue3-sfc-loader モジュール
    ////////////////////////////////////////////////////////////////////////////////
    import { loadModule } from "https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.4/dist/vue3-sfc-loader.esm.js";

    ////////////////////////////////////////////////////////////////////////////////
    // vue3-sfc-loader オプション
    // SFCファイルから外部のモジュールをimportできるオプション
    // 参考：https://github.com/FranckFreiburger/vue3-sfc-loader/issues/14#issuecomment-908849863
    ////////////////////////////////////////////////////////////////////////////////
    const vue3_sfc_loader_options = {
        moduleCache: { vue: Vue },
        getFile(url) {
            url = /.*?\.js|.mjs|.css|.less|.vue$/.test(url)
                ? url
                : `${url}.vue`;
            const type = /.*?\.js|.mjs$/.test(url)
                ? ".mjs"
                : /.*?\.vue$/.test(url)
                ? ".vue"
                : /.*?\.css$/.test(url)
                ? ".css"
                : ".vue";
            const getContentData = (asBinary) =>
                fetch(url).then((res) =>
                    !res.ok
                        ? Promise.reject(url)
                        : asBinary
                        ? res.arrayBuffer()
                        : res.text()
                );
            return { getContentData: getContentData, type: type };
        },
        addStyle(textContent) {
            let styleElement = document.createElement("style");
            document.head.insertBefore(
                Object.assign(styleElement, { textContent }),
                document.head.getElementsByTagName("style")[0] || null
            );
        },
        handleModule(type, getContentData, path, options) {
            switch (type) {
                case ".css":
                    return options.addStyle(getContentData(false));
                case ".less":
                    console.error(".......");
            }
        },
        log(type, ...args) {
            console.log(type, ...args);
        },
    };

    ////////////////////////////////////////////////////////////////////////////////
    // Vue.js アプリケーションインスタンス
    ////////////////////////////////////////////////////////////////////////////////
    const app = Vue.createApp({
        components: {
            "bar-chart": Vue.defineAsyncComponent(() =>
                loadModule(
                    "../wp-content/themes/cocoon-child-master/vue-components/bar_chart.vue",
                    vue3_sfc_loader_options
                )
            ),
        },
        template: `<bar-chart />`,
    });
    app.mount("#app");
</script>

コードの解説

前回の紹介記事「ブラウザ環境でVue3の単一ファイルコンポーネントを使う」からの差分を中心に解説します。

    ////////////////////////////////////////////////////////////////////////////////
    // Vue.js アプリケーションインスタンス
    ////////////////////////////////////////////////////////////////////////////////
    const app = Vue.createApp({
        components: {
            "bar-chart": Vue.defineAsyncComponent(() =>
                loadModule(
                    "../wp-content/themes/cocoon-child-master/vue-components/bar_chart.vue",
                    vue3_sfc_loader_options
                )
            ),
        },
        template: `<bar-chart />`,
    });
    app.mount("#app");

アプリケーションインスタンスの作成とマウントの方法は、前回の「ブラウザ環境でVue3の単一ファイルコンポーネントを使う」と同じ流れです。
違うのは、"bar_chart.vue"というSFCを"bar-chart"という名前のコンポーネントとして読み込んで、`<bar-chart />`で表示している点です。

"bar_chart.vue"の中身

"bar_chart.vue"の全体です。

<script setup>
////////////////////////////////////////////////////////////////////////////////
// Chart.js モジュール
////////////////////////////////////////////////////////////////////////////////
// Chart.jsモジュールのimportとregisterを行う
import { Chart, registerables } from "../chart.js-3.6.0/dist/chart.esm.js";
Chart.register(...registerables);

////////////////////////////////////////////////////////////////////////////////
// data
////////////////////////////////////////////////////////////////////////////////
let chart = {}; // チャートオブジェクト
const chart_height = 400; // チャートの高さ
let chart_options = { // チャートのオプション
    scales: {
        y: {
            beginAtZero: true
        }
    },
};
let chart_data = { // チャートのデータ
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: "# of Votes",
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 206, 86, 0.2)",
            "rgba(75, 192, 192, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(255, 159, 64, 0.2)"
        ],
        borderColor: [
            "rgba(255, 99, 132, 1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 206, 86, 1)",
            "rgba(75, 192, 192, 1)",
            "rgba(153, 102, 255, 1)",
            "rgba(255, 159, 64, 1)"
        ],
        borderWidth: 1
    }]
};

////////////////////////////////////////////////////////////////////////////////
// onMountedライフサイクルフック
////////////////////////////////////////////////////////////////////////////////
Vue.onMounted(() => {
    renderChart();
});

////////////////////////////////////////////////////////////////////////////////
// チャートを描画する
////////////////////////////////////////////////////////////////////////////////
const renderChart = () => {
    const ctx = document.getElementById("chart").getContext("2d");
    chart = new Chart(ctx, {
        type: "bar",
        data: chart_data,
        options: chart_options,
    });
};
</script>

<template>
    <div>
        <canvas id="chart" width="100%" v-bind:height="chart_height"></canvas>
    </div>
</template>

<style>
</style>

"bar_chart.vue"のセットアップは、

<script>
export default defineComponent({
    setup() {
        …
    },
});
</script>

を使わずに、

<script setup>
    …
</script>

の中でやっています。

<script setup>については、Vue3の公式ドキュメント「SFC<script setup>」を参照してください。
<script setup>の利便性については、以下の記事が参考になります。

【Vue.js 3.2】`` 構文がすごくすごい
zenn.dev
 
////////////////////////////////////////////////////////////////////////////////
// Chart.js モジュール
////////////////////////////////////////////////////////////////////////////////
// Chart.jsモジュールのimportとregisterを行う
import { Chart, registerables } from "../chart.js-3.6.0/dist/chart.esm.js";
Chart.register(...registerables);

「Chart.js」ライブラリ一式をCDNサイト「https://www.jsdelivr.com/package/npm/chart.js」からダウンロードして、適当なフォルダに保存します。
「ちょいプラ素材」のブログは、WordPressのテーマに「Cocoon」を使っています。
今回は、「Cocoon」の子テーマ「cocoon-child-master」の下に"chart.js-3.6.0"というフォルダを作って保存しました。

SFC"bar_chart.vue"が保存されているフォルダからの相対パス"../chart.js-3.6.0/dist/chart.esm.js"で「Chart.js」のESモジュール"chart.esm.js"をインポートします。

「Chart.js」モジュールをインポートした後は、実際に利用するモジュールの登録（register）が必要です。1つ1つのモジュールを登録するのは面倒なので、"Chart.register(...registerables);"でまとめて登録しています。

////////////////////////////////////////////////////////////////////////////////
// data
////////////////////////////////////////////////////////////////////////////////
let chart = {}; // チャートオブジェクト
const chart_height = 400; // チャートの高さ
let chart_options = { // チャートのオプション
    …
};
let chart_data = { // チャートのデータ
    …
};

このSFCだけで使うデータを宣言しています。
それぞれのデータの意味は、コメントを見てください。

////////////////////////////////////////////////////////////////////////////////
// onMountedライフサイクルフック
////////////////////////////////////////////////////////////////////////////////
Vue.onMounted(() => {
    renderChart();
});

このSFCがマウントされたときに呼ばれる、ライフサイクルフックです。
SFCがマウントされたら、この後に説明する"renderChart();"を実行します。

////////////////////////////////////////////////////////////////////////////////
// チャートを描画する
////////////////////////////////////////////////////////////////////////////////
const renderChart = () => {
    const ctx = document.getElementById("chart").getContext("2d");
    chart = new Chart(ctx, {
        type: "bar",
        data: chart_data,
        options: chart_options,
    });
};

チャートを描画する処理です。
この後の<template>タグで配置される<canvas id="chart">要素に「Chart.js」の"bar"モジュール（棒グラフモジュール）を紐づけます。

また、"chart = new Chart();"で作成した「Chart.js」のモジュール（JavaScriptのオブジェクト）を変数"chart"に保存しておきます。
こうすることで、「Chart.js」のメソッド（関数）を使って、作成した"bar"モジュールを操作することができます。

<template>
    <div>
        <canvas id="chart" width="100%" v-bind:height="chart_height"></canvas>
    </div>
</template>

<template>タグで<canvas id="chart">要素を配置します。

ユーザーインターフェースで棒グラフを操作する

次に、先ほどの棒グラフを表示するSFCにユーザーインターフェースを追加して、チャートを操作してみましょう。
ユーザーインターフェースとデータの連携は、Vueが得意とするところです。

［データを変更］ボタンを押すと、データが0～50の範囲の整数にランダムに変化します。
［縦軸の最大値］スライダーを動かすと、チャートの縦軸の最大値を変更できます。

"bar_chart_with_ui.vue"の中身

新しく作成したSFC"bar_chart_with_ui.vue"の全体です。

<script setup>
////////////////////////////////////////////////////////////////////////////////
// Chart.js モジュール
////////////////////////////////////////////////////////////////////////////////
// Chart.jsモジュールのimportとregisterを行う
import { Chart, registerables } from "../chart.js-3.6.0/dist/chart.esm.js";
Chart.register(...registerables);

////////////////////////////////////////////////////////////////////////////////
// data
////////////////////////////////////////////////////////////////////////////////
let chart = {}; // チャートオブジェクト
const chart_height = 400; // チャートの高さ
let y_max = Vue.ref(50); // 縦軸の最大値
let chart_options = { // チャートのオプション
    scales: {
        y: {
            beginAtZero: true,
            min: 0,
            max: y_max.value,
        }
    },
};
let chart_data = { // チャートのデータ
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: "# of Votes",
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 206, 86, 0.2)",
            "rgba(75, 192, 192, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(255, 159, 64, 0.2)"
        ],
        borderColor: [
            "rgba(255, 99, 132, 1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 206, 86, 1)",
            "rgba(75, 192, 192, 1)",
            "rgba(153, 102, 255, 1)",
            "rgba(255, 159, 64, 1)"
        ],
        borderWidth: 1
    }]
};

////////////////////////////////////////////////////////////////////////////////
// onMountedライフサイクルフック
////////////////////////////////////////////////////////////////////////////////
Vue.onMounted(() => {
    renderChart();
});

////////////////////////////////////////////////////////////////////////////////
// チャートを描画する
////////////////////////////////////////////////////////////////////////////////
const renderChart = () => {
    const ctx = document.getElementById("chart2").getContext("2d");
    chart = new Chart(ctx, {
        type: "bar",
        data: chart_data,
        options: chart_options,
    });
};

////////////////////////////////////////////////////////////////////////////////
// チャートのデータを変更する
////////////////////////////////////////////////////////////////////////////////
const onChangeData = () => {
    chart_data.datasets[0].data = [
        Math.floor(Math.random() * 51),
        Math.floor(Math.random() * 51),
        Math.floor(Math.random() * 51),
        Math.floor(Math.random() * 51),
        Math.floor(Math.random() * 51),
        Math.floor(Math.random() * 51),
    ];
    chart.update(); // チャートを再描画する
};

////////////////////////////////////////////////////////////////////////////////
// 縦軸の最大値を変更する
////////////////////////////////////////////////////////////////////////////////
const onChangeYMax = () => {
    chart_options.scales.y.max = y_max.value;
    chart.update(); // チャートを再描画する
};
</script>

<template>
    <div>
        <canvas id="chart2" width="100%" v-bind:height="chart_height"></canvas>
        <form class="chart-ui-form">
            <input type="button" class="data-change-button" v-on:click="onChangeData" value="データを変更" />
            <div class="chart-range-container">
                <span style="margin-right: 0.2em">縦軸の最大値　10</span>
                <input type="range" id="view-time-start-range" class="y-max-range" v-model.number="y_max" min="10"
                    max="100" step="10" v-on:mouseup="onChangeYMax" v-on:touchend="onChangeYMax" />
                <span style="margin-left: 0.2em">100</span>
            </div>
        </form>
    </div>
</template>

<style>
.chart-ui-form {
    margin: 20px;
}

.chart-range-container {
    margin-left: 10px;
    margin-top: 10px;
}

.data-change-button {
    color: #fff;
    background-color: #3b83d8;
    font-weight: bold;
    border-radius: 4px;
    display: inline-block;
    cursor: pointer;
    line-height: normal;
    padding: 7px 13px;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    border: 2px solid transparent;
    position: relative;
}

.y-max-range {
    max-width: 40%;
    width: 40%;
}
</style>

SFCの変更点を解説します。

let y_max = Vue.ref(50); // 縦軸の最大値
let chart_options = { // チャートのオプション
    scales: {
        y: {
            beginAtZero: true,
            min: 0,
            max: y_max.value,
        }
    },
};

チャートのオプションを指定する"chart_options"の"scale.y"オブジェクトに、"min"と"max"を追加しました。
"min"、"max"を指定しない場合は、データの値に応じて、「Chart.js」が軸の表示を最適に調整してくれます。

"max"には、新しく追加した変数"y_max"の値を設定します。
また、変数"y_max"は、Vueの「refメソッド」でリアクティブな変数にしています。

////////////////////////////////////////////////////////////////////////////////
// チャートのデータを変更する
////////////////////////////////////////////////////////////////////////////////
const onChangeData = () => {
    chart_data.datasets[0].data = [
        Math.floor(Math.random() * 51),
        Math.floor(Math.random() * 51),
        Math.floor(Math.random() * 51),
        Math.floor(Math.random() * 51),
        Math.floor(Math.random() * 51),
        Math.floor(Math.random() * 51),
    ];
    chart.update(); // チャートを再描画する
};

［データを変更］ボタンが押されたときに呼ばれるイベントハンドラーです。
チャートのデータが0～50の範囲の整数にランダムに変化します。
実際の用途では、チャートに表示したいデータの設定処理を実装します。

その後、"chart.update();"でチャートを再描画します。

////////////////////////////////////////////////////////////////////////////////
// 縦軸の最大値を変更する
////////////////////////////////////////////////////////////////////////////////
const onChangeYMax = () => {
    chart_options.scales.y.max = y_max.value;
    chart.update(); // チャートを再描画する
};

［縦軸の最大値］スライダーを動かした後、マウスのボタンを離すと呼ばれるイベントハンドラーです。
チャートのオプション"chart_options.scales.y.max"の値を変更した後、"chart.update();"でチャートを再描画します。

<template>
    …
</template>

<style>
    …
</style>

<template>タグと<style>タグで、SFCの外観（ビュー）を定義します。

以上のように、VueのSFCを使うと、

  • ユーザーインターフェースの操作をトリガーにして、
  • 必要なデータやオプションを変更し、
  • 「Chart.js」のupdate()メソッドを呼び出すだけで、

チャートの表示を動的に、しかも簡単に操作できます。

まとめ

「Chart.js」を直接ラップしたSFCを作成し、コンポーネントでチャートを表示する方法を紹介しました。

チャートのデータやオプションを動的に変えることができるので、WordPressのデータベースのデータをビジュアルに表示したり、データが保存されているCSVファイルをアップロードして、CSVファイルのデータをチャートで確認したり、いろいろなシチュエーションで活用できるはずです。

次は、WordPressの投稿に「vue-good-table-next」のテーブルを表示してみましょう。

WordPressの投稿にソートやページネーションの機能を持ったテーブルを実装する
VueのSFCを介して「vue-good-table-next」を使うと、WordPressの投稿に多機能なテーブルを手軽に実装できます。
vitorec.co.jp
2024.07.25
]]> https://vitorec.co.jp/choi-plus-sozai/wordpress%e3%81%ae%e6%8a%95%e7%a8%bf%e3%81%abvue3%e3%81%aesfc%e3%82%92%e8%aa%ad%e3%81%bf%e8%be%bc%e3%82%93%e3%81%a7chart-js%e3%81%ae%e3%83%81%e3%83%a3%e3%83%bc%e3%83%88%e3%82%92%e8%a1%a8%e7%a4%ba/feed/ 0 WordPressのサイトでVue3の単一ファイルコンポーネントを使う https://vitorec.co.jp/choi-plus-sozai/wordpress%e3%81%ae%e3%82%b5%e3%82%a4%e3%83%88%e3%81%a7vue3%e3%81%ae%e5%8d%98%e4%b8%80%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e3%82%b3%e3%83%b3%e3%83%9d%e3%83%bc%e3%83%8d%e3%83%b3%e3%83%88%e3%82%92/ https://vitorec.co.jp/choi-plus-sozai/wordpress%e3%81%ae%e3%82%b5%e3%82%a4%e3%83%88%e3%81%a7vue3%e3%81%ae%e5%8d%98%e4%b8%80%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e3%82%b3%e3%83%b3%e3%83%9d%e3%83%bc%e3%83%8d%e3%83%b3%e3%83%88%e3%82%92/#respond Wed, 20 Apr 2022 09:52:07 +0000 https://vitorec.co.jp/choi-plus-sozai/?p=10600
  1. 環境
  2. Vueのコンポーネントとは？
  3. 単一ファイルコンポーネントとは？
  4. ブラウザ環境で単一ファイルコンポーネントを使うには？
  5. 「vue3-sfc-loader」の使い方
    1. コードの解説
    2. "hello_world.vue"の中身
  6. まとめ

環境

このページで使用しているフレームワークやライブラリのバージョンは、以下のとおりです。

vue.js3.2.31
vue3-sfc-loader0.8.4

Vueのコンポーネントとは？

Vueでは、大きなアプリケーション（下図の左側）を小さな部品の組み合わせで構成（下図の右側）することができます。
この小さな部品（下図の緑色の箱）に相当するのがコンポーネントです。

詳しくは、Vueの公式ドキュメント「コンポーネントによる構成」を参照してください。

単一ファイルコンポーネントとは？

単一ファイルコンポーネント（Single-File Component：以後SFCと呼ぶ）は、Vueを使う上で、とても便利な仕組みです。

SFCは、下図のように、「JavaScript：<script>タグ」「HTML：<template>タグ」「CSS：<style>タグ」を1つにまとめて記述したファイルのことです。
このファイルの拡張子は「*.vue」で、SFCのことを、別名「*.vue」ファイルということがあります。

SFCの「JavaScript：<script>タグ」でコンポーネントの動作や処理を記述することができ、「HTML：<template>タグ」「CSS：<style>タグ」でコンポーネントの外観を指定することができます。
つまり、「*.vue」ファイル1つで、コンポーネントの動作と外観が規定できるということです。

大きなアプリケーションを小さなコンポーネントに分解すれば、ソースコードの可読性も上がりますし、メンテナンスも容易になります。

また、このSFCに汎用性を持たせて、再利用できるように作っておけば、いろいろなアプリケーションで流用できます。

ブラウザ環境で単一ファイルコンポーネントを使うには？

とっても便利なSFCなのですが、ブラウザ環境で動作するJavaScriptでは、「*.vue」ファイルをそのまま読み込むことができません。

サーバーの「Node.js」にインストールした「weback」や「Vue CLI」、「Vite」などの開発環境では、「*.vue」ファイルを直接読み込むことができます。

Vueの便利な機能の1つであるSFCが使えないのは、とても残念です。

ところが、「vue3-sfc-loader」というライブラリを使えば、ブラウザ環境でも「*.vue」ファイルを直接読み込んで、SFCの仕組みを活用することができます。

Vue3/Vue2 Single File Component loader.

Load .vue files dynamically at runtime from your html/js. No node.js environment, no (webpack) build step needed.

上記「vue3-sfc-loader」の概要にも書いてあるように、"No node.js environment, no (webpack) build step needed."、つまり、「Node.js」も「webpack」も無いブラウザ環境で、VueのSFCを使えるようになります。
ブラウザ環境で、SFCがサクッと使えるようになると、WordPressサイトのような「Node.js」の無い環境で、Vueの便利さと簡便さが最大限発揮できると思います。

「vue3-sfc-loader」のオプションを工夫すると、読み込んだ「*.vue」ファイルから、別の「*.vue」ファイルを読み込んだり、外部サイトのJavaScriptライブラリをインポートすることもできます。

「vue3-sfc-loader」の使い方

実際に、「vue3-sfc-loader」を使って、SFCを読み込んでみましょう。

どうでしょうか？
赤い文字で「Hello World!」と表示されましたか？

「Hello World!」と表示されている部分には、WordPressのブロックエディタで「カスタム HTML」ブロックを配置しています。

「カスタム HTML」ブロックには、以下のHTMLコードを入力します。

<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script>

<div id="app"></div>

<script type="module">
    ////////////////////////////////////////////////////////////////////////////////
    // vue3-sfc-loader モジュール
    ////////////////////////////////////////////////////////////////////////////////
    import { loadModule } from "https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.4/dist/vue3-sfc-loader.esm.js";

    ////////////////////////////////////////////////////////////////////////////////
    // vue3-sfc-loader オプション
    // SFCファイルから外部のモジュールをimportできるオプション
    // 参考：https://github.com/FranckFreiburger/vue3-sfc-loader/issues/14#issuecomment-908849863
    ////////////////////////////////////////////////////////////////////////////////
    const vue3_sfc_loader_options = {
        moduleCache: { vue: Vue },
        getFile(url) {
            url = /.*?.js|.mjs|.css|.less|.vue$/.test(url)
                ? url
                : `${url}.vue`;
            const type = /.*?.js|.mjs$/.test(url)
                ? ".mjs"
                : /.*?.vue$/.test(url)
                ? ".vue"
                : /.*?.css$/.test(url)
                ? ".css"
                : ".vue";
            const getContentData = (asBinary) =>
                fetch(url).then((res) =>
                    !res.ok
                        ? Promise.reject(url)
                        : asBinary
                        ? res.arrayBuffer()
                        : res.text()
                );
            return { getContentData: getContentData, type: type };
        },
        addStyle(textContent) {
            let styleElement = document.createElement("style");
            document.head.insertBefore(
                Object.assign(styleElement, { textContent }),
                document.head.getElementsByTagName("style")[0] || null
            );
        },
        handleModule(type, getContentData, path, options) {
            switch (type) {
                case ".css":
                    return options.addStyle(getContentData(false));
                case ".less":
                    console.error(".......");
            }
        },
        log(type, ...args) {
            console.log(type, ...args);
        },
    };

    ////////////////////////////////////////////////////////////////////////////////
    // Vue.js アプリケーションインスタンス
    ////////////////////////////////////////////////////////////////////////////////
    const app = Vue.createApp({
        components: {
            "hello-world": Vue.defineAsyncComponent(() =>
                loadModule(
                    "../wp-content/themes/cocoon-child-master/vue-components/hello_world.vue",
                    vue3_sfc_loader_options
                )
            ),
        },
        template: `<hello-world />`,
    });
    app.mount("#app");
</script>

コードの解説

では、コードの中身を解説します。

<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script>

VueをCDNサイト「https://cdn.jsdelivr.net」からインポートします。
"vue@3.2.31"なので、メジャーバージョンが「3」です。
なので、Vue3を読み込んでいます。

投稿やページの最初に1回インポートすれば、それ以降、Vueのメソッド（関数）は、"Vue.createApp();"のように「Vue.func()」で利用できます。

<div id="app"></div>

Vueのアプリケーションインスタンスをマウントする<div>タグを"app"というidで配置します。
この<div>要素が、この後に読み込むSFC、"hello_world.vue"で置き換えられます。

<script type="module">
　…
<script>

<script type="module">～</script>が、SFCを読み込むJavaScriptになります。
JavaScriptでimport文を使うので、「type="module"」にします。

    ////////////////////////////////////////////////////////////////////////////////
    // vue3-sfc-loader モジュール
    ////////////////////////////////////////////////////////////////////////////////
    import { loadModule } from "https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.4/dist/vue3-sfc-loader.esm.js";

「vue3-sfc-loader」をCDNサイト「https://cdn.jsdelivr.net」からインポートします。
ファイル名が"vue3-sfc-loader.esm.js"になっていて、"esm"という文字列が入っています。
これは、import文でインポートできる「ESモジュール」であることを示しています。

    ////////////////////////////////////////////////////////////////////////////////
    // vue3-sfc-loader オプション
    // SFCファイルから外部のモジュールをimportできるオプション
    // 参考：https://github.com/FranckFreiburger/vue3-sfc-loader/issues/14#issuecomment-908849863
    ////////////////////////////////////////////////////////////////////////////////
    const vue3_sfc_loader_options = {
        moduleCache: { vue: Vue },
        getFile(url) {
            url = /.*?.js|.mjs|.css|.less|.vue$/.test(url)
                ? url
                : `${url}.vue`;
            const type = /.*?.js|.mjs$/.test(url)
                ? ".mjs"
                : /.*?.vue$/.test(url)
                ? ".vue"
                : /.*?.css$/.test(url)
                ? ".css"
                : ".vue";
            const getContentData = (asBinary) =>
                fetch(url).then((res) =>
                    !res.ok
                        ? Promise.reject(url)
                        : asBinary
                        ? res.arrayBuffer()
                        : res.text()
                );
            return { getContentData: getContentData, type: type };
        },
        addStyle(textContent) {
            let styleElement = document.createElement("style");
            document.head.insertBefore(
                Object.assign(styleElement, { textContent }),
                document.head.getElementsByTagName("style")[0] || null
            );
        },
        handleModule(type, getContentData, path, options) {
            switch (type) {
                case ".css":
                    return options.addStyle(getContentData(false));
                case ".less":
                    console.error(".......");
            }
        },
        log(type, ...args) {
            console.log(type, ...args);
        },
    };

"vue3_sfc_loader_options"は、「vue3-sfc-loader」でSFCを読み込むときのオプションです。
読み込んだSFCファイルから外部のモジュールをimportできるオプションになっています。

Is it possible to import from an ES6 module in a component (SFC) ? ?? Issue #14 ?? FranckFreiburger/vue3-sfc-loader
Hi, First I wan't to thank you for this librairy which is going to be very useful for me. I can't manage to import from ...
github.com
 
    ////////////////////////////////////////////////////////////////////////////////
    // Vue.js アプリケーションインスタンス
    ////////////////////////////////////////////////////////////////////////////////
    const app = Vue.createApp({
        components: {
            "hello-world": Vue.defineAsyncComponent(() =>
                loadModule(
                    "../wp-content/themes/cocoon-child-master/vue-components/hello_world.vue",
                    vue3_sfc_loader_options
                )
            ),
        },
        template: `<hello-world />`,
    });
    app.mount("#app");

"Vue.createApp"で、Vueのアプリケーションインスタンスを作成した後、"app.mount("#app");"で、最初に作成した<div>タグに、作成したアプリケーションインスタンスをマウントしています。

                loadModule(
                    "../wp-content/themes/cocoon-child-master/vue-components/hello_world.vue",
                    vue3_sfc_loader_options
                )

「vue3-sfc-loader」の"loadModule"関数で、SFCファイルを読み込みます。
今回は、"hello_world.vue"という名前のSFCファイルを"../wp-content/themes/cocoon-child-master/vue-components/"フォルダの下に置いています。

「ちょいプラ素材」のブログは、WordPressのテーマに「Cocoon」を使っています。
なので、「Cocoon」の子テーマ「cocoon-child-master」の下に"vue-components"というフォルダを作りました。

        components: {
            "hello-world": Vue.defineAsyncComponent(() =>

読み込んだSFCは、"hello-world"という名前のコンポーネントになります。

        template: `<hello-world />`,

"hello-world"コンポーネントを<hello-world>タグでHTML要素として配置します。

"hello_world.vue"の中身

"hello_world.vue"の中身は、Vueの公式ガイド「単一ファイルコンポーネント」で紹介されている単純なテンプレート構文の例のSFCです。

<script>
export default {
  data() {
    return {
      greeting: 'Hello World!'
    }
  }
}
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

"greeting"というテンプレートを"color: red;"と"font-weight: bold;"のスタイルで表示するというものです。
"greeting"というテンプレートの文字列は、"Hello World!"です。

まとめ

「vue3-sfc-loader」ライブラリを使えば、WordPressの「カスタム HTML」ブロックから、VueのSFCを読み込むことができます。
「カスタム HTML」ブロックには、SFCのロード処理だけを書いて、実際にやりたい表示や処理は、SFC（1つの「*.vue」ファイル）にまとめることができます。
さらに凝った表示や処理をさせたい場合は、適宜、いくつかのSFCに分割すれば良いでしょう。

この方法で、WordPressサイトに簡単にVueを導入し、WordPressサイトのページ中に、複雑な表示や処理を実装することができます。

次は、もう少し面白いSFCの例として、WordPressの投稿に「Chart.js」のチャート（グラフ）を表示してみましょう。

WordPressの投稿にVue3のSFCを読み込んでChart.jsのチャートを表示する
WordPressの投稿に「Chart.js」をラップしたVueのSFCを読み込み、チャート（グラフ）を表示します。
vitorec.co.jp
2024.05.26
]]> https://vitorec.co.jp/choi-plus-sozai/wordpress%e3%81%ae%e3%82%b5%e3%82%a4%e3%83%88%e3%81%a7vue3%e3%81%ae%e5%8d%98%e4%b8%80%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e3%82%b3%e3%83%b3%e3%83%9d%e3%83%bc%e3%83%8d%e3%83%b3%e3%83%88%e3%82%92/feed/ 0 そろそろVue3を使ってみるか https://vitorec.co.jp/choi-plus-sozai/%e3%81%9d%e3%82%8d%e3%81%9d%e3%82%8dvue3%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%82%8b%e3%81%8b/ https://vitorec.co.jp/choi-plus-sozai/%e3%81%9d%e3%82%8d%e3%81%9d%e3%82%8dvue3%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%82%8b%e3%81%8b/#respond Sat, 02 Apr 2022 14:25:57 +0000 https://vitorec.co.jp/choi-plus-sozai/?p=10511
  1. Vue.jsは、とっても楽しい
  2. Vue3へ移行
  3. 使いたいのはローカルのブラウザ環境
    1. WordPressで作成されたWebサイトが表示されるまでの流れ
    2. サーバー側にインストールしたNode.jsでJavaScriptを使う場合
    3. クライアント側のブラウザで動作するVueとは？
    4. CDNからVueを読み込む
  4. まとめ

Vue.jsは、とっても楽しい

2017年頃、ネットでReactとかVueといったJavaScriptのフレームワークの話題を頻繁に目にするようになって、自分のWordPressサイトのフロントエンドでも、ReactかVueを使ってみたいと思い始めました。

ReactにするかVueにするか、いろいろ調べた結果、

  • 既存のJavaScriptのプログラムに少しずつ導入できそうなこと
  • Vue2の日本語サイトのイントロダクションの説明がとてもわかりやすかったこと

から、Vue.js（当時のバージョンは、2.xだったので、Vue2と呼ぶ）を使い始めました。

Vue2を使うまでは、JQueryを使ってHTMLの要素を動的に操作したりしていましたが、いざ、Vue2を使い始めると、

「なんて便利なの！」
「もっと早く使えば良かった。」

という感じで、ドハマりしてしまいました。

何より、JavaScriptの変数やプロパティーが変わると、更新が必要なDOMが自動で置き換わるリアクティブな動作が心地いいんです。

状態の変化に応じて、自分でHTML要素をJQueryで変更する面倒な作業には、もう戻れません。

「カバの樹」さんのサイトなどで紹介されているVueのライブラリも便利そうなものが多く、気に入ったVueライブラリを自分のサイトに組み込むのが楽しい作業になりました。

Vue3へ移行

Vue.jsは、2020年の9月にメジャーバージョンが2.xから3.0にアップし、さまざまな改良が加えられました。

いろいろネットの情報を調べてみると、Vue.js本体を2.xから3.0に単純に差し替えるだけではダメで、自分の書いたJavaScriptのプログラムを変更しないといけないことがわかりました。

以下のように、Vueアプリケーションを組み込む、最初のコードから違います。

// Vue2の場合
var app = new Vue({
  el: '#app',
    …
})
// Vue3の場合
Vue.createApp(Counter).mount('#app')

ということで、ちょっと面倒臭くなり、しばらく放っておきました。

ただ、HTMLのテーブルにいろいろな機能を追加するために、ずっと利用させてもらってきたJQueryの「teblesorter」というライブラリを、テーブル用Vueライブラリ「vue-good-table-next」へ置き換えるのを機に、Vue3に移行することにしました。

使いたいのはローカルのブラウザ環境

ここで一つ注意があります。

ネットでVueの情報を閲覧すると、そのほとんどが、サーバー側にNode.jsをインストールして、そのNode.jsの環境でVueを実行させる話です。

Node.jsは、WindowsやMACなど、手元（ローカル）のPCにインストールすることもできます。
ただし、ローカルのPCにインストールしたNode.jsの環境は、あくまでサーバーとしての位置づけです。
ローカルPCの中に、仮想のサーバーを作るイメージです。

この「ちょいプラ素材」のブログで取り上げるのは、サーバー側にインストールしたNode.js環境の話ではなく、手元（ローカル）のブラウザ環境でVue3を利用する方法です。

WordPressで作成されたWebサイトが表示されるまでの流れ

  • クライアント側：手元（ローカル）のブラウザ環境
  • サーバー側：サーバー環境

の区別を理解するために、WordPressで作成されたWebサイトの情報やコンテンツが、ローカルPCのブラウザに表示されるまでの流れを説明します。

この「ちょいプラ素材」のブログも、WordPressを利用したWebサイトです。
皆さんの使っているブラウザから、「ちょいプラ素材」にアクセスしたとき、「ちょいプラ素材」のコンテンツがブラウザに表示されるまでの流れを下図で説明します。

  1. ブラウザから「ちょいプラ素材」のURLを指定してWebサーバーにアクセスします。
    　
  2. Webサーバーは、URLを解釈して、URLに応じたPHPプログラムを実行します。
    Webサーバーには、Linuxサーバーで利用されるAPACHE、NGINX、OpenLiteSpeedや、Windowsサーバーで利用されるIISなどがあります。
    　
  3. PHPプログラムは、MySQLを経由して、データベースに保存されているコンテンツ（文章やデータ）を読み出します。
    MariaDBなどMySQL互換のデータベースサーバーが使われることもあります。
    　
  4. データベースから読み出されたコンテンツは、PHPプログラムによって処理され、Webサーバーを通して、HTML / CSS / JavaScript の形式でクライアント側に送られます。
    　
  5. ブラウザは、クライアント側に送られたHTML / CSS を解釈し、画面に表示します。
    JavaScriptが含まれるWebページでは、JavaScriptのプログラムを実行します。
    JavaScript（場合によっては、JavaScriptのjQueryライブラリ、JavaScriptのフレームワークのVue.jsなど）を利用するとHTMLの要素を動的に変更することができます。
    「ちょいプラ素材」では、JavaScriptライブラリやVueライブラリを使って、表やグラフを表示したり、ユーザーインターフェースを構成したりしています。
    　
  6. ブラウザはクライアント側にあるので、ブラウザからサーバー側のデータベースに直接アクセスできません。
    ユーザーがインターフェースを操作して入力したパラメーターをサーバーに送ったり、表やグラフの元になるデータをサーバーに要求したりする場合は、Ajax通信を使います。
    URLを指定したアクセスでは、Webページ全体の表示が更新（リセット）されてしまいますが、Ajax通信を使うと、Webページの表示をリセットしないで、クライアントとサーバーの間でデータのやりとりができます。
    Ajax通信は、jQueryライブラリやフレームワークのVue.jsにaxiosを組み合わせて利用した方が楽に処理できます。

余談になりますが、2022年4月現在、「W3Techs」の調査データによると、全世界のWebサイトの43%がWordPressを利用しています。
コンテンツ管理システムでのシェアは、64.5%です。

これだけ広くWordPressが使われるようになった理由は、WordPressがリリースされた当時、一番メジャーだった以下のサーバーシステムを組み合わせて構成したので、ITエンジニアに抵抗感なく受け入れられたからだと思います。

  • Webサーバー：APACHE
  • アプリケーションサーバー：PHP
  • データベースサーバー：MySQL

サーバー側にインストールしたNode.jsでJavaScriptを使う場合

先ほど、

ネットでVueの情報を閲覧すると、そのほとんどが、サーバー側にNode.jsをインストールして、そのNode.jsの環境でVueを実行させる話です。

と説明しました。

上図で示したように、WordPressのアプリケーションサーバーは、PHPを使っています。

WordPress以外の一部のWebサイトでは、サーバーにNode.jsをインストールし、サーバー側でもJavaScriptが動作する環境を用意して、この環境で動作するJavaScriptをアプリケーションサーバーとして使うことがあります。

Vueは、JavaScriptのフレームワークですから、当然、サーバー側のNode.js環境でも動作します。
ネットに溢れているVueの情報は、サーバー側のNode.js環境の話がほとんどです。

クライアント側のブラウザで動作するVueとは？

では、「クライアント側のブラウザで動作するVue」とは、どういう話でしょうか？

上図で、

  1. データベースから読み出されたコンテンツは、PHPプログラムによって処理され、Webサーバーを通して、HTML / CSS / JavaScript の形式でクライアント側に送られます。
    　
  2. ブラウザは、クライアント側に送られたHTML / CSS を解釈し、画面に表示します。
    JavaScriptがが含まれるWebページでは、JavaScriptのプログラムを実行します。

と説明しました。

クライアント側に送られたJavaScript（④）は、ブラウザで実行（⑤）されますが、このブラウザで実行されるJavaScriptでも、Vueを動作させることができます。

「クライアント側のブラウザで動作するVue」とは、ブラウザで実行（⑤）されるJavaScriptで、Vueを利用するという意味です。

CDNからVueを読み込む

ブラウザで動作するJavaScriptでVueを利用するためには、Vue本体（Vue.js）を読み込む必要があります。

上図の④で、Webサーバーから送られるJavaScriptに、Vue本体を含めても良いのですが、

  • サーバー側の処理や通信トラフィックに負荷がかかる
  • 個々のサーバーで、Vue本体のバージョン管理をするのは大変

という理由で、実際には行われていません。

では、どうするか？

④で送られるHTMLやJavaScriptの中に、Vue本体を読み込む処理（コード）を埋め込みます。
Vue本体を読み込むコードは、1行で書けるほどの小さいサイズなので、④で送られるHTMLやJavaScriptのデータ量はほとんど増えません。

以下に、実際のコードの例を示します。

<!-- HTMLから読み込む場合 -->
<script src="https://unpkg.com/vue@next"></script>
// JavaScriptから読み込む場合
import Vue from "https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.esm-browser.js";

上記のコードで、「3.2.31」は、Vueのバージョンです。
メジャーバージョンが「3」なので、Vue3を読み込んでいます。

また、Vue本体を「https://unpkg.com」や「https://cdn.jsdelivr.net」といった、CDNサイトから読み込んでいます。

CDNは、「Content Delivery Network：コンテンツデリバリーネットワーク」の略で、

ウェブサーバーの負荷を軽減する目的で、ウェブコンテンツを効率的かつスピーディーに配信できるように工夫されたネットワーク

の仕組みです。

まとめ

今後、「ちょいプラ素材」では、ローカルのブラウザ環境でVue3を使う方法を説明します。

具体的には、

  • ブラウザ環境で、SFC（Single-File Component：単一ファイルコンポーネント、別名 *.vueファイル）を使う方法
  • 美しいグラフを作成できる有名なJavaScriptライブラリ「Chart.js」をVue3で使う方法
  • テーブル用の高機能なVueライブラリ「vue-good-table-next」をVue3で使う方法

などを紹介しようと思います。

WordPressのサイトでVue3の単一ファイルコンポーネントを使う
「vue3-sfc-loader」を使うと、「Node.js」が無いブラウザ環境でもVue3の単一ファイルコンポーネントを使うことができます。
vitorec.co.jp
2025.10.18
WordPressの投稿にVue3のSFCを読み込んでChart.jsのチャートを表示する
WordPressの投稿に「Chart.js」をラップしたVueのSFCを読み込み、チャート（グラフ）を表示します。
vitorec.co.jp
2024.05.26
WordPressの投稿にソートやページネーションの機能を持ったテーブルを実装する
VueのSFCを介して「vue-good-table-next」を使うと、WordPressの投稿に多機能なテーブルを手軽に実装できます。
vitorec.co.jp
2024.07.25
]]> https://vitorec.co.jp/choi-plus-sozai/%e3%81%9d%e3%82%8d%e3%81%9d%e3%82%8dvue3%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%82%8b%e3%81%8b/feed/ 0 「ちょいプラ素材」　StarServerのハイスピードプランに乗り換えました https://vitorec.co.jp/choi-plus-sozai/%e3%80%8c%e3%81%a1%e3%82%87%e3%81%84%e3%83%97%e3%83%a9%e7%b4%a0%e6%9d%90%e3%80%8d%e3%80%80starserver%e3%81%ae%e3%83%8f%e3%82%a4%e3%82%b9%e3%83%94%e3%83%bc%e3%83%89%e3%83%97%e3%83%a9%e3%83%b3%e3%81%ab/ https://vitorec.co.jp/choi-plus-sozai/%e3%80%8c%e3%81%a1%e3%82%87%e3%81%84%e3%83%97%e3%83%a9%e7%b4%a0%e6%9d%90%e3%80%8d%e3%80%80starserver%e3%81%ae%e3%83%8f%e3%82%a4%e3%82%b9%e3%83%94%e3%83%bc%e3%83%89%e3%83%97%e3%83%a9%e3%83%b3%e3%81%ab/#respond Sat, 11 Sep 2021 03:22:24 +0000 https://vitorec.co.jp/choi-plus-sozai/?p=10381
  1. ずっとminibirdサーバーを使っていた
  2. ハイスピードプランが永久半額？
  3. サポートに確認
  4. ハイスピードプランの申し込み
  5. 「ちょいプラ素材」のサーバー移動
  6. StarServerの評価
  7. まとめ

ずっとminibirdサーバーを使っていた

このブログ「ちょいプラ素材」では、2014年10月から、自分の体験をベースに、気になったコトやモノ、ヒトを少しづつ紹介してきました。

個人的な情報発信が目的なので、レンタルサーバーを選ぶにあたって、私が最も重視したのはコスパです！
以下の記事でも紹介していますが、最初に選んだレンタルサーバーは、WordPressも使えて、月275円（税込み）で自分のブログが簡単に開設できるネットオウルさんのminibirdサーバーでした。

レンタルサーバーを選ぶ　WordPressも使える月250円の格安サーバーが意外とすごい
WordPressにも対応した格安レンタルサーバーを選択するときに考慮したポイントをまとめます。
vitorec.co.jp
2018.07.15

その後、 minibirdサーバーは、StarServerに名称を変えましたが、以下のスペックと 月275円（税込み） の価格はそのまま継承されたので、私は、ずっと StarServer ライトプラン（旧ミニバード）というプランを使ってきました。

  • 月 275円（税込み）のお手頃価格（12ヶ月契約）。
  • 当然、WordPressに対応している。
  • ディスク容量 50GBなので、しばらくは容量不足になることはないだろう。
    　→ SterServer移行時に、160GBに増量された。
  • 50個までのマルチドメインに対応している。
  • 1,000個までのサブドメインに対応している。
  • MySQLデータベースが5つまで持てる。
  • メールアドレス 500個。

ハイスピードプランが永久半額？

久しぶりにネットオウルさんのサイトに行ったところ、何やら見過ごせないキャンペーンが目に留まりました。

低価格×高性能でコスパ最強！ブログ・ホームページなら【スターレンタルサーバー】
レンタルサーバーの【スターレンタルサーバー】は、手頃な価格で使える高性能レンタルサーバーです。オールNVMe・無料独自SSL・WordPressが使える高速サーバー環境が利用可能で、高速・サポート充実のプランを253円から提供。
www.star.ne.jp
  • 3年契約であれば、値段変わらずの 月 275円（税込み）でハイスピードプランに乗り換えられる。
  • ディスク容量 320GBに倍増。
  • 無制限のマルチドメイン。
  • 無制限のサブドメイン。
  • 無制限のMySQLデータベース。
  • 無制限のメールアドレス。

「無制限のオンパレードや！」

私が重要視したのは、MySQLデータベースが無制限に設定できるという点です。

せっかくマルチドメイン対応で、複数のWordPressサイトが運用できるので、それぞれのサイトごとにMySQLデータベースは使い分けたい。
マルチドメインも MySQLデータベースも無制限は、とっても魅力的なんです！

キャンペーン期間が2021年10月7日までだったので、さっそく、ハイスピードプランへの乗り換え検討を始めました。

サポートに確認

まず、サポートに問い合わせしたのは、

「 このキャンペーン半額キャンペーンは、継続利用の私にも適用されるのか？ 」

です。
回答は、

「適用されます。」
「ただし、ハイスピードプランのサーバーを新たに新規申し込みしてください。」

とのことでした。
ネットオウルさんのSterServerは、 どのプランも「2週間の無料お試し期間」があるので、躊躇なく申込できます。
「2週間の無料お試し期間」の申し込みにあたっては、支払方法を選んだり、クレジットカード番号などの入力も必要ないので、文字どおり「まずは、お試し」感覚です。

解約手続きを忘れても、費用が発生することもありません。

ハイスピードプランの申し込み

申し込みはいたって簡単。

SterServerのサイトにアクセスして、ページの上の方にある、

ボタンを押した後、プラン一覧表で希望のプランを選び、表の下にある「申し込む」ボタンを押します。

「Netowl スターサーバー申込フォーム」のページ移動するので、このページの「新規会員登録の流れ」の手順に沿って申し込むだけです。

申し込みが完了したら、SterServerのサーバーIDが取得できます。

「ちょいプラ素材」のサーバー移動

新しくWordPressを始められる方は、この移動の手順は不要です。

私は、「ちょいプラ素材」のサーバー移動が目的なので、まず、「ちょいプラ素材」で使っているドメインのデータをバックアップします。

私は、WordPressの「All-in-One WP Migration」を使ってブログデータのバックアップをしています。

バックアップが完了したら、旧サーバーIDから移動したいドメインを削除します。
ドメインを削除すると、このドメインに紐づいているデータも完全に削除されてしまうので、データのバックアップは確実に実行してください。

次に、新しいサーバIDに、旧サーバーIDから削除したドメインを追加します。

「旧サーバーIDからドメインを削除」➡「新しいサーバーIDに削除したドメインを追加」

という手順は、ドメインのネームサーバーの変更が発生します。
なので、最大24時間ほど、元のドメインのサイトにアクセスできなくなります。

私は、サイトにしばらくアクセスできなくなることを許容し、手順が簡単なこの方法を選びました。

StarServerの評価

ちなみに、今回、SterServerのハイスピードプランに乗り換えるに当たって、他社のレンタルサーバーとの比較も行いました。

以下、レンタルサーバーの比較サイトを見ると、SterServerの評価は、10位 / 10位中でした。

【徹底比較】レンタルサーバーおすすめランキング【速度・料金・安定性】
本記事では、日本国内で提供されているレンタルサーバーのうち、初心者にもおすすめのレンタルサーバーを人気、速度、料金、安定度、レビュー、評価点などで独自に比較集計し、おすすめレンタルサーバーランキングとしてランキング形式でまとめています。これ...
yokaport.com

月額138円～利用できる格安レンタルサーバーです。格安なので機能・性能は良くありませんが、他の格安サーバーと比べ過去に目立った事故等起こしておらず、安定した運用を行えます。ただし、性能は良くありません。長所は「安い」それだけです。

長所は「安い」それだけです。

いいんです！

改めて、他社のレンタルサーバーと比較してみましたが、「永久半額キャンペーン」を利用すれば、コスパは断トツです。
乗り換えする意味を改めて確信できました。

あと、速度が遅いとありますが、皆さんどうでしょうか？
「ちょいプラ素材」の表示、遅いですか？

私は、ほとんど気になりません。

あと、7年間、ネットオウルさんを利用していますが、ネット障害などの事故はありません。
とっても安定しています。

まとめ

今回、たまたま見かけた、SterServerのハイスピードプラン「永久半額キャンペーン」を利用して、「ちょいプラ素材」のブログのサーバーを移行しました。

「ちょいプラ素材」にしばらくアクセスできなくなった方がいらっしゃると思いますが、無事、サーバーの移動も完了し、「ちょいプラ素材」も再開できました。

引き続き、「ちょいプラ素材」をよろしくお願いします。

]]> https://vitorec.co.jp/choi-plus-sozai/%e3%80%8c%e3%81%a1%e3%82%87%e3%81%84%e3%83%97%e3%83%a9%e7%b4%a0%e6%9d%90%e3%80%8d%e3%80%80starserver%e3%81%ae%e3%83%8f%e3%82%a4%e3%82%b9%e3%83%94%e3%83%bc%e3%83%89%e3%83%97%e3%83%a9%e3%83%b3%e3%81%ab/feed/ 0 Cocoon　WordPressのテーマを換えました https://vitorec.co.jp/choi-plus-sozai/cocoon%e3%80%80wordpress%e3%81%ae%e3%83%86%e3%83%bc%e3%83%9e%e3%82%92%e6%8f%9b%e3%81%88%e3%81%be%e3%81%97%e3%81%9f/ https://vitorec.co.jp/choi-plus-sozai/cocoon%e3%80%80wordpress%e3%81%ae%e3%83%86%e3%83%bc%e3%83%9e%e3%82%92%e6%8f%9b%e3%81%88%e3%81%be%e3%81%97%e3%81%9f/#respond Sun, 01 Jul 2018 09:21:06 +0000 https://vitorec.co.jp/choi-plus-sozai/?p=8818
  1. WordPressのテーマを換えました
  2. 「Cocoon」を使ってみた
    1. 不具合や課題もちらほら
  3. よし、「Cocoon」に換えよう！
  4. インデックス画面のサムネイル画像が表示されない
    1. カード形式を選ぶ
    2. カードのサムネイル画像の再生成
    3. サムネイル画像がない
    4. 暫定対策
  5. まとめ
  6. その後
    1. 原因
    2. HTMLソース
    3. 対策

WordPressのテーマを換えました

この「ちょいプラ素材」のブログを立ち上げたときから使っているWordPressのテーマ「Simplicity」を後継の「Cocoon」に換えました。

 

一昨日、「Simplicity」のホームページに行くと、

Simplicity2.6.9公開。細かな修正のみ。と題して、新しいバージョンの「Simplicity」がアップされていました。

 

気になったのは、作者のわいひらさんの以下のコメント。

今は、Cocoonテーマの正式版に向けて開発中なので、ちょっとした不具合修正のみです。

 

「Cocoon？」
「何それ？」
「なんか作ってんの？」

 

というわけで、「Cocoon」でGoogle検索すると、トップに

無料WordPressテーマ「Cocoon（コクーン）」を公開しました - 寝ログ

と出てきました。

寝ログは、わいひらさんの個人サイトです。

 

「Cocoon」を使ってみた

「Cocoon」の正体が知りたい方は、以下オフィシャルサイトにアクセスしてください。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100％GPLテーマです。
wp-cocoon.com

 

私もこのサイトで「Cocoon」の特徴を確認しました。

  • コンテンツの幅がカスタマイズできる
  • ヘッダやアピールエリアにパララックス効果が設定できる
  • テーマ独自のカスタマイズ画面でカスタマイズができる
  • ビジュアルエディターで簡単に吹き出しを挿入できる

などなど、一目で気に入ってしまいました。

何と言っても、作者がわいひらさんというのが安心できます。

 

まだ、正式版ではないので、「ちょいプラ素材」のWordPressのテーマをいきなり「Cocoon」変えるわけにはいきませんが、なる早で使って見たくて、急ぎユーザー登録をし、最新版のVer.0.7.5をダウウンロード。

ローカルPCの環境にさっそく導入してみました。

 

不具合や課題もちらほら

使ってみて、一番困ったのが、

  • 画面上部のグローバルナビにカテゴリを設定すると、カテゴリの説明文が表示されてしまう

といった小さな不具合です。

ただ、この件に関しては、半日ほど試行錯誤して解決策が見つかりました。

 

さらに、新しく追加された便利機能ゆえの悩みも。

  • 「本文上にアイキャッチを表示する」という機能を使うと、もともと、記事ごとに自分で挿入していた画像とダブってしまう
  • 新しく追加された「目次」機能を使うと、自分で追加していた目次とダブってしまう

これは、一つずつ、記事のコンテンツを手直しして行けば済む話です。

 

よし、「Cocoon」に換えよう！

半日そこそこですが、ローカル環境で使ってみて大きな問題もなかったので、「ちょいプラ素材」のWordPressのテーマを換えることに決めました。

「Cocoon」のテーマをアップロードして、「Simplicity」から「Cocoon」にスイッチするのは、いとも簡単な作業です。

ところが、大きな問題が発生していまいました。

 

インデックス画面のサムネイル画像が表示されない

今回発生したトラブルは、インデックス画面で一覧表示されるカードのサムネイル画像に関する問題でした。

しかも、スマートフォンなど、画面サイズが小さいデバイスで閲覧したときだけ発生します。

このトラブルの原因究明と対策に、ほぼ1日かかっていまいました。

 

カード形式を選ぶ

「Cocoon」は、ホームページなどのインデックス画面で記事が一覧表示されるときに、次の7種類のカード形式を選ぶことができます。

  1. エントリーカード
  2. 大きなカード（先頭のみ）
  3. 大きなカード
  4. 縦型カード2列
  5. 縦型カード3列
  6. タイルカード2列
  7. タイルカード3列

 

詳しくは、以下のページを参照してください。

エントリーカードの設定方法（一覧ページのカードの種類）
インデックスページ（一覧ページ）のカードスタイルの見本です。スタイルの変更方法も。
wp-cocoon.com

 

私は、「5．縦型カード3列」を選びました。

 

カードのサムネイル画像の再生成

一つ一つのカードの横幅は、ここで選んだ「カード形式」に加え、別途自分で設定した「コンテンツの幅」（表示画面の幅）で決まります。

なので、これらの設定を変更したときには、カードに表示するサムネイル画像の幅も変わってしまいます。

ということで、「Cocoon」では、以下のページでも、Regenerate Thumbnailsプラグインを使って、サムネイル画像を再生成することを薦めています。

テーマが利用しているサムネイルを再生成して最適化する方法（画像の大きさを揃える）
Force Regenerate Thumbnailsプラグインを用いて、テーマ上のサムネイルを再生成し、画像できるだけ綺麗に表示する方法の紹介です。
wp-cocoon.com

 

私もローカル環境で、サムネイル画像を再生成し、インデックス画面のカードにサムネイル画像が正しく表示されることを確認していました。

 

サムネイル画像がない

WordPressのテーマを「Simplicity」から「Cocoon」に切り替えた後、念のため、スマフォでアクセスして確認すると、トップページの記事一覧にサムネイル画像が全くありません。

まずは、原因を探る必要があります。

この原因究明の流れを「Cocoon」の新機能の吹き出しを使って説明します。

 

あれ？
よく見ると、200ほどある記事のうち、4つほどの記事には、ちゃんとサムネイル画像がついているな。

サムネイル画像の再生成がうまくいってなかったのかな？
もう一度、再生成してみるか？

ダメです。

 

キャッシュの問題かな？

キャッシュをクリアしてみるか。

ダメです。

 

プラグインが悪さをしているかもしれない。

全てのプラグインを無効にしてみよう。

ダメです。

 

インデック画面のHTMLソースを確認してみよう。

あれ？

サムネイル画像が表示されない記事で求められている、
　AAAA-342x192.jpg
というサイズの画像が見つからないぞ！

逆に、サムネイル画像が表示される記事では、

　BBBB-320x180.jpg

というサイズの画像が求められていて、このサイズのサムネイル画像は、ちゃんと生成されているな。

ビンゴです！

 

先に述べたように、自分で選んだ「カード形式」と「コンテンツの幅」によって、最適なサムネイル画像のサイズを計算しているようなのですが、何らかの要因で、最適なサイズのサムネイル画像が生成されていないようです。

 

暫定対策

暫定対策として、「Cocoon」の子テーマのfunctions.phpに、

add_image_size('thumb342', 342, 192, true);

と記入した後、再度、Regenerate Thumbnailsプラグインを実行し、要求される 342 × 192 のサイズのサムネイル画像を生成します。

 

これで、インデックス画面にスマフォでアクセスしたときでも、無事、記事の一覧にサムネイル画像が表示されるようになりました。

 

「ちょいプラ素材」のホームページにスマフォでアクセスした方の中には、

今日は、なんか表示がおかしいわね？

と思われた方もいらっしゃるかもしれません。

ご迷惑をおかけしました。

 

まとめ

サムネイル画像が表示されないというトラブルに見舞われましたが、なんとか、「ちょいプラ素材」のWordPressのテーマを「Simplicity」から「Cocoon」に切り替えることができました。

この不具合については、「Cocoon」の不具合報告フォーラムで、わいひらさんに報告しておきます。

 

また、「Simplicity」には、4年近くお世話になりました。

このテーマの改良とともに、私自身もWordPressやPHP、JavaScriptなどの理解を深めることができました。

本当にありがとうございました。

 

今後、「ちょいプラ素材」は、「Cocoon」を使って記事を書いていきます。

まだ、アイキャッチ画像がダブって表示されたり、一部、未対応のところも残っていますが、引き続き、よろしくお願いします。

 

その後

「Cocoon」の不具合報告フォーラムで報告したところ、わいひらさんが丁寧に対応いただき、無事に解決しました。

 

原因

当初、私は、「Cocoon」のカスタマイズ設定で、

  • コンテンツ幅：1080px
  • カード形式：縦型カード3列

を設定していました。

なので、カードの幅は、

1080px / 3 ＝ 360px

になります。

ただし、カードは、左右それぞれ9pxのpaddingエリアを持っているので、

360px - (9px × 2) = 342px

サムネイル画像の幅は、342pxになります。

 

この後、私は、コンテンツ幅が少し広いことが気になり、

  • コンテンツ幅：800px
  • カード形式：縦型カード3列（変更なし）

の設定に変更しました。

すると、カードの幅は、

800px / 3 ＝ 266.666px

になり、左右8pxのpaddingエリアを差し引いて、サムネイル画像の幅は、

266px - (8px × 2) = 250px

になります。
なお、paddingエリアのサイズは、コンテンツ幅の大小に応じて、若干変更されるようです。

 

コンテンツ幅が1080pxのときも800pxのときも、Regenerate Thumbnailsプラグインを実行すると、それぞれに応じた342pxもしくは250pxの幅のサムネイルが再生成されます。

ところが、最初の設定の際、サムネイル画像の再生成処理を私が途中でキャンセルしたみたいで、投稿によって、342px幅のサムネイル画像があったり無かったりの状態になってしまったようです。

 

HTMLソース

さらにややこしいことに、コンテンツ幅を1080pxから800pxに変更した後も、HTMLソースには、サムネイル画像の<img>タグに

srcset="https://…/AAA-250x141.jpg 250w, https://…/AAA-342x192.jpg 342w"

のように、不要になったコンテンツ幅1080pxのときの https://…/AAA-342x192.jpg 342w の記述が残ってしまいます。

342px幅のサムネイル画像が生成されてない状態で、HTMLにこの記述が残っていると、サムネイル画像が表示されない不具合が起こります（アクセスするデバイスの表示画面解像度によって、不具合が起こらないこともある）。

 

対策

サムネイル画像の再生成にForce Regenerate Thumbnailsプラグインを使うことで解決しました。

このブラグインは、わいひらさんから紹介いただきました。

 

このプラグインを使うと、古いサイズのサムネイル画像をすべて削除した後で、サムネイル画像を再生成するので、必要なサイズのサムネイル画像のみに整理できます。

同時に、HTMLソースの不要な https://…/AAA-342x192.jpg 342w の記述もなくなり、HTML記述とサムネイル画像のサイズの整合性が取れます。

 

ということで、一件落着です。

わいひらさん、ありがとうございました。

 

 

]]> https://vitorec.co.jp/choi-plus-sozai/cocoon%e3%80%80wordpress%e3%81%ae%e3%83%86%e3%83%bc%e3%83%9e%e3%82%92%e6%8f%9b%e3%81%88%e3%81%be%e3%81%97%e3%81%9f/feed/ 0