「CardPrint.htm」

編集：2024.10.03 by T.A.

Webアプリケーション

カード印刷

→Web

CardPrint

CardPrint は、HTML記述のカードデータを１ページ文書に組み込んで印刷するための物です。

ということで、HTMLがわからないと、取り扱いができない…かもしれません。

以前は、カードに応じた小さい用紙に印刷していたのですが、時代経過により、現代ではプリンター機器が小さい用紙を給紙できないのが殆どのようです。

そこで、通常の A4 などの用紙に効率よく印刷できるようにした CardPrint を作成しました。

カードデータ

HTML形式です。基本、HTML5レベルです。他レベルでは不明です。表示するブラウザーが許す限り、HTML4レベルでも可能かもしれません。

HTMLに利用可能なファイルは、CSS、スクリプト、画像が基本でしょう。

カードデータは、画像は別ファイルとなります。

CSS、スクリプトファイルは別ファイルにも出来ます。

カードデータとしては、CSSとスクリプトは、HTMLファイルに内包型／分離型の何れも取り扱いが可能です。または混在も可能です…「CSSだけ分離」など。

カードデータの編集…CSSとスクリプトとデータ本文はテキスト形式なので、テキストエディターが有れば編集出来ます。画像データはそれなりの編集ソフトが必要となります。

カードデータの編集

CSS、スクリプト、データ本体も、基本的にテキストエディターで作成・修正します。

ワープロソフト「一太郎」での編集画面。⇒

最初の作成は、まっさらな状態から作成し、ファイル保存時に「テキスト形式」を選択し、文字コードと拡張子を指定して保存します。

読み込む場合は、ファイル読み込み時に「テキスト形式」を選択してから、文字コードを指定して読み込みます。

文字コードは「UTF-8」で行います（HTMLの記述指定（「<META charset="utf-8">」など）に合わせます）。

ブラウザー「Edge」で表示したところ。⇒

各部の説明

「用紙」：「余白」…

印刷用紙のサイズを指定します。

「データファイル指定」

「BASE」：

カードデータの基本のURLを指定します。

CSS、スクリプト、画像などは通常は相対アドレス指定なので、この記述が必要となります。それらが絶対アドレス指定の場合は不要です。

記述例：「C:\Users\○○○\OneDrive\ドキュメント\カード印刷\ねじ類/」

URLはエクスプローラーの①の部分で得られる内容、＋、「/」です。

「CSS」：

カードデータ本文のHTML用のスタイルシートファイルです。

ファイルの拡張子は通常「css」です。

文字コードはカードデータ本文と同じにします。

このファイルを更新した場合、解除で解除して、再度ファイルを指定してください。

「JavaScript」：

カードデータ本文のHTML用のスクリプトファイルです。内容はJavaScriptです。

ファイルの拡張子は通常「js」です。

文字コードはカードデータ本文と同じにします。

このファイルを更新した場合、解除で解除して、再度ファイルを指定してください。

「データ本文」：

カードデータ本文のHTMLファイルです。

ファイルの拡張子は通常「html」「htm」です。

文字コードは、HTML5レベルで、基本「UTF-8」です。

このファイルを更新した場合、解除で解除して、再度ファイルを指定してください。

「データ表示」

読み込んだカードデータの表示操作を行います。

簡易に検索をすることも可能です。

表示したカードデータは［文書に配置］で配置（画面左側の用紙表示部分）できます。

文書の配置を解除するには、配置した物をクリックして出てくる［削除］をクリックしてください。

配置したカードデータが用紙をはみ出ることがあります。そのチェックはしていませんのでお気を付けください。

カードデータの読み込み方

「BASE」を記述する（分離型の場合）。
「CSS」を指定する（分離型の場合）。
「JavaScript」を指定する（分離型の場合）。
「データ本文」を指定する。

これで読み込みに成功したら、データファイル指定部の下部で操作します。

データを更新した、などで再度読み込みたい場合は、解除をしてから再度ファイルを指定してください。これは現在のHTML仕様によるものです（ブラウザー「Edge」によりテストの結果）。

データ表示と検索

「データNo.」が表示されます。データの番号です。ここで入力すれば変更も可能です。

データ番号を更新する、<<<>>>があります。

そして文書に配置する、文書に配置があります。

「検索」は、１語の検索です。検索文字列の前後空白は削除されて検索文字となります。途中の空白はそのまま検索文字の一部となります。

「区別」は、「半角英文字の大文字／小文字の区別をするか」です。

カードデータの文書への配置

データ本文を読み込むと、データが有るなら１データの表示領域にデータが表示されます。

そして、ボタン文書に配置をクリックして文書に配置します。

文書に配置されたデータをクリックすると削除ボタンが表示され、それをクリックすることで配置を削除します。

印刷

印刷ボタンを押すか、ブラウザー表示の状態で、Ctrl＋Pキーを押すか、「Edge」なら画面左上の［…］‐「印刷」、「Chrome」なら画面左上の［︙］‐「印刷...」から行ってください。

印刷時の指定は、余白を「なし」にしてください。
印刷時の設定の余白を有効にするなら、CardPringの「余白」の指定を「0」等にします。
※ 印刷時の設定とCardPrintとの印刷領域が異なる場合は、拡大縮小の印刷になります。※印刷時の設定で「100%」等にする事も可能です。

操作パネル部分は印刷されません。

データ本文

カードデータの本文になります。

HTML形式。拡張子： htm、html。

データ構成

HTMLですので、CSS、スクリプト（JavaScript）を組み込めます。

以前は、CSSとスクリプトはデータ本文とは別ファイル…分離型でやっていましたが、内包型も読み込めるようにしました。

分離型： CSS、スクリプトが、データ本文ファイルから分離した形式です。
CardPrint では個別にCSSファイル、スクリプトファイルを読み込ませる必要が有ります。
CSS だけ別ファイルにする場合もありますが…。
内包型： CSS、スクリプトを、データ本文ファイル内に含ませる記述方法です。
CardPrint ではデータ本文ファイルだけの読み込みで処理が可能に出来ます。

データ本文の基本構成

HTML宣言（DOCTYPE）、HTML、HEAD、BODYは無くても CardPrint で読み込ませても使えます。しかし、データファイルをブラウザーHTML表示する事はできません。

<!DOCTYPE HTML>
<HTML lang="ja">
<HEAD>
<META charset="utf-8">
<META http-equiv="default-style" content="text/css">
<TITLE>持部品</TITLE>
<STYLE>
…CSSを記述…
</STYLE>
<SCRIPT>
…スクリプトを記述…
</SCRIPT>
</HEAD>
<BODY>
<DIV id=DataArea> ←データエリアの始まり。必須
 <DIV class="Data"> ←１データ
 </DIV>
 <DIV class="Data"> ←１データ
 </DIV>
</DIV>

TITLE要素
必須ではありませんが、これが有ると、CardPrint データを読み込ませるとこれの内容テキストが「データファイル名」に表示されます。
TITLE要素は、HEAD要素内に置きます。
id「DataArea」
必須。データエリアを示します。この中に各データ（class「Data」を含める）を配置してください。
class「Data」
１つのデータとして取り扱います。
以下の例では、これに同時に「B-4」などと指定していますが、これは、チャック付きビニル袋「ユニパック」での呼び名で、「A-4」「B-4」「C-4」…などあります。例では、この名前をそのまま使っていて、CSSでの大きさ指定「width:○○」「height:○○」は、このビニル袋に入れる用紙のサイズとなります。

「Data」「DataArea」の外の部分にHTMLテキスト、テキストを記述しても構いません。

分離型の例

データ本文「○○.htm」の例：文字コード：UTF-8

<!DOCTYPE HTML>
<HTML lang="ja">
<HEAD>
<META charset="utf-8">
<META http-equiv="default-style" content="text/css">
<META name="author" content="氏名">
<META name="description" content="持部品">
<TITLE>持部品</TITLE>
<STYLE>@import url("持部品.css");</STYLE>
<SCRIPT src="持部品.js"></SCRIPT>
</HEAD>

<BODY onload="ItirenJob()">
編集：2022.08.05<BR>

<DIV id=DataArea><!--データエリアの開始-->

<DIV class="Data B-4">
データ1…
</DIV>

<DIV class="Data B-4">
データ2…
</DIV>

…

</DIV><!--データエリアの終了-->

</BODY>
</HTML>

CSS「持部品.css」の例：文字コード：UTF-8

.Data{	/* １データ */
	box-sizing:border-box;/*必須。これを指定しないとサイズがおかしい時がありました。 */
	border:1px dashed #000;/*推奨*/
	overflow:hidden;
	vertical-align:top;
	padding:0.5mm;
	font-family:ＭＳ Ｐ明朝;
	font-size:9pt;
	letter-spacing:0.5pt;
	line-height:1.2;
}
.A-4{	/* 用紙：A-4用 */
	width:68mm;	/*推奨*/
	height:49mm;	/*推奨*/
}
.B-4{	/* 用紙：B-4用 */
	width:83mm;	/*推奨*/
	height:59mm;	/*推奨*/
}
.C-4{	/*用紙：C-4用*/
	width:100mm;	/*推奨*/
	height:68mm;	/*推奨*/
}
EM{	/* 部品名など */
	font-family:MS UI Gothic;
	font-size:120%;
	font-weight:bold;
	font-style:normal;
	letter-spacing:0;
}
ABBR{	/* 記号｢IEE｣など */
	padding-right:2pt;
	font-family:Times New Roman;
	font-size:100%;
	letter-spacing:0.3pt;
	font-style:normal;
}
SUB{
	font-size:85%;
	vertical-align:bottom;
}
SUP{
	font-size:85%;
	vertical-align:top;
}

スクリプト「持部品.js」の例：文字コード：UTF-8

//●一連処理
//編集：2023.08.06 by T.A.
//呼出：ItirenJob()
function ItirenJob(){
 let Obj=DataArea.innerHTML;	//データエリアのHTMLコード取得
 Obj=Tikan(Obj, "#VOUT", "<ABBR>V<SUB>OUT</SUB></ABBR>");
 Obj=Tikan(Obj, "#VREF", "<ABBR>V<SUB>REF</SUB></ABBR>");
 Obj=Tikan(Obj, "#hFE", "<ABBR>h<SUB>FE</SUB></ABBR>");
 Obj=Tikan(Obj, "#hfe", "<ABBR>h<SUB>fe</SUB></ABBR>");
 Obj=Tikan(Obj, "#VIH", "<ABBR>V<SUB>IH</SUB></ABBR>");
 Obj=Tikan(Obj, "#VIL", "<ABBR>V<SUB>IL</SUB></ABBR>");
 Obj=Tikan(Obj, "#VIN", "<ABBR>V<SUB>IN</SUB></ABBR>");
 Obj=Tikan(Obj, "#VIO", "<ABBR>V<SUB>IO</SUB></ABBR>");
 Obj=Tikan(Obj, "#f", "<ABBR>f</ABBR>");
 Obj=Tikan(Obj, "#Ω", "<IMG style='width:1em' src='外形/モー.gif'>");
 DataArea.innerHTML=Obj;
}

//●置換
//編集：2023.08.03 by T.A.
//Obj＝文字列。
//Obj 中の Str を Str2 に置換して返す。
function Tikan(Obj, Str, Str2){
 return Obj.replaceAll(Str, Str2);
}

関数「ItirenJob」：

例では、DataArea内の文字列の置換をしています。「#」を頭としている検索文字列で、文字数の長い物から処理をしています。

内包型の例

データ本体と、CSS、スクリプトを一緒に記述。

データ本文「○○.htm」：文字コード：UTF-8

<!DOCTYPE HTML>
<HTML lang="ja">
<HEAD>
<META charset="utf-8">
<META http-equiv="default-style" content="text/css">
<META name="author" content="氏名">
<META name="description" content="持部品">
<TITLE>持部品</TITLE>
<STYLE>
.Data{
	box-sizing:border-box;/*必須。これを指定しないとサイズがおかしい時がありました。 */
	border:1px dashed #000;/*推奨*/
	overflow:hidden;
	vertical-align:top;
	padding:0.5mm;
	font-family:ＭＳ Ｐ明朝;
	font-size:9pt;
	letter-spacing:0.5pt;
	line-height:1.2;
}
.A-4{	/*用紙：A-4用*/
	width:68mm;
	height:49mm;
}
.B-4{	/*用紙：B-4用*/
	width:83mm;
	height:59mm;
}

EM{	/* 部品名など */
	font-family:MS UI Gothic;
	font-size:120%;
	font-weight:bold;
	font-style:normal;
	letter-spacing:0;
}
ABBR{	/* 記号｢IEE｣など */
	padding-right:2pt;
	font-family:Times New Roman;
	font-size:100%;
	letter-spacing:0.3pt;
	font-style:normal;
}
SUB{
	font-size:85%;
	vertical-align:bottom;
}
SUP{
	font-size:85%;
	vertical-align:top;
}
</STYLE>
<SCRIPT>
//●一連処理
//編集：2023.08.06 by T.A.
//呼出：ItirenJob()
function ItirenJob(){
 let Obj=DataArea.innerHTML;	//データエリアのHTML取得
 Obj=Tikan(Obj, "#IOUT", "<ABBR>I<SUB>OUT</SUB></ABBR>");
 Obj=Tikan(Obj, "#VCEO", "<ABBR>V<SUB>CEO</SUB></ABBR>");
 Obj=Tikan(Obj, "#VOUT", "<ABBR>V<SUB>OUT</SUB></ABBR>");
 Obj=Tikan(Obj, "#hFE", "<ABBR>h<SUB>FE</SUB></ABBR>");
 Obj=Tikan(Obj, "#ICC", "<ABBR>I<SUB>CC</SUB></ABBR>");
 Obj=Tikan(Obj, "#VCC", "<ABBR>V<SUB>CC</SUB></ABBR>");
 Obj=Tikan(Obj, "#IB", "<ABBR>I<SUB>B</SUB></ABBR>");
 Obj=Tikan(Obj, "#IC", "<ABBR>I<SUB>C</SUB></ABBR>");
 Obj=Tikan(Obj, "#IE", "<ABBR>I<SUB>E</SUB></ABBR>");
 Obj=Tikan(Obj, "#f", "<ABBR>f</ABBR>");
 DataArea.innerHTML=Obj;
}

//●置換
//編集：2023.08.03 by T.A.
//Obj＝文字列。
//Obj 中の Str を Str2 に置換して返す。
function Tikan(Obj, Str, Str2){
 return Obj.replaceAll(Str, Str2);
}
</SCRIPT>
</HEAD>

<BODY onload="ItirenJob()">
編集：2022.08.05<BR><!--←任意-->

<DIV id=DataArea><!--データエリアの開始-->

<DIV class="Data B-4">
データ1…
</DIV>

<DIV class="Data B-4">
データ2…
</DIV>

…

</DIV><!--データエリアの終了-->

</BODY>
</HTML>

「CardPrint.htm」

Webアプリケーション

カード 印刷

CardPrint

カード データ

カード データの編集

各部の説明

「用紙」： 「余白」…

「データ ファイル指定」

「データ表示」

カード データの読み込み方

データ表示と検索

カード データの文書への配置

印刷

データ本文

データ構成

データ本文の基本構成

分離型の例

内包型の例

カード印刷

カードデータ

カードデータの編集

「用紙」：「余白」…

「データファイル指定」

カードデータの読み込み方

カードデータの文書への配置