これは MTAppjQuery Advent Calendar 2018の 6日目の記事です。 今回は、MTAppjQuery を利用して、Movable Type 7 の管理画面で SweetAlert2 を導入する方法をご紹介します。
これは MTAppjQuery Advent Calendar 2018 - Adventar の 6日目の記事です。
今回は、MTAppjQuery を利用して、Movable Type 7 の管理画面で 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 をご覧ください。
Movable Type の管理画面をフロントエンドの知識だけで簡単にカスタマイズすることができます。更新担当者が迷うことのない優しい管理画面にするためにぜひお使いください!
以上です。