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

０．はじめに

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

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

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

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

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

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

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

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

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

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

1. まずは、kintone アプリの「アプリの設定」を開きます。
   
   
   
2. 「設定」タブを選択し、「カスタマイズ／サービス連携」→「JavaScript / CSSでカスタマイズ」を開きます。
   
   
   
3. 「PC用のJavaScriptファイル」に以下の URL の設定を追加します。
   • https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.js
   • https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.min.js
   • 

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

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

1. 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';`
        * 高さを指定。　※それぞれのページのレイアウトにあわせて、適切な値に変更して下さい。
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

1. 〜.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](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/) さん、

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

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

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

参考になれば♪

👋👋👋