Posted on

jQueryプラグインSweetAlert2を使っていいカンジのconfirmをサクッと呼べるラッパー作りました

案件でよくユーザーに処理の実行を問いかけたい時にJavaScriptの標準機能のconfirmを使ったり、情報を表示する際にAlertを使いますが、どこか味気ないし、ブラウザによっても表示がまちまちなので、もうちょっとイイ感じにしたい…そんな時はSweetAlert2を使ってみましょう。

こんなconfirmがサクッと作れます!

SweetAlert2 – a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript’s popup boxes

CSSとJSの読み込みです。sweetalert2はES6のPromiseを使って書かれているようなので、IE11以下や古いAndroidに対応するためにpolyfillを先に読んでおきましょう。

今回はCDNを使用しました。







SweetAlert2は便利なのですが、呼び出す構文にオブジェクトを作ったりする必要がありますが、標準のconfirmのように引数で呼び出せたらラクなんだけどなぁと思ったので、ラッパーを作ってみました。

See the Pen
SweetAlert2 wrapper
by koka (@kokaben)
on CodePen.

ボタン色はBootstrap4のクラスを指定しています。

以下コードをコピーしてページに貼るか、alertmessage.js等のファイルで保存してscriptタグで呼び出してください。

(function (ns) {

// Sweet Alert 2が読み込まれてなければ抜ける
if (typeof Swal === "undefined") {
console.error("プラグイン「SweetAlert2」が読み込まれていません。先にscriptタグで読み込んでください");
return false;
}

var AlertMessage = function () {

// インスタンスがあるかどうかチェック
if (typeof AlertMessage.instance === "object") {
return AlertMessage.instance;
}

// 無ければキャッシュする
AlertMessage.instance = this;
return this;
};

/**
* confirmラッパー
* @param _text String 表示したい内容テキスト
* @param _title String 表示したいタイトルテキスト
* @param _mode string アラートの種類 bootstrapと同じ or 'question' ( ?マーク )
* @param _callback function アラートの結果を受けて関数を呼び出す。引数に成否を渡す
* @param _array [] コールバックに渡したいもの配列
* @constructor
*/
AlertMessage.prototype.confirm = function (_text, _title, _mode, _callback,_array) {

var dispTitle = _title;
if (typeof dispTitle === "undefined") {
dispTitle = "確認";
}

var o = {
allowOutSideClick: false,
showCancelButton: true,
confirmButtonText: 'OK',
cancelButtonText: "キャンセル",
customClass: {
cancelButton: 'btn btn-gray', //bootstrap4のクラス
},
title: dispTitle,
html: _text
};

if (_mode === "success" ||
_mode === "error" ||
_mode === "warning" ||
_mode === "info" ||
_mode === "question") {
o["type"] = _mode;
};

Swal.fire(o).then(function (result) {
var retBool = false;
if (typeof result.value !== "undefined" && result.value === true) {
retBool = true;
}
if(typeof _callback === "function"){
_callback.call(this, retBool,_array);
}
});

};

/**
* Alertラッパー
* @param _text String 表示したい内容テキスト
* @param _title String 表示したいタイトルテキスト
* @param _mode string アラートの種類 bootstrapと同じ or 'question' ( ?マーク )
* @constructor
*/
AlertMessage.prototype.alert = function (_text, _title, _mode) {

var o = {
allowOutSideClick: false,
type: _mode,
title: _title,
html: _text
}
Swal.fire(o);
};

ns.AlertMessage = new AlertMessage();

})(window);

使い方

htmlでボタンを作成します。

削除ボタン 

基本の呼び出し方は以下となります。文言が長いので引数1つずつに改行を入れていますが、横に並べて書いても大丈夫です。

// ボタン押下のイベント
$(document).on("click", "#deleteUserButton", function (e) {
      e.preventDefault(); // 本来のボタン押下の処理のキャンセル
      
      AlertMessage.confirm(
          "ユーザーのデータを削除します。よろしいですか?", // confirm本文
          "ユーザーの削除の確認", // confirmタイトル
          "info", // アラートの種類
          function (_enter) { // コールバック
            if (_enter) {
              // OKが押された時の処理
            }
          });
    });

ボタンを押下するとこんな感じで表示されます。

SweetAlert2のconfirmをいつでもどこでもAlertMessage.confirm()引数で呼べるようになりました。

アラートの種類というのは、表示するアイコンの種類になります。
bootstrapの”success”, “error”, “warning”, “info”で指定できるので慣れている人は直感的に書けます。それに加えて”question”も指定できるのでユーザーに問いかけたい時は非常に便利です。

さらにconfirmのコールバックにさらに配列を渡せるようにしました。使いたい値がある場合は、便利かもしれません。

 var infoArray = ["タンタン", "パンダ", "神戸"];
    
      AlertMessage.confirm(
          "情報を追加してもよろしいですか?", // confirm本文
          "確認", // confirmタイトル
          "question", // アラートの種類
          function (_enter, _array) { // コールバック
            if (_enter) {
              // OKが押された時の処理
              var _text = "";
              $(_array).each(function(i){
                _text += this;
                if(i < _array.length -1){
                _text += ",";
                }
              });
              $("#output").html(_text); //タンタン,パンダ,神戸
            }
          },
          infoArray // コールバックに渡したい配列
          );
    });

ついでにAlertMessage.alert()も作りました。シンプルにアラートが出せます。

AlertMessage.alert(
          "処理を中断します。", // alert本文
          "エラー!", // alertタイトル
          "warning", // アラートの種類
         );

jQueryのプラグインはとても便利ですので、そのプラグインをもっと簡潔に使えるような工夫をすればもっともっと手っ取り早くコーディングができるようになりますよ。

Posted on

jQueryカラーピッカーspectrum.jsの使用方法

案件にて、色を扱いたいといった事があって、サクッと色を選べるプラグインが無いかなと探してみた所、spectrum.jsというイイ感じのプラグインが見つかりましたので、ご紹介したいと思います。

spectrum.js

DEMO

使用方法

このプラグインはjQueryに依存しますので、jQueryを先に読み込ませます。
そして、使用したいhtmlにspectrum.jsとspectrum.cssを読み込みます。
jquery.spectrum-ja.jsは日本語対応です。必要である場合は使用します。





inputにクラス名を付けておきます。


bodyタグの最後にscriptにてspectrumを呼び出します。
パレットに予め色を用意しておきたい場合は、paletteプロパティに配列で色を#RRGGBB形式で入力しておきます。

	jQuery(function($){
		$(".picker").spectrum({
			color: "#f00", //初期色
			showPalette: true, // パレット表示あり
			palette: [ // パレットで使う色を指定
				["#f00", "#0f0", "#00f", "#ff0", "#f0f", "#0ff"]
			]
		});
	});

IE11でsubmitしても値が反映されなかった時の対応

IE11を使用してシステムにsubmitした際、データが飛ばないので探ってみると、カラーピッカーを使用した後にinputのvalueに#RRGGBBの形で値が設定されていませんでした。

spectrumに用意されている`change`イベントでinputを#RRGGBB値に書き換えるようにしてやれば解決しました。

    jQuery(function($){
        $(".picker").spectrum({
			color: "#CF85A1", //初期色
			showPalette: true, // パレット表示あり
			palette: [ // パレットで使う色を指定
				["#CF85A1", "#CCD58D", "#94DAC0", "#A49CDF", "#ACA4E4"]
			],
            change: function(color) {
                $(this).val(color.toHexString());
            }
        });
    });

簡単な設定で細かい色指定ができるので、これは重宝しそうです。

Posted on

全画面ページを簡単に作成!fullpage.jsの使い方とTIPS集

案件で全画面ページを簡単に作るプラグイン「fullpage.js」を使用する事がありました。

今回、レスポンシブ対応にあたって、文章等が1ページの範囲を超える場合があり、その際はスクロールバーを表示してスクロールできるようにしたいため、scrolloverflow.jsも使用しました。

そちらの簡単な使い方とハマった所をtipsとして取り上げます。

初期設定

まずは、必要な読み込みファイルから。

fullpage.js 公式サイト

まず、表示させたいページに必要なCSSとjsを読み込みます。








全画面ページにしたい所は起点の要素(今回はIDがfullpageの要素)と、その子クラスにsectionの名前を付けます。

横スライドも欲しい場合は、section要素にその子のクラスにslideという名前を付けます。

Some section
Some section
Some section
Slide 1
Slide 2
Slide 3
Slide 4
Some section

jQueryを使って呼び出します。

$('#fullpage').fullpage({
   anchors: ['page1', 'page2', 'page3', 'page4'], // ページのアンカー名を指定
   menu: '#global-menu', // グローバルメニューのID名
   scrollOverflow: true, //全画面よりコンテンツが多い場合スクロールバーを出すかどうか
   loopHorizontal:false, //横スライダーをループさせない
   touchSensitivity: 16, //タッチデバイスでのセクション切替の強さの閾値
   afterLoad: function (anchorLink, index) {
    //セクションが読み込み終わりのイベント
    if (index === 1) {
     //TOPロード時
	
    }else if(index === $('#fullpage .section').length){
     //最下ページ時
    }else{
     //その他のページの時
    }
   },
   afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) {
     // スライドが読み込み終わった後のイベント
   },
   onLeave: function (index, nextIndex, direction) {
     // セクションを離れた時のイベント
   },
   onSlideLeave: function (anchorLink, index, slideIndex, direction, nextSlideIndex) {
     // スライドを離れた時のイベント
   },
   afterResize: function () {
    // リサイズ後のイベント
  }
});

グローバルメニューが要る場合には、上記menu:"#global-menu"のように指定して、li要素のdata-menuanchorに上記anchors配列で指定した名前と対応させます。

そうすると、グルーバルメニューのクラスに現在居るページはactiveが付きます。ページが遷移される度に現在居るクラスにactiveが付き、移動元ページのactiveクラスは外れますので、メニューのON/OFFのCSSの装飾などが簡単に作れます。


これで、縦4ページ、3ページ目に横に4スライドある全画面ページが出来上がったと思います。

TIPS

作成に当たって色々とありましたので、そこで得たTipsをドドーンと紹介しちゃいます。

可変サイズ対応

全画面のページのサイズが確定した後にAJAXやdisplay:noneしていた要素を表示させて、表示させている要素が増えた場合、スクロールする領域が足りない事が起きたりします。その際は、rebuild()関数を呼び出して、再度サイズ計算し新たなページのサイズを確定させます。

// フェードイン・フェードアウトの後fullpage.js再計算
$("#recruit-space").fadeToggle(500,function(){
    $.fn.fullpage.reBuild();
})

fullpage.jsの読み込み後に何かをさせたい場合

jQueryのロード時とfullpage.jsのロード時はタイミングとして別になるので、 fullpage.jsが読み込まれた後に処理を走らせたい場合は、afterRender以下に処理を書きます。

afterRender: function () {
    //(例)クリッカブルマップレスポンシブ
     $('img[usemap]').rwdImageMaps();
}

ページを遷移させる度にGoogle Analyticsのコードを送る

fullpage.jsは1ページを複数ページとして見せているだけなので、普通にGoogle Analyticsコードを貼っても該当ページの読み込み時に1回しか送られません。

貼るコードを分けて、縦ページの遷移、横ページをスライドさせた時に、Analyticsのコードを送るように書けば思うようなデータが取れます。

通常のアナリティクスコード読み込みの時に、下の方にあるga('send', 'pageview');を外します。


そして、fullpage.jsの横スライドが読み込まれた際に起きるイベントafterSlideLoad内にga('send'...のコードを書きます。

afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {
   ga('send', 'pageview', { 'page': anchorLink, 'title': slideAnchor });
},

縦ページ遷移に対応するにはadterLoadイベント内に記述します。

  afterLoad: function (anchorLink, index) {
     ga('send', 'pageview', { 'page': anchorLink, 'title':anchorLink });               
  }

まとめ

SPA風にページが手軽に作れたり、アイデア次第で面白いページが作れると思います。その分独自のライフサイクルやイベントがあるのでハマり所があったり、SEO的にはどうなるんだろうと思う所がありましたが、ここまで対応できれば普通に使えそうですね。

また何かあったら追記しようと思います。

fullpage.js 公式サイト