gusuku Everysiteを使って領収書発行ページを作ってみた

こんにちは。サポートチームの妄想うさぎ、ほり🐰です。

前置き（作り方だけ見たい人は飛ばそう）

先日、我らが大都会岡山で、kintone Café 岡山 Vol.9 を開催しました。
私は運営メンバーなので、開催にあたり、いろいろと準備を行ってきました。

基本的には無料開催を目指しているのですが、会場となる会議室を借りるのにどうしてもお金がかかってしまいます。
市の会議室を借りているので格安ではあるのですが、運営メンバーのみで賄うにはキツイ金額…ということで、会場費は参加者で割り勘をしています。

また、kintone Café のあとには、みなさん大好き（私が大好き）懇親会があり、こちらも実費精算となっておりました。（飲み放題コースなので金額固定）

そんなわけで、今回は、参加費250円、懇親会費5000円を受付時にお預かりしたのでした。

お金を受け取ったのですから、領収書がほしいと言う方もおりました。

前回の開催時は、紙の領収書（手書きするやつ）を用意してたのですが、それを持っていた私は存在をすっかり忘れ去っておりまして、当日会場には持ってきておりませんでした…

でもそのためにまた紙の領収書を買うのも悔しいし、なんならその場で発行できたら楽なのにな、と考えたときに、ふと思ったのです。

「これ、エブリサイトでどうにかならんかな？？？」

※ちなみに、当日思いついたのでなんともならず、欲しい方には後日、メールで送付しました。

私が考えたさいきょう(笑)の領収書発行はこれだ！

ざっくりとした操作と処理の流れはこちらです。

緑色がエブリサイトで行うもの、オレンジ色がJob RunnerのWebhookカスタマイズで行うものです。

先に実行イメージを図でご説明します。

まず、発行画面から。（ほんとはヘッダーあるんですけど、図が大きくなりすぎるので省略）

各種入力チェックも行います。

入力して発行ボタンを押すと、これで発行するよ？の確認ダイアログが出るのでOKを押します。

ぐるぐる（操作できないように）

発行しました。PDFダウンロードします。の確認ダイアログが出るのでOKを押します。

別タブでPDFが表示されます。ダウンロードはご自由に。

エブリサイトの設定：画面デザイン

上部にタイトルとなる画像を配置して、それ以外は上下左右に余白を設けています。

余白はどうするの？というと、今のところ「シンプルパネル」にして（なにも指定してない）「テキスト」を配置して表現しています。

余白のレイアウト設定について、左右は「自動バランス」、上下は「指定する」で100pxの指定としています。
このあたりは、作りながら結果を確認しながらで調整すると良いと思います。
（ちょっとコツがいりますので、根気よく試してみてくださいね…！）

ページ生成時処理

前提として、kintone Café参加者の一覧を先にアプリに登録してました。

それを前提として、ページを表示した時に最初にkintoneアプリの参加者全員のレコードを取得してきて、プルダウンに表示するようにしています。

2025/08/19追記：

キャッシュが無効になる日時を設定しておかないと、ページ表示時にレコード再取得を行わず、発行済となったはずの参加者がプルダウンに表示される状態となります。

そのため、キャッシュを1分後に無効にする設定としました。

プルダウンに表示するための設定は、画面デザインのアイテムの設定で行います。

こうすることで、画面を表示したときに最初からkintoneのレコードの内容を踏まえた表示とすることができます。

ページ内処理

いくつかのブロックに分けて実行順に説明します。

１．必須入力チェック

アイテムの設定で「必須項目にする」を付けておくと、この”やること”でチェックができます。

２．チェックボックスの必須入力チェック

いまのところ一括で調べる方法がないので、１つでもチェックが付いていればOK、１つもチェックが付いていなかったらエラーダイアログ表示としています。（参加費懇親会費を選んだら、参加費単独と懇親会費単独のチェックを付けられないように、とかも考え始めるときりがないのでそこは目をつぶっております）

１のエラーチェックでエラーがない時、の条件も入れています。

３．２の反対の条件のときはエラーにしたくないので「なにもしない」

AかつBかつCの反転なので、
「Aではない」または「Bではない」または「Cではない」となるように設定します。

４．確認ダイアログ表示

５．OKを押したら、ぐるぐる表示してレコード追加

入力欄に入力した内容でレコード追加します。
（ほんとはここでレコード更新の想定だったのだが！）

この時点で、kintoneアプリへレコード追加が行われるので、レコード追加のWebhook通知が発生します。

通知の発生により、Job RunnerのWebhookカスタマイズが起動しますので、いったんJob Runnerの内容について触れます。

Job Runner（Webhookカスタマイズ）

１．いつもの。（説明省略します）

２．テーブルをクリアしておく

kintoneの初期値の空行をクリアで消しておきます。

３．チェックボックスにチェックがついていればテーブルに行追加、チェックがなければなにもしない、を３パターン

チェックの有無でアクションの流れが途切れないように、「なにもしない」でいったん合流しています。

どうしてJob Runnerでテーブルに追加しているかと言うと、３パターンの領収書を１つのPDFファイルにページを分けて出力したかったからです。

エブリサイトの方で、テーブル外のフィールドに共通となる入力項目をマッピングしてレコード登録しておき、Job Runnerでテーブル行に展開するイメージです。

Excelテンプレートのシート名に「#(テーブル)領収書」と指定することにより、テーブル１行につき１シートの自動展開を行っています。

テンプレートはこのようにしております。すべてテーブル内のフィールドを出力するように設定しました。

アクショングラフにするとこのような形です。

４．テーブル行に対して自動採番

せっかくなので領収書の発行NOを一意に管理しておこうかなと。（余剰要件な気もする。笑）

５．テンプレート取得とPDF出力

めんどくさいからテンプレートも同じアプリに保存しちゃってます。
実際の運用を考えるならば、テンプレ用アプリを用意したほうが管理はしやすいと思います。

６．発行済フラグ、発行日時、添付ファイルを更新

ついでに、次からプルダウンに表示されないようにするために、プルダウンのもとになっているレコードの方にも発行済フラグを付けておきます。

（本当はレコード更新の予定だったから、ここらへんちょっとごちゃついてます(^_^;)

と、ここまででJob Runner（Webhookカスタマイズ）のジョブは終わりです。

結果のkintoneレコードはこのようになります。

このジョブが、エブリサイトで作ったページの発行ボタンを押した後で非同期で実施されます。

実際に実行してみたら５〜７秒くらい平均してかかっていたので、エブリサイト側で少し待つことにしました。

再びエブリサイトのページ内処理

１．７秒待ってから、発行完了のダイアログを表示

２．OKを押したら、追加されたレコードを取得する

「kintoneにレコードを追加する」は、マッピングに利用したフィールドしかアクションの結果で参照ができません。
ですが、$id（レコードID）は保持しているとのことなので、レコード番号の代わりにレコードIDを使うことにしました。

クエリはこちら。

レコード番号 = "${$4.$id}”

３．取得したレコードから添付ファイルを取得してダウンロード

ついでにぐるぐる表示も終わらせます。

はい！ここまでで、無事エブリサイトの画面の方に発行した領収書PDFが表示されました！！！

これで、現地で慌てて手書きの領収書を作る必要もなく、また参加者の方が自分で発行とダウンロードまでできるようになります。

先に参加者のレコードを作っておく必要はありますが、せいぜい２０名くらいなので、CSVでチャチャッと登録すればOK。割と実用的なものに仕上がった気がします！（実際に使ってみないとわからんけども！！！）

さいごに

エブリサイト＋Job RunnerのWebhookカスタマイズがあればこんなことも可能です。
ぜひぜひ、いろんなアイデアを形にしてみてくださいね！

エブリサイトは2025年10月23日(木)リリース予定です。
価格表も発表されましたので、ご検討いただければと思います。

また、現在はプレビュー版の利用も可能です。
こちらから申し込みしてみてくださいね(∩´∀｀)∩

投稿者プロフィール

ほり

kintoneが好き過ぎる、自称帳票まにあ。
テクニカルサポートチーム所属。
「仕事をITでたのしく」をモットーに岡山県倉敷市から完全リモートワークしております！

最新の投稿

この投稿者のすべての記事

• gusuku2025年8月19日gusuku Everysiteを使って領収書発行ページを作ってみた
• gusuku2025年8月5日狩猟ギルドの在庫管理　その７〜マスターの更新競合！？〜
• gusuku2025年7月22日QRとJSON読み取りでいい感じの活用を考えてみた
• gusuku2025年7月8日AIとJSON読み取りでいい感じの活用を考えてみた