【WEBツール説明書】見積書作成(一時保存&印刷対応&TSVエクスポート・インポート対応)

ウェブ上で見積書を作成できるWEBツールを作成しました。スプレッドシート(エクセルでもOK)と合わせて利用することもできます。
そのWEBツール「見積書作成」の使い方を説明します。

説明を個別で見たい方はこちら

推奨環境

Windows10のChrome(最新)でのみ検証をしています。Macの場合でもChromeであれば問題ない可能性が高いと思います。

印刷(PDF)の確認もChromeのみで行っています。印刷が必要な方はChromeにてツールをご利用ください。

概要(※次項以降にて詳しく説明します

ツールを開くと「見積書」のレイアウトがそのまま表示されます。

Firefoxキャプチャ引用※実際はChromeで行います

値は入っていませんが、そのまま印刷画面を開いても見積書を作成することができます。

■編集
ほとんどのテキストを編集することができます。例えば「株式会社サンプル 御中」等のテキスト部分または表の枠内(一部自動計算なので編集できません)をクリックすると、そのまま編集出来たり、編集画面が開いたりします。テキストを編集してフォーカスを外す※1と編集完了です。
※1・・・現在入力中の外側(関係ないところ)をマウスでクリックすればOKです

■印刷
Chromeの印刷機能を利用していただければOKです。CtrlPでプレビュー画面が開くと思います。見積書と関係ない箇所は表示されないよう設定していますので、そのまま印刷してください。※私の方ではPDFしか試していません

■Cookieに保存
CtrlSでクッキーに保存します。保存期間は7日間です。入力した内容を保存しますので、次回同じブラウザで開いた場合も同じ内容が表示されます。
ただし、「保存期間:7日間」の保証はできません。ご了承ください。出来るだけエクスポートしてスプレッドシートもしくはエクセルに保存してください。

■エクスポート・インポート
TSV形式でまとめたテキストを表示しますので、そちらをコピーしてスプレッドシートやエクセルにペーストしてデータを保存しておくことができます。また、こちらでエクスポートしたデータ形式のものであれば、インポートすることができます。上述のとおりcookieへの保存だけではせっかくの作業が無駄になる恐れがありますので、なるべくこちらのエクスポート・インポートをご利用ください。

詳細

「見積書作成」の各機能を詳しく説明します。

テキスト編集

Firefoxキャプチャ引用※実際はChromeで行います

上記青枠、緑枠内が編集できます。

青枠の編集方法

「見積書」を例に挙げます。

Firefoxキャプチャ引用※実際はChromeで行います

1.「見積書」というテキスト部分をマウスでクリックすると、上記のように編集できるようになります。

Firefoxキャプチャ引用※実際はChromeで行います

2.編集します。

Firefoxキャプチャ引用※実際はChromeで行います

3.テキスト(上記の場合は「御見積書」)から少し離れた場所をマウスでクリックしてください。画面上どこでもOKです。
例えば、上記の矢印の先のあたりをクリックします。

Firefoxキャプチャ引用※実際はChromeで行います

4.編集完了です。

青枠部分はTab移動可能
Firefoxキャプチャ引用※実際はChromeで行います

上記の順番どおりにTabで選択を移していけますので、編集するのに便利です。

緑枠の編集方法

「大阪府大阪市淀川区・・・」を例に挙げます。この場合改行が可能です。ただし、「株式会社サンプル 御中」の部分だけは改行できません。

Firefoxキャプチャ引用※実際はChromeで行います

1.「大阪府大阪市淀川区・・・」というテキスト部分をマウスでクリックします。

Firefoxキャプチャ引用※実際はChromeで行います

2.編集画面が開きます。

Firefoxキャプチャ引用※実際はChromeで行います

3.編集します。

Firefoxキャプチャ引用※実際はChromeで行います

4.テキスト(上記の場合は「〒532-0002 大阪府大阪市淀川区・・・」)から少し離れた場所をマウスでクリックしてください。画面上どこでもOKです。
例えば、上記の矢印の先のあたりをクリックします。

Firefoxキャプチャ引用※実際はChromeで行います

5.編集完了です。

自動計算

Firefoxキャプチャ引用※実際はChromeで行います

青枠を入力して編集完了すると(フォーカスを外すと)、紫枠の部分が自動で計算されます。

Firefoxキャプチャ引用※実際はChromeで行います

税率は10%固定なので、8%のものには利用できないですね。ご要望がありましたら、コメントください。

表示件数

Firefoxキャプチャ引用※実際はChromeで行います

デフォルトは表示件数が「10」になっています。1~25件まで表示表示を変更できます。多くなりすぎると印刷が1枚に収まらに可能性があるので、調整してください。

Firefoxキャプチャ引用※実際はChromeで行います

20件に変更してみます。

Firefoxキャプチャ引用※実際はChromeで行います

20件項目が表示されました。

※↓変更前

Firefoxキャプチャ引用※実際はChromeで行います

cookieに保存

Firefoxキャプチャ引用※実際はChromeで行います

青枠の「cookieに保存 (Ctrl+S)」をクリック、もしくはCtrlSでその時点の見積書の情報をcookieに保存できます。保存期間は7日間です。
cookieに入力した内容を保存しますので、次回同じブラウザで開いた場合も引き続き作業を行っていただけます。

Firefoxキャプチャ引用※実際はChromeで行います

保存すると上記のようにメッセージが表示されます。いつ保存したか確認できます。

ただし、「保存期間:7日間」の保証はできません。ご了承ください。出来るだけ次に説明するエクスポートによってスプレッドシートやエクセルに保存してください。

ちょっとした便利機能程度に考えていただければと思います。

自動保存

Firefoxキャプチャ引用※実際はChromeで行います

自動保存(毎分)にチェックを入れると上記「cookieに保存」を毎分自動で行います。編集していて、ブラウザが落ちてしまったりしたときにcookieに残っている可能性があります。落ち方・フリーズの仕方によってはcookieが消えてしまうかもしれませんので、残っていればラッキーくらいに捉えていただければと思います。

Firefoxキャプチャ引用※実際はChromeで行います

チェックを入れると、上記のようにメッセージが表示されます。いつ自動保存にしたか確認できます。

エクスポート

Firefoxキャプチャ引用※実際はChromeで行います

1.青枠の「export(TSV) (Ctrl+Enter)」をクリック、もしくはCtrlEnterでその時点の見積書情報がTSV形式で表示されます。

Firefoxキャプチャ引用※実際はChromeで行います

2.見積書情報がTSV形式で表示され、選択された状態になります。そのままコピーしてエクセルまたはスプレッドシートに貼り付けてもらえればデータ保存・蓄積することができます。

スプレッドシート・エクセル

Chromeのスプレッドシートをキャプチャ引用

実際にスプレッドシートに貼り付けるとこのようになります。A列の任意の行を選択した状態で貼付ればOKです。
エクセルの場合も同様です。

1行目に項目名称を置きたい場合は下記をご利用ください。

日付 No タイトル クライアント 件名 コメント 見積り金額 名前 住所 その他 品名 小計 消費税(10%) 合計金額 備考 品名(以降繰り返し) 数量(以降繰り返し) 単価(以降繰り返し)
金額(以降繰り返し)

幅が狭いため、見た目上改行されてしまっていますが、貼り付けると改行はありません。

インポート

Firefoxキャプチャ引用※実際はChromeで行います

1.青枠の「import(TSV) (Ctrl+I)」をクリック、もしくはCtrlIでデータを入れる画面が表示されます。

Firefoxキャプチャ引用※実際はChromeで行います

2.ここに先ほどエクスポートしたデータを貼り付けます。もちろん、スプレッドシートに貼り付けていたデータ(該当行)をコピーして貼り付けてもOKです。

Firefoxキャプチャ引用※実際はChromeで行います

3.上のようにデータを貼り付けます。

Firefoxキャプチャ引用※実際はChromeで行います

4.入力画面から少し離れた場所をマウスでクリックしてください。画面上どこでもOKです。
例えば、上記の矢印の先のあたりをクリックします。

Firefoxキャプチャ引用※実際はChromeで行います

インポートした情報が反映されました。

Firefoxキャプチャ引用※実際はChromeで行います

※インポート前の画面

印刷する

Chromeの印刷機能をそのまま利用します。

Firefoxキャプチャ引用※実際はChromeで行います

この状態でCtrlPを押すと印刷プレビューが開きます。

Chromeの印刷プレビュー画面をキャプチャ引用

不要な箇所が非表示になり、そのまま見積書としてご利用いただけます。

印刷の設定も画像上に載せておきました(右側)ので、参考にしてください。

以上です。

ツールへのリンク