chart.js 4.2で時系列のグラフを書く（日付を扱うアダプタを指定必要）

投稿日:2023年2月5日作成者: まつもと

chart.js 4系で、ポンと動くサンプルがWEB上に無かったので上げておきます。
chart.jsがバンドル版じゃない場合に、日付を扱うアダプタをちゃんと入れておかないと動かないサンプルプログラムが多いようです。（そんなの当たり前だろう、という事なのかもしれませんが、chart.js2系はmoment　がデフォルトで入っているからポンと動くでの違いとして。）

日付のアダプタは下記から選べます。

https://github.com/chartjs/awesome#adapters

上記ページからリンクしたらgithubページに各アダプタのCDNのURLがあります。
moment　が推奨されてないという情報が増えているので、サンプルプログラムでは、date-fnsにしています。
（アダプタ使わずに Dataオブジェクト指定、フォーマットは自前でやるなど、javascriptネイティブで動作させる、という方法もありそうですが、、詳細調査未。）

※ソースは、とりあえず動く適当なものです。

<<span class='wp_keywordlink'><a href="https://blog.cybercube.co.jp/category/html%E3%83%BBcss" title="html">html</a></span>>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.min.js"></script>
<!-- アダプタ -->
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
</head>
<body>
<!-- グラフ描画エリア -->
<canvas id="myChart" ></canvas>
<!-- 以下、スクリプト -->
<script>

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

    var values =[
        {x:"2020-02-01",y:100},
       {x:"2020-02-02",y:200},
       {x:"2020-02-03",y:300},
       {x:"2020-02-4",y:400},
       {x:"2020-02-07",y:200},
       {x:"2020-02-14",y:600}
];

    var dlg_goods_detail_chart1 = new Chart(ctx, {
        type: "line",
        data: {
          datasets: [{
            label: "値1",
            fill: false,
            borderColor: 'rgba(0, 0, 255, 0.5)',
            lineTension: 0.1,   //曲線にする度合
            data: values,
          }],
        },
        options: {
          spanGaps: true,   //点をつなげる場合
          scales: {
            x: {
              type: 'time',
              time:{
                unit: 'week',    //週に線
                displayFormats: {
                    week: 'yyyy-MM-dd'
                }
              },

            }
          }
        }
      });

</script>
</body>
</<span class='wp_keywordlink'><a href="https://blog.cybercube.co.jp/category/html%E3%83%BBcss" title="html">html</a></span>>

<html>

<head>

</head>

<body>

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

var values =[

{x:"2020-02-01",y:100},

{x:"2020-02-02",y:200},

{x:"2020-02-03",y:300},

{x:"2020-02-4",y:400},

{x:"2020-02-07",y:200},

{x:"2020-02-14",y:600}

];

var dlg_goods_detail_chart1 = new Chart(ctx, {

type: "line",

data: {

datasets: [{

label: "値1",

fill: false,

borderColor: 'rgba(0, 0, 255, 0.5)',

lineTension: 0.1, //曲線にする度合

data: values,

}],

options: {

spanGaps: true, //点をつなげる場合

scales: {

x: {

type: 'time',

time:{

unit: 'week', //週に線

displayFormats: {

week: 'yyyy-MM-dd'

}

});

</script>

</body>

</html>

docker コンテナを停止できない場合の対処方法

投稿日:2022年12月4日作成者: まつもと

コンテナ内での処理が重いとかエラー等で、コンテナをstop もbashでコンテナの操作もできない場合、そのコンテナだけを再起動したい時があります。

「docker コンテナ　停止できない」等で検索すると、最終的には「dockerやサーバー自体を再起動するしかない」という情報が多いのですが、あきらめないでください。
「複数コンテナが動いているので、dockerの再起動は避けたい」という場合の対処方法をご紹介します。

①docker ps でコンテナIDを確認

②プロセスIDを確認。
ps aux | grep コンテナID
※コンテナの使い方や状況により、プロセスが複数あったり、可変のプロセスIDがあります。何回か実行して固定のプロセスID（固まっているプロセス）だけ削除したらOKです。

③プロセスをkill
kill -9 プロセスID
※②で複数ある場合は、複数実行。

④コンテナをストップ
docker stop コンテナID

日本語サイトでは、上記の手法を見つけきれませんでした。
英語で日本以外のサイトも検索するって大事ですね。
では。

Edgeで指定可能なURLの最大長・制限【2022年10月調査】

投稿日:2022年10月2日作成者: まつもと

Edgeで指定可能なURLの最大長について、IEと同じように「2083文字」という情報が多いですが、結構情報が古い。。。
Chromium版（＝簡単に言うと、Chromeと内部が一緒）になってからはどうなの？と思って調査しました。

結果、2022年10月1日時点の最新バージョンEdgeで、100万文字以上OKでした！

調査環境：
WIn10 Edge ver 105.0.1343.53 （64bit）

適当なプラグラムですが、調査用ソースを張っておきます。

<<span class='wp_keywordlink'><a href="https://blog.cybercube.co.jp/category/html%E3%83%BBcss" title="html">html</a></span>>
<body>
<br />
取得したURLの長さ：
<input type="text" id="url_len"><br />
<br />
設定するURLパラメータの文字数：
<input type="text" id="param_len"><br />
<br />
<input type="button" value="リダイレクト実行" onclick="redirectA()"><br />
<br />

<script>

var ele = document.getElementById("url_len");
ele.value=  location.href.length

function redirectA(){

	var param = 'a';

	var param_len = document.getElementById("param_len");

	location.href="./url_len.html?"+param.repeat(param_len.value);

}
</script>
</body>
</html>

<html>

<body>

<br />

取得したURLの長さ：

<br />

設定するURLパラメータの文字数：

<br />

<br />

var ele = document.getElementById("url_len");

ele.value= location.href.length

function redirectA(){

var param = 'a';

var param_len = document.getElementById("param_len");

location.href="./url_len.html?"+param.repeat(param_len.value);

}

</script>

</body>

</html>

EdgeでIEモードが正常に動作しない場合

投稿日:2022年6月15日作成者: まつもと

「Win7でどうしても，EdgeのIEモードで動作させないといけない。けど、IEモードでクッキーが別ページへ維持されない、正常に動作しない。」
など、一般的なIEモード設定でうまくいかない場合、下記が一番丁寧で分かりやすいです。

EZ net様サイト：

https://www.ez-net.com.cn/column/qa/7367/

WPプラグイン「Smash Balloon Social Photo Feed」の有料版「instagram-feed Pro」について

投稿日:2022年2月7日作成者: まつもと

WP無料プラグイン「Smash Balloon Social Photo Feed」では機能が足りず、有料版の「instagram-feed」を試しました。（2022/2/7現在の情報となります。）

■公式サイト

https://smashballoon.com/

■free版と機能的な違いの所感
・無料版とまったくインターフェイスが異なり、GUI上で設定が出来て高機能。
※細かい機能の違いは公式サイト参照。
・無料版で使えなかったショートコードの属性を色々と使えるようになって、そこで細かく抽出データを指定できるのかと思いましたが、管理画面のGUIメインで設定する、という感じです。
（ショートコードで細かく指定する方法は未調査。
参考：https://smashballoon.com/doc/instagram-feed-features-pro-vs-free/?instagram）
■表示できる主な情報
下記、画面がわかりやすい。

User timeline:接続したインスタアカウントで投稿した記事を表示
（さらにハッシュタグ等で絞り込み可）
Public Hashtag:一般公開されている記事から、ハッシュタグを指定して記事を表示できる。
（さらにハッシュタグ等で絞り込み可　と思います。）
※インスタのビジネスアカウント必須
Tagged posts：自分がタグ付けされた投稿を表示
（さらにハッシュタグ等で絞り込み可）
※インスタのビジネスアカウント必須

インスタのビジネスアカウントというのが、なかなかの曲者。
facebookアカウントと連携が必要。
無期限アクセストークンの発行も結構な手間。

■価格について

https://smashballoon.com/instagram-feed/pricing/

1年間、updateとプロサポートが受けられるライセンス。
1年経過してもサイト上で利用可能ですが、WPやインスタグラムAPI仕様変更等により動作しなくなる可能性があるので要検討かと思います。
（1年経過してもサイト上で利用可能という事は、価格ページ一番の「How does annual billing work?」に書かれています。わかりにくい；）
※購入後、購入すたクレジットカードからサブスクリプション設定がされていて、自動更新される設定になっていますので、自動更新したくない方は自動更新をキャンセルしてください。（かなり何回もキャンセルを引き止めるよな画面になりますが、がんばるとキャンセルできます。）

SNSの種類毎に追加料金が必要（Facebookフィードに対応する機能でプラス、等）。
私が見た時には割引、セット購入割引が有りました。

pro版も高機能で便利なプラグインなので、良いものには、ちゃんとお金を払って、しっかり有効活用するかた向けなのかな、という感想です。

サイバーキューブ開発メモ

ホームページ作成・システム開発メモ。

作成者アーカイブ: まつもと

chart.js 4.2で時系列のグラフを書く（日付を扱うアダプタを指定必要）

docker コンテナを停止できない場合の対処方法

Edgeで指定可能なURLの最大長・制限【2022年10月調査】

EdgeでIEモードが正常に動作しない場合

WPプラグイン「Smash Balloon Social Photo Feed」の有料版「instagram-feed Pro」について

関連記事:

関連記事:

関連記事:

関連記事:

関連記事: