０．はじめに

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

2. 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

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

2. あとは、bar.animate(x.x); を適切なところに埋め込みます。

   • x.x は、0.0 〜 1.0 が設定出来ます。
   • 処理の最後には 1.0 にする必要があります。
   • その間では、適当に値を増やしてあげれば良いかと。

９９．ハマりポイント

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

ＸＸ．まとめ

今回は、何もかくにも、

bagelee (ベーグリー) さん、

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

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

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

参考になれば♪

👋👋👋