コピー本作成支援アプリ［HtmlCopiBon］

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

まだ、やることは残っているが、まずは実戦投入が可能になった記念に HTMLコピ本、 ryunosinfx.github.io/HtmlCopiBon/ コピー本※袋綴じ本 にのみ対応 の使い方を書いてみよう。

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

①まずpngかjpegにした原稿を用意します。何も情報のないページは不要です。 ②yunosinfx.github.io/HtmlCopiBon/ にアクセスします。ChromeかFirefoxの最新でお願いします。他は知らない子なのでよくわからないです。IE？テメーはダメだ。 ③開いたらまだスプラッシュ画面がないので初期化にしばらく待ちます

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

HTMLCopiBonをリリースしました。スマホで動かしたことはないのでよくわからないけど、使えるようにしたいですね。 github.com/ryunosinfx/Htm… ※出来たファイルのコンビニにおいての実出力についてはまだ未確認です。

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

HTMLCopiBonをリリースしました。ドラッグアンドドロップがChromiumのタッチデバイスシミュレーターでは動くようになりました。 github.com/ryunosinfx/Htm… ryunosinfx.github.io/HtmlCopiBon/ ※出来たファイルのコンビニにおいての実出力についてはまだ未確認です。

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

じゃあ、この製品の説明を再度 実現できる内容は ①画像を集めて ②並び替えて ③並びを確認して ④適当なサイズに拡大、切り抜きして ⑤袋綴コピー本印刷用に２枚を１画像にまとめて ⑥zipファイルに保存して ⑦ダウンロードが出来ます ダウンロードしファイルを展開、USBメモリに移してコピー機へGO

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

作動環境は最新のFirefox62かChrome69、Chromium69です。 IEでは確実に動きません。 Edgeはよくわからないのでよくわかりません。 SafariもMacがないのでよくわかりません。 他はBraveとかは動きそうですね、確認はしてませんが。Vivaldiはどうなんでしょうか。

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

その他制約事項として、8GBメモリ搭載マシンでAtom8750なマシンでは動きました。 というのも、高解像度画像のバイナリ処理を伴うので、メモリの使用量は非常にシビアです。特にZip圧縮で全印刷解像度の画像が一時オンメモリになるので非常にヤバイです。

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

この制約事項は最終的にPDFに出力することを考えると避けて通れないので、手間を省くのが最大の目的なのも相まって対応は出来ないです。 他には、Indexedbをストレージに使っています。この上限が２５０MBぐらいなので、原理的に1枚モノクロ600dpiで2ページペア10MBとすると30ページ前後が限界です。

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

次に入力用のファイルですが、PNGかJpegのみの対応です。もしかしたらTIFFとかBMPも使えるかもしれませんが、未確認です。サイズの制限は特にないです。 自動切出し機能があるので、漫画原稿用紙の画像をそのまま突っ込んでも切り出してくれます。きっとそうに違いありません。

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

futaba-dd.jp/dcguideline/ba… これのA4原稿用紙ならきっと。 ただ、気をつけないといけないは、コピー本なので、若干異なる ※それでも喉の部分は開けて中央寄せで若干縦長の画像を合体させるはできているはず。

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

それではスクショに行きましょう。 pic.twitter.com/DHai3GxDRV

拡大

拡大

拡大

拡大

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

プレビューですが、毎回画像を作っています。72dpiのA4なので其れ以上は大きくならないです。 で、特定のページのみモノクロ指定時でもカラーを強制(isForceColor:ON)したり、切り取りをしない設定(isNoCropping:ON)が出来ます。現状では上寄せで表示してますが、出力は中央寄せという罠が有ります。 pic.twitter.com/81UX4f2ZhH

拡大

拡大

拡大

拡大

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

次出力設定ですね dpiと用紙を設定して袋綴本用のjpeg100%品質画像を作成し、zipに出力します これはコンビニのコピー機出力に合わせています。特にセブンイレブンは１０MBの壁も 一旦、作成後zipが保存されます。DLは別途DLボタンからしてください PDF関連は未実装です。未設定はダイアログが出ます。 pic.twitter.com/BpTIjBMtUL

拡大

拡大

拡大

拡大

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

作成済みだと上書き確認ダイアログが出てきます。 作成が始まると、プログレスバーが出てきます。CPU使ってないのに止まったらバグです zipファイルが既に作成済みかどうかはボタンの中にファイル要素が表示されるので判別できます。内容は①ファイル名※時間込み②出力設定③ファイルサイズ④作成時間 pic.twitter.com/9TRtKXtQ5C

拡大

拡大

拡大

拡大

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

最後に、作品管理画面をば データがいっぱいになったらどうするかだって？ その時は全部消しましょう、そのためのボタンを用意してあります！ババーン！！ 250MB壁が意外と辛いので、本当は複数作品を管理で居るようにするつもりでしたが 諦めました。とても残念ですがマルチマシン構成までの辛抱デス pic.twitter.com/D58p4s6jur

拡大

拡大

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

マルチマシン構成はWebRTCで複数のマシンを束ねる方法です。応用すれば、別のドメインに置いたHTMLでストレージ不足の代用が可能に成ると思います。 まあ出てきたzip内のファイル名はこんな感じですね。もうすこし、ここは真面目にするべきでしょうが、しばらくお待ちください。 pic.twitter.com/UpnfE4tSnQ

拡大

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

まとめると、１コピー本用の画像を集めて適当に印刷用画像ファイルを作るだけのツールです。データはブラウザに保存されるので、別マシンから作業中のデータを見ることは出来ません。また１作品分しかストレージがないので、ブラウザを閉じると消えてもいいなら、プライベートモードの利用でも良いかも

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

あと、全部オレオレ英語なのは気にしないでください。後ほど使う人が居れば、多言語化対応はしたいと思います。 今後の目下の目標はPDF出力でキンコースの自動製本コピー機狙いですかね。これができれば印刷後、お家に帰って製本というキツイ制約が回避できるので。