ちょっとした興味本位から沼にハマったHTML帳票の話 - きったんの、その一足が道となる

見出し画像

初めはちょっとした興味本位からだったんです。
それがこんなに深い沼にハマってしまうなんて思ってもみませんでした。

とりあえずはボタンを配置してみたい

そして抱く疑問と興味

HTML帳票を作り始める

そして・・・

とりあえずはボタンを配置してみたい

カスタマイズの勉強を始めてまずやりたいなと思ったことといえば、ボタンを配置してみることでした。

スペースフィールドのIDを取得し、そこにHTMLのbuttonの要素を追加することでボタンを表示します。

(function () {
'use strict';
kintone.events.on('app.record.detail.show', function (event) {
//スペースフィールドのIDを表示
const buttonSpace = kintone.app.record.getSpaceElement('button');
//ボタンの設置
const button = document.createElement('button');
button.innerText = 'ボタン';
buttonSpace.appendChild(button);
//ボタンクリック時のイベント
button.onclick = function() {
//ボタンクリック時の処理
};
});
})();

これでボタンを配置するという目的だけは比較的苦労することなく達成することができました。

そして抱く疑問と興味

当時今ほどHTMLが書けたわけじゃないのですが、こういう疑問と興味を抱いたのです。

ボタンを表示するにはHTMLのbuttonの要素を追加する、
ということは言い換えると
「buttonの要素をスペースフィールドに追加する処理を書くことでボタンを表示することができる」

ということは？

追加する要素が<button>じゃなければどうなるのだろう？

「例えばHTMLとCSSで普通の白い四角とか文字とかを表示させたりできるのかな？」
と思ったのです。

できるやん！？

（ということは・・・。）

そして私は禁断の興味を抱いてしまうのです。

HTMLとCSSで帳票をデザインすることもできるんじゃないのだろうか？

そしてその部分だけを印刷することができればkintoneから帳票印刷ができるのではないろうか？

当時帳票出力プラグインを使用しておらず、なんとかしてkintoneから直接帳票を出力する方法はないかと考えていました。

こんなふとした興味によって沼にハマり込んでしまうことはこの時には想像もしていませんでした。

HTML帳票を作り始める

そしてそれからでポチポチと作っていくわけです。

HTMLとCSSの面白さとむずかしさが相まってやりだしたら止まらなくなり・・・
どんどんどんどん沼にハマっていってしまいました。

<section class="page">
<div class="row_1">
<div class="address">
<p>郵便番号フィールド</p>
<p>住所フィールド</p>
<p class="companyName">取引先名フィールド　御中</p>
</div>
<div class="title">
<p class="formTitle">請　求　書</p>
<p class="no"><span class="No">No.</span>伝票Noフィールド</p>
<p class="date">　　日付フィールド</p>
<div class="company">
<p class="companyName">きったん株式会社</p>
<img src="image.png">
<p>578-0983　大阪府東大阪市○○○○10-2</p>
<p class="tel">TEL:000-000-0000</p>
<p>【振込先】三菱UFJ銀行<br><span>サンプル支店　普通0000000</span></p>
</div>
</div>
</div>
　　　・・・・
　　　・・・・
　</section>