アプリ活用研究会

中小企業の業務デジタル化を、無料又は低価格のアプリ活用で実現した事例を情報発信していま…

アプリ活用研究会

中小企業の業務デジタル化を、無料又は低価格のアプリ活用で実現した事例を情報発信しています。 基本方針は、専門的な説明をできるだけ省いて、中小企業経営者の目線で情報発信することです。 市販アプリ活用、ノーコードツール活用、その具体的な方法等を紹介して行きます。

  • Kinote UI Componentのカスタマイズ事例

    Kinote UI Component（略称：KUC）を利用したアプリのカスタマイズ事例の記事を掲載したマガジンです。 KUCは、kintone カスタマイズでの UI 開発などで「kintone のフォームのパーツを自作する」ためのライブラリです。 JavascriptコードでKintoneライクなフォームのパーツを自作できます。

  • Kintoneで関連レコードと合計を表示するテーブルの実装

    アプリにテーブル形式で関連レコードの明細表示と金額フィールドの合計を表示します。テーブル形式の表示パーツにkintone UI Component v1の部品ReadOnlyTable利用して、Kintoneライクな外見で表示します。 標準機能の関連レコードでは出来ない、合計表示や列の表示／非表示の切り替え等の機能を実装する手順を全5回の連載で公開しています。

固定された記事

Kintoneアプリにボタン操作で現在日時を記録したい

Kintoneのカスタマイズ要望のお話です。 よくある相談事に「アプリの日時フィールドに現在日時を自動セットするボタンを追加したい」という要望があります。 【結論】 Kint…

3,000
アプリ活用研究会
アプリ活用研究会
8か月前
4

テーブルの邪魔な列を非表示にする

やりたいこと kintoneの経費精算アプリで、科目別の集計行を計算フィールドで作成してますが、新規レコード登録と編集画面では、テーブルが横長になり過ぎて操作しづらい…

アプリ活用研究会
アプリ活用研究会
8時間前

アプリのテーブルに入力補助機能を付加する

やりたいこと Kintoneアプリのテーブル中のフィールドに入力補助機能を付けたい。 具体的には、テーブルの各項目にプレイスホルダー（代用文字）やツールチップ（吹き出し…

アプリ活用研究会
アプリ活用研究会
6日前

文字列複数行フィールドに入力支援機能を追加する

やりたいこと Kintoneアプリの文字列複数行フィールドに、入力でユーザーが迷わない様に入力例を表示する「placeholder（代用文字）」を実装したい。 「placeholder」と…

アプリ活用研究会
アプリ活用研究会
13日前

文字列1行フィールドに入力支援機能を追加する。

やりたいこと Kintoneのアプリは、直感的に使えるＵＩ（ユーザーインターフェイス）を備えていますが、それでも入力方法に迷うユーザーの為に入力支援機能を画面上で表示…

アプリ活用研究会
アプリ活用研究会
3週間前
2

関連レコードと合計を表示するテーブルの実装（５／５）

やりたいこと アプリにテーブル形式で関連レコードの明細表示と金額フィールドの合計を表示します。テーブル形式の表示パーツにkintone UI Component v1の部品ReadOnlyTab…

アプリ活用研究会
アプリ活用研究会
4週間前
2

アプリに操作ガイドのツールチップを実装する

やりたいこと Kintoneアプリの操作でユーザーが迷わない様に、操作方法のガイド等を表示する「ツールチップ」を実装したい。 標準機能ではアプリのフォームに「ツールチッ…

アプリ活用研究会
アプリ活用研究会
1か月前

関連レコードと合計を表示するテーブルの実装（４／５）

やりたいこと アプリにテーブル形式で関連レコードの明細表示と金額フィールドの合計を表示します。テーブル形式の表示パーツにkintone UI Component v1の部品ReadOnlyTab…

アプリ活用研究会
アプリ活用研究会
1か月前

kintone UI Componentの実装（本番環境への導入方法と注意点）

kintone UI Componentとは kintone UI Component（以降「KUC」と略す場合もあります）は、kintone カスタマイズでの UI 開発などで「kintone のフォームのパーツを自作す…

アプリ活用研究会
アプリ活用研究会
1か月前
2

関連レコードと合計を表示するテーブルの実装（３／５）

やりたいこと アプリにテーブル形式で関連レコードの明細表示と金額フィールドの合計を表示します。テーブル形式の表示パーツにkintone UI Component v1の部品ReadOnlyTab…

アプリ活用研究会
アプリ活用研究会
1か月前
4

関連レコードと合計を表示するテーブルの実装（２／５）

やりたいこと アプリにテーブル形式で関連レコードの明細表示と金額フィールドの合計を表示します。テーブル形式の表示パーツにkintone UI Component v1の部品ReadOnlyTab…

アプリ活用研究会
アプリ活用研究会
1か月前
2

関連レコードと合計を表示するテーブルの実装（１／５）

やりたいこと アプリにテーブル形式で関連レコードの明細表示と金額フィールドの合計を表示します。テーブル形式の表示パーツにkintone UI Component v1の部品ReadOnlyTab…

アプリ活用研究会
アプリ活用研究会
1か月前
2

日時フィールドの時刻開始～終了範囲の変更＆15分間隔で時刻選択を可能にする

やりたいこと kintone標準機能の日時フィールドは日付と時刻の入力支援ツール（Picker）が使える入力部品ですが、時刻部分の入力範囲が00:00～23:59のフルタイムで時刻選…

1,000
アプリ活用研究会
アプリ活用研究会
2か月前
1

時刻フィールドの開始～終了範囲の変更＆15分間隔で時刻選択を可能にする

やりたいこと kintone標準機能の時刻フィールドは入力範囲が00:00～23:59のフルタイムで時刻選択も30分間隔であり、この設定を変更することはできません。 参照：Kintone…

アプリ活用研究会
アプリ活用研究会
2か月前
1

アプリに現在日時を入力するボタンとダイアログを実装する

やりたいこと kintone UI Component v1を利用したボタンとダイヤログ（情報ウィンド）を組み合わせて、ボタンクリック時の現在日時をアプリの日時フィールドにセットする…

アプリ活用研究会
アプリ活用研究会
2か月前
4

ダイアログ表示でアプリのフィールド値を警告する

やりたいこと kintone UI Component v1を利用して、アプリのフィールド値が入力規則に違反している場合の警告ウィンドをkintoneライクなデザインのダイアログで表示します…

アプリ活用研究会
アプリ活用研究会
2か月前
2
固定された記事

Kintoneアプリにボタン操作で現在日時を記録したい

Kintoneのカスタマイズ要望のお話です。 よくある相談事に「アプリの日時フィールドに現在日時を自動セットするボタンを追加したい」という要望があります。 【結論】 Kintoneの標準機能では実現できません。 Kintoneの標準機能には、Excelで使える「Today関数」や「Now関数」が実装されて無いからです（2023/09/09 現在） しかし、Javascriptによるカスタマイズ機能で「実現可能」です。 Javascriptカスタマイズのソースコード例を以下に

3,000
アプリ活用研究会

テーブルの邪魔な列を非表示にする

やりたいこと kintoneの経費精算アプリで、科目別の集計行を計算フィールドで作成してますが、新規レコード登録と編集画面では、テーブルが横長になり過ぎて操作しづらいので、科目別の計算フィールドを非表示にしたい。 kintoneではsumif関数が使えないので、代替手段としてkintoneヘルプページの「kintoneにSUMIF関数はありますか？」で紹介されているアプリ作成例とJavascriptカスタマイズの合わせ技です。 テーブルの科目別の金額を集計するために、３

アプリ活用研究会

アプリのテーブルに入力補助機能を付加する

やりたいこと Kintoneアプリのテーブル中のフィールドに入力補助機能を付けたい。 具体的には、テーブルの各項目にプレイスホルダー（代用文字）やツールチップ（吹き出し型のヒント）を実装したい。 標準機能のテーブルでは、この様なカスタマイズは出来ませんので、本稿では、kintone UI Component v1のTableを利用してカスタマイズ版のテーブル（ＫＵＣ版テーブルと呼びます）を作成する事例を紹介します。 ＫＵＣ版テーブルの役割はテーブル枠機能だけなので、他のコ

アプリ活用研究会

文字列複数行フィールドに入力支援機能を追加する

やりたいこと Kintoneアプリの文字列複数行フィールドに、入力でユーザーが迷わない様に入力例を表示する「placeholder（代用文字）」を実装したい。 「placeholder」とは、入力フィールド空欄時に「入力例」として表示される半透明のテキストのことです。 表示されているだけで入力値にならないテキストです。 標準機能では文字列（複数行）フィールドに「placeholder」を付ける機能は無いので本稿では、kintone UI Component v1のTex

アプリ活用研究会

文字列1行フィールドに入力支援機能を追加する。

やりたいこと Kintoneのアプリは、直感的に使えるＵＩ（ユーザーインターフェイス）を備えていますが、それでも入力方法に迷うユーザーの為に入力支援機能を画面上で表示できると良いですね。 例えば、Kintoneアプリの文字列１行フィールドに、入力でユーザーが迷わない様に入力支援機能（代用文字、ツールチップなど）を追加します。 今回は「placeholder（代用文字）」の実装方法を紹介します。 「placeholder」とは、入力フィールド空欄時に「入力例」として表示され

アプリ活用研究会

関連レコードと合計を表示するテーブルの実装（５／５）

やりたいこと アプリにテーブル形式で関連レコードの明細表示と金額フィールドの合計を表示します。テーブル形式の表示パーツにkintone UI Component v1の部品ReadOnlyTable利用して、Kintoneライクな外見で表示します。 ※本記事では「KUC版読取り専用テーブル」と呼びます。 ※サンプルとしてKintoneアプリストアの「営業支援パック」を使用します。 今回のカスタマイズは、全体で120行を超える大きなコードになりますので、手順を分割して全部

アプリ活用研究会

アプリに操作ガイドのツールチップを実装する

やりたいこと Kintoneアプリの操作でユーザーが迷わない様に、操作方法のガイド等を表示する「ツールチップ」を実装したい。 標準機能ではアプリのフォームに「ツールチップ」を付ける機能は無いので kintone UI Component v1のコンポーネントTooltipを利用して実装します。 「ツールチップ」とは、kintoneの基本操作のアイコンにも表示される吹き出し型のヒント文字のことです。 デモ画面 デモ画面では、タイトル文字の入力方法をツールチップで表示して

アプリ活用研究会

関連レコードと合計を表示するテーブルの実装（４／５）

やりたいこと アプリにテーブル形式で関連レコードの明細表示と金額フィールドの合計を表示します。テーブル形式の表示パーツにkintone UI Component v1の部品ReadOnlyTable利用して、Kintoneライクな外見で表示します。 ※本記事では「KUC版読取り専用テーブル」と呼びます。 ※サンプルとしてKintoneアプリストアの「営業支援パック」を使用します。 今回のカスタマイズは、全体で120行を超える大きなコードになりますので、手順を分割して全部

アプリ活用研究会

kintone UI Componentの実装（本番環境への導入方法と注意点）

kintone UI Componentとは kintone UI Component（以降「KUC」と略す場合もあります）は、kintone カスタマイズでの UI 開発などで「kintone のフォームのパーツを自作する」ためのライブラリです。 JavascriptコードでKintoneライクなフォームのパーツを自作できます。 通常、Kintoneのフィールドの設定値（例：ラジオボタンの選択肢等）は、Javascriptで変更することはできません。 しかし、kinto

アプリ活用研究会

関連レコードと合計を表示するテーブルの実装（３／５）

やりたいこと アプリにテーブル形式で関連レコードの明細表示と金額フィールドの合計を表示します。テーブル形式の表示パーツにkintone UI Component v1の部品ReadOnlyTableを利用して、Kintoneライクな外見で表示します。 ※本記事では「KUC版読取り専用テーブル」と呼びます。 ※サンプルとしてKintoneアプリストアの「営業支援パック」を使用します。 今回のカスタマイズは、全体で120行を超える大きなコードになりますので、手順を分割して全

アプリ活用研究会

関連レコードと合計を表示するテーブルの実装（２／５）

やりたいこと アプリにテーブル形式で関連レコードの明細表示と金額フィールドの合計を表示します。テーブル形式の表示パーツにkintone UI Component v1の部品ReadOnlyTableを利用して、Kintoneライクな外見で表示します。 ※本記事では「KUC版読取り専用テーブル」と呼びます。 ※サンプルとしてKintoneアプリストアの「営業支援パック」を使用します。 今回のカスタマイズは、全体で120行を超える大きなコードになりますので、手順を分割して全

アプリ活用研究会

関連レコードと合計を表示するテーブルの実装（１／５）

やりたいこと アプリにテーブル形式で関連レコードの明細表示と金額フィールドの合計を表示します。テーブル形式の表示パーツにkintone UI Component v1の部品ReadOnlyTable利用してKintoneライクな外見で表示します。 この方法の良い点は、アプリのフォーム上に表形式でデータ表示する処理をHTMLの＜TABLE＞タグで記述する面倒な手間が無いことです。 kintone UI Component v1コンポーネントReadOnlyTableのプロパ

アプリ活用研究会

日時フィールドの時刻開始～終了範囲の変更＆15分間隔で時刻選択を可能にする

やりたいこと kintone標準機能の日時フィールドは日付と時刻の入力支援ツール（Picker）が使える入力部品ですが、時刻部分の入力範囲が00:00～23:59のフルタイムで時刻選択も30分間隔であり、この設定を変更することはできません。 参照：Kintoneヘルプ／日時 しかし、時刻部分の表示範囲を会社の営業時間内に制限したり、時刻選択の間隔をもっと細かくしたいという現場ニーズはあると思います。 kintone UI Component v1を利用すれば、日時フィール

1,000
アプリ活用研究会

時刻フィールドの開始～終了範囲の変更＆15分間隔で時刻選択を可能にする

やりたいこと kintone標準機能の時刻フィールドは入力範囲が00:00～23:59のフルタイムで時刻選択も30分間隔であり、この設定を変更することはできません。 参照：Kintoneヘルプ／時刻 しかし、時刻の表示範囲を会社の営業時間内に制限したり、時刻選択の間隔をもっと細かくしたいという現場ニーズはあると思います。 kintone UI Component v1を利用すれば、時刻の開始～終了範囲を変更したり、時刻選択の間隔を自由指定できる時刻フィールドを作成できます。

アプリ活用研究会

アプリに現在日時を入力するボタンとダイアログを実装する

やりたいこと kintone UI Component v1を利用したボタンとダイヤログ（情報ウィンド）を組み合わせて、ボタンクリック時の現在日時をアプリの日時フィールドにセットする処理を実装してみました。 「現在日時取得」ボタンをクリックしたら、ダイヤログ（情報ウィンド）を表示してダイヤログの［OK］ボタンを押したら、現在日時を取得してセットし［キャンセル」ボタンを押したら現在日時の値を空白にリセットします。 デモ画面 以前、現在日時を記録するボタンを設置するカスタ

アプリ活用研究会

ダイアログ表示でアプリのフィールド値を警告する

やりたいこと kintone UI Component v1を利用して、アプリのフィールド値が入力規則に違反している場合の警告ウィンドをkintoneライクなデザインのダイアログで表示します。 デモ画面 デモ画面では「登録日 < 実行予定日」で日付を指定する入力規則を設定していますので、入力規則に違反した日付の指定をすると、ダイヤログで警告を表示しています。 入力規則の設定とダイアログ表示は、Javascriptによるカスタマイズで実現しています。 Javascrip

アプリ活用研究会