【kintone活用法】社名の角印を文字上に押印させる！見積り作成で実験

【kintone活用法】社名の角印を文字上に押印させる!見積り作成で実験

こんにちは、縁紡ぐです！

kintoneはデータを管理するのが得意！ですが、印刷はあまり得意ではありません💦今回は、『kintoneで角印を文字の上に押印して実際に使えるように』してみました！

あつし

本記事は以下のような人に少しでもお役に立ちたいと思って書きました！

・kintoneで角印を押したらどんな感じ？

この記事では、「kintoneの電子化による活用の参考になる内容」を紹介しますね！

本記事で読んでいただければ、見積りや請求書の電子化したときの押印イメージが分かるので、ぜひご覧ください！

ごろうの経歴

情報システム歴１０年以上
ITツールを使った現場での業務改善を数多く実施（VBA、RPA、AIOCR、電子契約・ワークフロー・資産管理etc.導入）
開発スキル（VBA・Python・RPA・Vuejs）

kintoneで会社名と角印の画像を重ねる！

kintoneは、Excelの表のような形でデータをためることが得意です！

実際に見積書の内容を作ったりすることができます。でも、ちょっと苦手なことがあります。それは、印刷機能です。

入力画面をそのまま印刷することしか標準機能ではできません。今後、印刷機能がパワーアップされていくことを期待していますが。。。

それでは、会社名と角印を重ねるようにやってみましょう！

まずは、どんな風にしたいか確認

見積書や、請求書で発行元として住所と会社名に角印が押印されていると思います。

実際のサンプルとしてこんな感じです。

今回は、サンプルのように見積書を作成していこうと思います！

フォームで見積書の入力項目を作成する

それでは、まず、アプリを制作して入力フォームを設定します。

顧客先名は、顧客管理アプリからルックアップフィールドで取得しています。

請求書の明細部分は、『№、商品名、数量、単位、単価、金額』です。

金額は、数量と単価から自動計算を行っています。

小計は、明細の合計、消費税は、明細の合計から算出、そして合計金額を明細の合計と消費税を足して自動で表示しています。

これをこのまま印刷するとどんな感じになるでしょう。

今のままだと、書類のタイトルもないし、必要な情報が足りていないので、標準機能で出来るところまで整えていきましょう！

標準機能で見た目を整える

タイトルの「見積書」や「発行元業者情報」など、見積書に必要な情報を追加します。

あとは、スペースや罫線を使って表示位置の調整をおこなうと次のようになりました。

入力フォームは、こんな感じ。

印刷画面を確認するとこんな感じです。

かなり良くなりましたね！
でも、顧客の名前のところや、日付などのテーブル以外の入力項目の枠線や背景色が違うところが気になります😢７０点だけど、これではちょっと厳しいかもって感じですね。

あとは、今回の目標である『角印と会社名を重ねる』を実現させていきます。

Javascriptで表示を調整

kintoneのいいところは、カスタマイズできるところですね！

簡単な修正については、『JSedit for kintone』を使うととっても便利です！

あわせて読みたい

簡単にkintoneでJavascriptが編集できるようになるプラグイン『JSEdit for kintone 』簡単にJavascriptが編集できるようになるプラグイン『JSEdit for kintone 』 kintoneで開発を進める中で、どうしても使い勝手が悪くてJavascriptでカスタマイズする必要…

(function() {
  'use strict';
    kintone.events.on('app.record.print.show', (event) => {

    const fields = ['顧客名', '社名角印', '見積日', '小計', '消費税', '合計'];
    for (let i = 0; i < fields.length; i++) {
      const field = fields[i];
      const element = kintone.app.record.getFieldElement(field);
      element.style.backgroundColor = 'rgba(0, 0, 0, 0)';
      element.style.borderWidth = '0px';

      if(field == '顧客名') {
        element.style.fontSize="40px";
        element.style.color = "rgba(51, 51, 51)";

      }else if(field == '社名角印') {
        element.style.width = "70%";
        element.style.margin = "-80px 0 0 20px"
      }
    }
  });
})();

これで印刷画面にすると