2022年4月 – ページ 2 – てまりのユニバーサルデザイン

2022年4月20日

ボッチャ全力投球はケガに注意

「ボッチャは運動じゃない。」と妻によく言われます。しかし、甘く見るとケガをするスポーツです。準備運動をしっかりやり、練習内容も安全を考える必要があります。身をもって知りました。

初心者のころは軽い遊び？

日頃の運動不足解消も兼ね、ボッチャを嗜んでいました。

初心者の頃はコントロールが効かず、ボールにただ近づけることを目指す遊びでした。

ゆっくりなテンポで、優しくボールを転がす。

これでは運動不足の解消になっていないという妻の心配（？）があり、「ボッチャは運動じゃない。」と私に言ったのでしょう。

まあ、散歩していた方が、まだ体を動かしているので、否定もできません。

ヒット多用になるとスポーツ！？

スポーツの定義は人それぞれなのですが、個人的にボッチャでスポーツと胸を張って言えるのは、ヒットを多用するレベルからです。

周りも自分も、ボッチャ熟練度が上がっていくと、投球コースをふさがれ、ヒットで邪魔なボールをはじくことが多くなります。

柔らかいボールをはじくときはパワーが必要で、大きく早く振りかぶり、強くボールを転がします。

初心者のころの玉寄せゲームから一転し、激しい動作が入るスポーツになります。

全力投球はケガに注意

ボールを2個以上はじくヒット。戦況を大きく変えるスプラッシュ。

これらは全力でボールを転がします。

練習で強力なヒットを連投していたら、肩を痛めました。

何日か休めば治ると思いますが・・・準備運動せずに全力に近い投球を続けるとは、愚かです。

ボッチャはケガの危険性があるスポーツだと身をもって知れたのは良かったです。

肩を回す、筋を伸ばすなどの準備運動の大切さ。過剰な練習をしないといった計画性。これらがとても重要だと気づけました。

2022年4月19日2022年4月18日

エクセルのグラフをHTMLでアニメーションさせる

エクセルのグラフをSVG書き出し、HTMLに埋め込みます。その際、グラフにアニメーションを付与してみましょう。重たいグラフ用のライブラリを使わず、軽量なコードに実現できます。

線グラフを描画するアニメーション

※確認用にGifアニメをループさせています。

今回は線グラフを左から描画するアニメーションを作りました。

SVGにidを指定

準備として、SVGファイルをコードで開き、アニメーションさせたいパーツにidを指定します。

<path id="line1" d="M946 366 992.033... " stroke="#4472C4" ...>

1	<path id="line1" d="M946 366 992.033... " stroke="#4472C4" ...>

線グラフの線<path>にid=”line1″を指定しました。

パーツを探すときは、stroke=”#4472C4″という色で検索すると、すぐに見つかります。

SVGをJavaScript（jQuery）で埋め込み

続いてidを追記したSVGを、HTMLに埋め込みます。

objectタグを使わず、直接SVGのコードをHTMLに書き込みます。

とはいえSVGのコードは長くてソースの可読性が悪くなります。外部ファイルとして、後から非同期でHTMLに書き込むようにしました。

<div id="graphArea"></div>
<script>
  $("#graphArea").load("img/data.svg svg");
</script>

$("#graphArea").load("img/data.svg svg");

</script>

HTML上にSVGのタグがあれば、直接JavaScriptやCSSで、任意のidを操作することが可能になります。

線を描画するCSSアニメーション

「線を描画するCSSアニメーション」は存在しませんが、破線をアニメーションさせることで、線を描画したように見えます。

<style>
  #line1 {
    stroke-dasharray: 3076px;
    animation:moveLine1 2s;
  }
  @keyframes moveLine1 {
    0% {
      stroke-dashoffset: 3076px;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }
</style>

<style>

#line1 {

stroke-dasharray: 3076px;

animation:moveLine1 2s;

}

@keyframes moveLine1 {

0% {

stroke-dashoffset: 3076px;

}

100% {

stroke-dashoffset: 0;

}

</style>

stroke-dasharrayで破線の間隔を指定します。

線の長さ＝破線の間隔にして、stroke-dashoffsetで破線の開始位置をずらすと、線を描画しているように見えます。

stroke-dasharray、stroke-dashoffsetで指定するpxは、chromeの開発者モードで調べると分かりやすいです。

stroke-dasharrayの値を変えて、ぎりぎり線がすべて描画される数字を使います。

HTML全体のコード

最後に今回のコードの全体です。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>エクセルSVGグラフ読み込み</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  #line1 {
    stroke-dasharray: 3076px;
    animation:moveLine1 2s;
  }
  @keyframes moveLine1 {
    0% {
      stroke-dashoffset: 3076px;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }
</style>
</head>
<body>
  <div id="graphArea"></div>
  <script>
    $("#graphArea").load("img/data.svg svg");

    //JavaScript（jQueryで操作する場合）
    /*$("#graphArea").load("img/data.svg svg", function(){
      //ここに処理
    });*/
  </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>エクセルSVGグラフ読み込み</title>

<style>

#line1 {

stroke-dasharray: 3076px;

animation:moveLine1 2s;

}

@keyframes moveLine1 {

0% {

stroke-dashoffset: 3076px;

}

100% {

stroke-dashoffset: 0;

}

</style>

</head>

<body>

$("#graphArea").load("img/data.svg svg");

//JavaScript（jQueryで操作する場合）

/*$("#graphArea").load("img/data.svg svg", function(){

//ここに処理

});*/

</script>

</body>

</html>

グラフをCSSでアニメーションさせるだけなら、SVGファイルをload()するだけで良いです。

もし、クリックイベントなどを仕込む場合は、load()の第2引数に処理を設定します。

HTMLのグラフ演出は重たい印象がありました。しかし、簡単なアニメーションなら、少ないコードで実現できるようです。

2022年4月18日

エクセルのSVGグラフにviewBox指定

エクセルのグラフをSVG書き出しした後、HTMLにobjectタグで埋め込む場合は、viewBox指定を推奨します。レスポンシブWebに対応できます。

widthとheightをviewBoxに変更

エクセルから書き出したSVGグラフのコードを見てみます。

<svg width="1653" height="993" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden">

1	<svg width="1653" height="993" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden">

デフォルトではsvgタグに「width=”1653″ height=”993″」と幅、高さが指定されています。

この指定があると、ブラウザの幅に応じて可変させるレスポンシブ対応は難しいです。

width、heightの代わりにviewBoxを設定します。

<svg viewBox="0 0 1653 993" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden">

1	<svg viewBox="0 0 1653 993" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden">

viewBoxの値は”x y 幅高さ”となり、”0 0 1653 993″と指定しました。

レスポンシブWeb対応

書き換えたSVGをHTMLで表示してみます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>エクセルSVGグラフ読み込み</title>
</head>
<body>
<object data="img/data.svg" type="image/svg+xml"></object>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>エクセルSVGグラフ読み込み</title>

</head>

<body>

</body>

</html>

objectタグとしてSVGを組み込んだ場合でも、レスポンシブ対応できます。

imgタグではなく、objectタグを使うメリットは、グラフ上の文字列を選択でき、コピペできることです。

ユーザーの使われ方によって、SVGをimgタグにするか、objectタグにするか、使い分けると良いでしょう。

2022年4月17日2022年4月18日

エクセルで書き出したSVGグラフをリサイズ

前回エクセルからSVGグラフを書き出し、HTMLにimgタグで埋め込みました。もし、objectタグで埋め込む場合は、サイズが大きすぎて扱いにくいので、~~リサイズするのが一つの手です~~。

追記訂正：viewBox指定が最良の手だと考えます。

デフォルトだと大きすぎる

前回書き出したSVGグラフは、デフォルトで1653px×993pxありました。

エクセル上でリサイズすると文字が崩れてしまうので、SVGで出力した後にリサイズします。

画像編集ソフトでリサイズ

illustratorなどの画像編集ソフトで、SVGをリサイズします。

私はInkscapeを使って、500px×298pxにリサイズしてみました。

キャンバスも同じサイズにしないと、HTMLに埋め込むときに余計な空白ができてしまいます。

追記訂正：画像編集せず、SVGのコードでviewBox指定が良いです！

2022年4月16日

エクセルのグラフをSVGでHTMLに掲載

HTMLにエクセルのグラフを掲載する際、SVG形式で掲載する方法があります。SVGは容量が小さく、拡大してもキレイに表示できるメリットがあります。

エクセルからグラフのSVG書き出し

エクセルのグラフを右クリックして、「図として保存」を選択。

ファイルの種類で「SVG」を選んで保存。

これだけでエクセルからグラフのSVGを書き出せます。

試しにオープンデータである「新型コロナウイルス新規陽性者数」の2022年3月推移を書き出してみます。

書き出されたSVGはデフォルトだとwidth=”1653″ height=”993″と、大きめに指定されていました。

容量はたった12KBです。軽い！

HTMLにSVGグラフを掲載

ただ掲載するだけなら、imgタグが一番扱いやすいです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>エクセルSVGグラフ読み込み</title>
<style>
  .svgImg {
    width: 100%;
  }
</style>
</head>
<body>
  <img src="img/data.svg" class="svgImg">
</body>
</html>