一瞬だけ表示されるメッセージ(トースト)をnotieでお手軽実装

2020年6月11日ツール関連

Webサービスでは処理が成功したタイミング、失敗したタイミングでユーザにメッセージを表示したいことは結構あります

javascriptにも標準でalert()と言うメソッドがあるんですが、あまりにダサい

そしてそっけないのです

さらにokボタンを押さないと消えません

そんな時に一瞬だけ表示されて、自動的に消えるメッセージがあれば便利です

Androidアプリ開発者にはおなじみのトーストって言うやつです

デモ

百聞は一見に如かず

どんな見た目、動作なのかはこちらのデモで確認してください

notie

そんな時に簡単に実装できるJavascriptライブラリがあります。notieです

数あるアラートサービスの中からnotieを選んだ理由は以下の通りです

  • カラフルな表示で見た目が良い
  • レスポンシブ対応済み
  • 実装が簡単

実装の仕方

1.ファイルのアップロード

githubページからZipファイルをダウンロード

緑のボタン「Clone or download」をクリックしてダウンロードを選択

解凍してdistフォルダ内にある「notie.min.css」と「notie.min.js」を自分のウェブサイトにアップロード

2.アップロードしたファイルを読みこむ

CSSファイルの読み込み

<head>
    <link rel="stylesheet" type="text/css" href="<ファイルをアップロードしたディレクトリ>/notie.min.css">
</head>

JSファイルの読み込み

<body>
    <script src="<ファイルをアップロードしたディレクトリ>/notie.min.js"></script>
</body>

3.呼び出し

notie.alert({ type: 1, text: '成功!'});

オプション

type

typeとして指定する数値を変えることで、アラートの背景色を変更できる

1→緑(success)
2→黄(warning)
3→赤(error)
4→青(info)
5→灰(neutral)

notie.alert({ type: 1, text: '成功!'});

stay

クリックしない限り閉じないようにする。デフォルトはオフ(false)

notie.alert({text: '成功!',stay: true});

time

表示時間(単位は秒)。デフォルトは3、最小は1

notie.alert({ text: '成功!',time: 5});

position

トーストメッセージを表示する位置。上(top)か下(bottom)かの2択。デフォルトは上(top)

notie.alert({ text: '成功!', position: 'bottom'});

エンジニアの年収を上げる方法

フリーランスエンジニアで年収を大幅アップしませんか?
実際に僕は会社員からフリーランスエンジニアになって年収が87万円アップしました

今なら相談(ヒアリング)するだけで3,000円分のamazonギフト券がもらえます!
初めての案件契約で最大10万円分の準備金がもらえます
非公開の高単価案件(100万円超え)が多数あります

詳しくはこちら