spin.js を使って、スピナー(ローディングアイコン)を設定しよう!

フォローする

(著者:株式会社ジョイゾー 山下 竜

今回はCybozu CDNにストックされたspin.jsを使ったスピナーの設定を行いたいと思います。

spin.js

spin.jsは、スピナー(スピンアイコン、ローディングアイコン、処理中表示)を設置するためのライブラリです。ストックされたCDNを見てもわかる通り、CSSやjQueryを伴わずJavaScriptのみで取扱いできることが特長とされています。

今回の適用方法・シナリオ

 spin.jsの基本的な使い方は設置する要素を設定してスタート/ストップをかけるという流れになります。しかし、今回はkintoneでの利用ということですので、REST APIによる処理量が大きくなった時に画面中央に処理中表示して、処理が終わったら非表示にするということをやってみたいと思います。

今回は、Cstapの落合さんが執筆されている「一覧画面で条件に応じたレコード件数を取得するテクニック」に適用してみます(まったく同様のアプリではないためqueryは変更しています)。こちらでは、レコード総数が100件を超えるアプリに対して処理中レコードをカウントできますが、レコード総数が増えてくるとAPIコール数も増え、「処理中のレコード件数」を表示するまでに多少の時間を要するようになってきます。そこで、ユーザーが処理中ということが分かるようにスピナーを表示させたいと思います。

準備(スピナー表示/非表示関数)

スピナーを表示、非表示させる関数を準備します。これらの関数を呼び出せるように宣言しておけば、あとは showSpinner() で表示、hideSpinner() で非表示することができます。spin.jsの元の特長を極力損なわず、CSSの指定をし直さなくて良いようこれらの関数中でスタイルを指定しておきます。なお、スピナー設置用のDOMの生成にjQueryを利用していますので、読み込んでおきましょう。

JavaScriptソースコード(countRecords.js)

JavaScript/CSSの設定

今回は、spin.jsとjQueryのJavaScriptをCybozu CDNからURL指定して、上のサンプル(countRecords.js)をファイルアップロードします。

動作確認

APIをコールして処理がストップするまでスピナーが表示され、ユーザーに処理中であることを知らせます。

処理が終了すると、スピナーが消えて「処理中のレコード件数」が表示されます。

ポイントとなるスピナー設定箇所は次の部分です。APIのコール前にshowSpinner()、APIの処理終了時(コールバック内)にhideSpinner()を記述しています。

注意事項

今回のkintoneアプリ周辺の注意点は次の通りです。

  • 筆者はMacintoshのGoogle Chromeでkintoneアプリの動作確認を行いました

最後に

今回は、spin.jsを使った全画面イメージのスピナーの設定についてお届けしました。今回のシナリオ(単純なレコード取得)ではあまり支障にはならないと思いますが、請求や勤怠データの翌月コピー等レコードの登録・更新時は途中でユーザー自身が別の操作に移ってしまったりするとトラブルの元になりますので、処理中・処理完了がこのような形で表現されると間違い防止・ユーザビリティの向上に繋がっていくと思います。是非お試し頂ければと思います!

デモ環境

https://dev-demo.cybozu.com/k/41/

※デモ環境についての説明はこちら

コメント

Avatar
Takashi Hosoya

上のspinだけのコードの箇所で ,(カンマ)が抜けています!
'left': '0px' の箇所です!

 

      $(spin_bg_div).css({
        'position': 'absolute',
        'top': '0px',
    'left': '0px' 'z-index': '500', 'width': '100%', 'height': '200%', 'background-color': '#000', 'opacity': '0.5', 'filter': 'alpha(opacity=50)', '-ms-filter': "alpha(opacity=50)" });
Avatar
cybozu Development team

Hosoya 様

いつもお世話になっております。
ご指摘の点、修正いたしました。ご連絡をありがとうございました。

今後ともよろしくお願いいたします。

ログインしてコメントを残してください。
Powered by Zendesk