Migaro. 技術Tips

                       

ミガロ.　製品の技術情報
IBMiの活用に役立つ情報を掲載！


SmartPad4iで処理中表示をする方法

Webサイトやアプリケーションなどで、処理中にローディング画面が表示されるのを見たことがあるのではないでしょうか。処理中である旨の画面が表示されていると、ユーザーの心理的不安を軽減することができます。Tipsでは、SmartPad4iのアプリケーションで、ボタンを押下してIBMi側に送信処理をしている際などに処理中(ローディング画面)を表示する方法をご紹介します。

SmartPad4iで処理中表示をする方法

SmartPad4iアプリケーションでは、作成したプログラムが遷移する際はHTTPリクエストが発生して画面が切り替わります。
つまり、HTTPリクエストを送信する際に、処理中表示すること、画面遷移後、画面の読み込みが完了するまで処理中表示することの2つが必要になります。
Tipsでは、以下の順序で実装方法について説明します。

  • 処理中画面（スピナー）の作成
  • 画面の読み込みが完了するまでの画面表示
  • HTTPリクエストを送信する際に画面表示

処理中画面（スピナー）の作成

処理中に表示するスピナーを作成します。
「CSS スピナー」等でWEB検索するとサンプルが沢山見つかるため参考にして作成してください。

Single Element CSS Spinners を使用して作成

以下のように、簡単に処理中画面(CSSスピナー)を作成できるサイトもありますので利用して作成ください。

■Single Element CSS Spinners
https://projects.lukehaas.me/css-loaders/

Tipsでは上記のサイトを利用します。

Single Element CSS Spinners

このサイトでは、左上の色設定を変更することで、カラーを変更したスピナー表示を作成してくれます。

Single Element CSS Spinners

View Sourceのリンクをクリックするとcssとhtmlが表示されます。
作成されたcssをコピーして、loading.cssファイルを作成してください。
SmartPad4iアプリケーションのhtmlでは、loading.cssを外部cssとして読み込むように設定します。

例えば、SP4IREP21というライブラリにアプリケーションを作成している場合、Webサーバー側の「DocumentRoot」/smartpad4i/html/SP4IREP21/
にcssフォルダを作成して、その配下にloading.cssを配置すると、html内に以下記述を追加することで読み込むことができます。

<link rel="stylesheet" href="../../../smartpad4i/html/SP4IREP21/css/loading.css">

html内のどこに記述して問題ありません。headタグ内や、 body終了タグ前等に追加してください。

CSSスピナーを画面中央に配置

作成したCSSスピナーを画面の中央に表示するために、要素をラップします。
サイトで作成したHTMLは以下になります。

<div class="loader">Loading...</div>

上記要素をラップするために、div要素のclass属性 loader-warpを追加してCSSスピナーを画面中央に表示します。

なお、以下のHTMLはJavaScriptから出力するように設定するため、SmartPad4iアプリケーションのhtml画面に追加する必要はありません。

<div class="loader-wrap" style="z-index:200">
  <div class="loader">Loading...</div>
</div>

ラップしたdiv要素のclass属性 loader-warpに対してcssを追加設定します。
loading.cssに以下定義を追加してください。

.loader-wrap {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    top: 0px;    
    background-color:#000000;
    opacity:0.5;   
    z-index:100;
}

画面の読み込みが完了するまでの画面表示

画面の表示が完了するまでの間に、CSSスピナーを表示するJavaScriptを追加します。
JavaScriptもcssと同じで、外部jsとして作成してください。

JavaScriptファイルと読み込みの設定

SP4IREP21というライブラリにアプリケーションを作成している場合、Webサーバー側の「DocumentRoot」/smartpad4i/html/SP4IREP21/
にjsフォルダを作成して、その配下にloading.jsを配置すると、html内に以下記述を追加することで読み込むことができます。

また、TipsのJavaScriptではjQueryを使用するため外部ライブラリも併せて読み込むように設定を追加してください。

以下記述は、body終了タグ前に追加します。

～ 省略 ～
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="../../../smartpad4i/html/SP4IREP21/js/loading.js"></script> 
</body>

loading.jsの記述

loading.jsファイル内では$(function()){ 以下に実行したい処理を記述します。
$(function()){ はjQueryのライブラリ読み込みが完了してDOM要素が作成されると実行されます。

var SP4iExt = null;
$(function(){
    //ローディング
    if(!SP4iExt){
        SP4iExt = {}; SP4iExt.wait = {}; 
        SP4iExt.wait = {
          loadhtml:"",  
          className: ".loader-wrap", 
          show:function(){
              if(!this.loadhtml){
              this.loadhtml =  $('<div class="' + this.className.toString().substr(1) + '" style="z-index:200"><div class="loader">Loading...</div></div>');
                $('body').prepend(this.loadhtml);
              }
              $(this.className).fadeIn();          
              setTimeout(function(){SP4iExt.wait.hide();},20000);
          } ,
          hide:function(){
              $(this.className).fadeOut();
              $(window).off('load');
          }
        } 

        $(window).on('load',function(){
           SP4iExt.wait.hide();  //②表示
        });    
        SP4iExt.wait.show();  //①表示
    }
    
});

赤文字部分は、CSSスピナーの表示/非表示を切り替える処理になります。
画面読み込み時に①の処理 SP4iExt.wait.show(); が呼び出されることでCSSスピナーが表示されます。

$(window).on(‘load’,function(){});　の箇所はHTML全体が読み込まれた際(画像等の読み込み完了時)に発生します。
読込完了時に ②のSP4iExt.wait.hide(); を実行してCSSスピナーを非表示に変更します。
以上で読み込み時のCSSスピナー表示は完了です。

HTTPリクエストを送信する際に画面表示

次に、SmartPad4iのHTML画面側でHTTPリクエストを送信する際の処理を追記します。
SmartPad4iのボタン押下等でアプリケーションサーバー側にHTTPリクエストが送信される前には、cansubmit関数が実行されます。
通常、SmartPad4iのcansbumitを使用する場合、HTML内にcansubmit関数を記述しておく必要があります。

しかし、SmartPad4iで作成しているアプリケーションのHTML全てにcansubmit関数を追記するのは大変なため、SmartPad4iのシステム内に含まれるメソッド SP4i.can$submit()をカスタマイズして追加処理(CSSスピナー表示)を実行するように変更します。

var SP4iExt = null;
$(function(){
    //ローディング
    if(!SP4iExt){
        SP4iExt = {}; SP4iExt.wait = {}; 
        SP4iExt.wait = {
          loadhtml:"",  
          className: ".loader-wrap", 
          show:function(){
              if(!this.loadhtml){
              this.loadhtml =  $('<div class="' + this.className.toString().substr(1) + '" style="z-index:200"><div class="loader">Loading...</div></div>');
                $('body').prepend(this.loadhtml);
              }
              $(this.className).fadeIn();          
              setTimeout(function(){SP4iExt.wait.hide();},20000);
          } ,
          hide:function(){
              $(this.className).fadeOut();
              $(window).off('load');
          }
        } 
        SP4i.can$submit_original = SP4i.can$submit;
        SP4i.can$submit = function(){
           SP4iExt.wait.show();
           return  SP4i.can$submit_original();
        }
        $(window).on('load',function(){
           SP4iExt.wait.hide();
        });    
        SP4iExt.wait.show();
    }
    
});

赤太字の箇所が追加したJavaScriptです。
SP4i.can$submitをSP4i.can$submit_originalに代入後、SP4i.can$submitの処理を書き換えます。
新規に定義されるSP4i.can$submitで、SP4iExt.wait.show()を呼び出します。
SP4iExt.wait.show()でCSSスピナーを表示後、代入したSP4i.can$submit_originalを実行することで元の処理自体を実行しています。

CSSスピナーの表示

上記のJavaScriptが実行されることにより、画面の遷移時に自動的にCSSスピナーが表示されるようになります。

SmartPad4iアプリケーションのHTMLに追加

後はSmartPad4iアプリケーションで使用しているHTMLに、loading.cssとloading.jsの外部読み込みを追加するだけで、処理中表示が実装できます。

しかしながら、注意点が2点あります。

  • SmartPad4iのポップアップ画面にloading.cssとloading.jsの外部読み込みを追加しないこと
  • SmartPad4iのcansubmit関数で処理をキャンセルする場合SP4iExt.wait.hide()を呼び出してCSSスピナーを非表示に設定すること

上記に気を付けて頂き実装すれば、SmartPad4iアプリケーションへ簡単に処理中表示を追加することができますので是非ご活用ください。

Migaro.技術Tips一覧へ

 

株式会社ミガロ．

© 2024 MIGARO CO.,LTD.