アプリ活用研究会

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

アプリ活用研究会

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

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

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

  • 固定された記事

基本方針

中小企業経営者の目線で情報発信する。 具体的な事例の基づく課題の解決方法を紹介する アプリで出来ること、出来ないことを率直に述べる 専門的な説明をできるだけ省く

アプリ活用研究会

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

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

      アプリ活用研究会

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

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

        アプリ活用研究会

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

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

          アプリ活用研究会
        • 固定された記事

        基本方針

        アプリ活用研究会

        マガジン

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

        記事

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

          やりたいこと アプリにテーブル形式で関連レコードの明細表示と金額フィールドの合計を表示します。テーブル形式の表示パーツに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の実装（本番環境への導入方法と注意点）

          アプリ活用研究会

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

          やりたいこと アプリにテーブル形式で関連レコードの明細表示と金額フィールドの合計を表示します。テーブル形式の表示パーツに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分間隔で時…

          アプリ活用研究会

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

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

          アプリ活用研究会

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

          アプリ活用研究会

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

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

          アプリ活用研究会

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

          アプリ活用研究会

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

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

          アプリ活用研究会

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

          アプリ活用研究会

          アプリに文字列を操作するボタンの設置

          やりたいこと kintone UI Component v1を利用して、フォーム上に配置したボタンに任意の機能を実装します。今回は、フォーム上の文字列を操作する（任意の位置から任意の文字数を取り出す）機能を実装してみます。 今回のカスタマイズの特徴は、Kintoneの標準機能には無い「ボタン」というオブジェクトをKintoneライクなデザインでフォームに設置して、クリックで色々な機能（Function）を割り当てられることです。 kintone UI Componentに

          アプリ活用研究会

          アプリに文字列を操作するボタンの設置

          アプリ活用研究会

          チェックボックス項目の選択可／不可を条件で制御する

          やりたいこと kintone UI Component v1を利用して、チェックボックスの値条件で項目の選択可能／不可を制御するカスタマイズ例を紹介します。 kintone UI Componentについて 本稿では標準のチェックボックスと区別するために、kintone UI Component v1を利用したラジオボタンを「KUC版Chekbox」と呼びます。 まずは、以下のデモ画面をご覧ください。 KUC版チェックボックスのデモ画面デモ画面では、チェックボックスの

          アプリ活用研究会

          チェックボックス項目の選択可／不可を条件で制御する

          アプリ活用研究会

          選択肢が変化するチェックボックス

          やりたいこと kintone UI Component v1を利用して、他のフィールド値の変更で選択肢が変化するチェックボックスのカスタマイズ例を紹介します。 今回は、ドロップダウンリストの「会議種類」を変更すると「会議参加者」のチェックボックスの選択肢が変化するアプリを作ります。 kintone UI Componentについて 本稿では標準のチェックボックスと区別するために、kintone UI Component v1を利用したラジオボタンを「KUC版Chekbo

          アプリ活用研究会

          選択肢が変化するチェックボックス

          アプリ活用研究会