０．はじめに

kintone アプリにボタンを追加して、一覧のデータを更新するとか、やってみたんですが…。

cybozu.com に登録されているユーザーの情報を、kintone アプリに同期する。 - Qiita

結構、処理に時間が掛かっちゃうので、プログレスバーを表示する様にしてみました。

動き的には、こんな感じ。

１． kintone アプリに JavaScript ライブラリ (ProgressBar.js) を追加する。

こちらに素晴らしいライブラリがありましたので、利用させて頂きました。

bagelee (ベーグリー) さん、本当にどうもありがとうございます !!!

🙇‍♂️🙇‍♂️🙇‍♂️

記事の内容に従って、アプリに JavaScript ライブラリ (ProgressBar.js) を追加します。

プログレスバーを簡単に実装できるprogressbar.js - bagelee（ベーグリー）
- 「使い方」の「インストール方 (たぶん「インストール方法」が正しいと思う…) 」のところ

まずは、kintone アプリの「アプリの設定」を開きます。
「設定」タブを選択し、「カスタマイズ／サービス連携」→「JavaScript / CSSでカスタマイズ」を開きます。
「PC用のJavaScriptファイル」に以下の URL の設定を追加します。

２．元々の JavaScript ライブラリに、プログレスバーの div タグを配置する処理を追加する。

<div id="container"></div> 一行あれば、プログレスバーが配置されるみたいなので、元々の JavaScript ライブラリに、プログレスバーの div タグを配置する処理を追加します。

kintone.events.on('app.record.index.show', function(event) { の冒頭に、以下の処理を追加します。
```
var myProgressDiv = document.createElement('div');
myProgressDiv.id = "my_progress_container";
myProgressDiv.style.width = '600px';
myProgressDiv.style.height = '8px';
```
- myProgressDiv.id = "my_progress_container";
  - div タグのクラスID を設定します。　※好きな ID を設定して下さい。
- myProgressDiv.style.width = '600px';
  - 幅を指定。　※それぞれのページのレイアウトにあわせて、適切な値に変更して下さい。
- myProgressDiv.style.height = '8px';
  - 高さを指定。　※それぞれのページのレイアウトにあわせて、適切な値に変更して下さい。
kintone.events.on('app.record.index.show', function(event) { の末尾に、以下の処理を追加します。
```
kintone.app.getHeaderMenuSpaceElement().appendChild(myProgressDiv);
```
- ※ 配置先
  - kintone.app.getHeaderMenuSpaceElement()
  - kintone.app.getHeaderSpaceElement()

３．元々の JavaScript ライブラリのボタン押下時の処理に、プログレスバーの処理を追加する。

こちらの記事にサンプルコードが記載されてますので、参考にさせて頂きました。

ProgressBar.js - Progress bars with JavaScript

〜.onclick = async function() { の冒頭に以下の処理を追加します。

var bar = new ProgressBar.Line(my_progress_container, {
    strokeWidth: 4,
    easing: 'easeInOut',
    duration: 100,
    color: '#FFEA82',
    trailColor: '#eee',
    trailWidth: 1,
    svgStyle: {width: '100%', height: '100%'},
    text: {
        style: {
            color: '#999',
            position: 'relative',
            left: '560px',
            top: '-70px',
            padding: 0,
            margin: 0,
            transform: null
        },
        autoStyleContainer: false
    },
    from: {color: '#FFEA82'},
    to: {color: '#ED6A5A'},
    step: (state, bar) => {
        bar.path.setAttribute('stroke', state.color);
        bar.setText(Math.round(bar.value() * 100) + ' %');
    }
});

詳しい設定は、こちらをどうぞ。英語だけどね…。
- ProgressBar.js

あとは、bar.animate(x.x); を適切なところに埋め込みます。
- x.x は、0.0 〜 1.0 が設定出来ます。
- 処理の最後には 1.0 にする必要があります。
- その間では、適当に値を増やしてあげれば良いかと。

９９．ハマりポイント

ハマりポイントというか、そもそも HTML とか、JavaScript とかを普段あまり使わないので、慣れずに時間掛かっちゃいました…。
あとは、ProgressBar.js の使い方ですね。
サンプルコードがあったので、配置して、動かすことは比較的すぐ出来たんですが…。
そこからカスタマイズというか、ページに合わせて、レイアウトや機能の設定に時間が取られました…。
ドキュメントも英語だったりしたので…。

ＸＸ．まとめ

今回は、何もかくにも、

bagelee (ベーグリー) さん、

こんなに素晴らしいライブラリを利用させて頂いて、

本当にどうもありがとうございました !!!

🙇‍♂️🙇‍♂️🙇‍♂️

参考になれば♪

👋👋👋

Kintone アプリにプログレスバーを表示してみる。