Movable Type の管理画面に SweetAlert2 を導入してみよう

これは MTAppjQuery Advent Calendar 2018 - Adventar の 6日目の記事です。

今回は、MTAppjQuery を利用して、Movable Type 7 の管理画面で SweetAlert2 を導入する方法をご紹介します。

SweetAlert2 とは

SweetAlert2 はおしゃれで格好いいアラートウィンドウを表示し、ユーザビリティが格段に向上することができる JaVaScript ライブラリです。

導入方法

システム全体に導入する場合はシステムメニュー、各サイトに限定して導入する場合はサイトメニューの MTAppjQuery の設定画面を開きます。そして下記のテキストエリアに下記のコードを入れて設定を保存します。

• システムメニューの場合 : システム全体に適用する設定 ＞ 自由テキストエリア ＞ user.css の読み込み直前

• サイトメニューの場合 : 自由テキストエリア ＞ user.css の読み込み直前

なお、この CDN の URL は sweetalert2 CDN by jsDelivr - A CDN for npm and GitHub で最新のものを確認してください。

使えるか確認

上記の設定だけで、Movable Type の管理画面で SweetAlert2 が使えるようになっています。

試しに、ブラウザの JavaScript コンソールを開いて、下記のコードをコピペして実行してみてください。

swal('Installation is completed!')

下図のような素敵なアラートが表示されれば成功です。

詳しい利用方法は、 SweetAlert2 をご覧ください。

MTAppjQuery について

Movable Type の管理画面をフロントエンドの知識だけで簡単にカスタマイズすることができます。更新担当者が迷うことのない優しい管理画面にするためにぜひお使いください！

• MTAppjQuery | Movable Type プラグイン | bit part 合同会社

以上です。