新規投稿
フォローする

「SweetAlert 2.x」と「SweetAlert2」の違い

「SweetAlert」は簡単におしゃれなアラートを実装できるJavaScriptライブラリです。 最新の「SweetAlert」には、「SweetAlert 2.x」「SweetAlert2」があります。 どちらも、Cybozu CDNにサポートされているのでご利用ください。

ここではサンプルを通して、「SweetAlert 2.x」と「SweetAlert2」の記法の違いを見てみます。

サンプル

フィールドの準必須設定を実装します。 準必須に設定したフィールドが空のままsubmitされた場合、入力フィールド付きでアラートを表示します。

※本サンプルが対応するフィールド形式は、「文字列(1行)」、「文字列(複数行)」、「数値」、「ドロップダウン」のみです。

デモ



※「Microsoft Windows 10 Home」の「Chrome」での表示例です。

コード

「SweetAlert 2.x」の場合

(function() {
  "use strict";
  var semiRequireds = ['タイトル', '著者', '要約', 'ページ数', 'カテゴリ']; //準必須にするフィールドのフィールドコード
  var formSettings = kintone.api('/k/v1/app/form/fields', 'GET', {app: kintone.app.getId()});
  function semiRequire2x(event, fieldCodes, index){
    if(!index) var index = 0;
    return swal((function(fieldCode){
      var content;
      switch(event.record[fieldCode].type){
        case 'MULTI_LINE_TEXT':
          content = document.createElement('textarea');
          content.addEventListener('change', function(e){
            swal.setActionValue(e.target.value);
          });
          break;
        case 'NUMBER':
          content = {
            element: 'input',
            attributes: {
              type: 'number'
            }
          };
          break;
        case 'DROP_DOWN':
          content = document.createElement('select');
          content.add(new Option(''));
          Object.keys(formSettings._result.properties[fieldCode].options)
            .forEach(function(option){
              content.add(new Option(option, option));
            });
          content.addEventListener('change', function(e){
            swal.setActionValue(e.target.value);
          });
          break;
        default:
          content = 'input';
          break;
      }
      return {
        title: fieldCode,
        text: '入力しなくてよろしいですか?',
        content: content,
        buttons: {
          confirm: {
            value: '',
          }
        }
      };
    }(fieldCodes[index]))).then(function(result){
      event.record[fieldCodes[index]].value = result;
      if(fieldCodes.length == ++index){
        return event;
      }else{
        return semiRequire2x(event, fieldCodes, index);
      }
    });
  }
  kintone.events.on(['app.record.create.submit', 'app.record.edit.submit'], function(event){
    var fieldCodes = [];
    for(var fieldCode in event.record){
      if(semiRequireds.indexOf(fieldCode)>=0 && !event.record[fieldCode].value){
        fieldCodes.push(fieldCode);
      }
    }
    return semiRequire2x(event, fieldCodes);
  });
})();

「SweetAlert2」の場合

(function() {
  "use strict";
  var semiRequireds = ['タイトル', '著者', '要約', 'ページ数', 'カテゴリ']; //準必須にするフィールドのフィールドコード
  var formSettings = kintone.api('/k/v1/app/form/fields', 'GET', {app: kintone.app.getId()});
  function semiRequire2(event, fieldCodes){
    return swal.mixin({
      text: '入力しなくてよろしいですか?'
    }).queue(
      fieldCodes.map(function(fieldCode){
        var input, inputOptions = false;
        switch(event.record[fieldCode].type){
          case 'MULTI_LINE_TEXT':
            input = 'textarea';
            break;
          case 'NUMBER':
            input = 'number';
            break;
          case 'DROP_DOWN':
            input = 'select';
            inputOptions =
              Object.keys(formSettings._result.properties[fieldCode].options)
                .reduce(function(options, option){
                  options[option] = option;
                  return options;
                }, {'':''}
              );
            break;
          default:
            input = 'text';
            break;
        }
        return {
          title: fieldCode,
          input: input,
          inputOptions: inputOptions
        };
      })
    ).then(function(result){
      if(result.dismiss) return false;
      fieldCodes.forEach(function(fieldCode, index){
        event.record[fieldCode].value = result.value[index];
      })
      return event;
    });
  }
  kintone.events.on(['app.record.create.submit', 'app.record.edit.submit'], function(event){
    var fieldCodes = [];
    for(var fieldCode in event.record){
      if(semiRequireds.indexOf(fieldCode)>=0 && !event.record[fieldCode].value){
        fieldCodes.push(fieldCode);
      }
    }
    return semiRequire2(event, fieldCodes);
  });
})();

感想

「SweetAlert 2.x」の方がシンプル、「SweetAlert2」の方がオプションが豊富という印象でした。

「SweetAlert 2.x」は、「content.element」と「content.attributes.type」を用いてフォーム部品を指定するので、HTMLを書いている感覚に近かったです。

「SweetAlert2」は、サポートしているフォーム部品のタイプが多いのでセレクトボックスなども比較的容易に作れました。

・「SweetAlert 2.x」の場合

case 'DROP_DOWN':
  content = document.createElement('select');
  content.add(new Option(''));
  Object.keys(formSettings._result.properties[fieldCode].options)
    .forEach(function(option){
      content.add(new Option(option, option));
    });
  content.addEventListener('change', function(e){
    swal.setActionValue(e.target.value);
  });
  break;

・「SweetAlert2」の場合

case 'DROP_DOWN':
  input = 'select';
  inputOptions =
    Object.keys(formSettings._result.properties[fieldCode].options)
      .reduce(function(options, option){
        options[option] = option;
        return options;
      }, {'':''}
    );
  break;

また今回のようにアラートを複数表示する場合は、「SweetAlert2」独自実装の「mixin」メソッドが便利でした。

違いは他にもあるので、実装に合わせて使い分けるとよいと思います。

4

0件のコメント

サインインしてコメントを残してください。