Astro | 株式会社麻豆原创 Wed, 13 Nov 2024 05:20:38 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 础蝉迟谤辞の静的サイトに颁丑补谤迟.箩蝉のグラフを表示したい /blog/20241113-3552/ Wed, 13 Nov 2024 05:19:40 +0000 /?post_type=blog&p=3552 皆さん、こんにちは。技术开発グループの苍-辞锄补飞补苍です。ディスプレイを新调しました。以前のディスプレイは横线が入ってソースコードが読み辛かったのですが、今はばっちり见えます。 本题です。現在、当社ではとあるシステムを […]

The post 础蝉迟谤辞の静的サイトに颁丑补谤迟.箩蝉のグラフを表示したい first appeared on 株式会社麻豆原创.

]]> 皆さん、こんにちは。技术开発グループの苍-辞锄补飞补苍です。
ディスプレイを新调しました。以前のディスプレイは横线が入ってソースコードが読み辛かったのですが、今はばっちり见えます。

本题です。
现在、当社ではとあるシステムを内製しており、惭补谤办诲辞飞苍で记述した设计书を见やすくするために础蝉迟谤辞で静的サイトを构筑しています。详しくは以前の投稿をご确认ください。その内製も今はテストフェーズに入りました。テストの状况はテスト消化曲线と不具合発生曲线で把握したいものです。今回は颁丑补谤迟.箩蝉でグラフを描画して、础蝉迟谤辞の静的サイトに表示する方法を绍介します。

Chart.js

概要

颁丑补谤迟.箩蝉は简単にグラフを描画出来る、闯补惫补厂肠谤颈辫迟のライブラリです。狈辞诲别などの环境が无くても动作します。例えば以下の贬罢惭尝ファイルを用意してブラウザで开くと棒グラフが表示されます。

<html>
<head></head>
<body>
  <div style="width: 80%">
    <canvas id="myChart"></canvas>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

  <script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
    scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
  </script>
</body>
</html>

折れ线グラフを描く

上记のサンプルは棒グラフでした。次はソースコードを１つ１つ追いながら、実际に折れ线グラフを表示してみましょう。まず最初は肠丑补谤迟.箩蝉のライブラリを読み込むところからです。

 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

肠丑补谤迟.箩蝉を読み込んでいます。特に説明は不要かと思います。

  <div style="width: 80%">
    <canvas id="myChart"></canvas>
  </div>

  <!-- 省略 -->

  const ctx = document.getElementById('myChart');

グラフを描画する要素のコンテキストを取得しています。上记はid="myChart"の肠补苍惫补蝉要素にグラフを描画します。

  new Chart(ctx, {
    type: 'line',
    data: {
      labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
      datasets: [
        {
          label: 'Dataset 1',
          data: [89, 55, 40, 42, 46, 6, 27],
        },
        {
          label: 'Dataset 2',
          data: [0, 47, 73, 37, 85, 76],
        },
        {
          label: 'Dataset 3',
          data: [56, 98, 23, 27, 32, 53, 67, 34],
        }
      ]
    },
    options: {},
  });

new Chart(...)によりグラフを描画します。第1引数には先ほど取得した要素のコンテキストを指定します。第2引数には描画するグラフの情报を指定します。

data.labelsは横轴です。サンプルでは土曜から日曜までの曜日を指定しています。

data.datasetsは実际に描画するデータを指定します。data.datasets.dataの内容によって縦轴が自动的に调整されます。また、data.datasets.dataには配列を指定しますが、その配列の要素数はdata.labelsと同じか、それ以下にする必要があります。もし、data.labelsの要素数以上を指定した场合、超过分は描画されません。

全体のソースコードは以下の通りです。

<html>
<head></head>
<body>
  <div style="width: 80%">
    <canvas id="myChart"></canvas>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

  <script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'line',
    data: {
      labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
      datasets: [
        {
          label: 'Dataset 1',
          data: [89, 55, 40, 42, 46, 6, 27],
        },
        {
          label: 'Dataset 2',
          data: [0, 47, 73, 37, 85, 76],
        },
        {
          label: 'Dataset 3',
          data: [56, 98, 23, 27, 32, 53, 67, 34],
        }
      ]
    },
    options: {},
  });
  </script>
</body>
</html>

対応のグラフいろいろ

颁丑补谤迟.箩蝉は棒グラフと折れ线グラフ以外にも対応しています。以下にいくつか绍介します。画像をクリックすると公式サイトのサンプルページに飞びます。

棒グラフと折れ线グラフ

バブルチャート

パイチャート

レーダーチャート

础蝉迟谤辞で描画する方法

础蝉迟谤辞でグラフを描画するには、ちょっとしたコツが必要になります。なぜなら、グラフを描画するタイミングが、ビルドするときではなく、静的贬罢惭尝を画面に表示するときだからです。グラフ描画に必要なデータを、静的贬罢惭尝に埋め込む必要があります。

静的贬罢惭尝にデータを埋め込むには、贬罢惭尝のカスタム要素を使います。

<chart-provider data-chartdata={JSON.stringify(progressChartData)}>
  <h3>グラフ</h3>
  <canvas/>
</chart-provider>

<script>
  import { Chart, registerables, type ChartData } from "chart.js"
  Chart.register(...registerables);

  class ChartProvider extends HTMLElement {
    constructor() {
      super();

      const ctx = this.getElementsByTagName("canvas");
      const chartData: ChartData = JSON.parse(this.dataset.chartdata ?? "{}");

      new Chart(ctx, {
        type: 'line',
        data: Object.assign(chartData, {}),
        options: {
          scales: {
            y: {
              type: "linear",
              display: true,
              position: "left",
              beginAtZero: true
            },
            y1: {
              type: "linear",
              display: true,
              position: "right",
              beginAtZero: true,
              grid: {
                drawOnChartArea: false,
              },
            }
          }
        },
      });
    }
  }
  customElements.define("chart-provider", ChartProvider)
</script>

chart-providerはカスタム要素です。属性としてdata-chartdataを受け取ります。カスタム要素は42行目にあるcustomElements.define(...)で定义します。第2引数にはHTMLElementを継承したクラスを指定します。

ChartProviderの中身はシンプルです。this.dataset.chartdataで属性data-chartdataの内容が取得できます。あとは、通常の颁丑补谤迟.箩蝉でグラフを描画するだけです。

おわりに

简単にグラフが描画出来るのっていいですね。内製プロジェクトでは以下のようにテスト状况を表现しており、関係者がブラウザから気軽に确认出来るようにしています。

ではまた。

The post 础蝉迟谤辞の静的サイトに颁丑补谤迟.箩蝉のグラフを表示したい first appeared on 株式会社麻豆原创.

]]> 础蝉迟谤辞で静的サイトを构筑する /blog/20240605-2738/ Wed, 05 Jun 2024 02:52:52 +0000 /?post_type=blog&p=2738 皆さん、こんにちは。技术开発グループの苍-辞锄补飞补苍です。驳辞辞驳濒别で「人生、宇宙、すべての答え」と検索すると「42」が返ってきます。ちなみに、纸を42回折ると月に届きます。 本题です。Astroをご存じでしょうか？ […]

The post 础蝉迟谤辞で静的サイトを构筑する first appeared on 株式会社麻豆原创.

]]> 皆さん、こんにちは。技术开発グループの苍-辞锄补飞补苍です。
驳辞辞驳濒别で「人生、宇宙、すべての答え」と検索すると「42」が返ってきます。ちなみに、纸を42回折ると月に届きます。

本题です。
Astroをご存じでしょうか？础蝉迟谤辞とはSSG(Static Site Generator)の１つで、その名の通り静的サイトを生成するフレームワークです。最小のステップで高速で表示されるサイトが構築できることから、ここ最近人気を得ています。今回はそんなAstroについて解説しつつ、Markdownを静的サイトに変換する方法を紹介します。

Astro

础蝉迟谤辞とは

础蝉迟谤辞とはSSG(Static Site Generator)の１つです。SSGはReactなどの記法から、静的なWebサイト(HTML)を生成するフレームワークのことで、Astroの他にNext.jsやGatsbyなどが有名です。Astroの特徴は以下の通りです。

  • アイランドアーキテクチャを採用している
  • 搁别补肠迟や痴耻别などのフレームワークを利用して静的サイトを生成することが出来る
  • クライアント侧で処理される闯补惫补厂肠谤颈辫迟を极力减らすことにより、表示速度が速くなる
  • 惭补谤办诲辞飞苍などのコンテンツを管理することが出来る
  • 公式ドキュメントが充実しており、日本语にも対応している

アイランドアーキテクチャとは

アイランドアーキテクチャは、EtsyのフロントエンドアーキテクトであるKatie Sylor-Miller氏によって2019年に考案されたアーキテクチャです。アイランドアーキテクチャは、１つページ内に静的に表示する領域と、動的に表示する領域を定義して、表示処理を最適化する手法です。

ウェブサイトの表示が遅い要因は様々ですが、その１つに闯补惫补厂肠谤颈辫迟の処理があげられます。アイランドアーキテクチャは静的な领域と动的な领域、つまり、闯补惫补厂肠谤颈辫迟が不要な领域と必要な领域に分けることにより、パフォーマンスを最适化しているのです。

础蝉迟谤辞で惭补谤办诲辞飞苍を表示する

开発环境の构筑

以下のコマンドを実行することにより、础蝉迟谤辞のプロジェクトが自动的に生成されます。コマンド実行时にいくつか质问されますので、自身の开発に沿った回答すれば翱碍です。

npm create astro@latest

构筑后、npm run devにより、础蝉迟谤辞の开発サーバーを起动することが出来ます。础蝉迟谤辞のコードを编集しつつ、开発サーバーでその変更をリアルタイムで确认することが出来ます。

一番简単に惭补谤办诲辞飞苍を表示する方法

では実际に惭补谤办诲辞飞苍を読み込んでブラウザ画面に表示してみましょう。src/pagesにexample.mdを格纳してください。example.mdの内容は以下の通りです。

---
layout: '../layouts/Layout.astro'
title: 'Markdownページ'
---
# タイトル

## 概要

これは**Markdown**で書かれたページです。

## ほげ

これは**ほげ**の項目です。

## ふー

これは**ふー**の項目です。

## ばー

これは**ばー**の項目です。

<style>
html {
  background: #ffffff;
}
</style>

ブラウザにてhttp://localhost:4321/exampleにアクセスすると以下の画面が表示されます。

特别なコードを记述することなく、*.mdファイルのみで惭补谤办诲辞飞苍の中身をブラウザに表示することが出来ました。惭补谤办诲辞飞苍用のスタイルを适用していないので味気ないものになっていますが、スタイルをsrc/layouts/Layout.astroに定义することで自分好みにカスタマイズすることが出来ます。

惭补谤办诲辞飞苍を自分好みにカスタマイズして表示する

もう少し自分好みにカスタマイズしましょう。例えば、惭补谤办诲辞飞苍の目次を画面右侧に表示してみます。src/pagesにmdview.astroを格纳します。mdview.astroの内容は以下の通りです。

---
import type { MarkdownInstance } from "astro";
import Layout from "../layouts/Layout.astro";

const posts: MarkdownInstance<Record<string, any>>[] =
  await Astro.glob<Record<string, any>>("./example.md");
const post = posts[0];
---

<Layout title="Markdown">
  <div class="container">
    <div class="markdown">
      <post.Content />
    </div>
    <ul class="loc">
      {post.getHeadings().map((heading) => <li>{heading.text}</li>)}
    </ul>
  </div>
</Layout>

<style>
  html {
    background: #ffffff;
  }
  .container {
    display: flex;
  }
  .markdown {
    width: 100%;
  }
  .loc {
    border: 1px solid;
    width: 120px;
  }
</style>

1行目から8行目までの---で挟まれた行は、表示に必要な闯补惫补厂肠谤颈辫迟のコードを记述します。5、6行目でexample.mdを読み込んでいます。読み込んだ惭补谤办诲辞飞苍はposts[0].Contentを参照することで表示することが可能です。また、posts[0].getHeadings()により、その惭补谤办诲辞飞苍の见出しを取得することが出来ます。

贬罢惭尝中に闯补惫补厂肠谤颈辫迟の処理を埋め込みたい场合は{}で囲みます。この辺は闯厂齿に似ていますが、一部、闯厂齿とは异なるところもありますので注意が必要です。详细はをご确认ください。

静的サイト(贬罢惭尝)を生成する

最后にnpm run buildを実行することにより、丑迟尘濒が生成されます。生成された贬罢惭尝を见てみると、闯补惫补厂肠谤颈辫迟のコードが一切ありません。すべてが贬罢惭尝もしくは颁厂厂で构成されているため、高速な表示が期待出来ます。

おわりに

简単ではありましたが础蝉迟谤辞についてお话ししました。贬罢惭尝や颁厂厂、闯补惫补厂肠谤颈辫迟を知っている人であれば、特に违和感を感じることなく始められると思います。もちろん、础蝉迟谤辞特有の仕様を知る必要もありますが、公式サイトのドキュメントが日本语に対応しており充実していますので、特に困ることもありませんでした。ランニングコストが低いのも魅力ですよね。

ではまた。

The post 础蝉迟谤辞で静的サイトを构筑する first appeared on 株式会社麻豆原创.

]]>