Progress Bar JS ライブラリーを使ってプロジェクトの進捗度をプログレスバーで表示してみよう！

kintone カスタマイズ
1

こちらのカスタマイズを実行しようとしたのですが正常に実行できません ” [Progress Bar JS ライブラリーを使ってプロジェクトの進捗度をプログレスバーで表示してみよう！ - cybozu developer network](https://cybozu.dev/ja/kintone/tips/development/customize/record-list-customize/show-progress-bar-using-progress-bar-js/#show-status-test)” こちらのURLを参考にしたのですが
Progress Bar のライブラリーを Github (External link) からダウンロードします。
「progressbar.js」のファイルをダウンロードします。と記載されているんですが、通り行ったのですが掲載されている画像が
43KBなのですが実際にダウンロードして貼り付けると約93KBと容量が明らかに違います正常に実際出来ないのでどなたか教えていただきたいです

2

記事の画像を拝見するに、当時のバージョンはこれかな、、と思います。（動かない理由は別にあるかもしれませんが一度試してみるといいかもです）

3

同じURLに記載されていたJavascriptのサンプルです
こちらをVisual Studio Codeでコピペして張り付けてました。
※ちなみに先ほどURLのコードも同じくコピペしました
それでも正常になりませんこのコードに修正点がございましたら
教えていただければ幸いです

/*

  • Progress Bar sample program

  • Copyright (c) 2023 Cybozu

  • Licensed under the MIT License

  • https://opensource.org/license/mit/
    */
    (() => {
    ‘use strict’;
    // レコード一覧イベント
    kintone.events.on(‘app.record.index.show’, (event) => {
    if (event.viewId !== 1234) { // 作成した一覧の ID を指定
    return event;
    }
    const records = event.records;// 一覧レコードの取得
    const elements = kintone.app.getFieldElements(‘progress’); // 一覧の「Progress」フィールドの要素を取得
    const appId = kintone.app.getId();// アプリのIDを取得

    for (let i = 0; i < records.length; i++) {
    const id = Number(records[i].$id.value);// 一覧のレコードIDを取得
    const body = {
    app: appId,
    id: id
    };
    kintone.api(kintone.api.url(‘/k/v1/record.json’, true), ‘GET’, body, (resp) => { // 取得したレコードIDの詳細情報を取得
    // success
    console.log(‘Success’);
    elements[i].width = ‘200px’; // Progress Barの表示幅の設定
    const record = resp.record;
    const bar = new ProgressBar.Line(elements[i], { // Progress Barの表示方法指定
    strokeWidth: 4,
    easing: ‘easeInOut’,
    duration: 1400,
    color: ‘#FFEA82’,
    trailColor: ‘#eee’,
    trailWidth: 1,
    svgStyle: {width: ‘100%’, height: ‘100%’},
    text: { // 表示するテキストのスタイル設定
    style: {
    color: ‘#999’,
    right: ‘0’,
    top: ‘30px’,
    padding: 0,
    margin: 0,
    transform: null,
    ‘text-align’: ‘center’
    },
    autoStyleContainer: true
    },
    from: {color: ‘#FFEA82’},
    to: {color: ‘#ED6A5A’},
    step: (state, stepBar) => {
    stepBar.setText(Math.round(stepBar.value() * 100) + ’ %'); // Progress Barに表示するテキストの設定
    }
    });
    let progress = 0;
    switch (record.ステータス.value) { // プロセス管理のステータスに応じたBarの長さの設定
    case ‘未着手’:
    progress = 0;
    break;
    case ‘作業中’:
    progress = 25;
    break;
    case ‘レビュー中’:
    progress = 50;
    break;
    case ‘再調整中’:
    progress = 75;
    break;
    case ‘再レビュー中’:
    progress = 75;
    break;
    case ‘完了’:
    progress = 100;
    break;
    default:
    progress = 0;
    break;
    }
    bar.animate((progress / 100).toFixed(1)); // 0.0 から 1.0 の数値を設定
    }, (error) => {
    // error
    console.log(error);
    });
    }
    return event;
    });
    })();

4

原因を特定する必要が先にありますため、まずは何かエラー出てるかみてもらえるといいとおもいます！