BOOTHの宛名印刷用CSVを使って帳票を作るやつ

• これは便利だーって思っていただいたおやさしい方はデバッグに協力すると思ってNyanticLabs.からなんか買ってください。これを使って帳票印刷して送ります。

BOOTHで自家通販をしている人で主に「あんしんBOOTHパック」の利用者

JavaScriptとかなるべく使いたくないBOOTHで自家通販しているあんしんBOOTHパック利用者の猫グッズ屋のおじさん。
端的に言えば自分で使う用。

猫グッズを売るときに手数料も安いし手軽に出品できるし匿名配送も使えるのでpixivさんのやってるBOOTHって便利なんですよ。
そのBOOTHで自家通販をすると、当然ですが売れたら誰かに何かを送ります。
発送処理をしていて箱に入れる商品どれ？いくつ？みたいなことがよくあったので誤発送を防止するために作りました。

あんしんBOOTHパックで送るときに誰に送るかが分からないため、外箱に注文番号とか印刷したシールがあると便利だよね？それにネコピットで読み込むQRコードがあればもっと便利だよね？ってことでそれもできるようにしました。
仕組みで防げる誤発送は無くそう！

出荷準備のときにあると便利な帳票と「あんしんBOOTHパック」で出荷のときに便利なQRコードをラベルシールに印刷できます。

Windows版のChrome 73で動作確認をしています。
最近のChromeなら動くと思いますが仕様が変わると動かない機能もあるかもしれません。
スマートフォンのChromeだとラベルシール印刷がズレると思うのでたぶん駄目です。
JavaScriptでどうにかしてるので別途サーバーなどは必要ありませんし外部に情報を送ることもありません。

• ここからzipファイルをダウンロードして展開します。
• boothcsv.html を Chrome から開きます。
• ファイルを選択ボタンを押してBOOTHの注文一覧からダウンロードした宛名印刷用CSVを選択します。
• 実行ボタンを押すと印刷に必要な枚数が表示されます。
• ラベルシールも印刷するときの説明はまたあとで。
• プリンターに用紙をセットして印刷します。
• おしまい。

これね、ヤマトの営業所持ち込みであんしんBOOTHパック使うときにはすげえ便利なんですよ。PUDOステーションに放り込むときにもめっちゃ便利です。慣れると1出荷30秒ぐらいでできます。

• A4 44面 四辺余白付のラベルシールを用意します。例えばこれとかこれ
• ラベルシールも印刷するにチェックを入れます。
• 途中まで使ったラベルシールを再使用する場合にはスキップする枚数を入れます。あまり再使用しすぎるとプリンターの中で剥がれたりするかもしれないのでほどほどに。
• さっきと一緒でCSVファイルを選んで実行ボタンを押すと、ラベル用紙の枚数も表示されます。
• BOOTHの注文詳細であんしんBOOTHパックのQRコードを作成して、表示されたQRコードの画像を右クリックでコピーしてから該当の注文番号のラベルの「Paste QR image here!」を右クリックして貼り付けを選ぶとQRコードが表示されて自動的に匿名配送の受付番号とパスワードが表示されます。自動です。オートマチック！！
• なお間違えて貼り付けたときはQRコードをクリックすると再度貼り付けできるようになります。
• 印刷したラベルシールを出荷する箱に貼り付けておけば出荷時にネコピットを箱に貼ったQRコードにかざす→その箱に貼る送り状が印刷されるという流れになるので送り間違いは発生しません。万が一QRコードの読み込みが上手く行かなかった場合でもラベルシールに印刷されている受付番号とパスワードを入力すれば送り状が出力できるので安心です。

• sampleにcsvファイルとQRコードのpngファイルがあるので試せます。
• 参考までに手元にあるpngファイルは直接該当箇所にドラッグアンドドロップすれば貼り付けられます。
• 当然ですが、サンプルのデータはダミーの数字が入っているので出荷では使えません。

• 印刷に便利なCSS Paper CSS
• QRコード読んでくれるJavaScript jsQR
• CSVをいい感じに読んでくれるJavaScript PapaParse

• こだわりの素JavaScriptでHTML5のtemplateタグを使ってます。最近はquerySelectorのおかげでjQueryなしでも要素の選択が割と簡単にできるようになったみたいです。
• Paper CSS強い。templateと合わせると通常の業務で使う帳票はだいたい表現できるぞ！サーバーでPDF作ってダウンロードさせて印刷とかしなくてもいいし、Chrome上での見た目がいきなり印刷プレビュー風で謎の安心感があります。
• BOOTHからダウンロードするCSVのヘッダが日本語なので、classとかも全力で日本語です。可読性高い！

• なんで動いてるかよくわからないところはだいたい潰して理解したつもりです。
• 印刷物に関係ないフォームの部分などは動けばOK主義者なので必要最小限です。見た目にこだわる方はプルリクエスト？とかいうやつをしていただけるといいと思います。