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

# ０．はじめに

[kintone](https://kintone.cybozu.co.jp/) アプリにボタンを追加して、一覧のデータを更新するとか、やってみたんですが…。

* [cybozu\.com に登録されているユーザーの情報を、kintone アプリに同期する。 \- Qiita](https://qiita.com/kusokamayarou/items/b394dae98fc6293e1e86)

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

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

![out.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/f4760a9c-8eb6-81f5-efe4-7ffdd3d7faff.gif)

# １． [kintone](https://kintone.cybozu.co.jp/) アプリに JavaScript ライブラリ ([ProgressBar.js](https://kimmobrunfeldt.github.io/progressbar.js/#intro)) を追加する。

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

[bagelee \(ベーグリー\)](https://bagelee.com/) さん、本当にどうもありがとうございます !!!

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

記事の内容に従って、アプリに JavaScript ライブラリ ([ProgressBar.js](https://kimmobrunfeldt.github.io/progressbar.js/#intro)) を追加します。

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

1. まずは、[kintone](https://kintone.cybozu.co.jp/) アプリの「アプリの設定」を開きます。
<br><br>
1. 「設定」タブを選択し、「カスタマイズ／サービス連携」→「JavaScript / CSSでカスタマイズ」を開きます。
<br><br>
1. 「PC用のJavaScriptファイル」に以下の URL の設定を追加します。
    * https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.js
    * https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.min.js
    * ![FireShot Capture 382 - JavaScript _ CSSでカスタマイズ - genbasupport.cybozu.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/da7a7198-9c59-ce5b-0db3-719bf3d163e3.png)

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

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

1. `kintone.events.on('app.record.index.show', function(event) {` の冒頭に、以下の処理を追加します。

    ```javascript
    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';`
        * 高さを指定。　※それぞれのページのレイアウトにあわせて、適切な値に変更して下さい。
1. `kintone.events.on('app.record.index.show', function(event) {` の末尾に、以下の処理を追加します。

    ```javascript
    kintone.app.getHeaderMenuSpaceElement().appendChild(myProgressDiv);
```
    * ※ 配置先
        * [kintone.app.getHeaderMenuSpaceElement()](https://developer.cybozu.io/hc/ja/articles/201942004-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E4%B8%80%E8%A6%A7%E6%83%85%E5%A0%B1%E5%8F%96%E5%BE%97#step4)
        * [kintone.app.getHeaderSpaceElement()](https://developer.cybozu.io/hc/ja/articles/201942004-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E4%B8%80%E8%A6%A7%E6%83%85%E5%A0%B1%E5%8F%96%E5%BE%97#step5)

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

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

* [ProgressBar\.js \- Progress bars with JavaScript](https://kimmobrunfeldt.github.io/progressbar.js/)

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

    ```javascript
    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](https://progressbarjs.readthedocs.io/en/latest/)
1. あとは、`bar.animate(x.x);` を適切なところに埋め込みます。
    * x.x は、0.0 〜 1.0 が設定出来ます。
    * 処理の最後には 1.0 にする必要があります。
    * その間では、適当に値を増やしてあげれば良いかと。

# ９９．ハマりポイント

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

# ＸＸ．まとめ

今回は、何もかくにも、

[bagelee \(ベーグリー\)](https://bagelee.com/) さん、

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

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

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

参考になれば♪

👋👋👋