【kintone】コーヒーボタンを実装する＊ポータルカスタマイズ＊

初めは業務にできるだけ関係のあるプログラムをこちらに投稿していこうと心に決めていましたが、如何せん全く思いつかないことと、プログラムをタイプする手が止まってしまいました。そのためブログに投稿する内容をとにかく自分がやりやすい形まで落としてみようと思い、プライベートで利用しているkintone(チーム応援ライセンス)のポータルカスタマイズの内容などを投稿していくことにしました。

プライベートkintoneでマイログと名付けたアプリを使って、自分の日々の生活のログを収集しています。まだ本格稼働できていないもののちょこちょこ日々のデータを投入して行っているのですが、如何せん毎日レコード登録するのが件数多くなるとしんどい。投稿する内容は基本的に、日付以外は同じなんだからもっと簡単にポチッとできないものかと思い立ち、ポータル画面上に「コーヒー」ボタンを実装してみました。

マイログアプリ

実際に使用しているマイログアプリの詳細画面のキャプチャです。
マイログの種類は、別途マイログマスタで登録したものをルックアップ機能を用いて設定してます。
以下の例の場合は、コーヒーの缶とペットボトル両方を兼ねた購入回数のカウントログとなります。
この場合、基本的に毎回の登録で変更すべきなのは「登録日付」の部分のみとなります。
そのため、それ以外の項目の値は固定値なんです。

完成形について

キャプチャのようにポータル画面にログインするとトップにででーんと「コーヒー」ボタンを配置しました。
これでこのボタンを押下するだけで毎日の缶コーヒーの購入ログも簡単にポチッと登録できるようになります。
押下すると「登録しました」とメッセージが表示されます。
上のスクショがPCから。下のスクショがスマートフォンのアプリからです。

ソースコードについて

kintone-cliを利用して開発環境を整備しました。
ポータル画面上のボタンのデザインは、bootstrap@5.00を利用しています。
ポータル画面全体のデザインは、chromeブラウザの拡張で、「Kintone Portal Designer」をインストールして「classic-all」のテンプレートを利用しています。（※中身のコンテンツ部分のHTMLはマルっと消しています）
その上で、コーヒーボタンのボタン要素のidプロパティに「#blackCoffee」と設定しています。
また日付を算出する部分は、Luxonライブラリをインポートして算出しています。
プログラムの書き方など変えたほうが良い部分ありましたらご指摘いただけますと幸いです。

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import {DateTime} from 'luxon';

//const App = () => {
//  return <span>Hello from kintone CLI</span>;
//};

(() => {
  kintone.events.on(['portal.show','mobile.portal.show'], (event) => {

    // コーヒーボタンの要素を取得
    const black_coffee = document.querySelectorAll('#blackCoffee')[0];

    // コーヒーボタンに押下された場合の処理を追加する
    black_coffee.addEventListener('click', () => {

      const record = {};
      record['マイログ'] = {
        'value': 'ペットボトル/缶購入'
      }

      record['補助分類'] = {
        'value': 'ブラックコーヒー'
      }

      record['登録日付'] = {
        'value': DateTime.local().toFormat('yyyy-MM-dd')
      }

      record['登録値'] = {
        'value': 1
      }

      const param = {
        app : 41
        , record : record
      }

      return kintone.api(kintone.api.url('/k/v1/record'), 'POST', param,
      (res) => {
        window.alert('マイログアプリへの登録に成功しました。');
        console.log(res);
      }, (error) => {
        window.alert('マイログアプリへの登録に失敗しました。');
        console.log(error);
      })

    });

    //const container = document.createElement('div');
    //kintone.app.getHeaderSpaceElement().append(container);

    //ReactDOM.render(<App />, container);

    return event;
  });
})();

Kintone Portal Designer(HTMLのみ)

<div class="designportal designportal-classic">
  <div class="classic-container">
    <div class="classic-column classic-option_flex">
      <div class="classic-contents classic-option_flex-3">
        <section class="classic-contents_wrap classic_flex-1">
          
          <div class="classic-contents_item classic_spacer">
            
            <button type="button" id="blackCoffee" class="btn btn-outline-primary">コーヒー</button>
            
          </div>
        </section>
      </div>
      <div class="classic-contents classic-option_flex-2">
        

      </div>
    </div>
  </div>
</div>

実装してみた結果

めっちゃ便利。アプリまで開いて登録していたのが、全てポータル画面上で完結するため、すごく楽チンになりました。
そう、コーヒーの登録のみはね・・・。

更新履歴