LaravelのPipelineについて

今回はLaravelのPipelineについて調べてみました。
Laravelの公式ドキュメントには以下のように記されています。

LaravelのPipelineファサードは、一連の呼び出し可能なクラス、クロージャ、またはcallableを通して与えられた入力を
「パイプ」する便利な方法を提供し、各クラスに入力を検査または修正する機会を与え、パイプライン内の次のcallableを呼び出します

簡単にざっくり説明すると「Pipelineに何らかのデータを入れてそれに対して指定したクラスの処理をさせるもの」です。

基本となるPipelineのコードは以下の通りです。

Pipeline::send(/* 処理させたいクラスに渡すデータ */)
    ->through(/* 処理させたいクラスの配列 */)
    ->then(/* 最終処理 */);

処理させたいクラスに渡すデータ
処理させたい対象のデータです。
文字列やQuery、オブジェクトなどなんでも渡せます。

処理させたいクラスの配列
sendメソッドで渡されたデータを処理させたいクラスを以下のように配列形式で指定します。

Pipeline::send(/* 処理させたいクラスに渡すデータ */)
    ->through([
        ClassA::class,
        ClassB::class,
        ClassC::class,
    ])
    ->then(/* 最終処理 */);

ClassA → ClassB → ClassCの順番で処理が実行されます。

最終処理
thenメソッドに実装された処理は必ず実行される処理です。
実行されるタイミングはthroughメソッドの処理が完了した後です。

実装例

class Pipeline
{
    public function handle()
    {
        $string = "abcde";
        $string = Pipeline::send($string)
            ->through([
                SubStr::class,
                AddString::class,
            ])
            ->thenReturn();
        var_dump($string);
    }
}
class SubStr
{
    public function handle($string, $next)
    {
        $string = substr($string, 1, 4);
        return $next($string);
    }
}
class AddString
{
    public function handle($string, $next)
    {
        $string = $string . "123";
        return $next($string);
    }
}

このような実装をすると先にSubStrクラスで2文字目〜4文字のみ取得され、”bcde”が$stringにセットされます。
次にAddStringクラスで”bcde”の後ろに”123″が文字列結合され最終的に「bcde123」が返されます。

以上、Pipelineが何か気になり調べた結果をまとめてみました。

たった1行でローディングアニメーションが実装できるCSSジェネレーター

HTML1行だけで、様々なローディングアニメーションを実装できるCSSジェネレーターを紹介します。
CSS Loaders

よくありそうなシンプルなものから、CSSだけで表現されているとは思えない複雑なものまで、バラエティ豊かに用意されています。

使い方はとても簡単。
HTMLはたった1行です。

<div class="loader"></div>

 
cssは対象をクリックしてコピペするだけ。

中身はこんな感じ。

.loader {
  width: 50px;
  --b: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #514b82;
  -webkit-mask:
    repeating-conic-gradient(#0000 0deg,#000 1deg 70deg,#0000 71deg 90deg),
    radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
  -webkit-mask-composite: destination-in;
          mask-composite: intersect;
  animation: l5 1s infinite;
}
@keyframes l5 {to{transform: rotate(.5turn)}}

 
CSSなので、色を変えるのも簡単です。

AWSの機能について調べてみた

【AWSの機能について調べてみた】

 

 

今回は、awsって沢山のサービスを提供しているということを知ったので、一部ではありますが、機能をまとめていこうと思います。

目次
――――――――――――――――――――――――――――
1 AWSとは
2 各機能について
3 まとめ
――――――――――――――――――――――――――――

1.AWSとは
AWSとは、【Amazon Web Services】の略称で、Amazonが提供しているクラウドサービスのことです。
公式サイト→https://aws.amazon.com/jp/what-is-aws/

2.各機能について
DirectConnect
・AWS Direct Connect は、標準のイーサネット光ファイバケーブルを介して内部ネットワークを AWS Direct Connect ロケーションにリンクします。ケーブルの一方の端はルーターに接続され、もう一方の端は AWS Direct Connect ルーターに接続されています。この接続を使用すると、パブリック AWS サービス (Amazon S3 など) または Amazon VPC への仮想インターフェイスを直接作成し、ネットワークパス内のインターネットサービスプロバイダーをバイパスできます。 AWS Direct Connect ロケーションは、関連付けられているリージョン AWS の へのアクセスを提供します。パブリックリージョンで単一の接続を使用するか、他のすべてのパブリックリージョンでパブリック AWS サービス AWS GovCloud (US) にアクセスできます。

TransitGateway
・Transit Gateway は、仮想プライベートクラウド (VPC) とオンプレミスネットワークを相互接続するために使用できるネットワークの中継ハブです。クラウドインフラストラクチャがグローバルに拡張されるにつれて、リージョン間ピアリングはAWSグローバルインフラストラクチャ AWS データセンター間のすべてのネットワークトラフィックは、物理層で自動的に暗号化されます。

EC2
・Amazon Elastic Compute Cloud (Amazon EC2) は、Amazon Web Services (AWS) クラウドでオンデマンドでスケーラブルなコンピューティング能力を提供します。Amazon EC2 を使用するとハードウェア コストが削減されるため、アプリケーションをより迅速に開発および展開できます。Amazon EC2 を使用すると、必要な数の仮想サーバーを起動したり、セキュリティとネットワークを構成したり、ストレージを管理したりできます。月次または年次プロセスや Web サイト トラフィックの急増など、コンピューティング負荷の高いタスクを処理するために、容量を追加 (スケールアップ) できます。使用量が減ったら、容量を再度削減 (スケールダウン) できます。

RDS
・Amazon Relational Database Service (Amazon RDS) は、AWS クラウドでのリレーショナル データベースのセットアップ、運用、拡張を容易にする Web サービスです。業界標準のリレーショナル データベースにコスト効率に優れたサイズ変更可能な容量を提供し、一般的なデータベース管理タスクを管理します。

EFS

・Amazon Elastic File System (EFS) は、サーバーレスで完全に伸縮自在なファイルストレージを提供するように設計されており、ストレージ容量とパフォーマンスをプロビジョニングまたは管理しなくても、ファイルデータの共有ができる仕組みになっています。AWS のサービスおよびオンプレミスリソースで使用でき、アプリケーションを中断することなくオンデマンドでペタバイトまで拡張できるように構築されています。

CloudWatch

・Amazon CloudWatch は、Amazon Web Services (AWS) リソースと、AWS で実行されているアプリケーションをリアルタイムでモニターリングします。CloudWatch を使用してメトリクスを収集し、追跡できます。メトリクスとは、リソースやアプリケーションに関して測定できる変数です。
CloudWatch のホームページには、使用している AWS の各サービスに関するメトリクスが自動的に表示されます。さらに、カスタムダッシュボードを作成してカスタムアプリケーションのメトリクスを表示したり、選択したメトリクスのカスタムコレクションを表示したりできます。
メトリクスを監視し、しきい値を超過したときに通知を送信したり、モニターリングしているリソースを自動的に変更したりするアラームを作成できます。例えば、Amazon EC2 インスタンスの CPU 使用率およびディスク読み取り/書き込みをモニターリングし、そのデータを基に、増加する負荷を処理する追加のインスタンスを起動すべきかどうかを判断します。また、このデータを使用して、十分利用されていないインスタンスを停止することで、費用を節約することができます。
CloudWatch により、システム全体のリソース使用率、アプリケーションパフォーマンス、およびオペレーションの状態において可視性を得ることができます。

Route 53
・Amazon Route 53 は、可用性と拡張性に優れたドメインネームシステム (DNS) ウェブサービスです。Route 53 を使用すると、ドメイン登録、DNS ルーティング、ヘルスチェックの 3 つの主要な機能を任意の組み合わせで実行できます。

WAF
・WAF(Web アプリケーションファイアウォール)とは、Web アプリケーションの通信をフィルター、監視、ブロックするためのソフトウェアまたは、ハードウェアのセキュリティ対策です。一般のファイアウォールや IDS/IPS との違いは、アプリケーションレベルで通信の中身を解析し、特定の条件にマッチする通信を検知・遮断する点です。WAF の代表的な用途には、SQL インジェクション、クロスサイトスクリプティングなど、アプリケーションの脆弱性を悪用した攻撃の遮断やアプリケーション層の DDoS 対策、不正なボットによるアクセスの遮断などがあります。

S3
・Amazon Simple Storage Service (Amazon S3) は、業界をリードするスケーラビリティ、データ可用性、セキュリティ、パフォーマンスを提供するオブジェクト ストレージ サービスです。あらゆる規模と業種のお客様が Amazon S3 を使用して、データ レイク、Web サイト、モバイル アプリケーション、バックアップと復元、アーカイブ、エンタープライズ アプリケーション、IoT デバイス、ビッグ データ分析など、さまざまなユースケースで任意の量のデータを保存および保護できます。Amazon S3 には管理機能が用意されており、特定のビジネス、組織、コンプライアンスの要件を満たすようにデータへのアクセスを最適化、整理、構成できます。

3.まとめ
AWSには、今回の記事でまとめたサービス以外にもまだまだあります。
気になる方はご自身でも調べてみてはどうでしょうか。

【Laravel 11について】

今回は、2024年3月12日にリリースされた、Laravelのバージョン11について軽くまとめていきたいとおもいます。
公式サイト:https://readouble.com/laravel/11.x/ja/

目次
――――――――――――――――――――――――――――
① 変更点は?
② まとめ
――――――――――――――――――――――――――――

①変更点は?
・まず、welcomeページが大きく変わりました!!
※黒と赤がベースとなり、カッコ良くなっています。

【旧】

【新】

・ディレクトリ構造の変化
Laravel 11では、開発効率を高めるためにディレクトリ構造が一新されました。この変更により、プロジェクトファイルの構成がシンプルになり、以前のLaravelバージョンに含まれていた定型的なコードが削減されました。

【旧】
app
┣ Console
┣ Exceptions
┣ Http
┣ Models
┗ Providers
bootstrap
┣app.php
┗cache
artisan

【新】
app
┣ Http
┣ Models
┗ Providers
bootstrap
┣app.php
┗cache
artisan

②まとめ
・このようにLaravel 11では開発者の生産性やアプリケーションのパフォーマンスを引き上げるいくつもの革新的な機能が導入されており、カスタムが自由にやりやすくなっております。まだリリースされたばっかりなのでこらから修正も沢山はいるかと思いますが、皆さんも使ってみてはいかがでしょうか?
以上、Laravel 11についてでした。

HTMLのタグ1つだけで100種類のツールチップを実装できるCSSジェネレーター

タグ1つだけでcssをコピペするだけで、100種類のツールチップを実装できるジェネレーターを紹介します。
CSS Generators: Tooltips & Speech Bubbles

シンプルなものからポップなものまで、しっぽの形や位置が違う100種類が用意されています。


使い方はとても簡単。
HTMLはたった1つのタグを記述するだけです。

<div class="tooltip">Your text content</div>

 
cssはツールチップをクリックしてコピペするだけ。

中身はこんな感じ。

.tooltip {
    color: #fff;
    font-size: 18px;
    max-width: 28ch;
    text-align: center;
}
.tooltip {
    /* triangle dimension */
    --b: 2em; /* base */
    --h: 1em; /* height */
    --p: 50%; /* triangle position (0%:left 100%:right) */
    padding: 1em;
    clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
      min(100%,var(--p) + var(--b)/2) 100%,
      var(--p) calc(100% + var(--h)),
      max(0%  ,var(--p) - var(--b)/2) 100%);
    border-image: fill 0//var(--h)
      conic-gradient(#CC333F 0 0); /* the color */
}

 
上にあるスライダーを移動すると、好きな位置にしっぽを配置できます。

とても簡単ですので、活用してみてはいかがでしょうか。

HTTPステータスについて

今回は、Webサイトを閲覧しているときに404のエラーに遭遇した時、他の番号はどんなのがあるんのかな?と疑問に思ったため、【HTTPステータス】についてまとめていこうと思います。

 

目次

――――――――――――――――――――――――――――

  1. HTTPステータスとは
  2. ステータスコード一覧
  3. まとめ

――――――――――――――――――――――――――――

 

 ①HTTPステータス とは

HTTPレスポンスに含まれるWebサーバーの処理結果を表現する3桁の数字のことを指します。3桁の数字は「処理が成功した」、「リダイレクト(転送)がかかっている」、「エラーがある」、などさまざまな意味を持っています。

・100番台(Informational):処理中

HTTPステータスコード 意味
100 Continue リクエスト継続可能
101 Switching Protocols プロトコル切り替え
102 Processing 処理中
103 Early Hints 早期に予想されるヘッダを伝達

②ステータスコード一覧

・200番台(Success):成功

HTTPステータスコード 意味
200 OK リクエスト成功
201 Created リクエストが成功し、リソースの作成が完了
202 Accepted リクエストは受理されたが、まだ実行されていない
203 Non-Authoritative Information オリジナル以外の情報を含み信頼できない
204 No Content リクエストに対して送信するコンテンツがない
205 Reset Content リクエストのリセットを伝達
206 Partial Content 一部のリクエストが成功

 

・300番台(Redirection):リダイレクト

HTTPステータスコード 意味
300 Multiple Choice リクエストに対し複数のレスポンスがある
301 Moved Permanently URLが永遠に変更されたことを示す
302 Found URLが一時的に変更されたことを示す
303 See Other リクエストに対するレスポンスが別URLにある
304 Not Modified リクエストしたリソースは更新されていない
307 Temporary Redirect 一時的なリダイレクト(302とほぼ同じ)
308 Permanent Redirect 恒久的なリダイレクト(301とほぼ同じ)

 

・400番台(Client errors):クライアントエラー

HTTPステータスコード 意味
400 Bad Request リクエストが無効
401 Unauthorized 認証が必要
403 Forbidden クライアントにアクセス権がない
404 Not Found リソース・ページが存在しない
410 Gone リソース・ページが恒久的に削除された
411 Length Required リクエストにContent-Lengthヘッダーがない
429 Too Many Requests 一定時間内の大量リクエストによる拒否

 

・500番台(Server errors):サーバーエラー

HTTPステータスコード 意味
500 Internal Server Error サーバー内部エラー
502 Bad Gateway ゲートウェイとして動作するサーバーが無効なレスポンスを受け取った
503 Service Unavailable サーバーの過負荷やメンテナンスにより利用不可

③まとめ

HTTPステータスコードは大きく分けると100番台、200番台、300番台、400番台、500番台の5つに大別できる。

100番台:情報処理中であるということを示すHTTPステータスコード

200番台:通信が成功したことを示すHTTPステータスコード

300番台:リダイレクト(転送)がおこなわれたことを示すHTTPステータスコード

400番台:クライアント側でエラーが起きていることを示すHTTPステータスコード

500番台:サーバー側でエラーが起きていることを示すHTTPステータスコード

 

以上でHTTPステータスについて でした~。 

PHPにおけるシングルトンについて

はじめに

PHPのコードを色々触っている時に、シングルトンなるものに出会ったのでまとめます!

今回のシングルトンというものは、デザインパターンの一つです。
そのために、まずはデザインパターンについて、軽く紹介させていただきます!

デザインパターンとは

過去のソフトウェア設計者が発見し編み出した設計ノウハウを蓄積し、名前をつけ、再利用しやすいように特定の規約に従ってカタログ化したものである。引用元(Wikipedia)

プログラミングには、この場合はこの書き方が正解。というようなものがいくつかあります。そう言ったものをデザインパターンと呼びます。
その中の一つがシングルトンパターンです。

シングルトンパターンとは

とあるクラスのインスタンスを2つ以上作成できないようにし、どのクラスからアクセスしても同じインスタンスを参照されることを保証します。

1つしか作成できないように強制するような機能というような感じです。

設計者が「1箇所以外から呼び出したくない!」と考えていても、別の箇所から呼び出し可能であれば、設計者の意図をくみ取れないビギナーズが遠慮なく複数生成することがありますよね?(私がその中の1人です…汗)

この複数生成を防ぐためにあるのが、シングルトンです。

通常であれば、複数のインスタンスを作成することができるが、インスタンス作成を1つのみにしたい場合に使用します。

Q:いくつもインスタンスを作成したくない場合ってどんな状況?

設定管理

アプリケーションの設定情報を保持するクラスは、通常は一つのインスタンスだけで十分です。
設定情報はアプリケーション全体で共有されるため、複数のインスタンスを持つと各データの一貫性が失われる可能性があります。

データベース接続

データベース接続は、リソースを多く消費して、複数の接続を開くとパフォーマンスが低下する可能性があります。
シングルトンを使うことで、アプリケーション全体で一つのデータベース接続を共有し、リソースの使用を効率化できます。

ロギング

ログを記録するクラスは、アプリケーション全体で一つだけあれば充分です。
シングルトンを使用すると、ログの記録に一貫性が保たれ、パフォーマンスの問題を避けることができます。

ハードウェアインターフェースの管理

ハードウェアリソース(プリンターなど)へのアクセスを管理する場合、シングルトンは一つのインスタンスを通じてリソースを共有し、競合することを防ぎます。

キャッシュ

データキャッシュやオブジェクトキャッシュのようなリソースは、アプリケーション内で一貫性と効率を保つために、通常は単一のインスタンスで管理されます。

複数のインスタンスが存在すると、データの整合性の問題や無駄なリソースの使用、パフォーマンスの低下などさまざまな問題が発生します。
シングルトンは、これらの問題を解決する効果的な方法です。
ですが、使用する際にはその影響範囲と制約を理解して適切に利用できるよう意識することが大事です。

【Laravelでcronを実装してみた!】

今回は、特定の処理を決まった時間に定期的に実行したいと思い。
Laravelのcron機能を実装してみたので、その備忘録も兼ねて、まとめていきたいと思います。
(Laravelのscheduleクラスを利用しております。)
https://readouble.com/laravel/10.x/ja/scheduling.html
※今回のLaravel バージョンは10です。

目次
――――――――――――――――――――――――――――
① 「cron」とは
② 基礎
③ 発展
④ まとめ
――――――――――――――――――――――――――――

①『cron』とは
cronとは、「定期的にタスクを自動実行するための機能」です。
「クーロン」と読みます。cronを利用すると時間を指定して、あらかじめ決まった時間にタスクを実行してくれます。

以下、「cron」の使用例です。
例)毎分ごとに特定のディレクトリを参照し、ファイルを読み込みたい。
例)日付が変わるタイミングで特定の処理をしたい。
例)毎月初めにステータスをリセットしたい。

②基礎
[1]まずは実行するプログラムを作成します。
・Laravelのコマンドでファイルを作成します。
php artisan make:command SendEmails

上記のコマンドにより、Commandsディレクトリにファイルが作成されます。
project
├─ app
│ ├─ Console
│ │ ├─ Commands
│ │ │ └─ SeendEmails
│ │ ├─ Kernel.php

[2]つぎにファイルを追記していきます。
・「$signature」変数にコマンド名を格納します。
例)protected $signature = ‘command:sendEmails’;

・「$description」変数に処理の内容を格納します。
例)protected $description = ‘メールを配信する。’;

・「handle()」メソッド内に処理を記載します。
例)public function handle() {

{
ここにしたい事を書く。
※今回は割愛します。
}

以上の手順にて、実行するプログラム(コマンド)を作成することができます。

③発展
基礎にてコマンドを作成したので、発展では定期的に実行できるようにタスクスケジュールをしていきましょう。

[1] Kernelファイルにスケジュールを記載する。
・ConsoleフォルダにあるKernel.phpファイルに追記します。
project
├─ app
│ ├─ Console
│ ├─ Commands
│ │ └─ SeendEmails
│ ├─ Kernel.php

・Kernal.phpの$commandsに追記する。
例)protected $commands = [
\App\Console\Commands\SendEmails::class,
];

・Kernal.phpのschedule()メソッドにてスケジュールを指定できる。
例)protected function schedule(Schedule $schedule)
{
$schedule->command(‘command:sendEmails’)->everyTenMinutes();
}

以上の設定にて、10分ごとにsendEmailsコマンドを実行するように設定することができます。

[2] スケジュールの種類

メソッド 説明
cron('* * * * *');
カスタムcronスケジュールでタスクを実行
everySecond();
毎秒タスク実行
everyTwoSeconds();
2秒毎にタスク実行
everyFiveSeconds();
5秒毎にタスク実行
everyTenSeconds();
10秒ごとにタスク実行
everyFifteenSeconds();
15秒毎にタスク実行
everyTwentySeconds();
20秒ごとにタスク実行
everyThirtySeconds();
30秒ごとにタスク実行
everyMinute();
毎分タスク実行
everyTwoMinutes();
2分毎にタスク実行
everyThreeMinutes();
3分毎にタスク実行
everyFourMinutes();
4分毎にタスク実行
everyFiveMinutes();
5分毎にタスク実行
everyTenMinutes();
10分毎にタスク実行
everyFifteenMinutes();
15分毎にタスク実行
everyThirtyMinutes();
30分毎にタスク実行
hourly();
毎時タスク実行
hourlyAt(17);
1時間ごと、毎時17分にタスク実行
everyOddHour($minutes = 0);
奇数時間ごとにタスク実行
everyTwoHours($minutes = 0);
2時間毎にタスク実行
everyThreeHours($minutes = 0);
3時間毎にタスク実行
everyFourHours($minutes = 0);
4時間毎にタスク実行
everySixHours($minutes = 0);
6時間毎にタスク実行
daily();
毎日深夜12時に実行
dailyAt('13:00');
毎日13:00に実行
twiceDaily(1, 13);
毎日1:00と13:00に実行
twiceDailyAt(1, 13, 15);
毎日1:15と13:15に実行
weekly();
毎週日曜日の00:00にタスク実行
weeklyOn(1, '8:00');
毎週月曜日の8:00に実行
monthly();
毎月1日の00:00にタスク実行
monthlyOn(4, '15:00');
毎月4日の15:00に実行
twiceMonthly(1, 16, '13:00');
毎月1日と16日の13:00にタスク実行
lastDayOfMonth('15:00');
毎月最終日の15:00に実行
quarterly();
四半期の初日の00:00にタスク実行
quarterlyOn(4, '14:00');
四半期の4日の14:00に実行
yearly();
毎年1月1日の00:00にタスク実行
yearlyOn(6, 1, '17:00');
毎年6月1日の17:00にタスク実行
timezone('America/New_York');
タスクのタイムゾーンを設定

④まとめ
このようにLaravelでは、スケジュール機能にてcron機能を実装することができます。
とても便利な機能なので、ぜひ使用してみてはいかがでしょうか。

PANTONE COLOR OF THE YEAR 2024はPeach Fuzz(ピーチファズ)

PANTONEからカラーオブザイヤー2024が発表されました。
PANTONE COLOR OF THE YEAR 2024

2024年のトレンドカラーは「PANTONE 13-1023 Peach Fuzz(ピーチファズ)」。
ピンクに近い彩度が低めのオレンジ色ですね。
この数年間は彩度の低い、いわゆる「くすみカラー」が選ばれています。

PANTONEのCOLOR OF THE YEAR、Peach Fuzz 13-1023 は、自分自身と他人を育てたいという私たちの願望を表現しています。ビロードのような優しいピーチトーンで、すべてを包み込むスピリットが心、体、魂を豊かにします。
親密さとつながりに対する私たちの生来の憧れを反映する色合いを求めて、私たちは暖かさとモダンなエレガンスを備えた色を選びました。思いやりの心に共鳴し、触覚的な抱擁を提供し、若さと時代を超越したものを簡単に橋渡しする色合い。

カラーデータ

HEX #FFBE98
sRGB 255, 190, 152
LAB 83.16, 22.40, 30.15

Photoshopのカラーピッカーではこんな感じです。

PANTONE CONNECT

Peach Fuzzを元にしたカラーパレットやシェードも用意されています。
PANTONE CONNECT(要会員登録)

Webシステムにて印刷のプレビュー画面を表示させ方法について

今回は、Webシステムで動的な情報を印刷プレビュー画面にて表示させる事があったのでその備忘録としてまとめたいと思います。

目次
――――――――――――――――――――――――――――
① 開発環境
② 実装方法
③ まとめ
――――――――――――――――――――――――――――

①開発環境
※今回の機能は特段、開発環境に依存は無い為、簡潔に記載いたします。
・Laravel
・JQuery
・Bootstrap

 

②実装方法
・まずはお好みで画像を用意します。

<canvas id="canvas" class="test_image"></canvas>

・次は以下の2つのJavaScriptを読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/print-js/1.6.0/print.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

・次にボタンとスクリプトを設置します。
【button】

<a id="print" class="btn btn-default"></a>印刷

【javascript】

$('#print').on('click', (e) =&gt; {
html2canvas($('#modal_plot .modal-body')[0], {scale: 3}).then(canvas =&gt; {
var myImage = canvas.toDataURL("image/png");
printJS(myImage, 'image');
});
});

 

③まとめ
・今回は、Webシステムで動的な情報を印刷プレビュー画面にて表示させる方法についてまとめてみました。
公開されているJavaScriptのライブラリを使用すると様々なことを実装することができます。
今後も色々と調べていきたいですね。