投稿:2021/12/09 - 更新:　

三角くじ作成ツール

ブラウザに必要項目を入れるだけで、簡単に三角くじを作成できるフリーWebツールです。よろしかったら使ってみてください。利用時にはこのページからのPOPアップの許可だけして下さい。

Google Chrome環境で作成しており、他のブラウザの挙動は確認しておりません。特にInternet Explorerでは意図した通りに動かないかもしれません。JavaScriptの後方互換は考慮していません。

同様の定番抽選ツールであるビンゴカード作成ツール(簡易抽選機付き)も別ページでご用意しています。時間があればそちらもご覧いただければ幸いです。

使い方

ツールはこちら

次のボタンを押すと、ページ下部にある「三角くじ作成ツール」にサンプルデータをセットします。既存のデータがあった場合は上書きしますので注意してください。

基本的に、プレースホルダに各テキストボックスが対応する項目名が書かれていますので、環境に合わせて入力をしてください。

印刷用紙のサイズ
用紙サイズを指定してください。ブラウザ側の印刷設定で余白を0にする前提です。ブラウザでそれができない場合は、ここに印刷余白を差し引いたサイズを記載し、次の「用紙余白」の項目は0としてください。
用紙余白
印字用の用紙の余白を設定してください。
くじ1枚のサイズ
くじを広げた時の正方形の1辺の長さを指定してください。

くじ間の余白は、切り取り用の余白です。1mm以上で設定してください。

用紙サイズ、余白、くじサイズ、くじ余白の値で1枚の紙に印字される枚数が自動で決まります。
表面画像
表面の画像を任意のものに変えられます。jpegかgif画像で作成してアップロードしてください。リサイズされますが、大きいすぎるとPCのスペックによってはフリーズする事もあるかもしれません。

表面色は、表面の余白と境界の色です。画像の背景色にあわせるときれいに仕上がると思います。

Google Chromeでは印刷プレビュー画面で「詳細設定」から「背景のグラフィック」にチェックを入れてください。

表面の画像は最初に1ページ分だけ出力されます。複写して使ってください。

特にインクジェットプリンタを使う場合は、先にくじの結果から印刷した方が失敗が少ないと思います。
くじ結果のフォント
くじの結果のフォントサイズと、色を指定できます。少し薄い色にしておいた方が透けにくいと思います。
くじ結果
追加ボタンよりくじを作成できます。

「一等」や「大当たり」等、サイズからはみ出ないように好きな文字を入れて、発行する枚数を指定してください。

入力済みの項目は、クリックから修正や削除ができます。

また複数行ある場合はドラッグ＆ドロップで入れ替えが可能です。
ボタン
「作成」を押すと印刷プレビューが表示されます。ページとして出力されるものと、実際に印字されるものではCSSがまったく別のものになるので、確認は印刷プレビュー側からお願いします。

印刷プレビューを「キャンセル」で終わらせずに、閉じてしまった場合、元のページは編集できなくなるようです。その際はリロードして最初からやり直してください。

ライセンス情報・謝辞

Vue.js Released under the MIT License Copyright © 2014-2020 Evan You
Vue.Draggable Released under the MIT License Copyright © 2016-2019 David Desmaisons
SortableJS/Sortable Released under the MIT License Copyright © All contributors of Sortable
Reset CSS v2.0 Released under the public domain
三角くじ作成ツール Released under the MIT License Copyright © 2020 なんぶ電子

ほかコード作成において、「FileReaderを使ってローカルにある画像をブラウザに読み込ませる方法」や、「上下中央揃えのCSSまとめ Flexboxがたった3行で最も手軽」、「cssでA4サイズぴったりに印刷できるようにレイアウトする方法」を参考にさせていただきました。ありがとうございました。