LoginSignup
9
5

More than 3 years have passed since last update.

kintoneアプリから使えるカスタム帳票アプリを作ってみた

Posted at

はじめに

皆さん、Low-code platform (ロー・コード・プラットフォーム) って使ってますか?
海外勢では、SalesforceZohoMendix等が有名ですが、日本発で奮闘しているのがサイボウズのkintoneです。

どのプラットフォームもコーディング無し、または、ほんの少しのコーディングで、つまりGUIからの設定のみで、非常に迅速に業務アプリの構築を可能としています。
多くのプラットフォームでは、これで承認ワークフローやレポート・ダッシュボードによる分析、メッセージングツールまで統合されているのですから、簡単に作れるからと言って侮れません。

もちろん、ノー・コードではなくロー・コードですので、必要に応じて(必要でなくても)ゴリゴリコードを書いて開発することもできます。
一般的にスクリプト実行の仕組みと外部からコール可能なWeb APIが用意されていますので、独自ロジック・画面の実現、機能拡張や外部連携が可能です。
大抵の場合、機能拡張やAppのマーケットプレイスも提供されています。

モチベーション

今回、私はkintone用の帳票アプリを作成しました。
https://github.com/shellyln/menneu-reporting-app-for-kintone

海外事情は分かりませんが、本邦においては各Low-code platformに於いて(も)、帳票アプリ・帳票機能拡張が大人気となっております。
今どきのご時世、レポート・ダッシュボードとCSV出力があれば、余程の場合を除いて紙なんて必要無い筈なのですが、私のこれまで携わった仕事でもプラットフォームの種類に関わらず、漏れなく大人気でした。
Salesforceでもkintoneでも、標準の「印刷」機能はあるのですが、どうやらお気に召して頂けないようです。
各プラットフォーム定番のこれとかこれ等を使うことも多いのですが、デザインやセクションヘッダ・フッタの作成に制約があり、苦労することもあります。

Salesforceでは、最悪、Visualforceでhtml帳票という、よく舗装された逃げ道がありますが、kintoneで同様のことをするためには、各画面のクライアント側コードでhtmlを生成して別タブ等で開く必要があります。
これは、ReactやVueでSSRと同様にhtmlを作り、最終的にBlob URLを作れば実現できるのですが、毎度各画面で行うには負担が大きいです。

ソリューション

https://github.com/shellyln/menneu-reporting-app-for-kintone
では、帳票定義を作成・編集・プレビューするアプリ(帳票テンプレート App)と、
各アプリの一覧または詳細画面に帳票ボタンを追加するためのスクリプトファイルを用意しました。

  • 帳票アプリでの編集 - テキストエリアはAce editorになってます
    reportingapp-editview.png

  • 各アプリでの帳票ボタン表示
    app-example-1.png

帳票アプリでは、markdown、または、JSXの代替記法として作成したLSX(lispだよ!)を使用して帳票を定義できます。プレビュー機能もあるので、編集しながらレイアウトを確認できます。
LSXでのデザインでは、Paper CSSがコンポーネントとして使用できるので、格好良いプレビュー付きhtml帳票が作成できます。

主な機能

  • MarkdownまたはLSXによる帳票定義
  • 帳票デザイン時のプレビュー
    • プレビューデータを対象アプリから取得することもできます
  • QRコード、バーコード表示 (詳細はこちら → Demo (Markdown))
  • UMLダイアグラム(Plant UML)表示 (詳細はこちら → Demo (Markdown))
  • グラフ(Chart.js)表示 (詳細はこちら → Table and chart (Markdown))

インストール・セットアップ

上記のアプリのGitHubリポジトリにある手順に従ってください。
アプリテンプレートのzipは用意しておりません。御免なさい。

さいごに

書かなくてよいコードは書かずに、楽しいコーディング、したいですね

9
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
5